game phase targeting tutorial, clear arrows on game finish

client/src/actions.jsx

@@ -51,6 +51,7 @@ export const setTeamPage = value => ({ type: 'SET_TEAM_PAGE', value });
 export const setTeamSelect = value => ({ type: 'SET_TEAM_SELECT', value: Array.from(value) });
 
 export const setTutorial = value => ({ type: 'SET_TUTORIAL', value });
+export const setTutorialGame = value => ({ type: 'SET_TUTORIAL_GAME', value });
 
 export const setVboxHighlight = value => ({ type: 'SET_VBOX_HIGHLIGHT', value });
 export const setVboxSelected = value => ({ type: 'SET_VBOX_SELECTED', value });

client/src/components/game.construct.jsx

@@ -24,6 +24,7 @@ const addState = connect(
             animText,
             gameSkillInfo,
             itemInfo,
+            tutorialGame,
         } = state;
 
         function selectSkillTarget(targetConstructId) {
@@ -33,10 +34,6 @@ const addState = connect(
             return false;
         }
 
-        // intercept self casting skills
-        if (activeSkill && activeSkill.skill.self_targeting) {
-            ws.sendGameSkill(game.id, activeSkill.constructId, null, activeSkill.skill.skill);
-        }
         return {
             game,
             account,
@@ -47,6 +44,7 @@ const addState = connect(
             selectSkillTarget,
             gameSkillInfo,
             itemInfo,
+            tutorialGame,
         };
     },
 
@@ -55,7 +53,11 @@ const addState = connect(
             dispatch(actions.setGameEffectInfo(info));
         }
 
-        return { setGameEffectInfo };
+        function setTutorialGameClear(activeSkill, tutorialGame) {
+            if (activeSkill && tutorialGame) dispatch(actions.setTutorialGame(null));
+        }
+
+        return { setGameEffectInfo, setTutorialGameClear };
     }
 
 );
@@ -93,7 +95,8 @@ class GameConstruct extends Component {
             selectSkillTarget,
             animFocus,
             animText,
-
+            tutorialGame,
+            setTutorialGameClear,
             setGameEffectInfo,
             gameSkillInfo,
             itemInfo,
@@ -146,7 +149,10 @@ class GameConstruct extends Component {
 
         return (
             <div
-                onClick={() => selectSkillTarget(construct.id)}
+                onClick={() => {
+                    selectSkillTarget(construct.id);
+                    setTutorialGameClear(activeSkill, tutorialGame);
+                }}
                 style={ activeSkill ? { cursor: 'pointer' } : {}}
                 class={`game-construct ${ko} ${classes}`} >
                 <div class="left">

client/src/components/targeting.arrows.jsx

@@ -9,8 +9,8 @@ const shapes = require('./shapes');
 const { effectInfo, removeTier } = require('../utils');
 
 const addState = connect(
-    ({ game, account, animSkill, animating, itemInfo, gameEffectInfo }) =>
-        ({ game, account, animSkill, animating, itemInfo, gameEffectInfo })
+    ({ game, account, animSkill, animating, itemInfo, gameEffectInfo, tutorialGame }) =>
+        ({ game, account, animSkill, animating, itemInfo, gameEffectInfo, tutorialGame })
 );
 
 class TargetSvg extends Component {
@@ -28,9 +28,19 @@ class TargetSvg extends Component {
     }
 
     render(props, state) {
-        const { game, account, animating, animSkill, itemInfo, gameEffectInfo } = props;
+        const { game, account, animating, animSkill, itemInfo, gameEffectInfo, tutorialGame } = props;
         const { width, height } = state;
         if (!game) return false; // game will be null when battle ends
+        if (game.phase === 'Finish') return false; // Clear everything if its over (in case of abandon)
+
+        // First time joining game phase
+        if (tutorialGame) {
+            return (
+                <div class="resolving-skill">
+                    <p> Select your skills, click on targets and then hit <b>ready</b>.</p>
+                </div>
+            );
+        }
 
         // Whenever someones looking at effects throw it up here
         if (gameEffectInfo) {

client/src/reducers.jsx

@@ -59,7 +59,8 @@ module.exports = {
     teamPage:           createReducer(0, 'SET_TEAM_PAGE'),
     teamSelect:         createReducer([null, null, null], 'SET_TEAM_SELECT'),
 
-    tutorial:         createReducer(1, 'SET_TUTORIAL'),
+    tutorial:           createReducer(1, 'SET_TUTORIAL'),
+    tutorialGame:       createReducer(1, 'SET_TUTORIAL_GAME'),
 
     vboxSelected:       createReducer([], 'SET_VBOX_SELECTED'),