game phase targeting tutorial, clear arrows on game finish

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) {