s-hc/loldoku

Immaculate Grid: League of Legends Edition

Immaculate Grid: League of Legends Edition

---

---

• About • Screenshots • Features • Game Rules • Installation Guide • Scripts • Schema • License •

---

About

LOLDoku is an open source spin on the classic Immaculate Grid using champions from the popular MOBA game League of Legends. The goal of the game is to fill in the 3x3 grid with answers that match the clues given. New puzzles are generated daily, and users can sign in (OAuth2.0) to access their stats.

Important

LOLDoku is not endorsed by Riot Games and does not reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. Riot Games and all associated properties are trademarks or registered trademarks of Riot Games, Inc.

Screenshots

Click to view Images

Rules Modal:

Interface:

---

Click to view GIFs

Google OAuth:

Selection:

Features

• Secure GitHub and Google sign in! Sign in with your Google account.

• Dark Mode! Enjoy LOLDoku in your light or dark theme of choice.

• Daily puzzles! New unique puzzles are generated daily at midnight PST.

• If you run into any bugs or have feedback: [email protected]

Installation Guide

1. Fork the LOLdoku repository to your own GitHub account.
2. Clone the repository to your local environment.

git clone https://github.com/<your-github-username>/LOLDoku.git

4. Navigate to the root project directory and install dependencies

cd LOLDoku
npm install

5. Please look through the package.json file to see what scripts are available. Any script can be run with npm run <scriptname>. To run application in development, run the following command:

npm run dev

6. Please look at the terminal logs to see what port the application is running on.

Scripts

The scripts section of the package.json file define various commands to streamline development and deployment processes. The following is an overview of each script:

• dev For development purposes. Compiles TypeScript code and concurrently runs Vite dev server for front-end and Nodemon for back-end. Allows for real-time reloading during development.

• start Used for running application in production-like environment. Compiles TypeScript code and starts server using Nodemon, which will automatically restart server if any changes are detected in server files.

• test Runs Jest test runner in watch mode, continuously monitoring for any changes in .test.ts/.test.tsx files and re-runs tests as needed. Useful during development for immediate feedback on code changes.

• build Triggers Vite build process for front-end application. Compiles and bundles React application into static files optimized for production.

• build:watch Runs TypeScript compiler in watch mode, continuously monitoring for any changes in .ts/.tsx files and recompiles them as needed. Useful during development for immediate feedback on code changes.

• preview Locally preview production build of front-end application. Serves static files generated by Vite build command, allowing local testing of production build before deployment.

• migrate Runs Prisma migration commands to update database schema. Useful for updating database schema after making changes to Prisma models.

Schema

License

This project is licensed under the terms of the MIT LICENSE

loldoku's Issues

UX Update

🌳 BRANCHING:
Branch off main
PR into main

😿 ISSUE:

• After typing in a character name, pressing enter should make a selection of the first champion on suggested dropdown

3x3 Not Responsive to Various Window Sizes

🌳 BRANCHING:
Branch off main
PR into main

😿 ISSUE:

• 3x3 Grid and it's surrounding components are not responsive to window size

Fix Test: Authentication.tsx

🌳 BRANCHING:

• Branch off [main]
• PR into [main]

😿 ISSUE:

• Currently, the .env variable for the VITE_BACKEND_URL is used with import.meta.env.VITE_BACKEND_URL to route to backend /auth/google in client/components/Authentication.tsx
• This solution currently works, and authentication works properly with no issues. However, the unit tests no longer work because of the following error:

/LOLDoku/src/client/components/Authentication.tsx:18
        var backendUrl = "".concat(import.meta.env.VITE_BACKEND_URL, "/auth/google");
                                          ^^^^

    SyntaxError: Cannot use 'import.meta' outside a module

This issue triggers test faillure in Navbar.test.tsx and Authentication.test.tsx

🟢 TASK:

• Modify settings to allow for proper reading of environment variable.
• Maybe utilization of babel-plugin-transformer
• You will need to npm run build and then run npm run test after making changes
• Please ensure that before making the PR, manual run through authentication portion of application via npm run dev

The options in the navbar disappear

These buttons disappear when the width of the window is below 1024px

To recreate:

• run

npm run dev

• Narrow the window
  happened for me at 868.67 px X 1024 px
  

UX Update: Champion Name

🌳 BRANCHING:
Branch off main
PR into main

😿 ISSUE:

If the Champion's splash art is a lighter hue, the champion name becomes difficult to read
e.g.

Proposed Fix:
Add a background to the champion name in grid