+
+ );
+};
+
+export default App;
diff --git a/frontend/src/Logo.png b/frontend/src/Logo.png
new file mode 100644
index 0000000..d71bd74
Binary files /dev/null and b/frontend/src/Logo.png differ
diff --git a/frontend/src/components/Board.tsx b/frontend/src/components/Board.tsx
new file mode 100644
index 0000000..6ee81fa
--- /dev/null
+++ b/frontend/src/components/Board.tsx
@@ -0,0 +1,62 @@
+import Letter from "./Letter";
+
+export const boardDefault = [
+ ["", "", "", "", ""],
+ ["", "", "", "", ""],
+ ["", "", "", "", ""],
+ ["", "", "", "", ""],
+ ["", "", "", "", ""],
+ ["", "", "", "", ""],
+];
+
+function Board() {
+ return (
+
+
+
+ {popupMessage && Авторизация
+ + + + + {passwordDirty && passwordError && ( +{passwordError}
+ )}
+ {apiError && {apiError}
}
+
+
+
+
+ {" "}
+
+ );
+}
+
+export default Board;
diff --git a/frontend/src/components/Game.tsx b/frontend/src/components/Game.tsx
new file mode 100644
index 0000000..d26fe3f
--- /dev/null
+++ b/frontend/src/components/Game.tsx
@@ -0,0 +1,198 @@
+import "../App.css";
+import Board, { boardDefault } from "./Board";
+import Keyboard from "./Keyboard";
+import React, { useState, createContext, useEffect, useCallback } from "react";
+import GameOver from "./GameOver";
+import Popup from "./Popup"
+
+interface CurrAttempt {
+ attempt: number;
+ letter: number;
+}
+
+interface GameOverState {
+ gameOver: boolean;
+ guessedWord: boolean;
+}
+
+interface CheckResults {
+ [key: number]: string[];
+}
+
+interface KeyValColor {
+ [key: string]: string;
+}
+
+interface GameContextProps {
+ board: string[][];
+ setBoard: React.Dispatch
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Game;
diff --git a/frontend/src/components/GameOver.tsx b/frontend/src/components/GameOver.tsx
new file mode 100644
index 0000000..63ca32f
--- /dev/null
+++ b/frontend/src/components/GameOver.tsx
@@ -0,0 +1,42 @@
+import React, { useContext } from "react";
+import { useNavigate } from "react-router-dom";
+import { GameContext } from "./Game";
+import "../App.css";
+
+interface GameContextType {
+ currAttempt: { attempt: number; letter: number };
+ gameOver: { gameOver: boolean; guessedWord: boolean };
+}
+
+const GameOver: React.FC = () => {
+ const gameContext = useContext(GameContext);
+ const navigate = useNavigate();
+
+ if (!gameContext) {
+ return null;
+ }
+
+ const { currAttempt, gameOver, correctWord } = gameContext;
+
+ const handleGoHome = () => {
+ navigate("/");
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+
+export default GameOver;
diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
new file mode 100644
index 0000000..408ad51
--- /dev/null
+++ b/frontend/src/components/Home.tsx
@@ -0,0 +1,158 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import "../App.css";
+import Logo from "../Logo.png";
+import Popup from "./Popup";
+import Leaderboard from "./Leaderboard";
+
+interface UserInfo {
+ username: string;
+}
+
+const Home: React.FC = () => {
+ const navigate = useNavigate();
+ const [userInfo, setUserInfo] = useState{gameOver.guessedWord ? "Молодец" : "Не молодец"}
+ {gameOver.guessedWord && ( +Ты угадал за {currAttempt.attempt} попыток
+ )} + {!gameOver.guessedWord && ( +Правильное слово: {correctWord}
+ )} + +
+ 
+ setError(null)} duration={3000} />}
+
+
+ );
+};
+
+export default Home;
diff --git a/frontend/src/components/Key.tsx b/frontend/src/components/Key.tsx
new file mode 100644
index 0000000..9e2de68
--- /dev/null
+++ b/frontend/src/components/Key.tsx
@@ -0,0 +1,76 @@
+import React, { useContext } from "react";
+import { motion } from "framer-motion";
+import { GameContext } from "./Game";
+
+interface KeyProps {
+ keyVal: string;
+ bigKey?: boolean;
+}
+
+interface GameContextType {
+ gameOver: { gameOver: boolean };
+ onSelectLetter: (key: string) => void;
+ onDelete: () => void;
+ onEnter: () => Promise
+
+
+ {userInfo && (
+ Wordle
+Угадай 5-буквенное слово с 6 попыток.
+
+ {!userInfo && (
+
+ )}
+
+
+
+ {userInfo}
+
+
+ )}
+
+ {error &&
+
+
+
+ );
+};
+
+export default Keyboard;
diff --git a/frontend/src/components/Leaderboard.tsx b/frontend/src/components/Leaderboard.tsx
new file mode 100644
index 0000000..228d6e1
--- /dev/null
+++ b/frontend/src/components/Leaderboard.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+
+interface UserStats {
+ username: string;
+ wins_count: number;
+ w_l: number;
+}
+
+interface LeaderboardResponse {
+ user_stats: UserStats;
+ leaderboard_stats: UserStats[];
+}
+
+const Leaderboard: React.FC = () => {
+ const [leaderboard, setLeaderboard] = useState
+ {keys1.map((key) => (
+
+
+ {keys2.map((key) => (
+
+
+
+ Загрузка списка лидеров...
;
+ }
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default Leaderboard;
diff --git a/frontend/src/components/Letter.tsx b/frontend/src/components/Letter.tsx
new file mode 100644
index 0000000..7cdd5e3
--- /dev/null
+++ b/frontend/src/components/Letter.tsx
@@ -0,0 +1,51 @@
+import React, { useContext } from "react";
+import { GameContext } from "./Game";
+import { motion } from "framer-motion";
+
+
+interface GameContextType {
+ board: string[][];
+ checkResults: RecordСписок лидеров
+ {userStats && ( +
+
+ )}
+ Ваша статистика
+Победы: {userStats.wins_count}
+Отношение W/L: {userStats.w_l}
+| Место | +Имя пользователя | +Победы | +Отношение W/L | +
|---|---|---|---|
| {index + 1} | +{user.username} | +{user.wins_count} | +{user.w_l} | +
+
+ );
+};
+
+export default Popup;
diff --git a/frontend/src/components/Registration.tsx b/frontend/src/components/Registration.tsx
new file mode 100644
index 0000000..d2f3178
--- /dev/null
+++ b/frontend/src/components/Registration.tsx
@@ -0,0 +1,147 @@
+import "../App.css";
+import React, { useState, useEffect, ChangeEvent, FormEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import Popup from "./Popup";
+
+const Register: React.FC = () => {
+ const [login, setLogin] = useState
+
+ {message}
+
+
+ );
+};
+
+export default Register;
diff --git a/frontend/src/index.css b/frontend/src/index.css
new file mode 100644
index 0000000..ec2585e
--- /dev/null
+++ b/frontend/src/index.css
@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
new file mode 100644
index 0000000..753dd56
--- /dev/null
+++ b/frontend/src/index.tsx
@@ -0,0 +1,26 @@
+import React, { createContext } from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import App from "./App";
+import Home from "./components/Home";
+import Game from "./components/Game";
+import Registration from "./components/Registration";
+import "./App.css";
+
+export const AppContext = createContext<{ login: string, password: string, formValid: boolean }>({
+ login: '',
+ password: '',
+ formValid: false
+});
+
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+root.render(
+
+
+
+ {popupMessage && Регистрация
+ + + + + {passwordError &&{passwordError}
}
+
+
+
+
+