This is purely a proof of concept. Can I program the NY Times Connections game using HTML/CSS/JS?
As far as I can tell, the game functions the same (feel free to let me know if things don't work as expected).
Disclaimer - The lists of words was generated by ChatGPT.
This game was written in HTML/CSS/JS to create a web application
A web application is just a website, but written to act/function like an app rather than a site.
Pros
usable on any device (that can view a webpage)
Simple coding languages (HTML/CSS/JS)
Natural separation of form, style, and functionality
No installation required (assuming a browser is already added)
Cons
Requires internet access (unless the pages are saved to the computer)
HTML: HTML is used to create the form of the game
All visual elements and non-visual groupings (top section w/ instructions + Time, middle section w/ grid of words, bottom section w/ 3 buttons)
CSS: CSS is used to create the visual feel of the game
Though HTML was used to create the groupings, CSS is used to layout those groupings in grids or in same-line sections.
Colors, buttons, borders, etc.
JS: JS is used to create the function of the game - how it interacts with the user
Time is updated regularly
Clicking on a grid element lights it up (unless 4 things are already lit), or unlights it if it's already lit.
When 4 items are lit & the submit button is pressed, it checks to see if those 4 items match any 1 group of correct connections.
When an invalid set is made, it responds with a popup that tells you it's not valid and disappears shortly thereafter.
When a valid set is made, it deselects all, removes the items from the grid, adds a new box that displays all 4 items and lists how they're connected.
Timer stops if all 4 sets have been identified.
Deselect button clears the selection.
New Game restarts the application
What I didn't implement
Difficulty Modes - The categories are already grouped by "difficulty". Each category word set is placed in either a Yellow, Green, Blue, or Purple list. Each of those lists/groupings is considered a difficulty, so every game will contain 1 Yellow, 1 Green, 1 Blue, and 1 Purple category set. Supposedly the different colors represent different difficulties, but that's not really the case. In my defense, the words were all organized and provided by Google Gemini.
Guess Limit - NY Times has a limit of 4 wrong guesses before they basically tell you "better luck tomorrow". I didn't want that limitation in this rendition. It would be easy enough to implement if desired at a later date (that could be part of the difficulty mode).