From 7b31b2529f39980c7d933f8b368beea777118c7e Mon Sep 17 00:00:00 2001 From: ntr Date: Fri, 29 Mar 2019 11:39:45 +1100 Subject: [PATCH 1/3] cryp box wip --- html-client/cryps.css | 35 +++++++++++++++++-- html-client/package.json | 2 +- .../src/components/instance.component.jsx | 21 ++++++++++- .../components/instance.cryps.component.jsx | 22 ++++++++++++ .../src/components/login.component.jsx | 2 +- html-client/src/components/molecule.jsx | 4 +++ html-client/src/components/vbox.component.jsx | 4 +-- 7 files changed, 82 insertions(+), 8 deletions(-) create mode 100644 html-client/src/components/instance.cryps.component.jsx create mode 100644 html-client/src/components/molecule.jsx diff --git a/html-client/cryps.css b/html-client/cryps.css index 64cdc5da..a78b63aa 100644 --- a/html-client/cryps.css +++ b/html-client/cryps.css @@ -6,7 +6,7 @@ body { font-family: 'Jura'; color: whitesmoke; font-size: 16pt; - padding: 1em; + padding: 1em 2em; } button, input { @@ -64,7 +64,7 @@ button:hover { .ping-svg { background-color: black; height: 1em; - margin-right: 1em; + margin-left: 1em; } .ping-path { @@ -174,4 +174,33 @@ button:hover { .spacer { min-width: 100%; -} \ No newline at end of file +} + +/* CRYP BOX */ +.cryp-box { + display: flex; + padding: 0; +} + +.cryp-box figure { + width: 50%; + margin: 0 0 2em 0; + border: 1px solid whitesmoke; +} + +.cryp-box .skills { + width: 50%; +} + +.cryp-skill-btn:first-child { + margin: 0 0 0 -1px; +} + +.cryp-skill-btn { + font-size: 150%; + border-width: 1px; + width: 100%; + height: 25%; + padding: 0; + margin: -1px 0 0 -1px; +} 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..d50073d4 100644 --- a/html-client/src/components/instance.component.jsx +++ b/html-client/src/components/instance.component.jsx @@ -2,6 +2,23 @@ const preact = require('preact'); // const key = require('keymaster'); const VboxContainer = require('./vbox.container'); +const molecule = require('./molecule'); + +function Cryp(cryp) { + const skills = cryp.skills.map((s, i) => ( + + )); + return ( +
+
+ {molecule} +
+
+ {skills} +
+
+ ); +} function InstanceComponent(args) { const { @@ -13,6 +30,8 @@ function InstanceComponent(args) { if (!instance) return
...
; + let cryps = instance.cryps.map(Cryp); + return (
@@ -37,7 +56,7 @@ function InstanceComponent(args) {
- {JSON.stringify(instance.cryps)} + {cryps}
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..68b05fdf 100755 --- a/html-client/src/components/login.component.jsx +++ b/html-client/src/components/login.component.jsx @@ -4,11 +4,11 @@ const preact = require('preact'); function renderLogin({ account, submitLogin, submitRegister }) { if (account) return (
+

{account.name}

-

{account.name}

); 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/vbox.component.jsx b/html-client/src/components/vbox.component.jsx index 20e32d02..d066e0bf 100644 --- a/html-client/src/components/vbox.component.jsx +++ b/html-client/src/components/vbox.component.jsx @@ -71,7 +71,7 @@ function Vbox(args) { return (
-

vBox - {vbox.bits}b

+

VBOX {vbox.bits}b

+ )); + + const stats = [ + 'hp', + 'green_damage', + 'red_shield', + 'red_damage', + 'blue_damage', + 'blue_shield', + 'speed', + ].map((s, i) => ( + {cryp[s].stat} {cryp[s].value} + )); + return (
-
+
{molecule}
{skills}
+
+ {stats} +
); } @@ -43,7 +59,7 @@ function InstanceComponent(args) {
-

next game against: mmmmmashy

+
 
- )); + const skills = range(0, 4).map((i) => { + const s = cryp.skills[i] + ? cryp.skills[i].skill + : ( ); + + return ; + }); const stats = [ - 'hp', - 'green_damage', - 'red_shield', - 'red_damage', - 'blue_damage', - 'blue_shield', - 'speed', + { 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) => ( - {cryp[s].stat} {cryp[s].value} +
+ {saw(s.colour)} +
{cryp[s.stat].value}
+
)); return ( @@ -46,7 +55,7 @@ function InstanceComponent(args) { if (!instance) return
...
; - let cryps = instance.cryps.map(Cryp); + const cryps = instance.cryps.map(Cryp); return (
diff --git a/html-client/src/components/login.component.jsx b/html-client/src/components/login.component.jsx index 68b05fdf..475f5fa4 100755 --- 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/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 ( + + + + + ); +}