more-tech4-magnum-opus/frontend
1
0
Fork 0
mirror of https://github.com/more-tech4-magnum-opus/frontend.git synced 2024-11-24 09:33:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3 from more-tech4-magnum-opus/clans-and-user-comp

Browse Source 
Clans and user comp
This commit is contained in:
Ilia vasilenko 2022-10-09 09:11:48 +03:00 committed by GitHub
commit 3b2f188900
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 944 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/Game Board.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 665 KiB

BIN
public/blue-team.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
public/blueteamback.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 92 KiB

BIN
public/blueteambigboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 206 KiB

BIN
public/clan-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/clanwarlogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
public/redteam.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
public/redteambigboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
public/redteamboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

290
src/components/game/index.tsx Normal file
View 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
View 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)
}

3
src/components/userPreview/index.tsx
View File

@ -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">

12
src/index.tsx
View File

@ -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/clan' element={<Clan />} />
<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>
)

69
src/user/clan/index.tsx
View File

@ -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
View 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
View 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
View 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
View 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
View 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
View 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
View File

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