board-game-engine-react 0.0.9 → 0.0.11

package/package.json

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

package/rollup.config.js

@@ -1,22 +1,21 @@
 import babel from '@rollup/plugin-babel'
 import { terser } from 'rollup-plugin-terser'
 import scss from 'rollup-plugin-scss'
-import resolve from 'rollup-plugin-node-resolve'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
 
 const config = [
   {
     input: 'src/index.js',
     external: ['react'],
     output: {
-      format: 'umd',
+      format: 'esm',
       file: 'dist/board-game-engine-react.js',
-      name: 'BoardGameEngineReact'
     },
     plugins: [
-      resolve({
-      }),
-      babel({
-      }),
+      resolve(),
+      commonjs({ include: /node_modules/ }),
+      babel(),
       scss()
     ]
   },
@@ -24,17 +23,17 @@ const config = [
     input: 'src/index.js',
     external: ['react'],
     output: {
-      format: 'umd',
+      format: 'esm',
       file: 'dist/board-game-engine-react.min.js',
-      name: 'BoardGameEngineReact'
     },
     plugins: [
-      resolve({
-      }),
-      babel({
-      }),
+      resolve(),
+      commonjs({ include: /node_modules/ }),
+      babel(),
       scss({ outputStyle: 'compressed' }),
+
       terser()
+
     ]
   }
 ]

package/src/styles.scss

@@ -2,3 +2,169 @@ 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, .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, .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;
+}
+

package/src/use-gameserver-connection.js

@@ -1,5 +1,6 @@
 import { useEffect, useReducer, useState } from 'react'
 import * as BoardGameEngine from 'board-game-engine'
+console.log('BoardGameEngine', BoardGameEngine)
 const Client = BoardGameEngine.Client