The Project

[00:00:00]
>> This is pretty exciting and fun. I'm excited to go over this with you. Do you remember those really annoying little digital pet key chains during the 90s? Like Tamagotchi or Digipet or Giga Pet or all those things? I do, I had them and my mom hated them.

[00:00:18]
Cuz I had two of them going at the same time. And when I went to school, she would have to take care of them. So picture my poor mother having to take care of both of mine and my sister's. And we would be furious if they were not alive when we got home.

[00:00:31]
My poor mother had to take care of those damn pets. And like a saint, I don't think she killed them very often. So we're going to recreate that magic. I'm gonna email this to my mom afterwards, and she's going to take care of all of your pets. No, I'm just kidding, sorry mom.

[00:00:49]
Yeah, so we're gonna create like a little digital pet together. And what's really cool about this is Frontend Masters commissioned an artist to make professional art for this, so it actually looks really, really good. I left a link to Alice Brereton's site, she's the artist for this. She's an amazing artist, I've used her several times for commissions, so I definitely would, if you need art, definitely talk to her.

[00:01:12]
So I have my version of the game up here. So if you click this and open it, our game is gonna look something like this. Which looks really nice, right? It's got buttons that work, just like you know how the Tamagotchi had three buttons, and it was really annoying, and the worst UX ever.

[00:01:32]
Yeah, we're gonna recreate that, it's gonna be fun. So let's go over the project requirements, then I'll kinda show you the game and how it works. I would much rather you be learning and trying new things rather than follow exactly these guidelines. That's more important, this is more about exploration.

[00:01:51]
So if you wanna break the rules here, no one's watching. I don't know, maybe I am. So I put a bunch of requirements here, and I kinda of just tried to describe it and hopefully be as helpful as possible. But again, if something here doesn't jibe with what you wanna do, go do something else, that's totally fine.

[00:02:09]
So let's go over the requirements to the game together. So the game starts in just like a initialized state, which looks something like this, right? It's just ready to go, right? So I call this initialized. At the bottom, the user can switch between three icons using the left and right buttons.

[00:02:26]
So you can see here, I can go between all of these. And then it loops around, if I try and go to the right when I'm on the rightmost one, right? Same thing with left. Okay, when the user starts, the fox will hatch. So it's gonna be a little fox, which is super cute.

[00:02:45]
Once the fox has hatched, then it's gonna be just idling. So it's just gonna be standing there waiting for something to happen. The user can switch the weather at any time using the weather icon. Just so you know, this is the weather icon right there. And it'll go between day and rain.

[00:03:05]
After some time, the fox will become hungry. Then this should be some sort of variable, right? It should be between, I'm gonna say 15 seconds and 18 seconds. Right, so there's a little bit of variability, there's some excitement to our digital pet game. It'll become hungry, and the fox can only be fed when it's hungry.

[00:03:26]
That makes sense. After some interval of being fed, the fox will poop. So after the fox poops, then you will be able to clean up the poop. You can't clean up poop before there is poop. There's no [LAUGH] predestination of poop, I don't know. When a user cleans up poop, it should add another interval until the fox is hungry again, right?

[00:03:44]
So that's kinda the loop here, get hungry, then it gets fed, then it poops, and then you clean up the poop, right? That's kinda the loop here. The fox can't be hungry and poop at the same time, I think that makes sense. You get hungry, then you clean it up, then it poops.

[00:04:02]
If the fox isn't fed or the poop isn't cleaned up in some interval, then the fox will die, unfortunately. And then it'll go to the game over screen. And then after some interval of day/rain, right, which we're kinda considering those the same thing, it'll go to night. And once it goes to night, then everything resets.

[00:04:23]
The hungry timer will reset, the poop timer will reset. I think you can just assume that if the fox is hungry, it'll get a nice kind of snack on its own. And once the fox is asleep, you can't do anything until it hits daytime again. Okay, once the fox dies, it'll go to the death scene.

[00:04:40]
The fox becomes a tombstone and the game is over. You can press the middle button and it'll restart the game back into that hatching kind of thing. And then you can see up here at the top, there's a modal, oops. This sometimes happen, I think if the browser cache just gets stale.

[00:05:00]
So if you just refresh the page, the background shows up again. Okay, so you can see here there's a modal that tells the user, you've gotta press the middle button to start. So as soon as I press this, the game will start. And the fox should not be able to die, get hungry, poop, be fed, or have the poop cleaned up, or fall asleep when it is being fed, sleeping, hatching, or dead.

