select target

client/src/actions.jsx

@@ -10,11 +10,14 @@ export const setItems = (value) => ({ type: SET_ITEMS, value });
 export const SET_GAME = 'SET_GAME';
 export const setGame = (value) => ({ type: SET_GAME, value });
 
-export const SET_ACTIVE_CRYP = 'SET_ACTIVE_CRYP';
-export const setActiveCryp = (value) => ({ type: SET_ACTIVE_CRYP, value });
-
 export const SET_ACTIVE_ITEM = 'SET_ACTIVE_ITEM';
 export const setActiveItem = (value) => ({ type: SET_ACTIVE_ITEM, value });
 
+export const SET_ACTIVE_INCOMING = 'SET_ACTIVE_INCOMING';
+export const setActiveIncoming = (value) => ({ type: SET_ACTIVE_INCOMING, value });
+
+export const SET_ACTIVE_SKILL = 'SET_ACTIVE_SKILL';
+export const setActiveSkill = (crypId, skill) => ({ type: SET_ACTIVE_SKILL, value: { crypId, skill} });
+
 export const SET_WS = 'SET_WS';
 export const setWs = (value) => ({ type: SET_WS, value });

client/src/components/cryp.spawn.container.js

@@ -9,8 +9,6 @@ const addState = connect(
             return ws.sendCrypSpawn(name);
         }
 
-        console.log(ws);
-
         return { account: state.account, sendCrypSpawn };
     }
 );

client/src/components/game.container.js

@@ -1,20 +1,33 @@
 const { connect } = require('preact-redux');
 
