Initial commit

.env.example

@@ -0,0 +1,4 @@
+DATABASE_URL="file:./dev.db"
+OSU_CLIENT_ID=""
+OSU_CLIENT_SECRET=""
+OSU_REDIRECT_URI=""

.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};

.gitignore

@@ -0,0 +1,9 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
+/prisma/dev.db
+/app/styles
+.env

README.md

@@ -0,0 +1,3 @@
+# Suomi maakunta ranking
+
+County based ranking for Finnish osu players, made with Remix, Tailwind and SQLite (using Prisma ORM).

app/cookies.js

@@ -0,0 +1,8 @@
+import { createCookie } from "@remix-run/node";
+
+export const OAuthToken = createCookie("token", {
+  domain: "http://localhost:3000",
+  path: "/",
+  maxAge: 604_800,
+  httpOnly: true,
+});

app/db.server.js

@@ -0,0 +1,15 @@
+import { PrismaClient } from "@prisma/client";
+
+let prisma;
+
+if (process.env.NODE_ENV === "production") {
+  prisma = new PrismaClient();
+} else {
+  if (!global.__db__) {
+    global.__db__ = new PrismaClient();
+  }
+  prisma = global.__db__;
+  prisma.$connect();
+}
+
+export { prisma };

app/entry.client.jsx

@@ -0,0 +1,22 @@
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+function hydrate() {
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <StrictMode>
+        <RemixBrowser />
+      </StrictMode>
+    );
+  });
+}
+
+if (typeof requestIdleCallback === "function") {
+  requestIdleCallback(hydrate);
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  setTimeout(hydrate, 1);
+}

app/entry.server.jsx

@@ -0,0 +1,111 @@
+import { PassThrough } from "stream";
+
+import { Response } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import isbot from "isbot";
+import { renderToPipeableStream } from "react-dom/server";
+
+const ABORT_DELAY = 5000;
+
+export default function handleRequest(
+  request,
+  responseStatusCode,
+  responseHeaders,
+  remixContext
+) {
+  return isbot(request.headers.get("user-agent"))
+    ? handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      );
+}
+
+function handleBotRequest(
+  request,
+  responseStatusCode,
+  responseHeaders,
+  remixContext
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onAllReady() {
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(error) {
+          reject(error);
+        },
+        onError(error) {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}
+
+function handleBrowserRequest(
+  request,
+  responseStatusCode,
+  responseHeaders,
+  remixContext
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false;
+
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer context={remixContext} url={request.url} />,
+      {
+        onShellReady() {
+          const body = new PassThrough();
+
+          responseHeaders.set("Content-Type", "text/html");
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: didError ? 500 : responseStatusCode,
+            })
+          );
+
+          pipe(body);
+        },
+        onShellError(err) {
+          reject(err);
+        },
+        onError(error) {
+          didError = true;
+
+          console.error(error);
+        },
+      }
+    );
+
+    setTimeout(abort, ABORT_DELAY);
+  });
+}

app/root.jsx

@@ -0,0 +1,37 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+import styles from "./styles/app.css";
+
+export function links() {
+  return [{ rel: "stylesheet", href: styles }];
+}
+
+export const meta = () => ({
+  charset: "utf-8",
+  title: "New Remix App",
+  viewport: "width=device-width,initial-scale=1",
+});
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}

app/routes/auth.jsx

@@ -0,0 +1,52 @@
+import { redirect } from "@remix-run/node";
+import { getMe, getOAuthToken } from "~/utils";
+import { Link } from "@remix-run/react";
+import { getSession } from "~/sessions";
+import { commitSession } from "~/sessions";
+
+export async function action({ request }) {
+  const formData = await request.formData();
+  const county = formData.get("county");
+
+  if (typeof county !== "string" || !county || !countys.includes(county))
+    throw new Error("bad county");
+}
+
+export async function loader({ request }) {
+  const session = await getSession(request.headers.get("Cookie"));
+  if (session.has("userId")) {
+    return redirect("/");
+  }
+
+  const url = new URL(request.url);
+  const code = url.searchParams.get("code");
+  if (!code) return redirect("/");
+
+  const data = await getOAuthToken(code);
+  if (data.error) {
+    throw new Error("could not get access_token");
+  }
+
+  const me = await getMe(data.access_token);
+  if (!["FI", "AX"].includes(me.country.code)) {
+    throw new Error("your not finnish lil bro");
+  }
+
+  session.set("userId", data.access_token);
+
+  return redirect("/", {
+    headers: {
+      "Set-Cookie": await commitSession(session),
+    },
+  });
+}
+
+export function ErrorBoundary({ error }) {
+  return (
+    <div className="bg-red rounded p-4 text-white shadow">
+      <Link to={"/"}>Back</Link>
+      <h1>{error.message}</h1>
+      <code>{error.stack}</code>
+    </div>
+  );
+}

