demo init

WORKLOG.md

@@ -19,7 +19,6 @@
 
 * msg pane
 * game invites
-* change score to enum
 
 * pct based translates for combat animation
 * add speed to descriptions

client/assets/styles/menu.less

@@ -109,3 +109,7 @@ section {
         flex-flow: column;
     }
 }
+
+.demo {
+    margin-top: 5em;
+}

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;

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 <button class={classes} key={j}>{shapes[i]()}</button>;
+            }
+
+            return <button class={classes}>{i}</button>;
+        }
+
+        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 (
+                <button
+                    class='vbox-btn'
+                    disabled={combiner.length !== 3}>
+                    {text}
+                </button>
+            );
+        }
+
+        function inventoryElement() {
+            return (
+                <div class='vbox-section'>
+                    <div class='vbox-items'>
+                        {items.map((i, j) => inventoryBtn(i, j))}
+                    </div>
+                    {combinerBtn()}
+                </div>
+            );
+        }
+
+        // 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 (
+            <div class="vbox demo">
+                {inventoryElement()}
+            </div>
+        );
+    };
+
+    return (
+        <div>
+            {vboxDemo()}
+            <div class='construct-list'></div>
+        </div>
+    );
+}
+
+module.exports = Demo;

client/src/components/molecule.jsx

@@ -1,18 +1,11 @@
 const preact = require('preact');
 
-module.exports = function molecule(combatText) {
+module.exports = function molecule() {
-    const text = combatText
+    return (
-        ?   <text x="0" y="400" class="combat-text">
+        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
-                {combatText}
-                <animate attributeType="XML" attributeName="y" from="300" to="200" dur="2s" repeatCount="1"/>
-                <animate attributeType="XML" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="1"/>
-            </text>
-        : '';
-
-    return (<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
             <rect style="fill: none;"></rect>
             <g transform="translate(-133.97462520598594, -116.025374794014) "><g><line x1="325.9602631261639" x2="296.95475676906796" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="433.01268739700697" y2="466.5063436985035" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="500" y2="466.5063436985035" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="299.038062191021" y2="265.5444058895245" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="232.050749588028" y2="265.5444058895245" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="500" x2="470.994493642904" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #1FF01F; stroke-width: 3; stroke-linecap: butt;"></line><line x1="441.98898728580804" x2="470.994493642904" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="470.994493642904" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="500" x2="470.994493642904" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="325.9602631261639" x2="296.95475676906796" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="354.96576948325986" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="354.96576948325986" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="412.98013156308195" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="412.98013156308195" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="325.9602631261639" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="325.9602631261639" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="383.9712758403558" x2="412.98013156308195" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="412.98013156308195" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="354.96576948325986" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="354.96576948325986" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="441.98898728580804" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="441.98898728580804" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g class="atom" transform="translate(267.949250411972, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 500) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 232.050749588028) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(267.949250411972, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g>
             </g>
-    {text}
+        </svg>
-    </svg>);
+    );
 };

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() {
                 </button>
             </div>
             {pageEl()}
+            <Demo />
         </main>
     );
 }