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
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
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.
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
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.
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!
@@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
Keep up the good work. Just one query, I tried to get the timeId for the setTimeout function and then used the useEffect cleaning function to clean that out. But it didn't work out. Here is what I am doing let timeId; const timeInterVal = setInterval(() => { const randomIndex = Math.floor(Math.random() * moles.length); popMole(randomIndex); timeId = setTimeout(() => { hideMole(randomIndex); }, 700); }, 1000); return () => { clearInterval(timeInterVal); clearTimeout(timeId) }; Can you please check and let me know where I am going wrong.
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
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.
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?
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?
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.
Another improvement idea: add animation when mole is whacked instead of it disappearing instantly. This small change will make this game look more professional.
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.
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.
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
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 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.
Love how you started to bring back the challenges
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
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
Luckily react query abstracts a lot of that away, but anything complex requiring timeouts intervals, or web sockets, always confuses me
Just stumbled upon your channel, and your videos about refactoring and these type of challenges are pure gold! 🏆Thanks!
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.
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
I mean 95% of web dev is show form, validate form, submit form, redirect page, fetch data, show data, repeat
14:23 “sometimes i hate react. i think react is the most convoluted thing in the world.” ah, isn’t that comforting to hear
I'm a senior dev, but i love to do and watch this kind of challenge!
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.
Nice tut! I'd recommend to hold the random index in useState instead of an array of boolean.
Yeah that could work as well
Literally been waiting for a web dev coady challenge video for theee days
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!
The thing that is most impressive is thst you got dall-e to make teo identical images, but one without the mole...
No I use gimp to edit out the mole 😂
@@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
I cant explain how much I like these videos
Awesome!
great video and another fun challenge to do!
Thanks for all the challenges you share 😁🙏 , iwill suggest do like a clone feature challenge from real world applications thanks again
THANKS FOR A challenge had fun with it
Keep up the good work. Just one query, I tried to get the timeId for the setTimeout function and then used the useEffect cleaning function to clean that out. But it didn't work out. Here is what I am doing
let timeId;
const timeInterVal = setInterval(() => {
const randomIndex = Math.floor(Math.random() * moles.length);
popMole(randomIndex);
timeId = setTimeout(() => {
hideMole(randomIndex);
}, 700);
}, 1000);
return () => {
clearInterval(timeInterVal);
clearTimeout(timeId)
};
Can you please check and let me know where I am going wrong.
14:42 playing game for Bro was harder than making the game
Very nice video!
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
This styles of videos are #chefKiss ❤
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)?
really good one, thanks!
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.
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
@@WebDevCody my bad, I see it now
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?
Very nice video, and I also noticed the voice change . Did you change the microphone ?
I’m sick, I have a cold
Thanks .
Can you do vite ssr tutorial?
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?
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.
Another improvement idea: add animation when mole is whacked instead of it disappearing instantly. This small change will make this game look more professional.
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.
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.
😍😍😍 you’re doing great babe ❤
What is the vs code theme? 😊
How much time under which do you think a beginner needs to be able to complete this? Is under 30 minutes a good time?
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
@@WebDevCody Sounds good, thank you!
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);
}
}}
/>
))}
);
In 6:00, why did you use the spread operator to assign the array? Why not just make it const newMoles = moles; ?
You need a new array reference or else react won’t rerender
Thanks mate, didn't know that.
❤
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.
I wouldn’t store state outside the react component. If you want to make it easier to update the array, you can use immer
@@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.
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}
/>
))}
);
}
Where can we get the assets please
Should be in description
What theme are you using?
Bearded theme stained blue
@@WebDevCody Thanks, also keep up the good work!
Hi, could you post the graphics on some hosting? I don't have dolly-3 unfortunately
no
Yes