Creating a Wordle clone
-
Things I want to do:
- Integration with Firebase
- Working with canvas
- Implementing animations
-
Extracting Hooks:
- I want to write it in a React-like way.
- In the case of Clonedle, what should be the Hooks?
- useGame?
-
✅ File separation
-
Let’s rewrite it in React with Typescript
- DONE✅
-
Let’s deploy it to Github Pages
- It’s amazing that it can be done for free.
- Deploying a React project created with create-react-app to GitHub Pages
- https://web-begginer-log.com/create-react-app-gh-pages/
- It worked with this, although I changed yarn to npm.
- package.json is here
- ✅https://blu3mo.github.io/clonedle/
-
First log:
-
Parsing error: JSX value should be either an expression or a quoted JSX text. (19:18)
- So, it should be
or - I don’t quite understand why
is not allowed, but I guess that’s just how it is. - Maybe because it’s incorrect in terms of HTML syntax? (takker)
- Ah, I see! (blu3mo)
- HTML height Attribute
- So, even numbers should be enclosed in "" (blu3mo)
- So, it should be
- I don’t understand the class part of js, so I’ll keep it simple for now, but I think the game logic and display should be separated.
- It’s done.
- I also worked on the CSS.
- Oh, it looks like the real thing! (takker)
-