Show entering screen to prompt User to enter a name

[DaeguDude]

Psuedocode

Let's write psuedocode first, I need to outline general working process to setup this.

There are 2 big things to consider

• The look of the display
• Adding interaction to the display

---

The look of the display

• [x] I need to draw how the display will look like(Minimal representation of it, I can fancy it up later)
• [x] After knowing how the display will look like, I can draw them using HTML/CSS (No Javascript yet and I will use Tailwind)
• [x] After finishing implementing the display with HTML/CSS convert it to the Javascript

---

Adding interaction

• [x] Using Javascript, I will add some interaction
• [x] Adding interaction to write name(So you should have an input text box for it)
• [x] After entering a name, when user clicks the 'start game' button, they will go to next screen

[DaeguDude]

Let's set up a tailwind in the project to use it

This article helped me setting up tailwind, but I had to remove purge property in tailwind.config.js to get it actually working. It might be worth reading into the details of what it actually does.

---

This is way more strange, h-screen and w-screen didn't work, so it seemed like some of utility classes provided by tailwind css doesn't work. However, putting purge back into the tailwind.config.js made it work again. How odd it is

[DaeguDude]

Tailwind config is keep shouting at me that it's not configured correctly. Now it's showing me all this warning and no design is applied i should fix this

• [x] Fix tailwind config to apply the design again

This fixed the issue. purge option is no longer 'available' in tailwind ^3.0.0

https://github.com/tailwindlabs/tailwindcss/discussions/6019