diff --git a/client/assets/styles/instance.css b/client/assets/styles/instance.css index 759454ab..71d0b229 100644 --- a/client/assets/styles/instance.css +++ b/client/assets/styles/instance.css @@ -6,12 +6,10 @@ overflow-x: hidden; display: grid; grid-template-columns: 2fr minmax(min-content, 1fr); - grid-template-rows: min-content min-content min-content 1fr; + grid-template-rows: min-content 1fr; grid-template-areas: - "top info" "vbox info" - "equip info" "constructs info"; } @@ -81,10 +79,6 @@ "vbox . combiner"; } -.vbox-box { - grid-area: vbox; -} - .vbox-inventory { grid-area: inventory; } @@ -121,19 +115,6 @@ flex: 0; } -.vbox-btn:active, .vbox-btn:hover, .vbox-btn:focus { - color: white; -} - -.vbox-btn.reclaiming, .vbox-btn.reclaim.reclaiming:hover { - background: #a52a2a; - color: black; - box-shadow: inset 0.5em 0 0 0 #a52a2a; -} - -.vbox-btn.reclaim:hover { - color: #a52a2a; -} .vbox-hdr { display: flex; @@ -164,26 +145,6 @@ } } -.vbox-btn { - width: 100%; - margin: 0; - background-color: #333; - border-width: 0; -} - -.vbox-table td { - transition-property: color, background, border; - transition-duration: 0.5s; - transition-delay: 0; - transition-timing-function: linear; - cursor: pointer; -} - -.vbox-table td:active, .vbox-table td:focus { - background: whitesmoke; - color: black; -} - /* CONSTRUCT LIST */ .construct-list { diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index a222660a..138c51a6 100644 --- a/client/assets/styles/styles.css +++ b/client/assets/styles/styles.css @@ -146,7 +146,7 @@ button, input { color: whitesmoke; height: auto; border-width: 2px; - border-color: #222; + border-color: #333; border-radius: 0; letter-spacing: 0.25em; box-sizing: border-box; @@ -234,8 +234,8 @@ table .highlight { } button[disabled] { - color: #333; - border-color: #333; + color: #222; + border-color: #222; } /* diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 6da095e6..7cbb9073 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -4,46 +4,94 @@ @white: #f5f5f5; // whitesmoke @purple: #9355b5; // 6lack - that far cover -.vbox-vbox { - grid-area: vbox; +@darkgray: #222; +@gray: #333; - display: flex; - flex-flow: column; +.vbox { + margin-bottom: 2em; + + .vbox-section { + // border: 2px solid #444; + } + + .vbox-hdr { + margin-bottom: 1em; + height: 2em; + } .vbox-colours { display: grid; grid-template-columns: repeat(6, 1fr); - grid-gap: 1em; + grid-gap: 1em 2em; 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; - } + margin-bottom: 1em; } - .vbox-skills, .vbox-specs { + .vbox-items { display: grid; grid-template-columns: repeat(3, 1fr); - grid-gap: 1em; + grid-gap: 1em 2em; align-items: center; + margin-bottom: 1em; button { width: 100%; } } + + .vbox-btn { + width: 100%; + margin: 0; + background-color: @gray; + border-width: 0; + + .reclaim { + height: auto; + + :hover { + color: @red; + }; + } + + :active, :hover, :focus { + color: white; + } + + .reclaiming, .reclaiming:hover, .reclaiming:active { + background: @red; + color: black; + } + + &[disabled] { + background: black; + border-width: 1px; + }; + } + + button { + height: 3em; + margin: 0; + } + + button.empty { + border-style: dashed; + } + + svg { + stroke: none; + margin: 0 auto; + display: block; + } + + svg.red { + fill: @red; + } + + svg.green { + fill: @green; + } + + .blue { + fill: @blue; + } } diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 8eb1697f..4f93f33d 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -32,4 +32,7 @@ export const setSkip = value => ({ type: 'SET_SKIP', value }); export const setShop = value => ({ type: 'SET_SHOP', value }); export const setTeam = value => ({ type: 'SET_SELECTED_CONSTRUCTS', value: Array.from(value) }); export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value }); + +export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value }); + export const setWs = value => ({ type: 'SET_WS', value }); diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index 718c062a..eab67020 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -49,7 +49,6 @@ function Instance(args) {
setInfo(null)} > -
); diff --git a/client/src/components/svgs/vbox.colour.jsx b/client/src/components/svgs/vbox.colour.jsx index 575d0c77..27867cda 100644 --- a/client/src/components/svgs/vbox.colour.jsx +++ b/client/src/components/svgs/vbox.colour.jsx @@ -2,11 +2,11 @@ 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 62cee0af..af2664dd 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -3,7 +3,6 @@ const range = require('lodash/range'); const { connect } = require('preact-redux'); const shapes = require('./shapes'); -const { convertItem } = require('./../utils'); const actions = require('../actions'); const addState = connect( @@ -15,6 +14,7 @@ const addState = connect( combiner, reclaiming, vboxHighlight, + vboxSelected, itemInfo, } = state; @@ -44,6 +44,7 @@ const addState = connect( sendVboxDiscard, sendVboxReclaim, vboxHighlight, + vboxSelected, itemInfo, }; }, @@ -65,11 +66,16 @@ const addState = connect( return dispatch(actions.setVboxHighlight(v)); } + function setVboxSelected(v) { + return dispatch(actions.setVboxSelected(v)); + } + return { setCombiner, setReclaiming, setInfo, setVboxHighlight, + setVboxSelected, }; } @@ -90,6 +96,10 @@ function Vbox(args) { setCombiner, setInfo, + + vboxSelected, + setVboxSelected, + setReclaiming, setVboxHighlight, } = args; @@ -124,39 +134,6 @@ function Vbox(args) { // // VBOX // - // 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]]); - - let vboxTimer; - const LONG_TOUCH_TIME = 500; - function vboxTouchStart(e, i, j) { - vboxTimer = (setTimeout(() => { - sendVboxAccept(j, i); - vboxTimer = null; - }, LONG_TOUCH_TIME)); - return true; - } - - function vboxTouchEnd(e, i, j) { - if (vboxTimer) { - clearTimeout(vboxTimer); - } - return true; - } - - function vboxTouchMove(e) { - if (vboxTimer) clearTimeout(vboxTimer); - e.stopPropagation(); - return true; - } - function vboxHover(e, v) { if (v) { setInfo(v); @@ -165,9 +142,29 @@ function Vbox(args) { return true; } - const vboxBtn = v => ( - - ); + function boundBtn(v, group, index) { + if (!v) return ; + + function onClick() { + // double clicked + if (vboxSelected[0] === group && vboxSelected[1] === index) { + document.activeElement.blur(); + setVboxSelected([]); + return sendVboxAccept(group, index); + } + + return setVboxSelected([group, index]); + } + + if (['Red', 'Green', 'Blue'].includes(v)) { + return ( + + ); + } + + return ; + } + function vboxElement() { return ( @@ -179,20 +176,17 @@ function Vbox(args) {
hoverInfo(e, 'bits')} >{vbox.bits}b
- {vbox.free[0].map(shapes.vboxColour)} + {range(0, 6).map(i => boundBtn(vbox.free[0][i], 0, i))}
-
- {vbox.free[1].map(vboxBtn)} +
+ {range(0, 3).map(i => boundBtn(vbox.free[1][i], 1, i))} + {range(0, 3).map(i => boundBtn(vbox.free[2][i], 2, i))}
-
- {vbox.free[2].map(vboxBtn)} -
-
); @@ -240,72 +234,70 @@ function Vbox(args) { return false; } - const boundTds = range(0, 9).map(i => { - const value = vbox.bound[i]; - if (combiner.indexOf(i) > -1) { + // const boundTds = range(0, 9).map(i => { + // const value = vbox.bound[i]; + // if (combiner.indexOf(i) > -1) { + // return ( + // + //   + // + // ); + // } + + // const highlighted = value && vboxHighlight.includes(value); + + // return ( + // vboxHover(e, value)} + // onClick={e => boundClick(e, i, highlighted) }> + // {convertItem(value)} + // + // ); + // }); + + function inventoryBtn(v, i) { + if (!v) return ; + + if (['Red', 'Green', 'Blue'].includes(v)) { return ( - -   - + ); } - const highlighted = value && vboxHighlight.includes(value); - - return ( - vboxHover(e, value)} - onClick={e => boundClick(e, i, highlighted) }> - {convertItem(value)} - - ); - }); - - const boundRows = [ - - {boundTds[0]} - {boundTds[1]} - {boundTds[2]} - , - - {boundTds[3]} - {boundTds[4]} - {boundTds[5]} - , - - {boundTds[6]} - {boundTds[7]} - {boundTds[8]} - , - ]; - - // - // COMBINER - // - function combinerRmv(i) { - combiner[i] = null; - return combinerChange(combiner); + return ; + } + + + function inventoryElement() { + return ( +
setReclaiming(false)} + onMouseOver={e => hoverInfo(e, 'inventory')}> +
+

e.target.scrollIntoView(true)}>INVENTORY

+ +
+
+ {range(0, 9).map(i => inventoryBtn(vbox.bound[i], i))} +
+ +
+ ); } - const combinerElement = ( - - - - - - - - -
combinerRmv(0)}> - {combiner[0] !== null ? convertItem(vbox.bound[combiner[0]]) : shapes.vboxColour('gray')} - combinerRmv(1)}> - {combiner[1] !== null ? convertItem(vbox.bound[combiner[1]]) : shapes.vboxColour('gray')} - combinerRmv(2)}> - {convertItem(vbox.bound[combiner[2]])} -
- ); // // EVERYTHING @@ -321,42 +313,14 @@ function Vbox(args) { return setInfo(info); } - const classes = "vbox"; + const classes = 'vbox'; const reclaimClass = `vbox-btn reclaim ${reclaiming ? 'reclaiming' : ''}`; return (
{vboxElement()}
⮞
-
⮟
-
setReclaiming(false)} - onMouseOver={e => hoverInfo(e, 'inventory')}> -
-

