Merge branch 'main' into hr

src/components/game/index.tsx

@@ -0,0 +1,290 @@
+import { message } from 'antd';
+import react from 'react'
+import './style.css'
+
+interface IPostion{
+    x: number;
+    y: number;
+}
+
+const myCard = <div 
+    style={
+        {
+            backgroundColor: "#096DD9", 
+            width: "30px", 
+            height: "30px", 
+            borderRadius: "100px",
+            border: "3px solid white"
+        }}></div>
+
+const teammeitCard = <div 
+style={
+    {
+        backgroundColor: "#096DD9", 
+        width: "30px", 
+        height: "30px", 
+        borderRadius: "100px",
+        border: "3px solid white",
+        opacity: '0.6'
+    }}></div>
+const enemy = <div 
+style={
+    {
+        backgroundColor: "#D63E3E", 
+        width: "30px", 
+        height: "30px", 
+        borderRadius: "100px",
+        border: "3px solid white"
+    }}></div>
+
+
+const hunt = <div 
+style={
+    {
+        backgroundColor: "#096DD9", 
+        width: "40px", 
+        height: "40px", 
+        border: "3px solid white"
+    }}></div>
+
+
+const hint = <div
+        style={
+            {
+                'backgroundColor': '#096DD9',
+                'opacity': '0.4',
+                width: "30px", 
+                height: "30px", 
+                borderRadius: "100px",
+            }
+        }
+></div>
+
+function choose(choices: any[]) {
+    var index = Math.floor(Math.random() * choices.length);
+    return choices[index];
+}
+
+function checkPosition(
+    position: IPostion, 
+    playerCords: IPostion,
+    enemiesCords: IPostion[],
+    teammeitCords: IPostion[] 
+) {
+    if (position.x < 0 || position.x > 10) {
+        return false
+    }
+    if (position.y < 0 || position.y > 10) {
+        return false
+    }
+    if (position.x == playerCords.x && position.y == playerCords.y) {
+        return false
+    }
+    for (var i = 0; i < enemiesCords.length; ++i) {
+        if (position.x == enemiesCords[i].x && position.y == enemiesCords[i].y){
+            return false
+        }
+    }
+    for (var i = 0; i < teammeitCords.length; ++i) {
+        if (position.x == teammeitCords[i].x && position.y == teammeitCords[i].y){
+            return false
+        }
+    }
+    return true;
+}
+
+const hunt_position = {x: 6, y: 9}
+
+function getAvailableMoveCords(
+    playerCords: IPostion, 
+    enemiesCords: IPostion[], 
+    teammeitCords: IPostion[], 
+    myCords: IPostion) {
+        var hintPositions:IPostion[] = [];
+        if (checkPosition(
+            {x: myCords.x, y: myCords.y+1},
+            playerCords,
+            enemiesCords,
+            teammeitCords
+        )){
+            hintPositions.push({x: myCords.x, y: myCords.y+1})
+        }
+        if (checkPosition(
+            {x: myCords.x+1, y: myCords.y},
+            playerCords,
+            enemiesCords,
+            teammeitCords
+        )){
+            hintPositions.push({x: myCords.x+1, y: myCords.y})
+        }
+        if (checkPosition(
+            {x: myCords.x, y: myCords.y-1},
+            playerCords,
+            enemiesCords,
+            teammeitCords
+        )){
+            hintPositions.push({x: myCords.x, y: myCords.y-1})
+        }
+        if (checkPosition(
+            {x: myCords.x-1, y: myCords.y},
+            playerCords,
+            enemiesCords,
+            teammeitCords
+        )){
+            hintPositions.push({x: myCords.x-1, y: myCords.y})
+        }
+        return hintPositions
+}
+
+export const Game: react.FC = () => {
+    const [huntVisible, setHuntVisible] = react.useState<boolean>(false);
+    const [position, setPosition] = react.useState<IPostion>({x: 2, y: 4});
+    const [hints, hintsPosition] = react.useState<IPostion[]>([]);
+    const [visibleHints, setVisibleHints] = react.useState<boolean>(false);
+    const [mousePosition, setMousePosition] = react.useState<IPostion>(
+        {x: 0, y: 0},
+        
+    );
+    const [buttonDown, setButtonDown] = react.useState<boolean>(false);
+    const [enemies, setEnemiesPos] = react.useState<IPostion[]>([{x: 4, y: 2},
+        {x: 3, y: 6},
+        {x: 5, y: 6},
+        {x: 9, y: 1},
+        {x: 6, y: 8}]);
+    const [teammeits, setTeammeits] = react.useState<IPostion[]>([
+        {x: 8, y: 2},
+        {x: 0, y: 3},
+        {x: 4, y: 1},
+        {x: 1, y: 9}
+    ])
+    if ((position.x == hunt_position.x && position.y == hunt_position.y) && huntVisible == false) {
+        setHuntVisible(true);
+        message.success("Вы нашли клетку!!")
+    }
+    if (!hints.length) {
+        hintsPosition(getAvailableMoveCords(
+            position,
+            enemies,
+            teammeits,
+            position
+        ));
+        var clonedEnemies = enemies;
+        var clonedEnemies = clonedEnemies.map((e) => choose(getAvailableMoveCords(
+            position,
+            enemies,
+            teammeits,
+            e
+        )) as IPostion);
+        var clonedTeammeits = teammeits.map((e) => choose(getAvailableMoveCords(
+            position,
+            enemies,
+            teammeits,
+            e
+        )) as IPostion);
+        setTeammeits(clonedTeammeits);
+        setEnemiesPos(clonedEnemies);
+        clonedEnemies.map((e) => {
+            if (e.x == hunt_position.x && e.y == hunt_position.y) {
+                setHuntVisible(true);
+                message.error("Соперники нашли клетку!!")
+            }
+        })
+        clonedTeammeits.map((e) => {
+            if (e.x == hunt_position.x && e.y == hunt_position.y) {
+                setHuntVisible(true);
+                message.info("Тиммейты нашли клетку!!")
+            }
+        })
+    }
+    window.onmousemove = (event) => {
+        setMousePosition({x: event.clientX, y: event.clientY})
+    }
+    window.onmouseup = () => {
+        setVisibleHints(false);
+        hintsPosition([]);
+    }
+    window.onmousedown = () => {
+        setButtonDown(true);
+    }
+    window.onmouseup = () => {
+        setButtonDown(false);
+    }
+    const yd = 51.7;
+    const xd = 51.1;
+    return <> <div className="map-map" style={{backgroundImage: 'url("/Game Board.png")'}}>
+        <div className="map-positioned">
+        {   huntVisible ?
+                <div style={{
+                    transform: `translateX(${hunt_position.x*xd}px) translateY(${hunt_position.y*yd}px)`,
+                    position: 'absolute'
+                }}>
+                    {hunt}
+                </div> : <></>
+            }
+            {
+                !visibleHints ? 
+                <div tabIndex={-1} className="" style={{
+                    transform: 
+                    !visibleHints ?
+                    `translateX(${position.x*xd}px) translateY(${position.y*yd}px)` :
+                    `translateX(${0}px) translateY(${0}px)`,
+                    position: 'fixed'
+                }} onMouseDown={() => {
+                    setVisibleHints(true);
+                }} onMouseUp={() => {
+                    setVisibleHints(false);
+                }}>{myCard}</div> : <></>
+            }
+            
+            {
+                visibleHints ?
+                hints.map((e) => {
+                    return <div tabIndex={-1}
+                    style={{
+                        transform: `translateX(${e.x*xd}px) translateY(${e.y*yd}px)`,
+                        position: 'absolute'
+                    }}
+                    onMouseOver={(event) => {
+                        if (!buttonDown){
+                            setVisibleHints(false);
+                            hintsPosition([]);
+                            setPosition(e);
+                        }
+                    }}
+                    >{hint}</div>
+                }) : <div></div>
+            }
+            {
+                enemies.map((e) => {
+                    return <div style={{
+                        transform: `translateX(${e.x*xd}px) translateY(${e.y*yd}px)`,
+                        position: 'absolute'
+                    }}>
+                        {enemy}
+                    </div>
+                })
+            }
+            {
+                teammeits.map((e) => {
+                    return <div style={{
+                        transform: `translateX(${e.x*xd}px) translateY(${e.y*yd}px)`,
+                        position: 'absolute'
+                    }}>
+                        {teammeitCard}
+                    </div>
+                })
+            }
+
+        </div>
+    </div>
+    {
+        visibleHints ?
+        <div style={{
+            position: 'absolute',
+            left: mousePosition.x,
+            top: mousePosition.y,
+        }}>{myCard}</div> : 
+        <></>
+    } 
+    </>
+}

