Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benschlegel/owldle
🎮 Guess the overwatch league player
https://github.com/benschlegel/owldle
game nextjs typescript
Last synced: about 2 months ago
JSON representation
🎮 Guess the overwatch league player
- Host: GitHub
- URL: https://github.com/benschlegel/owldle
- Owner: benschlegel
- License: agpl-3.0
- Created: 2024-09-13T13:46:21.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-10T17:37:09.000Z (about 2 months ago)
- Last Synced: 2024-11-10T18:31:26.971Z (about 2 months ago)
- Topics: game, nextjs, typescript
- Language: TypeScript
- Homepage: https://www.owldle.com
- Size: 8.21 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Guess the Overwatch League (OWL) player using a series of clues (like the players team, role, country and region). Resets every day at midnight.
Showcase
·
Features
·
Getting Started
·
About
·
Sponsor
## Showcase
|  |  |
| --- | --- |
|  |  |
## Features
This project was built using [`Next.js`](https://nextjs.org/) and [`tailwindcss`](https://tailwindcss.com/). Components are based on [`shadcn/ui`](https://ui.shadcn.com/). Tests were written with [`vitest`](https://vitest.dev/) and [`bun`](https://bun.sh/) is used instead of `npm`.
Major features are:
- 🎨 Consistent and dynamic themes (light + dark mode)
- All components use theme colors and automatically switch to correct theme
- 📱 Fully responsive
- Works and looks good on any screen size (desktop + mobile + everything in-between)
- 🛢 Dynamic database scheme
- Supports dynamic game iteration length (e.g. default to 1 reset per day, but can have more on event day)
- Supports multiple datasets (e.g. different seasons)
- saves iteration data to log (iteration number, correct player, time of reset)
- 🕵 Anonymous game result collection (game result + guesses, no information that could identify users)
- Scheme can be found under `types/database` (`type DbLoggedGame`)
- saved using `lib/databaseAccess.ts` (`function logGame()`)
- 🎲 Batched pseudo random selection
- Random backlog of players generated (to keep the game from being stale but also to avoid duplicate players for `backlog.length` iterations)
- 🛠️ Easily configurable
- The behavior of the game can easily be adjusted by changing values in `game.config.json`
- Check `lib/config.ts` to find out more info about the config.
- 🦿 Following modern accessiblity recommendations
- Fully compatible with screen readers
- Entire website can be navigated/used with keyboard inputs only
- All dialogs use search parameters (meaning you can share a link where e.g. the feedback dialog is open)
- 🕵 Anonymous + EU compliant analytics (using [`Plausible`](https://plausible.io/))
- ⚡ Blazingly fast through server side rendering + vercel edge functions/distributed servers
- 📃 Follows modern SEO standards
- Automatically generates `robots.txt` (through `robots.ts`)
- Automatically generates sitemap (through `sitemap.ts`)
- Uses site metadata (preview image, title, description, etc)
- 🧪 Contains tests for critical functionality
- Can be configured to automatically write test report/be ran through Github actions
- Tests for:
- Main game process + results
- Checks to ensure all images (even from country flag api) still work
- Database functions
- ⚠️ Full error handling
- All invalid input errors are caught client side (with toasts that show what went wrong, works on desktop and mobile) + server side (zod schema validation for all api post endpoints)
- Rate limit on all api endpoints to increase stability
- and more!
## Getting Started
First, clone the project locally and install dependencies. If you're only working locally, you can also use npm/pnpm/yarn, but this project was built and tested with bun.
```bash
bun install
# or
npm install
```
### env
Before starting the project, make sure you provide the following values to the environment (either directly or by creating a file called `.env.local` in the project root folder):
```bash
MONGO_URI=""
CRON_SECRET=""
# optional
ADMIN_API_TOKEN=""
```
The only *strictly necessary* entry is `MONGO_URI` (as you won't have a database otherwise), so make sure you provide a valid [`Mongodb`](https://www.mongodb.com/) [connection uri](https://www.mongodb.com/docs/manual/reference/connection-string/).
When trying to use this project in production, you should provide `CRON_SECRET`. This secret gets used in the `api/cron` path, which is responsible for resetting the game periodically (e.g. once per day).
The `ADMIN_API_TOKEN` can be used to secure the (WIP, not yet implemented) admin dashboard and can be skipped for now.
---
After setting up your environment and installing all dependencies, you can start the project like this:
```bash
bun run dev
# or
npm run dev
```
You should now be able to see the website running on `localhost:3000`.
To built the project, you can run
```bash
bun run build
bun run start
# or
npm run build
npm run start
```
## Tests
This project contains tests for the major features under `tests/*.test.ts`. Tests that only run locally are postfixed by `*.local.test.ts` to allow filtering when running tests and ensure local tests always run with maximum performance.
To run tests, run
```bash
bun run test:local # only runs local tests
# or
bun run test # runs all tests
# or (using npm)
npm run test:local # only runs local tests
# or
npm run test # runs all tests
```
I also created a custom test reporter, which writes the following fields to `tests/report.json`:
```json
{
"numTotalTests": "",
"numPassedTests": "",
"numFailedTests": "",
"numPendingTests": "
