Merge pull request #52 from Timur233/SOK-80_bug-fix

Timur233 · Nov 25, 2024 · 4601550 · 4601550
2 parents 473a382 + 2d83f4a
commit 4601550
Show file tree

Hide file tree

Showing 19 changed files with 225 additions and 135 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,9 +26,10 @@ module.exports = {
     'quotes': ['error', 'single']
   },
   ignorePatterns: [
-    "packages/client/dist",
-    "packages/server/dist",
-    "packages/server/db.js",
-    "packages/server/index.js"
+    'packages/client/dist',
+    'packages/server/dist',
+    'packages/server/db.js',
+    'packages/server/index.js',
+    'packages/server/ts-dist/*',
   ]
 }
diff --git a/packages/client/index.html b/packages/client/index.html
@@ -11,6 +11,8 @@
       href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
       rel="stylesheet" />
 
+    <link rel="stylesheet" href="./public/styles.css" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Falcon Tanks</title>
   </head>

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -21,6 +21,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-toastify": "^10.0.5",
+    "sass": "^1.81.0",
     "serialize-javascript": "^6.0.2"
   },
   "devDependencies": {
@@ -41,7 +42,6 @@
     "prettier": "^2.7.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.26.2",
-    "sass": "^1.79.1",
     "ts-jest": "^28.0.8",
     "typescript": "^4.8.2",
     "vite": "^3.0.7"

diff --git a/packages/client/public/styles.css b/packages/client/public/styles.css
@@ -0,0 +1,52 @@
+body {
+  background-color: #242424;
+}
+
+.preloader {
+  position: fixed;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  z-index: 10;
+  background-color: rgb(0, 0, 0);
+}
+.preloader_show {
+  display: flex;
+}
+.preloader__road {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 150px;
+  height: 150px;
+  background-color: #2c414c;
+  background-image: url('@/assets/images/ground.png');
+  background-size: 50px 50px;
+  border-radius: 20px;
+  animation: moveRoad 2s linear infinite;
+}
+.preloader__image {
+  width: 60px;
+}
+.preloader__close-btn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, 100px);
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  color: #f8f8f8;
+  font-size: 14px;
+}
+.preloader__close-btn:hover {
+  text-decoration: underline;
+}
+@keyframes moveRoad {
+  100% {
+    background-position: 0px 50px;
+  }
+}
diff --git a/packages/client/src/components/common/Reaction/Reaction.scss b/packages/client/src/components/common/Reaction/Reaction.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/vars.scss";
+@import '../../../scss/vars.scss';
 
 @keyframes fadeIn {
   from {

diff --git a/packages/client/src/components/ui/ChristmasToggle/ChristmasToggle.scss b/packages/client/src/components/ui/ChristmasToggle/ChristmasToggle.scss
@@ -1,44 +1,44 @@
 .christmas-toggle {
-    width: 46px;
-    height: 24px;
-    background-color: #e5e5e5;
-    border-radius: 50px;
-    position: relative;
-    overflow: hidden;
-    cursor: pointer;
-    transition: background-color 0.3s ease-in-out;
+  width: 46px;
+  height: 24px;
+  background-color: #e5e5e5;
+  border-radius: 50px;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    opacity: 1;
+    background-image: url('https://media.istockphoto.com/id/1181274264/vector/christmas-backgrounds-seamless-pattern-vector-illustration.jpg?s=612x612&w=0&k=20&c=qjaiUif53nf-OjYeLwgOgtmoPlhoqFNpiN9Xw1PHY50=');
+    background-size: 350%;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  &.checked {
+    background-color: #839d22;
 
     &::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        opacity: 1;
-        background-image: url('https://media.istockphoto.com/id/1181274264/vector/christmas-backgrounds-seamless-pattern-vector-illustration.jpg?s=612x612&w=0&k=20&c=qjaiUif53nf-OjYeLwgOgtmoPlhoqFNpiN9Xw1PHY50=');
-        background-size: 350%;
-        transition: opacity 0.3s ease-in-out;
+      opacity: 0;
     }
-
-    &.checked {
-      background-color: #839d22;
+  }
 
-      &::before {
-        opacity: 0;
-      }
-    }
-
-    &__slider {
-      width: 20px;
-      height: 20px;
-      background-color: #fff;
-      border-radius: 50%;
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      transition: transform 0.3s ease-in-out;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    }
-
-    &.checked .christmas-toggle__slider {
-      transform: translateX(22px);
-    }
-  }
+  &__slider {
+    width: 20px;
+    height: 20px;
+    background-color: #fff;
+    border-radius: 50%;
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.3s ease-in-out;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  }
+
+  &.checked .christmas-toggle__slider {
+    transform: translateX(22px);
+  }
+}
diff --git a/packages/client/src/components/ui/ChristmasToggle/ChristmasToggle.tsx b/packages/client/src/components/ui/ChristmasToggle/ChristmasToggle.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import './ChristmasToggle.scss'
 
 interface IosToggleProps {
@@ -10,14 +10,18 @@ export const ChristmasToggle: React.FC<IosToggleProps> = ({
   checked = false,
   onChange,
 }) => {
-  const [isChecked, setIsChecked] = useState(checked)
+  const [isChecked, setIsChecked] = useState(false)
 
   const handleToggle = () => {
     const newChecked = !isChecked
     setIsChecked(newChecked)
     if (onChange) onChange(newChecked)
   }
 
+  useEffect(() => {
+    setIsChecked(checked)
+  }, [checked])
+
   return (
     <div
       className={`christmas-toggle ${isChecked ? 'checked' : ''}`}

diff --git a/packages/client/src/components/ui/OauthLinks/OauthLinks.scss b/packages/client/src/components/ui/OauthLinks/OauthLinks.scss
@@ -1,13 +1,13 @@
 .oauth-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+
+  &__item {
     display: flex;
     align-items: center;
-    justify-content: center;
-    margin-top: 12px;
-
-    &__item {
-        display: flex;
-        align-items: center;
-        border-radius: 8px;
-        cursor: pointer;
-    }
-}
+    border-radius: 8px;
+    cursor: pointer;
+  }
+}
diff --git a/packages/client/src/entry-server.tsx b/packages/client/src/entry-server.tsx
@@ -30,7 +30,9 @@ export default async function renderHtml(req: Request) {
   if (context instanceof Response) {
     throw context
   }
+
   const router = createStaticRouter(dataRoutes, context)
+
   return {
     html: renderToString(
       <React.StrictMode>

diff --git a/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx b/packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx
@@ -24,9 +24,11 @@ export function PrivateLayout() {
         .then(data => {
           dispatch(actions.setUser(data))
           window.sessionStorage.setItem('userIsLogged', '1') // 0
+          window.sessionStorage.setItem('userId', data.id.toString())
         })
         .catch(() => {
           window.sessionStorage.setItem('userIsLogged', '0') // 0
+          window.sessionStorage.setItem('userId', '')
 
           toast.error('Необходимо авторизоваться', {
             autoClose: 1500,

diff --git a/packages/client/src/layouts/PublicLayout/PublicLayout.scss b/packages/client/src/layouts/PublicLayout/PublicLayout.scss
@@ -10,5 +10,6 @@
   &__body {
     flex: 1 1 100%;
     padding-top: $layout_body-m-top;
+    padding-bottom: calc($layout_body-m-top + $layout_body-m-top);
   }
 }
diff --git a/packages/client/src/layouts/RootLayout/RootLayout.tsx b/packages/client/src/layouts/RootLayout/RootLayout.tsx
@@ -11,7 +11,20 @@ export default function RootLayout() {
   )
 
   useEffect(() => {
-    document.body.classList.add('custom-theme__' + themeAlias)
+    const bodyEl = document?.body
+    const bodyClassname = bodyEl?.getAttribute('class') || ''
+
+    if (typeof bodyClassname === 'string') {
+      const classListString = bodyClassname
+        .replace(/\bcustom-theme__\S*/g, '')
+        .replace(/\btypescript\b/g, '')
+        .trim()
+
+      bodyEl.setAttribute(
+        'class',
+        `${classListString} custom-theme__${themeAlias}`
+      )
+    }
   })
 
   return (

diff --git a/packages/client/src/pages/Game/Game.scss b/packages/client/src/pages/Game/Game.scss
@@ -10,6 +10,8 @@
 $border-color: #70842f;
 
 .game-page {
+  padding-bottom: 80px;
+
   &__container {
     margin: 0 auto;
     max-width: 1400px !important;

diff --git a/packages/client/src/pages/Leaderboard/components/User/User.scss b/packages/client/src/pages/Leaderboard/components/User/User.scss
@@ -2,9 +2,11 @@
 
 // Константы для медалей
 $medal-colors: (
-  1: #ffd700, // Gold
-  2: #c0c0c0, // Silver
-  3: #cd7f32  // Bronze
+  1: #ffd700,
+  // Gold
+  2: #c0c0c0,
+  // Silver
+  3: #cd7f32 // Bronze,
 );
 
 $c_item-border-main-color: #9d9b9b;
@@ -15,14 +17,22 @@ $c_item-border-secondary-color: #474747;
     &__item-wrapper {
       position: relative;
       border-radius: 16px;
-      background: linear-gradient(90deg, $c_item-border-main-color 52.5%, $c_item-border-secondary-color 100%);
+      background: linear-gradient(
+        90deg,
+        $c_item-border-main-color 52.5%,
+        $c_item-border-secondary-color 100%
+      );
       margin: 5px 0;
       padding: 2px;
 
       // Медальные рамки
       @each $rank, $color in $medal-colors {
         &__rank-#{$rank} {
-          background: linear-gradient(90deg, $color 52.5%, darken($color, 20%) 100%);
+          background: linear-gradient(
+            90deg,
+            $color 52.5%,
+            darken($color, 20%) 100%
+          );
         }
       }
     }
@@ -124,4 +134,4 @@ $c_item-border-secondary-color: #474747;
   &__load-more {
     margin: 48px auto 0 auto;
   }
-}
+}
diff --git a/packages/client/src/pages/Profile/Profile.scss b/packages/client/src/pages/Profile/Profile.scss
@@ -36,6 +36,7 @@
     align-items: center;
     min-height: 100vh;
     box-sizing: border-box;
+    padding-bottom: 40px;
 
     &__title {
       margin-bottom: 48px;

diff --git a/packages/client/src/scss/styles.scss b/packages/client/src/scss/styles.scss
@@ -3,4 +3,4 @@
 @import './base.scss';
 @import './grid-system.scss';
 
-@import './themes/christmas.scss';
+@import './themes/christmas.scss';