Started plumbing in house rules

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Actions.js

@@ -7,7 +7,11 @@ import "./Actions.css";
 import { PlayerName } from './PlayerName.js';
 import { GlobalContext } from "./GlobalContext.js";
 
-const Actions = ({tradeActive, setTradeActive, buildActive, setBuildActive}) => {
+const Actions = ({
+  tradeActive, setTradeActive, 
+  buildActive, setBuildActive,
+  houseRulesActive, setHouseRulesActive
+}) => {
   const { ws, gameId, name } = useContext(GlobalContext);
   const [state, setState] = useState('lobby');
   const [color, setColor] = useState(undefined);
@@ -130,6 +134,11 @@ const Actions = ({tradeActive, setTradeActive, buildActive, setBuildActive}) =>
     if (buildActive) setBuildActive(false);
   }
 
+  const houseRulesClick = () => {
+    /* sendMessage({ type: 'house-rules' }); */
+    setHouseRulesActive(!houseRulesActive);
+  }
+
   const startClick = () => {
     sendMessage({ 
       type: 'set',
@@ -167,9 +176,13 @@ const Actions = ({tradeActive, setTradeActive, buildActive, setBuildActive}) =>
       { edit === "" && <PlayerName name={name} setName={setName}/> }
       <div className="Buttons">
       { name && inLobby && <>
-        <Button disabled={(color && active >= 2) ? false : true } onClick={startClick}>Start game</Button>
+        <Button disabled={(color && active >= 2) ? false : true } 
-        <Button disabled={color ? false : true} onClick={newTableClick}>New table</Button>
+          onClick={startClick}>Start game</Button>
+        <Button disabled={color ? false : true} 
+          onClick={newTableClick}>New table</Button>
       </> }
+      { name && color && <Button disabled={color ? false : true}
+        onClick={houseRulesClick}>House Rules</Button> }
       { name && !color && <Button disabled={color ? true : false} onClick={changeNameClick}>Change name</Button> }
       { name && !inLobby && <>
         <Button disabled={

client/src/App.css

@@ -158,6 +158,15 @@ body {
   bottom: 0;
 }
 
+
+.Table .HouseRules {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
 .Table .ChooseCard {
   display: flex;
   position: relative;

client/src/App.js

@@ -25,6 +25,7 @@ import { ChooseCard } from "./ChooseCard.js";
 import { Hand } from "./Hand.js";
 import { Trade } from "./Trade.js";
 import { Winner } from "./Winner.js";
+import { HouseRules } from "./HouseRules.js";
 
 import history from "./history.js";
 import "./App.css";
@@ -47,6 +48,7 @@ const Table = () => {
   const [buildActive, setBuildActive] = useState(false);
   const [tradeActive, setTradeActive] = useState(false);
   const [cardActive, setCardActive] = useState(undefined);
+  const [houseRulesActive, setHouseRulesActive] = useState(undefined);
   const [winnerDismissed, setWinnerDismissed] = useState(undefined);
   const [global, setGlobal] = useState({});
   const [count, setCount] = useState(0);
@@ -337,6 +339,7 @@ const Table = () => {
             { state === 'normal' && <SelectPlayer/> }
             { color && state === 'game-order' && <GameOrder/> }
             { !winnerDismissed && <Winner {...{winnerDismissed, setWinnerDismissed}}/> }
+            { houseRulesActive && <HouseRules {...{houseRulesActive, setHouseRulesActive}}/> }
             <ViewCard {...{cardActive, setCardActive }}/>
             <ChooseCard/>
           </div>
@@ -351,7 +354,11 @@ const Table = () => {
           <Trade {...{tradeActive, setTradeActive}}/>
           { name !== "" && <Chat/> }
           { /* name !== "" && <VideoFeeds/> */ }
-          { loaded && <Actions {...{buildActive, setBuildActive, tradeActive, setTradeActive}}/> }
+          { loaded && <Actions {
+            ...{buildActive, setBuildActive, 
+              tradeActive, setTradeActive,
+              houseRulesActive, setHouseRulesActive
+              }}/> }
         </div>
       </div>
     </GlobalContext.Provider>;

client/src/HouseRules.css

@@ -0,0 +1,48 @@
+.HouseRules {
+  display: flex;
+  position: absolute;
+  left: 0;
+  right: 30rem;
+  bottom: 0;
+  top: 0;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,0.5);
+  z-index: 1000;
+  max-height: 100vh;
+  overflow: auto;
+}
+
+.HouseRules > * {
+  max-height: calc(100vh - 2em);
+  overflow: auto;
+  margin: 0.5em;
+  width: 40em;
+  display: inline-flex;
+  padding: 0.5em;
+  flex-direction: column;
+}
+
+.HouseRules .HouseRule {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.HouseRules .HouseRule .MuiSwitch-root {
+
+}
+
+.HouseRules .Title {
+  align-self: center;
+  padding: 2px;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+}
+
+.HouseRules .HouseRule b {
+  margin: 0;/* 0.25rem;*/
+}
+
+

client/src/HouseRules.js

@@ -0,0 +1,127 @@
+import React, { useState, useEffect, useContext, useRef, useMemo, useCallback } from "react";
+import equal from "fast-deep-equal";
+
+import Paper from '@material-ui/core/Paper';
+import Button from '@material-ui/core/Button';
+import Switch from '@material-ui/core/Switch';
+
+import "./HouseRules.css";
+
+import { GlobalContext } from "./GlobalContext.js";
+
+const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
+  const { ws } = useContext(GlobalContext);
+  const [houseRules, setHouseRules] = useState(undefined);
+  const [state, setState] = useState(undefined);
+  const fields = useMemo(() => [
+    'state', 'rules'
+  ], []);
+  const onWsMessage = (event) => {
+    const data = JSON.parse(event.data);
+    switch (data.type) {
+    case 'game-update':
+      console.log(`house-rules - game update`, data.update);
+      if ('state' in data.update && data.update.state !== state) {
+        setState(data.update.state);
+      }
+      if ('rules' in data.update && !equal(data.update.rules, rules)) {
+        setHouseRules(data.update.rules);
+      }
+      break;
+    default:
+      break;
+    }
+  };
+  const refWsMessage = useRef(onWsMessage);
+  useEffect(() => { refWsMessage.current = onWsMessage; });
+  useEffect(() => {
+    if (!ws) { return; }
+    const cbMessage = e => refWsMessage.current(e);
+    ws.addEventListener('message', cbMessage);
+    return () => {
+      ws.removeEventListener('message', cbMessage);
+    }
+  }, [ws, refWsMessage]);
+  useEffect(() => {
+    if (!ws) { return; }
+    ws.send(JSON.stringify({ 
+      type: 'get', 
+      fields
+    }));
+  }, [ws, fields]);
+
+  const dismissClicked = useCallback((event) => {
+    setHouseRulesActive(false);
+    /*
+      ws.send(JSON.stringify({
+        type: 'goto-lobby'
+      }));
+    }*/
+  }, [setHouseRulesActive]);//ws, HouseRulesDismissed, setHouseRulesDismissed]);
+
+  if (!houseRulesActive) {
+    return <></>;
+  }
+
+  const setRule = (event, key) => {
+    console.log(event, key);
+  };
+
+  const rules = [ {
+    title: `Tiles start facing down`,
+    description: `Flip resource tiles upside - down while placing starting settlements.`,
+  }, {
+    title: `Bribery`,
+    description: `Dissuade enemies from robbing you by offering resources voluntarily.`,
+  }, {
+    title: `King of the Hill`,
+    description: `Keep your lead for one full turn after you reach max victory points.`,
+  }, {
+    title: `Everyone gets one re-roll`,
+    description: `Each player gets one chance re - roll at any point.`,
+  }, {
+    title: `The Bridge`,
+    description: `Build a super-bridge across one resource tile.`,
+  }, {
+    title: `Discard desert`,
+    description: `Scrap the desert in favour of an additional resource tile.`,
+  }, {
+    title: `Roll double, roll again`,
+    description: `Roll again if you roll two of the same number.`,
+  }, {
+    title: `Robin Hood robber`,
+    description: `Robbers can't steal from players with fewer than two victory points.`,
+  }, {
+    title: `Crime and Punishment`,
+    description: `Change how the robber works to make Catan more or less competitive.`,
+  }, {
+    title: `Credit`,
+    description: `Trade with resources you don't have.`,
+  } ].map(item => {
+    item.key = item.title
+      .replace(/( +)|[,]/g, '-')
+      .toLowerCase();
+    const disabled = (state !== 'lobby'),
+      checked = houseRules && item.key in houseRules;
+     return <div className="HouseRule" key={item.key}>
+      <div><b>{item.title}</b>: {item.description}</div>
+      <Switch checked={checked} 
+        onChange={(e) => setRule(e, item.key)}
+        {...{disabled}} />
+    </div>
+  });
+
+  return (
+    <div className="HouseRules">
+      <Paper>
+        <div className="Title">House Rules</div>
+        <div style={{display: 'flex', flexDirection: 'column'}}>
+          { rules }
+        </div>
+        <Button onClick={dismissClicked}>Close</Button>
+      </Paper>
+    </div>
+  );
+};
+
+export { HouseRules };