Skip to content

Commit 67e73a9

Browse files
Green-KiwieanivcsVaibhavSatishsidsun1
authored
added metrics tracking (#11)
* Removed menu and placed MatchItUp as Work in Progress * bug fixed: allows metrics to be reset upon game end * added game field helpers file to refactor code * fixed all metrics tracking * switch letters to icons * hiding icons once button is pushed * Successfully sent metrics over to the DynamoDB table * Fixed duplicate send issue by validating JSON before metric POST * increased icon size * modified workflow to include api address --------- Co-authored-by: Anish Venkatesalu <anivcs50@gmail.com> Co-authored-by: Vaibhav Satish <vaibhavsatish21@hotmail.com> Co-authored-by: sidsun1 <siddharthsundar2@gmail.com> Co-authored-by: Siddharth Sundar <111776145+sidsun1@users.noreply.github.com>
1 parent 3e6d607 commit 67e73a9

13 files changed

Lines changed: 347 additions & 122 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ jobs:
2424
- name: List files in directory
2525
run: ls antarctic-med
2626

27+
- name: Set environment variable
28+
run: echo "REACT_APP_AWS_API_GATEWAY_URL=${{ secrets.REACT_APP_AWS_API_GATEWAY_URL }}" >> $GITHUB_ENV
29+
2730
- name: Install dependencies
2831
run: npm install
2932
working-directory: antarctic-med

‎antarctic-med/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@
2121
npm-debug.log*
2222
yarn-debug.log*
2323
yarn-error.log*
24+
25+
.env

‎antarctic-med/src/components/matchitup/GameField.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default function MatchItUpGame({setGameRunning}) {
2929
}
3030
return (
3131
<>
32-
<p>Insert Game Here</p>
32+
<p>Game Coming Soon...</p>
3333
<Designed_Button id={"returnToMatchStart"} content={"End Game"} onClick={()=>{setGameRunning("MatchItUp Start");}}/>
3434
</>
3535
)

‎antarctic-med/src/components/matchitup/StartScreen.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function MatchStartScreen({setGameRunning}) {
55
/** Place the instructions for how to play MatchItUp here */
66
return (
77
<>
8-
<p>test!</p>
8+
<p>This game is still under developement!</p>
99
</>
1010
)
1111
}
@@ -14,7 +14,7 @@ export default function MatchStartScreen({setGameRunning}) {
1414
{/** Create a button to start MatchItUp! */}
1515
<Instructions/>
1616
<Designed_Button id={"startMatchGame"} content={"Start Game"} onClick={() => {setGameRunning("MatchItUp Game")}}/>
17-
<Designed_Button id={"returnToMenu"} content={"Return to Menu"} onClick={() => {setGameRunning("menu")}}/>
17+
<Designed_Button id={"switchSwitchItUp"} content={"Switch to SwitchItUp"} onClick={() => {setGameRunning("SwitchItUp Start")}}/>
1818
</>
1919
)
2020
}

‎antarctic-med/src/components/switchitup/GameField.jsx‎

Lines changed: 86 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { useState } from "react";
2-
import { selectCurrentTask, selectCardValues, get_color_code_from_id, get_image_str_from_id, get_hover_color_code_from_id} from "../../game/game_logic_helpers";
2+
import {get_color_code_from_id, get_image_str_from_id, get_hover_color_code_from_id} from "../../game/game_logic_helpers";
33
import Designed_Button from "../../global_helpers/Button"
44
import GameTimer from "../../global_helpers/GameTimer"
5+
import {endGame, updateCorrectSelection, updateWrongSelection, resetGameState, addButtonToClickedSet, updateInvalidSelection, updateStreak, updateTimeBetweenSelection} from "./GameFieldHelpers";
56

