Skip to content

Commit d2f4723

Browse files
KcPeleKcPele
committed
changed image path
1 parent d9252c4 commit d2f4723

File tree

13 files changed

+157
-142
lines changed

13 files changed

+157
-142
lines changed

‎packages/react-app/public/index.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,12 @@
3838
siteWhite: "#9eacc7",
3939
},
4040
backgroundImage: {
41-
astral: "url('/src/assets/background/astral.jpg')",
42-
saiman: "url('/src/assets/background/saiman.jpg')",
43-
eoaalien: "url('/src/assets/background/eoaalien.jpg')",
44-
panight: "url('/src/assets/background/panight.jpg')",
45-
heroImg: "url('/src/assets/background/hero-img.jpg')",
46-
landing: "url('/src/assets/background/landing.jpg')",
41+
astral: "url('./assets/background/astral.jpg')",
42+
saiman: "url('./assets/background/saiman.jpg')",
43+
eoaalien: "url('./assets/background/eoaalien.jpg')",
44+
panight: "url('./assets/background/panight.jpg')",
45+
heroImg: "url('./assets/background/hero-img.jpg')",
46+
landing: "url('./assets/background/landing.jpg')",
4747
},
4848
fontFamily: {
4949
rajdhani: ["Rajdhani", "sans-serif"],

‎packages/react-app/src/assets/AlertIcon.jsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
1-
import React from 'react'
1+
import React from "react";
22

3-
import styles from '../styles';
3+
import styles from "../styles";
44

55
const AlertIcon = ({ type }) => {
66
return (
77
<svg
8-
aria-hidden="true"
9-
className={`${styles.alertIcon} ${styles[type]}`}
10-
fill="currentColor"
11-
viewBox="0 0 20 20"
12-
xmlns="http://www.w3.org/2000/svg"
13-
>
14-
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
15-
</svg>
8+
aria-hidden="true"
9+
className={`${styles.alertIcon} ${styles[type]}`}
10+
fill="currentColor"
11+
viewBox="0 0 20 20"
12+
xmlns="http://www.w3.org/2000/svg"
13+
>
14+
<path
15+
fillRule="evenodd"
16+
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
17+
clipRule="evenodd"
18+
/>
19+
</svg>
1620
);
17-
}
21+
};
1822

19-
export default AlertIcon
23+
export default AlertIcon;

‎packages/react-app/src/assets/index.js‎

Lines changed: 56 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
// backgrounds
2-
import saiman from './background/saiman.jpg';
3-
import astral from './background/astral.jpg';
4-
import eoaalien from './background/eoaalien.jpg';
5-
import panight from './background/panight.jpg';
6-
import heroImg from './background/hero-img.jpg';
2+
import saiman from "./background/saiman.jpg";
3+
import astral from "./background/astral.jpg";
4+
import eoaalien from "./background/eoaalien.jpg";
5+
import panight from "./background/panight.jpg";
6+
import heroImg from "./background/hero-img.jpg";
77

