From b60dfdfb425357d9246e2f76b99364da634da205 Mon Sep 17 00:00:00 2001
From: NeonXP <i@neonxp.ru>
Date: Sun, 21 Jan 2024 01:46:45 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=84=D1=80=D0=BE=D0=BD=D1=82=D0=B5=D0=BD=D0=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.jsx               |  7 +++-
 frontend/src/assets/styles.css     |  5 ++-
 frontend/src/components/Layout.jsx | 63 +++++++-----------------------
 frontend/src/pages/Quests.jsx      | 29 ++++++++++----
 frontend/src/pages/User.jsx        | 34 ++++++++++++++++
 5 files changed, 78 insertions(+), 60 deletions(-)
 create mode 100644 frontend/src/pages/User.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a94c4ce..230cdba 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,16 +1,18 @@
 import { Navigate, Route, RouterProvider, createBrowserRouter, createRoutesFromElements, useLocation, useRouteLoaderData } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
+import { UserProvider } from './store/user'
+import { ajax } from './utils/fetch'
+
 import Layout from './components/Layout'
 
 import Index from './pages/Index'
 import Login from './pages/Login'
 import Register from './pages/Register'
 import NoMatch from './pages/NoMatch'
-import { UserProvider } from './store/user'
-import { ajax } from './utils/fetch'
 import Engine from './pages/Engine'
 import Quests from './pages/Quests'