[00:05:24]
Right, so if the fox is being fed, right, it can't die during that period of time. And the last thing here, in general, I am a big advocate for responsive design, so that this should work on a phone, that kind of thing. In this particular case, I'm going to let you just make everything a fixed width.

[00:05:46]
And that's just kind of the way it has to be, cuz this is a pretty complicated CSS thing. So you can see here if I make my browser, Browser window smaller here, you can see it's not really responding too much. So that's fine, it's okay to make this just work at fixed width for this one time.

[00:06:06]
All right, so let's just take a look at the game, the one that I implemented. And that you and I are gonna implement together. Again, this doesn't necessarily have to be the same way that you implement it. But this is just kind of how it worked for me.

[00:06:20]
So if I press the middle button, the fox will appear here, and it will begin to hatch. Okay, and you so you can see the fox here has hatched. And now we're just kinda waiting for something to happen, cuz that's what Tamagotchis do. So wait a second, hopefully the fox at some point gets hungry.

[00:06:40]
It's not a very hungry fox, I guess. [LAUGH] There you go, you can see the fox is now hungry. It should be pretty obvious what the fox wants right now, so I press the fish button. And the fox will quickly nom on some fish. And then he's gonna get real happy about it, so he'll celebrate that he ate the food.

[00:07:00]
And he'll go back to being idling again. And you can also change the weather here to the rain. So this is the same as idling, it's just now it's in a rainy mode. And then you can see here now the fox is pooping. And so here we can clean up the poop.

[00:07:21]
Again, the fox is very happy that you've cleaned up its poop, and so it celebrates. You can see that there was a little poop bag over there as well. And at some point, for the way the I implemented it, it takes about three minutes to hit night. And this night we're not gonna feed it, and we're gonna just unfortunately let the fox die so you can see what that looks like.

[00:07:49]
So this is what the dead scene looks like. You can see up here it says, the fox has died, press the middle button to start again. And so it'll just stay like this until I hit the button again. And then it'll go back into the beginning of the game.

[00:08:07]
And again, this is all available online already. So you can see it here. All the code that I have implemented is up available online, and I'll show you that here in just a second. So technical requirements, there are none. You and I are gonna do this in just plain JavaScript, HTML, and CSS.

[00:08:21]
So I'm not gonna use the framework. I'm actually not even gonna use any third-party libraries. That's just the way that I'm choosing to do it this time. But if you want to use React, if you wanna use something else, you're free to. I would suggest maybe while following along this course, just follow along with me and we'll build it together and HTML and CSS and JavaScript.

[00:08:41]
But my challenge at the end of this course is for you to go and rebuild this game in the technology stack that you choose. And I'll have some suggestions around different things you can try. But you could do it with React, Angular, Vue, Svelte, or something like that.

[00:08:55]
Or even do a server-side version with Node, which would be really cool as well. So yeah, this is a simple project with simple requirements. If this was done in a vacuum, there's a high chance that I would do this just with plain JavaScript and HTML. Because you can imagine I'm a React developer, I choose React most of the time.

[00:09:16]
But in this particular case, React is really heavy for just a couple view layer things. So this project is well suited for just being done in HTML, CSS, and JavaScript. And then the last thing here, it's a useful exercise for you to be kind of pulled away from your tools.

[00:09:33]
And try things in a different way and think about things different ways so that you don't become an Angular developer. You should be a front end developer that happens to do Angular right now. Because in five, ten years, we probably won't be writing Angular anymore. I think that's a pretty safe prediction to make.

[00:09:50]
But, I guarantee you, we will absolutely be writing JavaScript in ten years. So it's good for you to kind of have those muscles stretched and ready to go. So beyond that, you're free to make all the technical personal choices that you want. Please, please after you're done and re-implement this with different frameworks and tools, please tweet them at me, and I will definitely retweet them.

[00:10:14]
I'm really excited to see the creativity of the community and all the cool stuff that you do. So yeah, I would love to see this in every framework. Okay, does anyone have any questions? Yes.
>> I was wondering if when you created the requirements for the app, if you created the requirements first or if you built the app first?

[00:10:35]
>> I did the latter, right? I wrote the game first and then I invented the requirements to fit them. Yeah, that was just way easier to do it that way. [LAUGH] That's a good question though.