+
`
+ : `User Name:
+ ${username}
+ Password:
+ ${passwordOrURL}
+ ${message}
++ If you have not requested a password reset, please ignore this message. To reset your password, please click "Change Password" or copy the link below and open it in your browser.
+ `; + + return ` + + + + + +
+
+
+ `;
+};
diff --git a/backEnd/mail/mail-service.js b/backEnd/mail/mail-service.js
new file mode 100644
index 0000000..0e22f80
--- /dev/null
+++ b/backEnd/mail/mail-service.js
@@ -0,0 +1,66 @@
+import dotenv from "dotenv";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import nodemailer from "nodemailer";
+
+import { createMail } from "./mail-creator.mjs";
+
+dotenv.config();
+
+class MailService {
+ constructor() {
+ this.transporter = nodemailer.createTransport({
+ host: process.env.SMTP_HOST,
+ port: process.env.SMTP_PORT,
+ secure: false,
+ auth: {
+ user: process.env.SMTP_USER,
+ pass: process.env.SMTP_PASS,
+ },
+ tls: {
+ rejectUnauthorized: false,
+ },
+ });
+ }
+
+ async sendResetPassEMail(to, userName, resetLink) {
+ await this.transporter.sendMail({
+ from: process.env.SMTP_USER,
+ to,
+ subject: "RSGames.online: Password recovery",
+ text: "",
+ html: createMail(
+ false,
+ "Password recovery for RSGames.online",
+ userName,
+ resetLink
+ ),
+ });
+ }
+
+ async sendRegistrEmail(to, userName, password) {
+ await this.transporter.sendMail({
+ from: process.env.SMTP_USER,
+ to,
+ subject: "RSGames.online: Successful registration",
+ text: "",
+ html: createMail(true, "Welcome to RSGames.online!", userName, password),
+ });
+ }
+
+ async sendPassChangedEmail(to, userName, password) {
+ await this.transporter.sendMail({
+ from: process.env.SMTP_USER,
+ to,
+ subject: "RSGames.online: Password changed",
+ text: "",
+ html: createMail(
+ true,
+ "Password has been successfully changed!",
+ userName,
+ password
+ ),
+ });
+ }
+}
+
+export const mailService = new MailService();
diff --git a/backEnd/mail/mail.html b/backEnd/mail/mail.html
new file mode 100644
index 0000000..31625aa
--- /dev/null
+++ b/backEnd/mail/mail.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+
Gaming Zone has the best free online games selection and offers the most fun experience to play alone or with friends.
+
+ ${contentData}
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Gaming Zone has the best free online games selection and offers the most fun experience to play alone or with friends.
+
+ ${contentData}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/backEnd/middleware/admin-middleware.mjs b/backEnd/middleware/admin-middleware.mjs
new file mode 100644
index 0000000..6b0d914
--- /dev/null
+++ b/backEnd/middleware/admin-middleware.mjs
@@ -0,0 +1,32 @@
+import jsonwebtoken from "jsonwebtoken";
+
+export function adminMiddleware(statuses) {
+ // eslint-disable-next-line func-names, consistent-return
+ return function (req, res, next) {
+ if (req.method === "OPTIONS") {
+ next();
+ }
+
+ try {
+ const token = req.headers.authorization.split(" ")[1];
+
+ if (!token) {
+ return res.status(403).json({ message: "User not authorized" });
+ }
+
+ const { statuses: uStatuses } = jsonwebtoken.verify(
+ token,
+ process.env.KEY
+ );
+ const hasStatus = uStatuses.some((status) => statuses.includes(status));
+
+ if (!hasStatus) {
+ return res.status(405).json({ message: "You do not have permission" });
+ }
+
+ next();
+ } catch (err) {
+ return res.status(403).json({ message: "User not authorized" });
+ }
+ };
+}
diff --git a/backEnd/middleware/authorized-user.mjs b/backEnd/middleware/authorized-user.mjs
new file mode 100644
index 0000000..8c03943
--- /dev/null
+++ b/backEnd/middleware/authorized-user.mjs
@@ -0,0 +1,32 @@
+import jsonwebtoken from "jsonwebtoken";
+
+import { User } from "../data/User.mjs";
+
+// eslint-disable-next-line consistent-return
+export async function authorizedUser(req, res, next) {
+ if (req.method === "OPTIONS") {
+ next();
+ }
+
+ try {
+ const token = req.headers.authorization.split(" ")[1];
+
+ if (!token) {
+ return res.status(403).json({ message: "User not authorized" });
+ }
+
+ const data = jsonwebtoken.verify(token, process.env.KEY);
+ req.user = data;
+ const user = await User.findById(data.id);
+
+ if (!user) {
+ return res.status(403).json({ message: "User not authorized" });
+ }
+
+ req.userName = user ? user.userName : null;
+ req.banned = user ? user.banned : false;
+ next();
+ } catch (err) {
+ return res.status(403).json({ message: "User not authorized" });
+ }
+}
diff --git a/backEnd/middleware/baned-midleware.mjs b/backEnd/middleware/baned-midleware.mjs
new file mode 100644
index 0000000..f17cfe8
--- /dev/null
+++ b/backEnd/middleware/baned-midleware.mjs
@@ -0,0 +1,12 @@
+// eslint-disable-next-line consistent-return
+export function banedUser(req, res, next) {
+ try {
+ if (req.banned) {
+ return res.json({ message: "You are banned!" });
+ }
+
+ next();
+ } catch (err) {
+ return res.status(403).json({ message: "User not authorized" });
+ }
+}
diff --git a/backEnd/middleware/validator.mjs b/backEnd/middleware/validator.mjs
new file mode 100644
index 0000000..04c40b2
--- /dev/null
+++ b/backEnd/middleware/validator.mjs
@@ -0,0 +1,25 @@
+import { check } from "express-validator";
+
+export function validator() {
+ return [
+ check("username", "Username must not be empty").notEmpty(),
+ check("username", "Username must not be less than 3 characters").isLength({
+ min: 3,
+ }),
+ check(
+ "username",
+ "Username must not be longer than 32 characters"
+ ).isLength({
+ max: 32,
+ }),
+ check("password", "Password must not be less than 5 characters").isLength({
+ min: 5,
+ }),
+ check(
+ "password",
+ "Password must not be longer than 32 characters"
+ ).isLength({
+ max: 32,
+ }),
+ ];
+}
diff --git a/backEnd/router.mjs b/backEnd/router.mjs
new file mode 100644
index 0000000..96a11f2
--- /dev/null
+++ b/backEnd/router.mjs
@@ -0,0 +1,44 @@
+import bodyParser from "body-parser";
+import cors from "cors";
+import { Router } from "express";
+import { asyncMiddleware } from "middleware-async";
+
+import {
+ deleteUser,
+ getUsers,
+ getUser,
+ getUserByName,
+ login,
+ register,
+ resetpass,
+ setNewPass,
+ getNameForNewPass,
+ setUserStatus,
+ banUser,
+ changePass,
+} from "./controllers/user-controller.mjs";
+import { adminMiddleware } from "./middleware/admin-middleware.mjs";
+import { authorizedUser } from "./middleware/authorized-user.mjs";
+
+const jsonParser = bodyParser.json();
+
+export const router = new Router();
+
+router.use(cors());
+router.post("/forgotpass", jsonParser, resetpass); // {userName, email}
+router.put("/setpass", jsonParser, asyncMiddleware(authorizedUser), changePass); // {password, newPassword}
+router.post("/setpass", jsonParser, setNewPass); // {password, resetToken}
+router.get("/setpass", jsonParser, getNameForNewPass); // {?resetToken=...}
+router.post("/registr", jsonParser, register); // { userName, email, password }
+router.post("/login", jsonParser, login); // { userName, password }
+router.get("/users", adminMiddleware(["admin", "moderator"]), getUsers);
+router.get("/myuser", asyncMiddleware(authorizedUser), getUser);
+router.get("/user", adminMiddleware(["admin", "moderator"]), getUserByName);
+router.put("/user", jsonParser, adminMiddleware(["admin"]), setUserStatus);
+router.delete("/user", jsonParser, adminMiddleware(["admin"]), deleteUser); // { userName }
+router.get("/user/ban", adminMiddleware(["admin", "moderator"]), banUser(true));
+router.get(
+ "/user/unban",
+ adminMiddleware(["admin", "moderator"]),
+ banUser(false)
+);
diff --git a/backEnd/server.mjs b/backEnd/server.mjs
new file mode 100644
index 0000000..a82ef70
--- /dev/null
+++ b/backEnd/server.mjs
@@ -0,0 +1,87 @@
+import * as fs from "fs";
+import http from "http";
+import https from "https";
+
+import bodyParser from "body-parser";
+import cookieParser from "cookie-parser";
+import cors from "cors";
+import dotenv from "dotenv";
+import express from "express";
+import expressWs from "express-ws";
+import mongoose from "mongoose";
+import { WebSocketServer } from "ws";
+
+import { getGameData } from "./controllers/game-data-controller.mjs";
+import { capchaGenerator } from "./data/capcha.mjs";
+import { SEAWAR } from "./games/variables.mjs";
+// eslint-disable-next-line import/no-cycle
+import { seaWarSocket } from "./games/ws/ws-main.mjs";
+import { gameHttpRouter } from "./games.mjs";
+import { logger } from "./logger.mjs";
+import { router } from "./router.mjs";
+import { winRouter } from "./winners.mjs";
+
+dotenv.config();
+const app = express();
+expressWs(app);
+const port = Number(process.env.PORT) || 8888;
+const ports = Number(process.env.PORTS) || 8000;
+const pass = process.env.PASS || "temp_pass";
+const sslSrt = process.env.SSL_CRT || "backEnd/ssl/selfsigned.crt";
+const sslKey = process.env.SSL_KEY || "backEnd/ssl/selfsigned.key";
+
+app.use("/auth", router);
+app.use("/games", gameHttpRouter);
+app.use("/win", winRouter);
+app.use(express.urlencoded({ extended: true }));
+app.use(cookieParser());
+app.use(express.json());
+app.use(cors());
+
+const options = {
+ key: fs.readFileSync(sslKey, "utf8"),
+ cert: fs.readFileSync(sslSrt, "utf8"),
+};
+
+await mongoose.connect(
+ `mongodb+srv://rsgames:${pass}@cluster0.d9hevcc.mongodb.net/?retryWrites=true&w=majority`
+);
+https.createServer(options, app).listen(port, () => {
+ logger.info(`https server is runing at port ${port}`);
+});
+
+http.createServer(app).listen(ports, () => {
+ logger.info(`http server is runing at port ${ports}`);
+});
+
+app.get("/", (_req, res) => {
+ logger.info("Server is online");
+ res.send({ resp: "Server is online" });
+});
+
+app.get("/gameData/:name", getGameData);
+
+const jsonParser = bodyParser.json();
+
+app.get("/capcha", async (_req, res) => {
+ const capchaRes = await capchaGenerator.newCapcha();
+ res.json(capchaRes);
+});
+
+app.post("/capcha", jsonParser, (req, res) => {
+ const { capchaToken, capchaValue } = req.body;
+ const isCorrect = capchaGenerator.checkCorrectCapcha(
+ capchaToken,
+ capchaValue
+ );
+ res.json({ isCorrect });
+});
+
+const WS_SEAWAR_PORT = 8001;
+const server = https.createServer(options);
+
+export const aWssSeaWar = new WebSocketServer({ server });
+aWssSeaWar.on("connection", seaWarSocket);
+server.listen(WS_SEAWAR_PORT, () => {
+ logger.info(`${SEAWAR.NAME} web socket is runing at port ${WS_SEAWAR_PORT}`);
+});
diff --git a/backEnd/ssl/selfsigned.crt b/backEnd/ssl/selfsigned.crt
new file mode 100644
index 0000000..31ad00b
--- /dev/null
+++ b/backEnd/ssl/selfsigned.crt
@@ -0,0 +1,23 @@
+-----BEGIN CERTIFICATE-----
+MIIDzTCCArWgAwIBAgIUXF0gHhnQACVlKpEMopD0lvJbT0EwDQYJKoZIhvcNAQEL
+BQAwdjELMAkGA1UEBhMCS1oxEjAQBgNVBAcMCWthcmFnYW5kYTELMAkGA1UECgwC
+cnMxDDAKBgNVBAsMA21heDESMBAGA1UEAwwJbG9jYWxob3N0MSQwIgYJKoZIhvcN
+AQkBFhVmcmFraWVjMzYwMEBnbWFpbC5jb20wHhcNMjMwMjAxMDk1OTA4WhcNMjQw
+MjAxMDk1OTA4WjB2MQswCQYDVQQGEwJLWjESMBAGA1UEBwwJa2FyYWdhbmRhMQsw
+CQYDVQQKDAJyczEMMAoGA1UECwwDbWF4MRIwEAYDVQQDDAlsb2NhbGhvc3QxJDAi
+BgkqhkiG9w0BCQEWFWZyYWtpZWMzNjAwQGdtYWlsLmNvbTCCASIwDQYJKoZIhvcN
+AQEBBQADggEPADCCAQoCggEBALA71eR/oHfa4kZukZO+IbW3CSw2kAL2FdKbnoXg
+67UHaw378+B86/s4J2K+mpOxcUStAmG7YszOR5Jb7VfFjP4Rj1Ol00BQ77HXbqr7
+x6DhcMqauRDfu6wikY0UUy6VUsqkDNgpUV7mFOpk84IhrCLWKYc6EhUAIP1iIPPg
+rdRlmDaPxSM8rRMOMpkkGG5YGkg1wthYsHCiZmEaymoBajkV7Ty76LYXtLued8iS
+S7anC2ZnkgD8HhyB5GQIsDfl85TwAIW/l2ichdSxWyz7/DH+4D14Xu5ZZhJVQImq
+SgX9bkWn71yRvIvlja/1SdIDuUhQh7TdZ547Hz2altWimPMCAwEAAaNTMFEwHQYD
+VR0OBBYEFMvKoqnckGiKso5Xv/OCCHbCW0ewMB8GA1UdIwQYMBaAFMvKoqnckGiK
+so5Xv/OCCHbCW0ewMA8GA1UdEwEB/wQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEB
+AFMqgOY/wsU+APslGCcyaxsOWQ5v7z2iXFQAGhz/I2oB9Prf8+UekC+zsRQJe+y7
+SKToDvmEe6u+OLfuQR/W7vz8QTKbFv/Uy4tN/eTRFV3en3rwqKSlp0GHh5+lilkI
+FyEFRajdOCXrE85ncXDh3MXNu/gb1x/ww+iamriur3GOxz22mKSMibDwK7EE2zRm
+dNUIrZzrhKp3WOpsQhaTNFz4vz6vQpc91tMuuAl9Poq0NanPMF66WO8oF7sLBE97
+898lWrpd1trq7+V9X3aG43HB9aDaHBJm2a2gVTFFULv3wQUO6Ro2vl0ut/6ortGv
+D+hoEwgfr1WkzY/S0B/cRX8=
+-----END CERTIFICATE-----
diff --git a/backEnd/ssl/selfsigned.key b/backEnd/ssl/selfsigned.key
new file mode 100644
index 0000000..7d7e284
--- /dev/null
+++ b/backEnd/ssl/selfsigned.key
@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCwO9Xkf6B32uJG
+bpGTviG1twksNpAC9hXSm56F4Ou1B2sN+/PgfOv7OCdivpqTsXFErQJhu2LMzkeS
+W+1XxYz+EY9TpdNAUO+x126q+8eg4XDKmrkQ37usIpGNFFMulVLKpAzYKVFe5hTq
+ZPOCIawi1imHOhIVACD9YiDz4K3UZZg2j8UjPK0TDjKZJBhuWBpINcLYWLBwomZh
+GspqAWo5Fe08u+i2F7S7nnfIkku2pwtmZ5IA/B4cgeRkCLA35fOU8ACFv5donIXU
+sVss+/wx/uA9eF7uWWYSVUCJqkoF/W5Fp+9ckbyL5Y2v9UnSA7lIUIe03WeeOx89
+mpbVopjzAgMBAAECggEAVH+sE845453Yhoq3VE6CnT0wsblLnY/ecMfa3zgz6+2t
+n9vhWA6tmxuWjtrzBMO8moAVt0SAn9B8MqnPCBmZe6xxu1q0Co+EDhJMZsEoO3Q8
+f3hmKbgMpQFCJpHLPHeuZaj426Ab+tN4zdYvh4KbpWxoJwVp7BXOu48UW7qrvj1Y
+Kfq5fIE49AmYAJda8Ic0NRTpbcPZ1olw5PW7wjgI8GPV6PXnlQN39mI0iUvwaJbA
+LR02WXw/S7YzoFv2sgjmcqqzs4Evrk8ihOIOMTry3+ov4wm6V5N7/Y+3xRfS4CgV
+v8F3hkfhegZj+WE3SXrAdpCJ5vo4qiCT/nbPFvsbAQKBgQDfJkjUeepAo5woVfTO
+sFFwGG6QwfIuHOhR1YZy+VtKsNg0JnLQ9tHJSMDVQXuQ3iShJZPEyZ3nNY03y+kJ
+yV5fP98unqBzRN90Q48Y4vlXBGDscmD/FCWuRiQGj4l5YDHrsy6K8fI47Mk3YnDl
+DOHTsPqCEmMxkzVHCTBf9u4mgQKBgQDKLXXQRHlQKdmm6usWBteDQBIoxSQXNV6H
+sLMjnjVDTUBRxQ3mr+yIOpPVMG0le/3ws93Vt0koEScTiKwcQJFu6LHGdGoK0KRF
+Vx+LoApZ8VRWq597R829Fae+rvXGdL4oderkfvZtX4Rffo9YhQQYkFA5y4locfDM
+1NIfntLNcwKBgQDBmtm9Xzkac9jcNhd77AX8F3Z2KY8Q6wu1VGieADJwjxZFyMX8
+/ufsly6W14V5nwJwvcWDCtnw68lmC4hYcVlrkmL0c7QJzkuA98yDbwmdsbLV8jat
+mLFIjppbBtXjdM5bDM7oxhm9wdKiNsp0L8UOgZIWoBVnwayLwTEzUW42AQKBgF83
+c8HnTb78Rr4+6wKPrFXrCeJbnjiz8NY02NlQfEM7EayxAm//sIUkGVWRHgZGU/1V
+qIcrb+/HzEB94JjZq+SxAHC3iO2Y/5SMiJXIhLeBWbgL0etMkM+ZcEv0uFmDx77k
+cgC07rfqATy8LSSCWMB8ztu5SPiAmOjO3jr4IM2TAoGAL4Ki1lNTA2+ETjWJaQb8
+4dobwJHCpFaqkiFyubjVFT5K7kMMjGHH8q4H6u7i0ATyLeB4t7gm+L7lFrbMMFiP
+C1ZVal/tMOgXfrhjsUWUvXa4r/TMGpESy+HrdF106fyzbAb/Fz4MWE0zCglQkxca
+AYzajcCLuKm2sMMX4U1sWBM=
+-----END PRIVATE KEY-----
diff --git a/backEnd/utils/comments-utils.mjs b/backEnd/utils/comments-utils.mjs
new file mode 100644
index 0000000..67efd44
--- /dev/null
+++ b/backEnd/utils/comments-utils.mjs
@@ -0,0 +1,33 @@
+import { Comment } from "../data/comment.mjs";
+import { GameData } from "../data/game.mjs";
+import { User } from "../data/User.mjs";
+
+export async function getCommentsForGame(name) {
+ const comments = await Promise.all(
+ (
+ await Comment.find()
+ ).map(async (comment) => {
+ const { text, raiting, date } = comment;
+ const user = await User.findById(comment.user);
+ const { userName } = user || { userName: "" };
+ const game = await GameData.findById(comment.game);
+ const { name: gameName } = game || { name: "" };
+
+ return { userName, gameName, text, raiting, date };
+ })
+ );
+
+ return comments.filter(
+ (comment) => (name ? name === comment.gameName : true) && comment.userName
+ );
+}
+
+export async function getGameRaiting(name) {
+ const comments = await getCommentsForGame(name);
+ if (comments.length === 0) return 0;
+
+ return (
+ comments.reduce((sum, comment) => sum + comment.raiting, 0) /
+ comments.length
+ );
+}
diff --git a/backEnd/winners.mjs b/backEnd/winners.mjs
new file mode 100644
index 0000000..1837ab8
--- /dev/null
+++ b/backEnd/winners.mjs
@@ -0,0 +1,15 @@
+import bodyParser from "body-parser";
+import cors from "cors";
+import { Router } from "express";
+import { asyncMiddleware } from "middleware-async";
+
+import { addWinner, getWinners } from "./controllers/win-controller.mjs";
+import { authorizedUser } from "./middleware/authorized-user.mjs";
+
+const jsonParser = bodyParser.json();
+
+export const winRouter = new Router();
+winRouter.use(cors());
+
+winRouter.post("/data", asyncMiddleware(authorizedUser), jsonParser, addWinner);
+winRouter.get("/data", asyncMiddleware(authorizedUser), getWinners);
diff --git a/docs/auth.md b/docs/auth.md
new file mode 100644
index 0000000..4c48dc2
--- /dev/null
+++ b/docs/auth.md
@@ -0,0 +1,342 @@
+# Регистрация и авторизация пользователя, Back End
+
+Основной адрес для запросов связанных с авторизацией:
+- глобально: `https://rsgames.online:8888/auth/...`
+- локально: `http://localhost:8000/auth/...`
+
+### Запросы на сервер :
+
+#### 1. Регистрация (registration)
+ - *address:* **/auth/regist/**
+ - *method:* `POST`,
+ - *body:*
+
+``` JSON
+{
+ "userName": "Vasya",
+ "email": "vasya.371@mail.ru",
+ "password": "123456"
+}
+```
+ - *successful response:* code: **200**
+``` JSON
+{
+ "message": "New User has been successfully created!"
+}
+```
+ - *unsuccessful response:* code: **400**
+``` JSON
+{
+ "message": "Password Changing Error"
+}
+```
+
+#### 2. **Авторизация** (login)
+ - *address:* **/auth/login/**
+ - *method:* `POST`,
+ - *body:*
+
+``` JSON
+{
+ "userName": "Vasya",
+ "password": "123456"
+}
+```
+ - *unsuccessful response:* code: **405**
+``` JSON
+{
+ "message": "Incorrect password for {userName}"
+}
+```
+ - *unsuccessful response:* code: **404**
+``` JSON
+{
+ "message": "User {userName} not found"
+}
+```
+ - *successful response:* code: **200**
+``` JSON
+{
+ "token": "eyJhbGciOiJOEzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzZGZ2Ma6lMmRiZjJjZGM0NTQzNzU0NiIsInN0YXR1c2VzIjpbImFkbWluIl0sImlhdCI6MTY3NTYyMTI3MSwiZX2wIjoxNjc1Nzk0MDcxfQ.DV-pTi3ICN65nh3HAoqI-A6HCg62OoufR8Bgw45oq8Y"
+}
+```
+Полученный токен используется для авторизации пользователя. (см. Токен пользователя)
+
+#### 3. **Получение списка пользователей** (users list)
+ - *address:* **/auth/users/**
+ - *method:* `GET`,
+ - *header:* `Authorization` with token
+ - *unsuccessful response:* code: **405**
+``` JSON
+{
+ "message": "You do not have permission"
+}
+```
+ - *unsuccessful response:* code: **405**
+``` JSON
+{
+ "message": "You do not have permission"
+}
+```
+ - *successful response:* code: **200**
+``` JSON
+[
+ {
+ "_id": "63dfd49b2571ef2e8ea3113d",
+ "userName": "Vasya",
+ "password": "$2A$07$isD5IKBkZasc8fUjEa9SGO4.btlmL3cq0FkT0m4scZpUMX3sHEOFu",
+ "status": [ "user" ],
+ "date": "2023-02-05T16:08:59.414Z",
+ "__v": 0
+ },
+ // ...
+]
+```
+Выводится список всех пользователей, команда доступна только пользователям со статусом admin
+
+#### 4. Запрос восстановления доступа (забыл пароль)
+ - *address:* **/auth/forgotpass/**
+ - *method:* `POST`,
+ - *body:*
+``` JSON
+{ "userName": "Vasya" }
+```
+или
+``` JSON
+{ "email": "vasya.371@mail.ru" }
+```
+ - *unsuccessful response:* code: **401**
+``` JSON
+{
+ "message": "Wrong Input Data"
+}
+```
+ - *unsuccessful response:* code: **404**
+``` JSON
+{
+ "message": "User not found"
+}
+```
+ - *unsuccessful response:* code: **400**
+``` JSON
+{
+ "message": "Reset Error"
+}
+```
+ - *successful response:* code: **200**
+``` JSON
+{
+ "message": "E-mail sended to vasya.371@mail.ru",
+ "resetToken": "8q7d3syf-q5gj-6ad6-1sb3-72sgx2d4djs1"
+}
+```
+После этого на e-mail указанный при регистрации пользователя _(vasya.371@mail.ru)_ будет отправлена ссылка для сброса пароля, формата:
+`https://rsgames.online/resetpass?resetToken=8q7d3syf-q5gj-6ad6-1sb3-72sgx2d4djs1`
+Используйте страницу `https://rsgames.online/resetpas` и query-параметр `resetToken` для сброса пароля. Используя для этого следующий запрос:
+
+#### 5. Восстановления доступа - новый пароль
+ - *address:* **/auth/setpass/**
+ - *method:* `POST`,
+ - *body:*
+``` JSON
+{
+ "password": "NewPassword",
+ "resetToken": "8q7d3syf-q5gj-6ad6-1sb3-72sgx2d4djs1"
+}
+```
+После выполнения запроса, при правильно указанном `resetToken` - пароль пользователя будет изменен на новый.
+ - *unsuccessful response:* code: **404**
+``` JSON
+{
+ "message": "User not found"
+}
+```
+ - *unsuccessful response:* code: **400**
+``` JSON
+{
+ "message": "Password Reset Error"
+}
+```
+ - *successful response:* code: **200**
+``` JSON
+{
+ "message": "Password has been changed!"
+}
+```
+
+#### 6. Удаление пользователя (доступно администратору)
+ - *address:* **/auth/user/**
+ - *method:* `DELETE`,
+ - *body:*
+``` JSON
+{
+ "userName": "Vasya"
+}
+```
+ - *unsuccessful response:* code: **404**
+``` JSON
+{
+ "message": "User not found"
+}
+```
+ - *unsuccessful response:* code: **400**
+``` JSON
+{
+ "message": "Failed to delete user"
+}
+```
+ - *successful response:* code: **204**
+
+#### 7. Получение данных о пользователе:
+ - *address:* **/auth/myuser/**
+ - *method:* `GET`,
+ - *header:* `Authorization` with token
+ - *unsuccessful response:* code: **403**
+``` JSON
+{
+ "message": "User not authorized"
+}
+```
+ - *unsuccessful response:* code: **400**
+``` JSON
+{
+ "message": "Failed to get users"
+}
+```
+ - *successful response:* code: **200**
+``` JSON
+{
+ "userName": "Vasya",
+ "email": "vasya.371@mail.ru",
+ "status": [
+ "admin"
+ ],
+ "banned": false,
+ "date": "2023-02-06T09:07:46.283Z"
+}
+```
+
+#### 8. Изменение статуса пользователя (доступно администратору)
+ - *address:* **/auth/user/**
+ - *method:* `PUT`,
+ - *body:*
+``` JSON
+{
+ "userName": "Vasya"
+}
+```
+ - *unsuccessful response:* code: **405**
+``` JSON
+{
+ "message": "You do not have permission"
+}
+```
+ - *unsuccessful response:* code: **400**
+``` JSON
+{
+ "message": "Failed to set new status"
+}
+```
+ - *successful response:* code: **200**
+``` JSON
+{
+ "message": "Status changed",
+ "user":
+
+
+
+
+
+
+
+ );
+};
+
+export default App;
diff --git a/src/Components/Authentication/ChangePass/index.tsx b/src/Components/Authentication/ChangePass/index.tsx
new file mode 100644
index 0000000..f38ecae
--- /dev/null
+++ b/src/Components/Authentication/ChangePass/index.tsx
@@ -0,0 +1,110 @@
+import { useFormik } from "formik";
+import type { FC } from "react";
+import { useState } from "react";
+import * as yup from "yup";
+
+import { changePassword } from "../../../controller/Auth";
+import { MESSAGES_EN, MESSAGES_RU } from "../../../data/restMsgs";
+import useUserStore from "../../../store";
+import languageStore from "../../../store/language";
+import useStatusStore from "../../../store/load-status";
+import Button from "../../common/Button";
+import Input from "../../common/Input";
+
+import "../style.scss";
+
+interface ChangePassProps {
+ setModalClosed: () => void;
+}
+
+const ChangePass: FC
+
+ );
+};
+
+export default ChangePass;
diff --git a/src/Components/Authentication/Forgot/forgot.utils.ts b/src/Components/Authentication/Forgot/forgot.utils.ts
new file mode 100644
index 0000000..849a3da
--- /dev/null
+++ b/src/Components/Authentication/Forgot/forgot.utils.ts
@@ -0,0 +1,7 @@
+export const isEmail = (str: string) => {
+ try {
+ return str.split("@")[1].includes(".");
+ } catch {
+ return false;
+ }
+};
diff --git a/src/Components/Authentication/Forgot/index.tsx b/src/Components/Authentication/Forgot/index.tsx
new file mode 100644
index 0000000..82962dd
--- /dev/null
+++ b/src/Components/Authentication/Forgot/index.tsx
@@ -0,0 +1,109 @@
+import { useFormik } from "formik";
+import type { FC } from "react";
+import { useState } from "react";
+import * as yup from "yup";
+
+import { forgotPassword } from "../../../controller/Auth";
+import { MESSAGES_EN, MESSAGES_RU } from "../../../data/restMsgs";
+import languageStore from "../../../store/language";
+import useStatusStore from "../../../store/load-status";
+import Button from "../../common/Button";
+import Input from "../../common/Input";
+import HelperText from "../HelperText";
+
+import "../style.scss";
+import { isEmail } from "./forgot.utils";
+
+const schema = yup.object().shape({
+ userName: yup.string().min(3).max(30).required(),
+});
+
+const inputsProps = [
+ {
+ key: "userName",
+ labelEn: "Name or Email",
+ labelRu: "Имя или Почта",
+ placeholderEn: "Name or Email",
+ placeholderRu: "Имя или почта",
+ type: "text",
+ },
+] as const;
+
+interface ForgotPassProps {
+ setSignInModalOpened: () => void;
+}
+
+const ForgotPass: FCChange password for {userName}:
+ +
+
+ );
+};
+
+export default ForgotPass;
diff --git a/src/Components/Authentication/HelperText/index.tsx b/src/Components/Authentication/HelperText/index.tsx
new file mode 100644
index 0000000..d71e997
--- /dev/null
+++ b/src/Components/Authentication/HelperText/index.tsx
@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import "./style.scss";
+
+interface HelperTextProps {
+ text: string;
+ linkText: string;
+ onClick: () => void;
+}
+
+const HelperText: FC+ {isEn ? "Забыли пароль :" : "Forgot password:"} +
+ ++ {text} + +
+); + +export default HelperText; diff --git a/src/Components/Authentication/HelperText/style.scss b/src/Components/Authentication/HelperText/style.scss new file mode 100644 index 0000000..93c6ea5 --- /dev/null +++ b/src/Components/Authentication/HelperText/style.scss @@ -0,0 +1,22 @@ +.helper-text { + font-size: 16px; + line-height: 18px; + text-align: center; + + &__link { + color: #764ba2; + cursor: pointer; + font-weight: 800; + font-size: 16px; + background: transparent; + border: none; + padding-left: 4px; + + &:hover, + &:focus { + color: #462a62; + border: none; + outline: unset; + } + } +} \ No newline at end of file diff --git a/src/Components/Authentication/Reset/index.tsx b/src/Components/Authentication/Reset/index.tsx new file mode 100644 index 0000000..a52ba98 --- /dev/null +++ b/src/Components/Authentication/Reset/index.tsx @@ -0,0 +1,124 @@ +import { useFormik } from "formik"; +import type { FC } from "react"; +import { useState, useEffect } from "react"; +import * as yup from "yup"; + +import { + getUserNameByResetToken, + setNewPassword, +} from "../../../controller/Auth"; +import { MESSAGES_EN, MESSAGES_RU } from "../../../data/restMsgs"; +import languageStore from "../../../store/language"; +import useStatusStore from "../../../store/load-status"; +import Button from "../../common/Button"; +import Input from "../../common/Input"; + +import "../style.scss"; + +const schema = yup.object().shape({ + password: yup.string().required(), + confirmPassword: yup + .string() + .equals([yup.ref("password")], "Should be equal to password"), +}); + +const inputsProps = [ + { + key: "password", + labelEn: "Password", + labelRu: "Пароль", + type: "password", + placeholderEn: "Password", + placeholderRu: "Пароль", + }, + { + key: "confirmPassword", + labelEn: "Confirm password", + labelRu: "Подтвердить пароль", + type: "password", + placeholderEn: "Confirm password", + placeholderRu: "Подтвердить пароль", + }, +] as const; + +interface ResetPassProps { + resetToken: string; +} + +const ResetPass: FC
+
+ );
+};
+
+export default ResetPass;
diff --git a/src/Components/Authentication/SignIn/index.tsx b/src/Components/Authentication/SignIn/index.tsx
new file mode 100644
index 0000000..72b34bb
--- /dev/null
+++ b/src/Components/Authentication/SignIn/index.tsx
@@ -0,0 +1,133 @@
+import { useFormik } from "formik";
+import type { FC } from "react";
+import { useState } from "react";
+import * as yup from "yup";
+
+import { authLogin, checkUserToken } from "../../../controller/Auth";
+import type { Values } from "../../../data/authData";
+import { MESSAGES_EN, MESSAGES_RU } from "../../../data/restMsgs";
+import useUserStore from "../../../store";
+import languageStore from "../../../store/language";
+import useStatusStore from "../../../store/load-status";
+import Button from "../../common/Button";
+import Input from "../../common/Input";
+import HelperText from "../HelperText";
+
+import "../style.scss";
+
+const schema = yup.object().shape({
+ userName: yup.string().min(3).max(30).required(),
+ password: yup.string().required(),
+});
+
+const inputsProps = [
+ {
+ key: "userName",
+ labelEn: "Name",
+ labelRu: "Имя",
+ placeholderEn: "Username",
+ placeholderRu: "Имя пользователя",
+ type: "text",
+ },
+ {
+ key: "password",
+ labelEn: "Password",
+ labelRu: "Пароль",
+ placeholderEn: "Password",
+ placeholderRu: "Пароль",
+ type: "password",
+ },
+] as const;
+
+interface SignInProps {
+ setSignInModalOpened: () => void;
+ setModalClosed: () => void;
+ setForgotOpened: () => void;
+}
+
+const SignIn: FC+ {isEn ? "Пароль для" : "Set password for"} {userName}: +
+ +
+
+ );
+};
+
+export default SignIn;
diff --git a/src/Components/Authentication/SignUp/index.tsx b/src/Components/Authentication/SignUp/index.tsx
new file mode 100644
index 0000000..3b62e8d
--- /dev/null
+++ b/src/Components/Authentication/SignUp/index.tsx
@@ -0,0 +1,161 @@
+import { useFormik } from "formik";
+import type { FC } from "react";
+import { useState } from "react";
+import * as yup from "yup";
+
+import {
+ authLogin,
+ checkUserToken,
+ createUser,
+} from "../../../controller/Auth";
+import { MESSAGES_EN, MESSAGES_RU } from "../../../data/restMsgs";
+import useUserStore from "../../../store";
+import languageStore from "../../../store/language";
+import useStatusStore from "../../../store/load-status";
+import Button from "../../common/Button";
+import Input from "../../common/Input";
+import HelperText from "../HelperText";
+
+import "../style.scss";
+
+const schema = yup.object().shape({
+ userName: yup.string().min(3).max(30).required(),
+ email: yup.string().email().required(),
+ password: yup.string().required(),
+ confirmPassword: yup
+ .string()
+ .equals([yup.ref("password")], "Should be equal to password"),
+});
+
+const inputsProps = [
+ {
+ key: "userName",
+ labelEn: "Name",
+ labelRu: "Имя",
+ type: "text",
+ placeholderEn: "Username",
+ placeholderRu: "Имя пользователя",
+ },
+ {
+ key: "email",
+ labelEn: "Email",
+ labelRu: "Почта",
+ type: "email",
+ placeholderEn: "Email",
+ placeholderRu: "Почта",
+ },
+ {
+ key: "password",
+ labelEn: "Password",
+ labelRu: "Пароль",
+ type: "password",
+ placeholderEn: "Password",
+ placeholderRu: "Пароль",
+ },
+ {
+ key: "confirmPassword",
+ labelEn: "Confirm password",
+ labelRu: "Подтвердить пароль",
+ type: "password",
+ placeholderEn: "Confirm password",
+ placeholderRu: "Подтвердить пароль",
+ },
+] as const;
+
+interface SignUpProps {
+ setSignInModalOpened: () => void;
+ setModalClosed: () => void;
+ setForgotOpened: () => void;
+}
+
+const SignUp: FC{isEn ? "Войти" : "Sign In"}
+ +
+
+ );
+};
+
+export default SignUp;
diff --git a/src/Components/Authentication/index.tsx b/src/Components/Authentication/index.tsx
new file mode 100644
index 0000000..97ccbad
--- /dev/null
+++ b/src/Components/Authentication/index.tsx
@@ -0,0 +1,112 @@
+/* eslint-disable prettier/prettier */
+import type { FC } from "react";
+import { useEffect, useState } from "react";
+
+import useUserStore from "../../store";
+import languageStore from "../../store/language";
+import useStatusStore from "../../store/load-status";
+import Modal from "../common/Modal";
+
+import ForgotPass from "./Forgot";
+import ResetPass from "./Reset";
+import SignIn from "./SignIn";
+import SignUp from "./SignUp";
+
+interface AuthenticationModalProps {
+ setModalClosed: () => void;
+}
+
+enum authWindow {
+ login,
+ registr,
+ forgot,
+ reset,
+ setPass,
+}
+
+const AuthenticationModal: FC{isEn ? "Войти" : "Sign Up"}
+ +
+ 
+
+ );
+};
diff --git a/src/Components/Header/Logo/index.tsx b/src/Components/Header/Logo/index.tsx
new file mode 100644
index 0000000..c465bf9
--- /dev/null
+++ b/src/Components/Header/Logo/index.tsx
@@ -0,0 +1,16 @@
+import { type FC } from "react";
+import "./style.scss";
+import { useNavigate } from "react-router-dom";
+
+const Logo: FC = () => {
+ const navigate = useNavigate();
+
+ return (
+ + {isEn ? "Ru" : "En"} +
+ navigate("/")}>
+ 
+
+ );
+};
+
+export default Logo;
diff --git a/src/Components/Header/Logo/style.scss b/src/Components/Header/Logo/style.scss
new file mode 100644
index 0000000..de82208
--- /dev/null
+++ b/src/Components/Header/Logo/style.scss
@@ -0,0 +1,39 @@
+.logo {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ cursor: pointer;
+
+ &__image {
+ width: 60px;
+ height: 60px;
+ }
+
+ &__text {
+ font-family: 'Ceviche One', cursive;
+ font-size: 36px;
+ font-weight: 600;
+ color: #7e6dd1;
+ }
+}
+
+@media screen and (max-width: 640px) {
+ .logo {
+ img {
+ width: 40px;
+ height: 40px;
+ }
+ &__text {
+ font-family: 'Ceviche One', cursive;
+ font-size: 30px;
+ font-weight: 600;
+ color: #7e6dd1;
+ }
+ }
+}
+
+@media screen and (max-width: 580px) {
+ .logo__text {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/Components/Header/User/index.tsx b/src/Components/Header/User/index.tsx
new file mode 100644
index 0000000..5137731
--- /dev/null
+++ b/src/Components/Header/User/index.tsx
@@ -0,0 +1,48 @@
+import { type FC } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { logoutUser } from "../../../controller/Auth";
+import type { userSetter } from "../../../store";
+import { nullUser } from "../../../store";
+import languageStore from "../../../store/language";
+import "./style.scss";
+
+interface UserProps {
+ username: string;
+ image?: string;
+ setUser: userSetter;
+}
+
+const User: FC
+ Gaming Zone
+
+
+ );
+};
+
+export default User;
diff --git a/src/Components/Header/User/style.scss b/src/Components/Header/User/style.scss
new file mode 100644
index 0000000..fe40ff5
--- /dev/null
+++ b/src/Components/Header/User/style.scss
@@ -0,0 +1,77 @@
+.user {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ &__image {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+ }
+
+ &__text {
+ font-family: 'Russo One', sans-serif;
+ font-size: 22px;
+ font-weight: 600;
+ color: #4f4c6b;
+ max-width: 170px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ &__click{
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ cursor: pointer;
+ border-radius: 20px;
+ &:hover{
+ box-shadow: 0 0 5px 0 #764ba2 inset, 0 0 5px 2px #667eea;
+ }
+ }
+}
+
+@media screen and (max-width: 860px) {
+ .user {
+ &__image {
+ width: 38px;
+ height: 38px;
+ }
+
+ &__text {
+ font-size: 18px;
+ max-width: 140px;
+ }
+ button {
+ padding: 8px 12px;
+ }
+ }
+}
+
+@media screen and (max-width: 740px) {
+ .user {
+ &__text {
+ font-size: 18px;
+ max-width: 140px;
+ display: none;
+ }
+ button {
+ padding: 8px 12px;
+ }
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .user {
+ gap: 8px;
+
+ button {
+ padding: 10px 9px;
+ font-size: 1em;
+ // background: none;
+ // color: #4f4496;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Components/Header/index.tsx b/src/Components/Header/index.tsx
new file mode 100644
index 0000000..6fd1827
--- /dev/null
+++ b/src/Components/Header/index.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import { useEffect, useState, type FC } from "react";
+
+import { checkUserToken } from "../../controller/Auth";
+import useUserStore, { nullUser } from "../../store";
+// eslint-disable-next-line import/named
+import languageStore from "../../store/language";
+import themeStore, { LS_THEME } from "../../store/theme";
+import AuthenticationModal from "../Authentication";
+import Button from "../common/Button";
+
+import { LangComp } from "./Lang/LangComp";
+import Logo from "./Logo";
+import User from "./User";
+
+import "./style.scss";
+
+const Header: FC = () => {
+ const [isModalClosed, setModalClosed] = useState(true);
+ const [rotate, setRotate] = useState(false);
+ const { userName, image, setUser } = useUserStore();
+ const { isEn } = languageStore();
+ const theme = themeStore((state) => state.isDark);
+ const changeTheme = themeStore((state) => state.setTheme);
+
+ const urlSearchParams = new URLSearchParams(window.location.search);
+ const resetToken = urlSearchParams.get("resetToken");
+ const setPass = urlSearchParams.get("setPass");
+
+ const handler = () => {
+ localStorage.setItem(LS_THEME, (!theme).toString());
+ changeTheme(!theme);
+ setRotate(true);
+ setTimeout(() => setRotate(false), 700);
+ };
+
+ useEffect(() => {
+ if (resetToken || setPass) {
+ setModalClosed(false);
+ }
+ }, []);
+
+ useEffect(() => {
+ checkUserToken()
+ .then((userData) => {
+ setUser({
+ userName: userData.userName,
+ image: userData.image,
+ status: userData.status,
+ banned: userData.banned,
+ email: userData.email,
+ });
+ })
+ .catch(() => {
+ setUser(nullUser);
+ });
+ }, []);
+
+ return (
+ navigate(`/user/${username}`)}
+ className="user__click"
+ >
+
+
+
+
+ {username}
+
+ 
+ {userName ? (
+
+ {!isModalClosed && (
+
+ {userName ? (
+
+
+ );
+};
+
+export default Loading;
diff --git a/src/Components/Loading/style.scss b/src/Components/Loading/style.scss
new file mode 100644
index 0000000..c34cfa4
--- /dev/null
+++ b/src/Components/Loading/style.scss
@@ -0,0 +1,52 @@
+.loading {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 10;
+ background-color: #8f96b447;
+}
+
+.loading_hide {
+ display: none;
+}
+
+.lds-ring {
+ display: inline-block;
+ position: relative;
+ width: 80px;
+ height: 80px;
+}
+.lds-ring div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 64px;
+ height: 64px;
+ margin: 8px;
+ border: 8px solid #667eea;
+ border-radius: 50%;
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: #764ba2 transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+ animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+ animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+ animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/Components/MemoryGame/CardComponent.module.scss b/src/Components/MemoryGame/CardComponent.module.scss
new file mode 100644
index 0000000..319075c
--- /dev/null
+++ b/src/Components/MemoryGame/CardComponent.module.scss
@@ -0,0 +1,209 @@
+@keyframes win {
+ from{
+ transform:rotateY(180deg) scale(1);
+ }
+ to{
+ transform:rotateY(180deg) scale(1.16);
+ }
+}
+
+$card-width:150px;
+$card-height:220px;
+
+.card{
+ border: 1px stolid teal;
+ border-radius: 15px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: $card-width;
+ height: $card-height;
+ position: relative;
+ transition: 0.6s;
+ &__win{
+ box-shadow: 0 0 3px 5px green;
+ animation: win 0.2s linear;
+ }
+ &__face{
+ transform: rotateY(180deg);
+ position: absolute;
+ z-index: -1;
+ width: $card-width;
+ height: $card-height;
+ border-radius: 15px;
+ background-size: cover;
+ }
+ &__shirt{
+ border-radius: 15px;
+ position: absolute;
+ width: $card-width;
+ height: $card-height;
+ background-image: url('../../assets/cars/shirt.jfif');
+ background-size: cover;
+ }
+}
+.card_open{
+ transform: rotateY(180deg);
+ &__face{
+ z-index: 2;
+ transform: rotateY(180deg);
+ width: $card-width;
+ height: $card-height;
+ border-radius: 15px;
+ background-size: cover;
+ }
+ &__shirt{
+ background-image: none;
+ }
+}
+
+
+@media screen and (max-width: 680px) {
+ $card-width:135px; // 150
+ $card-height:198px; // 220
+
+ .card{
+ width: $card-width;
+ height: $card-height;
+
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ &__shirt{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+ .card_open{
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+}
+
+@media screen and (max-width: 600px) {
+ $card-width:120px; // 150
+ $card-height:176px; // 220
+
+ .card{
+ width: $card-width;
+ height: $card-height;
+
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ &__shirt{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+ .card_open{
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+}
+
+@media screen and (max-width: 550px) {
+ $card-width:105px; // 150
+ $card-height:154px; // 220
+
+ .card{
+ width: $card-width;
+ height: $card-height;
+
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ &__shirt{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+ .card_open{
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+}
+
+@media screen and (max-width: 485px) {
+ $card-width:90px; // 150
+ $card-height:132px; // 220
+
+ .card{
+ width: $card-width;
+ height: $card-height;
+
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ &__shirt{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+ .card_open{
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+}
+
+@media screen and (max-width: 420px) {
+ $card-width: 75px; // 150
+ $card-height: 110px; // 220
+
+ .card{
+ width: $card-width;
+ height: $card-height;
+
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ &__shirt{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+ .card_open{
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+}
+
+@media screen and (max-width: 358px) {
+ $card-width: 60px; // 150
+ $card-height: 88px; // 220
+
+ .card{
+ width: $card-width;
+ height: $card-height;
+
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ &__shirt{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+ .card_open{
+ &__face{
+ width: $card-width;
+ height: $card-height;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Components/MemoryGame/CardComponent.tsx b/src/Components/MemoryGame/CardComponent.tsx
new file mode 100644
index 0000000..8be033e
--- /dev/null
+++ b/src/Components/MemoryGame/CardComponent.tsx
@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from "react";
+
+import styles from "./CardComponent.module.scss";
+import { type IProps } from "./Interfaces";
+
+const CardComponent = ({
+ card,
+ onPress,
+ countTry,
+ pairs,
+ clickCount,
+ startGame,
+ inGame,
+}: IProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const canClick = useRef(false);
+
+ const handler = () => {
+ if (inGame) {
+ if (canClick.current && pairs < 2) {
+ setIsOpen(true);
+ onPress(card.id);
+ canClick.current = false;
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (!card.hasPair && countTry !== 0) {
+ setTimeout(() => {
+ setIsOpen(false);
+ canClick.current = true;
+ clickCount(0);
+ }, 700);
+ }
+ }, [countTry]);
+
+ useEffect(() => {
+ if (startGame) {
+ setIsOpen(true);
+ canClick.current = false;
+ }
+
+ if (!startGame) {
+ setIsOpen(false);
+ canClick.current = true;
+ }
+ }, [startGame]);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CardComponent;
diff --git a/src/Components/MemoryGame/Data.ts b/src/Components/MemoryGame/Data.ts
new file mode 100644
index 0000000..f1c0438
--- /dev/null
+++ b/src/Components/MemoryGame/Data.ts
@@ -0,0 +1,30 @@
+import audi from "../../assets/cars/audi.jfif";
+import bmw from "../../assets/cars/bmw.jfif";
+import dodje from "../../assets/cars/dodje.jfif";
+import ferrari from "../../assets/cars/ferrari.jfif";
+import lambo from "../../assets/cars/lambo.jfif";
+import maserati from "../../assets/cars/maserati.jfif";
+import mers from "../../assets/cars/mers.jfif";
+import porshe from "../../assets/cars/porshe.jfif";
+import zhiga from "../../assets/cars/zhiga.jfif";
+
+export const cardsArr = [
+ { id: 1, name: "Circle", hasPair: false, img: porshe },
+ { id: 2, name: "Circle", hasPair: false, img: porshe },
+ { id: 3, name: "Square", hasPair: false, img: bmw },
+ { id: 4, name: "Square", hasPair: false, img: bmw },
+ { id: 5, name: "Star", hasPair: false, img: dodje },
+ { id: 6, name: "Star", hasPair: false, img: dodje },
+ { id: 7, name: "Triangle", hasPair: false, img: lambo },
+ { id: 8, name: "Triangle", hasPair: false, img: lambo },
+ { id: 9, name: "5", hasPair: false, img: maserati },
+ { id: 10, name: "5", hasPair: false, img: maserati },
+ { id: 11, name: "6", hasPair: false, img: mers },
+ { id: 12, name: "6", hasPair: false, img: mers },
+ { id: 13, name: "10", hasPair: false, img: ferrari },
+ { id: 14, name: "10", hasPair: false, img: ferrari },
+ { id: 15, name: "11", hasPair: false, img: audi },
+ { id: 16, name: "11", hasPair: false, img: audi },
+ { id: 17, name: "12", hasPair: false, img: zhiga },
+ { id: 18, name: "12", hasPair: false, img: zhiga },
+];
diff --git a/src/Components/MemoryGame/Interfaces.ts b/src/Components/MemoryGame/Interfaces.ts
new file mode 100644
index 0000000..c4bf187
--- /dev/null
+++ b/src/Components/MemoryGame/Interfaces.ts
@@ -0,0 +1,16 @@
+export interface ICard {
+ id: number;
+ name: string;
+ hasPair: boolean;
+ img: string;
+}
+
+export interface IProps {
+ card: ICard;
+ onPress: (id: number) => void;
+ countTry: number;
+ pairs: number;
+ clickCount: React.Dispatch
+
+ );
+};
+
+export default PopupMessage;
diff --git a/src/Components/Message/style.scss b/src/Components/Message/style.scss
new file mode 100644
index 0000000..b33e42c
--- /dev/null
+++ b/src/Components/Message/style.scss
@@ -0,0 +1,36 @@
+
+.pop-message {
+ position: fixed;
+ display: flex;
+ width: 100vw;
+ height: 100vh;
+ top: 0;
+ left: 0;
+ background: #8f96b447;
+ z-index: 5;
+
+ &_hide {
+ display: none;
+ }
+
+ // .pop-message__background
+ &__background {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: auto;
+ max-width: 90vw;
+ width: 320px;
+ height: 10vh;
+ border-radius: 10px;
+ font-size: 18px;
+ font-weight: 700;
+ background: linear-gradient(to right,#667eea,#764ba2);
+ }
+
+ // .pop-message__wrapper
+ &__wrapper {
+ display: flex;
+ text-align: center;
+ }
+}
\ No newline at end of file
diff --git a/src/Components/MultiGames/CreateGamesList.module.scss b/src/Components/MultiGames/CreateGamesList.module.scss
new file mode 100644
index 0000000..8430fdb
--- /dev/null
+++ b/src/Components/MultiGames/CreateGamesList.module.scss
@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
+
+.main {
+ display: flex;
+ flex-direction: column;
+ background: linear-gradient(
+ 180deg,
+ #7e6dd100 0%,
+ #464b906a 100%,
+ );
+ width: 100%;
+ padding: 20px 0;
+ display: flex;
+ gap: 20px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+ font-size: .8em;
+ &_gamesWrapper {
+ display: flex;
+ flex-wrap: wrap;
+ width: calc(100vw - 32px);
+ background: #ffffff38;
+ border-radius: 8px;
+ padding: 24px 12px;
+ gap: 20px
+ }
+ &_item {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ width: 220px;
+ height: 120px;
+ padding: 10px;
+ font-family: 'Righteous', cursive;
+ transition: all .3s;
+ background: linear-gradient(
+ 120deg,
+ #7e6dd1 0%,
+ #262c7d 100%,
+ );
+ border-radius: 12px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ color: #ffffffe7;
+ &:hover{
+ background-color: rgba(255, 68, 0, 0.459);
+ background: linear-gradient(
+ 30deg,
+ rgba(213, 65, 11, 0.661) 0%,
+ rgba(218, 118, 12, 0.459) 100%,
+ );
+ cursor: pointer;
+ }
+ }
+ &_userName {
+ font-size: 1.7em;
+ font-family: "Russo One", sans-serif;
+ }
+ &_usersCount {
+ display: flex;
+ flex-direction: column;
+ font-size: 1.4em;
+ align-items: center;
+ }
+ &_usersIcon {
+ background: url(../../assets/svg/users.svg) center no-repeat;
+ background-size: contain;
+ width: 20px;
+ height: 20px;
+ }
+ &_header{
+ display: flex;
+ gap: 20px;
+ font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
+ align-items: center;
+ }
+ &_icon{
+ cursor: pointer;
+ transition: 0.7s;
+ }
+ &_rotate{
+ animation: rotate 1s ease-in-out;
+ }
+ &_noGames {
+ width: 100%;
+ padding: 30px;
+ opacity: .6;
+ font-size: 1.6em;
+ text-align: center;
+ }
+}
+
+@media screen and (max-width: 520px) {
+ .main_gamesWrapper {
+ justify-content: center;
+ }
+ .main_usersCount {
+ flex-direction: row;
+ gap: 8px
+ }
+ .main_item {
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 8px 20px;
+ height: auto;
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/Components/MultiGames/CreateGamesList.tsx b/src/Components/MultiGames/CreateGamesList.tsx
new file mode 100644
index 0000000..c8977ee
--- /dev/null
+++ b/src/Components/MultiGames/CreateGamesList.tsx
@@ -0,0 +1,75 @@
+import { faRefresh } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState, useEffect } from "react";
+
+import { BACKEND_URL } from "../../data/authData";
+import languageStore from "../../store/language";
+import useStatusStore from "../../store/load-status";
+
+import styles from "./CreateGamesList.module.scss";
+
+interface IGames {
+ gameId: string;
+ maxPlayers: number;
+ name: string;
+ player: string;
+ playersInGame: number;
+}
+interface IProps {
+ gameName: string | undefined;
+ joinGame: (id: string) => void;
+}
+
+export const CreateGamesList = ({ gameName, joinGame }: IProps) => {
+ const [gamesArr, setGamesArr] = useState
+
+
+ {isEn ? MESSAGES_RU[status.message] : MESSAGES_EN[status.message]}
+
+
+
+ {isEn ? "Список доступных игр" : "List of create games"}
+
+
+ );
+};
diff --git a/src/Components/SeaBattle/Board.ts b/src/Components/SeaBattle/Board.ts
new file mode 100644
index 0000000..7023290
--- /dev/null
+++ b/src/Components/SeaBattle/Board.ts
@@ -0,0 +1,76 @@
+import { Ship, Miss, Damage, Mark } from "./Ship";
+// eslint disable max-classes-per-file
+interface Marked {
+ color: string;
+ id: number;
+ name: string;
+}
+
+export class Cell {
+ board: Board;
+
+ x: number;
+
+ y: number;
+
+ mark: Marked;
+
+ id: number;
+
+ constructor(board: Board, x: number, y: number, mark: Marked) {
+ this.board = board;
+ this.x = x;
+ this.y = y;
+ this.mark = mark;
+ this.id = Math.random() * 10;
+ }
+}
+
+export class Board {
+ cells: Cell[][] = [];
+
+ initCells() {
+ for (let i = 0; i < 10; i += 1) {
+ const row: Cell[] = [];
+
+ for (let j = 0; j < 10; j += 1) {
+ row.push(
+ new Cell(this, j, i, {
+ color: "",
+ id: 0,
+ name: "",
+ })
+ );
+ }
+
+ this.cells.push(row);
+ }
+ }
+
+ getCopy() {
+ const newBoard = new Board();
+ newBoard.cells = this.cells;
+
+ return newBoard;
+ }
+
+ getCell(x: number, y: number) {
+ return this.cells[y][x];
+ }
+
+ createShip(x: number, y: number) {
+ new Ship(this.getCell(x, y));
+ }
+
+ miss(x: number, y: number) {
+ new Miss(this.getCell(x, y));
+ }
+
+ damage(x: number, y: number) {
+ new Damage(this.getCell(x, y));
+ }
+
+ empty(x: number, y: number) {
+ new Mark(this.getCell(x, y));
+ }
+}
diff --git a/src/Components/SeaBattle/Cell.module.scss b/src/Components/SeaBattle/Cell.module.scss
new file mode 100644
index 0000000..a1a09ac
--- /dev/null
+++ b/src/Components/SeaBattle/Cell.module.scss
@@ -0,0 +1,50 @@
+@keyframes rotate {
+ from{
+ transform: rotate(0deg);
+ }
+ to{
+ transform: rotate(360deg);
+ }
+}
+@keyframes rotate2 {
+ from{
+ transform: rotate(0deg);
+ }
+ to{
+ transform: rotate(-360deg);
+ }
+}
+@keyframes fire {
+ from{
+ transform: scale(1);
+ }
+ to{
+ transform: scale(1.2);
+ }
+}
+.cell{
+ width: 30px;
+ height: 30px;
+ border: 1px solid rgb(5, 5, 5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ &:hover{
+ border: 1px solid orangered;
+ }
+}
+.blue{
+ background-color: #1560BD;
+}
+.fire_animate{
+ animation: fire 1s linear infinite;
+}
+.fire{
+ background-color: rgb(209, 38, 38);
+}
+.gun{
+ animation: rotate 6s linear infinite;
+}
+.gun2{
+ animation: rotate2 6s linear infinite;
+ }
\ No newline at end of file
diff --git a/src/Components/SeaBattle/CellComponent.tsx b/src/Components/SeaBattle/CellComponent.tsx
new file mode 100644
index 0000000..0787a89
--- /dev/null
+++ b/src/Components/SeaBattle/CellComponent.tsx
@@ -0,0 +1,36 @@
+import { useMemo } from "react";
+
+import fire from "../../assets/seaBattle/fire.png";
+import gun from "../../assets/seaBattle/gun.png";
+import mine from "../../assets/seaBattle/mine.png";
+
+import type { Cell } from "./Board";
+import styles from "./Cell.module.scss";
+
+interface IProps {
+ cell: Cell;
+ addMark: (x: number, y: number) => void;
+}
+
+export const CellComponent = ({ cell, addMark }: IProps) => {
+ const classes = [styles.cell];
+ const randomRotate = useMemo(() => Math.random() > 0.5, []);
+ classes.push(styles[cell.mark.color]);
+
+ return (
+
+ {isEn ? "Список доступных игр" : "List of create games"}
+
+
+ {gamesArr.length !== 0 ? (
+ gamesArr.map((game) => (
+
+ joinGame(game.gameId)}
+ >
+
+ ))
+ ) : (
+ {game.player}
+
+
+ {game.playersInGame} / {game.maxPlayers}
+
+ + {isEn ? "Созданных игр пока нет" : "Not avalaible games"} +
+ )} + addMark(cell.x, cell.y)}>
+ {cell.mark.name === "miss" && 
}
+ {cell.mark.name === "damage" && (
+ 
+ )}
+ {cell.mark.name === "ship" && (
+ 
+ )}
+
+ );
+};
diff --git a/src/Components/SeaBattle/Field.module.scss b/src/Components/SeaBattle/Field.module.scss
new file mode 100644
index 0000000..d651a1f
--- /dev/null
+++ b/src/Components/SeaBattle/Field.module.scss
@@ -0,0 +1,58 @@
+.board{
+ font-family: 'Ceviche One', cursive;
+ display: flex;
+ width: 302px;
+ flex-wrap: wrap;
+ border: 1px solid rgb(0, 0, 0);
+ background-color: rgba(57, 141, 141, 0.575);
+ user-select: none;
+}
+.can_shoot{
+ box-shadow: 0 0 16px 4px rgba(12, 155, 17, 0.902);
+}
+.text{
+ color: wheat;
+ font-family: "Russo One", sans-serif;
+ font-weight: 100;
+ font-size: 1.6em;
+ max-width: 94vw;
+ text-align: center;
+}
+.letters{
+ font-family: 'Ceviche One', cursive;
+ margin-left: 31px;
+ display: flex;
+ width: 302px;
+ &_item{
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ user-select: none;
+}
+.horizontal{
+ display: flex;
+ user-select: none;
+}
+.numbers{
+ font-family: 'Ceviche One', cursive;
+ &_item{
+ width: 30px;
+ height: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ user-select: none;
+}
+
+@media screen and (max-width: 450px) {
+ .numbers {
+ display: none;
+ }
+ .letters {
+ display: none;
+ opacity: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/Components/SeaBattle/FieldComp.tsx b/src/Components/SeaBattle/FieldComp.tsx
new file mode 100644
index 0000000..3236dee
--- /dev/null
+++ b/src/Components/SeaBattle/FieldComp.tsx
@@ -0,0 +1,88 @@
+import React, { useCallback } from "react";
+
+import type { Board } from "./Board";
+import { CellComponent } from "./CellComponent";
+import styles from "./Field.module.scss";
+
+interface IProps {
+ board: Board;
+ setBoard: React.Dispatch
+
+ );
+};
diff --git a/src/Components/SeaBattle/InfoComp.tsx b/src/Components/SeaBattle/InfoComp.tsx
new file mode 100644
index 0000000..9a7817b
--- /dev/null
+++ b/src/Components/SeaBattle/InfoComp.tsx
@@ -0,0 +1,74 @@
+import type { Winner } from "../../Pages/SeaBattle/web-socket/websocketData";
+import useUserStore from "../../store";
+import languageStore from "../../store/language";
+import Button from "../common/Button";
+
+import styles from "./Field.module.scss";
+
+interface IProps {
+ shipsReady: boolean;
+ canShoot: boolean;
+ ready: () => void;
+ start: string;
+ winner?: Winner;
+ mainUser?: boolean;
+}
+
+export const InfoComp = ({
+ shipsReady = false,
+ canShoot = false,
+ ready,
+ start,
+ winner,
+ mainUser,
+}: IProps) => {
+ const { userName } = useUserStore();
+ const { isEn } = languageStore();
+
+ if (!shipsReady && !mainUser) {
+ return (
+
+ );
+ }
+
+ if (start === "") {
+ let message = mainUser ? (
+
+ {letters.map((letter) => (
+
+
+ {letter}
+
+ ))}
+
+
+
+ {numbers.map((number) => (
+
+
+ {number}
+
+ ))}
+
+ {board.cells.map((row, i) => (
+
+ {row.map((cell) => (
+
+ ))}
+
+ + {isEn ? "Ожидание 2 игрока" : "Waiting for the 2-nd player"} +
+ ) : ( ++ {isEn ? "Ожидание старта игры" : "Waiting for the start"} +
+ ); + + if (winner) { + message = + winner.player.userName === userName ? ( ++ {isEn ? "Вы победили! Ходов:" : "You win! Moves:"} {winner.moves} +
+ ) : ( ++ {isEn ? "Вы проиграли :(" : "You lose :("} +
+ ); + } + + return message; + } + + return ( +
+ {canShoot ? (
+
+ );
+};
diff --git a/src/Components/SeaBattle/Interfaces.ts b/src/Components/SeaBattle/Interfaces.ts
new file mode 100644
index 0000000..2aa09e4
--- /dev/null
+++ b/src/Components/SeaBattle/Interfaces.ts
@@ -0,0 +1,29 @@
+export interface IShip {
+ size: number;
+ cors: number[][];
+}
+
+export interface ISeaWarPlayer {
+ isLead: boolean;
+ isReady: boolean;
+ moves: number;
+ ships: IShip;
+ userName: string;
+}
+
+export interface IGameData {
+ gameId: string;
+ isStarted: boolean;
+ isMainUser: boolean;
+ player: ISeaWarPlayer;
+ enemyName: string | null;
+ isEnemyReady: boolean;
+ enemyField: number[][];
+ yourField: number[][];
+ winner: { username: string; moves: number } | null;
+}
+
+export interface IRequest {
+ type: string;
+ data: IGameData;
+}
diff --git a/src/Components/SeaBattle/Ship.ts b/src/Components/SeaBattle/Ship.ts
new file mode 100644
index 0000000..91228bc
--- /dev/null
+++ b/src/Components/SeaBattle/Ship.ts
@@ -0,0 +1,37 @@
+import type { Cell } from "./Board";
+
+// eslint disable max-classes-per-file
+export class Mark {
+ cell: Cell;
+
+ constructor(cell: Cell) {
+ this.cell = cell;
+ this.cell.mark.color = "";
+ this.cell.mark.id = Math.random() * 10;
+ this.cell.mark.name = "";
+ }
+}
+
+export class Ship extends Mark {
+ constructor(cell: Cell) {
+ super(cell);
+ this.cell.mark.color = "blue";
+ this.cell.mark.name = "ship";
+ }
+}
+
+export class Miss extends Mark {
+ constructor(cell: Cell) {
+ super(cell);
+ this.cell.mark.color = "mine";
+ this.cell.mark.name = "miss";
+ }
+}
+
+export class Damage extends Mark {
+ constructor(cell: Cell) {
+ super(cell);
+ this.cell.mark.color = "fire";
+ this.cell.mark.name = "damage";
+ }
+}
diff --git a/src/Components/Tetris/FigureItem/index.tsx b/src/Components/Tetris/FigureItem/index.tsx
new file mode 100644
index 0000000..644e590
--- /dev/null
+++ b/src/Components/Tetris/FigureItem/index.tsx
@@ -0,0 +1,22 @@
+import type { CSSProperties, FC } from "react";
+import { memo } from "react";
+
+import type { Coordinates } from "../../../helpers/tetris/movement";
+import "./style.scss";
+
+interface IFigureItemProps {
+ coordinates: Coordinates;
+ backgroundColor: string;
+}
+
+const FigureItem: FC{isEn ? "Ваш выстрел" : "Your shoot"}
+ ) : ( ++ {isEn ? "Выстрел соперника" : "Enemy shoot"} +
+ )} +
+
+ + {isEn ? "Cчет : " : "Score : "} {points} +
+ +
+ {coords.map((coordinates, index) => (
+
+);
+
+export default memo(Item);
diff --git a/src/Components/Tetris/Item/style.scss b/src/Components/Tetris/Item/style.scss
new file mode 100644
index 0000000..b636b14
--- /dev/null
+++ b/src/Components/Tetris/Item/style.scss
@@ -0,0 +1,5 @@
+.wrapper {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
\ No newline at end of file
diff --git a/src/Components/common/Button/index.tsx b/src/Components/common/Button/index.tsx
new file mode 100644
index 0000000..1898afe
--- /dev/null
+++ b/src/Components/common/Button/index.tsx
@@ -0,0 +1,13 @@
+import clsx from "clsx";
+import type { FC, ButtonHTMLAttributes, DetailedHTMLProps } from "react";
+import "./style.scss";
+
+const Button: FC<
+ DetailedHTMLProps
+
+
+ );
+};
+
+export default PasswordControl;
diff --git a/src/Components/common/Input/UsernameControl/index.tsx b/src/Components/common/Input/UsernameControl/index.tsx
new file mode 100644
index 0000000..dacb044
--- /dev/null
+++ b/src/Components/common/Input/UsernameControl/index.tsx
@@ -0,0 +1,7 @@
+import "../style.scss";
+
+const UsernameControl = ({ ...inputProps }) => (
+
+);
+
+export default UsernameControl;
diff --git a/src/Components/common/Input/index.tsx b/src/Components/common/Input/index.tsx
new file mode 100644
index 0000000..52ac0d3
--- /dev/null
+++ b/src/Components/common/Input/index.tsx
@@ -0,0 +1,36 @@
+import type { DetailedHTMLProps, FC, InputHTMLAttributes } from "react";
+
+import PasswordControl from "./PasswordControl";
+import UsernameControl from "./UsernameControl";
+
+import "./style.scss";
+
+interface InputProps
+ extends DetailedHTMLProps<
+ InputHTMLAttributes
+
+);
+
+export default Input;
diff --git a/src/Components/common/Input/style.scss b/src/Components/common/Input/style.scss
new file mode 100644
index 0000000..a49320f
--- /dev/null
+++ b/src/Components/common/Input/style.scss
@@ -0,0 +1,59 @@
+.input-wrapper {
+ margin-bottom: 12px;
+}
+
+.input {
+ width: 100%;
+ height: 40px;
+ padding: 10px 0 10px 15px;
+ border: 2px solid #7e6dd1;
+ border-radius: 5px;
+ outline: unset;
+
+ &::placeholder {
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ &__label {
+ color: #4f4c6b;
+ font-weight: 600;
+ }
+
+ &__error-message {
+ margin-top: 10px;
+ color: purple;
+ margin-left: 3px;
+ font-size: 14px;
+ line-height: 16px;
+ text-transform: capitalize;
+ }
+}
+
+.password-input-wrapper {
+ border: 2px solid #7e6dd1;
+ border-radius: 5px;
+ padding-right: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.password-input {
+ width: 100%;
+ height: 40px;
+ padding-left: 15px;
+ padding: 10px 0 10px 15px;
+ outline: unset;
+
+ &::placeholder {
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ border: none;
+}
+
+.visibility-icon {
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/Components/common/Modal/index.tsx b/src/Components/common/Modal/index.tsx
new file mode 100644
index 0000000..6aea9ea
--- /dev/null
+++ b/src/Components/common/Modal/index.tsx
@@ -0,0 +1,40 @@
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { FC, ReactNode } from "react";
+import ReactDOM from "react-dom";
+
+import themeStore from "../../../store/theme";
+
+import "./style.scss";
+
+interface ModalProps {
+ children: ReactNode;
+ title: string;
+ setModalClosed: () => void;
+}
+
+const Modal: FC{label}
+ {type === "password" ? ( +
+ {errorsMessage &&
+ {errorsMessage}
} +
+
+
,
+ document.body
+ );
+};
+
+export default Modal;
diff --git a/src/Components/common/Modal/style.scss b/src/Components/common/Modal/style.scss
new file mode 100644
index 0000000..815f6a1
--- /dev/null
+++ b/src/Components/common/Modal/style.scss
@@ -0,0 +1,95 @@
+.modal-background {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 3;
+ background-color: rgb(0 0 0 / 38%);
+}
+
+.modal-wrapper {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.modal__dark {
+ border-radius: 12px;
+ box-shadow: 0 0 5px 5px #667eea23;
+
+ .authentication__title {
+ color: #eeddffaf;
+ }
+
+ input {
+ background: #e0e0e0;
+ }
+
+ .input__label {
+ color: #eeddff91;
+ }
+
+ .password-input-wrapper {
+ background-color: #e0e0e0;
+ color: #764ba2;
+ }
+
+ .input__error-message {
+ color: #ea8066;
+ }
+}
+
+.modal {
+ min-width: 300px;
+ width: 420px;
+ max-width: 96vw;
+ z-index: 3;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ width: 100%;
+ padding: 16px;
+ border-radius: 10px 10px 0 0;
+ background: linear-gradient(to right, #667eea, #764ba2);
+ }
+
+ &__title {
+ text-align: center;
+ font-size: 32px;
+ line-height: 20px;
+ color: white;
+ font-family: 'Ceviche One', cursive;
+ }
+
+ &__close-icon {
+ position: absolute;
+ right: 20px;
+ color: white;
+ font-size: 24px;
+ cursor: pointer;
+
+ &:hover {
+ font-size: 28px;
+ }
+ }
+
+ &__content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ border-radius: 0 0 10px 10px;
+ padding: 10px;
+ position: relative;
+ padding: 24px 20px;
+ }
+}
diff --git a/src/Pages/Games/GameComp/GameComp.tsx b/src/Pages/Games/GameComp/GameComp.tsx
new file mode 100644
index 0000000..e6a06b2
--- /dev/null
+++ b/src/Pages/Games/GameComp/GameComp.tsx
@@ -0,0 +1,38 @@
+import type { FC } from "react";
+import { useNavigate } from "react-router-dom";
+
+import languageStore from "../../../store/language";
+import type { GameItem } from "../games.data";
+import StarsView from "../StarsView/StarsView";
+
+import "./Style.scss";
+
+interface GameCompProps {
+ gameItem: GameItem;
+}
+
+const GameComp: FC
+
+
+
+ {title}
+
+ {children}
+
+ navigate(`/preview/${gameItem.name}`)}
+ >
+
+ );
+};
+
+export default GameComp;
diff --git a/src/Pages/Games/GameComp/Style.scss b/src/Pages/Games/GameComp/Style.scss
new file mode 100644
index 0000000..401c896
--- /dev/null
+++ b/src/Pages/Games/GameComp/Style.scss
@@ -0,0 +1,107 @@
+@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
+
+.game-item {
+ width: 420px;
+ height: 240px;
+ max-width: calc(100vw - 32px);
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ border-radius: 12px;
+ transition: all .2s;
+ cursor: pointer;
+
+ &:hover {
+ transform: scale(1.05);
+ }
+
+ // .game-item__name
+ &__name {
+ display: flex;
+ flex-direction: column;
+ width: calc(100% - 32px);
+ height: calc(100% - 32px);
+ position: absolute;
+ justify-content: center;
+ border-radius: 12px;
+
+ h3 {
+ margin: auto;
+ color: #ffffff;
+ font-family: 'Black Ops One', cursive;
+ font-size: 3.8em;
+ line-height: 90%;
+ text-shadow: 20px 0 20px #00000039,
+ 0 20px 20px #00000039,
+ -20px 0 20px #00000039,
+ 0 -20px 20px #00000039;
+ }
+ }
+
+ // .game-item__rating
+ &__rating {
+ margin-left: auto;
+ margin-top: auto;
+ }
+
+ // .game-item__wrapper
+ &__wrapper {
+ position: relative;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ padding: 16px;
+ border-radius: 12px;
+ background: rgba(0,0,0,0.5);
+ background: linear-gradient(
+ 160deg,
+ rgba(255, 255, 255, 0.109) 0%,
+ rgba(255, 255, 255, 0.094) 73%,
+ rgba(255, 255, 255, 0.59) 100%);
+
+ h4 {
+ display: none;
+ }
+ }
+
+ &_coming-soon {
+ cursor: default;
+
+ &:hover {
+ transform: none;
+ }
+
+ .game-item__wrapper {
+ background: linear-gradient(
+ 160deg,
+ rgba(91, 91, 91, 0.826) 0%,
+ rgba(62, 62, 62, 0.781) 73%,
+ rgba(122, 122, 122, 0.817) 100%);
+
+ h3 {
+ opacity: .4;
+ }
+
+ h4 {
+ display: flex;
+ color: #ffffffa4;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ font-size: 1.2em;
+ }
+
+ .game-item__rating {
+ display: none;
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 890px) {
+ .game-item {
+ min-width: 92vw;
+
+ &:hover {
+ transform: scale(1.02);
+ }
+ }
+}
diff --git a/src/Pages/Games/Games.tsx b/src/Pages/Games/Games.tsx
new file mode 100644
index 0000000..c45e49f
--- /dev/null
+++ b/src/Pages/Games/Games.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+
+import { getAllGamesFromBackEnd } from "../../controller/GamesComments";
+import languageStore from "../../store/language";
+import useStatusStore from "../../store/load-status";
+
+import GameComp from "./GameComp/GameComp";
+import type { GameItem } from "./games.data";
+
+import "./Style.scss";
+
+const Games = () => {
+ const [gamesArr, setGamesArr] = useState
+
+
+
+ {gameItem.fullName}
+{isEn ? "Совсем скоро..." : "Coming soon..."}
+
+
+
+
+ );
+};
+
+export default Games;
diff --git a/src/Pages/Games/StarsView/StarsView.tsx b/src/Pages/Games/StarsView/StarsView.tsx
new file mode 100644
index 0000000..0f3c3e0
--- /dev/null
+++ b/src/Pages/Games/StarsView/StarsView.tsx
@@ -0,0 +1,103 @@
+import type { FC } from "react";
+import { useEffect, useState } from "react";
+
+import "./style.scss";
+
+const NOT_SET_OPACITY = 0.6;
+
+interface SarsViewProps {
+ rating: number; // рейтинг который вычислился
+ canSet?: boolean; // может ли пользователь менять рейтинг
+ settedRating?: number; // значение заданное как-бы пользователем
+ setCallback?: (rating: number) => void; // вызывается когда пользователь задал рейтинг
+ starSize?: number; // Размер звездочки
+}
+
+const StarsView: FC{isEn ? "Игры" : "Games"}
+
+ {gamesArr.length > 0 &&
+ gamesArr.map((game) =>
+ {!isLoading && gamesArr.length === 0 && (
+
+
+ )}
+ {isEn ? "Игр пока нет!" : "There is no games!"}
+
+ ;
+ isComingSoon: boolean;
+}
+
+export interface CommentItem {
+ userName: string;
+ gameName: string;
+ text: string;
+ raiting: number;
+ date: Date;
+}
diff --git a/src/Pages/Games/pointsData.ts b/src/Pages/Games/pointsData.ts
new file mode 100644
index 0000000..152de03
--- /dev/null
+++ b/src/Pages/Games/pointsData.ts
@@ -0,0 +1,4 @@
+export const pointsData = [
+ 100, 80, 70, 60, 55, 45, 40, 35, 30, 27, 24, 21, 18, 16, 14, 12, 10, 8, 6, 5,
+ 4, 3, 2, 1,
+];
diff --git a/src/Pages/MainPage/index.tsx b/src/Pages/MainPage/index.tsx
new file mode 100644
index 0000000..5e24e54
--- /dev/null
+++ b/src/Pages/MainPage/index.tsx
@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import AuthenticationModal from "../../Components/Authentication";
+import Button from "../../Components/common/Button";
+import useUserStore from "../../store";
+import languageStore from "../../store/language";
+import themeStore from "../../store/theme";
+
+import "./style.scss";
+
+const MainPage = () => {
+ const [isModalClosed, setModalClosed] = useState(true);
+ const navigate = useNavigate();
+ const user = useUserStore((state) => state.userName);
+ const theme = themeStore((state) => state.isDark);
+ const isEn = languageStore((state) => state.isEn);
+
+ const handler = () => {
+ if (user === null) {
+ setModalClosed(false);
+ } else {
+ navigate("/games");
+ }
+ };
+
+ return (
+ ([]);
+ const openPairs = useRef(0);
+ const { isEn } = languageStore();
+ const { setUser } = useUserStore();
+ const { setStatus } = useStatusStore();
+
+ const gameName = "Memorygame";
+ let misData = 0;
+
+ const onPress = (id: number) => {
+ setOpenCards(openCards + 1);
+ const obj = cardsArr.find((item) => item.id === id);
+
+ if (obj != null) {
+ pairs.current.push(obj);
+ }
+
+ if (pairs.current.length === 2) {
+ if (pairs.current[0].name === pairs.current[1].name) {
+ pairs.current[0].hasPair = true;
+ pairs.current[1].hasPair = true;
+
+ if (misData < pointsData.length && level === 18)
+ setPoints((prev) => prev + pointsData[misData]);
+ if (misData < pointsData.length - 2 && level === 12)
+ setPoints((prev) => prev + pointsData[misData + 2]);
+ if (misData < pointsData.length - 4 && level === 8)
+ setPoints((prev) => prev + pointsData[misData + 4]);
+ misData = 0;
+
+ const arr = [...cards];
+ arr.splice(cards.indexOf(pairs.current[0]), 1, pairs.current[0]);
+ arr.splice(cards.indexOf(pairs.current[1]), 1, pairs.current[1]);
+ setCards(arr);
+ openPairs.current += 1;
+ } else {
+ misData += 1;
+ }
+
+ pairs.current = [];
+ setCountTry((prev) => prev + 1);
+ }
+ };
+
+ const startGameFunc = () => {
+ setInGame(true);
+ setStartGame(true);
+ misData = 0;
+ setPoints(0);
+ setTimeout(() => {
+ setStartGame(false);
+ }, 3000);
+ };
+
+ const restartGame = () => {
+ setStartGame(true);
+ const arr = [...cardsArr.slice(0, level).sort(() => Math.random() - 0.5)];
+ arr.forEach((item) => {
+ item.hasPair = false;
+ });
+ setCards(arr);
+ setCountTry(0);
+ misData = 0;
+ setPoints(0);
+ pairs.current = [];
+ openPairs.current = 0;
+ setOpenCards(0);
+ setShowModal(false);
+ setTimeout(() => {
+ setStartGame(false);
+ }, 3000);
+ };
+
+ useEffect(() => {
+ if (openPairs.current === level / 2) {
+ setShowModal(true);
+ if (points !== 0) postWinner(gameName, points);
+ }
+ }, [openPairs.current]);
+
+ useEffect(() => {
+ const arr = cardsArr.slice(0, level);
+ setCards(arr.sort(() => Math.random() - 0.5));
+ restartGame();
+ setInGame(false);
+
+ switch (level) {
+ case 8:
+ setWidth(650);
+ break;
+ case 12:
+ setWidth(990);
+ break;
+ case 18:
+ setWidth(990);
+ break;
+
+ default:
+ setWidth(650);
+ break;
+ }
+ }, [level]);
+
+ useEffect(() => {
+ checkForBan(isEn, setUser, setStatus, navigate);
+ }, []);
+
+ return (
+ ;
+ gameData: GameData | null;
+ setShowModal: React.Dispatch>;
+}
+
+export const CommentsList: FC = ({
+ comments,
+ gameData,
+ setShowModal,
+}) => {
+ const { isEn } = languageStore();
+ const { setUser } = useUserStore();
+ const { setStatus } = useStatusStore();
+ const navigate = useNavigate();
+
+ return (
+
+
+ );
+};
diff --git a/src/Pages/PreviewPage/Components/PreviewMainSection.tsx b/src/Pages/PreviewPage/Components/PreviewMainSection.tsx
new file mode 100644
index 0000000..79ced9b
--- /dev/null
+++ b/src/Pages/PreviewPage/Components/PreviewMainSection.tsx
@@ -0,0 +1,73 @@
+import type { FC } from "react";
+import { useNavigate } from "react-router-dom";
+
+import Button from "../../../Components/common/Button";
+import { checkForBan } from "../../../controller/banchecker";
+import type { GameData } from "../../../data/gamesData";
+import useUserStore from "../../../store";
+import languageStore from "../../../store/language";
+import useStatusStore from "../../../store/load-status";
+import StarsView from "../../Games/StarsView/StarsView";
+import styles from "../Preview.module.scss";
+
+interface PreviewMainSectionProps {
+ gameData: GameData | null;
+ myRaiting: number;
+ setRaiting: React.Dispatch>;
+ setShowModal: React.Dispatch>;
+ gameName: string | undefined;
+}
+
+export const PreviewMainSection: FC = ({
+ gameData,
+ myRaiting,
+ setRaiting,
+ setShowModal,
+ gameName,
+}) => {
+ const navigate = useNavigate();
+ const { isEn } = languageStore();
+ const { setUser } = useUserStore();
+ const { setStatus } = useStatusStore();
+
+ const navigateHandler = () => {
+ if (gameData?.isComingSoon) return;
+
+ if (gameName !== "SeaBattle") {
+ navigate(`/${gameName}`);
+ } else {
+ navigate(`/room/${gameName}`);
+ }
+ };
+
+ return (
+
+
+ );
+};
diff --git a/src/Pages/PreviewPage/Components/ReviewComment.tsx b/src/Pages/PreviewPage/Components/ReviewComment.tsx
new file mode 100644
index 0000000..8ad7394
--- /dev/null
+++ b/src/Pages/PreviewPage/Components/ReviewComment.tsx
@@ -0,0 +1,58 @@
+import type { FC } from "react";
+import { useState } from "react";
+
+import Button from "../../../Components/common/Button";
+import { postComment } from "../../../controller/GamesComments";
+import type { GameData } from "../../../data/gamesData";
+import languageStore from "../../../store/language";
+import useStatusStore from "../../../store/load-status";
+import StarsView from "../../Games/StarsView/StarsView";
+import styles from "../Preview.module.scss";
+
+interface ReviewCommentProps {
+ gameData: GameData | null;
+ raiting: number;
+ setRaiting: React.Dispatch>;
+ hideModal: () => void;
+}
+
+export const ReviewComment: FC = ({
+ gameData,
+ raiting,
+ setRaiting,
+ hideModal,
+}) => {
+ const { setStatus } = useStatusStore();
+ const { isEn } = languageStore();
+ const [comment, setComment] = useState("");
+
+ const addComment = () => {
+ setStatus({ isLoading: true, message: "" });
+ postComment(gameData?.name || "", comment, raiting)
+ .then(() => {
+ hideModal();
+ setStatus({ isLoading: false, message: "" });
+ })
+ .catch((error) => {
+ setStatus({ isLoading: false, message: error.message });
+ });
+ };
+
+ return (
+
setStarHovered(0)}>
+ {ratingByStars.map((percent, i) => (
+
+ );
+};
+
+export default StarsView;
diff --git a/src/Pages/Games/StarsView/style.scss b/src/Pages/Games/StarsView/style.scss
new file mode 100644
index 0000000..b922cbc
--- /dev/null
+++ b/src/Pages/Games/StarsView/style.scss
@@ -0,0 +1,44 @@
+.rating-view {
+ position: relative;
+ user-select: none;
+
+ // .rating-view__back
+ &__back {
+ display: flex;
+ gap: 6px;
+ z-index: 0;
+ }
+
+ // .rating-view__fill
+ &__fill {
+ position: absolute;
+ display: flex;
+ gap: 6px;
+ z-index: 1;
+ }
+
+ // .rating-view__star-wrapper
+ &__star-wrapper {
+ width: 30px;
+ height: 30px;
+ &input:focus {
+ background-color: transparent;
+ }
+ }
+
+ // .rating-view__star-no
+ &__star-no {
+ width: 100%;
+ height: 100%;
+ background: url(../../../assets/svg/star-empty.svg) no-repeat center;
+ background-size: cover;
+ }
+
+ // .rating-view__star-yes
+ &__star-yes {
+ width: 100%;
+ height: 100%;
+ background: url(../../../assets/svg/star-full.svg) no-repeat left;
+ background-size: cover;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/Games/Style.scss b/src/Pages/Games/Style.scss
new file mode 100644
index 0000000..cadc828
--- /dev/null
+++ b/src/Pages/Games/Style.scss
@@ -0,0 +1,39 @@
+.games {
+ display: flex;
+ min-height: calc(100vh - 80px - 80px);
+ ;
+ width: 100%;
+ flex-direction: column;
+ align-items: center;
+ padding: 16px;
+
+ // .games__title
+ &__title {
+ font-family: 'Russo One', sans-serif;
+ font-size: 3em;
+ font-weight: 900;
+ color: #7e6dd1;
+ margin-bottom: 40px;
+ }
+
+ // .games__list
+ &__list {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ gap: 16px;
+ }
+
+ // .games__no-games
+ &__no-games {
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ align-items: center;
+ justify-content: center;
+ font-size: 2em;
+ font-weight: 900;
+ color: #7e6dd1b5;
+ }
+
+}
\ No newline at end of file
diff --git a/src/Pages/Games/games.data.tsx b/src/Pages/Games/games.data.tsx
new file mode 100644
index 0000000..ede1491
--- /dev/null
+++ b/src/Pages/Games/games.data.tsx
@@ -0,0 +1,20 @@
+export interface GameItem {
+ name: string;
+ fullName: string;
+ image: string;
+ descriptionRu: string;
+ descriptionEn: string;
+ rulesRu: string;
+ rulesEn: string;
+ raiting: number;
+ comments: Array {
+ if (canSet) setStarHovered(i + 1);
+ }}
+ onClick={() => setNewRating(i + 1)}
+ >
+
+ i ? 1 : NOT_SET_OPACITY,
+ }}
+ />
+
+ ))}
+
+ {ratingByStars.map((_, i) => (
+
+
+
+
+ ))}
+
+ 
+ setModalClosed(true)} />
+ )}
+
+ );
+};
+
+export default MainPage;
diff --git a/src/Pages/MainPage/style.scss b/src/Pages/MainPage/style.scss
new file mode 100644
index 0000000..84a47a4
--- /dev/null
+++ b/src/Pages/MainPage/style.scss
@@ -0,0 +1,57 @@
+.main-page {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ &__photo {
+ width: 40%;
+ }
+
+ &__main-text {
+ margin-top: 20px;
+ max-width: 96vw;
+ font-size: 58px;
+ text-align: center;
+ line-height: 1;
+ font-family: 'Russo One', sans-serif;
+ font-weight: 600;
+ color: #4f4c6b;
+ }
+
+ &__secondary-text {
+ text-align: center;
+ margin-top: 60px;
+ max-width: 50%;
+ font-size: 20px;
+ font-weight: 400;
+ color: #4f4c6b;
+ opacity: 0.7;
+ }
+
+ &__button {
+ margin: 40px 0;
+ min-width: 200px;
+ }
+}
+
+.dark-theme{
+ .main-page__main-text{
+ color: #fffef0;
+ }
+ .main-page__secondary-text{
+ color: #fffef0;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .main-page {
+ &__main-text {
+ font-size: 2.5em;
+ max-width: 96vw;
+ }
+
+ &__secondary-text {
+ max-width: 90vw;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/MemoryGame/MemoryGame.tsx b/src/Pages/MemoryGame/MemoryGame.tsx
new file mode 100644
index 0000000..312b5fa
--- /dev/null
+++ b/src/Pages/MemoryGame/MemoryGame.tsx
@@ -0,0 +1,209 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import Button from "../../Components/common/Button";
+import Modal from "../../Components/common/Modal";
+import CardComponent from "../../Components/MemoryGame/CardComponent";
+import { cardsArr } from "../../Components/MemoryGame/Data";
+import { type ICard } from "../../Components/MemoryGame/Interfaces";
+import { checkForBan } from "../../controller/banchecker";
+import { postWinner } from "../../controller/Winners";
+import useUserStore from "../../store";
+import languageStore from "../../store/language";
+import useStatusStore from "../../store/load-status";
+import { pointsData } from "../Games/pointsData";
+
+import styles from "./Memorygame.module.scss";
+
+const randomArr = [...cardsArr].sort(() => Math.random() - 0.5);
+
+const MemoryGame = () => {
+ const navigate = useNavigate();
+ const [cards, setCards] = useState(randomArr);
+ const [inGame, setInGame] = useState(false);
+ const [startGame, setStartGame] = useState(false);
+ const [countTry, setCountTry] = useState(0);
+ const [points, setPoints] = useState(0);
+ const [openCards, setOpenCards] = useState(0);
+ const [showModal, setShowModal] = useState(false);
+ const [width, setWidth] = useState(650);
+ const [level, setLevel] = useState(8);
+ const pairs = useRef
+ + {isEn + ? "Начни играть вместе с Gaming Zone" + : "Let`s play with Gaming Zone"} +
++ {isEn + ? `Gaming Zone один из лучших сайтов онлайн игр, здесь вы гарантированно получите свою порцию веселья + играя с друзьями или в одиночку` + : `Gaming Zone has the best free online games selection and offers the most + fun experience to play alone or with friends.`} +
+ + {!isModalClosed && ( +
+ setShowModal(false)} title="Победа!">
+
+ )}
+
+ );
+};
+
+export default MemoryGame;
diff --git a/src/Pages/MemoryGame/Memorygame.module.scss b/src/Pages/MemoryGame/Memorygame.module.scss
new file mode 100644
index 0000000..fb30ae9
--- /dev/null
+++ b/src/Pages/MemoryGame/Memorygame.module.scss
@@ -0,0 +1,73 @@
+.memory_main{
+ width: 100%;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-family: "Russo One", sans-serif;
+ font-size: 25px;
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0) 0%,
+ rgba(118, 75, 162, 0.565) 83%,
+ rgba(102, 126, 234, 0.86) 100%
+ );
+ padding: 10px 0 40px;
+ &__level{
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ padding: 20px 0 0;
+ }
+ &__input{
+ padding: 5px 20px;
+ border-radius: 5px;
+ color: #fff;
+ background-image: linear-gradient(to right, #667eea, #764ba2);
+ option{
+ color: black;
+ }
+ }
+}
+.points{
+ margin-bottom: 10px;
+}
+.cards_conteiner{
+ display: flex;
+ flex-wrap: wrap;
+ gap: 15px;
+ justify-content: center;
+}
+.modal_window{
+ &__main{
+ padding: 20px;
+ width: 100%;
+ border-radius: 20px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+ }
+ &__text{
+ font-weight: bold;
+ }
+}
+.btns_conteiner{
+ padding: 20px 0;
+ display: flex;
+ gap: 20px;
+}
+
+@media screen and (max-width: 485px) {
+ .btns_conteiner{
+ padding: 10px 0;
+ gap: 10px;
+ flex-direction: column;
+ button {
+ padding: 8px 20px !important;
+ }
+ }
+ .memory_main__level{
+ flex-direction: column;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/NotFound/NotFound.tsx b/src/Pages/NotFound/NotFound.tsx
new file mode 100644
index 0000000..dcd4d4c
--- /dev/null
+++ b/src/Pages/NotFound/NotFound.tsx
@@ -0,0 +1,32 @@
+import { useNavigate } from "react-router-dom";
+
+import "./style.css";
+import languageStore from "../../store/language";
+
+const NotFound = () => {
+ const navigate = useNavigate();
+ const { isEn } = languageStore();
+
+ return (
+ Memory Game
+
+
+
+ {isEn ? "Уровень : " : "Level : "}
+ +
+
+
+
+ + {isEn ? "Количество очков:" : "Points:"} + {points} +
+
+ {cards.map((item) => (
+
+ {showModal && (
+
+
+ Ваш результат {points}
+ + +
+
+ );
+};
+
+export default NotFound;
diff --git a/src/Pages/NotFound/style.css b/src/Pages/NotFound/style.css
new file mode 100644
index 0000000..be2ade9
--- /dev/null
+++ b/src/Pages/NotFound/style.css
@@ -0,0 +1,143 @@
+/* vietnamese */
+@font-face {
+ font-family: 'Quicksand';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(/fonts.gstatic.com/s/quicksand/v30/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58m-wjwxUD2GF9Zc.woff2) format('woff2');
+ unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+ font-family: 'Quicksand';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(/fonts.gstatic.com/s/quicksand/v30/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58i-wjwxUD2GF9Zc.woff2) format('woff2');
+ unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+ font-family: 'Quicksand';
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url(/fonts.gstatic.com/s/quicksand/v30/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58a-wjwxUD2GFw.woff2) format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+* {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+#notfound {
+ height: calc(100vh - 80px - 80px);
+ background-color: #fafbfd;
+}
+
+#notfound .notfound {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+.notfound {
+ max-width: 520px;
+ width: 100%;
+ text-align: center;
+}
+
+.notfound .notfound-bg {
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ z-index: -1;
+}
+
+.notfound .notfound-bg > div {
+ width: 100%;
+ background: #fff;
+ border-radius: 90px;
+ height: 125px;
+}
+
+.notfound .notfound-bg > div:nth-child(1) {
+ -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
+ box-shadow: 5px 5px 0px 0px #f3f3f3;
+}
+
+.notfound .notfound-bg > div:nth-child(2) {
+ -webkit-transform: scale(1.3);
+ -ms-transform: scale(1.3);
+ transform: scale(1.3);
+ -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
+ box-shadow: 5px 5px 0px 0px #f3f3f3;
+ position: relative;
+ z-index: 10;
+}
+
+.notfound .notfound-bg > div:nth-child(3) {
+ -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
+ box-shadow: 5px 5px 0px 0px #f3f3f3;
+ position: relative;
+ z-index: 90;
+}
+
+.notfound h1 {
+ font-family: 'Quicksand', sans-serif;
+ font-size: 86px;
+ text-transform: uppercase;
+ font-weight: 700;
+ margin-top: 0;
+ margin-bottom: 8px;
+ color: #151515;
+}
+
+.notfound h2 {
+ font-family: 'Quicksand', sans-serif;
+ font-size: 26px;
+ margin: 0;
+ font-weight: 700;
+ color: #151515;
+}
+
+.notfound button {
+ font-family: 'Quicksand', sans-serif;
+ font-size: 14px;
+ text-decoration: none;
+ text-transform: uppercase;
+ display: inline-block;
+ padding: 15px 30px;
+ color: #fff;
+ font-weight: 700;
+ margin-top: 40px;
+}
+
+@media only screen and (max-width: 767px) {
+ .notfound .notfound-bg {
+ width: 287px;
+ margin: auto;
+ }
+
+ .notfound .notfound-bg > div {
+ height: 85px;
+ }
+}
+
+@media only screen and (max-width: 480px) {
+ .notfound h1 {
+ font-size: 68px;
+ }
+
+ .notfound h2 {
+ font-size: 18px;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/PreviewPage/Components/CommentsList.tsx b/src/Pages/PreviewPage/Components/CommentsList.tsx
new file mode 100644
index 0000000..7028b07
--- /dev/null
+++ b/src/Pages/PreviewPage/Components/CommentsList.tsx
@@ -0,0 +1,70 @@
+import type { FC } from "react";
+import { useNavigate } from "react-router-dom";
+
+import Button from "../../../Components/common/Button";
+import { checkForBan } from "../../../controller/banchecker";
+import type { GameComment, GameData } from "../../../data/gamesData";
+import useUserStore from "../../../store";
+import languageStore from "../../../store/language";
+import useStatusStore from "../../../store/load-status";
+import StarsView from "../../Games/StarsView/StarsView";
+import styles from "../Preview.module.scss";
+
+interface CommentsListProps {
+ comments: Array
+
+
+
+
+
+
+ {isEn ? "упс!" : "oops!"}
++ {isEn + ? "Ошибка 404 : Страница не найдена" + : "Error 404 : Page Not Found"} +
+ +
+
+
+ + {isEn ? "Отзывы" : "Feedback"} +
+ {comments.map((elem) => ( +
+
+ ))}
+
+ 
+
+
+ {elem.userName}
+{elem.text}
++ {`${new Date(elem.date).toLocaleString()}`} +
+
+ {
+ if (gameData?.isComingSoon) return;
+ setRaiting(rate);
+
+ if (!(await checkForBan(isEn, setUser, setStatus, navigate))) {
+ setShowModal(true);
+ }
+ }}
+ />
+
+
+ {gameData?.fullName}
++ {isEn ? gameData?.descriptionRu : gameData?.descriptionEn} +
+
+ setRaiting(rate)}
+ />
+