bit o cleaning

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

@@ -8,7 +8,6 @@ const CrypSpawnContainer = require('./cryp.spawn.container');
 const CrypListContainer = require('./cryp.list.container');
 const GameContainer = require('./game.container');
 const InstanceContainer = require('./instance.container');
-const Logs = require('./logs');
 
 const addState = connect(
     (state) => {
@@ -20,35 +19,15 @@ const addState = connect(
         }
 
         return { game, instance };
-    },
+    }
-    (dispatch) => {
-        function setGame(game) {
-            dispatch(actions.setGame(game));
-        }
-        return { setGame };
-    },
 );
 
 function renderBody(props) {
-    const { game, instance, setGame } = props;
+    const { game, instance } = props;
     if (game) {
         return (
             <div>
                 <GameContainer />
-                <div className= "row">
-                    <div className="six columns" align="left">
-                        <Logs />
-                    </div>
-                    <div className="three columns"  align="left">
-                        <button
-                            className="button is-dark is-fullwidth"
-                            type="submit"
-                            onClick={() => setGame(null)}
-                        >
-                        Back to instance
-                        </button>
-                    </div>
-                </div>
             </div>
         );
     }

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

@@ -15,6 +15,7 @@ function GamePanel(props) {
         selectSkillTarget,
         selectIncomingTarget,
         account,
+        quit,
     } = props;
 
     if (!game) return <div>...</div>;
@@ -58,44 +59,22 @@ function GamePanel(props) {
         );
     }
 
-    function PlayerCrypCard(cryp) {
+    function PlayerCryp(cryp) {
-        const skills = cryp.skills.map((skill, i) => {
-            const hotkey = SKILL_HOT_KEYS[i];
-            key.unbind(hotkey);
-            key(hotkey, () => setActiveSkill(cryp.id, skill));
-
-            return (
-                <button
-                    key={i}
-                    className="button is-dark"
-                    type="submit"
-                    onClick={() => setActiveSkill(cryp.id, skill)}
-                >
-                    ({hotkey}) {skill.skill} {skill.cd && `(${skill.cd}T)`}
-                </button>
-            );
-        });
-
-        const effects = cryp.effects.map((effect, i) => (
-            <div key={i}>{effect} for {effect.turns}T</div>
-        ));
-
         return (
             <div
                 key={cryp.id}
                 style={ activeIncoming ? { cursor: 'pointer' } : {}}
-                onClick={() => selectIncomingTarget(cryp.id)}
+                onClick={() => selectIncomingTarget(cryp.id)}>
-                className="tile is-vertical">
                 {Cryp(cryp, setActiveSkill)}
             </div>
         );
     }
 
     function PlayerTeam(team) {
-        const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill));
+        const cryps = team.cryps.map(c => PlayerCryp(c, setActiveSkill));
 
         return (
-            <div className="tile">
+            <div>
                 {cryps}
             </div>
         );
