diff --git a/client/cryps.css b/client/cryps.css index 7e635e30..6490fa65 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -166,6 +166,11 @@ img { stroke: #6AD1BF; } +.gray { + color: #333; + stroke: #333; +} + /* LOGIN */ @@ -464,9 +469,9 @@ button[disabled] { .vbox-btn { flex: 1 0 100%; margin: 0; - padding: 0 0.5em; background-color: whitesmoke; color: black; + border-width: 0; } .vbox-btn:hover { @@ -710,7 +715,7 @@ table td svg { border-top-width: 1px; } -.instance-cryp:first-child { +.instance-cryp button:first-child { border-top-width: 0; } diff --git a/client/src/components/instance.cryps.jsx b/client/src/components/instance.cryps.jsx index 6ae4013e..eda591bb 100644 --- a/client/src/components/instance.cryps.jsx +++ b/client/src/components/instance.cryps.jsx @@ -107,19 +107,19 @@ function Cryp(props) { ); }); - const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green; - const colours = mapValues(cryp.colours, c => { - if (cTotal === 0) return 245; - return Math.floor(c / cTotal * 255); - }); - const alpha = cTotal === 0 ? 1 : 0.75; - const thickness = total => { - if (total < 3) return 1; - if (total < 6) return 2; - if (total < 9) return 3; - return 4; - }; - const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` }; + // const cTotal = cryp.colours.red + cryp.colours.blue + cryp.colours.green; + // const colours = mapValues(cryp.colours, c => { + // if (cTotal === 0) return 245; + // return Math.floor(c / cTotal * 255); + // }); + // const alpha = cTotal === 0 ? 1 : 0.75; + // const thickness = total => { + // if (total < 3) return 1; + // if (total < 6) return 2; + // if (total < 9) return 3; + // return 4; + // }; + // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` }; return (
@@ -148,6 +147,7 @@ function Cryp(props) { function InstanceCryps(props) { const { player, + instance, activeCryp, activeVar, @@ -159,9 +159,10 @@ function InstanceCryps(props) { } = props; if (!player) return false; + if (instance.phase === 'Lobby') return false; const infoSelected = activeVar !== null || activeCryp; - const crypListClass = `cryp-list ${infoSelected ? '' : 'hidden'}`; + const crypListClass = `cryp-list`; const cryps = player.cryps.map((c, i) => Cryp({ cryp: c, sendVboxApply, setInfo, activeVar, setActiveCryp, diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index aa169a27..6462bdb5 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -22,7 +22,7 @@ function Vbox(args) { activeVar, activeCryp, player, - // instance, + instance, combiner, reclaiming, sendVboxAccept, @@ -36,6 +36,7 @@ function Vbox(args) { } = args; if (!player) return false; + if (instance.phase === 'Lobby') return false; const { vbox } = player; // @@ -130,7 +131,10 @@ function Vbox(args) { function boundClick(e, i) { if (reclaiming && vbox.bound[i]) sendVboxReclaim(i); else if (vbox.bound[i]) { - const insert = combiner.findIndex(j => j === null); + const insert = ['Red', 'Green', 'Blue'].includes(vbox.bound[i]) + ? combiner.findIndex(j => j === null) + : 2; + if (insert === -1) return setCombiner([i, null, null]); combiner[insert] = i; boundTimer = null; @@ -193,9 +197,15 @@ function Vbox(args) { - - - + + +
combinerRmv(0)}>{convertVar(vbox.bound[combiner[0]])} combinerRmv(1)}>{convertVar(vbox.bound[combiner[1]])} combinerRmv(2)}>{convertVar(vbox.bound[combiner[2]])} combinerRmv(0)}> + {combiner[0] !== null ? convertVar(vbox.bound[combiner[0]]) : shapes.vboxColour('gray')} + combinerRmv(1)}> + {combiner[1] !== null ? convertVar(vbox.bound[combiner[1]]) : shapes.vboxColour('gray')} + combinerRmv(2)}> + {convertVar(vbox.bound[combiner[2]])} +