From 145f8e6a3589be3c9e7fbc92986e19c0c7890cdb Mon Sep 17 00:00:00 2001 From: ntr Date: Sat, 20 Jul 2019 18:04:08 +1000 Subject: [PATCH] wip" --- client/assets/styles/game.css | 4 + client/assets/styles/instance.css | 4 +- client/assets/styles/vbox.less | 49 +++++++ client/index.js | 1 + client/package.json | 3 +- client/src/components/instance.constructs.jsx | 2 +- client/src/components/nav.jsx | 7 - client/src/components/shapes.jsx | 3 +- client/src/components/svgs/vbox.colour.jsx | 15 ++ client/src/components/vbox.component.jsx | 128 +++++++++--------- server/src/construct.rs | 2 +- server/src/names.rs | 11 +- 12 files changed, 151 insertions(+), 78 deletions(-) create mode 100644 client/assets/styles/vbox.less create mode 100644 client/src/components/svgs/vbox.colour.jsx diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index f4898539..d6ccd3d8 100644 --- a/client/assets/styles/game.css +++ b/client/assets/styles/game.css @@ -454,4 +454,8 @@ #mnml .game .skills button, #mnml .game .stats { font-size: 75%; } + + .game-construct .name { + display: none; + } } \ No newline at end of file diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index d1b666b5..759454ab 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -164,7 +164,7 @@ } } -.vbox button { +.vbox-btn { width: 100%; margin: 0; background-color: #333; @@ -179,7 +179,7 @@ cursor: pointer; } -.vbox-table td:active { +.vbox-table td:active, .vbox-table td:focus { background: whitesmoke; color: black; } diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less new file mode 100644 index 00000000..6da095e6 --- /dev/null +++ b/client/assets/styles/vbox.less @@ -0,0 +1,49 @@ +@green: #1FF01F; +@red: #a52a2a; +@blue: #3498db; +@white: #f5f5f5; // whitesmoke +@purple: #9355b5; // 6lack - that far cover + +.vbox-vbox { + grid-area: vbox; + + display: flex; + flex-flow: column; + + .vbox-colours { + display: grid; + grid-template-columns: repeat(6, 1fr); + grid-gap: 1em; + align-items: center; + margin: 1em 0; + + svg { + width: 100%; + stroke: none; + border: 2px solid #222; + } + + svg.red { + fill: @red; + } + + svg.green { + fill: @green; + } + + .blue { + fill: @blue; + } + } + + .vbox-skills, .vbox-specs { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 1em; + align-items: center; + + button { + width: 100%; + } + } +} diff --git a/client/index.js b/client/index.js index 8f409800..636aa1df 100644 --- a/client/index.js +++ b/client/index.js @@ -1,6 +1,7 @@ require('./assets/styles/styles.css'); require('./assets/styles/styles.mobile.css'); require('./assets/styles/instance.css'); +require('./assets/styles/vbox.less'); require('./assets/styles/instance.mobile.css'); require('./assets/styles/game.css'); diff --git a/client/package.json b/client/package.json index 1b7ef7c6..842310a9 100644 --- a/client/package.json +++ b/client/package.json @@ -40,7 +40,8 @@ "eslint-config-airbnb-base": "^13.1.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-react": "^7.11.1", - "jest": "^18.0.0" + "jest": "^18.0.0", + "less": "^3.9.0" }, "alias": { "react": "preact-compat", diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index a7eb6b53..9b79cb4a 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -140,7 +140,7 @@ function Construct(props) { ); }); - const specs = range(0, 6).map(i => { + const specs = range(0, 3).map(i => { const s = construct.specs[i]; if (!s) { diff --git a/client/src/components/nav.jsx b/client/src/components/nav.jsx index 30fd9981..d658a6de 100644 --- a/client/src/components/nav.jsx +++ b/client/src/components/nav.jsx @@ -26,10 +26,6 @@ const addState = connect( return ws.sendInstanceState(instance.id); } - function sendAccountInstances() { - return ws.sendAccountInstances(); - } - function sendInstanceList() { return ws.sendInstanceList(); } @@ -41,7 +37,6 @@ const addState = connect( game, ping, sendInstanceState, - sendAccountInstances, sendInstanceList, }; }, @@ -90,7 +85,6 @@ function Nav(args) { team, sendInstanceState, - sendAccountInstances, sendInstanceList, setTestGame, @@ -102,7 +96,6 @@ function Nav(args) { function navTo(p) { if (p === 'list') { sendInstanceList(); - sendAccountInstances(); } return setNav(p); } diff --git a/client/src/components/shapes.jsx b/client/src/components/shapes.jsx index 1693937a..954bcb46 100644 --- a/client/src/components/shapes.jsx +++ b/client/src/components/shapes.jsx @@ -6,7 +6,8 @@ const saw = require('./svgs/saw'); const square = require('./svgs/square'); const squircle = require('./svgs/squircle'); const triangle = require('./svgs/triangle'); -const vboxColour = require('./svgs/colour'); +// const vboxColour = require('./svgs/colour'); +const vboxColour = require('./svgs/vbox.colour'); module.exports = { circle, diff --git a/client/src/components/svgs/vbox.colour.jsx b/client/src/components/svgs/vbox.colour.jsx new file mode 100644 index 00000000..575d0c77 --- /dev/null +++ b/client/src/components/svgs/vbox.colour.jsx @@ -0,0 +1,15 @@ +const preact = require('preact'); + +module.exports = function vboxColour(colour) { + return ( + + + + ); +}; diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index df097afd..62cee0af 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -124,15 +124,15 @@ function Vbox(args) { // // VBOX // - const free = []; + // const free = []; - // Colours - free.push([vbox.free[0][0], vbox.free[0][1], vbox.free[0][2]]); - free.push([vbox.free[0][3], vbox.free[0][4], vbox.free[0][5]]); - // Skills - free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]); - // Specs - free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]); + // // Colours + // free.push([vbox.free[0][0], vbox.free[0][1], vbox.free[0][2]]); + // free.push([vbox.free[0][3], vbox.free[0][4], vbox.free[0][5]]); + // // Skills + // free.push([vbox.free[1][0], vbox.free[1][1], vbox.free[1][2]]); + // // Specs + // free.push([vbox.free[2][0], vbox.free[2][1], vbox.free[2][2]]); let vboxTimer; const LONG_TOUCH_TIME = 500; @@ -165,32 +165,65 @@ function Vbox(args) { return true; } - const freeRows = free.map((row, i) => { - const cells = row.map((c, j) => { - const highlighted = c && vboxHighlight.includes(c); - // First two rows are colours - const sendItemType = i > 1 ? i - 1 : 0; - const sendItemIndex = i === 1 ? j + 3 : j; - return vboxTouchStart(e, i, j)} - onTouchEnd={e => vboxTouchEnd(e, i, j)} - onTouchMove={e => vboxTouchMove(e)} + const vboxBtn = v => ( + + ); - // onClick={freeClick} - onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) } - onMouseOver={e => vboxHover(e, c)} - > - {convertItem(c)} - ; - }); + function vboxElement() { return ( - - {cells} - +
setReclaiming(false)} + onMouseOver={e => hoverInfo(e, 'vbox')}> +
+

