Merge pull request #71 from dan-atack/Dan-04-17-Hype-basics

Hype cost calculations added to skill button and tooltip

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

@@ -26,14 +26,17 @@ import LevelVisualGenerator from './LevelVisualGenerator';
 import Versus from '../VersusScreen/Versus';
 // Variable display element for dev-assistance purposes:
 import DevDisplay from './DevD';
+// Constants:
+import { CONSTANTS } from '../../../constants.js';
 
 const CombatEnvironment = () => {
   const dispatch = useDispatch();
-  const devMode = true;   // Boolean switch allows optional display of the 'Dev Mode' panel (shows all combat-related variables)
+  const devMode = CONSTANTS.DEV_MODE;   // Boolean switch allows optional display of the 'Dev Mode' panel
   // State-dependent combat values start here:
   const combatPhase = useSelector((state) => state.game.combatPhase);   // Redux is used for the combat phase.
   const level = useRecoilValue(globalState.level);                      // All other combat state is handled by recoil.
   // Player Related State Values:
+  const [playerAttacksInQueue, setPlayerAttacksInQueue] = useRecoilState(combatState.playerAttacksInQueue);
   const [playerHealth, setPlayerHealth] = useRecoilState(combatState.playerHealth);
   const [playerAP, setPlayerAP] = useRecoilState(combatState.playerAP);
   const [playerAttackRadius, setPlayerAttackRadius] = useRecoilState(combatState.playerAttackRadius);
@@ -122,6 +125,7 @@ const CombatEnvironment = () => {
         }
         break;  // Await input from the attack selection inputs and no more.
       case 'specialEvent':
+        setPlayerAttacksInQueue(0);
         specialEventLogic(dispatch, setCombatPhase, level);
         break;
       case 'baddieMove':

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

@@ -21,9 +21,7 @@ import ResetButton from './ResetButton';
 import VictoryButton from './VictoryButton';
 // Data:
 import playerMoves from '../../../../data/playerMoves.json';
-// Placeholder temp stuff
-
-
+// Placeholder temp stuff ???
 
 const CombatUi = ({turn, setEnemyAttackRadius}) => {
   const [selectedSkill, setSelectedSkill] = useState(null);
@@ -43,8 +41,6 @@ const CombatUi = ({turn, setEnemyAttackRadius}) => {
   const combatPhase = useSelector((state) => state.game.combatPhase);
   // Determine a random combo to use for the selected move:
   const randomCombo = Math.floor(Math.random() * 3);
-  // Determine hype costs for the current move by reducing its base hype cost by this value:
-  const baseMoveHypeCost = 15; // The idea is that all moves costing this much hype are free if they're the first move.
 
   const seed = data.find(obj => obj.level === level);
   const encounter = baddieData.find(obj => obj.level === level);
@@ -81,15 +77,15 @@ const CombatUi = ({turn, setEnemyAttackRadius}) => {
         <Bar type={'health'} fullness={playerHealth}>HEALTH</Bar>
         <Bar type={'hype'} fullness={playerHype}>HYPE</Bar>
       </Wrapper>
-      {/* <ButtonDiv>
-        <button onClick={() => setPlayerHealth(playerHealth - 10)}>lower health</button>
-        <button onClick={() => setPlayerHype(playerHype - 10)}>lower hype</button>
-        <button onClick={() => setPlayerHealth(playerHealth + 10)}>increase health</button>
-        <button onClick={() => setPlayerHype(playerHype + 10)}>increase hype</button>
-      </ButtonDiv> */}
       <SkillsDiv>
         {playerSkills.map(skill => {
-          return <SkillButton skill={skill} handleClick={handleClick} key={`player-move-${skill.id}`}/>
+          return <SkillButton
+            key={`player-move-${skill.id}`}
+            skill={skill}
+            handleClick={handleClick}
+            numPrevMoves={playerAttacksInQueue}
+            playerHype={playerHype}
+          />
         })}
       </SkillsDiv>
       <TurnDiv>{turn}</TurnDiv>

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

@@ -8,6 +8,7 @@ import { setScene, setCombatPhase } from '../../../../actions';
 const ResetButton = () => {
     const dispatch = useDispatch();
     const scene = useSelector((state) => state.game.scene); // Use to rewind player to 1 scene before the fight they just lost.
+    const [playerAttacksInQueue, setPlayerAttacksInQueue] = useRecoilState(combatState.playerAttacksInQueue);
     const [playerHealth, setPlayerHealth] = useRecoilState(combatState.playerHealth);
     const [playerAttackRadius, setPlayerAttackRadius] = useRecoilState(combatState.playerAttackRadius);
     const [playerHype, setPlayerHype] = useRecoilState(combatState.playerHype);
@@ -21,6 +22,7 @@ const ResetButton = () => {
     const handleClick = () => {
         // This is ugly AF and terribly not dry... but it *does* work!
         // TODO: Make default values object for greater flexibility if you ever wanna reset these hard-coded bastards.
+        setPlayerAttacksInQueue(0);
         setPlayerHealth(100);
         setPlayerAttackRadius([]);
         setPlayerHype(0);

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

@@ -1,22 +1,38 @@
 import React, {useState} from 'react';
 import styled from 'styled-components';
 import Tooltip from './Tooltip';
-
+// Game constants:
+import { CONSTANTS } from '../../../../constants.js';
 
 const SkillButton = (props) => {
-  const {skill, handleClick} = props;
+  const { skill, handleClick, numPrevMoves, playerHype } = props;
   const [open, setOpen] = useState(false);
+  const costModifier = (numPrevMoves - 1) * CONSTANTS.BASELINE_HYPE_COST  // hype cost is increased by num of previous moves
+  const currentHypeCost = skill.hypeCost + costModifier;
+  const affordable = playerHype >= currentHypeCost; // If player hype equals or exceeds the current cost, you can afford this move.
 
-  return (
-    <Wrapper 
-      onClick={() => handleClick(skill)}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-    >
-      {skill.icon && <img src={require(`../../../../assets/actionIcons/${skill.icon}`)} alt={skill.name}/> || skill.name}
-      {open && <Tooltip skill={skill}/>}
-    </Wrapper>
-  )
+  if (affordable) {
+    return (
+      // This returns the button representing an attack option for the player.
+      // Hype cost is equal to the baseline cost times the amount of attacks already selected (the first one is free though)
+      // E.G. 1st attack = 0 hype, 2nd attack = 10 hype, 3rd attack = 30 hype, etc.
+      <Wrapper 
+        onClick={() => handleClick(skill)}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+      >
+        {skill.icon && <img src={require(`../../../../assets/actionIcons/${skill.icon}`)} alt={skill.name}/> || skill.name}
+        {open && <Tooltip skill={skill} costModifier={costModifier}/>}
+      </Wrapper>
+    )
+  } else {
+    return (
+      <Wrapper>
+        Too expensive!
+      </Wrapper>
+    )
+  }
+
 }
 
 const Wrapper = styled.div`

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const Tooltip = ({skill}) => {
+const Tooltip = ({ skill, costModifier }) => {
   const {
     baseDmg, 
     challengeType, 
@@ -31,7 +31,7 @@ const Tooltip = ({skill}) => {
           <div>Range: {range}</div>
           <div>Type: {shape}</div>
           <div>Base Damage: {baseDmg}</div>
-          <div>HYPE COST: {hypeCost}</div>
+          <div>HYPE COST: {hypeCost + costModifier}</div>
           { special && <div>chance to {special}</div>}
         </InfoDiv>
       </FlexDiv>

client/src/constants.js

@@ -0,0 +1,6 @@
+// This file is for all the standardized values that will be used throughout the game:
+
+export const CONSTANTS = {
+    DEV_MODE: true,     // Toggle this to get rid of the data display element in the Combat Environment
+    BASELINE_HYPE_COST: 10,    // How much hype a basic move costs to add to a chain of moves
+};

client/src/data/playerMoves.json

@@ -4,7 +4,7 @@
         "id": 1,
         "baseDmg": 5,
         "maxHype": 20,
-        "hypeCost": 15,
+        "hypeCost": 10,
         "special": null,
         "challengeType": "combo",
         "shape": "radial",
@@ -30,7 +30,7 @@
         "id": 2,
         "baseDmg": 5,
         "maxHype": 20,
-        "hypeCost": 15,
+        "hypeCost": 10,
         "special": null,
         "challengeType": "combo",
         "shape": "radial",
@@ -56,7 +56,7 @@
         "id": 3,
         "baseDmg": 5,
         "maxHype": 20,
-        "hypeCost": 15,
+        "hypeCost": 10,
         "special": null,
         "challengeType": "combo",
         "shape": "radial",
@@ -82,7 +82,7 @@
         "id": 4,
         "baseDmg": 100,
         "maxHype": 10,
-        "hypeCost": 55,
+        "hypeCost": 50,
         "special": null,
         "challengeType": "combo",
         "shape": "radial",