board-game-engine-react 0.0.12 → 0.0.14

package/dist/board-game-engine-react.css

@@ -1,4 +1,9 @@
 @charset "UTF-8";
+:root {
+  --dark-orange: #F58F29;
+  --dark-amethyst: #380036;
+  --lipstick-red: #EC0B43; }
+
 html, body, #storybook-root, .story {
   height: 100%; }
 
@@ -109,6 +114,7 @@ html, body, #storybook-root, .story {
   max-width: 420px !important; }
 
 .game-status {
+  text-align: center;
   position: absolute;
   top: 50%;
   left: 0;

package/dist/board-game-engine-react.min.css

@@ -1 +1 @@
-html,body,#storybook-root,.story{height:100%}.button{border:3px solid var(--dark-amethyst);display:inline-block;padding:.5em;font-size:1.5em;font-family:inherit;text-decoration:none;cursor:pointer;border-radius:.3em;box-shadow:0 4px 6px rgba(0,0,0,0.15);margin:.5em}.button--style-b{background-color:var(--dark-amethyst);color:white}.button--style-c{background-color:var(--lipstick-red);color:white}.button--x-small{font-size:.9em;padding:.3em .5em;border-radius:.2em}.game{color:black}.shared-board,.personal-board{padding:1em 0;border-bottom:1px solid white}.grid{border:1px solid black;box-sizing:border-box;background-color:#333;max-width:500px}.grid__cell{border:1px solid black;background-color:#fff;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:#666;position:relative;overflow:auto}.grid__cell .space{height:100%;width:100%}.space{box-sizing:border-box;min-width:10px;min-height:10px}.space:not(:has(.entity)):not(.grid__cell>:only-child){border:1px solid grey}.space--clickable{background-color:rgba(144,238,144,0.4)}.space--targeted{background-color:grey}.space__entity-grid{box-sizing:border-box;align-items:center;justify-content:center}.space__entity-grid__cell{box-sizing:border-box;overflow:auto}.entity{padding:.2em;min-height:20px;min-width:20px;box-sizing:border-box;border:1px solid black;overflow:hidden;font-size:.5em;font-family:"Nunito", sans-serif;font-weight:bold;display:inline-block}.entity.player-0{background-color:pink}.entity--clickable{background-color:rgba(144,238,144,0.4)}.entity.player-0.entity--clickable{background-color:#f0e0d8}.entity.player-1{background-color:lightblue}.entity.player-1.entity--clickable{background-color:paleturquoise}.debug-panel .pane{max-width:420px !important}.game-status{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;border-top:1em;border-bottom:1em;padding:1em;background-color:var(--dark-orange);color:black;box-sizing:border-box;font-size:3em}.debug-panel .visibility-toggle{top:70px !important}.debug-panel .visibility-toggle svg{display:none}.debug-panel .visibility-toggle .icon::after{position:relative;left:3px;content:"⚙️";font-size:20px;display:block;width:20px;height:20px}.debug-panel .menu{position:relative;top:70px !important}
+:root{--dark-orange: #F58F29;--dark-amethyst: #380036;--lipstick-red: #EC0B43}html,body,#storybook-root,.story{height:100%}.button{border:3px solid var(--dark-amethyst);display:inline-block;padding:.5em;font-size:1.5em;font-family:inherit;text-decoration:none;cursor:pointer;border-radius:.3em;box-shadow:0 4px 6px rgba(0,0,0,0.15);margin:.5em}.button--style-b{background-color:var(--dark-amethyst);color:white}.button--style-c{background-color:var(--lipstick-red);color:white}.button--x-small{font-size:.9em;padding:.3em .5em;border-radius:.2em}.game{color:black}.shared-board,.personal-board{padding:1em 0;border-bottom:1px solid white}.grid{border:1px solid black;box-sizing:border-box;background-color:#333;max-width:500px}.grid__cell{border:1px solid black;background-color:#fff;aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:#666;position:relative;overflow:auto}.grid__cell .space{height:100%;width:100%}.space{box-sizing:border-box;min-width:10px;min-height:10px}.space:not(:has(.entity)):not(.grid__cell>:only-child){border:1px solid grey}.space--clickable{background-color:rgba(144,238,144,0.4)}.space--targeted{background-color:grey}.space__entity-grid{box-sizing:border-box;align-items:center;justify-content:center}.space__entity-grid__cell{box-sizing:border-box;overflow:auto}.entity{padding:.2em;min-height:20px;min-width:20px;box-sizing:border-box;border:1px solid black;overflow:hidden;font-size:.5em;font-family:"Nunito", sans-serif;font-weight:bold;display:inline-block}.entity.player-0{background-color:pink}.entity--clickable{background-color:rgba(144,238,144,0.4)}.entity.player-0.entity--clickable{background-color:#f0e0d8}.entity.player-1{background-color:lightblue}.entity.player-1.entity--clickable{background-color:paleturquoise}.debug-panel .pane{max-width:420px !important}.game-status{text-align:center;position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;border-top:1em;border-bottom:1em;padding:1em;background-color:var(--dark-orange);color:black;box-sizing:border-box;font-size:3em}.debug-panel .visibility-toggle{top:70px !important}.debug-panel .visibility-toggle svg{display:none}.debug-panel .visibility-toggle .icon::after{position:relative;left:3px;content:"⚙️";font-size:20px;display:block;width:20px;height:20px}.debug-panel .menu{position:relative;top:70px !important}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "board-game-engine-react",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "React library for using board-game-engine",
   "main": "dist/board-game-engine-react.js",
   "scripts": {

package/src/styles.scss

@@ -1,3 +1,9 @@
+:root {
+  --dark-orange: #F58F29;
+  --dark-amethyst: #380036;
+  --lipstick-red: #EC0B43;
+}
+
 html, body, #storybook-root, .story, {
   height: 100%;
 }
@@ -131,6 +137,7 @@ html, body, #storybook-root, .story, {
 }
 
 .game-status {
+  text-align: center;
   position: absolute;
   top: 50%;
   left: 0;

package/stories/BoardGameEngineReact.stories.js

@@ -1,49 +1,47 @@
 import React from 'react'
-import BoardGameEngineReact from '../src/index'
+import { Game, useGameserverConnection } from '../src/index'
+import ticTacToe from './tic-tac-toe.json'
 import { ErrorBoundary } from 'react-error-boundary'
 import './styles.css'
 
-const dialogue = `
-title: Start
----
-Red: Hello.
-Blue: Hi!
-Red: I'm here.
-Blue: I'm here too!
-===
-`
-
 export default {
-  title: 'BoardGameEngineReact',
-  component: BoardGameEngineReact,
+  title: 'Game',
+  component: Game,
   className: 'board-game-engine-react',
   args: {
-    dialogue,
+    gameRules: JSON.stringify(ticTacToe, null, 2),
+    numPlayers: 2,
   },
   argTypes: {
-    dialogue: {
+    gameRules: {
       control: 'text'
+    },
+    numPlayers: {
+      control: 'number'
     }
   }
 }
 
-const Template = (props) => {
+const Template = ({ gameRules, numPlayers }) => {
+  const gameConnection = useGameserverConnection({
+    gameRules,
+    singlePlayer: true,
+    numPlayers,
+  })
+
   return (
     <div className="story">
       <ErrorBoundary
-        resetKeys={[props.dialogue]}
+        resetKeys={[gameRules, numPlayers]}
         fallbackRender={({ error }) => {
           return (
             <div>
-              Invalid Dialogue: {error.message}
+              Invalid Game Rules {error}
             </div>
           )
         }}
       >
-        <BoardGameEngineReact
-          {...props}
-          onDialogueEnd={() => { alert('onDialogueEnd called') }}
-        />
+        <Game gameConnection={gameConnection} />
       </ErrorBoundary>
     </div>
   )

package/stories/tic-tac-toe.json

@@ -0,0 +1,53 @@
+{
+  "entities": [
+    {
+      "name": "mainGrid",
+      "type": "Grid",
+      "width": 3,
+      "height": 3
+    }
+  ],
+  "numPlayers": 2,
+  "moves": {
+    "placePlayerMarker": {
+      "type": "PlaceNew",
+      "entity": {
+        "thatMatches": "isCurrentPlayer"
+      },
+      "arguments": {
+        "destination": {
+          "thatMatches": [
+            { "type": "Space" },
+            "isEmpty"
+          ],
+          "playerChoice": true
+        }
+      }
+    }
+  },
+  "endConditions": [
+    {
+      "conditions": [{
+        "conditionType": "HasLine",
+        "target": "mainGrid",
+        "sequence": [
+          {
+            "minCount": 3,
+            "conditions": [{
+              "conditionType": "ContainsSame",
+              "properties": ["player"]
+            }]
+          }
+        ]
+      }],
+      "result": { "winner": "ownerOfFirstResultEntity" }
+    },
+    {
+      "conditions": [{
+        "conditionType": "IsFull",
+        "target": "mainGrid"
+      }],
+      "result": { "draw": true }
+    }
+  ]
+}