diff --git a/Native_Application/assets/data/Interfaces.tsx b/Native_Application/assets/data/Interfaces.tsx index 7d5a178..5fa317a 100644 --- a/Native_Application/assets/data/Interfaces.tsx +++ b/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; } diff --git a/Native_Application/assets/data/Types.tsx b/Native_Application/assets/data/Types.tsx index 9d3e856..558f9ad 100644 --- a/Native_Application/assets/data/Types.tsx +++ b/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 }; diff --git a/Native_Application/assets/sounds/countdown_time.mp3 b/Native_Application/assets/sounds/countdown_time.mp3 index ae8e52d..79a6eba 100644 Binary files a/Native_Application/assets/sounds/countdown_time.mp3 and b/Native_Application/assets/sounds/countdown_time.mp3 differ diff --git a/Native_Application/components/CountDown.tsx b/Native_Application/components/CountDown.tsx index 79d25d9..6408ad8 100644 --- a/Native_Application/components/CountDown.tsx +++ b/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() { {countDown} diff --git a/Native_Application/components/GameBoxDisplay.tsx b/Native_Application/components/GameBoxDisplay.tsx new file mode 100644 index 0000000..d99ce70 --- /dev/null +++ b/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 ( + + + {props.value} + + {props.letter} + + ); +} + +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; diff --git a/Native_Application/components/GameWrapper.tsx b/Native_Application/components/GameWrapper.tsx index 7f6c10b..a04458f 100644 --- a/Native_Application/components/GameWrapper.tsx +++ b/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 ? ( + ) : gameContext && gameContext.wordsList.length > 0 ? ( + ) : ( + + + + + Score:{" "} + + {props.score} + + + + + + + Found: + + {props.foundWords} + + + /{props.totalWords} + + + {props.word != "" ? ( + {props.word} + ) : ( + + )} + + + ); +} + +export default ScoreDisplay; diff --git a/Native_Application/components/WordDisplay.tsx b/Native_Application/components/WordDisplay.tsx index 2e730ae..0423637 100644 --- a/Native_Application/components/WordDisplay.tsx +++ b/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 ( - - - - - - Score:{" "} - - {props.score} - - - - - - {props.word != "" && ( - {props.word} - )} + + + Words Found + + ({props.foundWords.length}) + + + + {props.foundWords.map((word, index) => { + return ( + + + {word.value} + + + -{word.score} + + + ); + })} + + ); } diff --git a/Native_Application/containers/Game.tsx b/Native_Application/containers/Game.tsx index 0005357..46ab48f 100644 --- a/Native_Application/containers/Game.tsx +++ b/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 = []; @@ -23,6 +30,8 @@ function Game() { ); const [isItAwesome, setIsItAwesome] = useState(false); const [selectedBoxId, setSelectedBoxId] = useState(-1); + const [foundWords, setFoundWords] = useState([]); + 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(); 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() { - + { @@ -285,6 +314,7 @@ function Game() { return ; })} + ); } diff --git a/Native_Application/containers/ResultDisplay.tsx b/Native_Application/containers/ResultDisplay.tsx new file mode 100644 index 0000000..9e48256 --- /dev/null +++ b/Native_Application/containers/ResultDisplay.tsx @@ -0,0 +1,172 @@ +import React, { useEffect, useState } from "react"; +import { ScrollView, Text, View } from "react-native"; +import tw from "twrnc"; +import { WordsData } from "../assets/data/Interfaces"; +import { ResultProps } from "../assets/data/Types"; +import GameBoxDisplay from "../components/GameBoxDisplay"; + +const PerformaceStats = (props: { + name: string; + value: any; + altColor?: boolean; +}) => { + return ( + + + {props.name}: + + + {props.value} + + + ); +}; + +const ResultDisplay = (props: ResultProps) => { + const [foundWords, setFoundWords] = useState([]); + const [unFoundWords, setUnFoundWords] = useState([]); + const [score, setScore] = useState(0); + + const sortByLength = (arr: WordsData[]) => { + return arr.sort((x, y) => y.value.length - x.value.length); + }; + + useEffect(() => { + const { wordsList } = props; + let foundWordsTemp: WordsData[] = [], + unFoundWordsTemp: WordsData[] = []; + wordsList.map((word) => { + if (word.isIncluded) { + foundWordsTemp.push(word); + } else { + unFoundWordsTemp.push(word); + } + }); + + sortByLength(foundWordsTemp); + sortByLength(unFoundWordsTemp); + + setFoundWords(foundWordsTemp); + setUnFoundWords(unFoundWordsTemp); + setScore(props.score); + }, [props]); + + const getAvgLength = () => { + let totalLength = 0; + foundWords.map((word) => { + totalLength += word.value.length; + }); + let avgLength = totalLength / foundWords.length; + return parseFloat(avgLength.toString()).toFixed(2); + }; + + return ( + <> + + Result + + + + + {props.gameArray.map((data) => { + return ; + })} + + + + + + + + + + + + + Words Found + + + ({foundWords.length}) + + + + + {foundWords.map((word, index) => { + return ( + + + {word.value} + + + ); + })} + + + + + + + Not Found + + + ({unFoundWords.length}) + + + + + {unFoundWords.map((word, index) => { + return ( + + + {word.value} + + + ); + })} + + + + + + ); +}; + +export default ResultDisplay; diff --git a/Native_Application/contexts/GameContext.tsx b/Native_Application/contexts/GameContext.tsx index 715831f..3cd3e3a 100644 --- a/Native_Application/contexts/GameContext.tsx +++ b/Native_Application/contexts/GameContext.tsx @@ -1,23 +1,39 @@ import React, { createContext, useReducer } from "react"; import { + Data, GameAction, GameActionType, GameState, + WordsData, } from "../assets/data/Interfaces"; import { GameContextType } from "../assets/data/Types"; -const defaultState = { isGameOn: false }; +const defaultState = { + isGameOn: false, + gameArray: [], + wordsList: [], + score: 0, +}; const GameContext = createContext(null); const gameReducer = (state: GameState, action: GameAction) => { - const { type } = action; + const { type, payload } = action; switch (type) { case GameActionType.TOGGLE: { return { ...state, isGameOn: !state.isGameOn }; } + case GameActionType.UPDATE_WORDS_LIST: { + return { ...state, wordsList: payload }; + } + case GameActionType.UPDATE_GAME_ARRAY: { + return { ...state, gameArray: payload }; + } + case GameActionType.UPDATE_SCORE: { + return { ...state, score: payload }; + } default: { - throw new Error(`Unhandled action type: ${action.type}`); + throw new Error(`Unhandled action type: ${type}`); } } }; @@ -25,9 +41,37 @@ const gameReducer = (state: GameState, action: GameAction) => { const GameProvider: React.FC = (props) => { const [state, dispatch] = useReducer(gameReducer, defaultState); const toggleGameState = () => { - dispatch({ type: GameActionType.TOGGLE }); + dispatch({ type: GameActionType.TOGGLE, payload: null }); + }; + const updateWordsList = (wordsList: WordsData[]) => { + dispatch({ + type: GameActionType.UPDATE_WORDS_LIST, + payload: wordsList, + }); + }; + const updateGameArray = (gameArray: Data[]) => { + dispatch({ + type: GameActionType.UPDATE_GAME_ARRAY, + payload: gameArray, + }); + }; + const updateScore = (score: number) => { + dispatch({ + type: GameActionType.UPDATE_SCORE, + payload: score, + }); + }; + + const value = { + isGameOn: state.isGameOn, + gameArray: state.gameArray, + wordsList: state.wordsList, + score: state.score, + toggleGameState, + updateWordsList, + updateGameArray, + updateScore, }; - const value = { isGameOn: state.isGameOn, toggleGameState }; return ( diff --git a/Web_Application/package.json b/Web_Application/package.json index 4fae852..530a0e4 100644 --- a/Web_Application/package.json +++ b/Web_Application/package.json @@ -53,6 +53,7 @@ "eslint-config-google": "^0.14.0", "eslint-plugin-react": "^7.29.2", "postcss": "^8.4.7", + "tailwind-scrollbar": "^1.3.1", "tailwindcss": "^3.0.23" }, "main": "index.js", diff --git a/Web_Application/src/App.tsx b/Web_Application/src/App.tsx index 277cdca..00dedec 100644 --- a/Web_Application/src/App.tsx +++ b/Web_Application/src/App.tsx @@ -1,5 +1,6 @@ import React, { useContext } from "react"; import Game from "./containers/Game"; +import ResultDisplay from "./containers/ResultDisplay"; import { GameContext } from "./contexts/GameContext"; function App() { @@ -9,6 +10,12 @@ function App() {
{gameContext && gameContext.isGameOn ? ( + ) : gameContext && gameContext.wordsList.length > 0 ? ( + ) : (
diff --git a/Web_Application/src/components/GameBoxDisplay.tsx b/Web_Application/src/components/GameBoxDisplay.tsx new file mode 100644 index 0000000..8bf2378 --- /dev/null +++ b/Web_Application/src/components/GameBoxDisplay.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Data } from "../assets/data/Interfaces"; +import { DataProps } from "../assets/data/Types"; + +function GameBoxDisplay(props: Data) { + return ( +
+ + {props.value} + + {props.letter} +
+ ); +} + +export default GameBoxDisplay; diff --git a/Web_Application/src/components/ScoreDisplay.tsx b/Web_Application/src/components/ScoreDisplay.tsx new file mode 100644 index 0000000..e9e505d --- /dev/null +++ b/Web_Application/src/components/ScoreDisplay.tsx @@ -0,0 +1,41 @@ +import React from "react"; +import { ScoreProps } from "../assets/data/Types"; +import CountDown from "./CountDown"; + +function ScoreDisplay(props: ScoreProps) { + return ( +
+
+ +
+ Score:{" "} + + {props.score} + +
+
+
+
+ Found: + + {props.foundWords} + + + /{props.totalWords} + +
+ {props.word != "" ? ( +
+ + {props.word} + +
+ ) : ( +
+ )} +
+
+ ); +} + +export default ScoreDisplay; diff --git a/Web_Application/src/components/WordDisplay.tsx b/Web_Application/src/components/WordDisplay.tsx index ef79465..8c7d0fd 100644 --- a/Web_Application/src/components/WordDisplay.tsx +++ b/Web_Application/src/components/WordDisplay.tsx @@ -1,28 +1,35 @@ import React from "react"; import { WordProps } from "../assets/data/Types"; -import CountDown from "./CountDown"; -function WordDisplay(props: WordProps) { +const WordDisplay = (props: WordProps) => { return ( -
-
- -
- Score:{" "} - - {props.score} - -
+
+ + Words Found{" "} + + ({props.foundWords.length}) + + +
+ {props.foundWords.map((word, index) => { + return ( + + {word.value} + + -{word.score} + + + ); + })}
- {props.word != "" && ( -
- - {props.word} - -
- )}
); -} +}; export default WordDisplay; diff --git a/Web_Application/src/containers/Game.tsx b/Web_Application/src/containers/Game.tsx index 865dcdb..95ebcee 100644 --- a/Web_Application/src/containers/Game.tsx +++ b/Web_Application/src/containers/Game.tsx @@ -1,6 +1,5 @@ -import React, { useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import GameBox from "../components/GameBox"; -import WordDisplay from "../components/WordDisplay"; import letter_selector_sound from "../assets/sounds/letter_selector.mp3"; import already_present_sound from "../assets/sounds/already_present.mp3"; import accepted_word_sound from "../assets/sounds/accepted_word.mp3"; @@ -8,7 +7,10 @@ import invalid_word_sound from "../assets/sounds/invalid_word.mp3"; import bonus1_sound from "../assets/sounds/bonus1.mp3"; import useSound from "use-sound"; import { originalData, solutionData } from "../assets/data/GameDataSource"; -import { WordsData, Data } from "../assets/data/Interfaces"; +import { WordsData, Data, FoundWords } from "../assets/data/Interfaces"; +import ScoreDisplay from "../components/ScoreDisplay"; +import WordDisplay from "../components/WordDisplay"; +import { GameContext } from "../contexts/GameContext"; function Game() { let validWordsList: Array = []; @@ -38,6 +40,12 @@ function Game() { const [currentWordScore, setCurrentWordScore] = useState(0); const [gameScore, setGameScore] = useState(0); const [selectedBoxId, setSelectedBoxId] = useState(-1); + const [foundWords, setFoundWords] = useState([]); + const gameContext = useContext(GameContext); + + useEffect(() => { + if (gameContext) gameContext.updateGameArray(gameData); + }, []); document.addEventListener("mousedown", () => { setIsMouseDown(true); @@ -106,6 +114,7 @@ function Game() { if (!tempWordsList[foundIndex].isIncluded) { tempWordsList[foundIndex].isIncluded = true; setValidWordsData(tempWordsList); + if (gameContext) gameContext.updateWordsList(tempWordsList); return 1; } else return 2; } @@ -176,9 +185,22 @@ function Game() { specialComments.classList.remove("scale-1"); specialComments.classList.add("scale-0"); } - if (validStatus == 1) tempScore += currentWordScore; + if (validStatus == 1) { + tempScore += currentWordScore; + + let tempFoundWords = foundWords; + tempFoundWords.push({ + score: currentWordScore, + value: currentWord, + }); + setFoundWords(tempFoundWords); + let foundWordsDiv = document.getElementById("found-words-list"); + if (foundWordsDiv) + foundWordsDiv.scrollTop = foundWordsDiv.scrollHeight; + } setGameScore(tempScore); + if (gameContext) gameContext.updateScore(tempScore); setCurrentWordScore(0); setCurrentWord(""); setGameData(originalData); @@ -256,7 +278,12 @@ function Game() { Awesome!
- +
{ @@ -295,6 +322,7 @@ function Game() { ); })}
+
); } diff --git a/Web_Application/src/containers/ResultDisplay.tsx b/Web_Application/src/containers/ResultDisplay.tsx new file mode 100644 index 0000000..75efbb6 --- /dev/null +++ b/Web_Application/src/containers/ResultDisplay.tsx @@ -0,0 +1,148 @@ +import React, { useEffect, useState } from "react"; +import { WordsData } from "../assets/data/Interfaces"; +import { ResultProps } from "../assets/data/Types"; +import GameBoxDisplay from "../components/GameBoxDisplay"; + +const PerformaceStats = (props: { name: string; value: any }) => { + return ( + <> +
+ {props.name}: +
+
+ {props.value} +
+ + ); +}; + +const ResultDisplay = (props: ResultProps) => { + const [foundWords, setFoundWords] = useState([]); + const [unFoundWords, setUnFoundWords] = useState([]); + const [score, setScore] = useState(0); + + const sortByLength = (arr: WordsData[]) => { + return arr.sort((x, y) => y.value.length - x.value.length); + }; + + useEffect(() => { + const { wordsList } = props; + let foundWordsTemp: WordsData[] = [], + unFoundWordsTemp: WordsData[] = []; + wordsList.map((word) => { + if (word.isIncluded) { + foundWordsTemp.push(word); + } else { + unFoundWordsTemp.push(word); + } + }); + + sortByLength(foundWordsTemp); + sortByLength(unFoundWordsTemp); + + setFoundWords(foundWordsTemp); + setUnFoundWords(unFoundWordsTemp); + setScore(props.score); + }, [props]); + + const getAvgLength = () => { + let totalLength = 0; + foundWords.map((word) => { + totalLength += word.value.length; + }); + let avgLength = totalLength / foundWords.length; + return parseFloat(avgLength.toString()).toFixed(2); + }; + + return ( + <> +
+ + Result + +
+
+
+
+ {props.gameArray.map((data) => { + return ; + })} +
+
+
+
+ + + + + +
+
+
+ + Found{" "} + + ({foundWords.length}) + + +
+ {foundWords.map((word, index) => { + return ( + + {word.value} + + ); + })} +
+
+
+ + Not Found{" "} + + ({unFoundWords.length}) + + +
+ {unFoundWords.map((word, index) => { + return ( + + {word.value} + + ); + })} +
+
+
+ + ); +}; + +export default ResultDisplay; diff --git a/Web_Application/src/contexts/GameContext.tsx b/Web_Application/src/contexts/GameContext.tsx index 715831f..41fcc50 100644 --- a/Web_Application/src/contexts/GameContext.tsx +++ b/Web_Application/src/contexts/GameContext.tsx @@ -1,23 +1,39 @@ import React, { createContext, useReducer } from "react"; import { + Data, GameAction, GameActionType, GameState, + WordsData, } from "../assets/data/Interfaces"; import { GameContextType } from "../assets/data/Types"; -const defaultState = { isGameOn: false }; +const defaultState = { + isGameOn: false, + gameArray: [], + wordsList: [], + score: 0, +}; const GameContext = createContext(null); const gameReducer = (state: GameState, action: GameAction) => { - const { type } = action; + const { type, payload } = action; switch (type) { case GameActionType.TOGGLE: { return { ...state, isGameOn: !state.isGameOn }; } + case GameActionType.UPDATE_WORDS_LIST: { + return { ...state, wordsList: payload }; + } + case GameActionType.UPDATE_GAME_ARRAY: { + return { ...state, gameArray: payload }; + } + case GameActionType.UPDATE_SCORE: { + return { ...state, score: payload }; + } default: { - throw new Error(`Unhandled action type: ${action.type}`); + throw new Error(`Unhandled action type: ${type}`); } } }; @@ -25,9 +41,36 @@ const gameReducer = (state: GameState, action: GameAction) => { const GameProvider: React.FC = (props) => { const [state, dispatch] = useReducer(gameReducer, defaultState); const toggleGameState = () => { - dispatch({ type: GameActionType.TOGGLE }); + dispatch({ type: GameActionType.TOGGLE, payload: null }); + }; + const updateWordsList = (wordsList: WordsData[]) => { + dispatch({ + type: GameActionType.UPDATE_WORDS_LIST, + payload: wordsList, + }); + }; + const updateGameArray = (gameArray: Data[]) => { + dispatch({ + type: GameActionType.UPDATE_GAME_ARRAY, + payload: gameArray, + }); + }; + const updateScore = (score: number) => { + dispatch({ + type: GameActionType.UPDATE_SCORE, + payload: score, + }); + }; + const value = { + isGameOn: state.isGameOn, + gameArray: state.gameArray, + wordsList: state.wordsList, + score: state.score, + toggleGameState, + updateWordsList, + updateGameArray, + updateScore, }; - const value = { isGameOn: state.isGameOn, toggleGameState }; return ( diff --git a/Web_Application/tailwind.config.js b/Web_Application/tailwind.config.js index 3eb1360..2539d66 100644 --- a/Web_Application/tailwind.config.js +++ b/Web_Application/tailwind.config.js @@ -1,7 +1,25 @@ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { - extend: {}, + extend: { + width: { + 18: "4.5rem", + 88: "24rem", + 128: "32rem", + }, + height: { + 18: "4.5rem", + }, + scale: { + 60: ".60", + }, + gap: { + 0.75: "3px", + }, + }, + }, + plugins: [require("tailwind-scrollbar")], + variants: { + scrollbar: ["rounded"], }, - plugins: [], }; diff --git a/Web_Application/yarn.lock b/Web_Application/yarn.lock index 8d30ed9..62e8af9 100644 --- a/Web_Application/yarn.lock +++ b/Web_Application/yarn.lock @@ -8025,7 +8025,14 @@ symbol-tree@^3.2.4: resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== -tailwindcss@^3.0.2, tailwindcss@^3.0.23: +tailwind-scrollbar@^1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-1.3.1.tgz#271d7c405bcddb7b5f5f77d7f43758c89e389767" + integrity sha512-FeYuLxLtCRMO4PmjPJCzm5wQouFro2BInZXKPxqg54DR/55NAHoS8uNYWMiRG5l6qsLkWBfVEM34gq2XAQUwVg== + dependencies: + tailwindcss ">1.9.6" + +tailwindcss@>1.9.6, tailwindcss@^3.0.2, tailwindcss@^3.0.23: version "3.0.23" resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.23.tgz" integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==