+const actions = require('../actions');
+
 const Game = require('./game');
 
 const addState = connect(
     function receiveState(state) {
-        const { ws, game, account } = state;
+        const { ws, game, account, activeSkill } = state;
-        function sendGameSkill(crypId, targetTeamId, skill) {
+        function selectSkillTarget(targetTeamId) {
-            return ws.sendGameSkill(game.id, crypId, targetTeamId, skill);
+            if (activeSkill) {
+                return ws.sendGameSkill(game.id, activeSkill.crypId, targetTeamId, activeSkill.skill);
+            }
+            return false;
         }
 
         function sendGameTarget(crypId, skillId) {
             return ws.sendGameTarget(game.id, crypId, skillId);
         }
 
-        return { game, account, sendGameSkill, sendGameTarget };
+        return { game, account, activeSkill, selectSkillTarget, sendGameTarget };
+    },
+    function receiveDispatch(dispatch) {
+        function setActiveSkill(crypId, skill) {
+            dispatch(actions.setActiveSkill(crypId, skill))
+        }
+
+        return { setActiveSkill };
     }
+
 );
 
 module.exports = addState(Game);

client/src/components/game.jsx

@@ -1,104 +1,100 @@
 const preact = require('preact');
 
-function PlayerCrypCard(cryp) {
+function GamePanel({ game, activeSkill, setActiveSkill, selectSkillTarget, account }) {
-    return (
-        <div key={cryp.id}
-            className="tile is-vertical">
-            <div className="tile is-child">
-                <div className="columns" >
-                    <div className="column is-10">
-                        <p className="title">{cryp.name}</p>
-                        <p className="subtitle">Level {cryp.lvl}</p>
-                    </div>
-                    <div className="column">
-                        <figure className="image">
-                            <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                        </figure>
-                    </div>
-
-                </div>
-                <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
-                <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
-
-                <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
-                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
-
-            </div>
-            <button
-                className="button is-dark is-fullwidth"
-                type="submit"
-                // onClick={() => sendGameSkill(c.id, otherTeams[0].id, 'Attack')}
-                >
-                Attack
-            </button>
-        </div>
-    );
-}
-
-function PlayerTeam(team) {
-    const cryps = team.cryps.map(PlayerCrypCard);
-
-    return (
-        <div className="tile">
-            {cryps}
-        </div>
-    )
-}
-
-function OpponentCrypCard(cryp) {
-    return (
-        <div key={cryp.id}
-            className="tile is-vertical">
-            <div className="tile is-child">
-                <div className="columns" >
-                    <div className="column is-10">
-                        <p className="title">{cryp.name}</p>
-                        <p className="subtitle">Level {cryp.lvl}</p>
-                    </div>
-                    <div className="column">
-                        <figure className="image">
-                            <svg width="40" height="40" data-jdenticon-value={cryp.name} />
-                        </figure>
-                    </div>
-
-                </div>
-                <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
-                <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
-
-                <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
-                <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
-
-            </div>
-        </div>
-    );
-}
-
-function OpponentTeam(team) {
-    const cryps = team.cryps.map(OpponentCrypCard);
-
-    return (
-        <div className="tile">
-            {cryps}
-        </div>
-    )
-}
-
-function GameState(game) {
-    return (
-        <div className="tile" style={{ "min-height": "100%" }}>
-            <div className="title is-1">{game.phase}</div>
-        </div>
-    )
-}
-
-function GamePanel({ game, sendGameSkill, sendGameTarget, account }) {
     if (!game) return <div>...</div>;
 
     const otherTeams = game.teams.filter(t => t.id !== account.id);
 
     const playerTeam = game.teams.find(t => t.id === account.id);
 
-    const gameState = GameState(game);
+    const incoming = playerTeam.incoming.map((inc, i) => (
+        <div key={inc}>{JSON.stringify(inc)}</div>
+    ));
+
+    function PlayerCrypCard(cryp) {
+        return (
+            <div key={cryp.id}
+                className="tile is-vertical">
+                <div className="tile is-child">
+                    <div className="columns" >
+                        <div className="column is-10">
+                            <p className="title">{cryp.name}</p>
+                            <p className="subtitle">Level {cryp.lvl}</p>
+                        </div>
+                        <div className="column">
+                            <figure className="image">
+                                <svg width="40" height="40" data-jdenticon-value={cryp.name} />
+                            </figure>
+                        </div>
+
+                    </div>
+                    <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
+                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
+
+                    <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
+                    <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
+
+                </div>
+                <button
+                    className="button is-dark is-fullwidth"
+                    type="submit"
+                    onClick={() => setActiveSkill(cryp.id, 'Attack')}
+                >
+                    Attack
+                </button>
+            </div>
+        );
+    }
+
+    function PlayerTeam(team) {
+        const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill));
+
+        return (
+            <div className="tile">
+                {cryps}
+            </div>
+        )
+    }
+
+    function OpponentCrypCard(cryp) {
+        return (
+            <div key={cryp.id} className="tile is-vertical">
+                <div className="tile is-child">
+                    <div className="columns" >
+                        <div className="column is-10">
+                            <p className="title">{cryp.name}</p>
+                            <p className="subtitle">Level {cryp.lvl}</p>
+                        </div>
+                        <div className="column">
+                            <figure className="image">
+                                <svg width="40" height="40" data-jdenticon-value={cryp.name} />
+                            </figure>
+                        </div>
+
+                    </div>
+                    <div className="has-text-centered">{cryp.hp.value} / {cryp.stam.value} HP </div>
+                    <progress className="progress is-dark" value={cryp.hp.value} max={cryp.stam.value}></progress>
+
+                    <div className="has-text-centered">{cryp.xp} / {Math.pow(2,cryp.lvl+1)} XP </div>
+                    <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
+
+                </div>
+            </div>
+        );
+    }
+
+    function OpponentTeam(team) {
+        const cryps = team.cryps.map(OpponentCrypCard);
+
+        return (
+            <div
+                className="tile"
+                style={activeSkill ? { cursor: 'pointer' } : {}}
+                onClick={() => selectSkillTarget(team.id)} >
+                {cryps}
+            </div>
+        )
+    }
 
     // const targetBtn = playerTeam.incoming.map(i => (
     //     <button
@@ -110,12 +106,19 @@ function GamePanel({ game, sendGameSkill, sendGameTarget, account }) {
     //     </button>
     // ));
 
+    // style={{ "min-height": "100%" }}
+
     return (
         <div className="tile is-ancestor">
             <div className="tile is-parent is-vertical">
                 <div className="tile is-parent">{otherTeams.map(OpponentTeam)}</div>
-                {gameState}
+                <div className="tile">
-                <div className="tile is-parent footer" >{PlayerTeam(playerTeam)}</div>
+                    <div className="title is-1">{game.phase}</div>
+                </div>
+                <div className="tile">
+                    {incoming}
+                </div>
+                <div className="tile is-parent footer" >{PlayerTeam(playerTeam, setActiveSkill)}</div>
             </div>
             <div className="tile is-parent is-4">
                 <div className="tile" >log</div>

client/src/main.jsx

@@ -17,6 +17,7 @@ const Body = require('./components/body.component');
 const store = createStore(
     combineReducers({
         activeItem: reducers.activeItemReducer,
+        activeSkill: reducers.activeSkillReducer,
         account: reducers.accountReducer,
         game: reducers.gameReducer,
         cryps: reducers.crypsReducer,

client/src/reducers.jsx

@@ -40,6 +40,26 @@ function activeItemReducer(state = defaultActiveItem, action) {
     }
 }
 
+const defaultActiveSkill = null;
+function activeSkillReducer(state = defaultActiveSkill, action) {
+    switch (action.type) {
+    case actions.SET_ACTIVE_SKILL:
+        return action.value;
+    default:
+        return state;
+    }
+}
+
+const defaultActiveIncoming = null;
+function activeIncomingReducer(state = defaultActiveIncoming, action) {
+    switch (action.type) {
+    case actions.SET_ACTIVE_INCOMING:
+        return action.value;
+    default:
+        return state;
+    }
+}
+
 const defaultGame = null;
 function gameReducer(state = defaultGame, action) {
     switch (action.type) {
@@ -62,6 +82,8 @@ function wsReducer(state = defaultWs, action) {
 
 module.exports = {
     activeItemReducer,
+    activeIncomingReducer,
+    activeSkillReducer,
     gameReducer,
     accountReducer,
     crypsReducer,

server/WORKLOG.md

@@ -28,6 +28,7 @@
 * skills
   * offensive -> choose target ✔
     * teach cyps skills
+    * can you attack yourself?
     * fetch existing battles
     * check for cryp skill already used
     * check for cryp skill ownership