• About the Project

  • Summary
  • Tech Stack
  • Features
  • Environment Variables

• Getting Started

  • Prerequisites
  • Run Locally

• Usage

• Roadmap

• License

• Contact

• Acknowledgements

Squirdle is a Pokémon-themed version of the popular game Wordle. Currently, all Pokémon from generations I - IV are available in game. Although features and bug fixes are planned, development on this project has been put on hold indefinitely. Assets and data have been scraped from Serebii, PokéAPI, and Project Pokémon.

The most up-to-date version of Squirdle is currently deployed at: https://squirdle.herokuapp.com.

Client

Server

Database

Deployment

To run this project, you will need to add the following environment variables to your .env file

• ATLAS_URI

This project uses NPM as a package manager

Clone the project

git clone https://github.com/czhangy/squirdle.git

Install dependencies

npm install

Start the server

npm run server

Start the application

npm run client

• Build out Nav

  • Application name links to home

  • How to play button

  • Binoculars button

  • Settings button

• Scrape data

  • Use PokéAPI to access data (API bug causes Heroku deploy error)
  • Scrape Pokémon attributes (name, generation, typing, evolution stage) from PokéAPI
  • Acquire image URLs of box sprites from Serebii
  • Acquire GIF URLs of main sprites from Project Pokémon
  • Generations I-VII (only I-IV done)

• Build out Dropdown

  • Dropdown results should filter by input
  • Dropdown should limit height and be scrollable beyond max height
  • Dropdown placeholder should display the current guess number
  • Each dropdown result should contain the Pokémon's box sprite and name
  • Dropdown results should be hoverable
  • Dropdown guess should submit on enter or button press
  • Button should be disabled temporarily after guess for debouncing

• Build out game logic

  • Players should have a maximum of 8 guesses
  • The 5 categories displayed to the player should be the box sprite, generation number, typing, evolution stage, and name length
  • Each panel must have 4 states: inactive, incorrect, close, and correct
  • Box sprites should never be close, only correct or incorrect
  • Generation numbers are close if the guessed Pokémon's generation is within 1 of the target's
  • Typing is close if at least one of the guessed Pokémon's types matches at least 1 of the target's, and correct if the types are an exact match
  • Evolution stages are close if the guessed Pokémon's stage is within 1 of the target's
  • Name lengths are close if the guessed Pokémon's length is within 2 of the target's
  • All guesses and current game state should be saved in local storage to allow player to persist their game

• Build out Game Grid

  • Game grid should have 8 rows, one for each possible guess
  • Game grid should be scrollable so that the grid can fit on a mobile screen, but hidden rows can be accessible via scroll
  • There should be headers to clarify which column reflects which attribute
  • Each row should have 5 panels, one for each attribute
  • Each panel should visually reflect its 4 possible states
  • When active, each panel should reflect the contents of the guess the row represents
  • On guess, the panels should flip in sequence
  • Warnings display for invalid guesses
  • After each guess, the next empty row in the grid should be automatically scrolled to

• Build out Game Over flow

  • On game over, a modal should appear reflecting what the target Pokémon was, including its attributes
  • Modal text should differentiate between a win and a loss
  • The dropdown should change into a reset button, allowing the player to generate a new target

• Build out How to Play modal

  • Modal should pop up automatically for first-time players (as defined by local storage contents)
  • Modal should allow smooth navigation between pages using buttons to the left and right
  • First page should summarize the goal of the game
  • Next pages should define the various states for each attribute
  • The final page should include credits, both personal and external

• Build out Binoculars modal

  • If game is in progress, a patch of grass should be displayed, indicating the target is unknown
  • If game is over, the game over modal should be accessible through this button

• Build out Settings modal

  • Sliders for light mode and hard mode toggle
  • Tooltips to explain light mode and hard mode
  • A button that navigates to the user's profile (saved in local storage)
  • A share button that copies a link to the application to allow users to share with friends
  • A feedback button that allows user to send feedback through email

• Build out Profile page

  • Display statistics of user: caught, seen, and streak
  • Display the user's Pokédex, where caught Pokémon display a box sprite, seen Pokémon display a silhouette sprite, and unseen Pokémon display their Pokédex number
  • Pokédex should be scrollable and update without refresh
  • Display the user's medals, which are pre-defined achievements based on game activity
  • Medals should be darkened and redacted when uncollected and reveal information when collected
  • Medals should display rarity, name, and description
  • A tab navigation system to switch between Pokédex and medals, with visual indicators for hover and active tabs

• Implement Light Mode

  • Should persist in local storage
  • Should change theming application-wide (buggy)

• Implement Hard Mode

  • Dropdown should be disabled, forcing users to type in each Pokémon name manually
  • Any hints obtained so far in the game must be used with each guess

• Implement Feedback Form

  • Should have a subject field and message field
  • Should disable multiple requests
  • Should be easy to navigate back to the settings modal

Distributed under the MIT License. See LICENSE for more information.

• Awesome README
• Shields.io
• Serebii
• PokéAPI
• Project Pokémon