@@ -107,25 +86,24 @@ function GamePanel(props) {
         ));
 
         return (
-            <div className="tile"
+            <div
                 style={activeSkill ? { cursor: 'pointer' } : {}}
                 onClick={() => selectSkillTarget(cryp.id)} >
-                <div key={cryp.id} className="tile is-vertical">
+                <div key={cryp.id}>
-                    <div className="tile is-child">
+                    <div>
-                        <div className="columns" >
+                        <div >
-                            <div className="column is-10">
+                            <div>
-                                <p className="title">{cryp.name}</p>
+                                <p>{cryp.name}</p>
                             </div>
-                            <div className="column">
+                            <div>
-                                <figure className="image">
+                                <figure>
                                     <svg width="40" height="40" data-jdenticon-value={cryp.name} />
                                 </figure>
                             </div>
 
                         </div>
-                        <div className="has-text-centered">{cryp.hp.value} / {cryp.hp.value} HP </div>
+                        <div>{cryp.hp.value} / {cryp.hp.value} HP </div>
-                        <progress className="progress is-dark" value={cryp.hp.value} max={cryp.hp.max}></progress>
+                        <progress value={cryp.hp.value} max={cryp.hp.max}></progress>
-
                     </div>
                     {effects}
                 </div>
@@ -148,19 +126,28 @@ function GamePanel(props) {
         <section>
             <div className="row">
                 <div className="three columns">
-                    {playerTeam.id}
+                    <button
-                    {PlayerTeam(playerTeam, setActiveSkill)}
+                        className="instance-btn instance-ui-btn glow-btn"
+                        onClick={quit}>
+                        Back
+                    </button>
                 </div>
-                <div className="six columns" align="center">
+                <div className="six columns">
-                    Round X
+                    <div>&nbsp;</div>
-                </div>
-
-                <div className="three columns">
-                    {otherTeams.id}
-                    {otherTeams.map(OpponentTeam)}
                 </div>
             </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">
+                    {logs}
+                </div>
             </div>
         </section>
     );

html-client/src/components/game.container.js

@@ -2,7 +2,7 @@ const { connect } = require('preact-redux');
 
 const actions = require('../actions');
 
-const Game = require('./game');
+const Game = require('./game.component');
 
 const addState = connect(
     function receiveState(state) {
@@ -10,7 +10,7 @@ const addState = connect(
 
         function selectSkillTarget(targetCrypId) {
             if (activeSkill) {
-                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill.skill);
+                return ws.sendGameSkill(game.id, activeSkill.crypId, targetCrypId, activeSkill.skill);
             }
             return false;
         }
@@ -39,8 +39,11 @@ const addState = connect(
             dispatch(actions.setActiveIncoming(skillId));
         }
 
+        function quit() {
+            dispatch(actions.setGame(null));
+        }
 
-        return { setActiveSkill, setActiveIncoming };
+        return { setActiveSkill, setActiveIncoming, quit };
     }
 
 );

html-client/src/components/game.join.button.jsx

@@ -1,42 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-
-const addState = connect(
-    (state) => {
-        const { ws, cryps } = state;
-        function sendGameJoin(gameId) {
-            return ws.sendGameJoin(gameId, [cryps[0].id]);
-        }
-
-        return { account: state.account, sendGameJoin };
-    },
-);
-
-function GameJoinButton({ account, sendGameJoin }) {
-    let gameId = '';
-
-    if (!account) return <div>...</div>;
-
-    return (
-        <div className="columns">
-            <div className="column">
-                <input
-                    className="input"
-                    type="text"
-                    placeholder="gameId"
-                    onChange={e => (gameId = e.target.value)}
-                />
-            </div>
-            <div className="column is-4">
-                <button
-                    className="button is-dark is-fullwidth"
-                    type="submit"
-                    onClick={() => sendGameJoin(gameId)}>
-                    Join Game
-                </button>
-            </div>
-        </div>
-    );
-}
-
-module.exports = addState(GameJoinButton);

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

@@ -1,22 +0,0 @@
-const preact = require('preact');
-// const key = require('keymaster');
-
-function Vbox(args) {
-    const {
-        instance,
-        combiner,
-        sendVboxAccept,
-        sendVboxDiscard,
-        sendVboxReclaim,
-        sendVboxCombine,
-    } = args;
-
-    const { cryps } = instance;
-
-    return (
-        <div className="three columns">
-        </div>
-    );
-}
-
-module.exports = Vbox;

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

@@ -1,20 +0,0 @@
-const { connect } = require('preact-redux');
-const actions = require('../actions');
-
-const ItemList = require('./item.list');
-
-const addState = connect(
-    function receiveState(state) {
-        const { items } = state;
-        return { items };
-    },
-    function receiveDispatch(dispatch) {
-        function setActiveItem(id) {
-            dispatch(actions.setActiveItem(id))
-        }
-
-        return { setActiveItem };
-    }
-);
-
-module.exports = addState(ItemList);

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

@@ -1,37 +0,0 @@
-// eslint-disable-next-line
-const preact = require('preact');
-
-function ItemList({ items, setActiveItem }) {
-    if (!items) return <div>...</div>;
-    const itemPanels = items.map(item => (
-
-        <div key={item.id} className="tile is-parent is-vertical">
-            <div className="tile is-vertical is-child">
-                <div className="columns" >
-                    <div className="column is-8">
-                        <p className="title">{item.action}</p>
-                        <p className="subtitle">∞</p>
-                    </div>
-                    <div className="column">
-                        <figure className="image">
-                            <svg width="40" height="40" data-jdenticon-value={item.action} />
-                        </figure>
-                    </div>
-                </div>
-            </div>
-            <button
-                className="button is-dark"
-                type="submit"
-                onClick={() => setActiveItem(item.id)}>
-                Use
-            </button>
-        </div>
-    ));
-    return (
-        <div>
-            {itemPanels}
-        </div>
-    );
-}
-
-module.exports = ItemList;

html-client/src/components/logs.jsx

@@ -1,19 +0,0 @@
-const preact = require('preact');
-const { connect } = require('preact-redux');
-
-// const Logs = require('./logs');
-
-const addState = connect(
-    function receiveState(state) {
-        const { game } = state;
-        return { game };
-    }
-);
-
-function Logs(props) {
-    const { game } = props;
-    const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
-    return (<div className="title is-4">{logs}</div>);
-}
-
-module.exports = addState(Logs);

html-client/src/components/navbar.jsx

@@ -1,47 +0,0 @@
-const preact = require('preact');
-
-// components all the way down
-const Icon = name => (
-    <span>
-        {name}
-        <svg width="80" height="80" data-jdenticon-value={name} />
-    </span>
-);
-
-// the css attribute name `class` is reserved in js
-// so in react you have to call it `className`
-function Navbar() {
-    const NAMES = ['Mashy', 'ntr'];
-
-    return (
-        <div>
-            <nav className="navbar">
-                <div className="navbar-end">
-                    <a href="/somewhere" className="navbar-item is-active">
-                        Home
-                    </a>
-                    <a href="/somewhere" className="navbar-item">
-                        Store
-                    </a>
-                    <a href="/somewhere" className="navbar-item">
-                        FAQ
-                    </a>
-                    <span className="navbar-item">
-                        <a href="/somewhere" className="button is-info is-inverted">
-                            <span className="icon">
-                                <svg width="80" height="80" data-jdenticon-value="Blog" />
-                            </span>
-                            <span>Blog</span>
-                        </a>
-                    </span>
-                </div>
-            </nav>
-            {NAMES.map(Icon)}
-        </div>
-    );
-    // map is a function that is called on every element of an array
-    // so in this ^^ case it calls Icon('Mashy') which returns some jsx
-    // that gets put into the dom
-}
-
-module.exports = Navbar;