add card & AttackOptions

This commit is contained in:
Firesieht 2022-07-07 00:21:12 +03:00
parent be6845be30
commit 710add34c8
13 changed files with 114 additions and 5 deletions

View File

@ -1,12 +1,19 @@
import React from 'react'; import React from 'react';
import { AttackOptions } from './сomponents/AttackOptions';
import { ReclashButton } from './сomponents/ReclashButton'; import { ReclashButton } from './сomponents/ReclashButton';
import { ReclashInput } from './сomponents/ReclashInput'; import { ReclashInput } from './сomponents/ReclashInput';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<ReclashInput onChange={(a:string)=>null} placeholder='TON wallet'></ReclashInput> {/* <ReclashInput onChange={(a:string)=>null} placeholder='TON wallet'></ReclashInput>
<ReclashButton color="green" onClick={()=>null} ><div>LOGIN</div><img src="/tonLight.svg"></img></ReclashButton> <ReclashButton color="green" onClick={()=>null} ><div>LOGIN</div><img src="/tonLight.svg"></img></ReclashButton> */}
{/* <AttackOptions
health={{value:100, maxValue:160}}
power={{value:128, maxValue:160}}
energy={{value:74, maxValue:160}}
></AttackOptions> */}
</div> </div>
); );
} }

View File

@ -0,0 +1,3 @@
<svg width="220" height="56" viewBox="0 0 220 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.67191 44.842C5.01123 49.2391 8.65713 52.6463 13.0671 52.6876L199.058 54.4292C202.862 54.4648 206.226 51.9684 207.295 48.3173L217.744 12.6175C219.354 7.11782 215.171 1.63351 209.442 1.73105L10.6427 5.11563C5.74856 5.19896 1.93595 9.38808 2.31256 14.2684L4.67191 44.842Z" fill="#E09F3E" stroke="#453831" stroke-width="3"/>
</svg>

After

Width:  |  Height:  |  Size: 438 B

View File

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -0,0 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24Z" fill="#5FA8D9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 40.2C32.947 40.2 40.2 32.947 40.2 24C40.2 15.053 32.947 7.8 24 7.8C15.053 7.8 7.8 15.053 7.8 24C7.8 32.947 15.053 40.2 24 40.2ZM24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42Z" fill="#453831"/>
<path d="M20.8992 11.3999C20.8992 11.661 17.5498 23.3184 17.5498 23.3184H21.949L16.2002 36.5999L31.8002 18.2169H27.0507L31.8002 11.3999H20.8992Z" fill="#FCDDCE"/>
</svg>

After

Width:  |  Height:  |  Size: 719 B

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.2 KiB

5
src/images/icons/bar.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42 24C42 33.9411 33.9411 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C33.9411 6 42 14.0589 42 24Z" fill="#59AB45"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 40.2C32.947 40.2 40.2 32.947 40.2 24C40.2 15.053 32.947 7.8 24 7.8C15.053 7.8 7.8 15.053 7.8 24C7.8 32.947 15.053 40.2 24 40.2ZM24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C14.0589 6 6 14.0589 6 24C6 33.9411 14.0589 42 24 42Z" fill="#453831"/>
<path d="M33.9446 17.9201C33.4813 17.121 32.8461 16.4432 32.0883 15.9391C31.3305 15.4351 30.4706 15.1185 29.5752 15.0139C28.8541 14.9648 28.1302 15.046 27.4361 15.2539C26.2814 15.6249 25.2062 16.2215 24.2689 17.0114L23.9953 17.26L23.8958 17.1742C23.4057 16.7631 22.8845 16.3933 22.3371 16.0684C21.1616 15.3184 19.7953 14.951 18.4154 15.0139C18.0153 15.0467 17.6202 15.1272 17.2381 15.2539C16.3733 15.5709 15.5944 16.097 14.9663 16.7885C14.6286 17.1376 14.3207 17.5162 14.046 17.9201C10.8954 22.6094 17.2878 29.7076 21.0768 33.2739C21.5411 33.7197 21.9723 34.1312 22.3371 34.4226L23.075 35.0656C23.3366 35.2811 23.6609 35.3989 23.9953 35.3999C24.3304 35.4031 24.656 35.2848 24.9156 35.0656C27.4361 32.9396 37.8166 23.6381 33.9446 17.9201Z" fill="#FCDDCE"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -1,7 +1,7 @@
import React, {useState} from "react"; import React, {useState} from "react";
import "./onBoarding.css" import "./onBoarding.css"
import welcome from "../../images/welcome.svg" import welcome from "../../images/welcome.svg"
import tonLight from "../../images/tonLight.svg" import tonLight from "../../images/icons/tonLight.svg"
import { ReclashInput } from "../../сomponents/ReclashInput"; import { ReclashInput } from "../../сomponents/ReclashInput";
import { ReclashButton } from "../../сomponents/ReclashButton"; import { ReclashButton } from "../../сomponents/ReclashButton";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";

View File

@ -3,8 +3,8 @@ import { useNavigate } from "react-router";
import { ReclashButton } from "../../сomponents/ReclashButton"; import { ReclashButton } from "../../сomponents/ReclashButton";
import { ReclashInput } from "../../сomponents/ReclashInput"; import { ReclashInput } from "../../сomponents/ReclashInput";
import "./registration.css" import "./registration.css"
import tonLight from "../../images/tonLight.svg" import tonLight from "../../images/icons/tonLight.svg"
import backImg from "../../images/back.svg" import backImg from "../../images/icons/back.svg"
export const Registration:React.FC = () =>{ export const Registration:React.FC = () =>{
const [wallet, setWallet] = useState("") const [wallet, setWallet] = useState("")

View File

@ -0,0 +1,30 @@
.attackOptionsWrapper{
display: flex;
flex-direction: column;
gap:15px;
}
.attackCard{
font-family: 'Londrina Solid';
font-style: normal;
font-weight: 900;
font-size: 40px;
line-height: 47px;
color: #453831;
height: 55px;
width: 207px;
background-image: url("../../images/attackOptions.svg");
background-size:100%;
background-repeat: no-repeat;
display: flex;
flex-direction: row;
gap:10px;
align-items: center;
padding-left: 10px;
user-select: none;
transition: 0.3s;
cursor: pointer;
}
.attackCard:hover{
height: 60px;
width: 227px;
}

View File

@ -0,0 +1,36 @@
import React from "react";
import healthIcon from "../../images/icons/bar.svg"
import energyIcon from "../../images/icons/bar-1.svg"
import powerIcon from "../../images/icons/bar-2.svg"
import "./attackOptions.css"
interface AttackOptionsIE{
health:{value:number, maxValue:number}
energy:{value:number, maxValue:number}
power:{value:number, maxValue:number}
}
export const AttackOptions: React.FC<AttackOptionsIE> = (props) =>{
return(
<div className="attackOptionsWrapper">
<div className="attackCard">
<img src={healthIcon}></img>
<div>
{props.health.value + "/" + props.health.maxValue}
</div>
</div>
<div className="attackCard">
<img src={energyIcon}></img>
<div>
{props.energy.value + "/" + props.energy.maxValue}
</div>
</div>
<div className="attackCard">
<img src={powerIcon}></img>
<div>
{props.power.value + "/" + props.power.maxValue}
</div>
</div>
</div>
);
}

View File

@ -0,0 +1,18 @@
import React, { useState } from "react";
interface selectHeroCardIE{
health: number
energy:number
power:number
selected?:boolean
}
export const selectHeroCard:React.FC<selectHeroCardIE> = (props) =>{
const [select, setSelect] = useState(props.selected == undefined? false:props.selected)
return(
<div>
</div>
)
}