;
+ incorrectLetters: string;
+ setCorrectLetters: any
+}) {
+
+ const [currentAnimState, setCurrentAnimState] = useState("start");
+ const [isExploding, setIsExploding] = useState(false);
+
+ useEffect(() => {
+ if (!gameOver) {
+ setCurrentAnimState("start");
+ } else {
+ setCurrentAnimState("end");
+ }
+ if (winState) {
+ setTimeout(() => {
+ setIsExploding(true);
+ }, 750);
+ }
+ }, [gameOver]);
+
+ const animationStates = {
+ start : { opacity: 1, scale: 1, display: "grid", height: "auto", translateY: 0 },
+ end : { opacity: 0, scale: 0, height: 0, display: "none", translateY: -500 }
+ }
+
+ const confettiData = {
+ force: 0.6,
+ duration: 3200,
+ particleCount: 100,
+ width: 1000,
+ }
+
+
+ return (
+ <>
+
+
+ {Array(6)
+ .fill(0)
+ .map((_, row) =>
+ Array(5)
+ .fill(0)
+ .map((_, column) => (
+
+ ))
+ )}
+
+
+
+
+ {winState ? "You Win!" : loseState ? "You Lose!" : ""}
+ Correct word is {word}
+
+
+ {winState && isExploding && }
+
+
+ );
+}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 000000000..7b7976f25
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,51 @@
+
+import { useEffect } from 'react';
+import { VscDebugRestart } from "react-icons/vsc";
+import { motion, useAnimation } from 'framer-motion';
+
+
+function resetGame(setStrings: any, setColors: any, setString: any, setWord: any, setGameOver: any, setCorrectLetters: any, setWinState: any, setLoseState: any, setIncorrectLetters: any) {
+ setStrings([]);
+ setColors([]);
+ setString("");
+ setWord("");
+ setGameOver(false);
+ setCorrectLetters(["", "", "", "", ""]);
+ setWinState(false);
+ setLoseState(false);
+ setIncorrectLetters("");
+}
+
+export default function Button(props: any) {
+ const { setStrings, setColors, setString, setWord, setGameOver, gameOverState, setCorrectLetters, setWinState, setLoseState, setIncorrectLetters } = props;
+ const controls = useAnimation();
+
+ useEffect(() => {
+ if (gameOverState) {
+ controls.start({
+ transform: "translateY(25px)",
+ opacity: 1,
+ display: "block",
+ transition: { duration: 0.5 }
+ });
+ } else {
+ controls.start({
+ transform: "translateY(0px)",
+ opacity: 0,
+ display: "none",
+ transition: { duration: 0.5 }
+ });
+ }
+ }, [gameOverState, controls]);
+
+ return (
+ resetGame(setStrings, setColors, setString, setWord, setGameOver, setCorrectLetters, setWinState, setLoseState, setIncorrectLetters)}>
+
+ Play Again
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/GuessBox.tsx b/src/components/GuessBox.tsx
new file mode 100644
index 000000000..5ee6f24c8
--- /dev/null
+++ b/src/components/GuessBox.tsx
@@ -0,0 +1,30 @@
+
+import { motion } from 'framer-motion';
+
+export default function GuessBox({correctLetters, gameOver}:{correctLetters: string[], gameOver: boolean}) {
+ return (
+
+ {
+ correctLetters.map((letter, index) => (
+
+ {letter}
+
+ ))
+ }
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Keyboard.tsx b/src/components/Keyboard.tsx
new file mode 100644
index 000000000..a7c2c358c
--- /dev/null
+++ b/src/components/Keyboard.tsx
@@ -0,0 +1,135 @@
+import { motion } from "framer-motion";
+import { useRef } from "react";
+import { MdOutlineKeyboardReturn } from "react-icons/md";
+import { HiOutlineLightBulb } from "react-icons/hi";
+import { FiDelete } from "react-icons/fi";
+import '../App.css';
+
+
+export default function Keyboard(
+ {
+ string,
+ setString,
+ gameSounds,
+ incorrectLetters,
+ word,
+ setCorrectLetters,
+ gameOver,
+ }:
+ {
+ string: string;
+ setString: any;
+ gameSounds: any;
+ incorrectLetters: string;
+ word: string;
+ setCorrectLetters: any;
+ gameOver: boolean;
+ }) {
+ const timerId = useRef(0);
+ const keyboardLayout = useRef([
+ "q","w","e","r","t","y","u","i","o","p",
+ "a","s","d","f","g","h","j","k","l",
+ "z","x","c","v","b","n","m"
+ ])
+
+
+ const deleteEntireString = () => {
+ timerId.current = setTimeout(() => {
+ setString("");
+ gameSounds.current.playSound("keystroke");
+ }, 750);
+ }
+
+ const stopDeleteEntireString = () => {
+ clearTimeout(timerId.current);
+ }
+
+ return (
+
+
+ {
+ gameSounds.current.playSound("keystroke");
+ if (string.length === 5) {
+ const e = new KeyboardEvent("keydown", { key: "Enter" });
+ window.dispatchEvent(e);
+ }
+ }}
+ style={{ fontFamily: "system-ui", boxShadow: "#8f8c8c 0px -4px inset" }}
+ className="bg-neutral-500 flex items-center justify-center text-neutral-100 font-bold w-16 h-11 rounded border border-neutral-500">
+
+
+
+ {
+ gameSounds.current.playSound("keystroke");
+ setCorrectLetters((prev: string[]) => {
+ const copy = [...prev];
+ copy[copy.indexOf("")] = word[copy.indexOf("")];
+ return copy;
+ });
+ }}
+ style={{ fontFamily: "system-ui", boxShadow: "#8f8c8c 0px -4px inset" }}
+ className="bg-neutral-500 flex items-center justify-center text-neutral-100 font-bold w-16 h-11 rounded border border-neutral-500">
+
+
+
+ {
+ gameSounds.current.playSound("keystroke");
+ if (string.length > 0) {
+ setString((prev: string) => prev.slice(0, -1));
+ }
+ }}
+ onTapStart={deleteEntireString}
+ onTapCancel={stopDeleteEntireString}
+ onMouseDown={deleteEntireString}
+ onMouseUp={stopDeleteEntireString}
+ style={{ fontFamily: "system-ui", boxShadow: "#8f8c8c 0px -4px inset" }}
+ className="bg-neutral-500 flex items-center justify-center text-neutral-100 font-bold w-16 h-11 rounded border border-neutral-500">
+
+
+
+
+
+ {
+ keyboardLayout.current
+ .map((key, index) => (
+ {
+ gameSounds.current.playSound("keystroke");
+ if (string.length < 5) {
+ setString((prev: string) => prev + key);
+ }
+ }}
+ style={{ fontFamily: "system-ui", boxShadow: "#8f8c8c 0px -4px inset", backgroundColor: incorrectLetters.includes(key) ? "#371d1d" : "rgb(115 115 115)" }}
+ disabled={incorrectLetters.includes(key)}
+ key={index} className="bg-neutral-500 text-neutral-100 font-bold size-9 md:size-11 rounded border border-neutral-500 ">
+ {
+ key.toUpperCase()
+ }
+
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 000000000..bd6213e1d
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 000000000..6f4ac9bcc
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..d37737fc0
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 000000000..f0a235055
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 000000000..0d3d71446
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 000000000..5ce2dd29e
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ server: {
+ host: '0.0.0.0'
+ }
+})