add card & AttackOptions

src/App.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
+import { AttackOptions } from './сomponents/AttackOptions';
 import { ReclashButton } from './сomponents/ReclashButton';
 import { ReclashInput } from './сomponents/ReclashInput';
 
 function App() {
   return (
     <div className="App">
-      <ReclashInput  onChange={(a:string)=>null} placeholder='TON wallet'></ReclashInput>
-      <ReclashButton color="green" onClick={()=>null} ><div>LOGIN</div><img src="/tonLight.svg"></img></ReclashButton>
+      {/* <ReclashInput  onChange={(a:string)=>null} placeholder='TON wallet'></ReclashInput>
+      <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>
   );
 }

src/images/attackOptions.svg

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

src/images/icons/bar-1.svg

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

src/images/icons/bar.svg

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

src/screens/onBoarding/index.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import "./onBoarding.css"
 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 { ReclashButton } from "../../сomponents/ReclashButton";
 import { Link, useNavigate } from "react-router-dom";

src/screens/registration/index.tsx

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

src/сomponents/AttackOptions/attackOptions.css

@@ -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;
+}

src/сomponents/AttackOptions/index.tsx

@@ -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>
+    );
+}

src/сomponents/selectHeroCard/index.tsx

@@ -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>
+    )
+}