diff --git a/public/Game Board.png b/public/Game Board.png new file mode 100644 index 0000000..47acc25 Binary files /dev/null and b/public/Game Board.png differ diff --git a/public/blue-team.png b/public/blue-team.png new file mode 100644 index 0000000..b7c785c Binary files /dev/null and b/public/blue-team.png differ diff --git a/public/blueteamback.png b/public/blueteamback.png new file mode 100644 index 0000000..d8f9890 Binary files /dev/null and b/public/blueteamback.png differ diff --git a/public/blueteambigboard.png b/public/blueteambigboard.png new file mode 100644 index 0000000..9966875 Binary files /dev/null and b/public/blueteambigboard.png differ diff --git a/public/clan-logo.png b/public/clan-logo.png new file mode 100644 index 0000000..31f3ae2 Binary files /dev/null and b/public/clan-logo.png differ diff --git a/public/clanwarlogo.png b/public/clanwarlogo.png new file mode 100644 index 0000000..74d0c48 Binary files /dev/null and b/public/clanwarlogo.png differ diff --git a/public/redteam.png b/public/redteam.png new file mode 100644 index 0000000..187e4a4 Binary files /dev/null and b/public/redteam.png differ diff --git a/public/redteambigboard.png b/public/redteambigboard.png new file mode 100644 index 0000000..0eb953f Binary files /dev/null and b/public/redteambigboard.png differ diff --git a/public/redteamboard.png b/public/redteamboard.png new file mode 100644 index 0000000..37aa963 Binary files /dev/null and b/public/redteamboard.png differ diff --git a/src/components/game/index.tsx b/src/components/game/index.tsx new file mode 100644 index 0000000..74ff271 --- /dev/null +++ b/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 =
+ +const teammeitCard =
+const enemy =
+ + +const hunt =
+ + +const hint =
+ +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(false); + const [position, setPosition] = react.useState({x: 2, y: 4}); + const [hints, hintsPosition] = react.useState([]); + const [visibleHints, setVisibleHints] = react.useState(false); + const [mousePosition, setMousePosition] = react.useState( + {x: 0, y: 0}, + + ); + const [buttonDown, setButtonDown] = react.useState(false); + const [enemies, setEnemiesPos] = react.useState([{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([ + {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 <>
+
+ { huntVisible ? +
+ {hunt} +
: <> + } + { + !visibleHints ? +
{ + setVisibleHints(true); + }} onMouseUp={() => { + setVisibleHints(false); + }}>{myCard}
: <> + } + + { + visibleHints ? + hints.map((e) => { + return
{ + if (!buttonDown){ + setVisibleHints(false); + hintsPosition([]); + setPosition(e); + } + }} + >{hint}
+ }) :
+ } + { + enemies.map((e) => { + return
+ {enemy} +
+ }) + } + { + teammeits.map((e) => { + return
+ {teammeitCard} +
+ }) + } + +
+
+ { + visibleHints ? +
{myCard}
: + <> + } + +} \ No newline at end of file diff --git a/src/components/game/style.css b/src/components/game/style.css new file mode 100644 index 0000000..ab0af26 --- /dev/null +++ b/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) +} \ No newline at end of file diff --git a/src/components/userPreview/index.tsx b/src/components/userPreview/index.tsx index 9ce5a13..bfc3129 100644 --- a/src/components/userPreview/index.tsx +++ b/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 = (props) => { - return
+ return
diff --git a/src/index.tsx b/src/index.tsx index 5befa93..9d1ca7b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,6 +19,10 @@ import { } from "react-router-dom"; import { UserLk } from './user/lk'; import { Clan } from './user/clan'; +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')!; const root = createRoot(container); @@ -30,8 +34,12 @@ const router = createBrowserRouter( }> }> - } /> - } /> + } /> + } /> + } /> + } /> + } /> + } /> ) diff --git a/src/user/clan/index.tsx b/src/user/clan/index.tsx index 5b8de01..1362de9 100644 --- a/src/user/clan/index.tsx +++ b/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
{header} +
+
+
+
+ +
+
+
+ Место клана 1 / 45 +
+
+ Score клана + + 400 +
+
+
+ Skull & Bones +
+
+ @Tg_chat +
+
+
+
+
+
+
+ Programmer]} + logo_url={"/logo_example.png"} + description={"description"} + className={'no-padding'} + /> + Programmer]} + logo_url={"/logo_example.png"} + description={"description"} + className={'no-padding'} + /> +
+
+
+
+
} \ No newline at end of file diff --git a/src/user/clan/style.css b/src/user/clan/style.css new file mode 100644 index 0000000..4fe723a --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/user/clanWar/index.tsx b/src/user/clanWar/index.tsx new file mode 100644 index 0000000..0c0232e --- /dev/null +++ b/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
+ {header} +
+
+ +
+
+
+
+
+
+ +
+
+
Skull & Bones
+
Место клана: 1 / 45
+
Score клана: + + 4000
+
+
+
+
+
Твоя команда
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+
+ + +
+
+
+ +
+
+
+
+
+ +
+
+
Skull & Bones
+
Место клана: 1 / 45
+
Score клана: + + 4000
+
+
+
+
+
Команда противников
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+ +
+
+ Lvl. 8 +
+
+ Савин Максим +
+
+ + 1300 +
+
+
+
+
+ + +
+
+
+
+ +
+
+
+} \ No newline at end of file diff --git a/src/user/clanWar/style.css b/src/user/clanWar/style.css new file mode 100644 index 0000000..c2a60ab --- /dev/null +++ b/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%); +} diff --git a/src/user/leaderboard/index.tsx b/src/user/leaderboard/index.tsx new file mode 100644 index 0000000..d3d361d --- /dev/null +++ b/src/user/leaderboard/index.tsx @@ -0,0 +1,10 @@ +import react from 'react' +import header from '../header' + + +export const Leaderboard: react.FC = () => { + return
+ {header} + +
+} \ No newline at end of file diff --git a/src/user/marketplace/index.tsx b/src/user/marketplace/index.tsx new file mode 100644 index 0000000..d031443 --- /dev/null +++ b/src/user/marketplace/index.tsx @@ -0,0 +1,6 @@ +import react from 'react' +import header from '../header' + +export const Marketplace: react.FC = () => { + return
{header}
+} \ No newline at end of file diff --git a/src/user/transaction_history/index.tsx b/src/user/transaction_history/index.tsx new file mode 100644 index 0000000..083049f --- /dev/null +++ b/src/user/transaction_history/index.tsx @@ -0,0 +1,9 @@ +import react from 'react' +import header from '../header' + + +export const TransactionHistory: react.FC = () => { + return
+ {header} +
+} \ No newline at end of file