From 65c69199b9d1907e7546f022438b58d0e871da4f Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 9 Sep 2019 16:49:52 +1000 Subject: [PATCH] demo init --- WORKLOG.md | 1 - client/assets/styles/menu.less | 4 ++ client/assets/styles/styles.less | 8 --- client/src/components/demo.jsx | 91 ++++++++++++++++++++++++++++++ client/src/components/molecule.jsx | 23 +++----- client/src/components/welcome.jsx | 2 + 6 files changed, 105 insertions(+), 24 deletions(-) create mode 100644 client/src/components/demo.jsx diff --git a/WORKLOG.md b/WORKLOG.md index 066e89c0..65799897 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -19,7 +19,6 @@ * msg pane * game invites -* change score to enum * pct based translates for combat animation * add speed to descriptions diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 49a312fa..7efd2b7a 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -108,4 +108,8 @@ section { display: flex; flex-flow: column; } +} + +.demo { + margin-top: 5em; } \ No newline at end of file diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index f64f48fa..cec86633 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -272,14 +272,6 @@ header { color: @white; box-shadow: inset 0px 5px 0px 0px @white; border: 0; - &:first-child { - border-left: 1px solid #444; - } - - &:last-child { - border-right: 1px solid #444; - } - } border: 1px solid #444; diff --git a/client/src/components/demo.jsx b/client/src/components/demo.jsx new file mode 100644 index 00000000..59ba8943 --- /dev/null +++ b/client/src/components/demo.jsx @@ -0,0 +1,91 @@ +const preact = require('preact'); +const shapes = require('./shapes'); +const molecule = require('./molecule'); + +function Demo(args) { + const vboxDemo = () => { + const phase = this.state.phase || 'vbox'; + const items = this.state.items || ['Red', 'Red', 'Attack']; + const combiner = this.state.combiner || []; + + console.log(combiner, this.state); + + function inventoryBtn(i, j) { + const highlighted = combiner.indexOf(j) > -1; + const classes = `${highlighted ? 'highlight' : ''}`; + + if (shapes[i]) { + return ; + } + + return ; + } + + function combinerBtn() { + let text = ''; + + if (combiner.length < 3) { + for (let i = 0; i < 3; i++) { + if (combiner.length > i) { + text += '■ '; + } else { + text += '▫ '; + } + } + } else { + text = 'combine'; + } + + return ( + + ); + } + + function inventoryElement() { + return ( +
+
+ {items.map((i, j) => inventoryBtn(i, j))} +
+ {combinerBtn()} +
+ ); + } + + // progress + setTimeout(() => { + if (items.length === 1) { + this.setState({ combiner: [], items: ['Red', 'Red', 'Attack'], phase: 'game' }); + return true; + } + + if (combiner.length === 3) { + this.setState({ combiner: [], items: ['Strike'] }); + return true; + } + + combiner.push(combiner.length); + this.setState({ combiner }); + return true; + }, 2000); + + return ( +
+ {inventoryElement()} +
+ ); + }; + + return ( +
+ {vboxDemo()} +
+
+ ); +} + +module.exports = Demo; diff --git a/client/src/components/molecule.jsx b/client/src/components/molecule.jsx index 2be0cfc3..8054a844 100644 --- a/client/src/components/molecule.jsx +++ b/client/src/components/molecule.jsx @@ -1,18 +1,11 @@ const preact = require('preact'); -module.exports = function molecule(combatText) { - const text = combatText - ? - {combatText} - - - - : ''; - - return ( - - - - {text} - ); +module.exports = function molecule() { + return ( + + + + + + ); }; diff --git a/client/src/components/welcome.jsx b/client/src/components/welcome.jsx index 27575d98..194880bb 100644 --- a/client/src/components/welcome.jsx +++ b/client/src/components/welcome.jsx @@ -5,6 +5,7 @@ const Login = require('./welcome.login'); const Register = require('./welcome.register'); const Help = require('./welcome.help'); const About = require('./welcome.about'); +const Demo = require('./demo'); function Welcome() { const page = this.state.page || 'login'; @@ -54,6 +55,7 @@ function Welcome() { {pageEl()} + ); }