mirror of
https://github.com/more-tech4-magnum-opus/frontend.git
synced 2024-11-24 09:33:43 +03:00
Merge pull request #3 from more-tech4-magnum-opus/clans-and-user-comp
Clans and user comp
This commit is contained in:
Ilia vasilenko
GitHub
commit
3b2f188900
BIN
public/Game Board.png
Normal file
BIN
public/Game Board.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 665 KiB |
BIN
public/blue-team.png
Normal file
BIN
public/blue-team.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
public/blueteamback.png
Normal file
BIN
public/blueteamback.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
BIN
public/blueteambigboard.png
Normal file
BIN
public/blueteambigboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
BIN
public/clan-logo.png
Normal file
BIN
public/clan-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/clanwarlogo.png
Normal file
BIN
public/clanwarlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
public/redteam.png
Normal file
BIN
public/redteam.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
public/redteambigboard.png
Normal file
BIN
public/redteambigboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
BIN
public/redteamboard.png
Normal file
BIN
public/redteamboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
290
src/components/game/index.tsx
Normal file
290
src/components/game/index.tsx
Normal file
|
|
@ -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> :
|
||||
<></>
|
||||
}
|
||||
</>
|
||||
}
|
||||
26
src/components/game/style.css
Normal file
26
src/components/game/style.css
Normal file
|
|
@ -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)
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@ import { AdminClans } from './admin/adminClans';
|
|||
import { AddUser } from './admin/addUser';
|
||||
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')!;
|
||||
|
|
@ -40,8 +44,12 @@ const router = createBrowserRouter(
|
|||
<Route path='admin/users/add' element={<Provider store={adminStore}><AddUser></AddUser></Provider>}></Route>
|
||||
|
||||
<Route path="hr"></Route>
|
||||
<Route path="user/lk/" element={<UserLk />} />
|
||||
<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>
|
||||
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
73
src/user/clan/style.css
Normal file
73
src/user/clan/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
224
src/user/clanWar/index.tsx
Normal file
224
src/user/clanWar/index.tsx
Normal file
|
|
@ -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>
|
||||
}
|
||||
137
src/user/clanWar/style.css
Normal file
137
src/user/clanWar/style.css
Normal file
|
|
@ -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%);
|
||||
}
|
||||
46
src/user/leaderboard/index.tsx
Normal file
46
src/user/leaderboard/index.tsx
Normal file
|
|
@ -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>
|
||||
}
|
||||
52
src/user/leaderboard/style.css
Normal file
52
src/user/leaderboard/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
6
src/user/marketplace/index.tsx
Normal file
6
src/user/marketplace/index.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import react from 'react'
|
||||
import header from '../header'
|
||||
|
||||
export const Marketplace: react.FC = () => {
|
||||
return <div>{header}</div>
|
||||
}
|
||||
9
src/user/transaction_history/index.tsx
Normal file
9
src/user/transaction_history/index.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import react from 'react'
|
||||
import header from '../header'
|
||||
|
||||
|
||||
export const TransactionHistory: react.FC = () => {
|
||||
return <div>
|
||||
{header}
|
||||
</div>
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user