Repository: codicocodes/speedtyper.dev
Branch: main
Commit: 7778555e37a4
Files: 217
Total size: 304.8 KB

Directory structure:
gitextract_8g1dy2zt/

├── .github/
│   └── workflows/
│       └── webapp-linting-and-unit-tests.yaml
├── .gitignore
├── CONTRIBUTING.md
├── LICENSE
├── Makefile
├── README.md
└── packages/
    ├── back-nest/
    │   ├── .eslintrc.js
    │   ├── .gitignore
    │   ├── .prettierrc
    │   ├── Dockerfile
    │   ├── README.md
    │   ├── docker-compose.yml
    │   ├── nest-cli.json
    │   ├── package.json
    │   ├── scripts/
    │   │   ├── seed-local.sh
    │   │   └── seed-production.sh
    │   ├── src/
    │   │   ├── app.module.ts
    │   │   ├── auth/
    │   │   │   ├── auth.module.ts
    │   │   │   └── github/
    │   │   │       ├── github.controller.ts
    │   │   │       ├── github.guard.ts
    │   │   │       └── github.strategy.ts
    │   │   ├── challenges/
    │   │   │   ├── challenges.module.ts
    │   │   │   ├── commands/
    │   │   │   │   ├── calculate-language-runner.ts
    │   │   │   │   ├── challenge-import-runner.ts
    │   │   │   │   ├── reformat-challenges-runner.ts
    │   │   │   │   └── unsynced-file-import-runner.ts
    │   │   │   ├── entities/
    │   │   │   │   ├── challenge.entity.ts
    │   │   │   │   ├── language.dto.ts
    │   │   │   │   └── unsynced-file.entity.ts
    │   │   │   ├── languages.controller.ts
    │   │   │   └── services/
    │   │   │       ├── challenge.service.ts
    │   │   │       ├── literal.service.ts
    │   │   │       ├── parser.service.ts
    │   │   │       ├── tests/
    │   │   │       │   └── parser.service.spec.ts
    │   │   │       ├── ts-parser.factory.ts
    │   │   │       ├── unsynced-file-filterer.ts
    │   │   │       ├── unsynced-file-importer.ts
    │   │   │       └── unsynced-file.service.ts
    │   │   ├── commands.ts
    │   │   ├── config/
    │   │   │   ├── cors.ts
    │   │   │   └── postgres.ts
    │   │   ├── connectors/
    │   │   │   └── github/
    │   │   │       ├── github.module.ts
    │   │   │       ├── schemas/
    │   │   │       │   ├── github-blob.dto.ts
    │   │   │       │   ├── github-repository.dto.ts
    │   │   │       │   └── github-tree.dto.ts
    │   │   │       └── services/
    │   │   │           └── github-api.ts
    │   │   ├── database.module.ts
    │   │   ├── filters/
    │   │   │   └── exception.filter.ts
    │   │   ├── main.ts
    │   │   ├── middlewares/
    │   │   │   └── guest-user.ts
    │   │   ├── projects/
    │   │   │   ├── commands/
    │   │   │   │   ├── import-untracked-projects-runner.ts
    │   │   │   │   └── sync-untracked-projects-runner.ts
    │   │   │   ├── entities/
    │   │   │   │   ├── project.entity.ts
    │   │   │   │   └── untracked-project.entity.ts
    │   │   │   ├── project.controller.ts
    │   │   │   ├── projects.module.ts
    │   │   │   └── services/
    │   │   │       ├── project.service.ts
    │   │   │       ├── projects-from-file-reader.ts
    │   │   │       └── untracked-projects.service.ts
    │   │   ├── races/
    │   │   │   ├── entities/
    │   │   │   │   └── race-settings.dto.ts
    │   │   │   ├── race.controllers.ts
    │   │   │   ├── race.exceptions.ts
    │   │   │   ├── race.gateway.ts
    │   │   │   ├── races.module.ts
    │   │   │   └── services/
    │   │   │       ├── add-keystroke.service.ts
    │   │   │       ├── countdown.service.ts
    │   │   │       ├── keystroke-validator.service.ts
    │   │   │       ├── locker.service.ts
    │   │   │       ├── progress.service.ts
    │   │   │       ├── race-events.service.ts
    │   │   │       ├── race-manager.service.ts
    │   │   │       ├── race-player.service.ts
    │   │   │       ├── race.service.ts
    │   │   │       ├── results-handler.service.ts
    │   │   │       ├── session-state.service.ts
    │   │   │       └── tests/
    │   │   │           └── race-player.service.spec.ts
    │   │   ├── results/
    │   │   │   ├── entities/
    │   │   │   │   ├── leaderboard-result.dto.ts
    │   │   │   │   └── result.entity.ts
    │   │   │   ├── errors.ts
    │   │   │   ├── results.controller.ts
    │   │   │   ├── results.module.ts
    │   │   │   └── services/
    │   │   │       ├── result-calculation.service.ts
    │   │   │       ├── result-factory.service.ts
    │   │   │       └── results.service.ts
    │   │   ├── seeder/
    │   │   │   ├── commands/
    │   │   │   │   └── challenge.seeder.ts
    │   │   │   └── seeder.module.ts
    │   │   ├── sessions/
    │   │   │   ├── session.adapter.ts
    │   │   │   ├── session.entity.ts
    │   │   │   ├── session.middleware.ts
    │   │   │   └── types.d.ts
    │   │   ├── tracking/
    │   │   │   ├── entities/
    │   │   │   │   └── event.entity.ts
    │   │   │   ├── tracking.module.ts
    │   │   │   └── tracking.service.ts
    │   │   ├── users/
    │   │   │   ├── controllers/
    │   │   │   │   └── user.controller.ts
    │   │   │   ├── entities/
    │   │   │   │   ├── upsertGithubUserDTO.ts
    │   │   │   │   └── user.entity.ts
    │   │   │   ├── services/
    │   │   │   │   └── user.service.ts
    │   │   │   ├── users.module.ts
    │   │   │   └── utils/
    │   │   │       └── generateRandomUsername.ts
    │   │   └── utils/
    │   │       └── validateDTO.ts
    │   ├── tracked-projects.txt
    │   ├── tsconfig.build.json
    │   └── tsconfig.json
    └── webapp-next/
        ├── .eslintrc.json
        ├── .gitignore
        ├── .prettierrc
        ├── README.md
        ├── Socket.ts
        ├── assets/
        │   └── icons/
        │       ├── BattleIcon.tsx
        │       ├── CopyIcon.tsx
        │       ├── CrossIcon.tsx
        │       ├── CrownIcon.tsx
        │       ├── DiscordLogo.tsx
        │       ├── DownArrowIcon.tsx
        │       ├── GithubLogo.tsx
        │       ├── InfoIcon.tsx
        │       ├── KogWheel.tsx
        │       ├── LinkIcon.tsx
        │       ├── OnlineIcon.tsx
        │       ├── PlayIcon.tsx
        │       ├── ProfileIcon.tsx
        │       ├── ReloadIcon.tsx
        │       ├── RightArrowIcon.tsx
        │       ├── TerminalIcon.tsx
        │       ├── TwitchLogo.tsx
        │       ├── UserGroupIcon.tsx
        │       ├── WarningIcon.tsx
        │       ├── YoutubeLogo.tsx
        │       └── index.tsx
        ├── common/
        │   ├── api/
        │   │   ├── auth.ts
        │   │   ├── races.ts
        │   │   ├── types.ts
        │   │   └── user.ts
        │   ├── components/
        │   │   ├── Avatar.tsx
        │   │   ├── BattleMatcher.tsx
        │   │   ├── Button.tsx
        │   │   ├── Footer/
        │   │   │   └── YoutubeLink.tsx
        │   │   ├── Footer.tsx
        │   │   ├── Layout.tsx
        │   │   ├── NewNavbar.tsx
        │   │   ├── Overlay.tsx
        │   │   ├── buttons/
        │   │   │   ├── GithubLoginButton.tsx
        │   │   │   └── ModalCloseButton.tsx
        │   │   ├── modals/
        │   │   │   ├── GithubLoginModal.tsx
        │   │   │   ├── GithubModal.tsx
        │   │   │   ├── Modal.tsx
        │   │   │   ├── ProfileModal.tsx
        │   │   │   └── SettingsModal.tsx
        │   │   └── overlays/
        │   │       ├── GithubLoginOverlay.tsx
        │   │       └── SettingsOverlay.tsx
        │   ├── github/
        │   │   └── stargazers.ts
        │   ├── hooks/
        │   │   ├── useIsPlaying.ts
        │   │   └── useSocket.ts
        │   ├── services/
        │   │   └── Socket.ts
        │   ├── state/
        │   │   └── user-store.ts
        │   └── utils/
        │       ├── clipboard.ts
        │       ├── cpmToWPM.ts
        │       ├── getServerUrl.ts
        │       ├── router.ts
        │       └── toHumanReadableTime.ts
        ├── components/
        │   ├── Countdown.tsx
        │   ├── Navbar.tsx
        │   └── Stream.tsx
        ├── hooks/
        │   ├── useKeyMap.ts
        │   └── useTotalSeconds.ts
        ├── modules/
        │   └── play2/
        │       ├── components/
        │       │   ├── CodeArea.tsx
        │       │   ├── HiddenCodeInput.tsx
        │       │   ├── IncorrectChars.tsx
        │       │   ├── NextChar.tsx
        │       │   ├── RaceSettings.tsx
        │       │   ├── ResultsChart.tsx
        │       │   ├── SmoothCaret.tsx
        │       │   ├── TweetResult.tsx
        │       │   ├── TypedChars.tsx
        │       │   ├── UntypedChars.tsx
        │       │   ├── leaderboard/
        │       │   │   ├── Leaderboard.tsx
        │       │   │   └── LeaderboardButton.tsx
        │       │   ├── play-footer/
        │       │   │   ├── ChallengeSource/
        │       │   │   │   ├── ChallengeSource.tsx
        │       │   │   │   └── index.ts
        │       │   │   └── PlayFooter/
        │       │   │       ├── PlayFooter.tsx
        │       │   │       └── index.ts
        │       │   ├── play-header/
        │       │   │   └── PlayHeader/
        │       │   │       ├── PlayHeader.tsx
        │       │   │       └── index.tsx
        │       │   └── race-settings/
        │       │       └── LanguageSelector.tsx
        │       ├── containers/
        │       │   ├── CodeTypingContainer.tsx
        │       │   └── ResultsContainer.tsx
        │       ├── hooks/
        │       │   ├── useChallenge.ts
        │       │   ├── useEndGame.ts
        │       │   ├── useFocusRef.ts
        │       │   ├── useGame.ts
        │       │   ├── useGameIdQueryParam.ts
        │       │   ├── useIsCompleted.ts
        │       │   ├── useNodeRect.ts
        │       │   └── useResetStateOnUnmount.ts
        │       ├── services/
        │       │   └── Game.ts
        │       └── state/
        │           ├── code-store.ts
        │           ├── connection-store.ts
        │           ├── game-store.ts
        │           ├── settings-store.ts
        │           └── trends-store.ts
        ├── next.config.js
        ├── package.json
        ├── pages/
        │   ├── 404.tsx
        │   ├── _app.tsx
        │   ├── _document.tsx
        │   ├── index.tsx
        │   └── results/
        │       └── [id].tsx
        ├── postcss.config.js
        ├── public/
        │   └── robots.txt
        ├── styles/
        │   └── globals.css
        ├── tailwind.config.js
        ├── tsconfig.json
        └── utils/
            ├── calculateAccuracy.ts
            ├── cpmToWpm.ts
            ├── getTimeDifference.ts
            ├── humanize.ts
            └── stripIndentation.ts

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/workflows/webapp-linting-and-unit-tests.yaml
================================================
name: Frontent linting and unit tests
 
on:
  push:
    branches:
      - main
  pull_request:
 
env:
  NODE_VERSION: 16
 
jobs:
  linting-and-tests:
    name: Webapp linting and unit tests
    runs-on: ubuntu-latest
    steps:
      - name: Install NodeJS
        uses: actions/setup-node@v2
        with:
          node-version: ${{ env.NODE_VERSION }}
 
      - name: Code Checkout
        uses: actions/checkout@v2
 
      - name: Install webapp dependencies
        run: yarn --cwd ./packages/webapp-next install --frozen-lockfile

      - name: Build webapp
        run: yarn --cwd ./packages/webapp-next build
 
      - name: Webapp code linting
        run: yarn --cwd ./packages/webapp-next lint --quiet

      - name: Webapp unit test
        run: echo "no tests to run"


================================================
FILE: .gitignore
================================================
# Notes
.mind

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Deploys
.netlify

# Compiled binary addons (https://nodejs.org/api/addons.html)
dist/
artifacts/
tmp/

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env

# Local Netlify folder
.netlify

# development
.idea


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing

*This is a work in progress.*

