Hikarii

Hikarii

@Hikarii

The broest bro

Art Tag: #HikArt

log in
Hikarii
@Hikarii
jazzrabbit
@jazzrabbit
jazzrabbit
@jazzrabbit

My First CSS Crime - I Ported Wordle to Cohost

(Desktop only)
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
Enter
Β 
Β 
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
Enter
Β 
Β 
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
Enter
Β 
Β 
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
Enter
Β 
Β 
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
Enter
Β 
Β 
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
β–²
β–Ό
Enter
Β 
Β 

How to Play Similar to normal wordle. Try to guess the hidden word. Use the arrows to choose letters to form a 5 letter word and press enter to get hints about what the word is. Green letters mean there you have the correct letter in that position. Yellow letters mean that letter is somewhere in the word. You win when all 5 letters are green. You have 6 guesses.
Differences from normal Wordle
  • The word you guess doesn't have to be a real word. It just has to be any 5 letter combination. Although the solution is a real word.
  • Yellow letters will show if the letter exists anywhere in the word, even if that has already been marked green. So if a letter is there as both green and yellow, that doesn't mean it's in the word twice. (In this case, there are no doubles)
  • There is no "Hard mode" although you are free to try to enforce those rules upon yourself.
  • There is no win screen currently, so once you get all letters as green, that means you've won.
How it works I largely used the technique described in this post by @Corncycle and also kind of adapted the html for my title from that post. I also heavily referenced this post and this post by @blackle. The letter pickers increment the height every time one of the buttons is clicked, and then I use the height to determine which letter to show. It tracks which letter is currently selected, and if it's the right letter, it will display a green square, and if the word just contains the letter, it will display a yellow square. I made a JavaScript and React generator that generates everything to make it easier. Tbh, there's probably better ways to build stuff like this and optimize it, but I'm still kind of new to building stuff without something like JavaScript powering it, so this is still kind of just a proof of concept for now. It's pretty messy, but you can see the source for the generator here or generate your own on my personal website here.
You must log in to comment.

in reply to @jazzrabbit's post:

firefang
@firefang

β¬›πŸŸ¨β¬›πŸŸ¨β¬›

πŸŸ©πŸŸ©πŸŸ¨πŸŸ¨β¬›

🟩🟩🟨🟩🟩

🟩🟩🟩🟩🟩

Nice work! Got thrown off a little by how it deals with multiple of the same letter versus the original but otherwise it works well.

login to reply
BigBearDAC
@BigBearDAC

β¬›β¬›πŸŸ¨β¬›β¬› πŸŸ¨β¬›πŸŸ¨πŸŸ¨β¬› πŸŸ©β¬›β¬›πŸŸ¨πŸŸ¨ 🟩🟩🟩🟩🟩

On mobile, no less! (It works fine in landscape view.) Really nice work!

login to reply
Pinned Tags