Can you solve this beginner react challenge? - wack-a-mole

mole images:
web-dev-junkie-files.s3.amazo...
web-dev-junkie-files.s3.amazo...
Chapters generated using ytchaptersgenerator.com
----------
00:00 - Introduction
00:49 - Building the Grid
02:58 - Randomly Picking Moles
07:57 - Whacking Moles and Scoring
11:38 - Hiding Moles
14:59 - Code Cleanup
16:00 - Conclusion
📘 T3 Stack Tutorial: 1017897100294.gumroad.com/l/j...
🤖 SaaS I'm Building: www.icongeneratorai.com/
▶️ Generate Chapters: ytchaptersgenerator.com/
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody

[@eshw23]

Love how you started to bring back the challenges

[@Eldrac]

Fun problem! Since only one mole is visible at a time the implementation would be much simpler here if the state was typed as number | undefined and just stored the index of the visible mole if one is showing or undefined if no mole is showing

[@evheniy_danilyuk]

Just stumbled upon your channel, and your videos about refactoring and these type of challenges are pure gold! 🏆Thanks!

[@MirkoSaugo]

I'm a senior dev, but i love to do and watch this kind of challenge!

[@asagiai4965]

Wow the amount of beginner react challenges here is quite astounding. I just finished the logic on Capital Matching which is a video from last time.
It works even without hooks, But I probably need to put a hook in it.
And now we have this.
I think I might implement an array here. A setInterval function. My initial problem here would be more of the animation side.
Well good luck to anyone who will try this.

[@appel-32]

i remember when you started doing videos learning react, trying to improve your skills. is crazy how confusing effects are, i still don’t really understand them, thankfully i don’t really use them in my projects

[@WebDevCody]

Luckily react query abstracts a lot of that away, but anything complex requiring timeouts intervals, or web sockets, always confuses me

[@ibex599]

Literally been waiting for a web dev coady challenge video for theee days

[@Peacemaker.404]

great video and another fun challenge to do!

[@cod-the-creator]

Great video. It's funny because I do think this qualifies as "beginner" but at the same time if you can do this you can do like 90% of the front-end dev work you'll be asked to do at a real job lol

[@WebDevCody]

I mean 95% of web dev is show form, validate form, submit form, redirect page, fetch data, show data, repeat

[@blakeingle8922]

The state of your array is derived from some random number. That's why you have so much complexity.
Just storing `moleIndex` as a random number that changes every second would be better.
But, if you want to have multiple moles appear at once, then you would want to store a set of mole indices.

[@zi_t]

14:23 “sometimes i hate react. i think react is the most convoluted thing in the world.” ah, isn’t that comforting to hear

[@iwantfrens5804]

I cant explain how much I like these videos

[@stevecrabtree9141]

Very nice video!

[@guilhermegirardi]

Awesome!

[@matthewjwhitney]

The thing that is most impressive is thst you got dall-e to make teo identical images, but one without the mole...

[@WebDevCody]

No I use gimp to edit out the mole 😂

[@matthewjwhitney]

@@WebDevCody I wonder what the stats are on who uses gimp because I feel like it's mostly devs fixing shit real quick rather than hitting up the designer haha

[@jspnser]

really good one, thanks!

[@rownhere232]

THANKS FOR A challenge had fun with it

[@lilpodbebe]

Nice tut! I'd recommend to hold the random index in useState instead of an array of boolean.

[@WebDevCody]

Yeah that could work as well

[@user-re8lt2gy3g]

Thanks for all the challenges you share 😁🙏 , iwill suggest do like a clone feature challenge from real world applications thanks again

[@bobbyboxer2664]

This styles of videos are #chefKiss ❤

[@Lexaire]

Great video but would like it if you better explained in detail when and why you need to use callback functions to setState. Also please share final code for these!

[@TechNikky]

14:42 playing game for Bro was harder than making the game

[@SeibertSwirl]

😍😍😍 you’re doing great babe ❤

[@stakk4]

Even following step by step, I'm erroring out on (early in the video line 8 at timestamp 3:45)
const [moles, setMoles] = useState(new Array(9).fill(true));
I have an error under the "[]" next to "boolean"
An element access expression should take an argument.ts(1011)
Drives me nuts when I do exactly what someone is showing but it doesn't work for me. Anyone have any ideas?

[@ardianhotii]

Very nice video, and I also noticed the voice change . Did you change the microphone ?

[@WebDevCody]

I’m sick, I have a cold

[@mohammadRizwan-nn5ew]

Can we have a challenge for trasnfer list with drag and drop od list items.Also it can handle checked items to drag and drop(reorder)?

[@Sinke_100]

