diff --git a/html-client/cryps.css b/html-client/cryps.css index 64cdc5da..ba806305 100644 --- a/html-client/cryps.css +++ b/html-client/cryps.css @@ -6,7 +6,9 @@ body { font-family: 'Jura'; color: whitesmoke; font-size: 16pt; - padding: 1em; + padding: 1em 2em; + overflow: hidden; + user-select: none; } button, input { @@ -29,7 +31,7 @@ button:hover { MENU */ .header { - margin-bottom: 2em; + margin-bottom: 1.5em; } .home-cryp { @@ -61,16 +63,15 @@ button:hover { text-align: right; } -.ping-svg { - background-color: black; +.header-status svg { + margin-left: 1em; height: 1em; - margin-right: 1em; + background-color: black; } .ping-path { - stroke: #f5f5f5; fill: none; - stroke-width: 4; + stroke-width: 4px; stroke-dasharray: 121, 242; animation: pulse 2s infinite linear; } @@ -142,12 +143,24 @@ button:hover { padding: 0; } +.vbox-hdr { + display: flex; + align-items: flex-end; +} + +.vbox-hdr div { + flex-grow: 1; +} + +.vbox-hdr h3 { + margin: 0; +} + .vbox-btn { margin: 0; padding: 0.5em; background-color: whitesmoke; color: black; - user-select: none; } .vbox-btn:hover { @@ -174,4 +187,57 @@ button:hover { .spacer { min-width: 100%; -} \ No newline at end of file +} + +/* CRYP BOX */ +.cryp-box { + display: flex; + flex-wrap: wrap; + /* + this controls the size of the box + as it fills the whole container + */ + padding: 0 2em 0 0; + margin: 0 0 2em 0; +} + +.cryp-box figure { + margin: 0; + flex-grow: 1; + border: 1px solid whitesmoke; +} + +.cryp-box .skills { + width: 50%; +} + +.cryp-skill-btn { + font-size: 125%; + border-width: 1px; + width: 100%; + height: 25%; + padding: 0; + margin: 0; + border-left-width: 0px; + border-bottom-width: 0px; +} + +.cryp-skill-btn:last-child { + border-bottom-width: 1px; +} + +.cryp-box .stats { + display: flex; + width: 100%; + text-align: center; +} + +.cryp-box .stats figure { + border-top-width: 0; + flex: 1 1 0; +} + +.cryp-box .stats svg { + height: 1em; + stroke-width: 2px; +} diff --git a/html-client/package.json b/html-client/package.json index b8201134..e7aaf6de 100755 --- a/html-client/package.json +++ b/html-client/package.json @@ -4,7 +4,7 @@ "description": "", "main": "index.js", "scripts": { - "start": "parcel index.html --port 40080", + "start": "parcel index.html --port 40080 --no-hmr --no-source-maps", "build": "rm -rf dist && parcel build index.html", "lint": "eslint --fix --ext .jsx src/", "test": "echo \"Error: no test specified\" && exit 1" diff --git a/html-client/src/components/instance.component.jsx b/html-client/src/components/instance.component.jsx index 6dd18808..9364f044 100644 --- a/html-client/src/components/instance.component.jsx +++ b/html-client/src/components/instance.component.jsx @@ -1,7 +1,49 @@ const preact = require('preact'); // const key = require('keymaster'); +const range = require('lodash/range'); const VboxContainer = require('./vbox.container'); +const molecule = require('./molecule'); +const saw = require('./saw.component'); + +function Cryp(cryp) { + const skills = range(0, 4).map((i) => { + const s = cryp.skills[i] + ? cryp.skills[i].skill + : ( ); + + return ; + }); + + const stats = [ + { stat: 'hp', colour: '#1FF01F' }, + { stat: 'green_damage', colour: '#1FF01F' }, + { stat: 'red_shield', colour: '#a52a2a' }, + { stat: 'red_damage', colour: '#a52a2a' }, + { stat: 'blue_shield', colour: '#3498db' }, + { stat: 'blue_damage', colour: '#3498db' }, + { stat: 'speed', colour: '#FFD123' }, + ].map((s, i) => ( +
+ {saw(s.colour)} +
{cryp[s.stat].value}
+
+ )); + + return ( +
+
+ {molecule} +
+
+ {skills} +
+
+ {stats} +
+
+ ); +} function InstanceComponent(args) { const { @@ -13,6 +55,8 @@ function InstanceComponent(args) { if (!instance) return
...
; + const cryps = instance.cryps.map(Cryp); + return (
@@ -24,7 +68,7 @@ function InstanceComponent(args) {
-

next game against: mmmmmashy

+
 
diff --git a/html-client/src/components/instance.cryps.component.jsx b/html-client/src/components/instance.cryps.component.jsx new file mode 100644 index 00000000..5cda62a4 --- /dev/null +++ b/html-client/src/components/instance.cryps.component.jsx @@ -0,0 +1,22 @@ +const preact = require('preact'); +// const key = require('keymaster'); + +function Vbox(args) { + const { + instance, + combiner, + sendVboxAccept, + sendVboxDiscard, + sendVboxReclaim, + sendVboxCombine, + } = args; + + const { cryps } = instance; + + return ( +
+
+ ); +} + +module.exports = Vbox; \ No newline at end of file diff --git a/html-client/src/components/login.component.jsx b/html-client/src/components/login.component.jsx index 8d31e7af..475f5fa4 100644 --- a/html-client/src/components/login.component.jsx +++ b/html-client/src/components/login.component.jsx @@ -1,14 +1,13 @@ // eslint-disable-next-line const preact = require('preact'); +const saw = require('./saw.component'); + function renderLogin({ account, submitLogin, submitRegister }) { if (account) return (
- - - -

{account.name}

+ {saw('whitesmoke')}
); diff --git a/html-client/src/components/molecule.jsx b/html-client/src/components/molecule.jsx new file mode 100644 index 00000000..30960e83 --- /dev/null +++ b/html-client/src/components/molecule.jsx @@ -0,0 +1,4 @@ +const preact = require('preact'); + +module.exports = ( + ); diff --git a/html-client/src/components/saw.component.jsx b/html-client/src/components/saw.component.jsx new file mode 100644 index 00000000..e9ba3aa8 --- /dev/null +++ b/html-client/src/components/saw.component.jsx @@ -0,0 +1,10 @@ +const preact = require('preact'); + +module.exports = function saw(colour) { + return ( + + + + + ); +} diff --git a/html-client/src/components/vbox.component.jsx b/html-client/src/components/vbox.component.jsx index 20e32d02..afe0b506 100644 --- a/html-client/src/components/vbox.component.jsx +++ b/html-client/src/components/vbox.component.jsx @@ -71,7 +71,10 @@ function Vbox(args) { return (
-

vBox - {vbox.bits}b

+
+
VBOX
+

{vbox.bits}b

+