merger

client/src/Helpers/generalCombatHelpers.js

@@ -134,8 +134,6 @@ export const advanceCombatSequence = (time, nextPhase, setNextPhase) => {
 export const advanceCombatWithMovement = async (time, nextPhase, setNextPhase, setPosition, coords) => {
   // console.log(`delaying for ${time/1000} seconds before ${nextPhase}`);
 
-  console.log(nextPhase);
-
   setTimeout(() => {
     // console.log(`time to move to ${coords.x}, ${coords.y}`);
     setPosition(coords);

client/src/components/Game/CombatEnvironment/CombatEnvironment.js

@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { useSelector, useDispatch } from 'react-redux';
-import { startReflexCheck } from '../../../actions';
 import { setupPlayerMovePhase } from '../../../Helpers/playerMovePhase';
 // Helper functions:
 import { baddieMoveLogic } from '../../../Helpers/baddieMoveLogic';
@@ -37,7 +35,6 @@ import DevDisplay from './DevD';
 import { CONSTANTS } from '../../../constants.js';
 
 const CombatEnvironment = () => {
-  const dispatch = useDispatch();
   const devMode = CONSTANTS.DEV_MODE;   // Boolean switch allows optional display of the 'Dev Mode' panel
   // State-dependent combat values start here:
   const [combatPhase, setCombatPhase] = useRecoilState(combatState.combatPhase);   // recoil is used for the combat phase.
@@ -59,8 +56,8 @@ const CombatEnvironment = () => {
   const [playerAttackSelecting, setPlayerAttackSelecting] = useRecoilState(combatState.playerAttackSelecting);
 
   // Player Attack Data (damage and such) is fetched based on the ID of the 'move' fed to the Reflex Check component:
-  const reflexCheckId = useSelector((state) => state.game.reflexCheck);
-  const playerAttackData = playerMoveData.find((move) => move.id === reflexCheckId);  // Hacky but effective!
+  const [reflexCheck, setReflexCheck] = useRecoilState(combatState.reflexCheck);
+  const playerAttackData = playerMoveData.find((move) => move.id === reflexCheck.reflexCheckId);  // Hacky but effective!
 
   // Baddie Related State Values:
   const [baddieHP, setBaddieHP] = useRecoilState(combatState.baddieHP);
@@ -75,8 +72,6 @@ const CombatEnvironment = () => {
   const baddie = baddieData.find((obj) => obj.level === level);
   const seed = data.find((obj) => obj.level === level);
 
-  console.log(combatPhase)
-
   // Switch case acts as the game's Engine, calling helper functions and then managing state with their outputs.
   // One Effect to Call Them All:
   useEffect(() => {
@@ -214,7 +209,7 @@ const CombatEnvironment = () => {
   const playerAttack = (x, y) => {
     setPlayerAttackRadius([]);       // Clear player attack radius once attack is selected.
     if (baddieCoords.x === x && baddieCoords.y === y) {
-      dispatch(startReflexCheck());    // If the player hits the baddie, begin a reflex check but don't advance combat round.
+      setReflexCheck({...reflexCheck, isReflexCheck: true});  // If the player hits the baddie, begin a reflex check but don't advance combat round.
     } else {                           // Otherwise, advance the combat round:
       setCombatPhase('specialEvent')
     }

client/src/components/Game/CombatEnvironment/CombatUi/CombatUi.js

@@ -30,22 +30,26 @@ import { bindActionCreators } from 'redux';
 
 const CombatUi = ({turn, setEnemyAttackRadius}) => {
   const [selectedSkill, setSelectedSkill] = useState(null);
+
   const [playerAttacksInQueue, setPlayerAttacksInQueue] = useRecoilState(combatState.playerAttacksInQueue);
   const [baddieDecision, setBaddieDecision] = useRecoilState(combatState.baddieDecision);
   const [playerHealth, setPlayerHealth] = useRecoilState(combatState.playerHealth);
   const [playerHype, setPlayerHype] = useRecoilState(combatState.playerHype);
   const [playerAttackRadius, setPlayerAttackRadius] = useRecoilState(combatState.playerAttackRadius);
   const [playerMoveOptions, setPlayerMoveOptions] = useRecoilState(combatState.playerMoveOptions);
-  const [playerAttackSelecting, setPlayerAttackSelecting] = useRecoilState(combatState.playerAttackSelecting);
   const playerSkills = useRecoilValue(combatState.playerSkills);
   const playerCoords = useRecoilValue(combatState.playerCoords);
   const baddieCoords = useRecoilValue(combatState.baddieCoords);
   const playerIsDead = useRecoilValue(combatState.playerIsDead);  // Flag for the reset button
+
   const level = useRecoilValue(globalState.level)
+
   // Conditionally render reflex check based on this value (and falsilly don't render on a zero!):
-  const reflexCheckId = useSelector((state) => state.game.reflexCheck);
   const doReflexCheck = useSelector((state) => state.game.doReflexCheck);
-  const combatPhase = useSelector((state) => state.game.combatPhase);
+
+  const [combatPhase, setCombatPhase] = useRecoilState(combatState.combatPhase);
+  const [reflexCheck, setReflexCheck] = useRecoilState(combatState.reflexCheck);
+
   // Determine a random combo to use for the selected move:
   const randomCombo = Math.floor(Math.random() * 3);
 
@@ -55,7 +59,7 @@ const CombatUi = ({turn, setEnemyAttackRadius}) => {
   // This handles the clicking of any skill button, generated by the map function.
   const handleClick = async (skill, cost) => {
     if (!playerIsDead && combatPhase === 'playerAction') {  // Skill can only be used if player is alive and it's their action phase
-      dispatch(setReflexCheck(skill.id))
+      setReflexCheck({...reflexCheck, reflexCheckId : skill.id})
       setSelectedSkill(skill);
       setEnemyAttackRadius([])
       setPlayerAttackSelecting(determineThrowOrTravel(skill))
@@ -67,13 +71,11 @@ const CombatUi = ({turn, setEnemyAttackRadius}) => {
     } 
   }
 
-  const dispatch = useDispatch();
-
   return(
     <div className="Combat-UI">
       {playerIsDead && <ResetButton />}
       {combatPhase === 'victory' && <VictoryButton />}
-      {doReflexCheck && 
+      {reflexCheck.isReflexCheck && 
       <ReflexCheck
         combo={randomCombo}
         style={{ position: 'absolute', top: '0px', right: '50px' }}

client/src/components/Game/Game.js

@@ -18,10 +18,8 @@ function Game() {
   const handleAdvance = () => {
     // If there is a scene,
 
-    if (scenes[`scene_${scene}`]) {
       // Move to the next scene:
       setScene(scene + 1);
-    }
   };
 
   const renderScene = (sceneName) => {

client/src/components/Game/ReflexCheck/ReflexCheck.js

@@ -7,7 +7,6 @@ import { useDispatch } from 'react-redux';
 import combatState from '../../../state';
 import globalState from '../../../state';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { setCombatPhase, setPlayerCoords, stopReflexCheck } from '../../../actions';
 import { determineObstacle, advanceCombatSequence, advanceCombatWithMovement } from '../../../Helpers/generalCombatHelpers';
 import data from '../../../data/mapSeed.json';
 
@@ -30,6 +29,8 @@ function ReflexCheck({ combo }) {
     const [baddieHP, setBaddieHP] = useRecoilState(combatState.baddieHP);
     const [baddieCoords, setBaddieCoords] = useRecoilState(combatState.baddieCoords);
     const [baddieStatus, setBaddieStatus] = useRecoilState(combatState.baddieStatus);
+    const [reflexCheck, setReflexCheck] = useRecoilState(combatState.reflexCheck);
+    const [combatPhase, setCombatPhase] = useRecoilState(combatState.combatPhase);
     // Player Hype is also affected by reflex check outcomes:
     const [playerHype, setPlayerHype] = useRecoilState(combatState.playerHype);
     // Now using state to pass all move data:
@@ -68,7 +69,6 @@ function ReflexCheck({ combo }) {
     const determineThrow = () => {
         const distance = playerMovesInQueue[attackQueueIndexPosition].throwDistance;
         const destination = determineObstacle(distance, playerOrientation, playerCoords, baddieCoords, seed);
-        console.log(`DESTINATION: ${destination.x}, ${destination.y}`);
         return destination;
     }
 
@@ -77,8 +77,8 @@ function ReflexCheck({ combo }) {
         setSuccessStatus(true);
         const attackAnimationDelay = playerMovesInQueue.length * 1000;  // TODO: consider making this depend on what the last attack in the queue was, to allow for more time for a more dramatic animation for the final move or for specific 'ultimate' moves.
         // Firing alongside the regular attackSuccess function, this function introduces a longer delay and then advances the combat phase:
-        advanceCombatSequence(attackAnimationDelay, 'specialEvent', dispatch, setCombatPhase);
-        dispatch(stopReflexCheck());
+        advanceCombatSequence(attackAnimationDelay, 'specialEvent', setCombatPhase);
+        setReflexCheck({...reflexCheck, isReflexCheck: false})
     }
 
     // What happens if you are NOT on the last combo in the queue:
@@ -115,23 +115,24 @@ function ReflexCheck({ combo }) {
         setBaddieHP(baddieHP - determineDamage());
         setPlayerHype(Math.min(playerHype + determineHype(), 100));
         // Introduce a short delay before updating baddie position:
-        advanceCombatWithMovement(500, null, dispatch, setCombatPhase, setBaddieCoords, destination);
-        // If there are multiple attacks queued and you didn't just do the last one, setup the next move:
-        if (playerMovesInQueue.length > 1 && attackQueueIndexPosition < playerMovesInQueue.length - 1) {
-            setAttackQueueIndexPosition(attackQueueIndexPosition + 1);
-            setupNextAttack();
-        } else {
-            finalAttackSuccess();
-        }
+        advanceCombatWithMovement(500, null, setCombatPhase, setBaddieCoords, destination).then(res => {
+            // If there are multiple attacks queued and you didn't just do the last one, setup the next move:
+            if (playerMovesInQueue.length > 1 && attackQueueIndexPosition < playerMovesInQueue.length - 1) {
+                setAttackQueueIndexPosition(attackQueueIndexPosition + 1);
+                setupNextAttack();
+            } else {
+                finalAttackSuccess();
+            }
+        })
     }
 
     // One Effect to handle all the keys:
     React.useEffect(() => {
         // If you've failed, ensure the string is exactly zero, and dispatch to advance state AND declare an end to the reflex check):
         if (failStatus) {
             setTimeString('00:00.00');
-            dispatch(setCombatPhase('specialEvent'));
-            dispatch(stopReflexCheck());
+            setCombatPhase('specialEvent');
+            setReflexCheck({...reflexCheck, isReflexCheck: false})
         }
         // This whole effect will only fire until you have either failed or succeeded:
         if (!failStatus && !successStatus) {

client/src/state/combatState.js

@@ -103,11 +103,9 @@ export const baddieDecision = atom({
 export const baddieStatus = atom({
   key: 'baddieStatus',
   default: {
-    default: {
-      physical: [],
-      elemental: {},
-      positional: {},
-    }
+    physical: [],
+    elemental: {},
+    positional: {},
   }
 })
 
@@ -119,4 +117,12 @@ export const mapGrid = atom({
 export const combatPhase = atom({
   key: 'combat phase',
   default: 'noCombat'
+})
+
+export const reflexCheck = atom ({
+  key: '',
+  default: {
+    isReflexCheck: false,
+    reflexCheckId: null,
+  },
 })

client/src/state/index.js

@@ -18,7 +18,8 @@ import {
   baddieOrientation,
   baddieDecision,
   baddieStatus,
-  combatPhase
+  combatPhase,
+  reflexCheck
 } from './combatState';
 
 import {
@@ -68,5 +69,6 @@ export default {
   minigameRound,
   updateRound,
   currentRound,
-  combatPhase
+  combatPhase,
+  reflexCheck
 }