### **Table of Contents**
- [Required](#required) 
- [Running Speedtyper.dev](#running-speedtyperdev)
    - [Backend](#backend)
    - [Frontend](#frontend)

## Required

|Prerequisite                               |Link                                                                   |
|-------------------------------------------|-----------------------------------------------------------------------|
|Git                                        |[🔗](https://git-scm.com/downloads)                                   |
|Node 20                                    |[🔗](https://nodejs.org/en/)                                          |
| Yarn                                      |[🔗](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)|
|PostgreSQL                                 |            |
|build-essential (or equivalent for your OS)|                                                                       |
| Docker (Optional)                         |[🔗](https://www.docker.com/)                                         |

## Running Speedtyper.dev

### Backend

1. Install dependencies:

    ```
    make install-backend-dependencies
    ```
1. Copy over path of env file:

    ```
    cp ./packages/back-nest/.env.development ./packages/back-nest/.env
    ```

1. Generate [Github Access Token (classic)](https://github.com/settings/tokens) with `public_repo` permissions and update `GITHUB_ACCESS_TOKEN` variable in `./packages/back-nest/.env` with the token value. It is used to download seed data from GitHub.

1. Start Docker Compose in the background:

    ```
    make run-dev-db
    ```

1. Seed the db with example challenges:

    ```
    make run-seed-codesources
    ```

1. Run the backend:

    ```
    make run-backend-dev
    ```

### Frontend

1. Install dependencies:

    ```
    make install-webapp-dependencies
    ```

1. Run the frontend:

    ```
    make run-webapp-dev
    ```


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2022 codico <codicocodes@gmail.com>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: Makefile
================================================
# backend

install-backend-dependencies:
	yarn --cwd ./packages/back-nest

run-backend-dev:
	yarn --cwd ./packages/back-nest start:dev

run-dev-db:
	docker compose -f ./packages/back-nest/docker-compose.yml up -d

run-seed-codesources:
	yarn --cwd ./packages/back-nest command seed-challenges

# webapp

install-webapp-dependencies:
	yarn --cwd ./packages/webapp-next

run-webapp-dev:
	yarn --cwd ./packages/webapp-next dev


================================================
FILE: README.md
================================================

<br>
<div align="center">
  <a href="https://speedtyper.dev" target="_blank">
    <img src="https://www.speedtyper.dev/logo.png" alt="Speedtyper" height="100" width="auto"/>
  </a>
  <h1><i>speedtyper.dev</i></h1>
</div>

<p align="center">
  <b>
      Typing competitions for programmers 🧑‍💻👩‍💻👨‍💻
  </b>
</p>
<p align="center">
  <a href="https://github.com/codicocodes/speedtyper.dev" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/codicocodes/speedtyper.dev?style=social"></a>
</p>

### **Table of Contents**
- [Features](#features-🎉)
- [Contribute](#contribute-👷)
- [Community](#community-☕)
- [License](#license-📜)
- [Project Contributors](#project-contributors⭐)

## Features 🎉

- ✍️ [**Practice**](https://speedtyper.dev/play?mode=private) - type code snippets from real open source projects
- 🏎️ [**Battle**](https://speedtyper.dev/play?mode=private) - play with your friends in real time with the private race mode
- 🏅 [**Compete**](https://speedtyper.dev) - get on the global leaderboard

## Contribute 👷
- 🦄 **Pull requests are very appreciated!**
- 📚 Read the [contributor introduction (wip)](https://github.com/codicocodes/speedtyper.dev/blob/main/CONTRIBUTING.md)
- 🐛 If you encounter a bug, please [open an issue](https://github.com/codicocodes/speedtyper.dev/issues/new)
- 🗨️ If you want to make a large change, please [open an issue](https://github.com/codicocodes/speedtyper.dev/issues/new) so we can discuss it!

## Community ☕
<a href="https://discord.gg/AMbnnN5eep" target="__blank">
  <img src="https://discordapp.com/api/guilds/774781405506568202/widget.png?style=banner2" alt="SpeedTyper Discord" width="auto" height="50px"/>
</a>
<a href="https://twitch.tv/codico" target="__blank">
  <img src="https://user-images.githubusercontent.com/76068197/187993983-6133fe16-46ed-45f7-a459-fa798bda4a92.png" alt="Twitch Stream" width="auto" height="50px"/>
</a>

## License 📜

speedtyper.dev is open source software licensed as [MIT](https://github.com/codicocodes/speedtyper.dev/blob/main/LICENSE).

The [logo](https://github.com/codicocodes/speedtyper.dev/blob/main/packages/webapp/public/images/logo.png) is made by [astrocanyounaut](https://www.twitch.tv/astrocanyounaut) 🧑‍🚀 and is not licensed under MIT.


## Project Contributors⭐ 

<a href="https://github.com/codicocodes/speedtyper.dev/graphs/contributors" align="center">
  <img src="https://contrib.rocks/image?repo=codicocodes/speedtyper.dev" /> 
</a>


================================================
FILE: packages/back-nest/.eslintrc.js
================================================
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir : __dirname, 
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js', 'node_modules', 'dist'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};


================================================
FILE: packages/back-nest/.gitignore
================================================
# compiled output
/dist
/node_modules

# Logs
logs
*.log
npm-debug.log*
pnpm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# OS
.DS_Store

# Tests
/coverage
/.nyc_output

# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace

# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json

================================================
FILE: packages/back-nest/.prettierrc
================================================
{
  "singleQuote": true,
  "trailingComma": "all"
}

================================================
FILE: packages/back-nest/Dockerfile
================================================
FROM node:20

# Create app directory
RUN mkdir -p /app
WORKDIR /app

# Install app dependencies
COPY package.json /app
COPY yarn.lock /app
RUN yarn install --frozen-lockfile

# Bundle app source
COPY . /app
RUN yarn build

EXPOSE 80

CMD [ "node", "dist/main.js" ]


================================================
FILE: packages/back-nest/README.md
================================================
## Seed challenge data

### Seed test challenges

`yarn command seed-challenges`

### Seed production challenges

Requires configuring a personal `GITHUB_ACCESS_TOKEN` in your .env file

`yarn command import-projects`
`yarn command sync-projects`
`yarn command import-files`
`yarn command import-challenges`


================================================
FILE: packages/back-nest/docker-compose.yml
================================================
# Use postgres/example user/password credentials
version: "3.1"

services:
  db:
    image: postgres
    restart: always

    ports:
      - 5432:5432

    environment:
      POSTGRES_USERNAME: postgres
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: speedtyper

  adminer:
    image: adminer
    restart: always
    ports:
      - 8080:8080


================================================
FILE: packages/back-nest/nest-cli.json
================================================
{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src"
}


================================================
FILE: packages/back-nest/package.json
================================================
{
  "name": "back-nest",
  "version": "0.0.1",
  "description": "",
  "author": "",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "command": "TS_NODE_PROJECT=./tsconfig.json ts-node -r tsconfig-paths/register ./src/commands.ts",
    "prebuild": "rimraf dist",
    "build": "nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "yarn start:prod",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },
  "dependencies": {
    "@nestjs/axios": "^0.1.0",
    "@nestjs/common": "^9.0.0",
    "@nestjs/config": "^2.2.0",
    "@nestjs/core": "^9.0.0",
    "@nestjs/passport": "^9.0.0",
    "@nestjs/platform-express": "^9.0.0",
    "@nestjs/platform-socket.io": "^9.1.4",
    "@nestjs/typeorm": "^10.0.1",
    "@nestjs/websockets": "^9.1.4",
    "@sentry/node": "^7.37.2",
    "@types/passport-github": "^1.1.7",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.13.2",
    "connect-typeorm": "^2.0.0",
    "express-session": "^1.17.3",
    "express-socket.io-session": "^1.3.5",
    "nest-commander": "^3.1.0",
    "passport": "^0.6.0",
    "passport-github": "^1.1.0",
    "pg": "^8.8.0",
    "pg-query-stream": "^4.3.0",
    "reflect-metadata": "^0.1.13",
    "rimraf": "^3.0.2",
    "rxjs": "^7.2.0",
    "socket.io": "^4.5.2",
    "tree-sitter": "^0.20.0",
    "tree-sitter-c": "^0.19.0",
    "tree-sitter-c-sharp": "^0.19.0",
    "tree-sitter-cpp": "^0.19.0",
    "tree-sitter-css": "^0.19.0",
    "tree-sitter-go": "^0.19.1",
    "tree-sitter-java": "^0.19.1",
    "tree-sitter-javascript": "^0.19.0",
    "tree-sitter-lua": "^1.6.2",
    "tree-sitter-ocaml": "^0.19.0",
    "tree-sitter-php": "^0.19.0",
    "tree-sitter-python": "^0.19.0",
    "tree-sitter-ruby": "^0.19.0",
    "tree-sitter-rust": "^0.19.1",
    "tree-sitter-scala": "^0.19.0",
    "tree-sitter-typescript": "^0.19.0",
    "typeorm": "^0.3.10",
    "unique-names-generator": "^4.7.1"
  },
  "devDependencies": {
    "@nestjs/cli": "^9.0.0",
    "@nestjs/schematics": "^9.0.0",
    "@nestjs/testing": "^9.0.0",
    "@types/express": "^4.17.13",
    "@types/express-session": "^1.17.5",
    "@types/express-socket.io-session": "^1.3.6",
    "@types/jest": "28.1.8",
    "@types/node": "^20.0.0",
    "@types/supertest": "^2.0.11",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "eslint": "^8.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "jest": "28.1.3",
    "prettier": "^2.3.2",
    "source-map-support": "^0.5.20",
    "supertest": "^6.1.3",
    "ts-jest": "28.0.8",
    "ts-loader": "^9.2.3",
    "ts-node": "^10.0.0",
    "tsconfig-paths": "4.1.0",
    "typescript": "^4.7.4"
  },
  "jest": {
    "moduleFileExtensions": [
      "node",
      "js",
      "json",
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
    "transform": {
      "^.+\\.(t|j)s$": "ts-jest"
    },
    "collectCoverageFrom": [
      "**/*.(t|j)s"
    ],
    "coverageDirectory": "../coverage",
    "testEnvironment": "node",
    "moduleNameMapper": {
      "^src/(.*)$": "<rootDir>/$1"
    }
  }
}


================================================
FILE: packages/back-nest/scripts/seed-local.sh
================================================
#!/bin/bash

yarn command import-projects &&
yarn command sync-projects &&
yarn command import-files &&
yarn command import-challenges


================================================
FILE: packages/back-nest/scripts/seed-production.sh
================================================
#!/bin/bash
railway run ./seed-local.sh


================================================
FILE: packages/back-nest/src/app.module.ts
================================================
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { GithubConnectorModule } from './connectors/github/github.module';
import { ProjectsModule } from './projects/projects.module';
import { ChallengesModule } from './challenges/challenges.module';
import { UsersModule } from './users/users.module';
import { PostgresModule } from './database.module';
import { RacesModule } from './races/races.module';
import { SeederModule } from './seeder/seeder.module';
import { ResultsModule } from './results/results.module';
import { AuthModule } from './auth/auth.module';

@Module({
  imports: [
    ChallengesModule,
    ConfigModule.forRoot(),
    GithubConnectorModule,
    PostgresModule,
    ProjectsModule,
    RacesModule,
    ResultsModule,
    SeederModule,
    UsersModule,
    AuthModule,
  ],
  controllers: [],
  providers: [],
})
export class AppModule {}


================================================
FILE: packages/back-nest/src/auth/auth.module.ts
================================================
import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';
import { ConfigModule } from '@nestjs/config';
import {
  AuthController,
  GithubAuthController,
} from './github/github.controller';
import { GithubStrategy } from './github/github.strategy';
import { UsersModule } from 'src/users/users.module';
import { RacesModule } from 'src/races/races.module';

@Module({
  imports: [
    PassportModule.register({
      // session: true,
    }),
    ConfigModule,
    UsersModule,
    RacesModule,
  ],
  controllers: [GithubAuthController, AuthController],
  providers: [GithubStrategy],
})
export class AuthModule {}


================================================
FILE: packages/back-nest/src/auth/github/github.controller.ts
================================================
import {
  Controller,
  Delete,
  Get,
  HttpException,
  Req,
  Res,
  UseGuards,
} from '@nestjs/common';
import { Request, Response } from 'express';
import { cookieName } from 'src/sessions/session.middleware';
import { User } from 'src/users/entities/user.entity';
import { GithubOauthGuard } from './github.guard';

@Controller('auth')
export class AuthController {
  @Delete()
  async logout(@Req() request: Request, @Res() response: Response) {
    await new Promise<void>((resolve, reject) =>
      request.session?.destroy((err) => {
        console.log('session destroyed', { err });
        if (err) {
          return reject(err);
        }
        return resolve();
      }),
    );
    response.clearCookie(cookieName);
    return response.send({
      ok: true,
    });
  }
}

@Controller('auth/github')
export class GithubAuthController {
  @Get()
  @UseGuards(GithubOauthGuard)
  async githubLogin() {
    // NOTE: the GithubOauthGuard initiates the authentication flow
  }

  @Get('callback')
  @UseGuards(GithubOauthGuard)
  async githubCallback(
    @Req() request: Request,
    @Res({ passthrough: true }) response: Response,
  ) {
    if (!request.session) {
      throw new HttpException('Internal server error', 500);
    }
    request.session.user = request.user as User;
    const next =
      process.env.NODE_ENV === 'production'
        ? 'https://www.speedtyper.dev'
        : 'http://localhost:3001';
    response.redirect(next);
  }
}


================================================
FILE: packages/back-nest/src/auth/github/github.guard.ts
================================================
import { ExecutionContext, Injectable } from '@nestjs/common';
import { AuthGuard, IAuthModuleOptions } from '@nestjs/passport';
import { Request } from 'express';

@Injectable()
export class GithubOauthGuard extends AuthGuard('github') {
  getAuthenticateOptions(context: ExecutionContext): IAuthModuleOptions {
    const request = context.switchToHttp().getRequest<Request>();
    return {
      state: this.getState(request),
      session: true,
    };
  }

  getState(request: Request) {
    const { next } = request.query as Record<string, string>;
    const queryParams = next
      ? {
          next,
        }
      : {};
    const state = new URLSearchParams(queryParams).toString();
    return state;
  }
}


================================================
FILE: packages/back-nest/src/auth/github/github.strategy.ts
================================================
import { PassportStrategy } from '@nestjs/passport';
import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { Profile, Strategy } from 'passport-github';
import { UserService } from 'src/users/services/user.service';
import { UpsertGithubUserDTO } from 'src/users/entities/upsertGithubUserDTO';

@Injectable()
export class GithubStrategy extends PassportStrategy(Strategy, 'github') {
  constructor(cfg: ConfigService, private userService: UserService) {
    const BASE_URL =
      process.env.NODE_ENV === 'production'
        ? 'https://v3.speedtyper.dev'
        : 'http://localhost:1337';
    super({
      clientID: cfg.get<string>('GITHUB_CLIENT_ID'),
      clientSecret: cfg.get<string>('GITHUB_CLIENT_SECRET'),
      callbackURL: `${BASE_URL}/api/auth/github/callback`,
      scope: ['public_profile'],
    });
  }

  async validate(
    _accessToken: string,
    _refreshToken: string,
    profile: Profile,
  ) {
    const upsertUserDTO = UpsertGithubUserDTO.fromGithubProfile(profile);
    const user = await this.userService.upsertGithubUser(
      upsertUserDTO.toUser(),
    );
    return user;
  }
}


================================================
FILE: packages/back-nest/src/challenges/challenges.module.ts
================================================
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { GithubConnectorModule } from 'src/connectors/github/github.module';
import { ProjectsModule } from 'src/projects/projects.module';
import { CalculateLanguageRunner } from './commands/calculate-language-runner';
import { ChallengeImportRunner } from './commands/challenge-import-runner';
import { ReformatChallengesRunner } from './commands/reformat-challenges-runner';
import { UnsyncedFileImportRunner } from './commands/unsynced-file-import-runner';
import { Challenge } from './entities/challenge.entity';
import { UnsyncedFile } from './entities/unsynced-file.entity';
import { LanguageController } from './languages.controller';
import { ChallengeService } from './services/challenge.service';
import { LiteralService } from './services/literal.service';
import { ParserService } from './services/parser.service';
import { UnsyncedFileFilterer } from './services/unsynced-file-filterer';
import { UnsyncedFileImporter } from './services/unsynced-file-importer';
import { UnsyncedFileService } from './services/unsynced-file.service';

@Module({
  imports: [
    TypeOrmModule.forFeature([UnsyncedFile, Challenge]),
    GithubConnectorModule,
    ProjectsModule,
  ],
  controllers: [LanguageController],
  providers: [
    ParserService,
    ChallengeService,
    LiteralService,
    ChallengeImportRunner,
    UnsyncedFileFilterer,
    UnsyncedFileImporter,
    UnsyncedFileImportRunner,
    UnsyncedFileService,
    CalculateLanguageRunner,
    ReformatChallengesRunner,
  ],
  exports: [ChallengeService, LiteralService],
})
export class ChallengesModule {}


================================================
FILE: packages/back-nest/src/challenges/commands/calculate-language-runner.ts
================================================
import { InjectRepository } from '@nestjs/typeorm';
import { Command, CommandRunner } from 'nest-commander';
import { Repository } from 'typeorm';
import { Challenge } from '../entities/challenge.entity';

@Command({
  name: 'calculate-language',
  arguments: '',
  options: {},
})
export class CalculateLanguageRunner extends CommandRunner {
  constructor(
    @InjectRepository(Challenge)
    private repository: Repository<Challenge>,
  ) {
    super();
  }

  async run(): Promise<void> {
    const stream = await this.repository
      .createQueryBuilder('ch')
      .select('id, path')
      .where('ch.language IS NULL')
      .stream();

    const updatesByLanguage: Record<string, string[]> = {};

    for await (const { id, path } of stream) {
      const dotSplitted = path.split('.');
      const language = dotSplitted[dotSplitted.length - 1];
      if (!updatesByLanguage[language]) {
        updatesByLanguage[language] = [];
      }
      updatesByLanguage[language].push(id);
    }

    await Promise.all(
      Object.entries(updatesByLanguage).map(async ([language, ids]) => {
        await this.repository.update(ids, { language });
      }),
    );
  }
}


================================================
FILE: packages/back-nest/src/challenges/commands/challenge-import-runner.ts
================================================
import { Command, CommandRunner } from 'nest-commander';
import { GithubAPI } from 'src/connectors/github/services/github-api';
import { Challenge } from '../entities/challenge.entity';
import { UnsyncedFile } from '../entities/unsynced-file.entity';
import { ChallengeService } from '../services/challenge.service';
import { ParserService } from '../services/parser.service';
import { UnsyncedFileService } from '../services/unsynced-file.service';

@Command({
  name: 'import-challenges',
  arguments: '',
  options: {},
})
export class ChallengeImportRunner extends CommandRunner {
  constructor(
    private api: GithubAPI,
    private unsynced: UnsyncedFileService,
    private parserService: ParserService,
    private challengeService: ChallengeService,
  ) {
    super();
  }
  async run(): Promise<void> {
    let filesSynced = 0;
    const files = await this.unsynced.findAllWithProject();
    for (const file of files) {
      const challenges = await this.syncChallengesFromFile(file);
      filesSynced++;
      console.info(
        `[challenge-import]: ${filesSynced}/${files.length} synced. Challenges added=${challenges.length}`,
      );
    }
  }

  private async syncChallengesFromFile(file: UnsyncedFile) {
    const blob = await this.api.fetchBlob(
      file.project.fullName,
      file.currentSha,
    );
    const nodes = this.parseNodesFromContent(file.path, blob.content);
    const challenges = nodes.map((node) =>
      Challenge.fromTSNode(file.project, file, node),
    );
    await this.challengeService.upsert(challenges);
    await this.unsynced.remove([file]);
    return challenges;
  }

  private parseNodesFromContent(path: string, base64Content: string) {
    const fileExtension = path.split('.').pop();
    const parser = this.parserService.getParser(fileExtension);
    const content = Buffer.from(base64Content, 'base64').toString();
    const nodes = parser.parseTrackedNodes(content);
    return nodes;
  }
}


================================================
FILE: packages/back-nest/src/challenges/commands/reformat-challenges-runner.ts
================================================
import { InjectRepository } from '@nestjs/typeorm';
import { Command, CommandRunner } from 'nest-commander';
import { Repository } from 'typeorm';
import { Challenge } from '../entities/challenge.entity';
import { getFormattedText } from '../services/parser.service';

@Command({
  name: 'reformat-challenges',
  arguments: '',
  options: {},
})
export class ReformatChallengesRunner extends CommandRunner {
  constructor(
    @InjectRepository(Challenge)
    private repository: Repository<Challenge>,
  ) {
    super();
  }

  async run(): Promise<void> {
    const stream = await this.repository
      .createQueryBuilder('ch')
      .select('id, content')
      .stream();

    const pendingUpdates = [];
    for await (const { id, content } of stream) {
      const formattedContent = getFormattedText(content);
      if (formattedContent !== content) {
        pendingUpdates.push(
          this.repository.update({ id }, { content: formattedContent }),
        );
      }
    }

    await Promise.all(pendingUpdates);

    console.log(`Reformatted ${pendingUpdates.length} challenges`);
  }
}


================================================
FILE: packages/back-nest/src/challenges/commands/unsynced-file-import-runner.ts
================================================
import { Command, CommandRunner } from 'nest-commander';
import { ProjectService } from 'src/projects/services/project.service';
import { UnsyncedFileImporter } from '../services/unsynced-file-importer';

@Command({
  name: 'import-files',
  arguments: '',
  options: {},
})
export class UnsyncedFileImportRunner extends CommandRunner {
  constructor(
    private projectService: ProjectService,
    private importer: UnsyncedFileImporter,
  ) {
    super();
  }
  async run(): Promise<void> {
    const projects = await this.projectService.findAll();
    for (const project of projects) {
      // Only sync unsynced projects for now
      if (!project.syncedSha) {
        const sha = await this.importer.import(project);
        await this.projectService.updateSyncedSha(project.id, sha);
        console.info(`[FileImport]: Imported files for ${project.fullName}`);
      }
    }
  }
}


================================================
FILE: packages/back-nest/src/challenges/entities/challenge.entity.ts
================================================
import TSParser from 'tree-sitter';
import { Project } from 'src/projects/entities/project.entity';
import {
  Entity,
  PrimaryGeneratedColumn,
  ManyToOne,
  Column,
  OneToMany,
} from 'typeorm';
import { UnsyncedFile } from './unsynced-file.entity';
import { GithubAPI } from 'src/connectors/github/services/github-api';
import { Result } from 'src/results/entities/result.entity';
import { getFormattedText } from '../services/parser.service';

@Entity()
export class Challenge {
  @PrimaryGeneratedColumn('uuid')
  id: string;
  @Column({ select: false })
  sha: string;
  @Column({ select: false })
  treeSha: string;
  @Column({ nullable: false })
  language: string;
  @Column()
  path: string;
  @Column({ unique: true })
  url: string;
  @Column({ unique: true })
  content: string;
  @ManyToOne(() => Project, (project) => project.files)
  project: Project;
  @OneToMany(() => Result, (result) => result.user)
  results: Result[];

  static fromTSNode(
    project: Project,
    file: UnsyncedFile,
    node: TSParser.SyntaxNode,
  ) {
    const challenge = new Challenge();
    challenge.path = file.path;
    challenge.sha = file.currentSha;
    challenge.treeSha = file.currentTreeSha;
    challenge.project = project;
    challenge.content = getFormattedText(node.text);
    challenge.url = GithubAPI.getBlobPermaLink(
      project.fullName,
      file.currentTreeSha,
      file.path,
      // NOTE: row is 0 indexed, while #L is 1 indexed
      node.startPosition.row + 1,
      node.endPosition.row + 1,
    );
    const dotSplitPath = file.path.split('.');
    challenge.language = dotSplitPath[dotSplitPath.length - 1];
    return challenge;
  }
  static getStrippedCode(code: string) {
    const strippedCode = code
      .split('\n')
      .map((subText) => subText.trimStart())
      .join('\n');
    return strippedCode;
  }
}


================================================
FILE: packages/back-nest/src/challenges/entities/language.dto.ts
================================================
import { IsString } from 'class-validator';

export class LanguageDTO {
  @IsString()
  language: string;
  @IsString()
  name: string;
}


================================================
FILE: packages/back-nest/src/challenges/entities/unsynced-file.entity.ts
================================================
import { GithubNode } from 'src/connectors/github/schemas/github-tree.dto';
import { Project } from 'src/projects/entities/project.entity';
import {
  Entity,
  PrimaryGeneratedColumn,
  ManyToOne,
  Column,
  Index,
} from 'typeorm';

@Entity()
@Index(['path', 'project'], { unique: true })
export class UnsyncedFile {
  @PrimaryGeneratedColumn('uuid')
  id: string;
  @Column()
  path: string;
  @Column()
  currentSha: string;
  @Column()
  currentTreeSha: string;
  @Column({ nullable: true })
  syncedSha?: string;

  @ManyToOne(() => Project, (project) => project.files)
  project: Project;

  static fromGithubNode(project: Project, treeSha: string, node: GithubNode) {
    const file = new UnsyncedFile();
    file.path = node.path;
    file.currentSha = node.sha;
    file.currentTreeSha = treeSha;
    file.project = project;
    return file;
  }
}


================================================
FILE: packages/back-nest/src/challenges/languages.controller.ts
================================================
import { Controller, Get } from '@nestjs/common';
import { LanguageDTO } from './entities/language.dto';
import { ChallengeService } from './services/challenge.service';

@Controller('languages')
export class LanguageController {
  constructor(private service: ChallengeService) {}
  @Get()
  getLeaderboard(): Promise<LanguageDTO[]> {
    return this.service.getLanguages();
  }
}


================================================
FILE: packages/back-nest/src/challenges/services/challenge.service.ts
================================================
import { BadRequestException, Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Challenge } from '../entities/challenge.entity';
import { LanguageDTO } from '../entities/language.dto';

@Injectable()
export class ChallengeService {
  private static UpsertOptions = {
    conflictPaths: ['content'],
    skipUpdateIfNoValuesChanged: true,
  };
  constructor(
    @InjectRepository(Challenge)
    private challengeRepository: Repository<Challenge>,
  ) {}

  async upsert(challenges: Challenge[]): Promise<void> {
    await this.challengeRepository.upsert(
      challenges,
      ChallengeService.UpsertOptions,
    );
  }

  async getRandom(language?: string): Promise<Challenge> {
    let query = this.challengeRepository
      .createQueryBuilder('challenge')
      .leftJoinAndSelect('challenge.project', 'project');

    if (language) {
      query = query.where('challenge.language = :language', {
        language,
      });
    }

    const randomChallenge = await query.orderBy('RANDOM()').getOne();

    if (!randomChallenge)
      throw new BadRequestException(`No challenges for language: ${language}`);

    return randomChallenge;
  }

  async getLanguages(): Promise<LanguageDTO[]> {
    const selectedLanguages = await this.challengeRepository
      .createQueryBuilder()
      .select('language')
      .distinct()
      .execute();

    const languages = selectedLanguages.map(
      ({ language }: { language: string }) => ({
        language,
        name: this.getLanguageName(language),
      }),
    );

    languages.sort((a, b) => a.name.localeCompare(b.name));

    return languages;
  }

  private getLanguageName(language: string): string {
    const allLanguages = {
      js: 'JavaScript',
      ts: 'TypeScript',
      rs: 'Rust',
      c: 'C',
      java: 'Java',
      cpp: 'C++',
      go: 'Go',
      lua: 'Lua',
      php: 'PHP',
      py: 'Python',
      rb: 'Ruby',
      cs: 'C-Sharp',
      scala: 'Scala',
    };
    return allLanguages[language];
  }
}


================================================
FILE: packages/back-nest/src/challenges/services/literal.service.ts
================================================
import { Injectable } from '@nestjs/common';

@Injectable()
export class LiteralService {
  calculateLiterals(code: string) {
    const literals = code
      .substring(0)
      .split(/[.\-=/_\:\;\,\}\{\)\(\"\'\]\[\/\#\?\>\<\&\*]/)
      .flatMap((r) => {
        return r.split(/[\n\r\s\t]+/);
      })
      .filter(Boolean);
    return literals;
  }
}


================================================
FILE: packages/back-nest/src/challenges/services/parser.service.ts
================================================
import * as TSParser from 'tree-sitter';
import { Injectable } from '@nestjs/common';
import { getTSLanguageParser } from './ts-parser.factory';

// TODO: Chars like ♡ should be filtered out
@Injectable()
export class ParserService {
  getParser(language: string) {
    const tsParser = getTSLanguageParser(language);
    return new Parser(tsParser);
  }
}

export enum NodeTypes {
  ClassDeclaration = 'class_declaration',
  ClassDefinition = 'class_definition',
  FunctionDeclaration = 'function_declaration',
  FunctionDefinition = 'function_definition',
  FunctionItem = 'function_item',
  MethodDeclaration = 'method_declaration',
  Module = 'module',
  Call = 'call',
  UsingDirective = 'using_directive',
  NamespaceDeclaration = 'namespace_declaration',
}

export class Parser {
  private MAX_NODE_LENGTH = 300;
  private MIN_NODE_LENGTH = 100;
  private MAX_NUM_LINES = 11;
  private MAX_LINE_LENGTH = 55;

  constructor(private ts: TSParser) {}

  parseTrackedNodes(content: string) {
    const root = this.ts.parse(content).rootNode;
    return this.filterNodes(root);
  }

  private filterNodes(root: TSParser.SyntaxNode) {
    const nodes = root.children
      .filter((n) => this.filterValidNodeTypes(n))
      .filter((n) => this.filterLongNodes(n))
      .filter((n) => this.filterShortNodes(n))
      .filter((n) => this.filterTooLongLines(n))
      .filter((n) => this.filterTooManyLines(n));
    return nodes;
  }

  private filterValidNodeTypes(node: TSParser.SyntaxNode) {
    switch (node.type) {
      case NodeTypes.ClassDeclaration:
      case NodeTypes.ClassDefinition:
      case NodeTypes.FunctionDeclaration:
      case NodeTypes.FunctionDefinition:
      case NodeTypes.FunctionItem:
      case NodeTypes.MethodDeclaration:
      case NodeTypes.Module:
      case NodeTypes.Call:
      case NodeTypes.UsingDirective:
      case NodeTypes.NamespaceDeclaration:
        // We want method declarations if they are on the root node (i.e. golang)
        return true;
      default:
        console.log(node.type);
        return false;
    }
  }

  private filterLongNodes(node: TSParser.SyntaxNode) {
    return this.MAX_NODE_LENGTH > node.text.length;
  }

  private filterShortNodes(node: TSParser.SyntaxNode) {
    return node.text.length > this.MIN_NODE_LENGTH;
  }

  private filterTooManyLines(node: TSParser.SyntaxNode) {
    const lines = node.text.split('\n');
    return lines.length <= this.MAX_NUM_LINES;
  }

  private filterTooLongLines(node: TSParser.SyntaxNode) {
    for (const line of node.text.split('\n')) {
      if (line.length > this.MAX_LINE_LENGTH) {
        return false;
      }
    }
    return true;
  }
}

export function removeDuplicateNewLines(rawText: string) {
  const newLine = '\n';
  const duplicateNewLine = '\n\n';
  let newRawText = rawText;
  let prevRawText = rawText;
  do {
    prevRawText = newRawText;
    newRawText = newRawText.replaceAll(duplicateNewLine, newLine);
  } while (newRawText !== prevRawText);
  return newRawText;
}

export function replaceTabsWithSpaces(rawText: string) {
  const tab = '\t';
  const spaces = '  ';
  return rawText.replaceAll(tab, spaces);
}

export function removeTrailingSpaces(rawText: string) {
  return rawText
    .split('\n')
    .map((line) => line.trimEnd())
    .join('\n');
}

export function dedupeInnerSpaces(rawText: string) {
  const innerSpaces = /(?<=\S+)\s+(?=\S+)/g;
  const space = ' ';
  return rawText
    .split('\n')
    .map((line) => line.replaceAll(innerSpaces, space))
    .join('\n');
}

export function getFormattedText(rawText: string) {
  rawText = replaceTabsWithSpaces(rawText);
  rawText = removeTrailingSpaces(rawText);
  rawText = removeDuplicateNewLines(rawText);
  rawText = dedupeInnerSpaces(rawText);
  return rawText;
}


================================================
FILE: packages/back-nest/src/challenges/services/tests/parser.service.spec.ts
================================================
import { getFormattedText } from '../parser.service';

const dubbleNewLineInput = `func newGRPCProxyCommand() *cobra.Command {
  lpc := &cobra.Command{
    Use:   "grpc-proxy <subcommand>",
    Short: "grpc-proxy related command",
  }
  lpc.AddCommand(newGRPCProxyStartCommand())

  return lpc
}`;

const trippleNewLineInput = `func newGRPCProxyCommand() *cobra.Command {
  lpc := &cobra.Command{
    Use:   "grpc-proxy <subcommand>",
    Short: "grpc-proxy related command",
  }
  lpc.AddCommand(newGRPCProxyStartCommand())


  return lpc
}`;

const inputWithTabs = `func newGRPCProxyCommand() *cobra.Command {
\tlpc := &cobra.Command{
\t\tUse:   "grpc-proxy <subcommand>",
\t\tShort: "grpc-proxy related command",
\t}
\tlpc.AddCommand(newGRPCProxyStartCommand())
\treturn lpc
}`;

const inputWithEmptyLineWithSpaces = `func newGRPCProxyCommand() *cobra.Command {
  lpc := &cobra.Command{   
    Use:   "grpc-proxy <subcommand>",
    Short: "grpc-proxy related command",
  }     
   
  lpc.AddCommand(newGRPCProxyStartCommand())
  return lpc
}`;

const inputWithTrailingSpaces = `func newGRPCProxyCommand() *cobra.Command {
  lpc := &cobra.Command{   
    Use:   "grpc-proxy <subcommand>",
    Short: "grpc-proxy related command",
  }     
  lpc.AddCommand(newGRPCProxyStartCommand())
  return lpc
}`;

const inputWithStructAlignment = `func newGRPCProxyCommand() *cobra.Command {
  lpc := &cobra.Command{
    Use:   "grpc-proxy <subcommand>",
    Short: "grpc-proxy related command",
  }
  lpc.AddCommand(newGRPCProxyStartCommand())
  return lpc
}`;

const output = `func newGRPCProxyCommand() *cobra.Command {
  lpc := &cobra.Command{
    Use: "grpc-proxy <subcommand>",
    Short: "grpc-proxy related command",
  }
  lpc.AddCommand(newGRPCProxyStartCommand())
  return lpc
}`;

describe('getFormattedText', () => {
  it('should remove double newlines', () => {
    const parsed = getFormattedText(dubbleNewLineInput);
    expect(parsed).toEqual(output);
  });
  it('should remove tripple newlines', () => {
    const parsed = getFormattedText(trippleNewLineInput);
    expect(parsed).toEqual(output);
  });
  it('should replace tabs with spaces', () => {
    const parsed = getFormattedText(inputWithTabs);
    expect(parsed).toEqual(output);
  });
  it('should return the same if called twice', () => {
    const firstParsed = getFormattedText(inputWithTabs);
    const parsed = getFormattedText(firstParsed);
    expect(parsed).toEqual(output);
  });
  it('should remove trailing spaces', () => {
    const parsed = getFormattedText(inputWithTrailingSpaces);
    expect(parsed).toEqual(output);
  });
  it('should remove empty line with spaces', () => {
    const parsed = getFormattedText(inputWithEmptyLineWithSpaces);
    expect(parsed).toEqual(output);
  });
  it('should dedupe multiple interior spaces', () => {
    const parsed = getFormattedText(inputWithStructAlignment);
    expect(parsed).toEqual(output);
  });
});


================================================
FILE: packages/back-nest/src/challenges/services/ts-parser.factory.ts
================================================
import * as TSParser from 'tree-sitter';

import * as js from 'tree-sitter-javascript';
import * as ts from 'tree-sitter-typescript/typescript';
import * as java from 'tree-sitter-java';
import * as c from 'tree-sitter-c';
import * as cpp from 'tree-sitter-cpp';
import * as lua from 'tree-sitter-lua';
import * as php from 'tree-sitter-php';
import * as py from 'tree-sitter-python';
import * as rb from 'tree-sitter-ruby';
import * as cs from 'tree-sitter-c-sharp';
import * as go from 'tree-sitter-go';
import * as rs from 'tree-sitter-rust';
import * as scala from 'tree-sitter-scala';

const languageParserMap: { [key: string]: any } = {
  js,
  ts,
  rs,
  c,
  java,
  cpp,
  go,
  lua,
  php,
  py,
  rb,
  cs,
  scala,
};

export const getSupportFileExtensions = () => {
  return Object.keys(languageParserMap).map((ext) => `.${ext}`);
};

export class InvalidLanguage extends Error {
  constructor(language: string) {
    super(`Error getting parser for language='${language}'`);
    Object.setPrototypeOf(this, InvalidLanguage.prototype);
  }
}

export const getTSLanguageParser = (language: string) => {
  const langParser = languageParserMap[language];
  if (!langParser) throw new InvalidLanguage(language);
  const parser = new TSParser();
  parser.setLanguage(langParser);
  return parser;
};


================================================
FILE: packages/back-nest/src/challenges/services/unsynced-file-filterer.ts
================================================
import { Injectable } from '@nestjs/common';
import { GithubNode } from 'src/connectors/github/schemas/github-tree.dto';
import { getSupportFileExtensions } from './ts-parser.factory';

@Injectable()
export class UnsyncedFileFilterer {
  filter(nodes: GithubNode[]) {
    return nodes
      .filter(isBlobNode)
      .filter(hasTrackedFileExt)
      .filter(isNotExcludedPath);
  }
}

function isBlobNode(node: GithubNode) {
  return node.type === 'blob';
}

function hasTrackedFileExt(node: GithubNode) {
  const trackedFileExtensions = getSupportFileExtensions();
  for (const includedExt of trackedFileExtensions) {
    if (node.path.endsWith(includedExt)) {
      // ends with tracked file extension
      return true;
    }
  }
  // untracked file extension
  return false;
}

function isNotExcludedPath(node: GithubNode) {
  const excludedSubStrings = [
    '.ci',
    '.jenkins',
    '.build',
    '.idea',
    '.devcontainer',
    'migrations',
    'benchmarks',
    'build-tools',
    'conventions',
    'licenses',
    'requirements',
    '.svg',
    'docs',
    '.github',
    'example',
    'types',
    'test',
    '.pb.',
    '.proto',
    'doc',
  ];
  for (const excludeStr of excludedSubStrings) {
    if (node.path.includes(excludeStr)) {
      // is excluded path
      return false;
    }
  }
  // is not excluded path
  return true;
}


================================================
FILE: packages/back-nest/src/challenges/services/unsynced-file-importer.ts
================================================
import { Injectable } from '@nestjs/common';
import { GithubAPI } from 'src/connectors/github/services/github-api';
import { Project } from 'src/projects/entities/project.entity';
import { UnsyncedFile } from '../entities/unsynced-file.entity';
import { UnsyncedFileFilterer } from './unsynced-file-filterer';
import { UnsyncedFileService } from './unsynced-file.service';

@Injectable()
export class UnsyncedFileImporter {
  constructor(
    private api: GithubAPI,
    private filterer: UnsyncedFileFilterer,
    private svc: UnsyncedFileService,
  ) {}
  async import(project: Project) {
    const root = await this.api.fetchTree(
      project.fullName,
      project.defaultBranch,
    );
    const nodes = this.filterer.filter(root.tree);
    const files = nodes.map((node) =>
      UnsyncedFile.fromGithubNode(project, root.sha, node),
    );
    await this.svc.bulkUpsert(files);
    return root.sha;
  }
}


================================================
FILE: packages/back-nest/src/challenges/services/unsynced-file.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { UnsyncedFile } from '../entities/unsynced-file.entity';

@Injectable()
export class UnsyncedFileService {
  private static UpsertOptions = {
    conflictPaths: ['path', 'project'],
    skipUpdateIfNoValuesChanged: true,
  };
  constructor(
    @InjectRepository(UnsyncedFile)
    private filesRepository: Repository<UnsyncedFile>,
  ) {}

  async bulkUpsert(files: UnsyncedFile[]): Promise<void> {
    await this.filesRepository.upsert(files, UnsyncedFileService.UpsertOptions);
  }

  async findAllWithProject(): Promise<UnsyncedFile[]> {
    const files = await this.filesRepository.find({
      relations: {
        project: true,
      },
    });
    return files;
  }

  async remove(files: UnsyncedFile[]): Promise<void> {
    await this.filesRepository.remove(files);
  }
}


================================================
FILE: packages/back-nest/src/commands.ts
================================================
import { CommandFactory } from 'nest-commander';
import { AppModule } from './app.module';

async function runCommand() {
  await CommandFactory.run(AppModule, ['warn', 'error']);
}

runCommand();


================================================
FILE: packages/back-nest/src/config/cors.ts
================================================
import { GatewayMetadata } from '@nestjs/websockets';

export const getAllowedOrigins = () => {
  return process.env.NODE_ENV === 'production'
    ? ['https://speedtyper.dev', 'https://www.speedtyper.dev']
    : ['http://localhost:3001'];
};

export const gatewayMetadata: GatewayMetadata = {
  cors: {
    origin: getAllowedOrigins(),
    methods: ['GET', 'POST'],
    credentials: true,
  },
};


================================================
FILE: packages/back-nest/src/config/postgres.ts
================================================
import * as dotenv from 'dotenv';
import { PostgresConnectionOptions } from 'typeorm/driver/postgres/PostgresConnectionOptions';
dotenv.config({ path: __dirname + '/../../.env' });

export const pgOptions: Partial<PostgresConnectionOptions> = {
  url: process.env.DATABASE_PRIVATE_URL,
  extra: {
    // 120 seconds idle timeout
    idleTimeoutMillis: 120000,
    max: 10,
  },
};


================================================
FILE: packages/back-nest/src/connectors/github/github.module.ts
================================================
import { HttpModule } from '@nestjs/axios';
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { GithubAPI } from './services/github-api';

@Module({
  imports: [HttpModule, ConfigModule],
  providers: [GithubAPI],
  exports: [GithubAPI],
})
export class GithubConnectorModule {}


================================================
FILE: packages/back-nest/src/connectors/github/schemas/github-blob.dto.ts
================================================
import { IsEnum, IsNumber, IsString } from 'class-validator';

export enum GithubBlobEncoding {
  base64 = 'base64',
}

export class GithubBlob {
  @IsString()
  sha: string;
  @IsString()
  node_id: string;
  @IsNumber()
  size: number;
  @IsString()
  url: string;
  @IsString()
  content: string;
  @IsEnum(GithubBlobEncoding)
  encoding: 'base64';
}


================================================
FILE: packages/back-nest/src/connectors/github/schemas/github-repository.dto.ts
================================================
import { IsNumber, IsString, ValidateIf } from 'class-validator';

export class GithubLicense {
  @IsString()
  name: string;
}

export class GithubOwner {
  @IsString()
  login: string;
  @IsNumber()
  id: number;
  @IsString()
  avatar_url: string;
  @IsString()
  html_url: string;
}

export class GithubRepository {
  @IsNumber()
  id: number;
  @IsString()
  node_id: string;
  @IsString()
  name: string;
  @IsString()
  full_name: string;
  @IsString()
  html_url: string;
  @IsString()
  description: string;
  @IsString()
  url: string;
  @IsString()
  trees_url: string;
  @IsString()
  @ValidateIf((_: any, value: unknown) => value !== null)
  homepage: string | null;
  @IsNumber()
  stargazers_count: number;
  @IsString()
  language: string;
  @IsString()
  default_branch: string;
  license: GithubLicense;
  owner: GithubOwner;
}


================================================
FILE: packages/back-nest/src/connectors/github/schemas/github-tree.dto.ts
================================================
import { IsEnum, IsNumber, IsString } from 'class-validator';

export enum GithubNodeType {
  blob = 'blob',
  tree = 'tree',
}

export class GithubNode {
  @IsString()
  path: string;
  @IsString()
  mode: string;
  @IsEnum(GithubNodeType)
  type: GithubNodeType;
  @IsString()
  sha: string;
  @IsNumber()
  size?: number;
  @IsString()
  url: string;
}

export class GithubTree {
  @IsString()
  sha: string;
  @IsString()
  url: string;
  tree: GithubNode[];
}


================================================
FILE: packages/back-nest/src/connectors/github/services/github-api.ts
================================================
import { AxiosResponse } from 'axios';
import { HttpService } from '@nestjs/axios';
import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { firstValueFrom } from 'rxjs';
import { validateDTO } from 'src/utils/validateDTO';
import { GithubBlob } from '../schemas/github-blob.dto';
import { GithubRepository } from '../schemas/github-repository.dto';
import { GithubTree } from '../schemas/github-tree.dto';

@Injectable()
export class GithubAPI {
  private static BASE_URL = 'https://api.github.com';
  private static REPOSITORIES_URL = `${GithubAPI.BASE_URL}/repos`;
  private static REPOSITORY_URL = `${GithubAPI.REPOSITORIES_URL}/{fullName}`;
  private static TREE_URL = `${GithubAPI.REPOSITORY_URL}/git/trees/{sha}?recursive=true`;
  private static BLOB_URL = `${GithubAPI.REPOSITORY_URL}/git/blobs/{sha}`;
  private static BLOB_HTML_PERMA_LINK = `https://github.com/{fullName}/blob/{treeSha}/{path}/#L{startLine}-L{endLine}`;

  private token: string;

  constructor(private readonly http: HttpService, cfg: ConfigService) {
    this.token = getGithubAccessToken(cfg);
  }

  static getBlobPermaLink(
    fullName: string,
    treeSha: string,
    path: string,
    startLine: number,
    endLine: number,
  ) {
    const url = GithubAPI.BLOB_HTML_PERMA_LINK.replace('{fullName}', fullName)
      .replace('{treeSha}', treeSha)
      .replace('{path}', path)
      .replace('{startLine}', startLine.toString())
      .replace('{endLine}', endLine.toString());
    return url;
  }

  private async get(url: string) {
    const resp = await firstValueFrom(
      this.http.get(url, {
        headers: {
          Authorization: `token ${this.token}`,
        },
      }),
    );
    this.logRateLimit(resp);
    return resp.data;
  }

  private logRateLimit(resp: AxiosResponse) {
    const rateLimitResetSeconds = resp.headers['x-ratelimit-reset'];
    const resetDate = new Date(parseInt(rateLimitResetSeconds) * 1000);
    const rateLimitRemaining = resp.headers['x-ratelimit-remaining'];
    console.log(
      `GH Rate Limiting. Remaining: ${rateLimitRemaining} Reset: ${resetDate}`,
    );
  }

  async fetchRepository(fullName: string): Promise<GithubRepository> {
    const url = GithubAPI.REPOSITORY_URL.replace('{fullName}', fullName);
    const rawData = await this.get(url);
    const repository = await validateDTO(GithubRepository, rawData);
    return repository;
  }

  async fetchTree(fullName: string, sha: string): Promise<GithubTree> {
    const treeUrl = GithubAPI.TREE_URL.replace('{fullName}', fullName).replace(
      '{sha}',
      sha,
    );
    const rawData = await this.get(treeUrl);
    const rootNode = await validateDTO(GithubTree, rawData);
    return rootNode;
  }

  async fetchBlob(fullName: string, sha: string): Promise<GithubBlob> {
    const url = GithubAPI.BLOB_URL.replace('{fullName}', fullName).replace(
      '{sha}',
      sha,
    );
    const rawData = await this.get(url);
    const blob = await validateDTO(GithubBlob, rawData);
    return blob;
  }
}

function getGithubAccessToken(cfg: ConfigService) {
  const token = cfg.get<string>('GITHUB_ACCESS_TOKEN');
  if (!token) {
    throw new Error(
      `GITHUB_ACCESS_TOKEN is missing from environment variables`,
    );
  }
  if (!token.startsWith('ghp_')) {
    throw new Error(
      `GITHUB_ACCESS_TOKEN is not a valid value. It should start with 'ghp_'`,
    );
  }
  return token;
}


================================================
FILE: packages/back-nest/src/database.module.ts
================================================
import { TypeOrmModule } from '@nestjs/typeorm';
import { DataSource } from 'typeorm';
import { pgOptions } from './config/postgres';

const entities = [__dirname + '/**/*.entity.{ts,js}'];

export const PostgresDataSource = new DataSource({
  type: 'postgres',
  synchronize: true,
  entities,
  ...pgOptions,
});

export const PostgresModule = TypeOrmModule.forRootAsync({
  useFactory: () => {
    return {
      type: 'postgres',
      synchronize: true,
      entities,
      ...pgOptions,
    };
  },
  dataSourceFactory: async () => {
    return PostgresDataSource.initialize();
  },
});


================================================
FILE: packages/back-nest/src/filters/exception.filter.ts
================================================
import {
  ExceptionFilter,
  Catch,
  ArgumentsHost,
  HttpException,
  HttpStatus,
} from '@nestjs/common';
import { QueryFailedError } from 'typeorm';

interface ErrorResponse {
  message: string;
  status: number;
}

@Catch()
export class AllExceptionsFilter implements ExceptionFilter {
  catch(exception: any, host: ArgumentsHost) {
    const ctx = host.switchToHttp();
    const response = ctx.getResponse();

    let errorResponse: ErrorResponse;
    const message = exception.message;

    if (exception instanceof HttpException) {
      errorResponse = { status: exception.getStatus(), message };
    } else if (exception instanceof QueryFailedError) {
      errorResponse = {
        message: 'Internal server error',
        status: HttpStatus.INTERNAL_SERVER_ERROR,
      };
    } else {
      errorResponse = {
        message: 'Internal server error',
        status: HttpStatus.INTERNAL_SERVER_ERROR,
      };
    }

    if (errorResponse.status === HttpStatus.INTERNAL_SERVER_ERROR) {
      console.log(exception);
    }

    response.status(errorResponse.status).json({
      statusCode: errorResponse.status,
      message: errorResponse.message,
    });
  }
}


================================================
FILE: packages/back-nest/src/main.ts
================================================
import * as Sentry from '@sentry/node';
import { ValidationPipe } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { AppModule } from './app.module';
import { getAllowedOrigins } from './config/cors';
import { guestUserMiddleware } from './middlewares/guest-user';
import { SessionAdapter } from './sessions/session.adapter';
import { getSessionMiddleware } from './sessions/session.middleware';
import { json } from 'express';
import { AllExceptionsFilter } from './filters/exception.filter';

const GLOBAl_API_PREFIX = 'api';

async function runServer() {
  Sentry.init({
    dsn: process.env.SENTRY_DSN,
    tracesSampleRate: 0,
  });
  const port = process.env.PORT || 1337;
  const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.set('trust proxy', 1);
  const sessionMiddleware = getSessionMiddleware();
  app.enableCors({
    origin: getAllowedOrigins(),
    credentials: true,
  });
  app.use(json({ limit: '50mb' }));
  app.use(sessionMiddleware);
  app.use(guestUserMiddleware);
  app.useWebSocketAdapter(new SessionAdapter(app, sessionMiddleware));
  app.setGlobalPrefix(GLOBAl_API_PREFIX);
  app.useGlobalFilters(new AllExceptionsFilter());
  app.useGlobalPipes(new ValidationPipe());
  await app.listen(port);
}

runServer();


================================================
FILE: packages/back-nest/src/middlewares/guest-user.ts
================================================
import { NextFunction, Request, Response } from 'express';
import { User } from 'src/users/entities/user.entity';

export function guestUserMiddleware(
  req: Request,
  _: Response,
  next: NextFunction,
) {
  if (req.session && !req.session?.user) {
    req.session.user = User.generateAnonymousUser();
  }
  next();
}


================================================
FILE: packages/back-nest/src/projects/commands/import-untracked-projects-runner.ts
================================================
import { Command, CommandRunner } from 'nest-commander';
import { ProjectService } from '../services/project.service';
import { ProjectsFromFileReader } from '../services/projects-from-file-reader';
import { UntrackedProjectService } from '../services/untracked-projects.service';

@Command({
  name: 'import-projects',
  arguments: '',
  options: {},
})
export class ImportUntrackedProjectsRunner extends CommandRunner {
  constructor(
    private reader: ProjectsFromFileReader,
    private untracked: UntrackedProjectService,
    private synced: ProjectService,
  ) {
    super();
  }
  async run(): Promise<void> {
    for await (const project of this.reader.readProjects()) {
      const syncedProject = await this.synced.findByFullName(project);
      if (!syncedProject) {
        await this.untracked.bulkUpsert([project]);
        console.info(`[ProjectImport]: Imported ${project}`);
      }
    }
  }
}


================================================
FILE: packages/back-nest/src/projects/commands/sync-untracked-projects-runner.ts
================================================
import { Command, CommandRunner } from 'nest-commander';
import { GithubAPI } from 'src/connectors/github/services/github-api';
import { Project } from '../entities/project.entity';
import { ProjectService } from '../services/project.service';
import { UntrackedProjectService } from '../services/untracked-projects.service';

@Command({
  name: 'sync-projects',
  arguments: '',
  options: {},
})
export class SyncUntrackedProjectsRunner extends CommandRunner {
  constructor(
    private untracked: UntrackedProjectService,
    private api: GithubAPI,
    private synced: ProjectService,
  ) {
    super();
  }
  async run(): Promise<void> {
    const untracked = await this.untracked.findAll();
    for (const untrackedProject of untracked) {
      const repository = await this.api.fetchRepository(
        untrackedProject.fullName,
      );
      const project = Project.fromGithubRepository(
        untrackedProject,
        repository,
      );
      await this.synced.bulkUpsert([project]);
      await this.untracked.remove([untrackedProject]);
      console.info(`[ProjectSync]: Synced ${project.fullName}`);
    }
  }
}


================================================
FILE: packages/back-nest/src/projects/entities/project.entity.ts
================================================
import { Entity, Column, PrimaryGeneratedColumn, OneToMany } from 'typeorm';
import { GithubRepository } from 'src/connectors/github/schemas/github-repository.dto';
import { UntrackedProject } from './untracked-project.entity';
import { UnsyncedFile } from 'src/challenges/entities/unsynced-file.entity';

@Entity()
export class Project {
  @PrimaryGeneratedColumn('uuid')
  id: string;
  @Column({ unique: true })
  fullName: string;
  @Column({ unique: true })
  htmlUrl: string;
  @Column()
  language: string;
  @Column()
  stars: number;
  @Column()
  licenseName: string;
  @Column()
  ownerAvatar: string;
  @Column()
  defaultBranch: string;

  @OneToMany(() => UnsyncedFile, (file) => file.project)
  files: File[];

  @Column({ nullable: true })
  syncedSha?: string;

  static fromGithubRepository(
    tracked: UntrackedProject,
    repo: GithubRepository,
  ) {
    const project = new Project();
    project.fullName = tracked.fullName;
    project.htmlUrl = repo.html_url;
    project.stars = repo.stargazers_count;
    project.language = repo.language;
    project.licenseName = repo.license?.name ?? 'Other';
    project.ownerAvatar = repo.owner.avatar_url;
    project.defaultBranch = repo.default_branch;
    return project;
  }
}


================================================
FILE: packages/back-nest/src/projects/entities/untracked-project.entity.ts
================================================
import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class UntrackedProject {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column({ unique: true })
  fullName: string;
}


================================================
FILE: packages/back-nest/src/projects/project.controller.ts
================================================
import { Controller, Get } from '@nestjs/common';
import { ProjectService } from './services/project.service';

@Controller('projects')
export class ProjectController {
  constructor(private projectService: ProjectService) {}
  @Get('languages')
  getLeaderboard(): Promise<string[]> {
    return this.projectService.getLanguages();
  }
}


================================================
FILE: packages/back-nest/src/projects/projects.module.ts
================================================
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { GithubConnectorModule } from 'src/connectors/github/github.module';
import { ImportUntrackedProjectsRunner } from './commands/import-untracked-projects-runner';
import { SyncUntrackedProjectsRunner } from './commands/sync-untracked-projects-runner';
import { Project } from './entities/project.entity';
import { UntrackedProject } from './entities/untracked-project.entity';
import { ProjectController } from './project.controller';
import { ProjectService } from './services/project.service';
import { ProjectsFromFileReader } from './services/projects-from-file-reader';
import { UntrackedProjectService } from './services/untracked-projects.service';

@Module({
  imports: [
    TypeOrmModule.forFeature([Project, UntrackedProject]),
    GithubConnectorModule,
  ],
  providers: [
    UntrackedProjectService,
    ProjectService,
    ProjectsFromFileReader,
    ImportUntrackedProjectsRunner,
    SyncUntrackedProjectsRunner,
  ],
  controllers: [ProjectController],
  exports: [ProjectService],
})
export class ProjectsModule {}


================================================
FILE: packages/back-nest/src/projects/services/project.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Project } from '../entities/project.entity';

@Injectable()
export class ProjectService {
  constructor(
    @InjectRepository(Project)
    private projectRepository: Repository<Project>,
  ) {}

  async bulkUpsert(projects: Project[]): Promise<void> {
    await this.projectRepository.upsert(projects, ['fullName']);
  }

  async findByFullName(fullName: string) {
    const project = await this.projectRepository.findOneBy({
      fullName,
    });
    return project;
  }

  async updateSyncedSha(id: string, syncedSha: string) {
    await this.projectRepository.update(
      {
        id,
      },
      { syncedSha },
    );
  }

  async findAll(): Promise<Project[]> {
    const projects = await this.projectRepository.find();
    return projects;
  }

  async getLanguages(): Promise<string[]> {
    const selectedLanguages = await this.projectRepository
      .createQueryBuilder()
      .select('language')
      .distinct()
      .execute();
    return selectedLanguages.map((l: any) => l.language);
  }
}


================================================
FILE: packages/back-nest/src/projects/services/projects-from-file-reader.ts
================================================
import { Injectable } from '@nestjs/common';
import { createReadStream } from 'fs';
import { createInterface } from 'readline';

@Injectable()
export class ProjectsFromFileReader {
  private static FILE_PATH = './tracked-projects.txt';
  async *readProjects() {
    const stream = createReadStream(ProjectsFromFileReader.FILE_PATH);
    const rl = createInterface({
      input: stream,
      crlfDelay: Infinity,
    });
    for await (const line of rl) {
      const slug = line.trim();
      yield validateProjectName(slug);
    }
  }
}

export function validateProjectName(slug: string) {
  let [owner, repo] = slug.split('/');
  owner = owner.trim();
  repo = repo.trim();
  if (!owner || !repo) {
    throw new Error(slug);
  }
  return [owner, repo].join('/');
}


================================================
FILE: packages/back-nest/src/projects/services/untracked-projects.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { UntrackedProject } from '../entities/untracked-project.entity';

@Injectable()
export class UntrackedProjectService {
  constructor(
    @InjectRepository(UntrackedProject)
    private untrackedProjects: Repository<UntrackedProject>,
  ) {}

  async bulkUpsert(names: string[]): Promise<void> {
    const partialProjects = names.map((fullName) => ({ fullName }));
    await this.untrackedProjects.upsert(partialProjects, ['fullName']);
  }

  async remove(untrackedProjects: UntrackedProject[]): Promise<void> {
    await this.untrackedProjects.remove(untrackedProjects);
  }

  async findAll(): Promise<UntrackedProject[]> {
    return await this.untrackedProjects.find();
  }
}


================================================
FILE: packages/back-nest/src/races/entities/race-settings.dto.ts
================================================
import { IsBoolean, IsOptional, IsString } from 'class-validator';

export class RaceSettingsDTO {
  @IsString()
  @IsOptional()
  language: string;

  @IsBoolean()
  @IsOptional()
  isPublic: boolean;
}


================================================
FILE: packages/back-nest/src/races/race.controllers.ts
================================================
import {
  BadRequestException,
  Controller,
  Get,
  Param,
  Post,
  Req,
} from '@nestjs/common';
import { PublicRace, RaceManager } from './services/race-manager.service';
import { Request } from 'express';

@Controller('races')
export class RacesController {
  constructor(private raceManager: RaceManager) {}
  @Get()
  getRaces(): PublicRace[] {
    return this.raceManager.getPublicRaces();
  }

  @Get('online')
  getOnlineCount(): { online: number } {
    const online = this.raceManager.getOnlineCount();
    return {
      online,
    };
  }

  @Post('online')
  toggleOnlineState(@Req() request: Request): { isPublic: boolean } {
    const userId = request.session.user.id;
    const raceId = request.session.raceId;
    const race = this.raceManager.getRace(raceId);
    if (race.owner !== userId) {
      throw new BadRequestException();
    }
    const isPublic = race.togglePublic();
    return {
      isPublic,
    };
  }

  @Get(':raceId/status')
  getRaceStatus(
    @Req() request: Request,
    @Param('raceId') raceId: string,
  ): { ok: boolean } {
    try {
      const userId = request.session.user.id;
      const player = this.raceManager.getPlayer(raceId, userId);
      return { ok: !!player };
    } catch (err) {
      return { ok: false };
    }
  }
}


================================================
FILE: packages/back-nest/src/races/race.exceptions.ts
================================================
import * as Sentry from '@sentry/node';
import { ArgumentsHost, Catch } from '@nestjs/common';
import { BaseWsExceptionFilter } from '@nestjs/websockets';
import { Socket } from 'socket.io';
import { InvalidKeystrokeException } from './services/keystroke-validator.service';
import { RaceEvents } from './services/race-events.service';
import { RaceDoesNotExist } from './services/race-manager.service';
import { SessionState } from './services/session-state.service';

export function getSocketFromArgs(host: ArgumentsHost): Socket {
  const args = host.getArgs();
  for (const arg of args) {
    if (arg instanceof Socket) {
      return arg;
    }
  }
}

@Catch(RaceDoesNotExist)
export class RaceDoesNotExistFilter extends BaseWsExceptionFilter {
  raceEvents: RaceEvents;
  sessionState: SessionState;
  constructor() {
    super();
    this.raceEvents = new RaceEvents();
    this.sessionState = new SessionState();
  }

  async catch(error: RaceDoesNotExist, host: ArgumentsHost) {
    const socket = getSocketFromArgs(host);
    this.sessionState.removeRaceID(socket);
    this.raceEvents.raceDoesNotExist(socket, error.id);
  }
}

@Catch(InvalidKeystrokeException)
export class InvalidKeystrokeFilter extends BaseWsExceptionFilter {
  async catch(error: InvalidKeystrokeException) {
    Sentry.withScope((scope) => {
      const player = error.race.members[error.userId];
      const data = {
        challengeId: error.race.challenge.id,
        expected: error.expected,
        input: error.input,
        keystroke: error.keystroke,
        userId: error.userId,
      };
      const typedKeystrokes = player.typedKeyStrokes;
      const validKeyStrokes = player.validKeyStrokes();
      scope.setUser({
        id:
          process.env.NODE_ENV === 'production'
            ? `${error.race.id}-${error.userId}`
            : `[local-testing] ${error.race.id}`,
      });
      scope.setExtras({ error: data, typedKeystrokes, validKeyStrokes });
      Sentry.captureException(error);
    });
  }
}


================================================
FILE: packages/back-nest/src/races/race.gateway.ts
================================================
import { UseFilters, UsePipes, ValidationPipe } from '@nestjs/common';
import {
  SubscribeMessage,
  WebSocketGateway,
  WebSocketServer,
} from '@nestjs/websockets';
import { Server, Socket } from 'socket.io';
import { gatewayMetadata } from 'src/config/cors';
import { RaceSettingsDTO } from './entities/race-settings.dto';
import {
  InvalidKeystrokeFilter,
  RaceDoesNotExistFilter,
} from './race.exceptions';
import { AddKeyStrokeService } from './services/add-keystroke.service';
import { CountdownService } from './services/countdown.service';
import { Locker } from './services/locker.service';
import { RaceEvents } from './services/race-events.service';
import { RaceManager } from './services/race-manager.service';
import { KeystrokeDTO } from './services/race-player.service';
import { SessionState } from './services/session-state.service';

@WebSocketGateway(gatewayMetadata)
export class RaceGateway {
  @WebSocketServer()
  server: Server;

  constructor(
    private raceManager: RaceManager,
    private session: SessionState,
    private raceEvents: RaceEvents,
    private addKeyStrokeService: AddKeyStrokeService,
    private manageRaceLock: Locker,
    private countdownService: CountdownService,
  ) {}

  afterInit(server: Server) {
    console.info('[SpeedTyper.dev] Websocket Server Started.');
    this.raceEvents.server = server;
  }

  handleDisconnect(socket: Socket) {
    console.info(
      `Client disconnected: ${socket.request.session.user.username}`,
    );
    const raceId = this.session.getRaceID(socket);
    const user = this.session.getUser(socket);
    this.raceManager.leaveRace(user, raceId);
    this.session.removeRaceID(socket);
    this.manageRaceLock.release(socket.id);
  }

  async handleConnection(socket: Socket) {
    const userId = this.session.getUser(socket).id;
    const userIsAlreadyPlaying = this.raceManager.userIsAlreadyPlaying(userId);
    for (const [sid, s] of this.server.sockets.sockets) {
      // We need to cleanup other sockets for the same user
      // Because we can not have several instances of the same user in the same race twice
      // Consider adding this possibility, but for different races
      if (sid === socket.id) {
        console.log('Same socket id, keeping.');
        continue;
      }
      if (s.request.session.user.id === userId) {
        console.log(
          'Different socket id, same user. Disconnecting previous socket',
        );
        if (userIsAlreadyPlaying) {
          this.raceManager.leaveRace(
            s.request.session.user,
            s.request.session.raceId,
          );
        }
        s.disconnect();
      }

      if (!this.raceManager.userIsAlreadyPlaying(s.request.session.user.id)) {
        console.log(
          'Disconnecting because socket is not playing: ',
          s.request.session.user.username,
          s.request.session.user.id,
        );
        s.disconnect();
        continue;
      }

      console.log(
        'Keeping: ',
        s.request.session.user.username,
        s.request.session.user.id,
      );
    }

    console.info(
      `Client connected: ${socket.request.session.user.username} - ${socket.id}`,
    );
  }

  @UseFilters(new RaceDoesNotExistFilter())
  @SubscribeMessage('refresh_challenge')
  async onRefreshChallenge(socket: Socket, settings: RaceSettingsDTO) {
    this.raceEvents.logConnectedSockets();
    const socketID = socket.id;
    await this.manageRaceLock.runIfOpen(socketID, async () => {
      const raceId = this.session.getRaceID(socket);
      if (!raceId) {
        this.manageRaceLock.release(socket.id);
        this.onPlay(socket, settings);
        return;
      }
      const user = this.session.getUser(socket);
      if (this.raceManager.isOwner(user.id, raceId)) {
        const race = await this.raceManager.refresh(raceId, settings.language);
        this.raceEvents.updatedRace(socket, race);
      }
    });
  }

  @UsePipes(new ValidationPipe())
  @SubscribeMessage('play')
  async onPlay(socket: Socket, settings: RaceSettingsDTO) {
    const socketID = socket.id;
    await this.manageRaceLock.runIfOpen(socketID, async () => {
      const user = this.session.getUser(socket);
      const raceId = this.session.getRaceID(socket);
      this.raceManager.leaveRace(user, raceId);
      const race = await this.raceManager.create(user, settings);
      this.raceEvents.createdRace(socket, race);
      this.session.saveRaceID(socket, race.id);
    });
  }

  @UseFilters(new RaceDoesNotExistFilter(), new InvalidKeystrokeFilter())
  @UsePipes(new ValidationPipe())
  @SubscribeMessage('key_stroke')
  async onKeyStroke(socket: Socket, keystroke: KeystrokeDTO) {
    keystroke.timestamp = new Date().getTime();
    this.addKeyStrokeService.validate(socket, keystroke);
    this.addKeyStrokeService.addKeyStroke(socket, keystroke);
  }

  @SubscribeMessage('join')
  async onJoin(socket: Socket, id: string) {
    this.manageRaceLock.runIfOpen(socket.id, async () => {
      const user = this.session.getUser(socket);
      const raceID = this.session.getRaceID(socket);
      this.raceManager.leaveRace(user, raceID);
      const race = this.raceManager.join(user, id);
      if (!race) {
        // if there is no race with the ID in the state
        // we recreate a race for the user
        // this makes sure that the game does not crash for the user
        // TODO: we should create a race with the same ID, and even same challenge selected
        // So that the other people in the race can then join the same room
        // instead of creating their own through this same functionality
        // we do however have to reset the progress for all participants as it is only kept in state
        this.manageRaceLock.release(socket.id);
        return this.onPlay(socket, { language: undefined, isPublic: false });
      }
      this.raceEvents.joinedRace(socket, race, user);
      this.session.saveRaceID(socket, id);
    });
  }

  @SubscribeMessage('start_race')
  async onStart(socket: Socket) {
    const user = this.session.getUser(socket);
    const raceID = this.session.getRaceID(socket);
    const race = this.raceManager.getRace(raceID);
    if (race.canStartRace(user.id)) {
      this.countdownService.countdown(race);
    }
  }
}


================================================
FILE: packages/back-nest/src/races/races.module.ts
================================================
import { Module } from '@nestjs/common';
import { ChallengesModule } from 'src/challenges/challenges.module';
import { ResultsModule } from 'src/results/results.module';
import { TrackingModule } from 'src/tracking/tracking.module';
import { RacesController } from './race.controllers';
import { RaceGateway } from './race.gateway';
import { AddKeyStrokeService } from './services/add-keystroke.service';
import { CountdownService } from './services/countdown.service';
import { KeyStrokeValidationService } from './services/keystroke-validator.service';
import { Locker } from './services/locker.service';
import { ProgressService } from './services/progress.service';
import { RaceEvents } from './services/race-events.service';
import { RaceManager } from './services/race-manager.service';
import { ResultsHandlerService } from './services/results-handler.service';
import { SessionState } from './services/session-state.service';

@Module({
  imports: [ChallengesModule, ResultsModule, TrackingModule],
  controllers: [RacesController],
  providers: [
    AddKeyStrokeService,
    KeyStrokeValidationService,
    ProgressService,
    RaceEvents,
    RaceGateway,
    RaceManager,
    ResultsHandlerService,
    SessionState,
    Locker,
    CountdownService,
  ],
  exports: [RaceManager, RaceEvents, KeyStrokeValidationService],
})
export class RacesModule {}


================================================
FILE: packages/back-nest/src/races/services/add-keystroke.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { Socket } from 'socket.io';
import { TrackingService } from 'src/tracking/tracking.service';
import { KeyStrokeValidationService } from './keystroke-validator.service';
import { ProgressService } from './progress.service';
import { RaceEvents } from './race-events.service';
import { RaceManager } from './race-manager.service';
import { KeystrokeDTO } from './race-player.service';
import { ResultsHandlerService } from './results-handler.service';
import { SessionState } from './session-state.service';

@Injectable()
export class AddKeyStrokeService {
  constructor(
    private manager: RaceManager,
    private session: SessionState,
    private validator: KeyStrokeValidationService,
    private progressService: ProgressService,
    private trackingService: TrackingService,
    private events: RaceEvents,
    private resultHandler: ResultsHandlerService,
  ) {}

  validate(socket: Socket, keyStroke: KeystrokeDTO) {
    const user = this.session.getUser(socket);
    const raceId = this.session.getRaceID(socket);
    const player = this.manager.getPlayer(raceId, user.id);
    this.validator.validateKeyStroke(player, keyStroke);
  }

  async addKeyStroke(socket: Socket, keyStroke: KeystrokeDTO) {
    const user = this.session.getUser(socket);
    const raceId = this.session.getRaceID(socket);
    const player = this.manager.getPlayer(raceId, user.id);
    if (player.hasNotStartedTyping()) {
      this.trackingService.trackRaceStarted();
    }
    player.addKeyStroke(keyStroke);
    if (keyStroke.correct) {
      player.progress = this.progressService.calculateProgress(player);
      const code = this.manager.getCode(raceId);
      player.updateLiteral(code, keyStroke);
      this.events.progressUpdated(socket, raceId, player);
    }
    this.syncStartTime(raceId, new Date(keyStroke.timestamp));
    const race = this.manager.getRace(raceId);
    this.resultHandler.handleResult(race, user);
  }

  async syncStartTime(raceId: string, timestamp: Date) {
    const race = this.manager.getRace(raceId);
    if (!race.isMultiplayer()) {
      race.startTime = race.startTime ?? timestamp;
    }
  }
}


================================================
FILE: packages/back-nest/src/races/services/countdown.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { RaceEvents } from './race-events.service';
import { Race } from './race.service';

@Injectable()
export class CountdownService {
  constructor(private raceEvents: RaceEvents) {}
  async countdown(race: Race) {
    race.countdown = true;
    const seconds = 5;
    for (let i = seconds; i > 0; i--) {
      const delay = seconds - i;
      const timeout = setTimeout(() => {
        this.raceEvents.countdown(race.id, i);
      }, delay * 1000);
      race.timeouts.push(timeout);
    }
    const timeout = setTimeout(() => {
      race.start();
      this.raceEvents.raceStarted(race);
      race.timeouts = [];
      race.countdown = false;
    }, seconds * 1000);
    race.timeouts.push(timeout);
  }
}


================================================
FILE: packages/back-nest/src/races/services/keystroke-validator.service.ts
================================================
import { BadRequestException, Injectable } from '@nestjs/common';
import { Challenge } from 'src/challenges/entities/challenge.entity';
import { RaceManager } from './race-manager.service';
import { KeystrokeDTO, RacePlayer } from './race-player.service';
import { Race } from './race.service';

export class InvalidKeystrokeException extends Error {
  userId: string;
  keystroke: KeystrokeDTO;
  input: string;
  expected: string;
  race: Race;
  constructor(
    userId: string,
    keystroke: KeystrokeDTO,
    userInput: string,
    expectedUserInput: string,
    race: Race,
  ) {
    super('Unexpected keystroke received2');
    this.userId = userId;
    this.keystroke = keystroke;
    this.input = userInput;
    this.expected = expectedUserInput;
    this.race = race;
  }
}

export class RaceNotStartedException extends BadRequestException {
  constructor() {
    super('Race not started');
  }
}

export function getCurrentInputBeforeKeystroke(
  player: RacePlayer,
  keystroke: KeystrokeDTO,
) {
  const currentInputBeforeKey = player
    .validKeyStrokes()
    .filter((stroke) => stroke.index < keystroke.index)
    .map((stroke) => stroke.key)
    .join('');
  return currentInputBeforeKey;
}

@Injectable()
export class KeyStrokeValidationService {
  constructor(private raceManager: RaceManager) {}

  validateKeyStroke(player: RacePlayer, recentKeyStroke: KeystrokeDTO) {
    this.validateRaceStarted(player.raceId);
    const currentInputBeforeKey = getCurrentInputBeforeKeystroke(
      player,
      recentKeyStroke,
    );
    const userInput = currentInputBeforeKey + recentKeyStroke.key;
    const expectedInput = this.getStrippedCode(player.raceId, recentKeyStroke);
    const correct = userInput === expectedInput;
    if (recentKeyStroke.correct && recentKeyStroke.correct !== correct) {
      throw new InvalidKeystrokeException(
        player.id,
        recentKeyStroke,
        userInput,
        expectedInput,
        this.raceManager.getRace(player.raceId),
      );
    }
  }

  validateRaceStarted(raceID: string) {
    const race = this.raceManager.getRace(raceID);
    if (!race.startTime && race.isMultiplayer()) {
      throw new RaceNotStartedException();
    }
  }

  private getStrippedCode(raceId: string, keystroke: KeystrokeDTO) {
    const code = this.raceManager.getCode(raceId);
    const strippedCode = Challenge.getStrippedCode(
      code.substring(0, keystroke.index),
    );
    return strippedCode;
  }
}


================================================
FILE: packages/back-nest/src/races/services/locker.service.ts
================================================
import { Injectable } from '@nestjs/common';

@Injectable()
export class Locker {
  lockedIDs: Set<string>;
  constructor() {
    this.lockedIDs = new Set<string>();
  }

  // this is a global lock function
  // it locks all run methods called with this lockid
  // even if they are coming from different classes
  async runIfOpen<T>(lockID: string, callback: () => Promise<T>): Promise<T> {
    if (this.lockedIDs.has(lockID)) {
      return;
    }
    this.lockedIDs.add(lockID);
    try {
      return await callback();
    } finally {
      this.lockedIDs.delete(lockID);
    }
  }

  release(id: string) {
    this.lockedIDs.delete(id);
  }
}


================================================
FILE: packages/back-nest/src/races/services/progress.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { Challenge } from 'src/challenges/entities/challenge.entity';
import { RaceManager } from './race-manager.service';
import { RacePlayer } from './race-player.service';

@Injectable()
export class ProgressService {
  constructor(private raceManager: RaceManager) {}
  calculateProgress(player: RacePlayer) {
    const currentInput = player.getValidInput();
    const code = this.raceManager.getCode(player.raceId);
    const strippedFullCode = Challenge.getStrippedCode(code);
    const progress = Math.floor(
      (currentInput.length / strippedFullCode.length) * 100,
    );
    return progress;
  }
}


================================================
FILE: packages/back-nest/src/races/services/race-events.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { Server, Socket } from 'socket.io';
import { Result } from 'src/results/entities/result.entity';
import { User } from 'src/users/entities/user.entity';
import { RacePlayer } from './race-player.service';
import { Race } from './race.service';

@Injectable()
export class RaceEvents {
  server: Server;

  getPlayerCount() {
    return this.server.sockets.sockets.size;
  }

  createdRace(socket: Socket, race: Race) {
    socket.join(race.id);
    socket.emit('race_joined', race);
    socket.emit('challenge_selected', race.challenge);
  }

  countdown(raceID: string, i: number) {
    const event = 'countdown';
    this.server.to(raceID).emit(event, i);
  }

  raceStarted(race: Race) {
    this.server.to(race.id).emit('race_started', race.startTime);
  }

  updatedRace(_: Socket, race: Race) {
    this.server.to(race.id).emit('race_joined', race);
    this.server.to(race.id).emit('challenge_selected', race.challenge);
  }

  joinedRace(socket: Socket, race: Race, user: User) {
    socket.join(race.id);
    socket.emit('race_joined', race);
    socket.to(race.id).emit('member_joined', race.members[user.id]);
  }

  leftRace(race: Race, user: User) {
    this.server.to(race.id).emit('member_left', {
      member: user.id,
      owner: race.owner,
    });
  }

  progressUpdated(socket: Socket, raceId: string, player: RacePlayer) {
    socket.to(raceId).emit('progress_updated', player);
    socket.emit('progress_updated', player);
  }

  raceCompleted(raceId: string, result: Result) {
    this.server.to(raceId).emit('race_completed', result);
  }

  raceDoesNotExist(socket: Socket, id: string) {
    socket.emit('race_does_not_exist', id);
  }
  async logConnectedSockets() {
    const sockets = await this.server.fetchSockets();
    console.log('Connected sockets: ', sockets.length);
  }
}


================================================
FILE: packages/back-nest/src/races/services/race-manager.service.ts
================================================
import { BadRequestException, Injectable } from '@nestjs/common';
import { Challenge } from 'src/challenges/entities/challenge.entity';
import { ChallengeService } from 'src/challenges/services/challenge.service';
import { LiteralService } from 'src/challenges/services/literal.service';
import { User } from 'src/users/entities/user.entity';
import { RaceSettingsDTO } from '../entities/race-settings.dto';
import { RaceEvents } from './race-events.service';
import { RacePlayer } from './race-player.service';
import { Race } from './race.service';

export interface PublicRace {
  id: string;
  ownerName: string;
  memberCount: number;
}

@Injectable()
export class RaceManager {
  private races: Record<string, Race> = {};

  constructor(
    private challengeService: ChallengeService,
    private literalsService: LiteralService,
    private raceEvents: RaceEvents,
  ) {}

  getOnlineCount(): number {
    const memberIds = Object.values(this.races)
      .flatMap((race) => Object.values(race.members))
      .map((member) => member.id);
    const uniqueMemberIds = new Set(memberIds);
    return uniqueMemberIds.size;
  }

  getPublicRaces(): PublicRace[] {
    const races = Object.values(this.races);
    const publicRaces = races
      .filter((race) => race.isPublic)
      .map((race) => {
        return race.toPublic();
      });
    return publicRaces;
  }

  syncUser(raceId: string, prevUserId: string, user: User) {
    const race = this.getRace(raceId);
    if (race.owner === prevUserId) {
      race.owner = user.id;
    }
    const player = race.members[prevUserId];
    player.id = user.id;
    player.username = user.username;
    delete race.members[prevUserId];
    race.members[user.id] = player;
  }

  debugSize(msg: string) {
    const racesSize = JSON.stringify(this.races).length;
    console.log(msg, {
      racesSize,
      races: Object.keys(this.races).length,
      players: this.getOnlineCount(),
    });
  }
  async create(user: User, settings: RaceSettingsDTO): Promise<Race> {
    this.debugSize('create');
    const challenge = await this.challengeService.getRandom(settings.language);
    const literals = this.literalsService.calculateLiterals(challenge.content);
    const race = new Race(user, challenge, literals);
    race.isPublic = settings.isPublic;
    this.races[race.id] = race;
    return race;
  }

  async refresh(id: string, language?: string): Promise<Race> {
    this.debugSize('refresh');
    const race = this.getRace(id);
    const challenge = await this.challengeService.getRandom(language);
    const literals = this.literalsService.calculateLiterals(challenge.content);
    race.challenge = challenge;
    race.literals = literals;
    race.resetProgress();
    return race;
  }

  getRace(id: string): Race {
    const race = this.races[id];
    if (!race) throw new RaceDoesNotExist(id);
    return race;
  }

  getPlayer(raceId: string, userId: string): RacePlayer {
    const race = this.getRace(raceId);
    return race.getPlayer(userId);
  }

  getChallenge(raceId: string): Challenge {
    const race = this.getRace(raceId);
    return race.challenge;
  }

  // Get the full code string of the currently active challenge for the provided race id
  getCode(raceId: string): string {
    return this.getChallenge(raceId).content;
  }

  join(user: User, raceId: string): Race | null {
    const race = this.races[raceId];
    // it's important to return null instead of throwing
    // a RaceDoesNotExist error because the exception filter
    // sends a race_does_not_exist event back to the client
    // and the client tries to join the race
    // in the controller we create a game if no game exists
    // preventing an infinite loop
    // TODO: this should be handled better in the future
    if (!race) return null;
    race.addMember(user);
    return race;
  }

  leaveRace(user: User, raceId: string) {
    const race = this.races[raceId];
    if (!race) return;
    race.removeMember(user);
    if (Object.values(race.members).length === 0) {
      delete this.races[raceId];
    } else if (race.owner === user.id) {
      race.owner = Object.values(race.members)[0].id;
    }
    this.raceEvents.leftRace(race, user);
  }

  isOwner(userId: string, raceId: string): boolean {
    const race = this.races[raceId];
    if (!race) throw new RaceDoesNotExist(raceId);
    return race.owner === userId;
  }

  userIsAlreadyPlaying(userId: string): boolean {
    return Object.values(this.races)
      .flatMap((race) => Object.keys(race.members))
      .includes(userId);
  }
}

export class RaceDoesNotExist extends BadRequestException {
  id: string;
  constructor(id: string) {
    super(`Race with id=${id} does not exist`);
    this.id = id;
    Object.setPrototypeOf(this, RaceDoesNotExist.prototype);
  }
}


================================================
FILE: packages/back-nest/src/races/services/race-player.service.ts
================================================
import { Exclude, instanceToPlain } from 'class-transformer';
import {
  IsBoolean,
  IsNotEmpty,
  IsNumber,
  IsString,
  MaxLength,
} from 'class-validator';
import { LiteralService } from 'src/challenges/services/literal.service';
import { User } from 'src/users/entities/user.entity';

export class KeystrokeDTO {
  @IsString()
  @IsNotEmpty()
  @MaxLength(1)
  key: string;
  @IsNotEmpty()
  @IsNumber()
  timestamp: number;
  @IsNotEmpty()
  @IsBoolean()
  correct: boolean;
  @IsNotEmpty()
  @IsNumber()
  index: number;
}

export class RacePlayer {
  id: string;
  username: string;

  recentlyTypedLiteral: string;

  @Exclude()
  literalOffset: number;

  @Exclude()
  literals: string[];

  @Exclude()
  saved: boolean;

  progress: number;

  @Exclude()
  raceId: string;

  @Exclude()
  typedKeyStrokes: KeystrokeDTO[];

  @Exclude()
  literalService: LiteralService;

  toJSON() {
    return instanceToPlain(this);
  }

  reset(literals: string[]) {
    this.literals = literals;
    this.literalOffset = 0;
    this.recentlyTypedLiteral = this.literals[this.literalOffset];
    this.progress = 0;
    this.saved = false;
    this.typedKeyStrokes = [];
  }

  validKeyStrokes() {
    const keyStrokes = this.typedKeyStrokes;
    const latestKeyStrokePerIndex = Object.fromEntries(
      keyStrokes.map((keyStroke) => {
        return [keyStroke.index, keyStroke];
      }),
    );
    const firstIncorrectKeystroke = Object.values(latestKeyStrokePerIndex).find(
      (keystroke) => !keystroke.correct,
    );
    const validKeyStrokes = Object.values(latestKeyStrokePerIndex)
      .filter((keyStroke) => keyStroke.correct)
      .filter((keystroke) =>
        firstIncorrectKeystroke
          ? keystroke.index < firstIncorrectKeystroke.index
          : true,
      );
    return validKeyStrokes;
  }

  incorrectKeyStrokes() {
    const incorrectKeyStrokes = this.typedKeyStrokes.filter(
      (keyStroke) => !keyStroke.correct,
    );
    return incorrectKeyStrokes;
  }

  getValidInput() {
    const validInput = this.validKeyStrokes()
      .map((keyStroke) => keyStroke.key)
      .join('');
    return validInput;
  }

  addKeyStroke(keyStroke: KeystrokeDTO) {
    keyStroke.timestamp = new Date().getTime();
    this.typedKeyStrokes.push(keyStroke);
  }

  updateLiteral(code: string, keyStroke: KeystrokeDTO) {
    const untypedCode = code.substring(keyStroke.index);
    const nextLiteral = this.literals[this.literalOffset + 1];
    const startsWithNextLiteral = this.literalService
      .calculateLiterals(untypedCode.trimStart())
      .join('')
      .startsWith(nextLiteral);
    if (startsWithNextLiteral && this.literals.length > 1) {
      this.literalOffset++;
    }
    this.recentlyTypedLiteral = this.literals[this.literalOffset];
  }

  hasNotStartedTyping(): boolean {
    return this.typedKeyStrokes.length === 0;
  }

  hasCompletedRace(): boolean {
    return this.progress === 100;
  }

  static fromUser(raceId: string, user: User, literals: string[]) {
    const player = new RacePlayer();
    player.id = user.id;
    player.raceId = raceId;
    player.username = user.username;
    player.progress = 0;
    player.literals = literals;
    player.recentlyTypedLiteral = player.literals[0];
    player.literalOffset = 0;
    player.typedKeyStrokes = [];
    player.literalService = new LiteralService();
    player.saved = false;
    return player;
  }
}


================================================
FILE: packages/back-nest/src/races/services/race.service.ts
================================================
import { Exclude, instanceToPlain } from 'class-transformer';
import { randomUUID } from 'crypto';
import { Challenge } from 'src/challenges/entities/challenge.entity';
import { User } from 'src/users/entities/user.entity';
import { RacePlayer } from './race-player.service';

export interface PublicRace {
  id: string;
  ownerName: string;
  memberCount: number;
}

export class Race {
  id: string;
  challenge: Challenge;
  owner: string;
  members: Record<string, RacePlayer>;
  @Exclude()
  literals: string[];

  @Exclude()
  timeouts: NodeJS.Timeout[];

  startTime?: Date;

  @Exclude()
  countdown: boolean;

  isPublic: boolean;

  togglePublic(): boolean {
    this.isPublic = !this.isPublic;
    return this.isPublic;
  }
  toPublic(): PublicRace {
    const ownerName = this.members[this.owner].username;
    const memberCount = Object.keys(this.members).length;
    return {
      id: this.id,
      ownerName,
      memberCount,
    };
  }

  isMultiplayer(): boolean {
    return Object.keys(this.members).length > 1;
  }

  toJSON() {
    return instanceToPlain(this);
  }

  constructor(owner: User, challenge: Challenge, literals: string[]) {
    this.id = randomUUID().replaceAll('-', '');
    this.members = {};
    this.owner = owner.id;
    this.challenge = challenge;
    this.literals = literals;
    this.timeouts = [];
    this.countdown = false;
    this.addMember(owner);
    this.isPublic = false;
  }

  start() {
    this.startTime = new Date();
  }

  canStartRace(userID: string): boolean {
    return !this.countdown && !this.startTime && this.owner === userID;
  }

  getPlayer(id: string) {
    return this.members[id];
  }

  resetProgress() {
    Object.values(this.members).forEach((player) => {
      player.reset(this.literals);
    });
    this.startTime = undefined;
    for (const timeout of this.timeouts) {
      clearTimeout(timeout);
    }
    this.timeouts = [];
    this.countdown = false;
  }

  addMember(user: User) {
    this.members[user.id] = RacePlayer.fromUser(this.id, user, this.literals);
  }

  removeMember(user: User) {
    delete this.members[user.id];
  }
}


================================================
FILE: packages/back-nest/src/races/services/results-handler.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { ResultFactoryService } from 'src/results/services/result-factory.service';
import { ResultService } from 'src/results/services/results.service';
import { TrackingService } from 'src/tracking/tracking.service';
import { User } from 'src/users/entities/user.entity';
import { RaceEvents } from './race-events.service';
import { Race } from './race.service';

@Injectable()
export class ResultsHandlerService {
  constructor(
    private factory: ResultFactoryService,
    private events: RaceEvents,
    private results: ResultService,
    private tracker: TrackingService,
  ) {}
  async handleResult(race: Race, user: User) {
    const player = race.getPlayer(user.id);
    if (player.hasCompletedRace()) {
      if (player.saved) {
        return;
      }
      player.saved = true;
      let result = this.factory.factory(race, player, user);
      if (!user.isAnonymous) {
        result = await this.results.create(result);
      }
      result.percentile = await this.results.getResultPercentile(result.cpm);
      this.tracker.trackRaceCompleted();
      this.events.raceCompleted(race.id, result);
    }
  }
}


================================================
FILE: packages/back-nest/src/races/services/session-state.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { Socket } from 'socket.io';
import { User } from 'src/users/entities/user.entity';

@Injectable()
export class SessionState {
  getUser(socket: Socket): User {
    return socket.request.session.user;
  }

  getRaceID(socket: Socket): string {
    return socket.request.session.raceId;
  }

  saveRaceID(socket: Socket, id: string) {
    const prevRaceID = socket.request.session.raceId;
    socket.request.session.raceId = id;
    socket.request.session.save(() => {
      socket.leave(prevRaceID);
    });
  }

  removeRaceID(socket: Socket) {
    const prevRaceID = socket.request.session.raceId;
    socket.request.session.raceId = null;
    socket.request.session.save(() => {
      socket.leave(prevRaceID);
    });
  }
}


================================================
FILE: packages/back-nest/src/races/services/tests/race-player.service.spec.ts
================================================
import { RacePlayer } from '../race-player.service';

describe('[unit] validKeyStrokes()', () => {
  const player = new RacePlayer();

  beforeEach(() => {
    const typedKeystrokes = [
      { correct: true, index: 1, key: 'f', timestamp: 1676334891980 },
      { correct: true, index: 2, key: 'u', timestamp: 1676334892242 },
      { correct: true, index: 3, key: 'n', timestamp: 1676334892503 },
      { correct: true, index: 4, key: 'c', timestamp: 1676334892503 },
    ];
    player.typedKeyStrokes = typedKeystrokes;
  });

  it('should include all valid keystrokes', () => {
    const validKeyStrokes = player.validKeyStrokes();
    expect(validKeyStrokes).toEqual(player.typedKeyStrokes);
  });

  it('should filter out invalid keystrokes all valid keystrokes', () => {
    const expectedValidKeystrokes = [...player.typedKeyStrokes];
    player.typedKeyStrokes.push({
      correct: false,
      index: 5,
      key: 'd',
      timestamp: 1676334892503,
    });
    const validKeyStrokes = player.validKeyStrokes();
    expect(validKeyStrokes).toEqual(expectedValidKeystrokes);
  });

  it('should use the latest timestamp for each index', () => {
    const expectedValidKeystrokes = [player.typedKeyStrokes[0]];
    player.typedKeyStrokes.push({
      correct: false,
      index: 2,
      key: 'd',
      timestamp: 1676334892503,
    });
    const validKeyStrokes = player.validKeyStrokes();
    expect(validKeyStrokes).toEqual(expectedValidKeystrokes);
  });
});

describe('[functional] validKeyStrokes()', () => {
  const player = new RacePlayer();
  player.typedKeyStrokes = [
    { correct: true, index: 1, key: 'f', timestamp: 1676392785787 },
    { correct: true, index: 2, key: 'u', timestamp: 1676392785931 },
    { correct: true, index: 3, key: 'n', timestamp: 1676392786176 },
    { correct: true, index: 4, key: 'c', timestamp: 1676392786253 },
    { correct: true, index: 5, key: ' ', timestamp: 1676392786343 },
    { correct: true, index: 6, key: 'n', timestamp: 1676392786485 },
    { correct: true, index: 7, key: 'e', timestamp: 1676392786572 },
    { correct: true, index: 8, key: 'w', timestamp: 1676392786630 },
    { correct: true, index: 9, key: 'W', timestamp: 1676392786851 },
    { correct: true, index: 10, key: 'a', timestamp: 1676392787083 },
    { correct: true, index: 11, key: 't', timestamp: 1676392787162 },
    { correct: true, index: 12, key: 'c', timestamp: 1676392787392 },
    { correct: true, index: 13, key: 'h', timestamp: 1676392787460 },
    { correct: true, index: 14, key: 'e', timestamp: 1676392787566 },
    { correct: true, index: 15, key: 'r', timestamp: 1676392787696 },
    { correct: true, index: 16, key: 'G', timestamp: 1676392787997 },
    { correct: false, index: 17, key: 'B', timestamp: 1676392788000 },
    { correct: false, index: 18, key: 'r', timestamp: 1676392788196 },
    { correct: true, index: 17, key: 'r', timestamp: 1676392788777 },
    { correct: false, index: 18, key: 'u', timestamp: 1676392788952 },
    { correct: false, index: 19, key: 'o', timestamp: 1676392788963 },
    { correct: false, index: 20, key: 'o', timestamp: 1676392789165 },
    { correct: true, index: 18, key: 'o', timestamp: 1676392790150 },
    { correct: true, index: 19, key: 'u', timestamp: 1676392790279 },
    { correct: true, index: 20, key: 'p', timestamp: 1676392790365 },
    { correct: true, index: 21, key: '(', timestamp: 1676392790776 },
    { correct: true, index: 22, key: ')', timestamp: 1676392790847 },
    { correct: true, index: 23, key: ' ', timestamp: 1676392791108 },
    { correct: true, index: 24, key: 'w', timestamp: 1676392791308 },
    { correct: true, index: 25, key: 'a', timestamp: 1676392791492 },
    { correct: true, index: 26, key: 't', timestamp: 1676392791555 },
    { correct: true, index: 27, key: 'c', timestamp: 1676392791771 },
    { correct: true, index: 28, key: 'h', timestamp: 1676392791852 },
    { correct: true, index: 29, key: 'e', timestamp: 1676392791944 },
    { correct: true, index: 30, key: 'r', timestamp: 1676392792046 },
    { correct: true, index: 31, key: 'G', timestamp: 1676392792307 },
    { correct: true, index: 32, key: 'r', timestamp: 1676392792494 },
    { correct: true, index: 33, key: 'o', timestamp: 1676392792554 },
    { correct: true, index: 34, key: 'u', timestamp: 1676392792659 },
    { correct: true, index: 35, key: 'p', timestamp: 1676392792729 },
    { correct: true, index: 36, key: ' ', timestamp: 1676392792882 },
    { correct: true, index: 37, key: '{', timestamp: 1676392793137 },
    { correct: true, index: 40, key: '\n', timestamp: 1676392793228 },
    { correct: true, index: 41, key: 'r', timestamp: 1676392793933 },
    { correct: true, index: 42, key: 'e', timestamp: 1676392794021 },
    { correct: true, index: 43, key: 't', timestamp: 1676392794141 },
    { correct: true, index: 44, key: 'u', timestamp: 1676392794197 },
    { correct: true, index: 45, key: 'r', timestamp: 1676392794324 },
    { correct: true, index: 46, key: 'n', timestamp: 1676392794454 },
    { correct: true, index: 41, key: 'r', timestamp: 1676392795190 },
    { correct: true, index: 42, key: 'e', timestamp: 1676392795299 },
    { correct: true, index: 43, key: 't', timestamp: 1676392795410 },
    { correct: true, index: 44, key: 'u', timestamp: 1676392795468 },
    { correct: true, index: 45, key: 'r', timestamp: 1676392795601 },
    { correct: true, index: 46, key: 'n', timestamp: 1676392795683 },
    { correct: true, index: 47, key: ' ', timestamp: 1676392796151 },
    { correct: true, index: 48, key: 'w', timestamp: 1676392796361 },
    { correct: true, index: 49, key: 'a', timestamp: 1676392796514 },
    { correct: true, index: 50, key: 't', timestamp: 1676392796588 },
    { correct: true, index: 51, key: 'c', timestamp: 1676392796827 },
    { correct: true, index: 52, key: 'h', timestamp: 1676392796909 },
    { correct: true, index: 53, key: 'e', timestamp: 1676392797008 },
    { correct: true, index: 54, key: 'r', timestamp: 1676392797116 },
    { correct: true, index: 55, key: 'G', timestamp: 1676392797496 },
    { correct: true, index: 56, key: 'r', timestamp: 1676392797730 },
    { correct: true, index: 57, key: 'o', timestamp: 1676392797808 },
    { correct: true, index: 58, key: 'u', timestamp: 1676392797910 },
    { correct: true, index: 59, key: 'p', timestamp: 1676392797968 },
    { correct: true, index: 60, key: '{', timestamp: 1676392798346 },
    { correct: true, index: 65, key: '\n', timestamp: 1676392798497 },
    { correct: true, index: 66, key: 'k', timestamp: 1676392800709 },
    { correct: true, index: 67, key: 'e', timestamp: 1676392800788 },
    { correct: true, index: 68, key: 'y', timestamp: 1676392800894 },
    { correct: true, index: 69, key: 'W', timestamp: 1676392801060 },
    { correct: true, index: 70, key: 'a', timestamp: 1676392801287 },
    { correct: true, index: 71, key: 't', timestamp: 1676392801399 },
    { correct: true, index: 72, key: 'c', timestamp: 1676392801635 },
    { correct: true, index: 73, key: 'h', timestamp: 1676392801724 },
    { correct: true, index: 74, key: 'e', timestamp: 1676392801810 },
    { correct: true, index: 75, key: 'r', timestamp: 1676392801933 },
    { correct: true, index: 76, key: 's', timestamp: 1676392802024 },
    { correct: false, index: 66, key: 'd', timestamp: 1676392804327 },
    { correct: false, index: 67, key: 'e', timestamp: 1676392804543 },
    { correct: false, index: 68, key: 'y', timestamp: 1676392804700 },
    { correct: false, index: 69, key: 'W', timestamp: 1676392804958 },
    { correct: false, index: 70, key: 'a', timestamp: 1676392805036 },
    { correct: false, index: 71, key: 't', timestamp: 1676392806184 },
    { correct: false, index: 72, key: 'c', timestamp: 1676392806433 },
    { correct: false, index: 73, key: 'h', timestamp: 1676392806553 },
    { correct: false, index: 74, key: 'e', timestamp: 1676392806625 },
    { correct: false, index: 75, key: 'r', timestamp: 1676392806753 },
    { correct: false, index: 76, key: 's', timestamp: 1676392806850 },
    { correct: false, index: 77, key: ':', timestamp: 1676392807263 },
    { correct: true, index: 66, key: 'k', timestamp: 1676392808209 },
    { correct: true, index: 67, key: 'e', timestamp: 1676392808311 },
    { correct: true, index: 68, key: 'y', timestamp: 1676392808401 },
    { correct: true, index: 69, key: 'W', timestamp: 1676392808559 },
    { correct: true, index: 70, key: 'a', timestamp: 1676392808736 },
    { correct: true, index: 71, key: 't', timestamp: 1676392808809 },
    { correct: true, index: 72, key: 'c', timestamp: 1676392809050 },
    { correct: true, index: 73, key: 'h', timestamp: 1676392809118 },
    { correct: true, index: 74, key: 'e', timestamp: 1676392809227 },
    { correct: true, index: 75, key: 'r', timestamp: 1676392809328 },
    { correct: true, index: 76, key: 's', timestamp: 1676392809396 },
    { correct: true, index: 77, key: ':', timestamp: 1676392809639 },
    { correct: true, index: 78, key: ' ', timestamp: 1676392809832 },
    { correct: true, index: 79, key: 'm', timestamp: 1676392810011 },
    { correct: true, index: 80, key: 'a', timestamp: 1676392810089 },
    { correct: true, index: 81, key: 'k', timestamp: 1676392810198 },
    { correct: true, index: 82, key: 'e', timestamp: 1676392810274 },
    { correct: true, index: 83, key: '(', timestamp: 1676392810520 },
    { correct: true, index: 84, key: 'w', timestamp: 1676392810915 },
    { correct: true, index: 85, key: 'a', timestamp: 1676392811118 },
    { correct: true, index: 86, key: 't', timestamp: 1676392811218 },
    { correct: true, index: 87, key: 'c', timestamp: 1676392811442 },
    { correct: true, index: 88, key: 'h', timestamp: 1676392811538 },
    { correct: true, index: 89, key: 'e', timestamp: 1676392811649 },
    { correct: true, index: 90, key: 'r', timestamp: 1676392811760 },
    { correct: true, index: 91, key: 'S', timestamp: 1676392811955 },
    { correct: true, index: 92, key: 'e', timestamp: 1676392812097 },
    { correct: true, index: 93, key: 't', timestamp: 1676392812197 },
    { correct: true, index: 94, key: 'B', timestamp: 1676392812554 },
    { correct: true, index: 95, key: 'y', timestamp: 1676392812704 },
    { correct: true, index: 96, key: 'K', timestamp: 1676392812921 },
    { correct: true, index: 97, key: 'e', timestamp: 1676392813049 },
    { correct: true, index: 98, key: 'y', timestamp: 1676392813137 },
    { correct: true, index: 99, key: ')', timestamp: 1676392813359 },
    { correct: true, index: 100, key: ',', timestamp: 1676392813650 },
    { correct: true, index: 105, key: '\n', timestamp: 1676392813778 },
    { correct: true, index: 106, key: 'r', timestamp: 1676392814158 },
    { correct: true, index: 107, key: 'a', timestamp: 1676392814246 },
    { correct: true, index: 108, key: 'n', timestamp: 1676392814333 },
    { correct: true, index: 109, key: 'g', timestamp: 1676392814444 },
    { correct: true, index: 110, key: 'e', timestamp: 1676392814518 },
    { correct: true, index: 111, key: 's', timestamp: 1676392814609 },
    { correct: true, index: 112, key: ':', timestamp: 1676392814749 },
    { correct: true, index: 113, key: ' ', timestamp: 1676392815613 },
    { correct: true, index: 114, key: ' ', timestamp: 1676392815800 },
    { correct: true, index: 115, key: ' ', timestamp: 1676392815972 },
    { correct: true, index: 116, key: ' ', timestamp: 1676392816163 },
    { correct: true, index: 117, key: ' ', timestamp: 1676392816369 },
    { correct: true, index: 118, key: ' ', timestamp: 1676392816606 },
    { correct: true, index: 119, key: 'a', timestamp: 1676392817044 },
    { correct: true, index: 120, key: 'd', timestamp: 1676392817074 },
    { correct: true, index: 121, key: 't', timestamp: 1676392817262 },
    { correct: true, index: 122, key: '.', timestamp: 1676392817743 },
    { correct: true, index: 123, key: 'N', timestamp: 1676392818028 },
    { correct: true, index: 124, key: 'e', timestamp: 1676392818220 },
    { correct: true, index: 125, key: 'w', timestamp: 1676392818308 },
    { correct: true, index: 126, key: 'I', timestamp: 1676392818497 },
    { correct: false, index: 127, key: 'N', timestamp: 1676392818602 },
    { correct: false, index: 128, key: 't', timestamp: 1676392818801 },
    { correct: false, index: 129, key: 'e', timestamp: 1676392818895 },
    { correct: true, index: 127, key: 'n', timestamp: 1676392819553 },
    { correct: true, index: 128, key: 't', timestamp: 1676392819712 },
    { correct: true, index: 129, key: 'e', timestamp: 1676392819808 },
    { correct: true, index: 130, key: 'r', timestamp: 1676392819998 },
    { correct: true, index: 131, key: 'v', timestamp: 1676392820243 },
    { correct: true, index: 132, key: 'a', timestamp: 1676392820349 },
    { correct: true, index: 133, key: 'l', timestamp: 1676392820416 },
    { correct: true, index: 134, key: 'T', timestamp: 1676392820902 },
    { correct: true, index: 135, key: 'r', timestamp: 1676392821122 },
    { correct: true, index: 136, key: 'e', timestamp: 1676392821196 },
    { correct: true, index: 137, key: 'e', timestamp: 1676392821343 },
    { correct: true, index: 138, key: '(', timestamp: 1676392821550 },
    { correct: true, index: 139, key: ')', timestamp: 1676392821785 },
    { correct: true, index: 140, key: ',', timestamp: 1676392821968 },
    { correct: true, index: 145, key: '\n', timestamp: 1676392822798 },
    { correct: true, index: 146, key: 'w', timestamp: 1676392823218 },
    { correct: true, index: 147, key: 'a', timestamp: 1676392823403 },
    { correct: true, index: 148, key: 't', timestamp: 1676392823537 },
    { correct: true, index: 149, key: 'c', timestamp: 1676392823771 },
    { correct: true, index: 150, key: 'h', timestamp: 1676392823848 },
    { correct: true, index: 151, key: 'e', timestamp: 1676392823954 },
    { correct: true, index: 152, key: 'r', timestamp: 1676392824086 },
    { correct: true, index: 153, key: 's', timestamp: 1676392824116 },
    { correct: true, index: 154, key: ':', timestamp: 1676392824376 },
    { correct: true, index: 155, key: ' ', timestamp: 1676392824700 },
    { correct: true, index: 156, key: ' ', timestamp: 1676392824882 },
    { correct: true, index: 157, key: ' ', timestamp: 1676392825040 },
    { correct: true, index: 158, key: ' ', timestamp: 1676392825547 },
    { correct: true, index: 159, key: 'm', timestamp: 1676392825845 },
    { correct: true, index: 160, key: 'a', timestamp: 1676392825913 },
    { correct: true, index: 161, key: 'k', timestamp: 1676392826036 },
    { correct: true, index: 162, key: 'e', timestamp: 1676392826111 },
    { correct: true, index: 163, key: '(', timestamp: 1676392826422 },
    { correct: true, index: 164, key: 'w', timestamp: 1676392826766 },
  ];

  it('should include the last correct keystroke', () => {
    const expectedInput =
      'func newWatcherGroup() watcherGroup {\nreturn watcherGroup{\nkeyWatchers: make(watcherSetByKey),\nranges:      adt.NewIntervalTree(),\nwatchers:    make(w';

    const validKeyStrokes = player.validKeyStrokes();

    const actualInput = validKeyStrokes.map((stroke) => stroke.key).join('');

    expect(actualInput).toBe(expectedInput);
  });
});


================================================
FILE: packages/back-nest/src/results/entities/leaderboard-result.dto.ts
================================================
export class LeaderBoardResult {
  username: string;
  avatarUrl: string;
  cpm: number;
  accuracy: number;
  createdAt: Date;
}


================================================
FILE: packages/back-nest/src/results/entities/result.entity.ts
================================================
import { Challenge } from 'src/challenges/entities/challenge.entity';
import { User } from 'src/users/entities/user.entity';
import {
  Column,
  CreateDateColumn,
  Entity,
  ManyToOne,
  PrimaryGeneratedColumn,
} from 'typeorm';

@Entity('results')
export class Result {
  @PrimaryGeneratedColumn('uuid')
  id: string;
  @Column({ nullable: true })
  raceId: string;
  @Column()
  timeMS: number;
  @Column()
  cpm: number;
  @Column()
  mistakes: number;
  @Column()
  accuracy: number;

  @Column({ unique: true, nullable: true, default: null })
  legacyId: string;

  @CreateDateColumn({
    type: 'timestamp',
    default: () => 'CURRENT_TIMESTAMP(6)',
  })
  public createdAt: Date;
  @ManyToOne(() => Challenge, (challenge) => challenge.results, {
    onDelete: 'SET NULL',
  })
  challenge: Challenge;
  @ManyToOne(() => User, (user) => user.results, {
    onDelete: 'SET NULL',
  })
  user: User;
  userId: string;

  percentile?: number;
}


================================================
FILE: packages/back-nest/src/results/errors.ts
================================================
import { BadRequestException, ForbiddenException } from '@nestjs/common';

export class SaveResultAnonymousNotAllowed extends ForbiddenException {
  constructor() {
    super('Anonymous users cannot save results');
  }
}

export class SaveResultInvalidUserID extends ForbiddenException {
  constructor() {
    super('Users can only save their own results');
  }
}

export class SaveResultRaceNotCompleted extends BadRequestException {
  constructor() {
    super('User did not complete the race');
  }
}

export class SaveResultUserNotInRace extends BadRequestException {
  constructor() {
    super('User is not playing in the race');
  }
}


================================================
FILE: packages/back-nest/src/results/results.controller.ts
================================================
import {
  BadRequestException,
  Controller,
  Get,
  InternalServerErrorException,
  Param,
  Req,
} from '@nestjs/common';
import { isUUID } from 'class-validator';
import { Request } from 'express';
import { LeaderBoardResult } from './entities/leaderboard-result.dto';
import { ResultService } from './services/results.service';

@Controller('results')
export class ResultsController {
  leaderboardP?: Promise<LeaderBoardResult[]>;
  constructor(private resultsService: ResultService) {}
  @Get('leaderboard')
  async getLeaderboard(): Promise<LeaderBoardResult[]> {
    if (this.leaderboardP) {
      // there is an ongoing promise
      return this.leaderboardP;
    }
    // cache the leaderboard promise so we only hit the DB once per concurrent request
    this.leaderboardP = this.resultsService.getLeaderboard();
    return this.leaderboardP.finally(() => {
      // reset the promise so new clients don't get a stale leaderboard
      this.leaderboardP = undefined;
    });
  }
  @Get('/stats')
  async getStatsByUser(@Req() request: Request) {
    if (!request.session?.user) {
      throw new InternalServerErrorException();
    }
    const startOfToday = new Date();
    startOfToday.setUTCHours(0, 0, 0, 0);

    const startOfTime = new Date('January 1, 1979');
    const oneWeekAgo = new Date();
    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
    oneWeekAgo.setUTCHours(0, 0, 0, 0);

    const user = request.session.user;
    const [cpmAllTime, cpmToday, cpmLastWeek, cpmLast10] = await Promise.all([
      this.resultsService.getAverageCPMSince(user.id, startOfTime),
      this.resultsService.getAverageCPMSince(user.id, startOfToday),
      this.resultsService.getAverageCPMSince(user.id, oneWeekAgo),
      this.resultsService.getAverageCPM(user.id, 10),
    ]);
    return {
      cpmLast10,
      cpmToday,
      cpmLastWeek,
      cpmAllTime,
    };
  }

  @Get(':resultId')
  getResultByID(@Param('resultId') resultId: string) {
    if (!isUUID(resultId)) throw new BadRequestException('Invalid resultId');
    const result = this.resultsService.getByID(resultId);
    return result;
  }
}


================================================
FILE: packages/back-nest/src/results/results.module.ts
================================================
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { Result } from './entities/result.entity';
import { ResultsController } from './results.controller';
import { ResultCalculationService } from './services/result-calculation.service';
import { ResultFactoryService } from './services/result-factory.service';
import { ResultService } from './services/results.service';

@Module({
  imports: [TypeOrmModule.forFeature([Result])],
  providers: [ResultService, ResultFactoryService, ResultCalculationService],
  controllers: [ResultsController],
  exports: [ResultService, ResultFactoryService],
})
export class ResultsModule {}


================================================
FILE: packages/back-nest/src/results/services/result-calculation.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { Challenge } from 'src/challenges/entities/challenge.entity';
import { RacePlayer } from 'src/races/services/race-player.service';
import { Race } from 'src/races/services/race.service';

@Injectable()
export class ResultCalculationService {
  getTimeMS(race: Race, player: RacePlayer): number {
    const firstTimeStampMS = race.startTime.getTime();
    const keyStrokes = player.validKeyStrokes();
    const lastTimeStampMS = keyStrokes[keyStrokes.length - 1].timestamp;
    return lastTimeStampMS - firstTimeStampMS;
  }

  getCPM(code: string, timeMS: number): number {
    const timeSeconds = timeMS / 1000;
    const strippedCode = Challenge.getStrippedCode(code);
    const cps = strippedCode.length / timeSeconds;
    const cpm = cps * 60;
    return Math.floor(cpm);
  }

  getMistakesCount(player: RacePlayer): number {
    return player.incorrectKeyStrokes().length;
  }

  getAccuracy(player: RacePlayer): number {
    const incorrectKeyStrokes = player.incorrectKeyStrokes().length;
    const validKeyStrokes = player.validKeyStrokes().length;
    const totalKeySrokes = validKeyStrokes + incorrectKeyStrokes;
    return Math.floor((validKeyStrokes / totalKeySrokes) * 100);
  }
}


================================================
FILE: packages/back-nest/src/results/services/result-factory.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { RacePlayer } from 'src/races/services/race-player.service';
import { Race } from 'src/races/services/race.service';
import { User } from 'src/users/entities/user.entity';
import { Result } from '../entities/result.entity';
import { ResultCalculationService } from './result-calculation.service';

@Injectable()
export class ResultFactoryService {
  constructor(private resultCalculation: ResultCalculationService) {}
  factory(race: Race, player: RacePlayer, user: User): Result {
    const challenge = race.challenge;
    const result = new Result();
    const timeMS = this.resultCalculation.getTimeMS(race, player);
    const cpm = this.resultCalculation.getCPM(challenge.content, timeMS);
    const mistakes = this.resultCalculation.getMistakesCount(player);
    const accuracy = this.resultCalculation.getAccuracy(player);
    result.raceId = player.raceId;
    result.user = user;
    result.challenge = challenge;
    result.timeMS = timeMS;
    result.cpm = cpm;
    result.mistakes = mistakes;
    result.accuracy = accuracy;
    return result;
  }
}


================================================
FILE: packages/back-nest/src/results/services/results.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { LeaderBoardResult } from '../entities/leaderboard-result.dto';
import { Result } from '../entities/result.entity';

@Injectable()
export class ResultService {
  constructor(
    @InjectRepository(Result)
    private resultsRepository: Repository<Result>,
  ) {}

  async create(result: Result): Promise<Result> {
    return await this.resultsRepository.save(result);
  }

  async upsertByLegacyId(results: Result[]): Promise<void> {
    await this.resultsRepository.upsert(results, ['legacyId']);
  }

  async getByID(id: string) {
    const result = await this.resultsRepository.findOneOrFail({
      where: {
        id,
        // filter out legacy results
        legacyId: null,
      },
      relations: ['user', 'challenge', 'challenge.project'],
    });
    result.percentile = await this.getResultPercentile(result.cpm);
    return result;
  }

  async getLeaderboard(): Promise<LeaderBoardResult[]> {
    const oneDayAgo = new Date();
    oneDayAgo.setDate(oneDayAgo.getDate() - 1);
    const resultsTodayStream = await this.resultsRepository
      .createQueryBuilder('r')
      .leftJoinAndSelect('r.user', 'u')
      .where(
        `u.banned=false AND
        r.createdAt BETWEEN '${oneDayAgo.toISOString()}' AND '${new Date().toISOString()}'`,
      )
      .orderBy('r.cpm')
      .orderBy('r.createdAt', 'DESC')
      .stream();

    const resultsToday: Record<string, any> = {};

    for await (const r of resultsTodayStream) {
      if (!resultsToday[r.u_id]) {
        r.racesPlayed = 1;
        resultsToday[r.u_id] = r;
        continue;
      }
      const prevResult = resultsToday[r.u_id];
      if (r.r_cpm > prevResult.r_cpm) {
        r.racesPlayed = prevResult.racesPlayed;
        resultsToday[r.u_id] = r;
      }
      resultsToday[r.u_id].racesPlayed++;
    }

    const results = Object.values(resultsToday)
      .map((r) => {
        return {
          username: r.u_username,
          avatarUrl: r.u_avatarUrl,
          cpm: r.r_cpm,
          accuracy: r.r_accuracy,
          createdAt: r.r_createdAt,
          racesPlayed: r.racesPlayed,
          resultId: r.r_id,
        };
      })
      .sort((a, b) => b.cpm - a.cpm);
    return results;
  }
  async getAverageCPM(userId: string, take: number): Promise<number> {
    const results = await this.resultsRepository.find({
      where: {
        user: { id: userId },
      },
      order: {
        createdAt: 'DESC',
      },
      take,
    });
    const total = results.reduce((prev, curr) => {
      return prev + curr.cpm;
    }, 0);
    const average = total / results.length;
    return parseInt(average.toString(), 10);
  }
  async getAverageCPMSince(userId: string, since: Date): Promise<number> {
    const { avg } = await this.resultsRepository
      .createQueryBuilder('r')
      .where('r.userId=:userId AND r.createdAt > :startOfToday', {
        userId,
        startOfToday: since.toISOString(),
      })
      .select('AVG(r.cpm)', 'avg')
      .getRawOne();
    return parseInt(avg, 10);
  }

  async getResultPercentile(cpm: number): Promise<number> {
    const { countBetterThan } = await this.resultsRepository
      .createQueryBuilder('r')
      .where('r.cpm < :cpm', {
        cpm,
      })
      .select('COUNT(r.cpm)', 'countBetterThan')
      .getRawOne();

    const totalCount = await this.resultsRepository.count();

    const percentile = (
      (parseInt(countBetterThan, 10) / totalCount) *
      100
    ).toFixed(0);
    return parseInt(percentile, 10);
  }
}


================================================
FILE: packages/back-nest/src/seeder/commands/challenge.seeder.ts
================================================
import { Command, CommandRunner } from 'nest-commander';
import { Challenge } from 'src/challenges/entities/challenge.entity';
import { ChallengeService } from 'src/challenges/services/challenge.service';
import { Project } from 'src/projects/entities/project.entity';
import { ProjectService } from 'src/projects/services/project.service';

@Command({
  name: 'seed-challenges',
  arguments: '',
  options: {},
})
export class ProjectSeedRunner extends CommandRunner {
  constructor(
    private projectService: ProjectService,
    private challengeService: ChallengeService,
  ) {
    super();
  }
  async run(): Promise<void> {
    const project = this.project_factory();
    await this.projectService.bulkUpsert([project]);
    const challenges = this.challenges_factory(project);
    await this.challengeService.upsert(challenges);
  }

  project_factory() {
    const project = new Project();
    project.id = '98dac57c-516e-485f-872a-4b9f6e1ad566';
    project.fullName = 'etcd-io/etcd';
    project.htmlUrl = 'https://github.com/etcd-io/etcd';
    project.language = 'Go';
    project.stars = 41403;
    project.licenseName = 'Apache License 2.0';
    project.ownerAvatar =
      'https://avatars.githubusercontent.com/u/41972792?v=4';
    project.defaultBranch = 'main';
    project.syncedSha = '2d638e0fd2c1d91c9c4323591bb1041b594e28fa';
    return project;
  }

  challenges_factory(project: Project) {
    const challenges = [];
    const firstChallenge = new Challenge();
    challenges.push(firstChallenge);
    firstChallenge.id = 'b4b6eec5-333c-4c77-a648-1b0884ae5ad0';
    firstChallenge.sha = 'fa3011cb39ac784a88da3667b729f3a79f5f22c3';
    firstChallenge.treeSha = '2d638e0fd2c1d91c9c4323591bb1041b594e28fa';
    firstChallenge.path = 'server/etcdserver/api/rafthttp/transport.go';
    firstChallenge.language = 'go';
    firstChallenge.url =
      'https://github.com/etcd-io/etcd/blob/2d638e0fd2c1d91c9c4323591bb1041b594e28fa/server/etcdserver/api/rafthttp/transport.go/#L425';
    firstChallenge.content =
      'func (t *Transport) Pause() {\n' +
      '\tt.mu.RLock()\n' +
      '\tdefer t.mu.RUnlock()\n' +
      '\tfor _, p := range t.peers {\n' +
      '\t\tp.(Pausable).Pause()\n' +
      '\t}\n' +
      '}';
    firstChallenge.project = project;

    const secondChallenge = new Challenge();
    challenges.push(secondChallenge);
    secondChallenge.id = '8ebf6be1-7f7c-4edf-a622-97b0024636e8';
    secondChallenge.sha = '69ecc631471975fcb4d207f85a57baf2b5a79460';
    secondChallenge.treeSha = '2d638e0fd2c1d91c9c4323591bb1041b594e28fa';
    secondChallenge.language = 'go';
    secondChallenge.path = 'client/v3/retry.go';
    secondChallenge.url =
      'https://github.com/etcd-io/etcd/blob/2d638e0fd2c1d91c9c4323591bb1041b594e28fa/client/v3/retry.go/#L160';
    secondChallenge.content =
      'func RetryClusterClient(c *Client) pb.ClusterClient {\n' +
      '\treturn &retryClusterClient{\n' +
      '\t\tcc: pb.NewClusterClient(c.conn),\n' +
      '\t}\n' +
      '}';
    secondChallenge.project = project;

    const thirdChallenge = new Challenge();
    challenges.push(thirdChallenge);
    thirdChallenge.id = '19174a2e-9220-40c8-832a-7effd351a68b';
    thirdChallenge.sha = 'ea19cf0181bbedbfc65bce9cfce26eb3558cb9ee';
    thirdChallenge.treeSha = '2d638e0fd2c1d91c9c4323591bb1041b594e28fa';
    thirdChallenge.path = 'pkg/schedule/schedule.go';
    thirdChallenge.language = 'go';
    thirdChallenge.url =
      'https://github.com/etcd-io/etcd/blob/2d638e0fd2c1d91c9c4323591bb1041b594e28fa/pkg/schedule/schedule.go/#L135';
    thirdChallenge.content =
      'func (f *fifo) Finished() int {\n' +
      '\tf.finishCond.L.Lock()\n' +
      '\tdefer f.finishCond.L.Unlock()\n' +
      '\treturn f.finished\n' +
      '}';
    thirdChallenge.project = project;

    return challenges;
  }
}


================================================
FILE: packages/back-nest/src/seeder/seeder.module.ts
================================================
import { Module } from '@nestjs/common';
import { ChallengesModule } from 'src/challenges/challenges.module';
import { ProjectsModule } from 'src/projects/projects.module';
import { ProjectSeedRunner } from './commands/challenge.seeder';

@Module({
  imports: [ProjectsModule, ChallengesModule],
  providers: [ProjectSeedRunner],
})
export class SeederModule {}


================================================
FILE: packages/back-nest/src/sessions/session.adapter.ts
================================================
import { IncomingMessage } from 'http';
import { INestApplication } from '@nestjs/common';
import { IoAdapter } from '@nestjs/platform-socket.io';
import { NextFunction } from 'express';
import { Server, Socket } from 'socket.io';

type SocketIOCompatibleMiddleware = (
  r: IncomingMessage,
  object: object,
  next: NextFunction,
) => void;

export function makeSocketIOReadMiddleware(
  middleware: SocketIOCompatibleMiddleware,
) {
  return (socket: Socket, next: NextFunction) => {
    return middleware(socket.request, {}, next);
  };
}

export const denyWithoutUserInSession = (
  socket: Socket,
  next: NextFunction,
) => {
  if (!socket.request.session?.user) {
    console.log(
      'disconnect because there is no user in the session',
      socket.id,
    );
    socket.request.session?.destroy(() => {
      /* **/
    });
    return socket.disconnect(true);
  }
  next();
};

export class SessionAdapter extends IoAdapter {
  constructor(
    app: INestApplication,
    private sessionMiddleware: SocketIOCompatibleMiddleware,
  ) {
    super(app);
  }

  createIOServer(port: number, opt?: any): any {
    const server: Server = super.createIOServer(port, opt);
    server.use(makeSocketIOReadMiddleware(this.sessionMiddleware));
    server.use(denyWithoutUserInSession);
    return server;
  }
}


================================================
FILE: packages/back-nest/src/sessions/session.entity.ts
================================================
import { ISession } from 'connect-typeorm';
import {
  Column,
  DeleteDateColumn,
  Entity,
  Index,
  PrimaryColumn,
} from 'typeorm';

@Entity({ name: 'sessions' })
export class Session implements ISession {
  @Index()
  @Column('bigint')
  expiredAt: number = Date.now();

  @PrimaryColumn('varchar', { length: 255 })
  id: string;

  @Column('text')
  json: string;

  @DeleteDateColumn()
  destroyedAt: Date;
}


================================================
FILE: packages/back-nest/src/sessions/session.middleware.ts
================================================
import { TypeormStore } from 'connect-typeorm/out';
import * as session from 'express-session';
import { PostgresDataSource } from 'src/database.module';
import { Session } from './session.entity';

const SESSION_SECRET_MIN_LENGTH = 12;

const ONE_DAY = 1000 * 60 * 60 * 24;

export const cookieName = 'speedtyper-v2-sid';

export const getSessionMiddleware = () => {
  const sessionRepository = PostgresDataSource.getRepository(Session);
  return session({
    name: cookieName,
    store: new TypeormStore({
      cleanupLimit: 2,
    }).connect(sessionRepository),
    secret: getSessionSecret(),
    resave: false,
    saveUninitialized: false,
    cookie: {
      httpOnly: true,
      sameSite: 'lax',
      secure: process.env.NODE_ENV === 'production',
      maxAge: ONE_DAY * 7,
      ...(process.env.NODE_ENV === 'production'
        ? {
            domain: '.speedtyper.dev',
          }
        : {}),
    },
  });
};

function getSessionSecret() {
  const secret = process.env.SESSION_SECRET;
  if (!secret)
    throw new Error('SESSION_SECRET is missing from environment variables');
  if (secret.length < SESSION_SECRET_MIN_LENGTH)
    throw new Error(
      `SESSION_SECRET is not long enough, must be at least ${SESSION_SECRET_MIN_LENGTH} characters long`,
    );
  return secret;
}


================================================
FILE: packages/back-nest/src/sessions/types.d.ts
================================================
import { Session, SessionData } from 'express-session';
import { User } from 'src/users/entities/user.entity';

declare module 'express-session' {
  export interface SessionData {
    user: User;
    raceId: string;
  }
}

declare module 'http' {
  interface IncomingMessage {
    cookieHolder?: string;
    session: Session & SessionData;
  }
}


================================================
FILE: packages/back-nest/src/tracking/entities/event.entity.ts
================================================
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

export enum TrackingEventType {
  LegacyRaceStarted = 'legacy_race_started',
  RaceStarted = 'race_started',
  RaceCompleted = 'race_completed',
}

@Entity()
export class TrackingEvent {
  @PrimaryGeneratedColumn('uuid')
  id: string;
  @Column({
    unique: true,
    type: 'enum',
    enum: TrackingEventType,
  })
  event: TrackingEventType;
  @Column({
    default: 0,
  })
  count: number;
}


================================================
FILE: packages/back-nest/src/tracking/tracking.module.ts
================================================
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { TrackingEvent } from './entities/event.entity';
import { TrackingService } from './tracking.service';

@Module({
  imports: [TypeOrmModule.forFeature([TrackingEvent])],
  controllers: [],
  providers: [TrackingService],
  exports: [TrackingService],
})
export class TrackingModule {}


================================================
FILE: packages/back-nest/src/tracking/tracking.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { TrackingEvent, TrackingEventType } from './entities/event.entity';

@Injectable()
export class TrackingService {
  constructor(
    @InjectRepository(TrackingEvent)
    private repository: Repository<TrackingEvent>,
  ) {}

  async trackRaceStarted(): Promise<TrackingEvent> {
    return this.trackRaceEvent(TrackingEventType.RaceStarted);
  }

  async trackRaceCompleted(): Promise<TrackingEvent> {
    return this.trackRaceEvent(TrackingEventType.RaceCompleted);
  }

  private async trackRaceEvent(
    event: TrackingEventType,
  ): Promise<TrackingEvent> {
    return await this.repository.manager.transaction(async (transaction) => {
      let trackingEvent = new TrackingEvent();
      trackingEvent.event = event;
      await transaction.upsert(TrackingEvent, trackingEvent, {
        conflictPaths: ['event'],
        skipUpdateIfNoValuesChanged: true,
      });
      trackingEvent = await transaction.findOneBy(TrackingEvent, {
        event: trackingEvent.event,
      });
      trackingEvent.count++;
      trackingEvent = await transaction.save(TrackingEvent, trackingEvent);
      return trackingEvent;
    });
  }
}


================================================
FILE: packages/back-nest/src/users/controllers/user.controller.ts
================================================
import { Controller, Get, HttpException, Req } from '@nestjs/common';
import { Request } from 'express';
import { User } from '../entities/user.entity';

@Controller('user')
export class UserController {
  @Get()
  getCurrentUser(@Req() request: Request): User {
    if (!request.session?.user) {
      throw new HttpException('Internal server error', 500);
    }
    return request.session.user;
  }
}


================================================
FILE: packages/back-nest/src/users/entities/upsertGithubUserDTO.ts
================================================
import { IsString } from 'class-validator';
import { Profile } from 'passport-github';
import { User } from './user.entity';

export class UpsertGithubUserDTO {
  @IsString()
  username: string;
  @IsString()
  githubId: string;
  @IsString()
  githubUrl: string;
  @IsString()
  avatarUrl: string;

  static fromGithubProfile(profile: Profile) {
    const user = new UpsertGithubUserDTO();
    user.githubId = profile.id;
    user.username = profile.username;
    user.githubUrl = profile.profileUrl;
    user.avatarUrl = profile.photos[0].value;
    return user;
  }
  toUser() {
    const user = new User();
    user.githubId = parseInt(this.githubId);
    user.username = this.username;
    user.githubUrl = this.githubUrl;
    user.avatarUrl = this.avatarUrl;
    return user;
  }
}


================================================
FILE: packages/back-nest/src/users/entities/user.entity.ts
================================================
import { randomUUID } from 'crypto';
import { Result } from 'src/results/entities/result.entity';
import {
  Column,
  CreateDateColumn,
  Entity,
  OneToMany,
  PrimaryGeneratedColumn,
} from 'typeorm';
import { generateRandomUsername } from '../utils/generateRandomUsername';

@Entity('users')
export class User {
  @PrimaryGeneratedColumn('uuid')
  id: string;
  @Column({ unique: true })
  username: string;
  @Column({ unique: true })
  githubId: number;
  @Column({ unique: true })
  githubUrl: string;
  @Column()
  avatarUrl: string;
  @Column({ unique: true, nullable: true })
  legacyId: string;
  @Column({ default: false, select: false })
  banned: boolean;
  @CreateDateColumn({
    type: 'timestamp',
    default: () => 'CURRENT_TIMESTAMP(6)',
  })
  public createdAt: Date;

  @OneToMany(() => Result, (result) => result.user)
  results: Result[];
  isAnonymous: boolean;
  static generateAnonymousUser() {
    const user = new User();
    user.id = randomUUID();
    user.username = generateRandomUsername();
    user.isAnonymous = true;
    return user;
  }
}


================================================
FILE: packages/back-nest/src/users/services/user.service.ts
================================================
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { User } from '../entities/user.entity';

@Injectable()
export class UserService {
  constructor(
    @InjectRepository(User)
    private userRepository: Repository<User>,
  ) {}

  async upsertGithubUser(userData: User): Promise<User> {
    const currentUser = await this.userRepository.findOneBy({
      githubId: userData.githubId,
    });
    userData.id = currentUser?.id;
    userData.banned = currentUser?.banned || userData.banned || false;
    const user = await this.userRepository.save(userData);
    user.isAnonymous = false;
    return user;
  }

  async findByLegacyID(legacyId: string) {
    const user = await this.userRepository.findOneBy({
      legacyId,
    });
    return user;
  }
}


================================================
FILE: packages/back-nest/src/users/users.module.ts
================================================
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { UserController } from './controllers/user.controller';
import { User } from './entities/user.entity';
import { UserService } from './services/user.service';

@Module({
  imports: [TypeOrmModule.forFeature([User])],
  controllers: [UserController],
  providers: [UserService],
  exports: [UserService],
})
export class UsersModule {}


================================================
FILE: packages/back-nest/src/users/utils/generateRandomUsername.ts
================================================
import { uniqueNamesGenerator } from 'unique-names-generator';

const adjectives2 = [
  'abrupt',
  'acidic',
  'adorable',
  'adventurous',
  'aggressive',
  'agitated',
  'aloof',
  'amused',
  'annoyed',
  'antsy',
  'anxious',
  'appalling',
  'apprehensive',
  'arrogant',
  'astonishing',
  'bitter',
  'bland',
  'bored',
  'brave',
  'bright',
  'broad',
  'bulky',
  'burly',
  'charming',
  'cheeky',
  'cheerful',
  'clean',
  'clear',
  'cloudy',
  'clueless',
  'clumsy',
  'colorful',
  'colossal',
  'confused',
  'convincing',
  'convoluted',
  'cooperative',
  'courageous',
  'crooked',
  'cruel',
  'cynical',
  'dangerous',
  'dashing',
  'deceitful',
  'defeated',
  'defiant',
  'delicious',
  'delightful',
  'depraved',
  'depressed',
  'despicable',
  'determined',
  'dilapidated',
  'diminutive',
  'disgusted',
  'distinct',
  'distraught',
  'distressed',
  'disturbed',
  'dizzy',
  'drab',
  'drained',
  'dull',
  'eager',
  'ecstatic',
  'elated',
  'elegant',
  'emaciated',
  'embarrassed',
  'enchanting',
  'encouraging',
  'energetic',
  'enormous',
  'enthusiastic',
  'envious',
  'exasperated',
  'excited',
  'exhilarated',
  'extensive',
  'exuberant',
  'fancy',
  'fantastic',
  'fierce',
  'fluttering',
  'foolish',
  'frantic',
  'fresh',
  'friendly',
  'frightened',
  'frothy',
  'frustrating',
  'funny',
  'fuzzy',
  'gaudy',
  'gentle',
  'giddy',
  'gigantic',
  'glamorous',
  'gleaming',
  'glorious',
  'gorgeous',
  'graceful',
  'greasy',
  'grieving',
  'gritty',
  'grotesque',
  'grubby',
  'grumpy',
  'handsome',
  'happy',
  'harebrained',
  'healthy',
  'helpful',
  'helpless',
  'high',
  'hollow',
  'homely',
  'horrific',
  'huge',
  'hungry',
  'hurt',
  'icy',
  'ideal',
  'immense',
  'impressionable',
  'intrigued',
  'irate',
  'irritable',
  'itchy',
  'jealous',
  'jittery',
  'jolly',
  'joyous',
  'juicy',
  'jumpy',
  'kind',
  'large',
  'lazy',
  'lethal',
  'little',
  'lively',
  'livid',
  'lonely',
  'loose',
  'lovely',
  'lucky',
  'ludicrous',
  'magnificent',
  'mammoth',
  'maniacal',
  'massive',
  'melancholy',
  'melted',
  'miniature',
  'minute',
  'mistaken',
  'misty',
  'moody',
  'mortified',
  'motionless',
  'mysterious',
  'narrow',
  'nasty',
  'naughty',
  'nervous',
  'nonchalant',
  'nonsensical',
  'nutritious',
  'nutty',
  'obedient',
  'oblivious',
  'obnoxious',
  'odd',
  'outrageous',
  'panicky',
  'perfect',
  'perplexed',
  'petite',
  'petty',
  'plain',
  'pleasant',
  'poised',
  'pompous',
  'precious',
  'prickly',
  'proud',
  'pungent',
  'puny',
  'quaint',
  'quizzical',
  'ratty',
  'reassured',
  'relieved',
  'repulsive',
  'responsive',
  'ripe',
  'robust',
  'rotten',
  'rough',
  'round',
  'salty',
  'sarcastic',
  'scant',
  'scary',
  'scattered',
  'scrawny',
  'selfish',
  'shaky',
  'shallow',
  'sharp',
  'shiny',
  'short',
  'silky',
  'silly',
  'skinny',
  'slimy',
  'slippery',
  'small',
  'smarmy',
  'smiling',
  'smoggy',
  'smooth',
  'smug',
  'soggy',
  'solid',
  'sore',
  'sour',
  'sparkling',
  'spicy',
  'splendid',
  'spotless',
  'square',
  'stale',
  'steady',
  'steep',
  'responsive',
  'sticky',
  'stormy',
  'stout',
  'strange',
  'strong',
  'stunning',
  'substantial',
  'successful',
  'succulent',
  'superficial',
  'superior',
  'sweet',
  'tart',
  'tasty',
  'tender',
  'tense',
  'terrible',
  'thankful',
  'thick',
  'thoughtful',
  'thoughtless',
  'timely',
  'tricky',
  'troubled',
  'uneven',
  'unsightly',
  'upset',
  'uptight',
  'vast',
  'vexed',
  'victorious',
  'virtuous',
  'vivacious',
  'vivid',
  'wacky',
  'weary',
  'whimsical',
  'whopping',
  'wicked',
  'witty',
  'wobbly',
  'wonderful',
  'worried',
  'yummy',
  'zany',
  'zealous',
  'zippy',
];
const technologies = [
  'Bash',
  'C',
  'C#',
  'C++',
  'CSS',
  'Elm',
  'Eno',
  'ERB',
  'Fennel',
  'Golang',
  'HTML',
  'Java',
  'JavaScript',
  'Lua',
  'Make',
  'Markdown',
  'OCaml',
  'PHP',
  'Python',
  'Ruby',
  'Rust',
  'R',
  'S-expressions',
  'SPARQL',
  'SystemRDL',
  'Svelte',
  'TOML',
  'Turtle',
  'TypeScript',
  'Verilog',
  'VHDL',
  'Vue',
  'YAML',
  'WASM',
  'Agda',
  'Erlang',
  'Dockerfile',
  'Go',
  'Haskell',
  'Kotlin',
  'Nix',
  'Perl',
  'Scala',
  'Swift',
  'Arch',
  'Ubuntu',
  'Mac',
  'Windows',
  'GNU',
  'Linux',
  'BSD',
  'Arduino',
  'Clojure',
  'Blockchain',
  'Elixir',
  'Angular',
  'Vue',
  'Svelte',
  'React',
  'Re-frame',
  'Stateless',
  'Kernel',
  'Context',
  'OpenGL',
  'MicroServices',
  'Monolith',
  'Monorepo',
  'SQL',
  'Firebase',
  'MongoDB',
  'Postgres',
  'MySQL',
  'Ionic',
  'Phoenix',
  'Cordova',
  'ReactNative',
  'PowerShell',
  'Vim',
  'VSCode',
  'Emacs',
  'Cobol',
  'Zsh',
  'Assembly',
  'OpenCV',
  'HTTP',
  'SSH',
  'FTP',
  'Tensorflow',
  'PyTorch',
  'Pandas',
  'Unity',
  'Unreal',
  'Docker',
  'Kubernetes',
  'Godot',
];

export const generateRandomUsername = () => {
  const randomName: string = uniqueNamesGenerator({
    dictionaries: [adjectives2, technologies],
    separator: '',
    length: 2,
    style: 'capital',
  });

  return randomName;
};


================================================
FILE: packages/back-nest/src/utils/validateDTO.ts
================================================
import { ValidationError } from '@nestjs/common';
import { ClassConstructor, plainToInstance } from 'class-transformer';
import { validate } from 'class-validator';

export class ValidationErrorContainer extends TypeError {
  errors: ValidationError[];
  constructor(name: string, errors: ValidationError[]) {
    const fields = errors.map((err) => err.property).join(', ');
    super(`Error validating ${name} for fields: ${fields}`);
    this.errors = errors;
    Object.setPrototypeOf(this, ValidationErrorContainer.prototype);
  }
}

export const validateDTO = async <T>(
  dto: ClassConstructor<T>,
  obj: unknown,
) => {
  const instance = plainToInstance(dto, obj);
  const errors = await validate(instance as object);
  if (errors.length > 0) {
    throw new ValidationErrorContainer(dto.name, errors);
  }
  return instance;
};


================================================
FILE: packages/back-nest/tracked-projects.txt
================================================
etcd-io/etcd
rust-lang/cargo
rust-lang/rust
tiangolo/fastapi
pallets/flask
encode/starlette
apache/zookeeper
ClickHouse/ClickHouse
rails/rails
lodash/lodash
TheAlgorithms/Java
ggerganov/llama.cpp
ggerganov/whisper.cpp
vitejs/vite
lampepfl/dotty
tinygrad/tinygrad


================================================
FILE: packages/back-nest/tsconfig.build.json
================================================
{
  "extends": "./tsconfig.json",
  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
}


================================================
FILE: packages/back-nest/tsconfig.json
================================================
{
  "ts-node": {
    "files": true
  },
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false
  }
}


================================================
FILE: packages/webapp-next/.eslintrc.json
================================================
{
  "extends": ["next/core-web-vitals", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto"
      }
    ]
  }
}


================================================
FILE: packages/webapp-next/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
.next/
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts


================================================
FILE: packages/webapp-next/.prettierrc
================================================
{
  "singleQuote": false,
  "jsxSingleQuote": false
}



================================================
FILE: packages/webapp-next/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: packages/webapp-next/Socket.ts
================================================
import io from "socket.io-client";

export default class Socket {
  socket: SocketIOClient.Socket;

  constructor(serverUrl: string) {
    this.socket = io(serverUrl);
  }

  disconnect = () => {
    this.socket.emit("disconnect");
    if (this.socket) this.socket.disconnect();
  };

  subscribe = (event: string, cb: (error: string | null, msg: any) => void) => {
    if (!this.socket) return true;
    this.socket.on(event, (msg: any) => {
      return cb(null, msg);
    });
  };

  emit = (event: string, data?: any) => {
    if (this.socket) this.socket.emit(event, data);
  };
}


================================================
FILE: packages/webapp-next/assets/icons/BattleIcon.tsx
================================================
export const BattleIcon = () => {
  // <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
  return (
    <svg className="h-6 fill-current" viewBox="0 0 512 512">
      <path d="M448.61 225.62c26.87.18 35.57-7.43 38.92-12.37 12.47-16.32-7.06-47.6-52.85-71.33 17.76-33.58 30.11-63.68 36.34-85.3 3.38-11.83 1.09-19 .45-20.25-1.72 10.52-15.85 48.46-48.2 100.05-25-11.22-56.52-20.1-93.77-23.8-8.94-16.94-34.88-63.86-60.48-88.93C252.18 7.14 238.7 1.07 228.18.22h-.05c-13.83-1.55-22.67 5.85-27.4 11-17.2 18.53-24.33 48.87-25 84.07-7.24-12.35-17.17-24.63-28.5-25.93h-.18c-20.66-3.48-38.39 29.22-36 81.29-38.36 1.38-71 5.75-93 11.23-9.9 2.45-16.22 7.27-17.76 9.72 1-.38 22.4-9.22 111.56-9.22 5.22 53 29.75 101.82 26 93.19-9.73 15.4-38.24 62.36-47.31 97.7-5.87 22.88-4.37 37.61.15 47.14 5.57 12.75 16.41 16.72 23.2 18.26 25 5.71 55.38-3.63 86.7-21.14-7.53 12.84-13.9 28.51-9.06 39.34 7.31 19.65 44.49 18.66 88.44-9.45 20.18 32.18 40.07 57.94 55.7 74.12a39.79 39.79 0 0 0 8.75 7.09c5.14 3.21 8.58 3.37 8.58 3.37-8.24-6.75-34-38-62.54-91.78 22.22-16 45.65-38.87 67.47-69.27 122.82 4.6 143.29-24.76 148-31.64 14.67-19.88 3.43-57.44-57.32-93.69zm-77.85 106.22c23.81-37.71 30.34-67.77 29.45-92.33 27.86 17.57 47.18 37.58 49.06 58.83 1.14 12.93-8.1 29.12-78.51 33.5zM216.9 387.69c9.76-6.23 19.53-13.12 29.2-20.49 6.68 13.33 13.6 26.1 20.6 38.19-40.6 21.86-68.84 12.76-49.8-17.7zm215-171.35c-10.29-5.34-21.16-10.34-32.38-15.05a722.459 722.459 0 0 0 22.74-36.9c39.06 24.1 45.9 53.18 9.64 51.95zM279.18 398c-5.51-11.35-11-23.5-16.5-36.44 43.25 1.27 62.42-18.73 63.28-20.41 0 .07-25 15.64-62.53 12.25a718.78 718.78 0 0 0 85.06-84q13.06-15.31 24.93-31.11c-.36-.29-1.54-3-16.51-12-51.7 60.27-102.34 98-132.75 115.92-20.59-11.18-40.84-31.78-55.71-61.49-20-39.92-30-82.39-31.57-116.07 12.3.91 25.27 2.17 38.85 3.88-22.29 36.8-14.39 63-13.47 64.23 0-.07-.95-29.17 20.14-59.57a695.23 695.23 0 0 0 44.67 152.84c.93-.38 1.84.88 18.67-8.25-26.33-74.47-33.76-138.17-34-173.43 20-12.42 48.18-19.8 81.63-17.81 44.57 2.67 86.36 15.25 116.32 30.71q-10.69 15.66-23.33 32.47C365.63 152 339.1 145.84 337.5 146c.11 0 25.9 14.07 41.52 47.22a717.63 717.63 0 0 0-115.34-31.71 646.608 646.608 0 0 0-39.39-6.05c-.07.45-1.81 1.85-2.16 20.33C300 190.28 358.78 215.68 389.36 233c.74 23.55-6.95 51.61-25.41 79.57-24.6 37.31-56.39 67.23-84.77 85.43zm27.4-287c-44.56-1.66-73.58 7.43-94.69 20.67 2-52.3 21.31-76.38 38.21-75.28C267 52.15 305 108.55 306.58 111zm-130.65 3.1c.48 12.11 1.59 24.62 3.21 37.28-14.55-.85-28.74-1.25-42.4-1.26-.08 3.24-.12-51 24.67-49.59h.09c5.76 1.09 10.63 6.88 14.43 13.57zm-28.06 162c20.76 39.7 43.3 60.57 65.25 72.31-46.79 24.76-77.53 20-84.92 4.51-.2-.21-11.13-15.3 19.67-76.81zm210.06 74.8" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/CopyIcon.tsx
================================================
export const CopyIcon = () => {
  return (
    <svg
      viewBox="0 0 128 128"
      xmlns="http://www.w3.org/2000/svg"
      className="h-5 fill-current"
    >
      <path d="m118.786 23.732a1.893 1.893 0 0 0 -.479-.9l-22.32-22.322a1.811 1.811 0 0 0 -1.237-.51h-41.043a7.759 7.759 0 0 0 -7.75 7.75v10.635h-10.638a7.759 7.759 0 0 0 -7.75 7.75v10.638h-10.638a7.759 7.759 0 0 0 -7.75 7.75v75.724a7.758 7.758 0 0 0 7.75 7.75h57.362a7.759 7.759 0 0 0 7.75-7.75v-10.638h10.638a7.759 7.759 0 0 0 7.75-7.75v-10.638h10.638a7.759 7.759 0 0 0 7.75-7.75v-59.4a1.689 1.689 0 0 0 -.033-.339zm-22.286-17.76 8.172 8.172 8.172 8.172h-16.344zm-17.957 114.275a4.255 4.255 0 0 1 -4.25 4.25h-57.362a4.255 4.255 0 0 1 -4.25-4.25v-75.724a4.255 4.255 0 0 1 4.25-4.25h10.638v67.586a1.75 1.75 0 0 0 1.75 1.75h49.224zm18.388-18.388a4.255 4.255 0 0 1 -4.25 4.25h-61.612v-79.974a4.255 4.255 0 0 1 4.25-4.25h10.638v67.586a1.75 1.75 0 0 0 1.75 1.75h49.224zm14.138-14.138h-61.612v-79.974a4.255 4.255 0 0 1 4.25-4.25h39.293v20.569a1.749 1.749 0 0 0 1.75 1.75h20.569v57.655a4.255 4.255 0 0 1 -4.25 4.25z"></path>
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/CrossIcon.tsx
================================================
export const CrossIcon = () => {
  // Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
      <path d="M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/CrownIcon.tsx
================================================
export const CrownIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 576 512"
      className="fill-current"
      style={{
        fontWeight: "bold",
        height: "15px",
      }}
    >
      <path d="M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6H426.6c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/DiscordLogo.tsx
================================================
export const DiscordLogo = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="20"
      height="20"
      viewBox="0 0 245 240"
      className="fill-current"
    >
      <path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z" />
      <path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/DownArrowIcon.tsx
================================================
export const DownArrowIcon = () => {
  return (
    <svg
      className="-mr-1 ml-2 h-5 w-5"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      aria-hidden="true"
    >
      <path
        fillRule="evenodd"
        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
        clipRule="evenodd"
      />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/GithubLogo.tsx
================================================
export const GithubLogo = () => (
  <svg className="fill-current" height="15" width="15" viewBox="0 0 16 16">
    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
  </svg>
);


================================================
FILE: packages/webapp-next/assets/icons/InfoIcon.tsx
================================================
export const InfoIcon = () => {
  return (
    // Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
    <svg
      className="h-full fill-current"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
    >
      <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/KogWheel.tsx
================================================
export const KogWheel = () => {
  // Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
  return (
    <svg
      className="h-full fill-current"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
    >
      <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336c44.2 0 80-35.8 80-80s-35.8-80-80-80s-80 35.8-80 80s35.8 80 80 80z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/LinkIcon.tsx
================================================
export const LinkIcon = () => {
  return (
    // Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
    <svg viewBox="0 0 640 512" className="fill-current">
      <path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/OnlineIcon.tsx
================================================
export const OnlineIcon = () => {
  return (
    // Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
    <svg
      className="h-full fill-current"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
    >
      <path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 21 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/PlayIcon.tsx
================================================
export const PlayIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 384 512"
      className="h-4 fill-current"
    >
      <path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/ProfileIcon.tsx
================================================
export const ProfileIcon = () => {
  return (
    <svg
      className="h-6 fill-current"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 448 512"
    >
      <path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/ReloadIcon.tsx
================================================
export const ReloadIcon = () => {
  return (
    // Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
    <svg className="fill-current" viewBox="0 0 512 512">
      <path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/RightArrowIcon.tsx
================================================
export const RightArrowIcon = () => {
  return (
    <svg viewBox="0 0 24 24" className="h-5 fill-current ml-2">
      <path d="M7.96 21.15l-.65-.76 9.555-8.16L7.31 4.07l.65-.76 10.445 8.92"></path>
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/TerminalIcon.tsx
================================================
export const TerminalIcon = () => {
  // <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 640 512"
      className="fill-current"
      style={{
        fontWeight: "bold",
        height: "15px",
      }}
    >
      <path d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/TwitchLogo.tsx
================================================
export const TwitchLogo = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="17"
      height="17"
      fill="currentColor"
      viewBox="0 0 18 18"
      className="fill-current"
    >
      <path d="M3.857 0L1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429l-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z" />
      <path d="M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/UserGroupIcon.tsx
================================================
export const UserGroupIcon = () => {
  // <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
  return (
    <svg
      className="fill-current h-full"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 640 512"
    >
      <path d="M352 128c0 70.7-57.3 128-128 128s-128-57.3-128-128S153.3 0 224 0s128 57.3 128 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/WarningIcon.tsx
================================================
export const WarningIcon = () => {
  // <!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      className="h-5 fill-current"
    >
      <path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/YoutubeLogo.tsx
================================================
export const YoutubeLogo = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="-35.20005 -41.33325 305.0671 247.9995"
      className="fill-current"
    >
      <path d="M229.763 25.817c-2.699-10.162-10.65-18.165-20.748-20.881C190.716 0 117.333 0 117.333 0S43.951 0 25.651 4.936C15.553 7.652 7.6 15.655 4.903 25.817 0 44.236 0 82.667 0 82.667s0 38.429 4.903 56.85C7.6 149.68 15.553 157.681 25.65 160.4c18.3 4.934 91.682 4.934 91.682 4.934s73.383 0 91.682-4.934c10.098-2.718 18.049-10.72 20.748-20.882 4.904-18.421 4.904-56.85 4.904-56.85s0-38.431-4.904-56.85" />
      <path d="M93.333 117.559l61.333-34.89-61.333-34.894z" fill="#fff" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/assets/icons/index.tsx
================================================
export * from "./CopyIcon";
export * from "./DiscordLogo";
export * from "./DownArrowIcon";
export * from "./GithubLogo";
export * from "./PlayIcon";
export * from "./ProfileIcon";
export * from "./RightArrowIcon";
export * from "./TwitchLogo";


================================================
FILE: packages/webapp-next/common/api/auth.ts
================================================
import { NextRouter } from "next/router";
import { useCallback } from "react";
import { useGameStore } from "../../modules/play2/state/game-store";
import { useUserStore } from "../state/user-store";
import { getExperimentalServerUrl, getSiteRoot } from "../utils/getServerUrl";
import { fetchUser } from "./user";

export const useGithubAuthFactory = (router: NextRouter, serverUrl: string) => {
  return useCallback(() => {
    let nextUrl = getSiteRoot();
    if (document !== undefined) {
      nextUrl = window.location.href;
    }
    const authUrl = `${serverUrl}/auth/github?next=${nextUrl}`;
    router.push(authUrl);
  }, [router, serverUrl]);
};

export const logout = async () => {
  const serverUrl = getExperimentalServerUrl();
  const authUrl = `${serverUrl}/api/auth`;
  return fetch(authUrl, {
    method: "DELETE",
    credentials: "include",
  }).then(async () => {
    const prevUserId = useUserStore.getState().id;
    const user = await fetchUser();
    useUserStore.setState((state) => ({
      ...state,
      ...user,
      avatarUrl: undefined,
    }));
    useGameStore.setState((state) => {
      return {
        ...state,
        owner: state.owner === prevUserId ? user.id : state.owner,
      };
    });
    useGameStore.getState().game?.reconnect();
  });
};


================================================
FILE: packages/webapp-next/common/api/races.ts
================================================
import { getExperimentalServerUrl } from "../utils/getServerUrl";

const serverUrl = getExperimentalServerUrl();

const RACE_STATUS_API = "/api/races/:id/status";

export const fetchRaceStatus = async (raceId: string) => {
  const url = serverUrl + RACE_STATUS_API.replace(":id", raceId);
  return fetch(url, {
    credentials: "include",
  }).then((resp) => resp.json());
};

export const ONLINE_COUNT_API = serverUrl + "/api/races/online";

export const fetchOnlineCount = async () => {
  return fetch(ONLINE_COUNT_API, {
    credentials: "include",
  }).then((resp) => resp.json());
};


================================================
FILE: packages/webapp-next/common/api/types.ts
================================================
import { GetServerSidePropsContext, PreviewData } from "next";
import { ParsedUrlQuery } from "querystring";

export type ServerSideContext = GetServerSidePropsContext<
  ParsedUrlQuery,
  PreviewData
>;


================================================
FILE: packages/webapp-next/common/api/user.ts
================================================
import { useEffect, useState } from "react";
import { User } from "../state/user-store";
import { getExperimentalServerUrl } from "../utils/getServerUrl";
import { ServerSideContext } from "./types";

const USER_API = "/api/user";

const withCookie = (ctx?: ServerSideContext) => {
  const cookie = ctx?.req?.headers?.cookie;
  return cookie ? { cookie } : undefined;
};

const withSetHeaders = (resp: Response, ctx?: ServerSideContext) => {
  const setCookie = resp.headers.get("set-cookie");
  if (ctx && setCookie) {
    ctx.res.setHeader("set-cookie", setCookie);
  }
  return resp;
};

export const fetchUser = async (context?: ServerSideContext) => {
  const serverUrl = getExperimentalServerUrl();
  const url = serverUrl + USER_API;
  return fetch(url, {
    credentials: "include",
    headers: withCookie(context),
  }).then((resp) => withSetHeaders(resp, context).json());
};

export const fetchUser2 = async () => {
  const serverUrl = getExperimentalServerUrl();
  const url = serverUrl + USER_API;
  return fetch(url, {
    credentials: "include",
  }).then((resp) => resp.json());
};

export const useUser = () => {
  const [user, setUser] = useState<User | null>(null);
  useEffect(() => {
    fetchUser2().then((u) => setUser(u));
  }, []);
  return user;
};


================================================
FILE: packages/webapp-next/common/components/Avatar.tsx
================================================
import Image from "next/image";
import { ProfileIcon } from "../../assets/icons";

interface AvatarProps {
  avatarUrl?: string;
  username: string;
}

export const Avatar: React.FC<AvatarProps> = ({ avatarUrl, username }) => {
  return (
    <div className="flex items-center cursor-pointer gap-2">
      <span className="hidden sm:block font-extrabold tracking-wider text-sm">{username}</span>
      {avatarUrl ? (
        <Image
          className="cursor-pointer rounded-full"
          width="30"
          height="30"
          quality={100}
          src={avatarUrl}
          alt={username}
        />
      ) : (
        <ProfileIcon />
      )}
    </div>
  );
};


================================================
FILE: packages/webapp-next/common/components/BattleMatcher.tsx
================================================
import { useState } from "react";
import useSWR from "swr";
import { InfoIcon } from "../../assets/icons/InfoIcon";
import Modal from "./modals/Modal";
import { OnlineIcon } from "../../assets/icons/OnlineIcon";
import { UserGroupIcon } from "../../assets/icons/UserGroupIcon";
import { ToggleSelector } from "../../modules/play2/components/RaceSettings";
import { useGameStore, useIsOwner } from "../../modules/play2/state/game-store";
import {
  closeModals,
  openPublicRacesModal,
  toggleRaceIsPublic,
  useSettingsStore,
} from "../../modules/play2/state/settings-store";
import { ONLINE_COUNT_API } from "../api/races";
import { getExperimentalServerUrl } from "../utils/getServerUrl";
import { Overlay } from "./Overlay";
import ModalCloseButton from "./buttons/ModalCloseButton";

export const BattleMatcher: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);
  return (
    <div className="flex items-center font-semibold text-sm ml-2">
      <button
        className="ml-2 flex items-center text-off-white h-5 px-1"
        onClick={openModal}
      >
        <OnlineIcon />
        <div className="flex h-full items-end">
          <div
            className="bg-green-300 rounded-full"
            style={{ width: "5px", height: "5px" }}
          />
        </div>
      </button>
      {isOpen && <BattleMatcherModal closeModal={closeModal} />}
    </div>
  );
};

interface BatteListItemProps {
  race: any;
  closeModal: () => void;
}

const BatteListItem: React.FC<BatteListItemProps> = ({ race, closeModal }) => {
  const { ownerName, memberCount } = race;
  const game = useGameStore((state) => state.game);
  const myRaceID = useGameStore((state) => state.id);
  const isMyRace = myRaceID === race.id;
  const joinRace = () => {
    // TODO: if no game -> we should forward to page with ?id=race.id
    closeModal();
    game?.join(race.id);
  };
  return (
    <button
      onClick={joinRace}
      disabled={isMyRace}
      className={`flex w-full items-center justify-between gap-2 text-base rounded-lg bg-gray-300 
      ${
        isMyRace
          ? "bg-gray-400 hover:cursor-not-allowed"
          : "hover:cursor-pointer hover:bg-gray-400"
      } p-2 px-4 my-1`}
    >
      <div className="flex">
        <div className="flex items-center bg-purple-300 px-2 rounded mr-2">
          <div className="h-3">
            <UserGroupIcon />
          </div>
          <span className="mx-2">{memberCount}</span>
        </div>
        <span>{ownerName}</span>
      </div>
      {!isMyRace ? (
        <svg className="fill-current h-4" viewBox="0 0 512 512">
          <path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z" />
        </svg>
      ) : null}
    </button>
  );
};

interface BattleMatcherModalProps {
  closeModal: () => void;
}

export const PlayingNow = () => {
  const { data } = useSWR(ONLINE_COUNT_API, (...args) =>
    fetch(...args).then((res) => res.json())
  );
  const isPublic = useSettingsStore((s) => s.raceIsPublic);
  const isOpen = useSettingsStore((s) => s.publicRacesModalIsOpen);
  const isOwner = useIsOwner();
  return (
    <>
      <button
        className="font-semibold text-xs tracking-wide"
        onClick={openPublicRacesModal}
      >
        <div className="flex items-center px-1 rounded uppercase">
          <div className="flex text-dark-ocean items-center bg-gray-300 px-2 rounded">
            <div
              className={`mr-1 h-2 w-2 rounded-full 
      ${isPublic ? "bg-green-400" : "bg-gray-400"}`}
            />
            <div className="h-2 mr-1">
              <UserGroupIcon />
            </div>
            {data?.online ?? 0}
          </div>
        </div>
      </button>
      {isOpen && (
        <Overlay onOverlayClick={closeModals}>
          <Modal>
            <div className="flex items-center">
              <h2 className="text-xl mr-2">Public races</h2>
              <button
                className="cursor-default w-4 mr-1"
                title="You can configure your races to be public by default in your settings"
              >
                <InfoIcon />
              </button>
              <ModalCloseButton onButtonClickHandler={closeModals} />
            </div>
            <ToggleSelector
              title="public race"
              description="Enable to let other players find and join your race"
              checked={isPublic}
              disabled={!isOwner}
              toggleEnabled={toggleRaceIsPublic}
            />
            <BattleMatcherContainer closeModal={closeModals} />
          </Modal>
        </Overlay>
      )}
    </>
  );
};

const BattleMatcherModal = ({ closeModal }: BattleMatcherModalProps) => {
  return (
    <Overlay onOverlayClick={closeModal}>
      <BattleMatcherContainer closeModal={closeModal} />
    </Overlay>
  );
};

export const BattleMatcherContainer = ({
  closeModal,
}: {
  closeModal: () => void;
}) => {
  const baseUrl = getExperimentalServerUrl();
  const { data } = useSWR(
    `${baseUrl}/api/races`,
    (...args) => fetch(...args).then((res) => res.json()),
    { refreshInterval: 10000 }
  );

  const availableRaces = data;
  return (
    <div className="">
      {availableRaces && availableRaces.length > 0 && (
        <div className="">
          {availableRaces.map((race: any, i: number) => (
            <BatteListItem key={i} race={race} closeModal={closeModal} />
          ))}
        </div>
      )}
    </div>
  );
};


================================================
FILE: packages/webapp-next/common/components/Button.tsx
================================================
import React, { ButtonHTMLAttributes } from "react";

type ButtonColor = "primary" | "secondary" | "invisible";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  color: ButtonColor;
  leftIcon?: React.ReactElement;
  rightIcon?: React.ReactElement;
  text?: string;
  size?: "sm" | "md" | "lg";
}

const Button = ({
  color,
  disabled,
  onClick,
  leftIcon,
  rightIcon,
  text,
  title,
  size = "md",
}: ButtonProps) => {
  const colorStyles = getColorStyles(color);
  const disabledStyle = disabled
    ? "cursor-not-allowed opacity-80"
    : "cursor-pointer";

  const buttonSize = () => {
    switch (size) {
      case "lg":
        return "text-xl px-12 py-2";
      case "md":
        return "text-base py-2 px-4";
      case "sm":
        return "text-base py-1 px-2";
    }
  };

  return (
    <button
      type="button"
      title={title}
      style={{ transition: "all .15s ease" }}
      onClick={onClick}
      className={`flex items-center ${colorStyles} ${disabledStyle} ${buttonSize()}`}
      disabled={disabled}
      aria-expanded="true"
      aria-haspopup="true"
    >
      <>
        {leftIcon && leftIcon}
        {text && <p className="pl-1">{text}</p>}
        {rightIcon && rightIcon}
      </>
    </button>
  );
};

function getColorStyles(color: ButtonColor) {
  if (color === "invisible") {
    return "off-white border-none";
  }

  const sharedStyle =
    "flex items-center text-gray-900 border-gray-200 border rounded";

  const style =
    color === "primary" ? `bg-off-white` : `bg-purple-400 hover:bg-purple-300`;

  return `${sharedStyle} ${style}`;
}

export default Button;


================================================
FILE: packages/webapp-next/common/components/Footer/YoutubeLink.tsx
================================================
import getConfig from "next/config";
import { useEffect, useState } from "react";
import { YoutubeLogo } from "../../../assets/icons/YoutubeLogo";

export const useHasClicked = (key: string, value: string): boolean => {
  const [hasClicked, setHasClicked] = useState(true);
  useEffect(() => {
    if (typeof window !== "undefined") {
      const storedValue = localStorage.getItem(key);
      setHasClicked(storedValue === value);
    }
  }, [key, value]);
  return hasClicked;
};

const YOUTUBE_LINK_STORAGE_KEY = "youtube-link";
export const YoutubeLink = () => {
  const [hasClickedNow, setHasClickedNow] = useState(false);
  const youtubeLink = "https://www.youtube.com/watch?v=pNsJS5F-2yg";
  const hasClickedPreviously = useHasClicked(
    YOUTUBE_LINK_STORAGE_KEY,
    youtubeLink
  );

  const color =
    hasClickedPreviously || hasClickedNow ? "text-faded-gray" : "text-red-500";

  return (
    <a
      href={youtubeLink}
      className={`flex items-center ${color} hover:text-red-500`}
      target="blank"
      onClick={() => {
        localStorage.setItem(YOUTUBE_LINK_STORAGE_KEY, youtubeLink);
        setHasClickedNow(true);
      }}
      onMouseDown={(event: any) => {
        if (event.button === 1) {
          localStorage.setItem(YOUTUBE_LINK_STORAGE_KEY, youtubeLink);
          setHasClickedNow(true);
        }
      }}
    >
      <div className="h-6 w-6 flex items-center">
        <YoutubeLogo />
      </div>
      <span className="ml-1">watch</span>
    </a>
  );
};


================================================
FILE: packages/webapp-next/common/components/Footer.tsx
================================================
import { faCode } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";
import { DiscordLogo, GithubLogo, TwitchLogo } from "../../assets/icons";
import { getStargazersCount } from "../github/stargazers";
import { useIsPlaying } from "../hooks/useIsPlaying";
import { PlayingNow } from "./BattleMatcher";
import { YoutubeLink } from "./Footer/YoutubeLink";

function useStargazersCount() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    getStargazersCount().then((stargazersCount) => {
      setCount(stargazersCount);
    });
  }, []);
  return count;
}

export function KeybindInfo() {
  return (
    <div className="flex flex-grow items-center">
      <PlayingNow />
    </div>
  );
}

export function Footer() {
  const isPlaying = useIsPlaying();
  const stargazersCount = useStargazersCount();
  return (
    <footer
      className="h-10 tracking-tighter"
      style={{
        fontFamily: "Fira Code",
      }}
    >
      {!isPlaying && (
        <div className="w-full bg-dark-ocean">
          <AnimatePresence>
            <motion.div
              className="flex items-center justify-center text-faded-gray"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.5 }}
            >
              <div className="hidden sm:flex flex-grow items-center mb-2 text-xs">
                <h1 className="bg-dark-lake py-1 px-2 rounded font-bold text-faded-gray">
                  Tab
                </h1>
                <span className="mx-1 text-faded-gray">Refresh challenge</span>
                <h1 className="bg-dark-lake py-1 px-2 rounded font-bold ml-2 text-faded-gray">
                  Enter
                </h1>

                <span className="mx-1 text-faded-gray">Start race</span>
              </div>
              <div className="flex gap-2 sm:gap-4">
                <a
                  href="https://github.com/codicocodes/speedtyper.dev"
                  className="flex items-center text-white hover:text-off-white"
                  target="blank"
                >
                  <GithubLogo />
                  <span className="hidden sm:block ml-1">
                    {stargazersCount} stars
                  </span>
                  <span className="block sm:hidden ml-1">star</span>
                </a>
                <a
                  href="https://discord.gg/AMbnnN5eep"
                  className="flex items-center hover:text-blue-300"
                  target="blank"
                >
                  <DiscordLogo />
                  <span className="ml-1">join</span>
                </a>
                <a
                  href="https://twitch.tv/codico"
                  className="flex items-center hover:text-purple-400"
                  target="blank"
                >
                  <TwitchLogo />
                  <span className="ml-1">live</span>
                </a>
                <YoutubeLink />
                <a
                  href="https://dotfyle.com"
                  className="flex items-center hover:text-emerald-500 gap-1"
                  target="blank"
                >
                  <div className="h-5 w-5 flex items-center">
                    <FontAwesomeIcon icon={faCode} size="2x" color="fill" />
                  </div>
                  <span className="ml-1">nvim</span>
                </a>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>
      )}
    </footer>
  );
}


================================================
FILE: packages/webapp-next/common/components/Layout.tsx
================================================
import { Footer } from "./Footer";
import { navbarFactory } from "./NewNavbar";

interface LayoutProps {
  children: JSX.Element;
}

interface ContainerProps {
  children: JSX.Element;
  centered: boolean;
}

export function Container({ children, centered }: ContainerProps) {
  return (
    <div
      className={`flex justify-center h-full w-full 
     ${centered ? "items-center justify-content" : ""} `}
    >
      <div className="flex flex-col max-w-5xl w-full h-full justify-center relative">
        {children}
      </div>
    </div>
  );
}

export function Layout({ children }: LayoutProps) {
  const Navbar = navbarFactory();
  return (
    <>
      <Container centered={false}>
        <Navbar />
      </Container>
      <Container centered={true}>{children}</Container>
      <Container centered={false}>
        <>
          <Footer />
        </>
      </Container>
    </>
  );
}


================================================
FILE: packages/webapp-next/common/components/NewNavbar.tsx
================================================
import { AnimatePresence, motion } from "framer-motion";
import Link from "next/link";
import { TerminalIcon } from "../../assets/icons/TerminalIcon";
import { Logo, WebsiteName } from "../../components/Navbar";
import { LeaderboardButton } from "../../modules/play2/components/leaderboard/LeaderboardButton";
import { useGameStore } from "../../modules/play2/state/game-store";
import { useIsPlaying } from "../hooks/useIsPlaying";
import { PlayingNow } from "./BattleMatcher";
import Button from "./Button";
import { NewGithubLoginModal } from "./modals/GithubLoginModal";
import { SettingsModal } from "./modals/SettingsModal";

export const navbarFactory = () => {
  return NewNavbar;
};

const HomeLink = () => {
  return (
    <Link href="/">
      <span className="flex items-center cursor-pointer trailing-widest leading-normal text-xl  pl-2 text-off-white hover:text-white mr-2 lg:mr-6">
        <div className="flex items-center mr-4 mb-1">
          <Logo />
        </div>
        <WebsiteName />
      </span>
    </Link>
  );
};

const ProfileSection = () => {
  const isPlaying = useIsPlaying();
  return (
    <>
      {!isPlaying && (
        <AnimatePresence>
          <motion.div
            className="flex-grow flex items-center"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
          >
            <div className="text-sm flex-grow"></div>
            <NewGithubLoginModal />
          </motion.div>
        </AnimatePresence>
      )}
    </>
  );
};

export const NewNavbar = () => {
  const isPlaying = useIsPlaying();
  return (
    <header
      className="mt-2 h-10 tracking-tighter"
      style={{
        fontFamily: "Fira Code",
      }}
    >
      <div className="w-full">
        <div className="flex items-center items-start py-2">
          <HomeLink />
          {!isPlaying && (
            <div className="flex gap-2">
              <Link href="/">
                <Button
                  size="sm"
                  color="invisible"
                  onClick={() => useGameStore.getState().game?.play()}
                  leftIcon={<TerminalIcon />}
                />
              </Link>
              <LeaderboardButton />
              <SettingsModal />
              <PlayingNow />
            </div>
          )}
          <ProfileSection />
        </div>
      </div>
    </header>
  );
};


================================================
FILE: packages/webapp-next/common/components/Overlay.tsx
================================================
import { Keys, useKeyMap } from "../../hooks/useKeyMap";

interface OverlayProps {
  onOverlayClick: () => void;
  children: React.ReactNode;
}

export const Overlay: React.FC<OverlayProps> = (props) => {
  useKeyMap(true, Keys.Escape, props.onOverlayClick);
  return (
    <>
      <div
        className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
        onClick={props.onOverlayClick}
      >
        <div
          className="relative w-auto my-6 mx-auto flex items-center justify-center"
          onClick={(e) => e.stopPropagation()}
        >
          {props.children}
        </div>
      </div>
      <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
    </>
  );
};


================================================
FILE: packages/webapp-next/common/components/buttons/GithubLoginButton.tsx
================================================
import { GithubLogo } from "../../../assets/icons";
import Button from "../Button";

interface GithubLoginButtonProps {
  showModal: () => void;
}

export const GithubLoginButton = ({ showModal }: GithubLoginButtonProps) => {
  return (
    <div className="hidden sm:block">
      <Button
        color="primary"
        size="sm"
        leftIcon={<GithubLogo />}
        onClick={showModal}
        title="Login"
        text="Sign up | Login"
      />
    </div>
  );
};


================================================
FILE: packages/webapp-next/common/components/buttons/ModalCloseButton.tsx
================================================
interface ModalButtonCloseProps {
  onButtonClickHandler: () => void;
}

export default function ModalCloseButton({
  onButtonClickHandler,
}: ModalButtonCloseProps) {
  return (
    <button
      className="ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
      onClick={onButtonClickHandler}
    >
      <span className="bg-gray-300 rounded transition ease-in-out delay-100 hover:bg-gray-400 hover:text-gray-700 text-dark-ocean h-8 w-8 text-2xl block outline-none focus:outline-none">
        ×
      </span>
    </button>
  );
}


================================================
FILE: packages/webapp-next/common/components/modals/GithubLoginModal.tsx
================================================
import { useRouter } from "next/router";
import React from "react";
import {
  closeModals,
  openProfileModal,
  useSettingsStore,
} from "../../../modules/play2/state/settings-store";
import { useGithubAuthFactory } from "../../api/auth";
import { useUserStore } from "../../state/user-store";
import { getExperimentalServerUrl } from "../../utils/getServerUrl";
import { Avatar } from "../Avatar";
import { GithubLoginButton } from "../buttons/GithubLoginButton";
import { GithubLoginOverlay } from "../overlays/GithubLoginOverlay";
import { ProfileModal } from "./ProfileModal";

export const GithubLoginModal = () => {
  const [modalIsVisible, setShowModal] = React.useState(false);
  const closeModal = () => setShowModal(false);
  const showModal = () => setShowModal(true);
  return (
    <>
      <GithubLoginButton showModal={showModal} />
      {modalIsVisible ? (
        <>
          <GithubLoginOverlay closeModal={closeModal} />
        </>
      ) : null}
    </>
  );
};

export const NewGithubLoginModal = () => {
  const user = useUserStore();
  const profileModalIsOpen = useSettingsStore((s) => s.profileModalIsOpen);
  return (
    <>
      <button onClick={openProfileModal}>
        <Avatar avatarUrl={user.avatarUrl} username={user.username} />
      </button>
      {profileModalIsOpen ? (
        <>
          {user.isAnonymous ? (
            <GithubLoginOverlay closeModal={closeModals} />
          ) : (
            <ProfileModal closeModal={closeModals} />
          )}
        </>
      ) : null}
    </>
  );
};


================================================
FILE: packages/webapp-next/common/components/modals/GithubModal.tsx
================================================
import { ReactNode } from "react";

interface GithubModalProps {
  children: ReactNode;
}

export default function GithubModal({ children }: GithubModalProps) {
  return (
    <div className="max-w-[800px] border-0 lg:rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
      {children}
    </div>
  );
}


================================================
FILE: packages/webapp-next/common/components/modals/Modal.tsx
================================================
import { ReactNode } from "react";

interface ModalProps {
  children: ReactNode;
}

export default function Modal({ children }: ModalProps) {
  return (
    <div className="max-h-screen">
      <div className="flex flex-col gap-4 bg-off-white rounded-lg text-dark-ocean p-4">
        {children}
      </div>
    </div>
  );
}


================================================
FILE: packages/webapp-next/common/components/modals/ProfileModal.tsx
================================================
import Image from "next/image";
import { ReactNode } from "react";
import { closeModals } from "../../../modules/play2/state/settings-store";
import { logout } from "../../api/auth";
import { useUserStore } from "../../state/user-store";
import { Overlay } from "../Overlay";

export interface ProfileModalProps {
  closeModal: () => void;
}

export function ProfileModal({ closeModal }: ProfileModalProps) {
  const user = useUserStore();
  return (
    <Overlay onOverlayClick={closeModal}>
      <div className="text-dark-ocean bg-off-white p-5 rounded">
        <div className="flex items-center">
          <Image
            className="rounded-full"
            width="50"
            height="50"
            src={user.avatarUrl}
            alt=""
          />
          <span className="ml-4 text-lg tracking-wider">{user.username}</span>
        </div>
        <button
          onClick={() => logout().then(() => closeModals())}
          className="mt-4 p-2 rounded-full bg-dark-lake text-off-white text-lg font-bold tracking-wider w-full"
        >
          logout
        </button>
      </div>
    </Overlay>
  );
}

interface ProfileItemProps {
  onClick?: () => void;
  children: ReactNode;
}

export function ProfileItem({ children, onClick }: ProfileItemProps) {
  return (
    <div
      onClick={onClick}
      className="hover:text-purple-700 w-full ml-4 flex items-center text-lg justify-start cursor-pointer border-0 rounded bg-100 outline-none focus:outline-none"
    >
      {children}
    </div>
  );
}


================================================
FILE: packages/webapp-next/common/components/modals/SettingsModal.tsx
================================================
import React from "react";
import { KogWheel } from "../../../assets/icons/KogWheel";
import {
  closeModals,
  openSettingsModal,
  useSettingsStore,
} from "../../../modules/play2/state/settings-store";
import Button from "../Button";
import { SettingsOverlay } from "../overlays/SettingsOverlay";

export const SettingsModal = () => {
  const isOpen = useSettingsStore((s) => s.settingsModalIsOpen);
  return (
    <div>
      <Button
        size="sm"
        onClick={openSettingsModal}
        color="invisible"
        leftIcon={
          <div className="h-4 w-auto">
            <KogWheel />
          </div>
        }
      />
      {isOpen ? (
        <>
          <SettingsOverlay closeModal={closeModals} />
        </>
      ) : null}
    </div>
  );
};


================================================
FILE: packages/webapp-next/common/components/overlays/GithubLoginOverlay.tsx
================================================
import { Overlay } from "../Overlay";
import ModalCloseButton from "../buttons/ModalCloseButton";
import GithubModal from "../modals/GithubModal";
import { GithubLoginButton } from "../buttons/GithubLoginButton";
import { useRouter } from "next/router";
import { getExperimentalServerUrl } from "../../utils/getServerUrl";
import { useGithubAuthFactory } from "../../api/auth";

interface GithubLoginOverlayProps {
  closeModal: () => void;
}

export const GithubLoginOverlay: React.FC<GithubLoginOverlayProps> = ({
  closeModal,
}: GithubLoginOverlayProps) => {
  const router = useRouter();
  const serverUrl = getExperimentalServerUrl();
  const initGithubAuth = useGithubAuthFactory(router, serverUrl + "/api");
  return (
    <>
      <Overlay onOverlayClick={closeModal}>
        <GithubModal>
          <div className="flex justify-center items-center p-5 rounded-t">
            <ModalCloseButton onButtonClickHandler={closeModal} />
          </div>
          <h3 className="text-dark-ocean flex-grow text-5xl tracking-wider font-thin flex justify-center">
            Welcome
          </h3>
          <p className="text-dark-ocean text-lg flex-grow tracking-widest font-thin flex justify-center p-10">
            Signup to SpeedTyper with your Github account to save your results
            and get on the toplist.
          </p>
          <div className="flex justify-center mb-6 flex-auto">
            <GithubLoginButton showModal={initGithubAuth} />
          </div>
        </GithubModal>
      </Overlay>
    </>
  );
};


================================================
FILE: packages/webapp-next/common/components/overlays/SettingsOverlay.tsx
================================================
import { InfoIcon } from "../../../assets/icons/InfoIcon";
import Modal from "../modals/Modal";
import { closeModals } from "../../../modules/play2/state/settings-store";
import ModalCloseButton from "../buttons/ModalCloseButton";
import {
  CaretSelector,
  ToggleSelector,
} from "../../../modules/play2/components/RaceSettings";
import {
  toggleDefaultRaceIsPublic,
  toggleSyntaxHighlightning,
  useSettingsStore,
} from "../../../modules/play2/state/settings-store";
import { Overlay } from "../Overlay";

interface SettingsOverlayProps {
  closeModal: () => void;
}

export const SettingsOverlay: React.FC<SettingsOverlayProps> = ({
  closeModal,
}: SettingsOverlayProps) => {
  const isSyntaxHighlightingEnabled = useSettingsStore(
    (s) => s.syntaxHighlighting
  );
  const isPublicRaceByDefault = useSettingsStore((s) => s.defaultIsPublic);
  return (
    <>
      <Overlay onOverlayClick={closeModal}>
        <Modal>
          <div className="flex items-center">
            <button
              className="cursor-default w-4 h-auto mr-1"
              title="Personal settings are stored in your browser"
            >
              <InfoIcon />
            </button>
            <h2 className="text-xl tracking-wider">Personal Settings</h2>
            <ModalCloseButton onButtonClickHandler={closeModals} />
          </div>
          <ToggleSelector
            title="syntax highlighting"
            description="Enable to use syntax highlighting"
            checked={isSyntaxHighlightingEnabled}
            toggleEnabled={toggleSyntaxHighlightning}
          />
          <ToggleSelector
            title="Public races"
            description="Races you start will be public by default"
            checked={isPublicRaceByDefault}
            toggleEnabled={toggleDefaultRaceIsPublic}
          />
          <CaretSelector />
        </Modal>
      </Overlay>
    </>
  );
};


================================================
FILE: packages/webapp-next/common/github/stargazers.ts
================================================
const stargazersCountKey = "stargazersCount";

const rateLimitResetKey = "stargazersCountRateLimitReset";

export async function getStargazersCount() {
  return shouldRefreshCache()
    ? fetchStargazersCount()
    : localStorage.getItem(stargazersCountKey);
}

async function fetchStargazersCount() {
  return fetch("https://api.github.com/repos/codicocodes/speedtyper.dev").then(
    async (res) => {
      const rateLimitResetSeconds = res.headers.get(
        "x-ratelimit-reset"
      ) as string;
      const resetDate = new Date(parseInt(rateLimitResetSeconds) * 1000);
      const repoData = await res.json();
      const stargazersCount = repoData.stargazers_count;
      localStorage.setItem(stargazersCountKey, stargazersCount);
      localStorage.setItem(rateLimitResetKey, resetDate.toISOString());
      return stargazersCount;
    }
  );
}

function shouldRefreshCache() {
  const rateLimitReset = localStorage.getItem(rateLimitResetKey);
  if (!rateLimitReset) {
    return true;
  }
  return new Date() > new Date(rateLimitReset);
}


================================================
FILE: packages/webapp-next/common/hooks/useIsPlaying.ts
================================================
import { useCodeStore } from "../../modules/play2/state/code-store";

export const useIsPlaying = () => {
  useCodeStore((state) => state.startTime);
  useCodeStore((state) => state.endTime);
  const isPlaying = useCodeStore((state) => state.isPlaying)();
  return isPlaying;
};


================================================
FILE: packages/webapp-next/common/hooks/useSocket.ts
================================================
import { useEffect } from "react";
import { useConnectionStore } from "../../modules/play2/state/connection-store";
import SocketLatest from "../services/Socket";
import { getExperimentalServerUrl } from "../utils/getServerUrl";

export function useSocket() {
  useEffect(() => {
    const serverUrl = getExperimentalServerUrl();
    const socket = new SocketLatest(serverUrl);
    useConnectionStore.setState((s) => ({ ...s, socket }));
    return () => {
      socket.disconnect();
    };
  }, []);
}


================================================
FILE: packages/webapp-next/common/services/Socket.ts
================================================
import { connect, Socket as SocketIOSocket } from "socketio-latest";

export default class SocketLatest {
  socket: SocketIOSocket;

  constructor(serverUrl: string) {
    this.socket = connect(serverUrl, {
      withCredentials: true,
      reconnection: false,
    });
    this.socket.on("disconnect", (err) => {
      console.log("disconnected from server", err);
    });
    this.socket.on("connect", () => {
      console.log("connected!!!!");
    });
  }

  disconnect() {
    if (this.socket) this.socket.disconnect();
  }

  subscribe(event: string, cb: (error: string | null, msg: any) => void) {
    if (!this.socket) return true;
    this.socket.on(event, (msg: any) => {
      return cb(null, msg);
    });
  }

  emit(event: string, data?: any) {
    if (this.socket) this.socket.emit(event, data);
  }
}


================================================
FILE: packages/webapp-next/common/state/user-store.ts
================================================
import { useEffect } from "react";
import create from "zustand";
import { fetchUser } from "../api/user";

export interface User {
  id: string;
  username: string;
  avatarUrl: string;
  isAnonymous: boolean;
}

export const useUserStore = create<User>((_set, _get) => ({
  id: "",
  username: "",
  avatarUrl: "",
  isAnonymous: true,
}));

export const useInitializeUserStore = (user: User | null) => {
  useEffect(() => {
    if (user) {
      useUserStore.setState((userStore) => ({
        ...userStore,
        ...user,
      }));
    }
  }, [user]);
};

export const updateUserInStore = async () => {
  const user = await fetchUser();
  useUserStore.setState((userStore) => ({
    ...userStore,
    ...user,
  }));
};


================================================
FILE: packages/webapp-next/common/utils/clipboard.ts
================================================
import { toast } from "react-toastify";

export function copyToClipboard(url: string, message: string) {
  navigator.clipboard.writeText(url);
  toast.dark(message);
}


================================================
FILE: packages/webapp-next/common/utils/cpmToWPM.ts
================================================
export function cpmToWPM(cpm: number) {
  return Math.floor(cpm / 5);
}


================================================
FILE: packages/webapp-next/common/utils/getServerUrl.ts
================================================
import { publicRuntimeConfig } from "../../next.config";

export function getSiteRoot() {
  return publicRuntimeConfig?.siteRoot;
}

export function getServerUrl() {
  return publicRuntimeConfig?.serverUrl;
}

export function getExperimentalServerUrl() {
  return publicRuntimeConfig?.experimentalServerUrl;
}


================================================
FILE: packages/webapp-next/common/utils/router.ts
================================================
import Router from "next/router";

export const addIDtoQueryParams = (id: string) => {
  Router.push(
    {
      pathname: "/play2",
      query: { id },
    },
    undefined,
    { shallow: true }
  );
};


================================================
FILE: packages/webapp-next/common/utils/toHumanReadableTime.ts
================================================
const MINUTES_IN_SECONDS = 60;

const HOURS_IN_SECONDS = MINUTES_IN_SECONDS * 60;

const DAYS_IN_SECONDS = HOURS_IN_SECONDS * 24;

export const toHumanReadableTime = (secs: number) => {
  const days = Math.floor(secs / DAYS_IN_SECONDS);
  const hours = Math.floor((secs - days * DAYS_IN_SECONDS) / HOURS_IN_SECONDS);

  const minutes =
    Math.floor(
      (secs - days * DAYS_IN_SECONDS - hours * HOURS_IN_SECONDS) / 60
    ) % MINUTES_IN_SECONDS;

  const seconds =
    secs -
    days * DAYS_IN_SECONDS -
    hours * HOURS_IN_SECONDS -
    minutes * MINUTES_IN_SECONDS;

  let result = "";
  result = days ? result.concat(`${days} days `) : result;
  result = hours ? result.concat(`${hours}h `) : result;
  if (!days) result = minutes ? result.concat(`${minutes}m `) : result;
  if (!hours) result = result.concat(`${seconds}s`);
  return result.trim();
};


================================================
FILE: packages/webapp-next/components/Countdown.tsx
================================================
import React from "react";

const Countdown = ({ countdown }: { countdown: number }) => {
  const renderedString = countdown === 0 ? "START TYPING" : countdown;
  return countdown === 0 ? null : (
    <div className="absolute py-4 px-8 z-10 left-1/2 transform -translate-x-1/2 bg-dark-ocean shadow-xl rounded-lg">
      <div className="flex flex-grow items-center justify-center">
        <div className="text-5xl text-off-white tracking-wider">
          {renderedString}
        </div>
      </div>
    </div>
  );
};

export default Countdown;


================================================
FILE: packages/webapp-next/components/Navbar.tsx
================================================
import Image from "next/image";
import { useIsPlaying } from "../common/hooks/useIsPlaying";

export const WebsiteName = () => {
  const isPlaying = useIsPlaying();
  const websiteName = "speedtyper.dev";
  const colorClass = isPlaying ? "text-faded-gray" : "text-inherit";
  return (
    <h2
      className={`hidden sm:block whitespace-no-wrap font-bold ${colorClass}`}
    >
      {websiteName}
    </h2>
  );
};

export const Logo = () => {
  const isPlaying = useIsPlaying();
  return isPlaying ? (
    <Image
      width="45px"
      height="25px"
      src="/faded-logo.png"
      quality={100}
      alt="speedtyper logo"
    />
  ) : (
    <Image
      width="45px"
      height="25px"
      src="/logo.png"
      quality={100}
      alt="speedtyper logo"
    />
  );
};


================================================
FILE: packages/webapp-next/components/Stream.tsx
================================================
import { faChevronUp, faCircle, faX } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useMemo, useState } from "react";
import { useIsPlaying } from "../common/hooks/useIsPlaying";

export const Stream = () => {
  const isPlaying = useIsPlaying();
  const isLive = false;
  const [isHidden, setIsHidden] = useState(false);
  useMemo(() => {
    if (isLive && typeof document !== "undefined") {
      try {
        const script = document.createElement("script");
        script.setAttribute("src", "https://embed.twitch.tv/embed/v1.js");
        script.addEventListener("load", () => {
          // @ts-ignore
          new window.Twitch.Embed("twitch-embed", {
            width: "340",
            height: "200",
            layout: "video",
            muted: true,
            channel: "codico",
          });
        });
        document.body.appendChild(script);
      } catch (error) {
        console.log(error);
      }
    }
  }, [isLive]);
  return (
    <>
      <div
        className={`${
          isPlaying ? "hidden" : ""
        } bottom-0 right-0 mr-8 mb-8 absolute`}
      >
        <div className={`${!isLive || isPlaying || isHidden ? "hidden" : ""}`}>
          <div className="flex text-red-400 items-center gap-2 font-semibold justify-between">
            <div className="flex items-center gap-2 m-2">
              <div className="h-3 w-3 flex items-center">
                <FontAwesomeIcon icon={faCircle} />
              </div>
              live now
            </div>
            <button
              onClick={() => setIsHidden(true)}
              className="flex gap-2 items-center text-gray-400 hover:text-gray-200 hover:cursor-pointer font-normal"
            >
              hide
              <div className="h-2 w-2 flex items-center">
                <FontAwesomeIcon icon={faX} />
              </div>
            </button>
          </div>
          <div id="twitch-embed" />
        </div>
        {isHidden && (
          <button
            className="flex gap-2 items-center text-gray-400 hover:text-gray-200 hover:cursor-pointer font-normal"
            onClick={() => setIsHidden(false)}
          >
            <div className="h-2 w-2 flex items-center">
              <FontAwesomeIcon icon={faChevronUp} />
            </div>
            show stream
          </button>
        )}
      </div>
    </>
  );
};


================================================
FILE: packages/webapp-next/hooks/useKeyMap.ts
================================================
import { useEffect, useState } from "react";

export enum Keys {
  Tab = "Tab",
  Enter = "Enter",
  Escape = "Escape",
}

export const triggerKeys = "abcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*() ";

export const useKeyMap = (
  isActive: boolean,
  selectedKeys: string,
  callback: () => void
) => {
  const [capsLockActive, setCapsLockActive] = useState(false);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      const { key: pressedKey } = e;
      if (pressedKey === "CapsLock") {
        setCapsLockActive(!capsLockActive);
      }
      if (
        Object.values(Keys)
          .map((en) => en.toString())
          .includes(selectedKeys)
      ) {
        if (pressedKey !== selectedKeys) return;
        e.preventDefault();
        callback();
        return;
      }
      if (!selectedKeys.includes(pressedKey)) return;
      e.preventDefault();
      callback();
    };

    const handleCapsLock = (e: KeyboardEvent) => {
      setCapsLockActive(e.getModifierState("CapsLock"));
    };

    if (window && document) {
      if (isActive) {
        document.addEventListener("keydown", handleKeyDown);
        document.addEventListener("keydown", handleCapsLock);
        return () => {
          document.removeEventListener("keydown", handleKeyDown);
          document.removeEventListener("keydown", handleCapsLock);
        };
      } else {
        document.removeEventListener("keydown", handleKeyDown);
        document.removeEventListener("keydown", handleCapsLock);
      }
    }
  }, [isActive, callback, selectedKeys, capsLockActive]);

  return { capsLockActive };
};


================================================
FILE: packages/webapp-next/hooks/useTotalSeconds.ts
================================================
import { useEffect, useState } from "react";

export default (startTime?: number, endTime?: number): number => {
  const [totalSeconds, setTotalSeconds] = useState(0);

  let currTimeout: NodeJS.Timeout;

  useEffect(() => {
    if (startTime && !endTime) {
      currTimeout = setTimeout(() => {
        setTotalSeconds((totalSeconds) => {
          return totalSeconds + 1;
        });
      }, 1000);
    } else if (!endTime) {
      setTotalSeconds(0);
    }

    return () => clearTimeout(currTimeout);
  }, [totalSeconds, startTime, endTime]);

  return totalSeconds;
};


================================================
FILE: packages/webapp-next/modules/play2/components/CodeArea.tsx
================================================
import { ReactNode } from "react";
import Countdown from "../../../components/Countdown";
import { useGameStore } from "../state/game-store";

interface CodeAreaProps {
  filePath: string;
  focused: boolean;
  children: ReactNode;
  staticHeigh: boolean;
}

export function CodeArea({
  filePath,
  focused,
  children,
  staticHeigh = true,
}: CodeAreaProps) {
  const countDown = useGameStore((state) => state.countdown);
  return (
    <div
      className={`${
        staticHeigh ? "h-[250px] sm:h-[420px]" : ""
      } bg-dark-lake text-faded-gray flex-shrink tracking-tight sm:tracking-wider rounded-xl p-4 text-xs sm:text-2xl w-full`}
      style={{
        fontFamily: "Fira Code",
        fontWeight: "normal",
      }}
    >
      {!focused && (
        <div className="absolute flex justify-center items-center w-full h-full">
          Click or press any key to focus
        </div>
      )}
      {countDown && (
        <div className="absolute flex justify-center items-center w-full h-full">
          <Countdown countdown={countDown} />
        </div>
      )}

      <CodeAreaHeader filePath={filePath} />
      <pre className={focused ? "blur-none opacity-100" : "blur-sm opacity-40"}>
        <code>{children}</code>
      </pre>
    </div>
  );
}

function CodeAreaHeader({ filePath }: { filePath: string }) {
  return (
    <div className="flex items-center flex-row mb-4 w-full">
      <div className="flex flex-row gap-2 mr-2 relative">
        <div className="w-2.5 h-2.5 bg-slate-600 rounded-full" />
        <div className="w-2.5 h-2.5 bg-slate-600 rounded-full" />
        <div className="w-2.5 h-2.5 bg-slate-600 rounded-full" />
      </div>
      <div className="flex items-start justify-center flex-row w-full h-6 pr-12">
        <span className="hidden sm:block italic text-base opacity-80 truncate">
          {filePath}
        </span>
      </div>
    </div>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/components/HiddenCodeInput.tsx
================================================
import {
  ChangeEvent,
  ClipboardEvent,
  KeyboardEvent,
  MouseEvent,
  useEffect,
  useState,
} from "react";

import { isSkippable, useCodeStore } from "../state/code-store";
import { useCanType, useGameStore } from "../state/game-store";

interface HiddenCodeInputProps {
  hide: boolean; // Used for debugging the input
  disabled: boolean;
  inputRef: (node: HTMLTextAreaElement) => void;
}

const useAutoTyper = (
  handleOnChange: (e: ChangeEvent<HTMLTextAreaElement>) => void
) => {
  const isAutoTyperEnabled = false;
  const code = useCodeStore.getState().code;
  useEffect(() => {
    if (code && isAutoTyperEnabled) {
      const current = useCodeStore.getState().currentChar();
      const untyped = useCodeStore
        .getState()
        .untypedChars()
        .split("\n")
        .map((st) => st.trimStart())
        .join("\n");
      const value = current + untyped;
      handleOnChange({
        target: {
          value,
        },
      } as unknown as ChangeEvent<HTMLTextAreaElement>);
    }
  }, [isAutoTyperEnabled, code, handleOnChange]);
};

export const HiddenCodeInput = ({
  disabled,
  hide,
  inputRef,
}: HiddenCodeInputProps) => {
  const game = useGameStore((s) => s.game);
  const handleBackspace = useCodeStore((state) => state.handleBackspace);
  const handleKeyPress = useCodeStore((state) => state.handleKeyPress);
  const keyPressFactory = useCodeStore((state) => state.keyPressFactory);
  useAutoTyper(handleOnChange);
  const canType = useCanType();

  // TODO: remove input and setInput
  // instead introduc getTypedInput method in the store
  // which gets code.substr(0, correctIndex)
  const [input, setInput] = useState("");

  function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {
    // TODO: use e.isTrusted
    if (!canType) return;
    if (!game) return;
    const backspaces = input.length - e.target.value.length;
    // send backspaces
    if (backspaces > 0) {
      for (let i = 1; i <= backspaces; i++) {
        handleBackspace();
      }
    } else {
      // send regular characters
      const typed = e.target.value.substring(input.length);
      for (const char of typed) {
        if (isSkippable(char)) continue;
        const keyPress = keyPressFactory(char);
        handleKeyPress(keyPress);
        game.sendKeyStroke(keyPress);
      }
    }
    setInput(e.target.value);
  }

  return (
    <textarea
      className="text-black"
      ref={inputRef}
      value={input}
      autoFocus
      disabled={disabled}
      onChange={handleOnChange}
      onKeyDown={preventArrowKeys}
      onClick={preventClick}
      onPaste={preventPaste}
      style={{
        ...(hide
          ? {
              position: "absolute",
              left: "-10000000px",
            }
          : {}),
      }}
    />
  );
};

function preventClick(e: MouseEvent<HTMLTextAreaElement>) {
  e.preventDefault();
}

function preventPaste(e: ClipboardEvent<HTMLTextAreaElement>) {
  e.preventDefault();
}

function preventArrowKeys(e: KeyboardEvent<HTMLTextAreaElement>) {
  switch (e.key) {
    case ArrowKey.Up:
    case ArrowKey.Down:
    case ArrowKey.Left:
    case ArrowKey.Right:
      e.preventDefault();
  }
}

enum ArrowKey {
  Up = "ArrowUp",
  Down = "ArrowDown",
  Left = "ArrowLeft",
  Right = "ArrowRight",
}


================================================
FILE: packages/webapp-next/modules/play2/components/IncorrectChars.tsx
================================================
import { useCodeStore } from "../state/code-store";

function isOnlySpace(str: string) {
  return str.trim().length === 0;
}

export function IncorrectChars() {
  const incorrectChars = useCodeStore((state) => state.incorrectChars);
  const charGroups = parseIncorrectCharGroups(incorrectChars());
  return (
    <>
      {charGroups.map((chars, index) => {
        const bgColor =
          isOnlySpace(chars) && chars.length > 1 ? "" : "bg-red-500";
        return (
          <span key={index} className={`${bgColor} pb-1 pt-2`}>
            {chars}
          </span>
        );
      })}
    </>
  );
}

// TODO: figure out where these constants should go and if we can reuse them in other places
const LineBreak = "\n";
const LineBreakChar = "↵";
const LineBreakWithChar = `${LineBreakChar}${LineBreak}`;

function parseIncorrectCharGroups(incorrectChars: string) {
  const incorrectLines = incorrectChars
    .replaceAll(LineBreak, LineBreakWithChar)
    .split("\n")
    .filter(Boolean);

  const charGroups = incorrectLines
    .map((line) => {
      const subline = line.split(/(\s+)/);
      return subline.map((chars) => {
        return chars.replaceAll(LineBreakChar, LineBreakWithChar);
      });
    })
    .flat();
  return charGroups;
}


================================================
FILE: packages/webapp-next/modules/play2/components/NextChar.tsx
================================================
import { AnimatePresence, motion } from "framer-motion";
import { useNodeRect } from "../hooks/useNodeRect";
import { useCodeStore } from "../state/code-store";
import { useSettingsStore } from "../state/settings-store";
import {
  useBlinkingCursorAnimation,
  OFF_WHITE_COLOR as GRAY_COLOR,
  SmoothCaret,
} from "./SmoothCaret";

interface NextCharProps {
  focused: boolean;
}

export function NextChar({ focused }: NextCharProps) {
  const useSmoothCaret = useSettingsStore((state) => state.smoothCaret);
  const index = useCodeStore((state) => state.index);
  const [{ top, left }, nextCharRef] = useNodeRect<HTMLSpanElement>(
    index.toString()
  );
  const getNextChar = useCodeStore((state) => state.currentChar);
  const nextChar = getNextChar().replace(/\n/g, "↵\n");
  const runBlinkingCursorAnimation = !useSmoothCaret;
  const controls = useBlinkingCursorAnimation(
    GRAY_COLOR,
    runBlinkingCursorAnimation
  );

  return (
    <>
      {focused && useSmoothCaret && typeof window !== "undefined" && (
        <SmoothCaret top={top} left={left} />
      )}
      <AnimatePresence>
        <motion.span
          ref={nextCharRef}
          animate={controls}
          className="rounded-sm pb-1 pt-2"
          transition={{
            duration: 1,
            repeat: Infinity,
          }}
        >
          {nextChar}
        </motion.span>
      </AnimatePresence>
    </>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/components/RaceSettings.tsx
================================================
import { RadioGroup, Switch } from "@headlessui/react";
import { AnimatePresence, motion } from "framer-motion";
import React, { Fragment } from "react";
import { OnlineIcon } from "../../../assets/icons/OnlineIcon";
import { Overlay } from "../../../common/components/Overlay";
import { useIsOwner } from "../state/game-store";
import {
  closeModals,
  openLanguageModal,
  setCaretType,
  useSettingsStore,
} from "../state/settings-store";
import { ActionButton } from "./play-footer/PlayFooter";
import { LanguageSelector } from "./race-settings/LanguageSelector";

export const RaceSettings: React.FC = () => {
  const isOpen = useSettingsStore((s) => s.languageModalIsOpen);
  const languageSelected = useSettingsStore((s) => s.languageSelected);
  const language = languageSelected ? languageSelected.name : "language";

  return (
    <>
      <ActionButton
        className="flex items-center w-auto min-w-8"
        onClick={openLanguageModal}
        color="invisible"
        icon={
          <div className="h-3">
            <OnlineIcon />
          </div>
        }
        text={language}
      />
      {isOpen && <RaceSettingsModal />}
    </>
  );
};

export const RaceSettingsModal: React.FC = () => {
  const isOwner = useIsOwner();
  return (
    <Overlay onOverlayClick={closeModals}>
      <AnimatePresence>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.2 }}
          className="flex flex-col w-full text-dark-ocean p-5 rounded gap-4 w-full"
          style={{ fontFamily: "Fira Code" }}
        >
          <div className="flex flex-col gap-4 rounded-lg p-4 min-w-8">
            {isOwner && <LanguageSelector />}
          </div>
        </motion.div>
      </AnimatePresence>
    </Overlay>
  );
};

export const CaretSelector = () => {
  const isSmoothCaret = useSettingsStore((s) => s.smoothCaret);
  const selectedCaretType = isSmoothCaret ? "smooth" : "block";
  return (
    <RadioGroup value={selectedCaretType} onChange={setCaretType}>
      <RadioGroup.Label className="text-xs font-semibold uppercase tracking-widest">
        Caret style
      </RadioGroup.Label>
      <div className="flex w-full font-bold tracking-widest gap-1">
        <RadioGroup.Option className="w-full cursor-pointer" value="smooth">
          {({ checked }) => (
            <div
              className={`flex items-center h-full w-full p-3 rounded-lg ${
                checked
                  ? "bg-purple-200 hover:bg-purple-300"
                  : "bg-gray-200 hover:bg-gray-300"
              }`}
            >
              <span
                className="flex flex-col h-full rounded-lg bg-gray-600 mr-4"
                style={{
                  width: "2px",
                }}
              />
              <span>Line (smooth)</span>
            </div>
          )}
        </RadioGroup.Option>
        <RadioGroup.Option className="w-full cursor-pointer" value="block">
          {({ checked }) => (
            <div
              className={`flex items-center h-full w-full p-3 rounded-lg ${
                checked
                  ? "bg-purple-200 hover:bg-purple-300"
                  : "bg-gray-200 hover:bg-gray-300"
              }`}
            >
              <span className="flex flex-col h-full rounded-sm bg-gray-600 mr-4 w-3" />
              <span>Block</span>
            </div>
          )}
        </RadioGroup.Option>
      </div>
    </RadioGroup>
  );
};

interface ToggleSelectorProps {
  title: string;
  description: string;
  checked: boolean;
  toggleEnabled: () => void;
  disabled?: boolean;
}

export const ToggleSelector: React.FC<ToggleSelectorProps> = ({
  checked,
  disabled = false,
  toggleEnabled,
  title,
  description,
}) => {
  return (
    <>
      <div className="rounded-lg border-gray-200">
        <div className="flex items-center">
          <Switch checked={checked} onChange={toggleEnabled} as={Fragment}>
            {({ checked }) => (
              /* Use the `checked` state to conditionally style the button. */
              <button
                disabled={disabled}
                className={`${
                  disabled
                    ? "bg-gray-500"
                    : checked
                    ? "bg-purple-300"
                    : "bg-faded-gray"
                } relative inline-flex h-6 w-11 items-center rounded-full`}
              >
                <span className="sr-only">Enable notifications</span>
                <span
                  className={`${
                    checked ? "translate-x-6" : "translate-x-1"
                  } inline-block h-4 w-4 transform rounded-full bg-white transition`}
                />
              </button>
            )}
          </Switch>
          <div className="flex justify-between items-center w-full ml-4">
            <span className="text-sm font-semibold uppercase tracking-widest">
              {title}
            </span>
            <span className="w-auto tracking-wider font-thin text-sm ml-8">
              {description}
            </span>
          </div>
        </div>
      </div>
    </>
  );
};


================================================
FILE: packages/webapp-next/modules/play2/components/ResultsChart.tsx
================================================
import React, { RefObject, useEffect, useMemo, useRef } from "react";
import {
  Chart,
  LineController,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip,
} from "chart.js";
import { useCodeStore } from "../state/code-store";

Chart.register(
  LineController,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip
);

const renderChart = (
  ref: RefObject<HTMLCanvasElement>,
  wpmChartData: number[]
) => {
  const ctx = ref.current?.getContext("2d");
  if (!ctx) return;
  const labels = [];
  const data = [];
  let seconds = 1;
  for (const wpm of wpmChartData) {
    labels.push(seconds);
    data.push(wpm);
    seconds++;
  }
  return new Chart(ctx, {
    type: "line",
    data: {
      labels,
      datasets: [
        {
          label: "WPM each second",
          data,
          backgroundColor: "#7e22ce",
          borderColor: "#7e22ce",
          tension: 0.4,
          fill: true,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
        },
      },
      plugins: {
        tooltip: {
          enabled: true,
          callbacks: {
            title: (items) => {
              const item = items[0];
              const label = "Second " + item.label;
              return label;
            },
          },
        },
      },
    },
  });
};

export default function ResultsChart() {
  const chartRef = useRef<HTMLCanvasElement>(null);
  const getChartWPM = useCodeStore((state) => state.getChartWPM);
  const chartWPMData = useMemo(() => getChartWPM(), [getChartWPM]);
  useEffect(() => {
    const chart = renderChart(chartRef, chartWPMData);
    return () => {
      chart?.destroy();
    };
  }, [chartWPMData]);

  return (
    <div className="flex rounded-xl flex-col bg-dark-lake grow m-2 max-w-screen">
      <div className="flex flex-row">
        <h1 className="text-sm p-4 font-semibold">Words Per Minute</h1>
      </div>
      <div className="bg-dark-lake p-2 rounded-xl max-w-full h-full">
        <canvas ref={chartRef} />
      </div>
    </div>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/components/SmoothCaret.tsx
================================================
import { useEffect, useMemo } from "react";
import { AnimatePresence, motion, useAnimationControls } from "framer-motion";
import { useCodeStore } from "../state/code-store";

const useHasLoadedCode = () => {
  const code = useCodeStore((state) => state.code);
  return code.length > 0;
};

const SMOOTH_CARET_ELEMENT_ID = "smooth-caret-element";

export const PRIMARY_PINK_COLOR = "#d6bcfa";

export const OFF_WHITE_COLOR = "#374151";

export const useBlinkingCursorAnimation = (
  color: string,
  runAnimation: boolean = true
) => {
  const controls = useAnimationControls();
  const isPlaying = useCodeStore((state) => state.isPlaying)();
  useEffect(() => {
    if (!runAnimation) {
      controls.set({
        backgroundColor: ["rgba(0,0,0,0)"],
      });
      controls.stop();
      return;
    }
    if (!isPlaying) {
      controls.start({
        backgroundColor: ["rgba(0,0,0,0)", color],
      });
    } else {
      controls.set({
        backgroundColor: ["rgba(0,0,0,0)", color],
      });
      controls.stop();
    }
  }, [runAnimation, color, controls, isPlaying]);
  return controls;
};

export const SmoothCaret = ({ top, left }: { top: number; left: number }) => {
  const hasLoaded = useHasLoadedCode();
  const animator = useAnimator();

  useEffect(() => {
    animator.animate({ left, top });
  }, [animator, left, top]);

  const controls = useBlinkingCursorAnimation(PRIMARY_PINK_COLOR);

  return (
    <AnimatePresence>
      <motion.span
        animate={controls}
        transition={{
          duration: 1,
          repeat: Infinity,
        }}
        hidden={!hasLoaded}
        id={`${SMOOTH_CARET_ELEMENT_ID}`}
        className={`absolute rounded-lg`}
        style={{
          height: "34px",
          width: "3px",
        }}
      />
    </AnimatePresence>
  );
};

function useAnimator() {
  return useMemo(() => {
    return new Animator(SMOOTH_CARET_ELEMENT_ID);
  }, []);
}

class Animator {
  private element: HTMLElement | null;
  constructor(private elementId: string) {
    this.element = null;
  }

  private getElement() {
    if (this.element) {
      return this.element;
    }
    this.element = document.getElementById(this.elementId);
    return this.element;
  }

  private elementInStarterPosition(element: HTMLElement) {
    const left = element.style.left;
    const top = element.style.top;
    return left === "" || top === "";
  }

  animate(rect: { left: number; top: number }) {
    const element = this.getElement();
    if (!element) return;
    const left = rect.left - 4 + "px";
    const top = rect.top + 3 + "px";
    const duration = this.elementInStarterPosition(element) ? 0 : 75;
    const caretAnimation = element.animate([{ left, top }], {
      easing: "linear",
      duration,
      iterations: 1,
    });
    caretAnimation.onfinish = () => {
      element.style.left = left;
      element.style.top = top;
    };
  }
}


================================================
FILE: packages/webapp-next/modules/play2/components/TweetResult.tsx
================================================
import { faTwitter } from "@fortawesome/free-brands-svg-icons";
import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";

export interface TweetResultProps {
  wpm: number;
  url: string;
}

export const TweetResult = ({ wpm, url }: TweetResultProps) => {
  let tweetText = `Checkout this typing game for programmers. Can you beat ${wpm} wpm?`;
  let tweetUrl = `https://twitter.com/intent/tweet?url=${url}&text=${tweetText}&via=codicocodes`;
  return (
    <a
      href={tweetUrl}
      target="blank"
      className="w-full sm:w-auto flex shadow-lg hover:shadow-violet-900 hover:cursor-pointer text-faded-gray hover:text-off-white bg-dark-lake flex-col items-center justify-center px-1 rounded hover:bg-white/10"
    >
      <div className="h-4 w-4">
        <FontAwesomeIcon icon={faTwitter as IconDefinition} />
      </div>
    </a>
  );
};


================================================
FILE: packages/webapp-next/modules/play2/components/TypedChars.tsx
================================================
import highlightjs from "highlight.js";
import "highlight.js/styles/github-dark.css";
import { useEffect, useRef } from "react";
import { useCodeStore } from "../state/code-store";
import { useSettingsStore } from "../state/settings-store";

interface TypedCharsProps {
  language: string;
}

export function TypedChars({ language }: TypedCharsProps) {
  const isSyntaxHighlightingEnabled = useSettingsStore(
    (s) => s.syntaxHighlighting
  );
  useCodeStore((state) => state.code);
  const index = useCodeStore((state) => state.index);
  const typedChars = useCodeStore((state) => state.correctChars);
  const typedRef = useRef<HTMLSpanElement>(null);
  useEffect(() => {
    if (!isSyntaxHighlightingEnabled) return;
    if (typedRef.current) {
      highlightjs.highlightElement(typedRef.current);
    }
  }, [index, isSyntaxHighlightingEnabled]);
  return (
    <span
      className={`text-violet-400 ${language}`}
      ref={typedRef}
      style={{ background: "none" }}
    >
      {typedChars()}
    </span>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/components/UntypedChars.tsx
================================================
import { useCodeStore } from "../state/code-store";
export function UntypedChars() {
  const untypedChars = useCodeStore((state) => state.untypedChars);
  return <>{untypedChars()}</>;
}


================================================
FILE: packages/webapp-next/modules/play2/components/leaderboard/Leaderboard.tsx
================================================
import React, { useEffect, useState } from "react";
import { RadioGroup } from "@headlessui/react";
import Image from "next/image";
import Link from "next/link";
import useSWR from "swr";
import { GithubLogo } from "../../../../assets/icons";
import ModalCloseButton from "../../../../common/components/buttons/ModalCloseButton";
import Modal from "../../../../common/components/modals/Modal";
import { CrownIcon } from "../../../../assets/icons/CrownIcon";
import { cpmToWPM } from "../../../../common/utils/cpmToWPM";
import { getExperimentalServerUrl } from "../../../../common/utils/getServerUrl";
import { humanizeAbsolute } from "../../../../utils/humanize";
import { closeModals } from "../../state/settings-store";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faExternalLink } from "@fortawesome/free-solid-svg-icons";

export const Leaderboard: React.FC = () => {
  const baseUrl = getExperimentalServerUrl();
  const [selectedLeaderboard, setSelectedLeaderboard] =
    useState<Leaderboards>("wpm");

  const [activityData, setActivityData] = useState<any[]>([]);
  const { data, isLoading } = useSWR(
    baseUrl + "/api/results/leaderboard",
    (...args) => fetch(...args).then((res) => res.json()),
    { refreshInterval: 15000 }
  );

  useEffect(() => {
    if (data) {
      const newData = [...data];
      newData.sort((a, b) => b.racesPlayed - a.racesPlayed);
      setActivityData(newData);
    }
  }, [data]);
  return (
    <Modal>
      <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
        <h2 className="text-2xl tracking-widest font-thin">
          Daily Leaderboard
        </h2>
        <div className="flex justify-end gap-2">
          <LeaderboardSelector
            selectedLeaderboard={selectedLeaderboard}
            setSelectedLeaderboard={setSelectedLeaderboard}
          />
          <ModalCloseButton onButtonClickHandler={closeModals} />
        </div>
      </div>
      <div className="flex">
        {selectedLeaderboard === "wpm" && (
          <WPMLeaderboard results={data} isLoading={isLoading} />
        )}
        {selectedLeaderboard === "activity" && (
          <ActivityLeaderboard results={activityData} isLoading={isLoading} />
        )}
      </div>
    </Modal>
  );
};

export const ActivityLeaderboard = ({
  isLoading,
  results,
}: WPMLeaderboardProps) => {
  return (
    <>
      {!isLoading && results && (
        <div className="tracking-wider font-thin">
          <LeaderboardRowActivity
            placement="#"
            user="user"
            racesPlayed="Races played"
          />
          {results.map((r: any, i: number) => {
            const placement = i === 0 ? <CrownIcon /> : i + 1;
            const userNode = (
              <div className="flex items-center">
                <div className="hidden sm:block">
                  <Image
                    className="hidden sm:block rounded-full"
                    width="30"
                    height="30"
                    quality={100}
                    src={r.avatarUrl}
                    alt=""
                  />
                </div>
                <span className="ml-2" title={r.username}>
                  {r.username}
                </span>
                <Link href={`https://github.com/${r.username}`}>
                  <a target="_blank" className="ml-1">
                    <GithubLogo />
                  </a>
                </Link>
              </div>
            );

            return (
              <LeaderboardRowActivity
                key={i}
                placement={placement}
                user={userNode}
                racesPlayed={r.racesPlayed}
              />
            );
          })}
        </div>
      )}
    </>
  );
};

interface WPMLeaderboardProps {
  isLoading: boolean;
  results: any[];
}

export const WPMLeaderboard = ({ isLoading, results }: WPMLeaderboardProps) => {
  return (
    <>
      {!isLoading && results && (
        <div className="tracking-wider font-thin">
          <LeaderboardRowWPM
            placement="#"
            user="user"
            speed="speed (wpm)"
            accuracy="accuracy"
            timeAgo="time ago"
            resultLink=""
          />
          {results.map((r: any, i: number) => {
            const placement = i === 0 ? <CrownIcon /> : i + 1;
            const userNode = (
              <div className="flex items-center">
                <div className="hidden sm:block">
                  <Image
                    className="rounded-full"
                    width="30"
                    height="30"
                    quality={100}
                    src={r.avatarUrl}
                    alt=""
                  />
                </div>
                <span className="ml-2" title={r.username}>
                  {r.username}
                </span>
                <Link href={`https://github.com/${r.username}`}>
                  <a target="_blank" className="ml-1">
                    <GithubLogo />
                  </a>
                </Link>
              </div>
            );

            const resultLink = (
              <Link href={`/results/${r.resultId}`}>
                <div
                  className="h-4 w-4 hover:cursor-pointer"
                  onClick={closeModals}
                >
                  <FontAwesomeIcon icon={faExternalLink} />
                </div>
              </Link>
            );

            return (
              <LeaderboardRowWPM
                key={i}
                placement={placement}
                user={userNode}
                speed={cpmToWPM(r.cpm).toString()}
                accuracy={r.accuracy + "%"}
                timeAgo={humanizeAbsolute(new Date(r.createdAt))}
                resultLink={resultLink}
              />
            );
          })}
        </div>
      )}
    </>
  );
};

interface LeaderboardRowWPMProps {
  placement: React.ReactNode;
  user: React.ReactNode;
  speed: string;
  accuracy: string;
  timeAgo: string;
  resultLink: React.ReactNode;
}

export const LeaderboardRowWPM: React.FC<LeaderboardRowWPMProps> = (props) => {
  return (
    <div
      className={`flex items-center justify-start gap-8 p-1 px-2 my-1 first:font-bold even:bg-gray-200 rounded`}
    >
      <span className="ml-2 w-[25px]">{props.placement}</span>
      <div className="w-[125px] sm:w-[300px] truncate">{props.user}</div>
      <span className="w-[120px]">{props.speed}</span>
      <span className="hidden sm:block w-[125px]">{props.accuracy}</span>
      <span className="hidden sm:block mr-2 w-[125px]">{props.timeAgo}</span>
      <span className="hidden sm:block mr-2">{props.resultLink}</span>
    </div>
  );
};

interface LeaderboardRowActivityProps {
  placement: React.ReactNode;
  user: React.ReactNode;
  racesPlayed: string;
}

export const LeaderboardRowActivity: React.FC<LeaderboardRowActivityProps> = (
  props
) => {
  return (
    <div
      className={`flex items-center justify-start gap-8 p-1 px-2 my-1 first:font-bold even:bg-gray-200 rounded`}
    >
      <span className="ml-2 w-[25px]">{props.placement}</span>
      <div className="w-[125px] sm:w-[300px] truncate">{props.user}</div>
      <span className="hidden sm:block sm:w-[120px]"></span>
      <span className="hidden sm:block sm:w-[100px]"></span>
      <span className="mr-2 w-100px sm:w-[150px]">{props.racesPlayed}</span>
    </div>
  );
};

type Leaderboards = "wpm" | "activity";

interface LeaderboardSelectorProps {
  selectedLeaderboard: Leaderboards;
  setSelectedLeaderboard: (board: Leaderboards) => void;
}

export const LeaderboardSelector = ({
  selectedLeaderboard,
  setSelectedLeaderboard,
}: LeaderboardSelectorProps) => {
  return (
    <RadioGroup value={selectedLeaderboard} onChange={setSelectedLeaderboard}>
      <div className="flex w-full font-bold tracking-widest gap-1">
        <RadioGroup.Option
          className="w-full cursor-pointer min-w-[150px]"
          value="wpm"
        >
          {({ checked }) => (
            <div
              className={`flex items-center h-8 w-full p-3 rounded-lg transition ease-in-out ${
                checked
                  ? "bg-purple-200 hover:bg-purple-300"
                  : "bg-gray-300 hover:bg-gray-400"
              }`}
            >
              <span>wpm</span>
            </div>
          )}
        </RadioGroup.Option>
        <RadioGroup.Option
          className="w-full cursor-pointer min-w-[150px]"
          value="activity"
        >
          {({ checked }) => (
            <div
              className={`flex items-center h-8 w-full p-3 rounded-lg transition ease-in-out ${
                checked
                  ? "bg-purple-200 hover:bg-purple-300"
                  : "bg-gray-300 hover:bg-gray-400"
              }`}
            >
              activity
            </div>
          )}
        </RadioGroup.Option>
      </div>
    </RadioGroup>
  );
};


================================================
FILE: packages/webapp-next/modules/play2/components/leaderboard/LeaderboardButton.tsx
================================================
import { AnimatePresence, motion } from "framer-motion";
import React from "react";
import { CrownIcon } from "../../../../assets/icons/CrownIcon";
import Button from "../../../../common/components/Button";
import { Overlay } from "../../../../common/components/Overlay";
import {
  closeModals,
  openLeaderboardModal,
  useSettingsStore,
} from "../../state/settings-store";
import { Leaderboard } from "./Leaderboard";

export const LeaderboardButton: React.FC = () => {
  const isOpen = useSettingsStore((s) => s.leaderboardModalIsOpen);
  return (
    <>
      <Button
        size="sm"
        onClick={openLeaderboardModal}
        color="invisible"
        leftIcon={<CrownIcon />}
      />
      {isOpen && (
        <Overlay onOverlayClick={closeModals}>
          <AnimatePresence>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.2 }}
            >
              <Leaderboard />
            </motion.div>
          </AnimatePresence>
        </Overlay>
      )}
    </>
  );
};


================================================
FILE: packages/webapp-next/modules/play2/components/play-footer/ChallengeSource/ChallengeSource.tsx
================================================
import React from "react";
import Link from "next/link";
import { GithubLogo } from "../../../../../assets/icons";
import {
  closeModals,
  openProjectModal,
  useSettingsStore,
} from "../../../state/settings-store";
import { Overlay } from "../../../../../common/components/Overlay";
import ModalCloseButton from "../../../../../common/components/buttons/ModalCloseButton";

export interface ChallengeSourceProps {
  url: string;
  name: string;
  license: string;
}

export const ChallengeSource: React.FC<ChallengeSourceProps> = (props) => {
  const { name } = props;
  const isOpen = useSettingsStore((s) => s.projectModalIsOpen);
  return (
    <>
      <button onClick={openProjectModal}>
        <a target="_blank" className="flex items-center font-semibold text-sm hover:text-off-white">
          <div className="mr-1">
            <GithubLogo />
          </div>
          {name}
        </a>
      </button>
      {isOpen && (
        <Overlay onOverlayClick={closeModals}>
          <div
            className="flex flex-col bg-off-white text-dark-ocean p-5 rounded gap-2 w-full max-h-screen overflow-y-scroll gap-y-4 sm:min-w-[400px]"
            style={{ fontFamily: "Fira Code" }}
          >
            <div className="flex items-center justify-between">
              <div className="mr-2">
                <GithubLogo />
              </div>
              <h2 className="font-semibold tracking-wider text-xl">{name}</h2>
              <Link href={`https://github.com/${name}`}>
                <a target="_blank" className="mr-2">
                  <OutwardLinkIcon />
                </a>
              </Link>
              <ModalCloseButton onButtonClickHandler={closeModals} />
            </div>
            <div className="flex items-center">
              <h2 className="text-sm font-semibold mr-2">License:</h2>
              <h2 className="text-sm">{props.license}</h2>
            </div>

            <div className="flex items-center">
              <h2 className="text-sm tracking-wider font-semibold">
                Challenge source
              </h2>
              <Link href={props.url}>
                <a target="_blank" className="mr-2">
                  <OutwardLinkIcon />
                </a>
              </Link>
            </div>
            <div className="flex items-center">
              <div className="text-green-500">
                <svg
                  className="fill-current mr-2"
                  viewBox="0 0 16 16"
                  version="1.1"
                  width="16"
                  height="16"
                  aria-hidden="true"
                >
                  <path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path>
                  <path d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path>
                </svg>
              </div>
              <h2 className="text-sm tracking-wider font-semibold">
                Good first issues
              </h2>
              <Link
                href={`https://github.com/${name}/issues?q=is%3Aopen+label%3A%22good+first+issue%22%2C%22help+wanted%22+`}
              >
                <a target="_blank" className="mr-2">
                  <OutwardLinkIcon />
                </a>
              </Link>
            </div>
          </div>
        </Overlay>
      )}
    </>
  );
};

export const OutwardLinkIcon = () => {
  // SVG Below: Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 512"
      className="ml-2 h-3"
    >
      <path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
    </svg>
  );
};


================================================
FILE: packages/webapp-next/modules/play2/components/play-footer/ChallengeSource/index.ts
================================================
export * from "./ChallengeSource";


================================================
FILE: packages/webapp-next/modules/play2/components/play-footer/PlayFooter/PlayFooter.tsx
================================================
import { faPerson, faUserGroup } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AnimatePresence, motion } from "framer-motion";
import { ButtonHTMLAttributes, useState } from "react";
import { PlayIcon } from "../../../../../assets/icons";
import { InfoIcon } from "../../../../../assets/icons/InfoIcon";
import { LinkIcon } from "../../../../../assets/icons/LinkIcon";
import { ReloadIcon } from "../../../../../assets/icons/ReloadIcon";
import { WarningIcon } from "../../../../../assets/icons/WarningIcon";
import { GithubLoginOverlay } from "../../../../../common/components/overlays/GithubLoginOverlay";
import { useIsPlaying } from "../../../../../common/hooks/useIsPlaying";
import { useUserStore } from "../../../../../common/state/user-store";
import { copyToClipboard } from "../../../../../common/utils/clipboard";
import { toHumanReadableTime } from "../../../../../common/utils/toHumanReadableTime";
import { Keys, useKeyMap } from "../../../../../hooks/useKeyMap";
import useTotalSeconds from "../../../../../hooks/useTotalSeconds";
import { ChallengeInfo } from "../../../hooks/useChallenge";
import { useCodeStore } from "../../../state/code-store";
import { useConnectionStore } from "../../../state/connection-store";
import {
  useGameStore,
  useIsMultiplayer,
  useIsOwner,
} from "../../../state/game-store";
import {
  closeModals,
  openProfileModal,
  useHasOpenModal,
  useSettingsStore,
} from "../../../state/settings-store";
import { RaceSettings } from "../../RaceSettings";
import { ChallengeSource } from "../ChallengeSource";

interface PlayFooterProps {
  challenge: ChallengeInfo;
}

function useCodeStoreTotalSeconds() {
  // TODO: move useTotalSeconds to modules folder
  const startTime = useCodeStore((state) => state.startTime);
  const endTime = useCodeStore((state) => state.endTime);
  const totalSeconds = useTotalSeconds(
    startTime?.getTime(),
    endTime?.getTime()
  );
  return totalSeconds;
}

function useMistakeWarningMessage() {
  const currentMistakeCount = useCodeStore((state) => state.incorrectChars)()
    .length;
  return currentMistakeCount > 10;
}

export function WarningContainer() {
  const mistakesWarning = useMistakeWarningMessage();
  const isConnected = useConnectionStore((state) => state.isConnected);
  const raceExistsInServer = useConnectionStore(
    (state) => state.raceExistsInServer
  );
  const alreadyPlaying = useConnectionStore((state) => state.alreadyPlaying);
  const showRaceDoesNotExistWarning = !raceExistsInServer && !alreadyPlaying;
  const showDisconnectedWarning = !alreadyPlaying && !isConnected;
  return (
    <>
      {mistakesWarning && (
        <span className="flex ml-2 text-red-400 font-medium gap-1">
          <WarningIcon />
          Undo mistakes to continue
        </span>
      )}
      {showDisconnectedWarning && (
        <span className="flex ml-2 text-red-400 font-medium gap-1">
          <WarningIcon />
          You are not connected to the server.
        </span>
      )}
      {alreadyPlaying && (
        <span className="flex ml-2 text-red-400 font-medium gap-1">
          <WarningIcon />
          You can not play in two browsers simultaneously
        </span>
      )}
      {showRaceDoesNotExistWarning && (
        <h2 className="text-red-400 flex justify-center items-center ml-2 text-lg font-medium gap-1 my-2">
          <WarningIcon />
          This race does not exist. Refresh to continue.
          <i
            className="text-off-white h-4"
            title="When the server restarts current race state is resets"
          >
            <InfoIcon />
          </i>
        </h2>
      )}
    </>
  );
}

export function PlayFooter({ challenge }: PlayFooterProps) {
  const isPlaying = useIsPlaying();
  const totalSeconds = useCodeStoreTotalSeconds();
  const isAnonymous = useUserStore((u) => u.isAnonymous);
  const profileModalIsOpen = useSettingsStore((s) => s.profileModalIsOpen);
  return (
    <div className="w-full h-10 px-2">
      <AnimatePresence>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
          className="w-full"
        >
          {!isPlaying && (
            <div className="w-full">
              <div className="flex row justify-between items-top">
                <ActionButtons />
                <div className="text-faded-gray flex gap-4">
                  {isAnonymous && (
                    <>
                      <button
                        onClick={openProfileModal}
                        className="flex text-xs items-center font-semibold tracking-wide hover:cursor-pointer gap-2 hover:text-off-white"
                      >
                        <div className="h-4 w-4 flex items-center">
                          <FontAwesomeIcon icon={faUserGroup} size="xs" />
                        </div>
                        Login | Signup
                      </button>
                      {profileModalIsOpen && (
                        <GithubLoginOverlay closeModal={closeModals} />
                      )}
                    </>
                  )}
                  {challenge.projectName && (
                    <ChallengeSource
                      name={challenge.projectName}
                      url={challenge.url}
                      license={challenge.license}
                    />
                  )}
                </div>
              </div>
            </div>
          )}
        </motion.div>
      </AnimatePresence>
      <AnimatePresence>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
          className="flex items-center w-full"
        >
          {isPlaying && <Timer seconds={totalSeconds} />}
          <WarningContainer />
        </motion.div>
      </AnimatePresence>
    </div>
  );
}

interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  icon: React.ReactElement;
  text: String;
}

export function ActionButton({
  text,
  icon,
  ...buttonProps
}: ActionButtonProps) {
  return (
    <button
      {...buttonProps}
      style={{
        fontFamily: "Fira Code",
      }}
      className="flex text-sm font-light text-dark-ocean items-center justify-between gap-2 rounded-3xl bg-gray-300 hover:bg-gray-400 hover:cursor-pointer px-3 py-0.5 my-1"
    >
      <div className="hidden sm:flex">{text}</div>
      {icon}
    </button>
  );
}

function ActionButtons() {
  const game = useGameStore((s) => s.game);
  const isMultiplayer = useIsMultiplayer();
  const isOwner = useIsOwner();
  const hasEndTime = useCodeStore((state) => state.endTime);
  const countdown = useGameStore((state) => state.countdown);
  const hasOpenModal = useHasOpenModal();
  const canManuallyStartGame =
    !hasOpenModal && isOwner && isMultiplayer && !hasEndTime && !countdown;
  const waitingForOwnerToStart =
    !isOwner && isMultiplayer && !hasEndTime && !countdown;
  const startGame = () => game?.start();
  useKeyMap(canManuallyStartGame, Keys.Enter, startGame);
  const [isThrottled, setIsThrottled] = useState(false);
  return (
    <div className="flex text-faded-gray gap-1">
      {isOwner && (
        <ActionButton
          text="refresh"
          title="Refresh the challenge"
          disabled={isThrottled}
          onClick={() => {
            if (isThrottled) return;
            game?.next();
            setIsThrottled(true);
            setTimeout(() => {
              setIsThrottled(false);
            }, 2000);
          }}
          icon={
            <div className="h-3 w-3">
              <ReloadIcon />
            </div>
          }
        />
      )}
      <ActionButton
        text="invite"
        title="Invite your friends to play"
        icon={
          <div className="h-3 w-4">
            <LinkIcon />
          </div>
        }
        onClick={() => {
          const url = new URL(window.location.href);
          if (game?.id) {
            url.searchParams.set("id", game.id);
          }
          copyToClipboard(url.toString(), `${url} copied to clipboard`);
        }}
      />
      {isOwner && <RaceSettings />}
      {canManuallyStartGame && (
        <ActionButton
          title="Start the game"
          text="start"
          onClick={startGame}
          icon={<PlayIcon />}
        />
      )}
      {waitingForOwnerToStart && (
        <span className="flex text-sm font-light text-off-white items-center justify-between">
          Waiting for race to start
        </span>
      )}
    </div>
  );
}

function Timer({ seconds }: { seconds: number }) {
  return (
    <div className="text-3xl ml-2 font-bold text-purple-300">
      {toHumanReadableTime(seconds)}
    </div>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/components/play-footer/PlayFooter/index.ts
================================================
export * from "./PlayFooter";


================================================
FILE: packages/webapp-next/modules/play2/components/play-header/PlayHeader/PlayHeader.tsx
================================================
import { AnimatePresence, motion } from "framer-motion";
import { CrownIcon } from "../../../../../assets/icons/CrownIcon";
import { toHumanReadableTime } from "../../../../../common/utils/toHumanReadableTime";
import cpmToWpm from "../../../../../utils/cpmToWpm";
import {
  RacePlayer,
  RaceResult,
  useGameStore,
  useIsMultiplayer,
} from "../../../state/game-store";

export function ResultsContainer() {
  const isMultiplayer = useIsMultiplayer();
  const results = useGameStore((state) => state.results);
  return isMultiplayer ? (
    <div className="my-1">
      {Object.values(results).map((result, i) => {
        const place = i + 1;
        return <Result key={i} result={result} place={place} />;
      })}
    </div>
  ) : null;
}

export function ProgressContainer() {
  const isMultiplayer = useIsMultiplayer();
  const members = useGameStore((state) => state.members);
  return isMultiplayer ? (
    <div className="my-2">
      {Object.values(members).map((player) => {
        return <ProgressBar key={player.id} player={player} />;
      })}
    </div>
  ) : null;
}

interface ResultProps {
  result: RaceResult;
  place: number;
}

export function Result({ result, place }: ResultProps) {
  return (
    <div className="flex row w-full items-center bg-dark-lake rounded-lg px-3 py-2 my-2">
      <span className="flex w-48 ml-1 mr-4 text-sm font-semibold truncate">
        {result.user.username}
      </span>
      <div className="flex w-full gap-2">
        <span className="flex font-semibold text-xs rounded-lg px-2 py-1 bg-purple-300 text-dark-ocean">
          {place} place
        </span>
        <div className="flex flex-grow justify-end gap-2">
          <span className="font-semibold text-xs rounded-lg px-2 py-1 bg-gray-700">
            {cpmToWpm(result.cpm)} wpm
          </span>
          <span className="font-semibold text-xs rounded-lg px-2 py-1 bg-gray-700">
            {result.accuracy}% accuracy
          </span>
          <span className="font-semibold text-xs rounded-lg px-2 py-1 bg-gray-700">
            {toHumanReadableTime(Math.floor(result.timeMS / 1000))}
          </span>
          <span className="font-semibold text-xs rounded-lg px-2 py-1 bg-gray-700">
            {result.mistakes} mistakes
          </span>
        </div>
      </div>
    </div>
  );
}

interface ProgressBarProps {
  player: RacePlayer;
}

interface ProgressProps {
  progress: Number;
  word: string;
}

export function Progress({ progress, word }: ProgressProps) {
  return (
    <div
      className="w-full bg-white rounded-lg flex items-center"
      style={{
        height: "4px",
      }}
    >
      <div
        className="bg-purple-300 h-full rounded-lg"
        style={{ width: `${progress}%`, transition: "width 200ms ease-in-out" }}
      ></div>
      {word && (
        <span className="font-semibold text-xs rounded-lg px-2 py-1 bg-gray-700">
          {word}
        </span>
      )}
    </div>
  );
}

export function ProgressBar({ player }: ProgressBarProps) {
  const ownerId = useGameStore.getState().owner;
  const isOwner = ownerId === player.id;
  const isCompleted = player.progress === 100;
  return !isCompleted ? (
    <div className="flex row w-full items-center bg-dark-lake rounded-lg px-3 py-2 my-2">
      <span className="flex w-48 ml-1 mr-4 text-sm font-semibold truncate">
        {player.username}
        {isOwner ? (
          <div className="ml-1">
            <CrownIcon />
          </div>
        ) : null}
      </span>
      <Progress progress={player.progress} word={player.recentlyTypedLiteral} />
    </div>
  ) : null;
}

export function PlayHeader() {
  return (
    <div className="w-full relative">
      <AnimatePresence>
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
          className="w-full"
        >
          <ResultsContainer />
          <ProgressContainer />
        </motion.div>
      </AnimatePresence>
    </div>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/components/play-header/PlayHeader/index.tsx
================================================
export * from "./PlayHeader";


================================================
FILE: packages/webapp-next/modules/play2/components/race-settings/LanguageSelector.tsx
================================================
import useSWR from "swr";
import { Listbox } from "@headlessui/react";
import { CrossIcon } from "../../../../assets/icons/CrossIcon";
import { getExperimentalServerUrl } from "../../../../common/utils/getServerUrl";
import { useSettingsStore, LanguageDTO, setLanguage } from "../../state/settings-store";
import { useGameStore } from "../../state/game-store";

const selectProgrammingLanguage = (languageSelected: LanguageDTO | null) => {
  setLanguage(languageSelected);
  if (languageSelected) {
    useGameStore.getState().game?.next();
  }
};

const baseUrl = getExperimentalServerUrl();

export function LanguageSelector() {
  const { data, isLoading } = useSWR(baseUrl + "/api/languages", (...args) =>
    fetch(...args).then((res) => res.json())
  );
  const languages = data as undefined | { language: string; name: string }[];
  const selectedLanguage = useSettingsStore((s) => s.languageSelected);
  return (
    <div className="w-full text-dark-ocean font-thin w-[250px]">
      <h2 className="text-xs mb-1 font-semibold uppercase tracking-widest">
        select language
      </h2>
      <Listbox value={selectedLanguage} onChange={selectProgrammingLanguage}>
        <div className="flex items-center">
          <Listbox.Button className="flex items-center justify-between px-2 bg-gray-200 p-1 w-full rounded">
            {selectedLanguage?.name || "nothing selected"}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
              className="h-5 w-5 text-gray-400"
            >
              <path
                fillRule="evenodd"
                d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
                clipRule="evenodd"
              ></path>
            </svg>
          </Listbox.Button>
          {selectedLanguage && (
            <button
              onClick={() => selectProgrammingLanguage(null)}
              className="flex items-center p-1 h-full  bg-gray-200 ml-2 rounded"
            >
              <div className="w-2 text-red-500 fill-current mx-1">
                <CrossIcon />
              </div>
              <span>clear</span>
            </button>
          )}
        </div>
        {!isLoading && (
          <Listbox.Options static>
            {languages?.map((language) => (
              <Listbox.Option key={language.name} value={language}>
                {({ active, selected }) => {
                  return (
                    <li
                      className={`pl-2 flex items-center gap-2 my-1 p-1 rounded cursor-pointer ${
                        active ? "bg-gray-300" : "bg-gray-200"
                      }`}
                    >
                      {language.name}
                      {selected && (
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 512 512"
                          className="h-5 w-auto text-green-500 fill-current"
                        >
                          <path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" />
                        </svg>
                      )}
                    </li>
                  );
                }}
              </Listbox.Option>
            ))}
          </Listbox.Options>
        )}
      </Listbox>
    </div>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/containers/CodeTypingContainer.tsx
================================================
import { useFocusRef } from "../hooks/useFocusRef";
import { useCodeStore } from "../state/code-store";
import { CodeArea } from "../components/CodeArea";
import { HiddenCodeInput } from "../components/HiddenCodeInput";
import { TypedChars } from "../components/TypedChars";
import { NextChar } from "../components/NextChar";
import { IncorrectChars } from "../components/IncorrectChars";
import { UntypedChars } from "../components/UntypedChars";
import { useEffect, useState, useCallback, MouseEvent } from "react";
import { useIsPlaying } from "../../../common/hooks/useIsPlaying";
import { useKeyMap, triggerKeys } from "../../../hooks/useKeyMap";
import { useHasOpenModal } from "../state/settings-store";

interface CodeTypingContainerProps {
  filePath: string;
  language: string;
}

const CODE_INPUT_BLUR_DEBOUNCE_MS = 1000;

let trulyFocusedCodeInput = true;

export function CodeTypingContainer({
  filePath,
  language,
}: CodeTypingContainerProps) {
  useCodeStore((state) => state.code);
  const isPlaying = useIsPlaying();
  const code = useCodeStore((state) => state.code);
  const start = useCodeStore((state) => state.start);
  const index = useCodeStore((state) => state.index);
  const hasOpenModal = useHasOpenModal();
  const [inputRef, triggerFocus] = useFocusRef<HTMLTextAreaElement>();
  const [focused, setFocused] = useState(true);

  useKeyMap(!hasOpenModal && !focused, triggerKeys, () => {
    triggerFocus();
    setFocused(true);
  });

  useEffect(() => {
    triggerFocus();
  }, [code, triggerFocus]);

  useEffect(() => {
    if (!isPlaying && index > 0) {
      start();
    }
  }, [index, isPlaying, start]);

  const onFocus = useCallback(() => {
    trulyFocusedCodeInput = true;
    setFocused(true);
  }, [setFocused]);

  const onBlur = useCallback(() => {
    trulyFocusedCodeInput = false;
    setTimeout(() => {
      if (!trulyFocusedCodeInput) {
        setFocused(false);
      }
    }, CODE_INPUT_BLUR_DEBOUNCE_MS);
  }, [setFocused]);

  // onBlur gets triggered when onFocus is also called more than once
  // which caused a flicker when you repeatedly click the code area
  // this will prevent onBlur from getting called repeatedly
  // Ref: https://github.com/react-toolbox/react-toolbox/issues/1323#issuecomment-656778859
  const onMouseDownPreventBlur = useCallback(
    (e: MouseEvent<HTMLDivElement>) => {
      e.preventDefault();
    },
    []
  );

  return (
    <div className="w-full relative" onClick={triggerFocus}>
      <div
        className="flex flex-col w-full"
        onFocus={onFocus}
        onBlur={onBlur}
        onMouseDown={onMouseDownPreventBlur}
      >
        <HiddenCodeInput hide={true} disabled={false} inputRef={inputRef} />
        <CodeArea staticHeigh={true} filePath={filePath} focused={focused}>
          <TypedChars language={language} />
          <IncorrectChars />
          <NextChar focused={focused} />
          <UntypedChars />
        </CodeArea>
      </div>
    </div>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/containers/ResultsContainer.tsx
================================================
import {
  faArrowDown,
  faArrowTrendUp,
  faArrowUp,
  faCheckCircle,
  faCircleXmark,
  faExternalLink,
  faShare,
  faSquarePollVertical,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Link from "next/link";
import { copyToClipboard } from "../../../common/utils/clipboard";
import { cpmToWPM } from "../../../common/utils/cpmToWPM";
import { toHumanReadableTime } from "../../../common/utils/toHumanReadableTime";
import ResultsChart from "../components/ResultsChart";
import { TweetResult } from "../components/TweetResult";
import { useGameStore } from "../state/game-store";
import { useTrendStore } from "../state/trends-store";

export function ResultsText({
  info,
  title,
  value,
}: {
  info: string;
  title: string;
  value: React.ReactNode;
}) {
  return (
    <div
      title={info}
      className="h-full flex flex-col justify-end px-2 w-full sm:min-w-[150px] bg-dark-lake rounded p-2 py-4"
    >
      <p className="flex justify-start color-inherit font-bold text-off-white text-xs">
        {title}
      </p>
      <div className="flex items-center gap-2 text-faded-gray justify-between">
        <p className="font-bold text-2xl">{value}</p>
      </div>
    </div>
  );
}
export function ShareResultButton({ url }: { url: string }) {
  return (
    <button
      onClick={() => {
        const message = `Result URL copied to clipboard: ${url}`;
        copyToClipboard(url, message);
      }}
      className="w-full sm:w-auto flex shadow-lg hover:shadow-violet-900 hover:cursor-pointer text-faded-gray hover:text-off-white bg-dark-lake flex-col items-center justify-center px-1 rounded hover:bg-white/10"
    >
      <div className="h-4 w-4">
        <FontAwesomeIcon icon={faShare} />
      </div>
    </button>
  );
}

export function DailyStreak() {
  return (
    <ResultsText
      info="How many days in a row have you played speedtyper.dev"
      title="daily streak"
      value={
        <div className="flex items-center gap-2">
          2
          <div className="hidden sm:flex flex-wrap items-center text-xs gap-1">
            {Array(3)
              .fill(undefined)
              .map((_, i) => {
                const done = i > 0;
                return (
                  <div key={i} className="h-3 w-3">
                    {done ? (
                      <div className="text-violet-400">
                        <FontAwesomeIcon icon={faCheckCircle} />{" "}
                      </div>
                    ) : (
                      <div className="text-faded-gray">
                        <FontAwesomeIcon icon={faCircleXmark} />{" "}
                      </div>
                    )}
                  </div>
                );
              })}
          </div>
        </div>
      }
    />
  );
}

export function ResultsContainer() {
  const result = useGameStore((state) => state.myResult);
  // TODO: Show loading indicator here
  if (!result) return null;
  const cpm = result.cpm;
  const wpm = cpmToWPM(cpm);
  const ms = result.timeMS;
  const time = toHumanReadableTime(Math.floor(ms / 1000));
  const mistakesCount = result.mistakes;
  const accuracy = result.accuracy;
  const base = window.location.origin;
  const url = `${base}/results/${result.id}`;
  return (
    <div className="w-full flex flex-col">
      <div className="w-full flex flex-row gap-4 justify-between mb-2">
        <div className="flex flex-col gap-1 mx-2 w-full">
          <h3 className="px-2 flex color-inherit font-bold text-faded-gray text-sm items-center gap-2">
            <FontAwesomeIcon
              className="h-5 w-5 flex items-center justify-center"
              icon={faSquarePollVertical}
            />
            result
          </h3>
          <div className="w-full grid grid-cols-2 sm:flex sm:flex-row gap-2">
            <ResultsText
              info="words per minute typed in race"
              title="words per minute"
              value={wpm.toString()}
            />
            <ResultsText
              info="Percentage of results on speedtyper.dev this race was faster than"
              title="global rank"
              value={`${result.percentile}%`}
            />
            <ResultsText
              info="% correctly typed characters in race"
              title="accuracy"
              value={`${accuracy}%`}
            />
            <ResultsText
              info="time it took to complete race"
              title="time"
              value={time}
            />
            <ResultsText
              info="number of mistakes made during race"
              title="mistakes"
              value={mistakesCount.toString()}
            />
            {result.id && (
              <div className="flex gap-2">
                <div className="flex sm:flex-col gap-2">
                  <div className="flex grow w-full">
                    <ShareResultButton url={url} />
                  </div>
                  <div className="flex grow w-full">
                    <TweetResult url={url} wpm={cpmToWPM(cpm)} />
                  </div>
                </div>
                <Link href={url}>
                  <a className="flex w-full grow hover:cursor-pointer text-faded-gray hover:text-off-white bg-dark-lake flex-col items-center justify-center rounded hover:bg-white/10 px-2">
                    <div className="h-3 w-3 ">
                      <FontAwesomeIcon icon={faExternalLink} />
                    </div>
                  </a>
                </Link>
              </div>
            )}
          </div>
        </div>
      </div>
      <div className="w-full flex flex-col sm:flex-row">
        {!result.user.isAnonymous ? <TrendsWPM currWPM={wpm} /> : null}
        <ResultsChart />
      </div>
    </div>
  );
}

function TrendsWPM({ currWPM }: { currWPM: number }) {
  const { tenGameWPM, todayWPM, weekWPM, allTimeWPM } = useTrendStore();
  const noResults = !tenGameWPM && !weekWPM && !todayWPM && !allTimeWPM;
  if (noResults) {
    return null;
  }
  return (
    <div className="mx-2 sm:ml-2 sm:mr-0 flex flex-col sm:justify-start gap-1">
      <h3 className="px-2 flex color-inherit font-bold text-faded-gray text-sm items-center gap-2">
        <FontAwesomeIcon
          className="h-5 w-5 flex items-center justify-center"
          icon={faArrowTrendUp}
        />
        average wpm
      </h3>
      <div className="flex flex-col gap-2 h-full sm:mb-2">
        {tenGameWPM ? (
          <HistoryicalResult
            title={"last 10 games"}
            currWPM={currWPM}
            wpm={tenGameWPM}
          />
        ) : null}
        {todayWPM ? (
          <HistoryicalResult title={"today"} currWPM={currWPM} wpm={todayWPM} />
        ) : null}
        {weekWPM ? (
          <HistoryicalResult
            title={"last week"}
            currWPM={currWPM}
            wpm={weekWPM}
          />
        ) : null}
        {allTimeWPM ? (
          <HistoryicalResult
            title={"all time"}
            currWPM={currWPM}
            wpm={allTimeWPM}
          />
        ) : null}
      </div>
    </div>
  );
}

function HistoryicalResult({
  title,
  currWPM,
  wpm,
}: {
  title: string;
  currWPM: number;
  wpm: number;
}) {
  const percentageChange = (currWPM / wpm) * 100 - 100;
  const popover =
    percentageChange > 0
      ? `This race was ${Math.abs(percentageChange).toFixed(
          0
        )}% faster than the average ${title} (wpm)`
      : `This race was ${Math.abs(percentageChange).toFixed(
          0
        )}% slower than the average ${title} (wpm)`;
  return (
    <div
      title={popover}
      className="h-full flex flex-col justify-center px-2 sm:w-[150px] bg-dark-lake rounded p-2 gap-1"
    >
      <p className="flex justify-start color-inherit tracking-wide font-semibold text-off-white text-sm">
        {title}
      </p>
      <div className="flex items-center gap-2 text-faded-gray justify-between">
        <p className="font-bold text-2xl flex">
          {wpm}{" "}
          <span className="flex text-xs flex-col justify-end pl-1">/wpm</span>
        </p>
        <div className="font-bold text-xs flex items-center gap-1">
          {percentageChange > 0 ? (
            <div className="h-2 w-2 text-green-500">
              <FontAwesomeIcon icon={faArrowUp} />
            </div>
          ) : (
            <div className="h-2 w-2 text-red-500">
              <FontAwesomeIcon icon={faArrowDown} />
            </div>
          )}
          {Math.abs(percentageChange).toFixed(0)}%
        </div>
      </div>
    </div>
  );
}


================================================
FILE: packages/webapp-next/modules/play2/hooks/useChallenge.ts
================================================
import { useEffect, useState } from "react";
import SocketLatest from "../../../common/services/Socket";
import { useCodeStore } from "../state/code-store";
import { useConnectionStore } from "../state/connection-store";

export interface ChallengeInfo {
  code: string;
  filePath: string;
  language: string;
  url: string;
  projectName: string;
  license: string;
}

export function useChallenge(): ChallengeInfo {
  const initialize = useCodeStore((state) => state.initialize);
  const [challenge, setChallenge] = useState({
    loaded: false,
    code: "",
    filePath: "",
    language: "",
    url: "",
    projectName: "",
    license: "",
  });

  const socket = useConnectionStore((s) => s.socket);

  useEffect(() => {
    socket?.subscribe("challenge_selected", (_, challenge) => {
      setChallenge({
        loaded: true,
        projectName: challenge.project.fullName,
        url: challenge.url,
        code: challenge.content,
        language: challenge.project.language,
        filePath: challenge.path,
        license: challenge.project.licenseName,
      });
      initialize(challenge.content.replaceAll("\t", "  "));
    });
    socket?.subscribe("race_joined", (_, raceData) => {
      const { challenge } = raceData;
      setChallenge({
        loaded: true,
        projectName: challenge.project.fullName,
        url: challenge.url,
        code: challenge.content,
        language: challenge.project.language,
        filePath: challenge.path,
        license: challenge.project.licenseName,
      });
      initialize(challenge.content.replaceAll("\t", "  "));
    });
  }, [socket, initialize]);

  return challenge;
}


================================================
FILE: packages/webapp-next/modules/play2/hooks/useEndGame.ts
================================================
import { useEffect } from "react";
import { useIsPlaying } from "../../../common/hooks/useIsPlaying";
import { useCodeStore } from "../state/code-store";
import { useIsCompleted } from "./useIsCompleted";

export function useEndGame() {
  const endGame = useCodeStore((state) => state.end);
  const isCompleted = useIsCompleted();
  const isPlaying = useIsPlaying();
  useEffect(() => {
    if (isCompleted && isPlaying) {
      endGame();
    }
  }, [endGame, isPlaying, isCompleted]);
}


================================================
FILE: packages/webapp-next/modules/play2/hooks/useFocusRef.ts
================================================
import { useCallback, useEffect, useState } from "react";

export function useFocusRef<T extends HTMLElement>(): [
  (node: T) => void,
  () => void
] {
  const [node, setNode] = useState<T>();
  const triggerFocus = useCallback(() => {
    if (!node) return;
    node?.focus();
  }, [node]);

  useEffect(() => {
    triggerFocus();
  }, [triggerFocus]);

  return [setNode, triggerFocus];
}


================================================
FILE: packages/webapp-next/modules/play2/hooks/useGame.ts
================================================
import { useMemo } from "react";
import { Game } from "../services/Game";
import { useConnectionStore } from "../state/connection-store";
import { useInitialRaceIdQueryParam } from "./useGameIdQueryParam";

export const useGame = () => {
  const raceIdQueryParam = useInitialRaceIdQueryParam();
  const socket = useConnectionStore((s) => s.socket);
  return useMemo(
    () => socket && new Game(socket, raceIdQueryParam),
    [socket, raceIdQueryParam]
  );
};


================================================
FILE: packages/webapp-next/modules/play2/hooks/useGameIdQueryParam.ts
================================================
import { useRouter } from "next/router";

export function useInitialRaceIdQueryParam(): string | undefined {
  var router = useRouter();
  var id = router.query["id"];
  return typeof id === "string" ? id : undefined;
}


================================================
FILE: packages/webapp-next/modules/play2/hooks/useIsCompleted.ts
================================================
import { useCodeStore } from "../state/code-store";

export const useIsCompleted = () => {
  useCodeStore((state) => state.correctIndex);
  return useCodeStore((state) => state.isCompleted)();
};


================================================
FILE: packages/webapp-next/modules/play2/hooks/useNodeRect.ts
================================================
import { useEffect, useState } from "react";

interface IRect {
  top: number;
  left: number;
}

export function useNodeRect<T extends HTMLElement>(
  refreshValue: string
): [IRect, (node: T) => void] {
  const [node, setNode] = useState<T>();
  const [rect, setRect] = useState({
    top: 0,
    left: 0,
  });
  const top = node?.offsetTop ?? 0;
  const left = node?.offsetLeft ?? 0;
  useEffect(() => {
    if (!node) return;
    setRect({
      top,
      left,
    });
  }, [node, top, left, refreshValue]);
  return [rect, setNode];
}


================================================
FILE: packages/webapp-next/modules/play2/hooks/useResetStateOnUnmount.ts
================================================
import { useEffect } from "react";
import { useCodeStore } from "../state/code-store";

export function useResetStateOnUnmount() {
  const initialize = useCodeStore((state) => state.initialize);
  useEffect(() => {
    return () => {
      initialize("");
    };
  }, [initialize]);
}


================================================
FILE: packages/webapp-next/modules/play2/services/Game.ts
================================================
import SocketLatest from "../../../common/services/Socket";
import { useUserStore } from "../../../common/state/user-store";
import { KeyStroke, useCodeStore } from "../state/code-store";
import { useConnectionStore } from "../state/connection-store";
import { RacePlayer, RaceResult, useGameStore } from "../state/game-store";
import { useSettingsStore } from "../state/settings-store";

export class Game {
  onConnectHasRun: boolean;
  onConnect(raceId?: string) {
    this.socket.socket.on("connect", () => {
      if (this.onConnectHasRun) return;
      console.log("registering all the things");
      this.listenForRaceJoined();
      this.listenForRaceStarted();
      this.listenForMemberJoined();
      this.listenForCountdown();
      this.listenForMemberLeft();
      this.listenForProgressUpdated();
      this.listenForRaceCompleted();
      this.listenForRaceDoesNotExist();
      this.listenForDisconnect();
      this.socket.subscribe("challenge_selected", (_) => {
        useGameStore.setState((game) => {
          return {
            ...game,
            results: {},
            myResult: undefined,
          };
        });
      });
      if (!raceId) {
        this.play();
      } else if (this.id !== raceId) {
        this.join(raceId);
      }
      this.onConnectHasRun = true;
    });
  }
  constructor(private socket: SocketLatest, raceId?: string) {
    this.initializeConnectedState(socket);
    this.onConnectHasRun = false;
    this.onConnect(raceId);
  }

  reconnect() {
    this.socket.socket.disconnect();
    this.socket.socket.connect();
    this.join(this.id ?? "");
  }

  get id() {
    return useGameStore.getState().id;
  }

  start() {
    this.socket.emit("start_race");
  }

  sendKeyStroke(keyStroke: KeyStroke) {
    this.socket.emit("key_stroke", keyStroke);
  }

  next() {
    const connectedToValidRace =
      useConnectionStore.getState().raceExistsInServer;
    if (connectedToValidRace) {
      const language = useSettingsStore.getState().languageSelected?.language;
      const dto = { language };
      this.socket.emit("refresh_challenge", dto);
    } else {
      this.play();
    }
  }

  join(id: string) {
    this.socket.emit("join", id);
  }

  play() {
    const isPublic = useSettingsStore.getState().defaultIsPublic;
    const language = useSettingsStore.getState().languageSelected?.language;
    const dto = { language, isPublic };
    this.socket.emit("play", dto);
  }

  private listenForRaceStarted() {
    this.socket.subscribe("race_started", (_, time: string) => {
      useCodeStore.setState((codeState) => ({
        ...codeState,
        startTime: new Date(time),
      }));
      useGameStore.setState((state) => ({
        ...state,
        countdown: undefined,
      }));
    });
  }

  private listenForRaceJoined() {
    this.socket.subscribe("race_joined", (_, race) => {
      useConnectionStore.setState((s) => ({ ...s, isConnected: true }));
      useGameStore.setState((game) => ({
        ...game,
        id: race.id,
        owner: race.owner,
        members: race.members,
        countdown: undefined,
      }));
      useConnectionStore.setState((state) => ({
        ...state,
        raceExistsInServer: true,
      }));
      useSettingsStore.setState((s) => ({ ...s, raceIsPublic: race.isPublic }));
    });
  }

  private listenForCountdown() {
    this.socket.subscribe("countdown", (_, countdown: number) => {
      useGameStore.setState((state) => ({
        ...state,
        countdown,
      }));
    });
  }

  private listenForMemberJoined() {
    this.socket.subscribe("member_joined", (_, member: RacePlayer) => {
      console.log("member_joined", member);
      this.updateMemberInState(member);
    });
  }

  private listenForMemberLeft() {
    this.socket.subscribe("member_left", (_, { member, owner }) => {
      useGameStore.setState((game) => {
        const members = { ...game.members };
        delete members[member];
        return {
          ...game,
          owner,
          members,
        };
      });
    });
  }

  private listenForProgressUpdated() {
    this.socket.subscribe("progress_updated", (_, member: RacePlayer) => {
      this.updateMemberInState(member);
    });
  }

  private listenForRaceCompleted() {
    this.socket.subscribe("race_completed", (_, result: RaceResult) => {
      console.log(result)
      const userId = useUserStore.getState().id;
      const isMyResult = userId === result.user.id;
      useGameStore.setState((game) => {
        const results = {
          ...game.results,
          [result.user.id]: result,
        };
        return {
          ...game,
          results,
          myResult: isMyResult ? result : game.myResult,
        };
      });
    });
  }

  private updateMemberInState(member: RacePlayer) {
    useGameStore.setState((game) => {
      const members = { ...game.members };
      members[member.id] = member;
      return {
        ...game,
        members,
      };
    });
  }

  private listenForRaceDoesNotExist() {
    this.socket.subscribe("race_does_not_exist", (_, id) => {
      console.log("race_does_not_exist", id);
      useConnectionStore.setState((state) => ({
        ...state,
        raceExistsInServer: false,
      }));
    });
  }

  private listenForDisconnect() {
    this.socket.subscribe("disconnect", (_, _data) => {
      useGameStore.setState((game) => {
        return {
          ...game,
          connected: false,
        };
      });
    });
  }
  private initializeConnectedState(socket: SocketLatest) {
    const connected = socket.socket.connected;
    useGameStore.setState((game) => {
      return {
        ...game,
        connected,
        game: this,
      };
    });
  }
}


================================================
FILE: packages/webapp-next/modules/play2/state/code-store.ts
================================================
import create from "zustand";
import { cpmToWPM } from "../../../common/utils/cpmToWPM";

export interface KeyStroke {
  key: string;
  timestamp: number;
  index: number;
  correct: boolean;
}

interface CodeState {
  // Match state
  startTime?: Date;
  endTime?: Date;
  keyStrokes: KeyStroke[];
  // TODO: Can we move match state to GameState
  // perhaps start and end time can be set from backend events
  start: () => void;
  end: () => void;
  isPlaying: () => boolean;
  getChartWPM: () => number[];
  _getValidKeyStrokes: () => KeyStroke[];
  _getIncorrectKeyStrokes: () => KeyStroke[];

  // Code rendering state
  code: string;
  index: number;
  correctIndex: number;
  correctChars: () => string;
  incorrectChars: () => string;
  currentChar: () => string;
  untypedChars: () => string;
  initialize: (code: string) => void;
  handleBackspace: () => void;
  handleKeyPress: (keyStroke: KeyStroke) => void;
  keyPressFactory: (key: string) => KeyStroke;
  isCompleted: () => boolean;
  correctInput: () => string;
  // private helper methods
  _getBackspaceOffset: () => number;
  _getForwardOffset: () => number;
  _allCharsTyped: () => boolean;
}

// There are 3 separate parts of logic in this store
// 1. Code rendering logic which is necessary to render the code strings
// 2. Match logic which concerns itself with maintaining the match
// 3. Results logic which shows data after the race
// Match logic depends on code rendering logic.
// Results logic depends on Match logic.
// Perhaps Match and results logic could be split into a separate store
// But this was a bit simpler as we can just push to keyStrokes from the handleKeyPress method
// The other option would be to pass in the saveKeyStroke method into the handleKeyPress method

export const useCodeStore = create<CodeState>((set, get) => ({
  // RESULTS logic
  getChartWPM: () => {
    const startTime = get().startTime?.getTime();
    if (!startTime) {
      return [];
    }
    const wpm = [];
    let count = 0;
    let seconds = 1;
    const validKeyStrokes = get()._getValidKeyStrokes();

    for (let i = 0; i < validKeyStrokes.length; i++) {
      const keyStroke = validKeyStrokes[i];
      const breaktime = startTime + seconds * 1000;
      const isLastKeyStroke = i === validKeyStrokes.length - 1;
      const diffMS = keyStroke.timestamp - breaktime;
      const diffSeconds = diffMS / 1000;
      if (keyStroke.timestamp > breaktime) {
        // If more than a second has passed since the last WPM calculation
        // we push another WPM calculation to the array
        const cpm = Math.floor((60 * count) / (seconds + diffSeconds));
        wpm.push(cpmToWPM(cpm));
        seconds++;
      } else if (isLastKeyStroke) {
        // if this is the last keystroke in the valid keystrokes array
        // we push the last uncounted characters as CPM to the array
        // even if we have not passed a full second
        const cpm = Math.floor((60 * count) / (seconds + diffSeconds));
        wpm.push(cpmToWPM(cpm));
        seconds++;
      }
      count++;
    }
    return wpm;
  },
  // BUG: this suffers from the same bug as backend used to suffer from.
  // It's not as bad because it's used only to render the chart
  // See: RacePlayer.validKeyStrokes()
  // we should completely remove this method and rely on the backend to get the valid keystrokes
  // this way we only need the calculation in one place
  _getValidKeyStrokes: () => {
    const keyStrokes = get().keyStrokes;
    const validKeyStrokes = Object.values(
      Object.fromEntries(
        keyStrokes
          .filter((stroke) => stroke.correct)
          .map((keyStroke) => [keyStroke.index, keyStroke])
      )
    );
    return validKeyStrokes;
  },
  _getIncorrectKeyStrokes: () => {
    const keyStrokes = get().keyStrokes;
    return keyStrokes.filter((stroke) => !stroke.correct);
  },
  // MATCH logic
  keyStrokes: [],
  incorrectKeyStrokes: [],
  start: () => {
    set((state) => {
      return { ...state, startTime: new Date() };
    });
  },
  end: () => {
    set((state) => {
      return { ...state, endTime: new Date() };
    });
  },
  isPlaying: () => {
    return !!get().startTime && !get().endTime;
  },

  // CODE rendering logic
  code: "",
  index: 0,
  correctIndex: 0,
  initialize: (code: string) => {
    set((state) => ({
      ...state,
      code,
      index: 0,
      correctIndex: 0,
      startTime: undefined,
      endTime: undefined,
      chars: [],
      keyStrokes: [],
    }));
  },
  handleBackspace: () => {
    set((state) => {
      const offset = state._getBackspaceOffset();
      const index = Math.max(state.index - offset, 0);
      const correctIndex = Math.min(index, state.correctIndex);
      return { ...state, index, correctIndex };
    });
  },
  keyPressFactory: (unparsedKey: string) => {
    const key = parseKey(unparsedKey);
    const offset = get()._getForwardOffset();
    const index = Math.min(offset + get().index, get().code.length);
    // BUG: "correct" below is a bug
    // if index i-1 is not correct this calculation can evaluate index i to be correct
    // this is addressed in the backend but should also be fixed here...
    // or perhaps removed compleptely and we can rely on the backend calculation with appropriate text coverage
    const correct =
      get().index === get().correctIndex && key === get().code[get().index];
    const keyStroke = {
      key,
      index,
      timestamp: new Date().getTime(),
      correct,
    };
    return keyStroke;
  },
  handleKeyPress: (keyStroke: KeyStroke) => {
    set((state) => {
      if (isSkippable(keyStroke.key)) return state;
      if (state._allCharsTyped()) return state;
      const index = keyStroke.index;
      const correctIndex = !keyStroke.correct ? state.correctIndex : index;
      state.keyStrokes.push(keyStroke);
      return { ...state, index, correctIndex };
    });
  },
  correctChars: () => {
    return get().code.slice(0, get().correctIndex);
  },
  currentChar: () => {
    if (get().code.length <= get().index) {
      return "";
    }
    return get().code[get().index];
  },
  incorrectChars: () => {
    if (get().code.length <= get().index) {
      return get().code.slice(get().correctIndex);
    }
    return get().code.slice(get().correctIndex, get().index);
  },
  untypedChars: () => {
    if (get().code.length <= get().index) {
      return "";
    }
    return get().code.slice(get().index + 1);
  },
  correctInput: () => {
    return get().code.substring(0, get().correctIndex);
  },
  isCompleted: () => {
    return get().correctIndex > 0 && get().correctIndex === get().code.length;
  },
  _allCharsTyped: () => {
    return get().index === get().code.length;
  },
  _getForwardOffset: () => {
    let offset = 1;

    // if current char is a line break \n:
    if (isLineBreak(get().currentChar())) {
      // skip repeated spaces
      while (get().code[get().index + offset] === " ") {
        offset++;
      }
    }

    // TODO: move this logic to parsing in order to remove too many spaces
    // if next char and next next char are going to be a space:
    // else if (
    //   isSpace(get().code[get().index + 1]) &&
    //   isSpace(get().code[get().index + 2])
    // ) {
    //   // skip repeated spaces
    //   while (get().code[get().index + offset] === " ") {
    //     offset++;
    //   }
    // }

    return offset;
  },
  _getBackspaceOffset: () => {
    let offset = 1;
    // if previous char and previous previous char is a space:
    if (
      get().code[get().index - 1] === " " &&
      get().code[get().index - 2] === " "
    ) {
      while (get().code[get().index - offset] === " ") {
        offset++;
      }
    }
    return offset;
  },
}));

export enum TrackedKeys {
  Backspace = "Backspace",
}

function isLineBreak(key: string) {
  return key === "\n";
}

function parseKey(key: string) {
  switch (key) {
    case "Enter":
      return "\n";
    default:
      return key;
  }
}

export function isSkippable(key: string) {
  switch (key) {
    case "Shift":
    case "OS":
    case "Control":
      return true;
    default:
      return false;
  }
}


================================================
FILE: packages/webapp-next/modules/play2/state/connection-store.ts
================================================
import { useCallback, useEffect } from "react";
import create from "zustand";
import { fetchRaceStatus } from "../../../common/api/races";
import SocketLatest from "../../../common/services/Socket";
import { updateUserInStore } from "../../../common/state/user-store";
import { useGameStore } from "./game-store";

export interface ConnectionState {
  isConnected: boolean;
  raceExistsInServer: boolean;
  alreadyPlaying: boolean;
  socket?: SocketLatest;
}

export const useConnectionStore = create<ConnectionState>((_set, _get) => ({
  isConnected: true,
  raceExistsInServer: true,
  alreadyPlaying: false,
}));

export const refreshRaceState = async (raceId: string) => {
  fetchRaceStatus(raceId).then(({ ok }) => {
    useConnectionStore.setState((state) => ({
      ...state,
      raceExistsInServer: ok,
    }));
  });
};

export const useRefreshRaceStatus = () => {
  const raceId = useGameStore((state) => state.id);
  useEffect(() => {
    if (raceId) {
      fetchRaceStatus(raceId);
    }
  }, [raceId]);
};

export const setRaceExists = () => {
  useConnectionStore.setState((state) => ({
    ...state,
    raceExistsInServer: true,
  }));
};

export const useConnectionManager = () => {
  const socket = useConnectionStore((s) => s.socket);
  const isConnected = useConnectionStore((state) => state.isConnected);
  const raceId = useGameStore((state) => state.id);
  const onConnect = useCallback(
    (_err: string | null, _msg: string) => {
      useConnectionStore.setState((state) => ({ ...state, isConnected: true }));
      if (raceId && !isConnected) {
        fetchRaceStatus(raceId).then(({ ok }) => {
          const currentRaceID = useGameStore.getState().id;
          const raceExistsInServer = raceId !== currentRaceID || ok;
          useConnectionStore.setState((state) => ({
            ...state,
            raceExistsInServer,
          }));
        });
        updateUserInStore();
      }
    },
    [isConnected, raceId]
  );
  useEffect(() => {
    const onAlreadyPlaying = () => {
      console.log("alreadyPlaying received");
      useConnectionStore.setState((state) => ({
        ...state,
        alreadyPlaying: true,
      }));
    };
    const onDisconnect = (_err: string | null, _msg: string) => {
      useConnectionStore.setState((state) => ({
        ...state,
        isConnected: false,
      }));
    };
    socket?.subscribe("already_playing", onAlreadyPlaying);
    socket?.subscribe("connect_error", onDisconnect);
    socket?.subscribe("disconnect", onDisconnect);
    socket?.subscribe("connect", onConnect);
  }, [socket, onConnect]);
};


================================================
FILE: packages/webapp-next/modules/play2/state/game-store.ts
================================================
import create from "zustand";
import { User, useUserStore } from "../../../common/state/user-store";
import { Game } from "../services/Game";
import { useCodeStore } from "./code-store";
import { useHasOpenModal } from "./settings-store";

export interface GameState {
  id?: string;
  owner?: string;
  members: Record<string, RacePlayer>;
  results: Record<string, RaceResult>;
  myResult?: RaceResult;
  countdown?: number;
  game?: Game;
}

export interface RacePlayer {
  id: string;
  username: string;
  progress: number;
  recentlyTypedLiteral: string;
}

export interface RaceResult {
  id: string;
  raceId: string;
  timeMS: number;
  cpm: number;
  mistakes: number;
  accuracy: number;
  createdAt: Date;
  user: User;
  userId: string;
  percentile?: number;
}

export const useGameStore = create<GameState>((_set, _get) => ({
  members: {},
  results: {},
}));

export const useCanType = () => {
  const hasOpenModal = useHasOpenModal();
  const game = useGameStore((s) => s.game);
  const isMultiplayer = useIsMultiplayer();
  const hasStartTime = useCodeStore((state) => state.startTime);
  return (
    (!hasOpenModal && !!game && !isMultiplayer) ||
    (!hasOpenModal && hasStartTime)
  );
};

export const useIsMultiplayer = () => {
  const members = useGameStore((state) => state.members);
  return Object.values(members).length > 1;
};

export const useIsOwner = () => {
  const userId = useUserStore((state) => state.id);
  const owner = useGameStore((state) => state.owner);
  return userId === owner;
};


================================================
FILE: packages/webapp-next/modules/play2/state/settings-store.ts
================================================
import create from "zustand";
import { getExperimentalServerUrl } from "../../../common/utils/getServerUrl";

export interface LanguageDTO {
  language: string;
  name: string;
}

export interface SettingsState {
  settingsModalIsOpen: boolean;
  languageModalIsOpen: boolean;
  leaderboardModalIsOpen: boolean;
  profileModalIsOpen: boolean;
  projectModalIsOpen: boolean;
  publicRacesModalIsOpen: boolean;
  languageSelected: LanguageDTO | null;
  smoothCaret: boolean;
  syntaxHighlighting: boolean;
  raceIsPublic: boolean;
  defaultIsPublic: boolean;
}

const SYNTAX_HIGHLIGHTING_KEY = "syntaxHighlighting";

const SMOOTH_CARET_KEY = "smoothCaret";

const DEFAULT_RACE_IS_PUBLIC_KEY = "defaultRaceIsPublic2";

const LANGUAGE_KEY = "language";

function getInitialToggleStateFromLocalStorage(
  key: string,
  defaultToggleValue: boolean
): boolean {
  if (typeof document !== "undefined" && window) {
    let toggleStateStr = localStorage.getItem(key);
    if (!toggleStateStr) {
      localStorage.setItem(key, defaultToggleValue.toString());
      toggleStateStr = defaultToggleValue.toString();
    }
    return toggleStateStr === "true" ?? false;
  }
  return defaultToggleValue;
}

function getInitialLanguageFromLocalStorage(key: string): LanguageDTO | null {
  if (typeof document !== "undefined" && window) {
    let languageStr = localStorage.getItem(key) ?? "";
    let lang;
    try {
      lang = JSON.parse(languageStr);
    } catch (e) {}
    if (!lang?.language || !lang?.name) {
      return null;
    }
    return lang;
  }
  return null;
}

export const useSettingsStore = create<SettingsState>((_set, _get) => ({
  settingsModalIsOpen: false,
  languageModalIsOpen: false,
  leaderboardModalIsOpen: false,
  profileModalIsOpen: false,
  publicRacesModalIsOpen: false,
  projectModalIsOpen: false,
  smoothCaret: getInitialToggleStateFromLocalStorage(SMOOTH_CARET_KEY, false),
  syntaxHighlighting: getInitialToggleStateFromLocalStorage(
    SYNTAX_HIGHLIGHTING_KEY,
    false
  ),
  raceIsPublic: false,
  defaultIsPublic: getInitialToggleStateFromLocalStorage(
    DEFAULT_RACE_IS_PUBLIC_KEY,
    false
  ),
  languageSelected: getInitialLanguageFromLocalStorage(LANGUAGE_KEY),
}));

export const setCaretType = (caretType: "smooth" | "block") => {
  const smoothCaret = caretType === "smooth";
  localStorage.setItem(SMOOTH_CARET_KEY, smoothCaret.toString());
  useSettingsStore.setState((state) => ({ ...state, smoothCaret }));
};

export const setLanguage = (language: LanguageDTO | null) => {
  let stored = "";
  if (language) {
    stored = JSON.stringify(language);
  }
  localStorage.setItem(LANGUAGE_KEY, stored);
  useSettingsStore.setState((state) => ({
    ...state,
    languageSelected: language,
  }));
};

export const toggleDefaultRaceIsPublic = () => {
  const booleanStrValue = localStorage.getItem(DEFAULT_RACE_IS_PUBLIC_KEY);
  let defaultIsPublic = booleanStrValue === "true";
  defaultIsPublic = !defaultIsPublic;
  localStorage.setItem(DEFAULT_RACE_IS_PUBLIC_KEY, defaultIsPublic.toString());
  useSettingsStore.setState((state) => ({ ...state, defaultIsPublic }));
};

export const toggleSyntaxHighlightning = () => {
  const syntaxHighlightingStr = localStorage.getItem(SYNTAX_HIGHLIGHTING_KEY);
  let syntaxHighlighting = syntaxHighlightingStr === "true";
  syntaxHighlighting = !syntaxHighlighting;
  localStorage.setItem(SYNTAX_HIGHLIGHTING_KEY, syntaxHighlighting.toString());
  useSettingsStore.setState((state) => ({ ...state, syntaxHighlighting }));
};

export const openSettingsModal = () => {
  if (useSettingsStore.getState().profileModalIsOpen) return;
  if (useSettingsStore.getState().leaderboardModalIsOpen) return;
  useSettingsStore.setState((s) => ({
    ...s,
    settingsModalIsOpen: true,
  }));
};

export const openLanguageModal = () => {
  if (useSettingsStore.getState().profileModalIsOpen) return;
  if (useSettingsStore.getState().leaderboardModalIsOpen) return;
  useSettingsStore.setState((s) => ({
    ...s,
    languageModalIsOpen: true,
  }));
};

export const openProfileModal = () => {
  useSettingsStore.setState((s) => ({
    ...s,
    profileModalIsOpen: true,
  }));
};

export const openLeaderboardModal = () => {
  if (useSettingsStore.getState().settingsModalIsOpen) return;
  useSettingsStore.setState((s) => ({
    ...s,
    leaderboardModalIsOpen: true,
  }));
};

export const openPublicRacesModal = () => {
  if (useSettingsStore.getState().settingsModalIsOpen) return;
  useSettingsStore.setState((s) => ({
    ...s,
    publicRacesModalIsOpen: true,
  }));
};

export const openProjectModal = () => {
  useSettingsStore.setState((s) => ({
    ...s,
    projectModalIsOpen: true,
  }));
};

export const useHasOpenModal = () => {
  const leaderboardModalIsOpen = useSettingsStore(
    (s) => s.leaderboardModalIsOpen
  );
  const settingsModalIsOpen = useSettingsStore((s) => s.settingsModalIsOpen);
  return leaderboardModalIsOpen || settingsModalIsOpen;
};

export const closeModals = () => {
  useSettingsStore.setState((s) => ({
    ...s,
    settingsModalIsOpen: false,
    leaderboardModalIsOpen: false,
    profileModalIsOpen: false,
    publicRacesModalIsOpen: false,
    languageModalIsOpen: false,
    projectModalIsOpen: false,
  }));
};

export const toggleRaceIsPublic = () => {
  const baseUrl = getExperimentalServerUrl();
  const url = baseUrl + "/api/races/online";
  fetch(url, {
    method: "POST",
    credentials: "include",
  }).then((res) =>
    res.json().then(({ isPublic: raceIsPublic }) => {
      useSettingsStore.setState((s) => ({ ...s, raceIsPublic }));
    })
  );
};


================================================
FILE: packages/webapp-next/modules/play2/state/trends-store.ts
================================================
import create from "zustand";
import { useUserStore } from "../../../common/state/user-store";
import { cpmToWPM } from "../../../common/utils/cpmToWPM";
import { getExperimentalServerUrl } from "../../../common/utils/getServerUrl";

export interface TrendsState {
  tenGameWPM: number | null;
  todayWPM: number | null;
  weekWPM: number | null;
  allTimeWPM: number | null;
}

export const useTrendStore = create<TrendsState>((_set, _get) => ({
  tenGameWPM: null,
  todayWPM: null,
  weekWPM: null,
  allTimeWPM: null,
}));

export const refreshTrends = () => {
  const isAnonymous = useUserStore.getState().isAnonymous;
  if (isAnonymous) {
    return;
  }
  const baseUrl = getExperimentalServerUrl();
  const url = baseUrl + "/api/results/stats";
  fetch(url, {
    credentials: "include",
  }).then((res) =>
    res.json().then(({ cpmLast10, cpmToday, cpmLastWeek, cpmAllTime }) => {
      useTrendStore.setState(() => ({
        tenGameWPM: cpmToWPM(cpmLast10),
        todayWPM: cpmToWPM(cpmToday),
        weekWPM: cpmToWPM(cpmLastWeek),
        allTimeWPM: cpmToWPM(cpmAllTime),
      }));
    })
  );
};


================================================
FILE: packages/webapp-next/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  swcMinify: true,
  images: {
    domains: ["avatars.githubusercontent.com"],
  },
  publicRuntimeConfig: {
    isProduction: process.env.NODE_ENV === "production",
    title: "speedtyper.dev | Typing Practice For Programmers | Typing races",
    description:
      "speedtyper.dev is a typing application for programmers. Battle against other developers by typing challenges from real open source projects as fast as possible. Practice your typing to become a faster and more accurate programmer by practicing typing actual code sequences and symbols that are hard to find on the keyboard.",
    lastBuilt: Date.now(),
    siteRoot:
      process.env.NODE_ENV === "production"
        ? "https://speedtyper.dev"
        : "http://localhost:3001",
    serverUrl:
      process.env.NODE_ENV === "production"
        ? "https://v2.speedtyper.dev"
        : "http://localhost:5001",
    experimentalServerUrl:
      process.env.NODE_ENV === "production"
        ? "https://v3.speedtyper.dev"
        : "http://localhost:1337",
  },
};

module.exports = nextConfig;


================================================
FILE: packages/webapp-next/package.json
================================================
{
  "name": "webapp2",
  "version": "0.1.0",
  "private": true,
  "packageManager": "yarn@1.22.21",
  "engines": {
    "yarn": "^1.22.21"
  },
  "scripts": {
    "dev": "next dev -p 3001",
    "build:css": "postcss tailwind.css -o tailwind.min.css",
    "build": "next build",
    "start": "next start",
    "export": "next export",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-brands-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@headlessui/react": "^1.7.11",
    "chart.js": "^3.9.1",
    "date-fns": "^2.29.2",
    "framer-motion": "^7.5.1",
    "highlight.js": "^11.6.0",
    "ky": "^0.31.3",
    "ky-universal": "^0.10.1",
    "next": "12.2.5",
    "nextjs-progressbar": "^0.0.15",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-switch": "^7.0.0",
    "react-toastify": "^9.0.8",
    "sharp": "^0.31.1",
    "socket.io-client": "^2",
    "socketio-latest": "npm:socket.io-client",
    "swr": "^2.0.3",
    "zustand": "^4.1.1"
  },
  "devDependencies": {
    "@types/node": "18.7.14",
    "@types/react": "18.0.18",
    "@types/react-dom": "18.0.6",
    "@types/socket.io-client": "^1.4.36",
    "autoprefixer": "^10.4.8",
    "eslint": "8.23.0",
    "eslint-config-next": "12.2.5",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "postcss": "^8.4.16",
    "postcss-cli": "^10.0.0",
    "prettier": "2.7.1",
    "tailwindcss": "^3.1.8",
    "typescript": "4.8.2"
  }
}


================================================
FILE: packages/webapp-next/pages/404.tsx
================================================
import React from "react";

const NotFoundPage = () => (
  <div>
    <h1 className="text-off-white">
      404 - Oh no! We could not find that page! :(
    </h1>
  </div>
);

export default NotFoundPage;


================================================
FILE: packages/webapp-next/pages/_app.tsx
================================================
import "../styles/globals.css";

import type { AppProps } from "next/app";
import Head from "next/head";
import NextNProgress from "nextjs-progressbar";
import { Layout } from "../common/components/Layout";
import { Stream } from "../components/Stream";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTiktok } from "@fortawesome/free-brands-svg-icons";
import { useIsPlaying } from "../common/hooks/useIsPlaying";
import { IconProp } from "@fortawesome/fontawesome-svg-core";

function MyApp({ Component, pageProps }: AppProps) {
  const title = "SpeedTyper.dev | Typing practice for programmers";
  const isPlaying = useIsPlaying();
  const isPlayingCss = isPlaying ? "hidden" : "";
  return (
    <>
      <div
        style={{
          height: "100vh",
          display: "grid",
          gridTemplateRows: "auto 1fr auto",
        }}
      >
        <Head>
          <title>{title}</title>
          <meta property="og:title" content={title} />
          <meta charSet="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <meta
            name="keywords"
            content="typing practice, coding speed, programming speed, code faster, speed coding, coding practice, coding tutor, programming tutor, coding games, learn programming, learn coding, typing tutor, typing competition for programmers, typing challenges for programmers, programming competitions, coding competitions, programming challenges, open source coding competitions"
          />
          <meta
            name="description"
            content="speedtyper.dev is a typing application for programmers. Battle against other developers by typing challenges from real open source projects as fast as possible. Practice your typing to become a faster and more accurate programmer by practicing typing actual code sequences and symbols that are hard to find on the keyboard."
          />
          <meta
            property="og:description"
            content="speedtyper.dev is a typing application for programmers. Battle against other developers by typing challenges from real open source projects as fast as possible. Practice your typing to become a faster and more accurate programmer by practicing typing actual code sequences and symbols that are hard to find on the keyboard."
          />
          <meta property="og:image:type" content="image/png" />
          <meta property="og:image:width" content="1024" />
          <meta property="og:image:height" content="1024" />
          <meta property="og:type" content="website" />
          <meta property="og:url" content="https://speedtyper.dev" />
          <link rel="icon" href="/favicon.ico" />
          <script
            async
            src="https://umami-production-7f33.up.railway.app/script.js"
            data-website-id="ed902c85-74a2-427f-a554-520fdf0925e5"
          ></script>
        </Head>
        <NextNProgress
          options={{ showSpinner: false }}
          color="#d6bbfa"
          height={2}
        />
        <Layout>
          <Component {...pageProps} />
        </Layout>
        <Stream />
      </div>

      <div className="absolute bottom-0 mb-12 sm:mb-24 flex w-full justify-center">
        <a
          data-umami-event="TikTok Banner - Click"
          href="https://www.tiktok.com/tag/speedtyperdev"
          target="_blank"
          className={`${isPlayingCss} border border-gray-400 rounded-lg p-4 flex gap-2 items-center hover:border-purple-400 transition-all hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-purple-400 hover:to-fuchsia-700`}
          rel="noreferrer"
        >
          <FontAwesomeIcon
            className="w-5 text-lg text-white"
            icon={faTiktok as IconProp}
          />
          <span className="text-white">create & watch</span>
          <span className="md:font-semibold hidden sm:inline">
            #speedtyperdev
          </span>
          <span className="hidden sm:inline text-white">TikToks</span>
        </a>
      </div>
    </>
  );
}

export default MyApp;


================================================
FILE: packages/webapp-next/pages/_document.tsx
================================================
import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx: any) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <script>0</script>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;


================================================
FILE: packages/webapp-next/pages/index.tsx
================================================
import { AnimatePresence, motion } from "framer-motion";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";
import { useSocket } from "../common/hooks/useSocket";
import { Keys, useKeyMap } from "../hooks/useKeyMap";
import { CodeTypingContainer } from "../modules/play2/containers/CodeTypingContainer";
import { useGame } from "../modules/play2/hooks/useGame";
import { useIsCompleted } from "../modules/play2/hooks/useIsCompleted";
import { ResultsContainer } from "../modules/play2/containers/ResultsContainer";
import { useUser } from "../common/api/user";
import { useChallenge } from "../modules/play2/hooks/useChallenge";
import { useEndGame } from "../modules/play2/hooks/useEndGame";
import { useResetStateOnUnmount } from "../modules/play2/hooks/useResetStateOnUnmount";
import { PlayFooter } from "../modules/play2/components/play-footer/PlayFooter";
import { PlayHeader } from "../modules/play2/components/play-header/PlayHeader";
import { useInitializeUserStore } from "../common/state/user-store";
import { useCallback, useEffect, useState } from "react";
import { useConnectionManager } from "../modules/play2/state/connection-store";
import {
  closeModals,
  useHasOpenModal,
  useSettingsStore,
} from "../modules/play2/state/settings-store";
import { useIsPlaying } from "../common/hooks/useIsPlaying";
import { refreshTrends } from "../modules/play2/state/trends-store";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLock } from "@fortawesome/free-solid-svg-icons";

export const config = { runtime: "experimental-edge" };

function Play2Page() {
  const user = useUser();
  useInitializeUserStore(user);
  const isCompleted = useIsCompleted();
  const isPlaying = useIsPlaying();
  useSocket();
  useConnectionManager();
  const hasOpenModal = useHasOpenModal();
  const game = useGame();
  const challenge = useChallenge();
  const [isThrottled, setIsThrottled] = useState(false);
  const { capsLockActive } = useKeyMap(
    true,
    Keys.Tab,
    useCallback(() => {
      if (isThrottled) return;
      if (hasOpenModal) return;
      game?.next();
      setIsThrottled(true);
      setTimeout(() => {
        setIsThrottled(false);
      }, 2000);
    }, [isThrottled, hasOpenModal, game])
  );
  useSettingsStore((s) => s.settingsModalIsOpen);
  useResetStateOnUnmount();
  useEndGame();
  useEffect(() => {
    if (isPlaying) {
      refreshTrends();
      closeModals();
    }
  }, [isPlaying]);

  return (
    <div className="flex flex-col relative">
      <>
        <PlayHeader />
        {capsLockActive && (
          <div className="absolute top-[-30px] z-10 flex w-full items-center justify-center gap-2 font-medium text-red-400">
            <div className="w-4 text-dark-ocean">
              <FontAwesomeIcon icon={faLock} className="text-red-400" />
            </div>
            Caps Lock is active
          </div>
        )}
        <AnimatePresence>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
            className="w-full"
          >
            {isCompleted && <ResultsContainer />}
          </motion.div>
        </AnimatePresence>
        <AnimatePresence>
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
            className="w-full"
          >
            {!isCompleted && (
              <CodeTypingContainer
                filePath={challenge.filePath}
                language={challenge.language}
              />
            )}
          </motion.div>
        </AnimatePresence>
        <PlayFooter challenge={challenge} />
      </>
      <ToastContainer />
    </div>
  );
}

export default Play2Page;


================================================
FILE: packages/webapp-next/pages/results/[id].tsx
================================================
import { AnimatePresence, motion } from "framer-motion";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer } from "react-toastify";
import {
  ResultsText,
  ShareResultButton,
} from "../../modules/play2/containers/ResultsContainer";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCode } from "@fortawesome/free-solid-svg-icons";
import { CodeArea } from "../../modules/play2/components/CodeArea";
import useSWR from "swr";
import { getExperimentalServerUrl } from "../../common/utils/getServerUrl";
import { useRouter } from "next/router";
import { cpmToWPM } from "../../common/utils/cpmToWPM";
import { toHumanReadableTime } from "../../common/utils/toHumanReadableTime";
import Image from "next/image";
import { format } from "date-fns";
import { ActionButton } from "../../modules/play2/components/play-footer/PlayFooter";
import { ChallengeSource } from "../../modules/play2/components/play-footer/ChallengeSource";
import { useInitializeUserStore } from "../../common/state/user-store";
import { useUser } from "../../common/api/user";
import Head from "next/head";
import { TweetResult } from "../../modules/play2/components/TweetResult";

const baseURL = getExperimentalServerUrl();

export const config = { runtime: "experimental-edge" };

function ResultPage() {
  const user = useUser();
  useInitializeUserStore(user);
  const router = useRouter();
  const { id } = router.query;
  const { data, isLoading } = useSWR(
    `${baseURL}/api/results/${id}`,
    (...args) => id && fetch(...args).then((res) => res.json())
  );
  const base = typeof window !== "undefined" ? window.location.origin : "";
  const url = `${base}/results/${id}`;

  const resultTitle = data?.user
    ? `${data.user.username} ${cpmToWPM(data.cpm)}wpm`
    : "Result";

  return (
    <>
      <Head>
        <title>{resultTitle}</title>
      </Head>
      <div className="flex flex-col items-center">
        {data?.user && (
          <AnimatePresence>
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.5 }}
              className="flex flex-col items-center justify-center gap-2"
            >
              <div className="w-full flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Image
                    alt={`${data.user.username} profile picture`}
                    className="rounded-full"
                    width={50}
                    height={50}
                    src={data.user.avatarUrl}
                  />
                  <h1 className="text-lg font-semibold">
                    {data.user.username}
                  </h1>
                </div>
                <span className="text-sm font-light">
                  {format(new Date(data.createdAt), "yyyy-MM-dd HH:mm")}
                </span>
              </div>
              <div className="w-full grid grid-cols-2 sm:flex sm:flex-row sm:justify-center gap-2">
                <ResultsText
                  info="words per minute typed in race"
                  title="words per minute"
                  value={`${cpmToWPM(data.cpm)}`}
                />
                <ResultsText
                  info="Percentage of results on speedtyper.dev this race was faster than"
                  title="global rank"
                  value={`${data.percentile}%`}
                />
                <ResultsText
                  info="% correctly typed characters in race"
                  title="accuracy"
                  value={`${data.accuracy}%`}
                />
                <ResultsText
                  info="time it took to complete race"
                  title="time"
                  value={toHumanReadableTime(Math.floor(data.timeMS / 1000))}
                />
                <ResultsText
                  info="number of mistakes made during race"
                  title="mistakes"
                  value={data.mistakes.toString()}
                />
                <ShareResultButton url={url} />
                <TweetResult url={url} wpm={cpmToWPM(data.cpm)} />
              </div>
              <CodeArea
                staticHeigh={false}
                filePath={truncateFile(data.challenge.path)}
                focused={true}
              >
                <span className="text-xs sm:text-sm tracking-tight leading-1">
                  {data.challenge.content}
                </span>
              </CodeArea>
              <div className="w-full flex justify-between items-center">
                <ActionButton
                  text="play"
                  title="Start playing"
                  onClick={() => router.push("/")}
                  icon={
                    <div className="h-3 w-3 flex items-center">
                      <FontAwesomeIcon icon={faCode} />
                    </div>
                  }
                />
                <ChallengeSource
                  name={data.challenge.project.fullName}
                  url={data.challenge.url}
                  license={data.challenge.project.licenseName}
                />
              </div>
            </motion.div>
          </AnimatePresence>
        )}

        {user && !isLoading && !data?.user && (
          <div className="text-4xl font-semibold">404 result not found</div>
        )}
        <ToastContainer />
      </div>
    </>
  );
}

function truncateFile(file: string) {
  const cutoff = 40;
  return file.length > cutoff + 3
    ? file.substring(0, cutoff).trim().concat("...")
    : file;
}

export default ResultPage;


================================================
FILE: packages/webapp-next/postcss.config.js
================================================
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};


================================================
FILE: packages/webapp-next/public/robots.txt
================================================
User-agent: *


================================================
FILE: packages/webapp-next/styles/globals.css
================================================
@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  padding: 0;
  margin: 0;
  color: #eeeeee;
  background: #0e0e11;
  /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, */
  /*   Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 7px;
  background: #0e0e11;
}
::-webkit-scrollbar-thumb {
  background: #dbdbdb;
  border-radius: 100px;
}

================================================
FILE: packages/webapp-next/tailwind.config.js
================================================
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./modules/**/*.{js,ts,jsx,tsx}",
    "./common/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false, // or 'media' or 'class'
  variants: {},
  plugins: [],
  theme: {
    top: {
      "1/2": "50%",
    },
    left: {
      "1/2": "50%",
    },
    inset: {
      0: 0,
      auto: "auto",
      "1/2": "50%",
    },
    extend: {
      colors: {
        citrus: "#F5CBA7",
        "faded-gray": "rgb(184, 184, 184, 0.8)",
        "off-white": "#eeeeee",
        "dark-ocean": "#0E0E11",
        "dark-lake": "#18181b",
        code: "#f5f2f0;",
      },
      width: {
        "1/2": "50%",
        680: "680px",
        340: "340px",
        632: "632px",
        450: "450px",
        300: "300px",
      },
      width: {
        680: "680px",
        340: "340px",
        632: "632px",
        450: "450px",
        300: "300px",
      },
      screens: {
        sm: "640px",
        // => @media (min-width: 640px) { ... }

        md: "768px",
        // => @media (min-width: 768px) { ... }

        lg: "1024px",
        // => @media (min-width: 1024px) { ... }

        xl: "1280px",
        // => @media (min-width: 1280px) { ... }

        "2xl": "1900px",
      },
      boxShadow: {
        "highlight-menu": "3px 0 0 0 #0ba90b inset",
      },
    },
  },
};


================================================
FILE: packages/webapp-next/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: packages/webapp-next/utils/calculateAccuracy.ts
================================================
export default (typedCharsCount: number, mistakeCount: number) =>
  Math.floor(((typedCharsCount - mistakeCount) / typedCharsCount) * 100);


================================================
FILE: packages/webapp-next/utils/cpmToWpm.ts
================================================
export default (cpm: number): number => Math.floor(cpm / 5);


================================================
FILE: packages/webapp-next/utils/getTimeDifference.ts
================================================
import {
  differenceInDays,
  differenceInHours,
  differenceInMinutes,
  differenceInSeconds,
} from "date-fns";

export default (time: string) => {
  if (differenceInDays(new Date(), new Date(time))) {
    return `${differenceInDays(new Date(), new Date(time))} hours`;
  }
  if (differenceInHours(new Date(), new Date(time))) {
    return `${differenceInHours(new Date(), new Date(time))} hours`;
  }

  if (differenceInMinutes(new Date(), new Date(time))) {
    return `${differenceInMinutes(new Date(), new Date(time))} minutes`;
  }

  if (differenceInSeconds(new Date(), new Date(time))) {
    return `${differenceInSeconds(new Date(), new Date(time))} seconds`;
  }
};


================================================
FILE: packages/webapp-next/utils/humanize.ts
================================================
// source https://gist.github.com/jweyrich/f39c496b83f73d2c5b0587f4d841651b
interface TimeUnit {
  [key: string]: number;
}

const TIME_UNITS: TimeUnit = {
  year: 3.154e10,
  month: 2.628e9,
  week: 6.048e8,
  day: 8.64e7,
  hour: 3.6e6,
  minute: 60000,
  second: 1000,
};

export function humanizeAbsolute(when: Date | number) {
  const diff =
    new Date().getTime() - (typeof when === "number" ? when : when.getTime());
  for (const unit in TIME_UNITS) {
    const quotient = Math.floor(diff / TIME_UNITS[unit]);
    if (quotient > 0) {
      return `${quotient} ${unit}${quotient > 1 ? "s" : ""}`;
    }
  }
  return "just now";
}

export function humanizeRelative(pastMilliseconds: number) {
  return humanizeAbsolute(new Date().getTime() - pastMilliseconds);
}


================================================
FILE: packages/webapp-next/utils/stripIndentation.ts
================================================
export default (text: string): string => {
  return text
    .split("\n")
    .map((subText) => subText.trimStart())
    .join("\n");
};