game styles

html-client/cryps.css

@@ -209,35 +209,40 @@ button:hover {
         this controls the size of the box
         as it fills the whole container
     */
-    padding: 0 1em 2em 0;
+    margin: 0 1em 1em 0;
+    border: 1px solid whitesmoke;
 }
 
 /*cheeky one to push them in line with the buttons */
-.cryp-box:first-child {
+.instance .cryp-box:first-child {
     margin-top: -2.5em;
 }
 
 .cryp-box figure {
     margin: 0;
-    flex: 1 1 50%;
-    border: 1px solid whitesmoke;
+    flex: 0 1 50%;
     text-align: center;
     box-sizing: border-box;
     display: flex;
     flex-flow: column;
 }
 
-.cryp-box figure figcaption {
+.cryp-box .stats {
+    display: flex;
+    width: 100%;
+    border-top: 1px solid whitesmoke;
 }
 
 .cryp-box .stats figure {
+    flex: 1 1 0;
     border: 0;
-    align-items: center
+    align-items: center;
+    padding: 0.25em 0;
 }
 
-.cryp-box .stats {
-    border-top-width: 0;
-    border: 1px solid whitesmoke;
+.cryp-box .stats svg {
+    height: 1.5em;
+    stroke-width: 2px;
 }
 
 .cryp-box .skills {
@@ -251,26 +256,11 @@ button:hover {
     height: 25%;
     padding: 0;
     margin: 0;
-    border-left-width: 0px;
     border-bottom-width: 0px;
+    border-left-width: 1px;
 }
 
-.cryp-skill-btn:last-child {
-    border-bottom-width: 1px;
-}
-
-.cryp-box .stats {
-    display: flex;
-    width: 100%;
-    text-align: center;
-}
-
-.cryp-box .stats figure {
+.cryp-skill-btn:first-child {
     border-top-width: 0;
-    flex: 1 1 0;
 }
 
-.cryp-box .stats svg {
-    height: 1em;
-    stroke-width: 2px;
-}

html-client/src/components/cryp.list.container.js

@@ -1,6 +1,6 @@
 const { connect } = require('preact-redux');
 
-const CrypList = require('./cryp.list');
+const CrypList = require('./cryp.list.component');
 const actions = require('./../actions');
 
 const addState = connect(

html-client/src/components/cryp.list.jsx

@@ -1,57 +0,0 @@
-const preact = require('preact');
-
-const { stringSort } = require('./../utils');
-const molecule = require('./molecule');
-
-const idSort = stringSort('id');
-
-const COLOURS = [
-    '#a52a2a',
-    '#1FF01F',
-    '#3498db',
-];
-
-function CrypList({ cryps, selectedCryps, setSelectedCryps }) {
-    if (!cryps) return <div>not ready</div>;
-
-    // redux limitation + suggested workaround
-    // so much for dumb components
-    function selectCryp(id) {
-        if (selectedCryps.length < 3) {
-            selectedCryps.push(id);
-            return setSelectedCryps(selectedCryps);
-        }
-        return false;
-    }
-
-    const crypPanels = cryps.sort(idSort).map(cryp => {
-        const colour = selectedCryps.indexOf(cryp.id);
-        const selected = colour > -1;
-
-        const borderColour = selected ? COLOURS[colour] : '#000000';
-
-        return (
-            <div
-                key={cryp.id}
-                className="menu-cryp-ctr">
-                <div
-                    className="menu-cryp"
-                    style={ { 'border-color': borderColour || 'whitesmoke' } }
-                    onClick={() => selectCryp(cryp.id)} >
-                    <figure className="img">
-                        {molecule}
-                    </figure>
-                    <h2>{cryp.name}</h2>
-                </div>
-            </div>
-        );
-    });
-
-    return (
-        <div className="menu-cryps">
-            {crypPanels}
-        </div>
-    );
-}
-
-module.exports = CrypList;

html-client/src/components/game.component.jsx

@@ -48,6 +48,7 @@ function GamePanel(props) {
             <div className="cryp-box">
                 <figure className="img">
                     {molecule}
+                    <figcaption>{cryp.name}</figcaption>
                 </figure>
                 <div className="skills">
                     {skills}
@@ -80,39 +81,34 @@ function GamePanel(props) {
         );
     }
 
-    function OpponentCrypCard(cryp) {
-        const effects = cryp.effects.map((effect, i) => (
-            <div key={i}>{effect.effect} for {effect.turns}T</div>
+    function OpponentCryp(cryp, i) {
+        const stats = [
+            { stat: 'hp', colour: '#1FF01F' },
+            { stat: 'red_shield', colour: '#a52a2a' },
+            { stat: 'blue_shield', colour: '#3498db' },
+        ].map((s, j) => (
+            <figure key={j} alt={s.stat}>
+                {saw(s.colour)}
+                <figcaption>{cryp[s.stat].value} / {cryp[s.stat].max}</figcaption>
+            </figure>
         ));
 
         return (
-            <div
-                style={activeSkill ? { cursor: 'pointer' } : {}}
-                onClick={() => selectSkillTarget(cryp.id)} >
-                <div key={cryp.id}>
-                    <div>
-                        <div >
-                            <div>
-                                <p>{cryp.name}</p>
-                            </div>
-                            <div>
-                                <figure>
-                                    <svg width="40" height="40" data-jdenticon-value={cryp.name} />
+            <div key={i} className="cryp-box">
+                <figure className="img">
+                    {molecule}
+                    <figcaption>{cryp.name}</figcaption>
                 </figure>
-                            </div>
-
-                        </div>
-                        <div>{cryp.hp.value} / {cryp.hp.value} HP </div>
-                        <progress value={cryp.hp.value} max={cryp.hp.max}></progress>
-                    </div>
-                    {effects}
+                <div className="stats">
+                    {stats}
                 </div>
             </div>
         );
     }
 
+
     function OpponentTeam(team) {
-        const cryps = team.cryps.map(OpponentCrypCard);
+        const cryps = team.cryps.map(OpponentCryp);
         return (
             <div>
                 {cryps}
@@ -138,11 +134,9 @@ function GamePanel(props) {
             </div>
             <div className="row">
                 <div className="four columns">
-                    {playerTeam.id}
                     {PlayerTeam(playerTeam, setActiveSkill)}
                 </div>
                 <div className="four columns">
-                    {otherTeams.id}
                     {otherTeams.map(OpponentTeam)}
                 </div>
                 <div className="four columns">

html-client/src/components/instance.component.jsx

@@ -59,7 +59,7 @@ function InstanceComponent(args) {
     const cryps = instance.cryps.map(Cryp);
 
     return (
-        <section>
+        <section className="instance" >
             <div className="row">
                 <div className="three columns">
                     <button