88
// cards
9-
import ace from './Ace.png';
10-
import bakezori from './Bakezori.png';
11-
import blackSolus from './Black_Solus.png';
12-
import calligrapher from './Calligrapher.png';
13-
import chakriAvatar from './Chakri_Avatar.png';
14-
import coalfist from './Coalfist.png';
15-
import desolator from './Desolator.png';
16-
import duskRigger from './Dusk_Rigger.png';
17-
import flamewreath from './Flamewreath.png';
18-
import furiosa from './Furiosa.png';
19-
import geomancer from './Geomancer.png';
20-
import goreHorn from './Gore_Horn.png';
21-
import heartseeker from './Heartseeker.png';
22-
import jadeMonk from './Jade_Monk.png';
23-
import kaidoExpert from './Kaido_Expert.png';
24-
import katara from './Katara.png';
25-
import kiBeholder from './Ki_Beholder.png';
26-
import kindling from './Kindling.png';
27-
import lanternFox from './Lantern_Fox.png';
28-
import mizuchi from './Mizuchi.png';
29-
import orizuru from './Orizuru.png';
30-
import scarletViper from './Scarlet_Viper.png';
31-
import stormKage from './Storm_Kage.png';
32-
import suzumebachi from './Suzumebachi.png';
33-
import tuskBoar from './Tusk_Boar.png';
34-
import twilightFox from './Twilight_Fox.png';
35-
import voidTalon from './Void_Talon.png';
36-
import whiplash from './Whiplash.png';
37-
import widowmaker from './Widowmaker.png';
38-
import xho from './Xho.png';
9+
import ace from "./Ace.png";
10+
import bakezori from "./Bakezori.png";
11+
import blackSolus from "./Black_Solus.png";
12+
import calligrapher from "./Calligrapher.png";
13+
import chakriAvatar from "./Chakri_Avatar.png";
14+
import coalfist from "./Coalfist.png";
15+
import desolator from "./Desolator.png";
16+
import duskRigger from "./Dusk_Rigger.png";
17+
import flamewreath from "./Flamewreath.png";
18+
import furiosa from "./Furiosa.png";
19+
import geomancer from "./Geomancer.png";
20+
import goreHorn from "./Gore_Horn.png";
21+
import heartseeker from "./Heartseeker.png";
22+
import jadeMonk from "./Jade_Monk.png";
23+
import kaidoExpert from "./Kaido_Expert.png";
24+
import katara from "./Katara.png";
25+
import kiBeholder from "./Ki_Beholder.png";
26+
import kindling from "./Kindling.png";
27+
import lanternFox from "./Lantern_Fox.png";
28+
import mizuchi from "./Mizuchi.png";
29+
import orizuru from "./Orizuru.png";
30+
import scarletViper from "./Scarlet_Viper.png";
31+
import stormKage from "./Storm_Kage.png";
32+
import suzumebachi from "./Suzumebachi.png";
33+
import tuskBoar from "./Tusk_Boar.png";
34+
import twilightFox from "./Twilight_Fox.png";
35+
import voidTalon from "./Void_Talon.png";
36+
import whiplash from "./Whiplash.png";
37+
import widowmaker from "./Widowmaker.png";
38+
import xho from "./Xho.png";
3939

4040
// logo
41-
import logo from './logo.svg';
41+
import logo from "./logo.svg";
4242

4343
// icon
44-
import attack from './attack.png';
45-
import defense from './defense.png';
46-
import alertIcon from './alertIcon.svg';
47-
import AlertIcon from './AlertIcon.jsx';
44+
import attack from "./attack.png";
45+
import defense from "./defense.png";
46+
import alertIcon from "./alertIcon.svg";
47+
import AlertIcon from "./AlertIcon.jsx";
4848

4949
// players
50-
import player01 from './player01.png';
51-
import player02 from './player02.png';
50+
import player01 from "./player01.png";
51+
import player02 from "./player02.png";
5252

5353
// sounds
54-
import attackSound from './sounds/attack.wav';
55-
import defenseSound from './sounds/defense.mp3';
56-
import explosion from './sounds/explosion.mp3';
54+
import attackSound from "./sounds/attack.wav";
55+
import defenseSound from "./sounds/defense.mp3";
56+
import explosion from "./sounds/explosion.mp3";
5757

