Feature the searched words and result display

Native_Application/assets/data/Interfaces.tsx

@@ -25,11 +25,23 @@ export interface LayoutData {
 
 export interface GameState {
 	isGameOn: boolean;
+	gameArray: Data[];
+	wordsList: WordsData[];
+	score: number;
 }
 
 export enum GameActionType {
 	TOGGLE = "toggle",
+	UPDATE_WORDS_LIST = "update-words-list",
+	UPDATE_GAME_ARRAY = "update-game-array",
+	UPDATE_SCORE = "update-score",
 }
 export interface GameAction {
 	type: GameActionType;
+	payload: any;
+}
+
+export interface FoundWords {
+	score: number;
+	value: string;
 }

Native_Application/assets/data/Types.tsx

@@ -1,3 +1,5 @@
+import { Data, FoundWords, WordsData } from "./Interfaces";
+
 export type DataProps = {
 	id: number;
 	letter: string;
@@ -6,20 +8,37 @@ export type DataProps = {
 	tileState: number;
 };
 
-export type WordProps = {
+export type ScoreProps = {
 	word: string;
 	score: number;
+	totalWords: number;
+	foundWords: number;
 };
 
-let DEFAULT = 1,
-	SELECTED = 2,
-	CORRECT = 3,
-	ALREADY = 4,
-	WRONG = 5;
+export type ResultProps = {
+	gameArray: Data[];
+	wordsList: WordsData[];
+	score: number;
+};
 
 export type GameContextType = {
 	isGameOn: boolean;
+	gameArray: Data[];
+	wordsList: WordsData[];
+	score: number;
 	toggleGameState: () => void;
+	updateWordsList: (wordsList: WordsData[]) => void;
+	updateGameArray: (gameArray: Data[]) => void;
+	updateScore: (score: number) => void;
 };
 
+export type WordProps = {
+	foundWords: FoundWords[];
+};
+
+let DEFAULT = 1,
+	SELECTED = 2,
+	CORRECT = 3,
+	ALREADY = 4,
+	WRONG = 5;
 export { DEFAULT, SELECTED, CORRECT, ALREADY, WRONG };

Native_Application/components/CountDown.tsx

@@ -23,6 +23,10 @@ function CountDown() {
 		})();
 	}, []);
 
