From 8cc8ec90ddca994adcaf3d7baa10ebcd747b59ed Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 20 Oct 2021 19:16:10 -0400 Subject: [PATCH] recoil be gone --- client/src/Helpers/generalCombatHelpers.js | 2 -- .../CombatEnvironment/CombatEnvironment.js | 11 ++----- .../CombatEnvironment/CombatUi/CombatUi.js | 16 ++++++---- client/src/components/Game/Game.js | 2 -- .../Game/ReflexCheck/ReflexCheck.js | 29 ++++++++++--------- client/src/state/combatState.js | 16 ++++++---- client/src/state/index.js | 6 ++-- 7 files changed, 43 insertions(+), 39 deletions(-) diff --git a/client/src/Helpers/generalCombatHelpers.js b/client/src/Helpers/generalCombatHelpers.js index 99c30da..06a82b6 100644 --- a/client/src/Helpers/generalCombatHelpers.js +++ b/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); diff --git a/client/src/components/Game/CombatEnvironment/CombatEnvironment.js b/client/src/components/Game/CombatEnvironment/CombatEnvironment.js index 6326ccd..baabf8e 100644 --- a/client/src/components/Game/CombatEnvironment/CombatEnvironment.js +++ b/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. @@ -58,8 +55,8 @@ const CombatEnvironment = () => { const [playerStatus, setPlayerStatus] = useRecoilState(combatState.playerStatus); // 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); @@ -74,8 +71,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(() => { @@ -208,7 +203,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') } diff --git a/client/src/components/Game/CombatEnvironment/CombatUi/CombatUi.js b/client/src/components/Game/CombatEnvironment/CombatUi/CombatUi.js index e3f33b2..349d9cf 100644 --- a/client/src/components/Game/CombatEnvironment/CombatUi/CombatUi.js +++ b/client/src/components/Game/CombatEnvironment/CombatUi/CombatUi.js @@ -29,21 +29,27 @@ 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 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); @@ -53,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([]) setPlayerMoveOptions([]) @@ -64,13 +70,11 @@ const CombatUi = ({turn, setEnemyAttackRadius}) => { } } - const dispatch = useDispatch(); - return(
{playerIsDead && } {combatPhase === 'victory' && } - {doReflexCheck && + {reflexCheck.isReflexCheck && { // If there is a scene, - if (scenes[`scene_${scene}`]) { // Move to the next scene: setScene(scene + 1); - } }; const renderScene = (sceneName) => { diff --git a/client/src/components/Game/ReflexCheck/ReflexCheck.js b/client/src/components/Game/ReflexCheck/ReflexCheck.js index d1d4aa4..3f3c36b 100644 --- a/client/src/components/Game/ReflexCheck/ReflexCheck.js +++ b/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,14 +115,15 @@ 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: @@ -130,8 +131,8 @@ function ReflexCheck({ combo }) { // 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) { diff --git a/client/src/state/combatState.js b/client/src/state/combatState.js index dde37e9..f2a6e6d 100644 --- a/client/src/state/combatState.js +++ b/client/src/state/combatState.js @@ -97,11 +97,9 @@ export const baddieDecision = atom({ export const baddieStatus = atom({ key: 'baddieStatus', default: { - default: { - physical: [], - elemental: {}, - positional: {}, - } + physical: [], + elemental: {}, + positional: {}, } }) @@ -113,4 +111,12 @@ export const mapGrid = atom({ export const combatPhase = atom({ key: 'combat phase', default: 'noCombat' +}) + +export const reflexCheck = atom ({ + key: '', + default: { + isReflexCheck: false, + reflexCheckId: null, + }, }) \ No newline at end of file diff --git a/client/src/state/index.js b/client/src/state/index.js index 63a3d5b..e588296 100644 --- a/client/src/state/index.js +++ b/client/src/state/index.js @@ -17,7 +17,8 @@ import { baddieOrientation, baddieDecision, baddieStatus, - combatPhase + combatPhase, + reflexCheck } from './combatState'; import { @@ -66,5 +67,6 @@ export default { minigameRound, updateRound, currentRound, - combatPhase + combatPhase, + reflexCheck } \ No newline at end of file