Merge remote-tracking branch 'refs/remotes/origin/develop' into SOK-2…

…7_game-prototype

# Conflicts:
#	packages/client/src/app/App.tsx
#	packages/client/src/pages/Game/Game.tsx

packages/client/src/app/App.tsx

@@ -1,19 +1,20 @@
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-import RootLayout from '@/layouts/RootLayout/RootLayout'
-import PrivateLayout from '@/layouts/PrivateLayout/PrivateLayout'
+import { SvgSprite } from '@/components/ui/SvgSprite/SvgSprite'
 import AuthLayout from '@/layouts/AuthLayout/AuthLayout'
+import PrivateLayout from '@/layouts/PrivateLayout/PrivateLayout'
 import PublicLayout from '@/layouts/PublicLayout/PublicLayout'
+import RootLayout from '@/layouts/RootLayout/RootLayout'
+import { CreateThread } from '@/pages/CreateThread/CreateThread'
 import { Error } from '@/pages/Error/Error'
 import { Forum } from '@/pages/Forum/Forum'
+import { Game } from '@/pages/Game/Game'
 import { Leaderboard } from '@/pages/Leaderboard/Leaderboard'
 import { Main } from '@/pages/Main/Main'
+import { ChangePassword } from '@/pages/Profile/ChangePassword'
+import { Profile } from '@/pages/Profile/Profile'
 import { SignIn } from '@/pages/SignIn/SignIn'
 import { SignUp } from '@/pages/SignUp/SignUp'
-import { Game } from '@/pages/Game/Game'
 import { Thread } from '@/pages/Thread/Thread'
