select target

2018-10-22 12:43:32 +11:00
parent fa7f875bbd
commit b7b5806d98
7 changed files with 145 additions and 104 deletions
@@ -9,8 +9,6 @@ const addState = connect(
            return ws.sendCrypSpawn(name);
        }

-        console.log(ws);
-
        return { account: state.account, sendCrypSpawn };
    }
 );
@@ -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;
-        function sendGameSkill(crypId, targetTeamId, skill) {
-            return ws.sendGameSkill(game.id, crypId, targetTeamId, skill);
+        const { ws, game, account, activeSkill } = state;
+        function selectSkillTarget(targetTeamId) {
+            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);
@@ -1,104 +1,100 @@
 const preact = require('preact');

-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={() => 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 }) {
+function GamePanel({ game, activeSkill, setActiveSkill, selectSkillTarget, 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 is-parent footer" >{PlayerTeam(playerTeam)}</div>
+                <div className="tile">
+                    <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>