Skip to content

Commit e572ba8

Browse files
SelvioSelvio
committed
Set pet name Modal
1 parent 0e936f8 commit e572ba8

File tree

5 files changed

+339
-9
lines changed

5 files changed

+339
-9
lines changed

‎src/components/InitialView/InitialView.tsx‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,41 @@ import Modal from "../Modal";
77
import SelectContinentDialog from "../SelectContinentDialog";
88
import Layout from "../Layout";
99
import GlobalTotals from "../GlobalTotals";
10-
import { REGION } from "../../constants";
10+
import SetNameModal from "../SetNameModal";
1111

1212
interface InitialViewProps {
1313
startGame: () => void;
1414
}
1515

1616
const InitialView: FC<InitialViewProps> = ({ startGame }) => {
17+
const [modalData, setModalData] = useState({ title: "", submit: () => {} });
1718
const [isWelcomeModalOpen, setIsWelcomeModalOpen] = useState(false);
19+
const [isNameModalOpen, setIsNameModalOpen] = useState(false);
1820
const [isSelectContinentModalOpen, setIsSelectContinentModalOpen] =
1921
useState(false);
2022

2123
const handleClickPlaySolo = () => {
22-
if (REGION) {
23-
startGame();
24-
} else {
25-
setIsSelectContinentModalOpen(true);
26-
}
24+
startGame();
25+
};
26+
27+
const handleClickStartMultiplayer = () => {
28+
setModalData({
29+
title: "New Game",
30+
submit: () => {
31+
startGame();
32+
},
33+
});
34+
setIsNameModalOpen(true);
35+
};
36+
37+
const handleClickJoinMultiplayer = () => {
38+
setModalData({
39+
title: "Join Multiplayer",
40+
submit: () => {
41+
startGame();
42+
},
43+
});
44+
setIsNameModalOpen(true);
2745
};
2846

2947
return (
@@ -37,10 +55,10 @@ const InitialView: FC<InitialViewProps> = ({ startGame }) => {
3755
<Button className="w-96 h-16" onClick={handleClickPlaySolo}>
3856
Play Solo
3957
</Button>
40-
<Button className="w-96 h-16" onClick={handleClickPlaySolo}>
58+
<Button className="w-96 h-16" onClick={handleClickStartMultiplayer}>
4159
Start Multiplayer
4260
</Button>
43-
<Button className="w-96 h-16" onClick={handleClickPlaySolo}>
61+
<Button className="w-96 h-16" onClick={handleClickJoinMultiplayer}>
4462
Join Multiplayer
4563
</Button>
4664
</div>
@@ -84,6 +102,12 @@ const InitialView: FC<InitialViewProps> = ({ startGame }) => {
84102
isOpen={isSelectContinentModalOpen}
85103
startGame={startGame}
86104
/>
105+
<SetNameModal
106+
close={() => setIsNameModalOpen(false)}
107+
isOpen={isNameModalOpen}
108+
submit={modalData.submit}
109+
title={modalData.title}
110+
/>
87111
</Layout>
88112
);
89113
};

‎src/components/Modal/Modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC, ReactNode } from "react";
22
import noise from "../../assets/images/noise.png";
33

4-
type ModalProps = {
4+
export type ModalProps = {
55
isOpen: boolean;
66
close: () => void;
77
children: ReactNode;

‎src/components/SetNameModal/SetNameModal.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import { ChangeEventHandler, FC, useEffect, useState } from "react";
2+
import Modal from "../Modal";
3+
import { ModalProps } from "../Modal/Modal";
4+
import { FaArrowRotateRight } from "react-icons/fa6";
5+
import Button from "../Button";
6+
import { generateRandomName } from "./petNameWords";
7+
8+
interface SetNameModalProps extends Omit<ModalProps, "children"> {
9+
submit: () => void;
10+
title: string;
11+
}
12+
13+
const SetNameModal: FC<SetNameModalProps> = ({
14+
close,
15+
isOpen,
16+
submit,
17+
title,
18+
}) => {
19+
const [petName, setPetName] = useState("");
20+
const [code, setCode] = useState("");
21+
22+
useEffect(() => {
23+
setPetName(generateRandomName());
24+
}, []);
25+
26+
const handleChangeName: ChangeEventHandler<HTMLInputElement> = (e) => {
27+
setPetName(e.target.value);
28+
};
29+
30+
const handleChangeCode: ChangeEventHandler<HTMLInputElement> = (e) => {
31+
setCode(e.target.value);
32+
};
33+
34+
const handleGenerateName = () => {
35+
setPetName(generateRandomName());
36+
};
37+
38+
return (
39+
<Modal isOpen={isOpen} close={close}>
40+
<div className="text-center text-4xl flex flex-col gap-12">
41+
<h1 className="text-5xl">{title}</h1>
42+
<p className="text-white">Name your pet here</p>
43+
{title === "Join Multiplayer" && (
44+
<div className="flex items-center gap-5">
45+
<label htmlFor="code">Code:</label>
46+
<input
47+
className="border-2 border-white bg-transparent px-2 h-12 w-80 text-2xl focus:outline-none"
48+
id="code"
49+
onChange={handleChangeCode}
50+
type="text"
51+
value={code}
52+
/>
53+
</div>
54+
)}
55+
56+
<div className="flex items-center gap-5">
57+
<button
58+
className="hover:scale-[1.05] transition-transform"
59+
onClick={handleGenerateName}
60+
>
61+
<FaArrowRotateRight size={26} />
62+
</button>
63+
<input
64+
className="border-2 border-white bg-transparent px-2 h-12 w-80 text-2xl focus:outline-none"
65+
id="petName"
66+
onChange={handleChangeName}
67+
type="text"
68+
value={petName}
69+
/>
70+
<Button tick className="text-2xl w-40 h-12" onClick={submit}>
71+
Go
72+
</Button>
73+
</div>
74+
</div>
75+
</Modal>
76+
);
77+
};
78+
79+
export default SetNameModal;

‎src/components/SetNameModal/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./SetNameModal";

‎src/components/SetNameModal/petNameWords.ts‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
export const adjectives: string[] = [
2+
"Jiggly",
3+
"Cyber",
4+
"Fiery",
5+
"Electric",
6+
"Mighty",
7+
"Ancient",
8+
"Shadow",
9+
"Doom",
10+
"Lunar",
11+
"Stellar",
12+
"Infernal",
13+
"Quantum",
14+
"Nova",
15+
"Hydrous",
16+
"Eternal",
17+
"Spectral",
18+
"Radiant",
19+
"Crimson",
20+
"Nebulous",
21+
"Galactic",
22+
"Celestial",
23+
"Arcane",
24+
"Mythic",
25+
"Blazing",
26+
"Phantom",
27+
"Silent",
28+
"Ironclad",
29+
"Ethereal",
30+
"Temporal",
31+
"Vortex",
32+
"Echoing",
33+
"Twilight",
34+
"Venomous",
35+
"Spectral",
36+
"Astral",
37+
"Gloomy",
38+
"Ember",
39+
"Titanic",
40+
"Frosty",
41+
"Thunderous",
42+
"Solar",
43+
"Obsidian",
44+
"Harbinger",
45+
"Majestic",
46+
"Feral",
47+
"Savage",
48+
"Void",
49+
"Arcadian",
50+
"Primal",
51+
"Serene",
52+
"Mystic",
53+
"Chromatic",
54+
"Zealous",
55+
"Vigilant",
56+
"Whispering",
57+
"Enigmatic",
58+
"Luminescent",
59+
"Transient",
60+
"Paradoxical",
61+
"Infinite",
62+
"Sovereign",
63+
"Abyssal",
64+
"Runic",
65+
"Eclipse",
66+
"Radiant",
67+
"Celestial",
68+
"Harmonic",
69+
"Verdant",
70+
"Azure",
71+
"Scarlet",
72+
"Monolithic",
73+
"Reverent",
74+
"Temporal",
75+
"Echoing",
76+
"Nebular",
77+
"Mercurial",
78+
"Astral",
79+
"Empyreal",
80+
"Arcadian",
81+
"Resilient",
82+
"Immutable",
83+
"Synergistic",
84+
"Adaptive",
85+
"Enlightened",
86+
"Transcendent",
87+
"Epochal",
88+
"Primordial",
89+
"Kinetic",
90+
"Chimeric",
91+
"Spectral",
92+
"Voltaic",
93+
"Zenith",
94+
"Nexus",
95+
"Arcane",
96+
"Cryptic",
97+
"Phantasmal",
98+
"Luminous",
99+
"Sublime",
100+
"Obscure",
101+
"Harmonic",
102+
"Catalytic",
103+
"Celestial",
104+
];
105+
106+
export const nouns: string[] = [
107+
"Blockfrost",
108+
"Demon",
109+
"Hydra",
110+
"Imp",
111+
"Cacodemon",
112+
"Ouroboros",
113+
"Chain",
114+
"Stake",
115+
"Epoch",
116+
"Node",
117+
"Wallet",
118+
"BFG",
119+
"Portal",
120+
"Serpent",
121+
"Doomguy",
122+
"Cardano",
123+
"Plutus",
124+
"Byron",
125+
"Shelley",
126+
"Gorgon",
127+
"Leviathan",
128+
"Spectre",
129+
"Wraith",
130+
"Phoenix",
131+
"Dragon",
132+
"Revenant",
133+
"Marauder",
134+
"Sentinel",
135+
"Harbinger",
136+
"Oracle",
137+
"Enigma",
138+
"Chimera",
139+
"Titan",
140+
"Nebula",
141+
"Quantum",
142+
"Matrix",
143+
"Cipher",
144+
"Vortex",
145+
"Equinox",
146+
"Zenith",
147+
"Eclipse",
148+
"Obsidian",
149+
"Crusader",
150+
"Guardian",
151+
"Vanguard",
152+
"Catalyst",
153+
"Monolith",
154+
"Synergy",
155+
"Continuum",
156+
"Genesis",
157+
"Labyrinth",
158+
"Nimbus",
159+
"Odyssey",
160+
"Paragon",
161+
"Quasar",
162+
"Redux",
163+
"Specter",
164+
"Tempest",
165+
"Umbra",
166+
"Vertex",
167+
"Whisper",
168+
"Xenith",
169+
"Zephyr",
170+
"Aegis",
171+
"Beacon",
172+
"Cipher",
173+
"Drifter",
174+
"Eon",
175+
"Fury",
176+
"Gauntlet",
177+
"Horizon",
178+
"Infinity",
179+
"Juggernaut",
180+
"Kraken",
181+
"Legacy",
182+
"Maelstrom",
183+
"Nexus",
184+
"Oblivion",
185+
"Phantom",
186+
"Quicksilver",
187+
"Rift",
188+
"Sage",
189+
"Terminus",
190+
"Umbra",
191+
"Valkyrie",
192+
"Warp",
193+
"Xenon",
194+
"Yonder",
195+
"Zealot",
196+
"Ascendant",
197+
"Brigade",
198+
"Conduit",
199+
"Dynasty",
200+
"Epoch",
201+
"Fusion",
202+
"Glyph",
203+
"Helix",
204+
"Ion",
205+
"Javelin",
206+
"Kismet",
207+
"Luminary",
208+
"Myriad",
209+
"Nimbus",
210+
"Oracle",
211+
"Pinnacle",
212+
"Quintessence",
213+
"Rapture",
214+
"Solstice",
215+
"Tribune",
216+
"Utopia",
217+
"Vortex",
218+
"Warden",
219+
"Zenith",
220+
];
221+
222+
export const generateRandomName = (): string => {
223+
const adj = adjectives[Math.floor(Math.random() * adjectives.length)];
224+
const noun = nouns[Math.floor(Math.random() * nouns.length)];
225+
return `${adj} ${noun}`;
226+
};

0 commit comments

Comments
 (0)