src/components/game/style.css

@@ -0,0 +1,26 @@
+
+.map-map{
+    width: 751px;
+    height: 724px;
+}
+
+.map-positioned{
+    transform: translateX(101px) translateY(91px);
+}
+.map-first{
+    position: absolute;
+    background-color: white;
+    width: 34px;
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.pos1{
+    position: absolute;
+    transform: translateX(52px)
+}
+.pos2{
+    position: absolute;
+    transform: translateY(53px)
+}

src/components/userPreview/index.tsx

@@ -13,10 +13,11 @@ interface IUserPreview{
     tags: react.ReactNode[];
     description: string;
     logo_url: string;
+    className?: string;
 }
 
 export const UserPreview: react.FC<IUserPreview> = (props) => {
-    return <div className="self-info">
+    return <div className={"self-info " + props.className}>
     <img src={props.logo_url} alt="" className="self-img" />
     <div className="information">
         <div className="stats">

src/index.tsx

@@ -29,6 +29,10 @@ import { AddEvent } from './hr/addEvent';
 import { RegUsers } from './hr/regUsers';
 import { TransactionHistory } from './hr/transactionHistory';
 import { Transaction } from './Transaction';
+import { ClanWar } from './user/clanWar';
+import { Leaderboard } from './user/leaderboard';
+import { Marketplace } from './user/marketplace';
+import { TransactionHistory } from './user/transaction_history';
 
 
 const container = document.getElementById('root')!;
@@ -50,11 +54,17 @@ const router = createBrowserRouter(
           <Route path="hr/addEvent" element={<Provider store={hrStore}><AddEvent></AddEvent></Provider>}></Route>
           <Route path="/hr/events/reg/:name" element={<Provider store={hrStore}><RegUsers></RegUsers></Provider>}></Route>
           <Route path="/hr/transaction" element={<Provider store={hrStore}><TransactionHistory></TransactionHistory></Provider>}></Route>
-
           <Route path="user/lk/" element={<UserLk />} />
           <Route path='user/clan' element={<Clan />} /> 
 
           <Route path="transaction" element={<Transaction></Transaction>}></Route>
+          <Route path="hr"></Route>
+          <Route path="user/events/" element={<UserLk />} />
+          <Route path='user/clan' element={<Clan />} />
+          <Route path='user/clan-war' element={<ClanWar />} />
+          <Route path='user/leaderboard' element={<Leaderboard />} />
+          <Route path='user/marketplace' element={<Marketplace />} />
+          <Route path='user/transaction-history' element={<TransactionHistory />} />
     </Route>
           
   )

src/user/clan/index.tsx

@@ -1,8 +1,77 @@
+import { Tag } from 'antd';
 import react from 'react'
+import { Button } from '../../components/button';
+import { UserPreview } from '../../components/userPreview';
 import header from '../header'
 
+import './style.css';
+
 export const Clan: react.FC = () => {
     return <div>
         {header}
+        <div className="centered">
+            <div className="content-clans">
+                <div className="clan-content">
+                    <div className="clan-header">
+                        <img src="/clan-logo.png" alt="" />
+                        <div className="clan-info">
+                            <div className="clan-stats">
+                                <div className="clan-number">
+                                    Место клана 1 / 45
+                                </div>
+                                <div className="clan-score">
+                                    Score клана
+                                    <img src="/Respect.svg" alt="" />
+                                    400
+                                </div>
+                            </div>
+                            <div className="clan-name">
+                                Skull & Bones
+                            </div>
+                            <div className="tg-chat">
+                                @Tg_chat
+                            </div>
+                        </div>
+                    </div>
+                    <div className="clan-parts">
+                        <div className="clan-parts__content">
+                            <div className="clan-parts__header">
+                                <Button 
+                                    disabled={true} 
+                                    className={''}
+                                    children={<span>Участники клана Skull & Bones </span>} 
+                                />
+                            </div>
+                            <UserPreview 
+                                level={7}
+                                username={"CockMasturbator"}
+                                score={"10000 / 30000"}
+                                rubles={'1000'}
+                                fio={"Cock masturbator 3000"}
+                                id={69}
+                                tg={"CockMast"}
+                                tags={[<Tag color={"gold"}>Programmer</Tag>]}
+                                logo_url={"/logo_example.png"}
+                                description={"description"}
+                                className={'no-padding'}
+                            />
+                            <UserPreview 
+                                level={7}
+                                username={"CockMasturbator"}
+                                score={"10000 / 30000"}
+                                rubles={'1000'}
+                                fio={"Cock masturbator 3000"}
+                                id={69}
+                                tg={"CockMast"}
+                                tags={[<Tag color={"gold"}>Programmer</Tag>]}
+                                logo_url={"/logo_example.png"}
+                                description={"description"}
+                                className={'no-padding'}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 }

src/user/clan/style.css

@@ -0,0 +1,73 @@
+.centered{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.content-clans{
+    margin-top: 100px;
+}
+.clan-content{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 900px;
+}
+.clan-header{
+    display: flex;
+    background-color: #262626;
+    padding: 20px 100px;
+    border-radius: 16px;
+    gap: 10px;
+
+}
+
+.clan-header>img{
+    border-radius: 16px;
+}
+
+.clan-stats{
+    display: flex;
+    gap: 20px;
+    font-weight: bold;
+    color: white;
+}
+
+.clan-number{
+    border: 1px solid #1890FF;
+    padding: 5px 25px;
+    border-radius: 16px;
+}
+.clan-score{
+    border: 1px solid #8637E9;
+    padding: 5px 25px;
+    display: flex;
+    gap: 5px;
+    border-radius: 16px;
+}
+
+.clan-name{
+    font-size: 18px;
+    font-weight: bold;
+    color: white;
+}
+.tg-chat{
+    font-weight: 400;
+    color: white;
+}
+.clan-parts{
+    display: flex;
+    background-color: white;
+    border-radius: 16px;
+}
+.clan-parts__content{
+    margin: 20px 100px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.clan-parts__header{
+    margin-bottom: 20px;
+}
+.no-padding{
+    padding: 0!important;
+}

src/user/clanWar/index.tsx

@@ -0,0 +1,224 @@
+import react from 'react'
+import { Game } from '../../components/game'
+import header from '../header'
+
+import './style.css'
+
+export const ClanWar: react.FC = () => {
+    return <div>
+            {header}
+            <div className="centered">
+                <div className="clanwar-content">
+                    <img src="/clanwarlogo.png" alt="" style={{transform: 'scale(0.7)'}} />
+                    <div className="map">
+                    <div className="blueteam-pos">
+                        <div className="blueteam">
+                            <div className="blueteam-info" style={{backgroundImage: 'url(/blueteamback.png)'}}>
+                                <div className="positioned">
+                                    <div className="center-img">
+                                        <img src="/clan-logo.png" alt="" height={116}/>
+                                    </div>
+                                    <div className="clanwar-info">
+                                        <div className="clanwar-name">Skull & Bones</div>
+                                        <div className="clanwar-number">Место клана: 1 / 45</div>
+                                        <div className="clanwar-score">Score клана:
+                                            <img src="/Respect.svg" alt="" />
+                                         4000</div>
+                                    </div>
+                            </div>
+                            <div className="blueteamteam" style={{backgroundImage: 'url(/blueteambigboard.png)'}}>
+                                <div className="bigboardpos">
+                                    <div className="title">Твоя команда</div>
+                                    <div className="parts">
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        
+                        </div>    
+                    </div>
+                        </div>
+
+                        <div className="redteam-pos">
+                        <div className="blueteam">
+                            <div className="blueteam-info" style={{backgroundImage: 'url(/redteamboard.png)'}}>
+                                <div className="positioned">
+                                    <div className="center-img">
+                                        <img src="/redteam.png" alt="" height={116}/>
+                                    </div>
+                                    <div className="clanwar-info">
+                                        <div className="clanwar-name">Skull & Bones</div>
+                                        <div className="clanwar-number">Место клана: 1 / 45</div>
+                                        <div className="clanwar-score">Score клана:
+                                            <img src="/Respect.svg" alt="" />
+                                         4000</div>
+                                    </div>
+                            </div>
+                            <div className="blueteamteam" style={{backgroundImage: 'url(/redteambigboard.png)'}}>
+                                <div className="bigboardpos">
+                                    <div className="title title-red">Команда противников</div>
+                                    <div className="parts">
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                        <div className="part">
+                                            <div className="ava">
+                                                <img src="/blue-team.png" alt="" />
+                                            </div>
+                                            <div className="war-lvl">
+                                                Lvl. 8
+                                            </div>
+                                            <div className="war-fio">
+                                                Савин Максим
+                                            </div>
+                                            <div className="war-f">
+                                                <img src="/Respect.svg" alt="" />
+                                                1300
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                        
+                        </div>    
+                    </div>
+                        </div>
+                    </div>
+                    <Game></Game>
+            </div>
+        </div>
+    </div>
+}

src/user/clanWar/style.css

@@ -0,0 +1,137 @@
+.clanwar-content{
+    margin-top: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+.blueteam-info{
+    width: 419px;
+    height: 230px;
+}
+.center-img{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 116px;
+    height: 116px;
+    overflow: hidden;
+    border: 3px solid white;
+    border-radius: 16px;
+}
+.positioned{
+    transform: translateX(50px) translateY(50px);
+    display: flex;
+    gap: 10px;
+}
+.clanwar-name{
+    font-weight: bold;
+    color: white;
+    font-size: 18px;
+}
+
+.clanwar-number{
+    background: linear-gradient(85.91deg, #096DD9 0%, #40A9FF 100%);
+    border: 1px solid #1890FF;
+    border-radius: 38px;
+    padding: 5px 16px;
+    font-weight: 700;
+font-size: 16px;
+line-height: 24px;
+/* identical to box height, or 150% */
+
+
+/* Character / Primary(inverse) */
+
+color: #FFFFFF;
+}
+.clanwar-score{
+    border: 1px solid #8637E9;
+    border-radius: 38px;
+    padding: 5px 16px;
+    font-family: 'Roboto';
+font-style: normal;
+font-weight: 700;
+font-size: 16px;
+line-height: 24px;
+/* identical to box height, or 150% */
+
+
+/* Character / Primary(inverse) */
+
+color: #FFFFFF;
+
+ display: flex;
+ gap: 5px;
+}
+.clanwar-info{
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.blueteamteam{
+    width: 471px;
+    height: 479px;
+    transform: translateY(110px) translateX(-25px);
+}
+
+.bigboardpos{
+    transform: translateX(50px) translateY(35px);
+}
+.title{
+    display: flex;
+    width: 350px;
+    transform: translateX(10px) translateY(20px);
+    padding: 5px 16px;
+    border-radius: 24px;
+    border: 1px solid white;
+    color: white;
+    font-weight: bold;
+    font-size: 16px;
+    background: linear-gradient(85.91deg, #096DD9 0%, #40A9FF 100%);
+}
+
+.ava{
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 35px;
+    height: 35px;
+    border-radius: 1000px;
+    border: 3px solid white;
+}
+.parts{
+    transform: translateY(30px) translateX(20px);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.part{
+    
+    display: flex;
+    width: 350px;
+    gap: 15px;
+    align-items: center;
+    color: white;
+    font-weight: bold;
+
+}
+.war-fio{
+    text-decoration: underline;
+}
+.blueteam-pos{
+    position: absolute;
+    left: 0px;
+    transform: scale(0.8);
+}
+.redteam-pos{
+    position: absolute;
+    right: 0px;
+    transform: scale(0.8);
+    
+}
+.title-red{
+    background: linear-gradient(85.91deg, #D63E3E 0%, #F5489B 100%);
+}

src/user/leaderboard/index.tsx

@@ -0,0 +1,46 @@
+import react from 'react'
+import header from '../header'
+import './style.css';
+
+
+interface IClan{
+    place: number;
+}
+
+const ClanLeaderboard: react.FC<IClan> = (props) =>{
+    return <div>
+        <div className="clan-leader__content">
+            <img src="/clan-logo.png" alt="" className="clan-image" />
+            <div className="clan-info">
+                <div className="clan-place">
+                    Место клана: {props.place} / 45
+                </div>
+                <div className="clan-names">Skull & Bones</div>
+            </div>
+            <div className="container">
+                <div className="score-clan">
+                    Score клана:
+                    <img src="/Respect.svg" alt="" width={10} />
+                    {3600 - 200 * props.place}
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
+
+export const Leaderboard: react.FC = () => {
+    return <div>
+        {header}
+        <div className="centered">
+            <div className="leaderboard-container">
+                <div className="leaderboard-title">
+                    Лидерборд кланов
+                </div>
+                <ClanLeaderboard place={1} />
+                <ClanLeaderboard place={2} />
+                <ClanLeaderboard place={3} />
+            </div>
+        </div>
+    </div>
+}

src/user/leaderboard/style.css

@@ -0,0 +1,52 @@
+.centered{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.leaderboard-container{
+    margin-top: 100px;
+    width: 900px;
+    background-color: white;
+    padding: 20px 100px;
+    border-radius: 40px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.leaderboard-title{
+    font-weight: bold;
+    font-size: 16px;
+}
+
+.clan-leader__content{
+    display: flex;
+    gap: 20px;
+}
+
+.clan-image{
+    border-radius: 16px;
+}
+.clan-place{
+    background-color: #1890FF;
+    border-radius: 16px;
+    padding: 5px 16px;
+    color: white;
+    font-weight: bold;
+}
+
+.clan-names{
+    font-weight: bold;
+    font-size: 18px;
+}
+
+.score-clan{
+    display: flex;
+    gap: 5px;
+    justify-content: center;
+    align-items: center;
+    margin-left: 150px;
+    border: 1px solid #8637E9;
+    padding: 5px 16px;
+    border-radius: 30px;
+}

src/user/marketplace/index.tsx

@@ -0,0 +1,6 @@
+import react from 'react'
+import header from '../header'
+
+export const Marketplace: react.FC = () => {
+    return <div>{header}</div>
+}

src/user/transaction_history/index.tsx

@@ -0,0 +1,9 @@
+import react from 'react'
+import header from '../header'
+
+
+export const TransactionHistory: react.FC = () => {
+    return <div>
+        {header}
+    </div>
+}