game styles

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} />
-                                </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 key={i} className="cryp-box">
+                <figure className="img">
+                    {molecule}
+                    <figcaption>{cryp.name}</figcaption>
+                </figure>
+                <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