e.target.scrollIntoView(true)}>VBOX

+
hoverInfo(e, 'bits')} >{vbox.bits}b
+
+
+ {vbox.free[0].map(shapes.vboxColour)} +
+
+ {vbox.free[1].map(vboxBtn)} +
+
+ {vbox.free[2].map(vboxBtn)} +
+ + +
); - }); + } + + // const freeRows = free.map((row, i) => { + // const cells = row.map((c, j) => { + // const highlighted = c && vboxHighlight.includes(c); + // // First two rows are colours + // const sendItemType = i > 1 ? i - 1 : 0; + // const sendItemIndex = i === 1 ? j + 3 : j; + // return vboxTouchStart(e, i, j)} + // onTouchEnd={e => vboxTouchEnd(e, i, j)} + // onTouchMove={e => vboxTouchMove(e)} + + // // onClick={freeClick} + // onDblClick={() => sendVboxAccept(sendItemType, sendItemIndex) } + // onMouseOver={e => vboxHover(e, c)} + // > + // {convertItem(c)} + // ; + // }); + // return ( + // + // {cells} + // + // ); + // }); // // INVENTORY @@ -293,37 +326,7 @@ function Vbox(args) { return (
-
setReclaiming(false)} - onMouseOver={e => hoverInfo(e, 'vbox')}> -
-

e.target.scrollIntoView(true)}>VBOX

-
hoverInfo(e, 'bits')} >{vbox.bits}b
-
-
Colours
- - - {freeRows.slice(0, 2)} - -
-
Skills
- - - {freeRows[2]} - -
-
Specs
- - - {freeRows[3]} - -
- -
+ {vboxElement()}
⮞
⮟
hoverInfo(e, 'combiner')} > {combinerElement}