-import { Profile } from '@/pages/Profile/Profile'
-import { ChangePassword } from '@/pages/Profile/ChangePassword'
-import { SvgSprite } from '@/components/ui/SvgSprite/SvgSprite'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
 const routerConfig = createBrowserRouter([
   {
@@ -44,6 +45,10 @@ const routerConfig = createBrowserRouter([
             path: '/forum/:threadId',
             element: <Thread />,
           },
+          {
+            path: '/forum/new',
+            element: <CreateThread />,
+          },
           {
             path: '/leaderboard',
             element: <Leaderboard />,

packages/client/src/components/ui/BreadCrumbs/BreadCrumbs.scss

@@ -0,0 +1,23 @@
+@import '../../../scss/vars';
+
+$breadcrumbs-text-color: $c_white;
+
+.breadcrumbs {
+  &__item {
+    color: $breadcrumbs-text-color;
+
+    &:not(:last-child)::after {
+      content: '>';
+      margin: 9px;
+
+      font-size: 14px;
+
+      display: inline-block;
+      text-decoration: none;
+    }
+
+    &:last-child {
+      text-decoration: none;
+    }
+  }
+}

packages/client/src/components/ui/BreadCrumbs/BreadCrumbs.tsx

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom'
+import './BreadCrumbs.scss'
+
+type BreadCrumb = {
+  title: string
+  href: string
+}
+
+interface BreadCrumbsProps {
+  breadCrumbs: BreadCrumb[]
+  className?: string
+}
+
+export const BreadCrumbs = (props: BreadCrumbsProps) => {
+  const { breadCrumbs, className } = props
+
+  return (
+    <nav className={`breadcrumbs ${className}`}>
+      {breadCrumbs.map((crumb, index) => (
+        <Link className="breadcrumbs__item" key={index} to={crumb.href}>
+          {crumb.title}
+        </Link>
+      ))}
+    </nav>
+  )
+}

packages/client/src/components/ui/Button/Button.tsx

@@ -1,5 +1,6 @@
-import './Button.scss'
 import React from 'react'
+import './Button.scss'
+import './CompactButton.scss'
 
 export const Button = (props: {
   text: string

packages/client/src/components/ui/Button/CompactButton.scss

@@ -0,0 +1,39 @@
+@import '../../../scss/vars';
+
+$c_compact-button-border-top: $c_white;
+$c_compact-button-border-bottom: #999999;
+$c_compact-button-background-color: #d2d2d2;
+$c_compact-button-text-color: #242424;
+
+.compact-button {
+  border-width: 2px;
+  border-radius: 8px;
+  padding: 10px;
+
+  span {
+    text-transform: none;
+    text-shadow: none;
+    font-size: 14px;
+    font-weight: 800;
+    letter-spacing: 1px;
+  }
+
+  &_white {
+    background-color: $c_compact-button-background-color;
+    border-top: 2px solid $c_compact-button-border-top;
+    border-bottom: 2px solid $c_compact-button-border-bottom;
+    padding: 10px;
+
+    &:hover {
+      border-top: 2x solid $c_compact-button-border-bottom;
+      border-bottom: 2px solid $c_compact-button-border-top;
+    }
+
+    span {
+      text-shadow: none;
+      color: $c_compact-button-text-color;
+      text-transform: none;
+      letter-spacing: 1px;
+    }
+  }
+}

packages/client/src/components/ui/Card/Card.scss

@@ -0,0 +1,45 @@
+@import '../../../scss/vars';
+
+$decor-width: 90px;
+$decor-height: 7px;
+$c_card-background: $c_almost-black;
+$c_card-border: #9baf5d;
+$c_card-padding: $c_gray;
+
+@mixin decor($top, $bottom) {
+  content: '';
+  position: absolute;
+  top: $top;
+  bottom: $bottom;
+  left: calc(50% - ($decor-width / 2));
+
+  display: block;
+  width: $decor-width;
+  height: $decor-height;
+
+  background-image: url('@/assets/images/svg/title-decor.svg');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.card {
+  border: 2px solid $c_card-border;
+  background-color: $c_card-padding;
+  border-radius: 16px;
+  padding: 8px;
+  position: relative;
+
+  &::before {
+    @include decor(0, 'auto');
+  }
+
+  &::after {
+    @include decor('auto', 0);
+
+    transform: rotate(180deg);
+  }
+
+  &__content {
+    background-color: $c_card-background;
+  }
+}

packages/client/src/components/ui/Card/Card.tsx

@@ -0,0 +1,17 @@
+import './Card.scss'
+
+interface CardProps {
+  className?: string
+  children: React.ReactNode
+}
+
+export const Card = (props: CardProps) => {
+  const { className = '', children } = props
+  return (
+    <div className={'card'}>
+      <div className={`card__content${className ? ` ${className}` : ''}`}>
+        {children}
+      </div>
+    </div>
+  )
+}

packages/client/src/components/ui/CustomPageTitle/CustomPageTitle.scss

@@ -16,7 +16,7 @@ $border-gradient: linear-gradient(45deg, #414243, #7f7f7f) top left,
   linear-gradient(315deg, #414042, #414243) bottom left;
 $border-radius: 24px;
 $block-width: 350px;
-$outline-color: #101010;
+$outline-color: $c_almost-black;
 
 .custom-page-title {
   position: relative;

packages/client/src/components/ui/File/File.scss

@@ -0,0 +1,13 @@
+@import '../../../scss/vars';
+
+.file {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  background-color: transparent;
+  border: none;
+  color: $c_white;
+  text-decoration: underline;
+  align-self: flex-start;
+  cursor: pointer;
+}

packages/client/src/components/ui/File/File.tsx

@@ -0,0 +1,20 @@
+import { Icon } from '../Icon/Icon'
+import './File.scss'
+
+interface FileProps {
+  className?: string
+}
+
+export const File = (props: FileProps) => {
+  const { className = '' } = props
+  return (
+    <>
+      {/* TODO: Implement the logic of the file upload component */}
+      {/* <input type="file" /> */}
+      <button className={`file${className ? ' className' : ''}`}>
+        <Icon id="attach-icon" width={11} height={13} />
+        Прикрепить файл
+      </button>
+    </>
+  )
+}

packages/client/src/components/ui/Input/Input.scss

@@ -14,4 +14,8 @@
     outline: none;
     border-color: $c_input-default-border-hover;
   }
+
+  &::placeholder {
+    color: $c_input-default-placeholder;
+  }
 }

packages/client/src/components/ui/Pagination/Pagination.scss

@@ -0,0 +1,6 @@
+@import './../../../scss/vars.scss';
+
+.pagination {
+  display: flex;
+  gap: 6px;
+}

packages/client/src/components/ui/Pagination/Pagination.tsx

@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom'
+import { Button } from '../Button/Button'
+import './Pagination.scss'
+
+interface PaginationProps {
+  total: number
+  className?: string
+}
+
+export const Pagination = (props: PaginationProps) => {
+  const { total, className = '' } = props
+
+  const navigate = useNavigate()
+
+  const getClassName = (index: number) => {
+    // TODO: Реализовать эту логику основываясь на query в URL`е.
+    // Какая страница активна, такая кнопка и подсвечивается.
+    return `pagination__item compact-button${
+      index !== 0 ? ' compact-button_white' : ''
+    }`
+  }
+
+  return (
+    <div className={`pagination${className ? ` ${className}` : ''}`}>
+      {Array.from({ length: total }).map((_, index) => {
+        return (
+          <Button
+            key={index}
+            className={getClassName(index)}
+            onClick={() => navigate(`/forum/${index}`)}
+            text={(++index).toString()}
+            useFixWidth={false}></Button>
+        )
+      })}
+      <Button
+        className="compact-button compact-button_white"
+        onClick={() => navigate('/forum')}
+        text="Вперед"
+        useFixWidth={false}></Button>
+    </div>
+  )
+}

packages/client/src/layouts/PrivateLayout/PrivateLayout.tsx

@@ -1,11 +1,11 @@
-import './PrivateLayout.scss'
 import { Header } from '@/components/common/Header/Header'
-import { Outlet, useNavigate } from 'react-router-dom'
-import { useSelector } from 'react-redux'
 import { RootState, useAppDispatch } from '@/store'
 import { actions, getUser, UserType } from '@/store/reducers/auth-reducer'
 import { useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { Outlet, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
+import './PrivateLayout.scss'
 
 export default function PrivateLayout() {
   const user = useSelector<RootState, UserType>(state => state.authReducer.user)

packages/client/src/pages/CreateThread/CreateThread.scss

@@ -0,0 +1,51 @@
+@import './../../scss/vars.scss';
+
+@mixin input() {
+  background-color: $c_black;
+  border-radius: 12px;
+  border: 2px solid $c_input-default-border;
+  color: $c_white;
+  padding: 12px 16px;
+
+  &::placeholder {
+    color: $c_input-default-placeholder;
+  }
+}
+
+.create-thread-page {
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    right: 0;
+    bottom: 0;
+    width: 360px;
+    height: 165px;
+    background-image: url('@/assets/images/destroyed-tanks.png');
+  }
+
+  margin-top: 100px;
+
+  .thread-name {
+    width: 50%;
+    text-align: start;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    &__textarea {
+      @include input();
+
+      max-width: 100%;
+      min-width: 300px;
+      min-height: 130px;
+    }
+
+    &__submit {
+      align-self: flex-start;
+    }
+  }
+}