If I am more expirianced in react I would probably have stuff to say, but with my current knowledge looks pretty good handling lol
Also question, u said u used dall-e to make u images, how did you promt it to make you the same one just with the mole?

[@tomjackson-]

Thanks .

[@kbkmn]

aren't timeout fires even after mole is wacked? you can save timeoutId as positive (visible) mole value instead boolean and call clearTimeout in wacking function

[@aleksimodebadze1603]

Can you do vite ssr tutorial?

[@wilku04]

What is the vs code theme? 😊

[@personofsomething6205]

In 6:00, why did you use the spread operator to assign the array? Why not just make it const newMoles = moles; ?

[@WebDevCody]

You need a new array reference or else react won’t rerender

[@personofsomething6205]

Thanks mate, didn't know that.

[@abdikadirQulle]

❤

[@yuuamane2505]

How much time under which do you think a beginner needs to be able to complete this? Is under 30 minutes a good time?

[@WebDevCody]

I think if you can figure this out in 30 min to an hour, you’re doing good understanding how react works, if it takes longer then there are some fundamentals you’re missing

[@yuuamane2505]

@@WebDevCody Sounds good, thank you!

[@marcusedberg816]

I maybe missed it but it seems that the onClick functionality also is possible when isMole is false which means that you will get a point when you wack the hole.

[@WebDevCody]

I’d have to check the code, but I thought I check to make sure isMole is true on the index before allowing any of the score logic

[@marcusedberg816]

@@WebDevCody my bad, I see it now

[@MC-yt8zz]

Where can we get the assets please

[@WebDevCody]

Should be in description

[@mihaighise2506]

What theme are you using?

[@WebDevCody]

Bearded theme stained blue

[@mihaighise2506]

@@WebDevCody Thanks, also keep up the good work!

[@MoDrazzz]

Hi, could you post the graphics on some hosting? I don't have dolly-3 unfortunately

[@IvanRandomDude]

Improvement idea for readers: consider implementing a dynamic time system instead of a fixed 700ms interval. Initially, you could set a longer duration, say 2 seconds, and gradually reduce this as the game progresses. This accelerating pace will make the game more exciting.

[@IvanRandomDude]

Another improvement idea: add animation when mole is whacked instead of it disappearing instantly. This small change will make this game look more professional.

[@IvanRandomDude]

The point being that even mini projects like this allow you to learn and practice a lots different concepts because no matter how simple you start you can always keep adding new features.

[@asagiai4965]

that challenge is more up to us than him. he just show the basic so you can have guide (and we should be thankful for that), if you want to create the same game/project.
btw if you want a dynamic time system
you probably should have a minimum time and a maximum time.

[@FaezAnsari-pe2yr]

Why not instead of having an array of booleans have array of numbers from 1 to 9 and set it as a variable outside of function component and then just have a active state? That would eliminate a lot of bs with arrays and your code would be cleaner and more concise.

[@WebDevCody]

I wouldn’t store state outside the react component. If you want to make it easier to update the array, you can use immer

[@FaezAnsari-pe2yr]

@@WebDevCody The point is the grid doesn't need to be a state and array doesn't need to be updated. You can just have an activeCell state (which is a number) and a grid variable that you store outside of function or inside the function using useMemo.

[@FaezAnsari-pe2yr]

here the code:
function App() {
const [active, setActive] = useState(null);
const [score, setScore] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setActive(Math.ceil(Math.random() * 9));
setTimeout(() => {
setActive(null);
}, 500);
}, 1000);
return () => clearInterval(timer);
}, []);
const grid = useMemo(
() =>
Array(9)
.fill(1)
.map((i, x) => i + x),
[],
);
return (
Score: {score}
{grid.map((i) => (
{
if (active === i) setScore((i) => ++i);
}}
className="w-1/3"
src={active === i ? Wack : Mole}
/>
))}

);
}

[@renifer483]

no

[@WebDevCody]

Yes

[@medAmineRg]

i just tried this challenge before watching the video here's my code:
const [holes, setHoles] = useState([
"hole.png",
"hole.png",
"hole.png",
"hole.png",
"hole.png",
"hole.png",
"hole.png",
"hole.png",
"hole.png",
]);
const [indexTrack, setIndexTrack] = useState();
const [score, setScore] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setIndexTrack(() => Math.ceil(Math.random() * 9));
}, 1000);
return () => {
clearInterval(interval);
};
}, []);
return (

Score {score}

{holes.map((hole: string, i: number) => (
{
if (indexTrack === i) {
setScore((prevScore) => ++prevScore);
setIndexTrack(() => undefined);
}
}}
/>
))}


);