+import User from './pages/User'
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -30,6 +32,7 @@ const router = createBrowserRouter(
         element={<Auth><Quests /></Auth>}
         loader={() => ajax('/api/games').catch(x => { console.log(x); return null })}
       />
+      <Route path="me" element={<User />} />
       <Route path="login" element={<Login />} />
       <Route path="register" element={<Register />} />
       <Route
diff --git a/frontend/src/assets/styles.css b/frontend/src/assets/styles.css
index a9862f4..21e7108 100644
--- a/frontend/src/assets/styles.css
+++ b/frontend/src/assets/styles.css
@@ -3,10 +3,11 @@
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     height: 40px;
-    width: 85px;
+    width: 135px;
     background-image: url("./logo_small.png");
-    background-size: 100%;
+    background-size: cover;
     display: inline-block;
+    margin-right: 50px;
 }
 
 th.thin {
diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 478ddbb..8d88c8a 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -1,9 +1,9 @@
+import { useEffect } from 'react'
 import { Link, Outlet, useLoaderData, useLocation, useNavigate } from 'react-router-dom'
 import { UserProvider } from '../store/user'
-import { useEffect } from 'react'
 import { ajax } from '../utils/fetch'
-import { Layout, Menu, Progress, Space } from 'antd'
-import { FireTwoTone, StarTwoTone } from '@ant-design/icons'
+import { Layout, Menu } from 'antd'
+import { MenuOutlined } from '@ant-design/icons'
 import { Content, Header } from 'antd/es/layout/layout'
 
 const AppLayout = () => {
@@ -34,65 +34,32 @@ const AppLayout = () => {
         link: '/quests'
       },
       {
-        key: 'user',
-        label: user.username,
-        children: [
-          {
-            type: 'group',
-            key: 'exp',
-            label: (
-              <Space>
-                <Space title={`${user.level} уровень`}><StarTwoTone />{user.level} уровень</Space>
-                <Space title={`${user.experience} опыта`}><FireTwoTone />{user.experience} опыт</Space>
-              </Space>)
-          },
-          {
-            type: 'group',
-            key: 'progress',
-            label: <Progress
-              value={user.experience}
-              percent={((user.experience - user.expToCurrentLevel) / (user.expToNextLevel - user.expToCurrentLevel) * 100)}
-              size="small"
-              showInfo={false}
-            />
-          },
-          {
-            type: 'group',
-            key: 'nextLevel',
-            label: `Следующий уровень - ${user.expToNextLevel} очков опыта`
-          },
-          {
-            key: 'logout',
-            label: 'Выход',
-            handler: logout
-          }
-        ]
+        key: 'me',
+        label: `${user.username} [${user.level}]`,
+        link: '/me'
+      },
+      {
+        key: 'logout',
+        label: 'Выход',
+        onClick: logout
       }
     ]
   }
   const menuHandler = (x) => {
-    const item = getItemByPath(items, x.keyPath)
+    const item = items.find(y => y.key === x.key)
     if (item.link) { navigate(item.link) }
-    if (item.handler) { item.handler() }
-  }
-
-  const getItemByPath = (items, path) => {
-    const x = path.pop()
-    const item = items.find(y => y.key === x)
-    if (path.length === 0) {
-      return item
-    }
-    return getItemByPath(item.children, path)
   }
 
   return (<Layout>
-    <Header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+    <Header style={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>
       <Link to="/" className="navbar-brand"></Link>
       <Menu
         mode="horizontal"
         items={items}
         selectedKeys={location.pathname.replace('/', '')}
         onClick={menuHandler}
+        overflowedIndicator={<MenuOutlined />}
+        style={{ width: '100%' }}
       />
     </Header>
     <Content style={{ padding: '0 24px' }}>
diff --git a/frontend/src/pages/Quests.jsx b/frontend/src/pages/Quests.jsx
index 207c844..8c5e509 100644
--- a/frontend/src/pages/Quests.jsx
+++ b/frontend/src/pages/Quests.jsx
@@ -2,10 +2,10 @@ import { useLoaderData, useNavigate } from 'react-router-dom'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import moment from 'moment/min/moment-with-locales'
-import { Avatar, Typography, Button, Space, Card } from 'antd'
+import { Avatar, Typography, Button, Space, Card, Popover } from 'antd'
 import { UserProvider } from '../store/user'
 
-const { Title } = Typography
+const { Title, Paragraph } = Typography
 
 const Quests = () => {
   moment.locale('ru')
@@ -22,10 +22,25 @@ const Quests = () => {
 
 const renderItem = (user, navigate, item) => {
   const actions = [
-        <Space key='exp' title={`${item.points} опыта за выполнение квеста`}>Оп: {item.points}</Space>,
-        <Space key='taskCount' title={`${item.taskCount} уровней в квесте`}>Ур: {item.taskCount}</Space>,
+        <Popover
+          key='type'
+          content={<Paragraph>Квесты бывают двух типов: <ul><li><b>Виртуальные</b> - проходимые из дома</li><li><b>Полевые</b> - проходимые в городе Казани</li></ul></Paragraph>}
+          title="Тип квеста">
+          <Space>
+            {item.type === 'city' ? 'Полевой' : 'Виртуальный'}
+          </Space>
+        </Popover>,
+        <Popover
+          key='exp'
+          content={<Paragraph>Вы получите {item.points} очков опыта за выполнение этого квеста.<br />Чем сложнее квест - тем больше за него опыта!</Paragraph>}
+          title='Опыт за выполнения квеста'>
+          <Space>{item.points} ОО</Space>
+        </Popover>,
+        <Popover key='taskCount' content={`Этот квест состоит из ${item.taskCount} уровней`} title='Количество уровней в квесте'>
+          <Space>{item.taskCount} ур</Space>
+        </Popover>,
         <>{moment(item.createdAt).fromNow()}</>,
-        <>Автор(ы) {item.authors.map(a => a.username)}</>
+        <>Автор {item.authors.map(a => a.username)}</>
   ]
 
   let questAction = (<span>Необходимо войти</span>)
@@ -41,11 +56,9 @@ const renderItem = (user, navigate, item) => {
         <Card
             key={item.id}
             actions={actions}
-            title={item.title}
+            title={<><Avatar src={`/api/file/${item.icon}`} />&nbsp;{item.title}</>}
             style={{ marginBottom: 8 }}
         >
-
-            <Avatar src={`/api/file/${item.icon}`} style={{ float: 'left', margin: '4px' }} />
             <Markdown
                 remarkPlugins={[remarkGfm]}>
                 {item.description}
diff --git a/frontend/src/pages/User.jsx b/frontend/src/pages/User.jsx
new file mode 100644
index 0000000..f7852f9
--- /dev/null
+++ b/frontend/src/pages/User.jsx
@@ -0,0 +1,34 @@
+import { Avatar, Popover, Progress, Space, Typography } from 'antd'
+import { UserProvider } from '../store/user'
+import Markdown from 'react-markdown'
+
+const { Paragraph } = Typography
+
+const User = () => {
+  const { user } = UserProvider.useContainer()
+  if (user == null) {
+    return (<Space>Загрузка...</Space>)
+  }
+
+  return (<>
+        <h1>{user.username}</h1>
+          <Paragraph>Уровень: {user.level} ур</Paragraph>
+          <Paragraph>Очков опыта: {user.experience} ОО</Paragraph>
+          <Paragraph>Следующий уровень: {user.expToNextLevel} ОО</Paragraph>
+          <Progress
+              value={user.experience}
+              percent={((user.experience - user.expToCurrentLevel) / (user.expToNextLevel - user.expToCurrentLevel) * 100)}
+              size="small"
+              showInfo={false}
+            />
+          {user.games.map(item => <Popover
+            key={item.id}
+            title={item.title}
+            content={<Markdown>{item.description}</Markdown>}
+          >
+            <Avatar size={64} style={{ marginRight: 4, marginBottom: 4 }} key={item.id} src={`/api/file/${item.icon}`} />
+          </Popover>)}
+    </>)
+}
+
+export default User