+	useEffect(() => {
+		if (countDownTimerSound) countDownTimerSound.setIsLoopingAsync(true);
+	}, [countDownTimerSound]);
+
 	useEffect(() => {
 		// TODO:: TO BE REPLACED BY TIME OF THE GAME ON THE SERVER IF EXISTS
 		let cTime = new Date(+new Date() + 60000 * 2).getTime(); //Adding two minutes to current time
@@ -72,7 +76,7 @@ function CountDown() {
 			<Text
 				style={[
 					isFinalSeconds ? tw`text-red-400` : tw`text-slate-300`,
-					tw`text-2xl`,
+					tw`text-3xl`,
 				]}
 			>
 				{countDown}

Native_Application/components/GameBoxDisplay.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+import tw from "twrnc";
+import { View, Text, Dimensions, StyleSheet } from "react-native";
+import { DEFAULT } from "../assets/data/Types";
+import { Data } from "../assets/data/Interfaces";
+
+const screen = Dimensions.get("screen");
+
+function GameBoxDisplay(props: Data) {
+	const getBoxColorFromState = (state: number) => {
+		switch (state) {
+			default:
+				return `bg-blue-400`;
+		}
+	};
+
+	const [tileColor, setTileColor] = useState(getBoxColorFromState(DEFAULT));
+
+	useEffect(() => {
+		setTileColor(getBoxColorFromState(props.tileState));
+	}, [props.tileState]);
+
+	return (
+		<View
+			style={[
+				styles.boxDimensions,
+				tw`rounded-sm flex justify-center items-center`,
+				tw`${tileColor}`,
+			]}
+		>
+			<Text style={[styles.boxValue, tw`absolute top-0 left-1`]}>
+				{props.value}
+			</Text>
+			<Text style={[styles.boxText]}>{props.letter}</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	boxDimensions: {
+		width: (screen.width - 25 - 5 * 2.5) / 8,
+		height: (screen.width - 25 - 5 * 2.5) / 8,
+		margin: 0.8,
+		elevation: 8,
+		shadowColor: "black",
+		borderColor: "black",
+		borderWidth: 1,
+	},
+	boxText: {
+		fontSize: 15,
+	},
+	boxValue: {
+		fontSize: 6,
+	},
+});
+
+export default GameBoxDisplay;

Native_Application/components/GameWrapper.tsx

@@ -3,6 +3,7 @@ import tw from "twrnc";
 import { Text, TouchableOpacity, View } from "react-native";
 import Game from "../containers/Game";
 import { GameContext } from "../contexts/GameContext";
+import ResultDisplay from "../containers/ResultDisplay";
 
 export default function GameWrapper() {
 	const gameContext = useContext(GameContext);
@@ -13,6 +14,12 @@ export default function GameWrapper() {
 		>
 			{gameContext && gameContext.isGameOn ? (
 				<Game />
+			) : gameContext && gameContext.wordsList.length > 0 ? (
+				<ResultDisplay
+					gameArray={gameContext.gameArray}
+					wordsList={gameContext.wordsList}
+					score={gameContext.score}
+				/>
 			) : (
 				<View>
 					<TouchableOpacity

Native_Application/components/ScoreDisplay.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { View, Text } from "react-native";
+import tw from "twrnc";
+
+import { ScoreProps } from "../assets/data/Types";
+import CountDown from "./CountDown";
+
+function ScoreDisplay(props: ScoreProps) {
+	return (
+		<View style={tw`h-20 w-full mt-4 mb-4 flex flex-row items-center px-4`}>
+			<View>
+				<CountDown />
+				<View style={tw`w-30 px-2`}>
+					<Text style={tw`text-slate-300 text-lg`}>
+						Score:{" "}
+						<Text style={tw`text-xl text-white`}>
+							{props.score}
+						</Text>
+					</Text>
+				</View>
+			</View>
+			<View style={tw`w-1/2 flex flex-col`}>
+				<View style={tw`flex flex-row items-center mb-2`}>
+					<Text style={tw`text-slate-300 text-lg`}> Found: </Text>
+					<Text style={tw`text-xl text-white px-1`}>
+						{props.foundWords}
+					</Text>
+					<Text style={tw`text-slate-200 text-lg`}>
+						/{props.totalWords}
+					</Text>
+				</View>
+				{props.word != "" ? (
+					<Text style={tw`text-lg bg-white px-2`}>{props.word}</Text>
+				) : (
+					<View style={tw`h-7`}></View>
+				)}
+			</View>
+		</View>
+	);
+}
+
+export default ScoreDisplay;

Native_Application/components/WordDisplay.tsx

@@ -1,29 +1,38 @@
-import React, { useState } from "react";
-import { View, Text } from "react-native";
-import tw from "twrnc";
-
+import { ScrollView, Text, View } from "react-native";
 import { WordProps } from "../assets/data/Types";
-import CountDown from "./CountDown";
+import tw from "twrnc";
 
 function WordDisplay(props: WordProps) {
 	return (
-		<View style={tw`h-8 w-full mb-8 flex flex-row items-center px-4`}>
-			<View>
-				<CountDown />
-				<View style={tw`w-30 px-2`}>
-					<Text style={tw`text-slate-300 text-lg`}>
-						Score:{" "}
-						<Text style={tw`text-xl text-white`}>
-							{props.score}
-						</Text>
-					</Text>
-				</View>
-			</View>
-			<View>
-				{props.word != "" && (
-					<Text style={tw`text-lg bg-white px-2`}>{props.word}</Text>
-				)}
+		<View style={tw`flex-1 w-full p-4 m-5 flex flex-col justify-center`}>
+			<View style={tw`flex flex-row items-center`}>
+				<Text style={tw`text-amber-500 text-base`}>Words Found</Text>
+				<Text style={tw`text-amber-300 text-sm ml-1`}>
+					({props.foundWords.length})
+				</Text>
 			</View>
+			<ScrollView
+				persistentScrollbar
+				style={tw`w-8/8 h-7/8 border rounded-sm border-white p-2 `}
+			>
+				<View style={tw`flex-row flex-wrap`}>
+					{props.foundWords.map((word, index) => {
+						return (
+							<View
+								key={index}
+								style={tw`flex flex-row mr-6 mb-1`}
+							>
+								<Text style={tw`text-sm text-amber-300`}>
+									{word.value}
+								</Text>
+								<Text style={tw`text-amber-500 ml-1`}>
+									-{word.score}
+								</Text>
+							</View>
+						);
+					})}
+				</View>
+			</ScrollView>
 		</View>
 	);
 }

Native_Application/containers/Game.tsx

@@ -1,12 +1,19 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import tw from "twrnc";
 import { View, Text, GestureResponderEvent, StyleSheet } from "react-native";
-import { WordsData, Data, LayoutData } from "../assets/data/Interfaces";
+import {
+	WordsData,
+	Data,
+	LayoutData,
+	FoundWords,
+} from "../assets/data/Interfaces";
 import { originalData, solutionData } from "../assets/data/GameDataSource";
 import GameBox from "../components/GameBox";
-import WordDisplay from "../components/WordDisplay";
 import { ALREADY, CORRECT, SELECTED, WRONG } from "../assets/data/Types";
 import { Audio } from "expo-av";
+import ScoreDisplay from "../components/ScoreDisplay";
+import WordDisplay from "../components/WordDisplay";
+import { GameContext } from "../contexts/GameContext";
 
 function Game() {
 	let validWordsList: Array<WordsData> = [];
@@ -23,6 +30,8 @@ function Game() {
 	);
 	const [isItAwesome, setIsItAwesome] = useState<boolean>(false);
 	const [selectedBoxId, setSelectedBoxId] = useState<number>(-1);
+	const [foundWords, setFoundWords] = useState<FoundWords[]>([]);
+	const gameContext = useContext(GameContext);
 
 	solutionData.map((solution) => {
 		if (solution.length > 2) {
@@ -33,6 +42,10 @@ function Game() {
 		}
 	});
 
+	useEffect(() => {
+		if (gameContext) gameContext.updateGameArray(gameData);
+	}, []);
+
 	const [sound, setSound] = useState<Audio.Sound>();
 
 	const playLetterSelectorSound = async () => {
@@ -133,6 +146,7 @@ function Game() {
 			if (!tempWordsList[foundIndex].isIncluded) {
 				tempWordsList[foundIndex].isIncluded = true;
 				setValidWordsData(tempWordsList);
+				if (gameContext) gameContext.updateWordsList(tempWordsList);
 				return 1;
 			} else return 2;
 		}
@@ -221,11 +235,21 @@ function Game() {
 		if (validStatus == 2) playAlreadyPresentSound();
 
 		setTimeout(() => {
-			if (validStatus == 1) tempScore += currentWordScore;
+			if (validStatus == 1) {
+				tempScore += currentWordScore;
+
+				let tempFoundWords = foundWords;
+				tempFoundWords.unshift({
+					score: currentWordScore,
+					value: currentWord,
+				});
+				setFoundWords(tempFoundWords);
+			}
 			console.log(currentWord);
 			console.log("Score: ", currentWordScore);
 
 			setGameScore(tempScore);
+			if (gameContext) gameContext.updateScore(tempScore);
 			setCurrentWordScore(0);
 			setCurrentWord("");
 			setSelectedBoxId(-1);
@@ -263,7 +287,12 @@ function Game() {
 				</Text>
 			</View>
 
-			<WordDisplay word={currentWord} score={gameScore} />
+			<ScoreDisplay
+				word={currentWord}
+				score={gameScore}
+				totalWords={solutionData.length || 0}
+				foundWords={foundWords.length}
+			/>
 
 			<View
 				onLayout={({ nativeEvent }) => {
@@ -285,6 +314,7 @@ function Game() {
 					return <GameBox key={data.id} {...data} />;
 				})}
 			</View>
+			<WordDisplay foundWords={foundWords} />
 		</View>
 	);
 }