Setting houserules toggles switch

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

client/src/HouseRules.js

@@ -55,6 +55,7 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
   const [houseRules, setHouseRules] = useState(undefined);
   const [state, setState] = useState(undefined);
   const [rules, setRules] = useState([]);
+  const [ruleElements, setRuleElements] = useState([]);
   const fields = useMemo(() => [
     'state', 'rules'
   ], []);
@@ -120,13 +121,14 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
   }, [ws, houseRules]);
 
   useEffect(() => {
-    setRules([ {
+    const _rules = [ {
       title: `More victory points`,
       key: `victory-points`,
       description: `Customize how many Victory Points are required to win. ` +
         `The minimum number of Victory Points is 10.`,
       element: <VictoryPoints {...{ ws, houseRules, 
         field: `victory-points` }}/>,
+      implemented: true
     }, {
       title: `Tiles start facing down`,
       key: `tiles-start-facing-down`,
@@ -187,7 +189,8 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
       title: `Robin Hood robber`,
       key: `robin-hood-robber`,
       description: `Robbers can't steal from players with two or less victory points.`,
-      element: <></>
+      element: <></>,
+      implemented: true
     }, {
       title: `Crime and Punishment`,
       key: `crime-and-punishment`,
@@ -205,8 +208,24 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
         field: `credit`
       }} />,
     } ]
+    .sort((A, B) => {
+      if (A.implemented && B.implemented) {
+        return A.title.localeCompare();
+      }
+      if (A.implemented) {
+        return -1;
+      }
+      if (B.implemented) {
+        return +1;
+      }
+      return A.title.localeCompare();
+    });
+
+    setRules(_rules);
+
+    setRuleElements(_rules
     .map(item => {
-      const disabled = (state !== 'lobby'),
+      const disabled = (state !== 'lobby' || !item.implemented),
         defaultChecked = houseRules 
         && (item.key in houseRules)
         ? houseRules[item.key].enabled 
@@ -218,12 +237,16 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
           houseRules
         && item.key in houseRules 
         && houseRules[item.key].enabled}
-        data-disabled={disabled} key={item.key}>
+        data-disabled={disabled} 
+        key={item.key}
+        data-key={item.key}>
         <div className="HouseSelector">
           <div><b>{item.title}</b>: {item.description}</div>
           <Switch 
-            inputProps={{ 'aria-label': 'controlled' }}
-            value={defaultChecked}
+            size={'small'}
+            className="RuleSwitch"
+            checked={defaultChecked}
+            id={item.key}
             onChange={(e) => setRule(e, item.key)}
               {...{ disabled }} />
         </div>
@@ -241,7 +264,7 @@ const HouseRules = ({ houseRulesActive, setHouseRulesActive }) => {
       <Paper>
         <div className="Title">House Rules</div>
         <div style={{display: 'flex', flexDirection: 'column'}}>
-          { rules }
+          { ruleElements }
         </div>
         <Button onClick={dismissClicked}>Close</Button>
       </Paper>