67
export default function GameField({ setGameRunning, setMetrics }) {
78
// Matrix Size
89
const rows = 3;
910
const columns = 4;
11+
const timePerRound = 10;
1012

1113
// Prompts Usestates
1214
const [promptMessage, setPromptMessage] = useState('');
@@ -17,85 +19,82 @@ export default function GameField({ setGameRunning, setMetrics }) {
1719

1820
const [currentStreak, setCurrentStreak] = useState(0);
1921
const [maxStreak, setMaxStreak] = useState(0);
20-
const [roundHasMistake, setRoundHasMistake] = useState(false);
21-
22-
/* example of updating metrics */
23-
function update_metrics() {
24-
console.log('Button clicked');
25-
setMetrics(prev => ({
26-
...prev,
27-
total_number_of_correct_selections: prev.total_number_of_correct_selections + 1,
28-
}));
29-
}
30-
31-
const update_wrong_selection = () => {
32-
console.log('Wrong button clicked');
33-
setMetrics(prev => ({
34-
...prev,
35-
wrong_selection_missed_a_selection : prev.wrong_selection_missed_a_selection + 1,
36-
}));
22+
const [promptID, setPromptID] = useState('');
23+
24+
const [startTime, setStartTime] = useState(Date.now());
25+
const [timePerSelection, setTimePerSelection] = useState([]);
26+
const [roundTimePerSelection, setRoundTimePerSelection] = useState([]);
27+
28+
const [isGameEnded, setIsGameEnded] = useState(false);
29+
30+
// Define context object to pass around to helpers
31+
const context = {
32+
setPromptMessage,
33+
setCardMatrix,
34+
setCorrectCards,
35+
setClickedButtons,
36+
setPromptID,
37+
setCurrentStreak,
38+
setMaxStreak,
39+
setRoundTimePerSelection,
40+
setTimePerSelection,
41+
setIsGameEnded,
42+
roundTimePerSelection,
43+
setGameRunning,
44+
currentStreak,
45+
maxStreak,
46+
setMetrics,
47+
rows,
48+
columns,
49+
cardMatrix,
50+
promptID,
51+
startTime,
52+
timePerSelection,
53+
isGameEnded,
3754
};
3855

39-
function addButtonToClickedSet(buttonId){
40-
setClickedButtons(prev => new Set(prev).add(buttonId));
41-
}
42-
4356
// Determines if the button pressed is a correct options and adds to metrics
4457
function handleButtonClick(event) {
58+
4559
const clickedRow = Number(event.target.id[0]);
4660
const clickedCol = Number(event.target.id[2]);
4761
let correct = numOfCorrect;
62+
let clickCorrect = correctCards.some(([row, col]) => row === clickedRow && col === clickedCol)
4863

49-
addButtonToClickedSet(`${clickedRow},${clickedCol}`);
50-
51-
if (correctCards.some(
52-
([row, col]) => row === clickedRow && col === clickedCol)) {
64+
const clickContext = {
65+
clickedRow,
66+
clickedCol,
67+
correctCards,
68+
}
69+
70+
addButtonToClickedSet(context, `${clickedRow},${clickedCol}`);
71+
updateTimeBetweenSelection(context);
72+
73+
if (!event.target.closest("button")){
74+
updateInvalidSelection(context)
75+
}
76+
else if (!event.target.closest("button").id.includes(',')) {
77+
return;
78+
}
79+
else if (clickCorrect) {
5380
correct = numOfCorrect + 1;
5481
setNumOfCorrect(correct);
55-
update_metrics();
82+
updateCorrectSelection(context);
5683
console.log('Correct!');
84+
event.target.style.visibility = "hidden";
5785
}
5886
else{
59-
setRoundHasMistake(true);
60-
update_wrong_selection();
87+
updateWrongSelection(context, clickContext);
88+
event.target.style.visibility = "hidden";
6189
}
6290

63-
if (correct === correctCards.length) {
64-
if(roundHasMistake){ setCurrentStreak(0); }
65-
else{
66-
setCurrentStreak(prev => {
67-
const newStreak = prev + 1;
68-
setMaxStreak(max => Math.max(max, newStreak));
69-
return newStreak;
70-
});
71-
}
72-
console.log("Done!");
73-
resetGameState();
91+
updateStreak(context, clickCorrect)
92+
93+
if (correct === correctCards.length){
94+
resetGameState(context);
7495
setNumOfCorrect(0);
7596
}
76-
77-
event.target.style.visibility = "hidden";
78-
79-
80-
}
81-
82-
83-
// Updates the GameState when the start button is clicked. Will also implement the game state working when user clicks all answers
84-
function resetGameState() {
85-
let currentTask = selectCurrentTask();
86-
// Use States do not update instantly
87-
setPromptMessage(currentTask[1]);
88-
renderCards(currentTask[0]);
89-
setRoundHasMistake(false);
90-
}
91-
92-
// Updates UseState to display the card_matrix. Will also implement correct cards in future commit
93-
function renderCards(prompt) {
94-
let [card_matrix, correct_cards] = selectCardValues(prompt, rows, columns);
95-
setCardMatrix(card_matrix);
96-
setCorrectCards(correct_cards);
97-
setClickedButtons(new Set())
98-
}
97+
}
9998

10099

101100
// Render the Cards by decoding matrix and adding them as buttons
@@ -105,18 +104,25 @@ export default function GameField({ setGameRunning, setMetrics }) {
105104
for (let col = 0; col < card_matrix[0].length; col++) {
106105

107106
const buttonId = `${row},${col}`;
108-
const isClicked = clickedButtons.has(buttonId);
109-
110-
111-
let onClickParameters = {} //update this for metrics tracking
107+
const isClicked = clickedButtons.has(buttonId);
108+
const isCorrect = correctCards.some(([r, c]) => r === row && c === col);
109+
112110
const labelText = get_image_str_from_id(card_matrix[row][col]);
111+
112+
const buttonColorClass = isClicked ? "bg-white text-white" : get_color_code_from_id(card_matrix[row][col]);
113+
const buttonHoverClass = isClicked ? null : get_hover_color_code_from_id(card_matrix[row][col]);
114+
115+
const buttonContent = isClicked ? "" : labelText;
113116
buttonLabels.push(
114-
<Designed_Button id = {[row, col]} key={row + ' ' + col}
115-
content={labelText} onClick={handleButtonClick}
116-
onClickParameters={onClickParameters}
117-
disable = {isClicked ? true : false}
118-
colorClass={isClicked ? "bg-white text-white" : get_color_code_from_id(card_matrix[row][col])}
119-
hoverColorClass={isClicked ? null : get_hover_color_code_from_id(card_matrix[row][col])}
117+
<Designed_Button
118+
id={buttonId}
119+
key={row + ' ' + col}
120+
content={buttonContent}
121+
onClick={handleButtonClick}
122+
disable={isClicked}
123+
colorClass={buttonColorClass}
124+
hoverColorClass={buttonHoverClass}
125+
size ={'4xl'}
120126
>
121127
</Designed_Button>
122128
); // Creates an HTML button
@@ -132,27 +138,22 @@ export default function GameField({ setGameRunning, setMetrics }) {
132138
}
133139

134140
return (
135-
<div>
141+
<div onClick={(e) => {
142+
if (e.target.closest('button')) return;
143+
handleButtonClick(e);
144+
}} >
136145
<h1>Game Field</h1>
137-
{/* example of calling the update
138-
<button id = 'update-metrics' onClick={handleButtonClick}>
139-
add 1 to total number of correct selections
140-
</button> */}
141146

142-
{<GameTimer timeLimitInSeconds = {60} onEnd={() => {setGameRunning("metrics")}}/>}
147+
{<GameTimer timeLimitInSeconds = {60} onEnd={() => endGame(context)}/>}
143148

144-
<h2>{promptMessage === '' ? resetGameState() : promptMessage}</h2>
149+
<h2>{promptMessage === '' ? resetGameState(context) : promptMessage}</h2>
145150

146151
{cardMatrix.length > 0 && <RenderCardMatrix card_matrix={cardMatrix} />}
147152

148153

149154
<Designed_Button
150155
onClick={() => {
151-
setMetrics(prev => ({
152-
...prev,
153-
longest_streak: maxStreak
154-
}));
155-
setGameRunning("metrics");
156+
if(!isGameEnded) endGame(context);
156157
}}
157158
content="End Game"
158159
colorClass = "bg-stone-300"

0 commit comments

Comments
 (0)