WordSkull

A word game website project based on Wordle.

I'm using Remix with Vite, Tailwind CSS, Express, PostgreSQL, Digital Ocean for hosting, Cloudflare CDN, Cloudflare R2, Vitest for unit, component, & integration testing, and Selenium w/ Python for end-to-end testing (coming soon).

This project is still in development but can be viewed live on WordSkull.

---

Table of Contents

• How to Use
• Home Page Features
• Responsive Design
• Classic WordSkull Game
• Testing

How To Use

1. Clone the Repository:

   • Clone the repository to your local machine:

     git clone <repository-url>

   • Alternatively, download the ZIP and extract it to your local machine.

2. Install Dependencies:

   • Navigate to the project folder and install the required dependencies:

     npm install

3. Run the Development Server:

   • Start the local development server:

     npm run dev

   • Access the app via your browser at http://localhost:3000 (or another port depending on your setup).

4. Build for Deployment:

   • Build the production version:

     npm run build

   • The optimized files will be in the dist or build folder for deployment.

5. Run Tests:

   • Ensure everything works by running:

     npm test

Home Page Features

• Toggle between light and dark mode with a single click.

Difficulty Levels:

• Easy: 3 - 5 letters
• Medium: 3 - 6 letters
• Hard: 3 - 7 letters
• Extreme: 3 - 9 letters

Responsive Design

The app is optimized for all screen sizes!

Classic WordSkull Game Page - Easy Mode

• Learn how to play: Word Skull Game Easy Mode Instructions

Feature Demo #1: Virtual Keyboard & Keypad Functionality

We’ve recently introduced an interactive virtual keyboard (for large screens) and keypad (for small screens) in WordSkull! Check out the demo to see it in action:

Watch Feature Demo on YouTube

---

Testing

• Run the test suite:

  npm test

Project To-Do List

• Setup project repo
• Create a project plan
• Implement NavBar
• Implement Footer
• Implement universal header
• Design skull patterns in a JSON file & implement logic to render out the board using these designs & apply appropriate styling.
• Use designs to create flashy animation on home page.
• Add menu to home pg that links to each difficulty mode & implement routes for each.
• Add logic to randomly render skull of a max row length depending on difficulty. Eg. easy difficulty will only include skulls with 3 - 5 characters per row.
• Add logic to handle keyboard events so that users can type out each row.
• Add logic to submit each completed row & check for validation.
• Implement preview for last word entered and have it linked to a modal that opens up to display all attempted words.
• Add logic to display words preview in modal based on current row. Allow users to check prior row entries too via arrow buttons at the top of the modal menu.
• Implement & track total lives.
• Add logic to handle game over (all lives are exhausted or all rows are completed successfully).
• Add logic to toggle entered words preview modal by either pressing and holding shift or pressing space bar once.
• Implement virtual keyboard & style it.
• Add logic to words preview to display validation for each character entered. If a character is in the correct location it should be green. If it is in the word but in the wrong location, it should be yellow.
• Add logic to both virtual keyboard and apply validation logic to highlight keys are displayed as valid/invalid using the same colour coded logic as the step above for entered words preview.
• Implement button to handle light/dark mode.
• Apply styling to all elements based on light/dark mode.
• Add logic to preserve light/dark mode setting in local storage.
• Add game over menu that displays words completed, lives used, and time spent.
• Add unit tests & start consistently unit testing each component alongside each feature/update etc.
• Deploy to production via Digital Ocean
• Add to Cloudflare CDN
• Apply SSL cert
• Create a dynamically generated sitemap & submit website/sitemap to Google Search Console & Bing Webmaster for indexing.
• Update Readme
• Generate a list of words sorted by char length & host list on Cloudflare R2. Load file from API. Have a smaller list of words available within the repo for the app to fallback on if connecting to R2 bucket fails.
• Add logic to game over menu to allow users to download/copy/share a snapshot of their gameplay results.
• Add play again button to game over menu.
• Update Readme
• Add buttons in game page header to allow users to view game over modal (when game ends), stats modal, instructions anchor link, and settings modal.
• Add gameplay instructions to be displayed under keyboard, which includes simple text and image instructions.
• Implement settings modal.
• Implement responsive design for all existing pages.
• Implement a virtual mobile keypad for small to medium screens while hiding virtual keyboard. Display virtual keyboard and hide virtual keypad for medium/large screens.
• Add button & logic to settings modal to hide/show virtual keyboard.
• Add logic to keyboard/keypad to allow users to interact directly with virtual keyboard.
• Add settings to toggle on/off keyboard interactivity.
• Add settings to hide/show gameplay instructions.
• Use react portals to render modal correctly.
• Add PostHog to track user analytics
• Add improved animations & delay to gameplay logic/styling
• Add PostHog to track user analytics
• End 2 End Testing
• Add animation that throws confetti when user completes a row successfully or wins the game.
• Add settings to disable confetti.
• Mark existing repo as demo, clone Repo, make new repo private, continue work on private repo.
• Animate the eyes.
• Add character description page for each skull.
• Add unique dialogue/text for each skull.
• Add gameplay animations to make game feel more rewarding.
• Implement db & server side logic to create universal puzzles that can be shared by users. Use this logic to include daily puzzles that are the same for all users.
• Implement db table to track & manage stats currently being managed by context/local storage.
• Implement stats page which will allow users to track stats across all game modes.
• Use chart.js to add graphs to stats page.
• Try Drizzle ORM
• Implement user login w/ custom auth logic
• Implement social user login w/ OAuth
• Implement Zen game mode which provides the users with unlimited lives/attempts
• Implement Challenge game mode which includes a countdown timer to complete challenge
• Implement Num Skull - Word skull with numbers
• Implement Sum Skull - Addition game
• Implement Sub Skull - Subtraction game
• Implement Div Skull - Division game
• Implement Mull Skull - Multiplication game
• Implement World Skull - Geography trivia word game
• Implement Food Skull - Food trivia word game
• Implement Food Skull - Food trivia word game
• Implement Leaderboard for each game type
• Implement Leaderboard that summarizes all gameplay activity across the site
• Add comprehensive FAQ page
• Add advanced game settings eg. sound, disable entered words menu, etc.
• Add contact form using Nodemailer and AWS SES for email & Cloudflare turnstile for CAPTCHA.
• Add custom theme options & accessability features.
• Implement blog page to utilize .mdx pages to post well formatted blogs easily.
• Add articles to blog.
• Start work on implementing games for mobile using React Native.