app/routes/index.jsx

@@ -0,0 +1,184 @@
+import { getSession } from "~/sessions";
+import { getMe } from "~/utils";
+import { useLoaderData } from "@remix-run/react";
+import { prisma } from "~/db.server";
+import { Form } from "@remix-run/react";
+
+const countys = [
+  "Ahvenanmaa",
+  "Etelä-Karjala",
+  "Etelä-Pohjanmaa",
+  "Kainuu",
+  "Kanta-Häme",
+  "Keski-Pohjanmaa",
+  "Keski-Suomi",
+  "Kymenlaakso",
+  "Lappi",
+  "Pirkanmaa",
+  "Pohjanmaa",
+  "Pohjois-Karjala",
+  "Pohjois-Pohjanmaa",
+  "Pohjois-Savo",
+  "Päijat-Häme",
+  "Satakunta",
+  "Uusimaa",
+  "Varsinais-Suomi",
+];
+
+export async function action({ request }) {
+  const formData = await request.formData();
+  const county = formData.get("county");
+
+  if (!county || typeof county !== "string" || !countys.includes(county))
+    throw new Error("bad county");
+
+  const session = await getSession(request.headers.get("Cookie"));
+  if (!session.has("userId"))
+    throw new Error("OAuth token not found in cookie");
+
+  const me = await getMe(session.get("userId"));
+
+  const countySubmit = prisma.county.create({
+    data: {
+      name: county,
+      players: {
+        create: {
+          playerName: me.username,
+          rank: parseInt(me.statistics.global_rank),
+        },
+      },
+    },
+  });
+
+  return countySubmit
+    ? countySubmit
+    : new Error("Something went wrong with creating the user");
+}
+
+export async function loader({ request }) {
+  const countyData = await prisma.county.findMany({
+    include: {
+      players: true,
+    },
+  });
+  const session = await getSession(request.headers.get("Cookie"));
+  if (!session.has("userId")) return { countyData };
+
+  const me = await getMe(session.get("userId"));
+
+  const selfData = await prisma.player.findUnique({
+    where: {
+      playerName: me.username,
+    },
+  });
+  console.log(selfData);
+  return { me, countyData, selfData };
+}
+
+export default function Index() {
+  const data = useLoaderData();
+
+  return (
+    <div className="container mx-auto">
+      <header className="flex w-full items-center justify-between border-b p-4">
+        <h1 className="text-2xl tracking-tighter">Maakunta ranking</h1>
+        {data.me ? (
+          <div className="flex flex-col items-center justify-center">
+            <img
+              className="w-10 rounded-full outline"
+              src={data.me.avatar_url}
+              alt=""
+            />
+            <h1>{data.me.username}</h1>
+          </div>
+        ) : (
+          <a
+            href="https://osu.ppy.sh/oauth/authorize?client_id=20031&redirect_uri=http://localhost:3000/auth&response_type=code"
+            referrerPolicy="noreferrer"
+            className="rounded-full border bg-red-300 px-4 py-2 font-semibold shadow-lg hover:bg-red-400"
+          >
+            Authenticate with OSU account
+          </a>
+        )}
+      </header>
+      {data?.me?.username ? (
+        data.selfData ? (
+          <h1 className="p-4 text-center font-bold">
+            Kiitos, että osallistuit maakunta rankingiin!
+          </h1>
+        ) : (
+          <Form
+            className="flex flex-col items-center justify-center space-y-4 p-4 text-center"
+            method="post"
+          >
+            <label>
+              <details>
+                <summary className="cursor-pointer text-2xl font-semibold tracking-wide">
+                  Valitse sinun tämän hetkinen maakunta
+                </summary>
+                <p className="text-sm">
+                  Jos laitat vahingos väärän tai jotai nii pingaa juunas hyväs
+                  mieles nii voin vaihtaa joo
+                </p>
+              </details>
+            </label>
+            <select
+              className="rounded bg-white p-2 shadow"
+              name="county"
+              id="county"
+            >
+              {countys.map((county, index) => (
+                <option key={index} value={`${county}`}>
+                  {county}
+                </option>
+              ))}
+            </select>
+            <button
+              className="rounded-full px-4 py-2 shadow hover:shadow-xl"
+              type="submit"
+            >
+              Submit
+            </button>
+          </Form>
+        )
+      ) : (
+        ""
+      )}
+      {data.countyData.length > 0 ? (
+        <ul className="flex items-center justify-center p-4">
+          {data.countyData.map((county) => (
+            <li
+              className="m-4 flex w-full max-w-md flex-col space-y-2 rounded border p-4 text-black shadow-lg"
+              key={county.id}
+            >
+              <h1 className="text-center text-4xl tracking-tighter">
+                {county.name}
+              </h1>
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="border-b">
+                    <th className="p-2">Player</th>
+                    <th className="p-2">Rank</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {county.players.map((player) => (
+                    <tr
+                      key={player.id}
+                      className="border-b odd:bg-slate-50 even:bg-white"
+                    >
+                      <td className="p-2">{player.playerName}</td>
+                      <td className="p-2">#{player.rank}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <h1 className="p-6 text-center text-4xl">No data yet</h1>
+      )}
+    </div>
+  );
+}

app/routes/logout.jsx

@@ -0,0 +1,11 @@
+import { redirect } from "@remix-run/node";
+import { destroySession, getSession } from "~/sessions";
+
+export async function loader({ request }) {
+  const session = await getSession(request.headers.get("Cookie"));
+  return redirect("/", {
+    headers: {
+      "Set-Cookie": await destroySession(session),
+    },
+  });
+}

app/sessions.js

@@ -0,0 +1,9 @@
+import { OAuthToken } from "./cookies";
+import { createCookieSessionStorage } from "@remix-run/node";
+
+const { getSession, commitSession, destroySession } =
+  createCookieSessionStorage({
+    OAuthToken,
+  });
+
+export { getSession, commitSession, destroySession };

app/utils.js

@@ -0,0 +1,35 @@
+export async function getOAuthToken(code) {
+  let data;
+  try {
+    data = await fetch("https://osu.ppy.sh/oauth/token", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        client_id: process.env.OSU_CLIENT_ID,
+        client_secret: process.env.OSU_CLIENT_SECRET,
+        code: code,
+        grant_type: "authorization_code",
+        redirect_uri: process.env.OSU_REDIRECT_URI,
+      }),
+    });
+  } catch {
+    throw new Error("bad code");
+  }
+
+  const json = await data.json();
+  return json;
+}
+
+export async function getMe(token) {
+  const data = await fetch("https://osu.ppy.sh/api/v2/me/osu", {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  const json = data.json();
+  return json;
+}

jsconfig.json

@@ -0,0 +1,20 @@
+{
+  "include": ["**/*.js", "**/*.jsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "noEmit": true
+  }
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "pnpm run build:css && remix build",
+    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
+    "dev": "concurrently \"pnpm run dev:css\" \"remix dev\"",
+    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css",
+    "start": "remix-serve build"
+  },
+  "dependencies": {
+    "@prisma/client": "^4.9.0",
+    "@remix-run/node": "^1.10.1",
+    "@remix-run/react": "^1.10.1",
+    "@remix-run/serve": "^1.10.1",
+    "isbot": "^3.6.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^1.10.1",
+    "@remix-run/eslint-config": "^1.10.1",
+    "concurrently": "^7.6.0",
+    "eslint": "^8.27.0",
+    "prettier": "^2.8.3",
+    "prettier-plugin-tailwindcss": "^0.2.1",
+    "prisma": "^4.9.0",
+    "tailwindcss": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}

prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("prettier-plugin-tailwindcss")],
+};

prisma/migrations/20230118124206_init/migration.sql

@@ -0,0 +1,13 @@
+-- CreateTable
+CREATE TABLE "County" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "name" TEXT NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "Player" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "playerName" TEXT NOT NULL,
+    "countyId" INTEGER NOT NULL,
+    CONSTRAINT "Player_countyId_fkey" FOREIGN KEY ("countyId") REFERENCES "County" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);

prisma/migrations/20230118133911_rank/migration.sql

@@ -0,0 +1,20 @@
+/*
+  Warnings:
+
+  - Added the required column `rank` to the `Player` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- RedefineTables
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Player" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "playerName" TEXT NOT NULL,
+    "rank" INTEGER NOT NULL,
+    "countyId" INTEGER NOT NULL,
+    CONSTRAINT "Player_countyId_fkey" FOREIGN KEY ("countyId") REFERENCES "County" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+INSERT INTO "new_Player" ("countyId", "id", "playerName") SELECT "countyId", "id", "playerName" FROM "Player";
+DROP TABLE "Player";
+ALTER TABLE "new_Player" RENAME TO "Player";
+PRAGMA foreign_key_check;
+PRAGMA foreign_keys=ON;

prisma/migrations/20230118135351_playernameuniq/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[playerName]` on the table `Player` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Player_playerName_key" ON "Player"("playerName");

prisma/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "sqlite"

prisma/schema.prisma

@@ -0,0 +1,25 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model County {
+  id      Int      @id @default(autoincrement())
+  name    String
+  players Player[]
+}
+
+model Player {
+  id         Int    @id @default(autoincrement())
+  playerName String @unique
+  rank       Int
+  County     County @relation(fields: [countyId], references: [id])
+  countyId   Int
+}

remix.config.js

@@ -0,0 +1,8 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  ignoredRouteFiles: ["**/.*"],
+  // appDirectory: "app",
+  // assetsBuildDirectory: "public/build",
+  // serverBuildPath: "build/index.js",
+  // publicPath: "/build/",
+};

styles/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./app/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};