5858
export const allCards = [
5959
ace,
@@ -94,7 +94,6 @@ export {
9494
eoaalien,
9595
panight,
9696
heroImg,
97-
9897
ace,
9998
bakezori,
10099
blackSolus,
@@ -125,34 +124,30 @@ export {
125124
whiplash,
126125
widowmaker,
127126
xho,
128-
129127
logo,
130-
131128
attack,
132129
defense,
133130
alertIcon,
134131
AlertIcon,
135-
136132
player01,
137133
player02,
138-
139134
attackSound,
140135
defenseSound,
141136
explosion,
142137
};
143138

144139
export const battlegrounds = [
145-
{ id: 'bg-saiman', image: saiman, name: 'Saiman' },
146-
{ id: 'bg-astral', image: astral, name: 'Astral' },
147-
{ id: 'bg-eoaalien', image: eoaalien, name: 'Eoaalien' },
148-
{ id: 'bg-panight', image: panight, name: 'Panight' },
140+
{ id: "bg-saiman", image: saiman, name: "Saiman" },
141+
{ id: "bg-astral", image: astral, name: "Astral" },
142+
{ id: "bg-eoaalien", image: eoaalien, name: "Eoaalien" },
143+
{ id: "bg-panight", image: panight, name: "Panight" },
149144
];
150145

151146
export const gameRules = [
152-
'Card with the same defense and attack point will cancel each other out.',
153-
'Attack points from the attacking card will deduct the opposing player’s health points.',
154-
'If P1 does not defend, their health wil be deducted by P2’s attack.',
155-
'If P1 defends, P2’s attack is equal to P2’s attack - P1’s defense.',
156-
'If a player defends, they refill 3 Mana',
157-
'If a player attacks, they spend 3 Mana',
158-
];
147+
"Card with the same defense and attack point will cancel each other out.",
148+
"Attack points from the attacking card will deduct the opposing player’s health points.",
149+
"If P1 does not defend, their health wil be deducted by P2’s attack.",
150+
"If P1 defends, P2’s attack is equal to P2’s attack - P1’s defense.",
151+
"If a player defends, they refill 3 Mana",
152+
"If a player attacks, they spend 3 Mana",
153+
];

‎packages/react-app/src/components/scaffoldGods/Alert.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from 'react';
1+
import React from "react";
22

3-
import { AlertIcon } from '../../assets';
4-
import styles from '../../styles';
3+
import { AlertIcon } from "../../assets";
4+
import styles from "../../styles";
55

66
const Alert = ({ type, message }) => (
77
<div className={`${styles.alertContainer} ${styles.flexCenter}`}>

‎packages/react-app/src/components/scaffoldGods/Card.jsx‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,39 @@ import React from "react";
22
import Tilt from "react-parallax-tilt";
33

44
import styles from "../../styles";
5-
import { allCards } from "../../assets";
65

6+
const allCards = [
7+
"/assets/Ace.png",
8+
"/assets/Bakezori.png",
9+
"/assets/Black_Solus.png",
10+
"/assets/Calligrapher.png",
11+
"/assets/Chakri_Avatar.png",
12+
"/assets/Coalfist.png",
13+
"/assets/Desolator.png",
14+
"/assets/Dusk_Rigger.png",
15+
"/assets/Flamewreath.png",
16+
"/assets/Furiosa.png",
17+
"/assets/Geomancer.png",
18+
"/assets/Gore_Horn.png",
19+
"/assets/Heartseeker.png",
20+
"/assets/Jade_Monk.png",
21+
"/assets/Kaido_Expert.png",
22+
"/assets/Katara.png",
23+
"/assets/Ki_Beholder.png",
24+
"/assets/Kindling.png",
25+
"/assets/Lantern_Fox.png",
26+
"/assets/Mizuchi.png",
27+
"/assets/Orizuru.png",
28+
"/assets/Scarlet_Viper.png",
29+
"/assets/Storm_Kage.png",
30+
"/assets/Suzumebachi.png",
31+
"/assets/Tusk_Boar.png",
32+
"/assets/Twilight_Fox.png",
33+
"/assets/Void_Talon.png",
34+
"/assets/Whiplash.png",
35+
"/assets/Widowmaker.png",
36+
"/assets/Xho.png",
37+
];
738
const generateRandomCardImage = () => allCards[Math.floor(Math.random() * (allCards.length - 1))];
839

940
const img1 = generateRandomCardImage();

‎packages/react-app/src/components/scaffoldGods/GameInfo.jsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,20 @@ import { useNavigate } from "react-router-dom";
33

44
import CustomButton from "./CustomButton";
55
import { useStateContext } from "../../context/StateContext";
6-
import { alertIcon, gameRules } from "../../assets";
76
import styles from "../../styles";
87

98
const GameInfo = () => {
109
const { gameData, setErrorMessage, setShowAlert, tx, writeContracts } = useStateContext();
1110
const [toggleSidebar, setToggleSidebar] = useState(false);
1211
const navigate = useNavigate();
13-
12+
const gameRules = [
13+
"Card with the same defense and attack point will cancel each other out.",
14+
"Attack points from the attacking card will deduct the opposing player’s health points.",
15+
"If P1 does not defend, their health wil be deducted by P2’s attack.",
16+
"If P1 defends, P2’s attack is equal to P2’s attack - P1’s defense.",
17+
"If a player defends, they refill 3 Mana",
18+
"If a player attacks, they spend 3 Mana",
19+
];
1420
const handleBattleExit = async () => {
1521
const battleName = gameData.activeBattle.name;
1622

@@ -30,7 +36,7 @@ const GameInfo = () => {
3036
<>
3137
<div className={styles.gameInfoIconBox}>
3238
<div className={`${styles.gameInfoIcon} ${styles.flexCenter}`} onClick={() => setToggleSidebar(true)}>
33-
<img src={alertIcon} alt="info" className={styles.gameInfoIconImg} />
39+
<img src="/assets/alertIcon.svg" alt="info" className={styles.gameInfoIconImg} />
3440
</div>
3541
</div>
3642
{toggleSidebar && (

‎packages/react-app/src/components/scaffoldGods/GameLoad.jsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useNavigate } from "react-router-dom";
33

44
import CustomButton from "./CustomButton";
55

6-
import { player01, player02 } from "../../assets";
76
import styles from "../../styles";
87
import { useStateContext } from "../../context/StateContext";
98

@@ -25,14 +24,14 @@ const GameLoad = () => {
2524

2625
<div className={styles.gameLoadPlayersBox}>
2726
<div className={`${styles.flexCenter} flex-col`}>
28-
<img src={player01} className={styles.gameLoadPlayerImg} />
27+
<img src="/assets/player01.png" className={styles.gameLoadPlayerImg} />
2928
{address && <p className={styles.gameLoadPlayerText}>{address.slice(0, 20)}</p>}
3029
</div>
3130

3231
<h2 className={styles.gameLoadVS}>Vs</h2>
3332

3433
<div className={`${styles.flexCenter} flex-col`}>
35-
<img src={player02} className={styles.gameLoadPlayerImg} />
34+
<img src="/assets/player02.png" className={styles.gameLoadPlayerImg} />
3635
<p className={styles.gameLoadPlayerText}>??????????</p>
3736
</div>
3837
</div>

‎packages/react-app/src/components/scaffoldGods/PageHOC.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22

3-
import { heroImg } from "../../assets";
43
import styles from "../../styles";
54

65
import Navbar from "./Navbar";
@@ -22,7 +21,7 @@ const PageHOC = (Component, title, description) => () => {
2221
</div>
2322

2423
<div className="flex flex-1">
25-
<img src={heroImg} alt="hero-img" className="w-full xl:h-full object-cover" />
24+
<img src="/assets/background/hero-img.jpg" alt="hero-img" className="w-full xl:h-full object-cover" />
2625
</div>
2726
</div>
2827
);

‎packages/react-app/src/context/createEventListeners.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { ethers } from "ethers";
33
import deployedContracts from "./hardhat_contracts.json";
44
import { NETWORKS } from "../constants";
55
import { playAudio, sparcle } from "../utils/animation.js";
6-
import { defenseSound } from "../assets";
76

87
const AddNewEvent = (eventFilter, provider, cb) => {
98
provider.removeListener(eventFilter);
@@ -98,7 +97,7 @@ export const createEventListeners = ({
9897
sparcle(getCoords(player2Ref));
9998
}
10099
} else {
101-
playAudio(defenseSound);
100+
playAudio("/assets/sounds/defense.mp3");
102101
}
103102
}
104103

‎packages/react-app/src/page/Battle.jsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,6 @@ import { useParams, useNavigate } from "react-router-dom";
55
import styles from "../styles";
66
import { ActionButton, Alert, Card, GameInfo, PlayerInfo } from "../components/scaffoldGods";
77

8-
import {
9-
attack,
10-
attackSound,
11-
defense,
12-
defenseSound,
13-
player01 as player01Icon,
14-
player02 as player02Icon,
15-
} from "../assets";
168
import { playAudio } from "../utils/animation.js";
179
import { useStateContext } from "../context/StateContext";
1810

@@ -81,7 +73,7 @@ const Battle = () => {
8173
}, []);
8274

8375
const makeAMove = async choice => {
84-
playAudio(choice === 1 ? attackSound : defenseSound);
76+
playAudio(choice === 1 ? "/assets/sounds/attack.wav" : "/assets/sounds/defense.mp3");
8577

8678
try {
8779
// await contract.attackOrDefendChoice(choice, battleName, { gasLimit: 200000 });
@@ -106,7 +98,7 @@ const Battle = () => {
10698
<div className={`${styles.flexBetween} ${styles.gameContainer} ${battleGround}`}>
10799
{showAlert?.status && <Alert type={showAlert.type} message={showAlert.message} />}
108100

109-
<PlayerInfo player={player2} playerIcon={player02Icon} mt />
101+
<PlayerInfo player={player2} playerIcon="/assets/player02.png" mt />
110102

111103
<div className={`${styles.flexCenter} flex-col my-10`}>
112104
<Card card={player2} title={player2?.playerName} cardRef={player2Ref} playerTwo />
@@ -128,7 +120,7 @@ const Battle = () => {
128120
</div>
129121
</div>
130122

131-
<PlayerInfo player={player1} playerIcon={player01Icon} />
123+
<PlayerInfo player={player1} playerIcon="/assets/player01.png" />
132124

133125
<GameInfo />
134126
</div>

0 commit comments

Comments
 (0)