e.target.scrollIntoView(true)}>INVENTORY

- -
- - - {boundRows} - -
-
-
e.target.scrollIntoView(true)}>⮟⮝
-
hoverInfo(e, 'combiner')} > - {combinerElement} - -
+ {inventoryElement()}
); } diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index 398e3721..3366bcaa 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -44,5 +44,8 @@ module.exports = { shop: createReducer(false, 'SET_SHOP'), team: createReducer([null, null, null], 'SET_SELECTED_CONSTRUCTS'), vboxHighlight: createReducer([], 'SET_VBOX_HIGHLIGHT'), + + vboxSelected: createReducer([], 'SET_VBOX_SELECTED'), + ws: createReducer(null, 'SET_WS'), }; diff --git a/client/src/utils.jsx b/client/src/utils.jsx index ad99728f..9dbf20d2 100644 --- a/client/src/utils.jsx +++ b/client/src/utils.jsx @@ -168,20 +168,6 @@ function eventClasses(game, account, resolution, construct, postSkill) { return ''; } -function convertItem(v) { - if (['Red', 'Green', 'Blue'].includes(v)) { - return ( - shapes.vboxColour(v.toLowerCase()) - ); - } - return v ||  ; - // uncomment for double borders in vbox; - // if (v) { - // return
{v}
; - // } - // return; -} - const COLOURS = [ '#a52a2a', '#1FF01F', @@ -314,7 +300,6 @@ function errorToast(message) { module.exports = { stringSort, - convertItem, numSort, eventClasses, postData, diff --git a/server/src/names.rs b/server/src/names.rs index c972cf8c..67c6e918 100644 --- a/server/src/names.rs +++ b/server/src/names.rs @@ -1,12 +1,14 @@ use rand::prelude::*; use rand::{thread_rng}; -const FIRSTS: [&'static str; 28] = [ +const FIRSTS: [&'static str; 33] = [ "artificial", + "ambient", "borean", "brewing", "bristling", "compressed", + "chromatic", "concave", "convex", "distorted", @@ -18,8 +20,11 @@ const FIRSTS: [&'static str; 28] = [ "metallic", "mossy", "mighty", + "modulated", "nocturnal", + "noisy", "nutritious", + "powerful", "obscure", "organic", "piscine", @@ -32,16 +37,19 @@ const FIRSTS: [&'static str; 28] = [ "weary", ]; -const LASTS: [&'static str; 36] = [ +const LASTS: [&'static str; 41] = [ "artifact", "assembly", "console", "construct", "design", + "drone", + "energy", "entropy", "foilage", "forest", "form", + "fossil", "frequency", "function", "information", @@ -52,19 +60,21 @@ const LASTS: [&'static str; 36] = [ "mountain", "nectar", "oak", + "pattern", "plant", "poseidon", "problem", + "receiver", "replicant", "river", "river", + "scaffold", "shape", "signal", + "synthesiser", + "system", "tower", "transmitter", - "scaffold", - "pattern", - "receiver", "traveller", "warning", "wildlife",