This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Creating the Welcome Screen" Lesson
[00:00:00]
>> Okay, so the first thing that we're gonna do is we're gonna remove these unused props from main.js. We don't need that stuff anymore. Just delete that. And inside our, Main App.svelte we're gonna get rid of this placeholder content, which is no longer relevant to us. So now I have a blank page.
[00:00:34] And these styles also no longer relevant, so I'm just gonna get rid of all of that. And this state is also unused. So, I mentioned that there are two screens, there's the welcome screen and there's the game screen. So we're gonna have a piece of state that represents which screen we're currently on.
[00:00:56] And there's a lot of ways that you could do this. You could use a state machine, for example, but for right now, we're just gonna keep it nice and simple and we're gonna have, let state = 'welcome'. And the alternative is playing. And then inside our main element, we're gonna have, if state === 'welcome'.
[00:01:25] Or, if state === 'playing'. Welcome screen goes here. Game screen goes here. Save that, and we've got our intro content there. Now we're gonna wanna vertically center the content of this main element. So I'm gonna add some more CSS down here. I'm gonna bump up that max-width to 800 pixels.
[00:02:03] And we're gonna make the height 100%. We're gonna use display: flex, With a flex-direction of column. And we're just gonna justify the content using center. So now the content is in the middle of the screen. Okay, so let's start building our welcome screen. We're gonna do that in a new component so that this one doesn't get too crowded.
[00:02:40] I'm gonna create a new file over here called screens/Welcome.svelte. [COUGH] And then in my App.js, my App.svelte, sorry, I'm gonna import that component. And then I'm just gonna replace all of that with, the Welcome component. I got the path wrong, so Rollup is giving me an error because it couldn't resolve ./Welcome.svelte from source App.svelte.
[00:03:31] There's a reason for that, it's because that file doesn't exist. I needed to add screens here. And then hopefully that is gonna start building correctly again. And so now it's time to build our welcome screen. Now, by the way, if you're using the Cameoparison starter repo and if you're following along, then there's a series of checkpoints that we're gonna work through.
[00:03:59] We're currently working towards checkpoint one, so don't worry if you feel like you're falling way behind and aren't gonna be able to catch up. Because once we get to each checkpoint, if you're not current with the course then you can just discard your changes and check out that checkpoint and then we'll be able to pick up from there.
[00:04:19] So don't worry about about keeping pace if you're falling behind. Okay, so what do we need to put in our welcome screen? I guess we don't need a script tag for right now. So let's ignore that. I'm gonna cheat a little bit, and I'm gonna go to the deployed version of this game.
[00:04:41] And I'm just gonna yank the html out of what's already here. Because you can do that in Svelte. It's not like some frameworks where valid HTML isn't necessarily valid in the language that you're writing your application in. For example, JSX has all sorts of ways in which it isn't exactly HTML.
[00:05:09] And so very often, you'll paste in perfectly valid HTML into your JSX and it won't do what you expect. But in Svelte, we don't have that problem because valid HTML is valid Svelte, which makes it really good for copying things from CodePens and other places that you find bits of markup around the Internet.
[00:05:27] So I'm just gonna right-click on that header and copy out of outerHTML, just gonna paste that in there, okay. And we need to clean it up a little bit. We've got these scoping selectors that Svelte adds so that the CSS that belongs to the component doesn't leak out.
[00:05:45] And we just need to get rid of all those because it's gonna add those anyway. Get rid of that like that. And then just neaten up the indentation and what have you. Save that. And okay, we have some markup, need to get some styles in there as well.
[00:06:19] And again, because it's just CSS, we can paste in any CSS that we find lying around the Internet. So here, I'm selecting, I need to be on the deployed site. Here I'm selecting the h1, And I'm gonna find the style here. And you can see it does indeed belong to the Welcome component.
[00:06:40] And just select all of that, copy it and put it inside my h1. Do the same thing for the paragraph element. Put a max-width on there and some margin. And finally for the logo, you see here we've got the word CAMEOPARISON spelled out, but here the A has been replaced with the logo.
[00:07:24] And that's done with CSS. We just need to select element, and grab the styles and put them in a new .logo selector. Right, and that's starting to look quite a lot like the finished product. Except, obviously, it's not the same thing because this is on a white background and the other one is on a dark background.
[00:07:52] And that's because there are some styles that are not component-specific that are being applied to the entire page. These are the styles that live in our global .CSS file, which is used for CSS variables, typography rules, and all of those sorta things. Anything that applies to all of your components as opposed to a specific component, I like to put it in a global.css file.
[00:08:15] So if I go over here, go to my Network tab, let's refresh the page to get everything, and restrict it to CSS files, then we'll see that there's two CSS files that have been downloaded, global.css and bundle.css. bundle.css is the one that Svelte generates from our components. global.css is everything else.
[00:08:37] So I'm just gonna open that in a new tab. And just select all of that. Go over to the global.css file, like that, I'm just gonna replace everything with these styles. So now if you refresh the page, don't even need to refresh the page, okay. It's already done.
[00:08:58] So localhost:5000 is now starting to resemble the version that's currently running in production. Obviously, we don't yet have this section with the buttons, but we have the header and everything else.