Initial commit
This commit is contained in:
commit
b7c73dc766
|
@ -0,0 +1,4 @@
|
|||
DATABASE_URL="file:./dev.db"
|
||||
OSU_CLIENT_ID=""
|
||||
OSU_CLIENT_SECRET=""
|
||||
OSU_REDIRECT_URI=""
|
|
@ -0,0 +1,4 @@
|
|||
/** @type {import('eslint').Linter.Config} */
|
||||
module.exports = {
|
||||
extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
|
||||
};
|
|
@ -0,0 +1,9 @@
|
|||
node_modules
|
||||
|
||||
/.cache
|
||||
/build
|
||||
/public/build
|
||||
.env
|
||||
/prisma/dev.db
|
||||
/app/styles
|
||||
.env
|
|
@ -0,0 +1,3 @@
|
|||
# Suomi maakunta ranking
|
||||
|
||||
County based ranking for Finnish osu players, made with Remix, Tailwind and SQLite (using Prisma ORM).
|
|
@ -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,
|
||||
});
|
|
@ -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 };
|
|
@ -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);
|
||||
}
|
|
@ -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);
|
||||
});
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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),
|
||||
},
|
||||
});
|
||||
}
|
|
@ -0,0 +1,9 @@
|
|||
import { OAuthToken } from "./cookies";
|
||||
import { createCookieSessionStorage } from "@remix-run/node";
|
||||
|
||||
const { getSession, commitSession, destroySession } =
|
||||
createCookieSessionStorage({
|
||||
OAuthToken,
|
||||
});
|
||||
|
||||
export { getSession, commitSession, destroySession };
|
|
@ -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;
|
||||
}
|
|
@ -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
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
}
|
||||
}
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,3 @@
|
|||
module.exports = {
|
||||
plugins: [require("prettier-plugin-tailwindcss")],
|
||||
};
|
|
@ -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
|
||||
);
|
|
@ -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;
|
|
@ -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");
|
|
@ -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"
|
|
@ -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
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('@remix-run/dev').AppConfig} */
|
||||
module.exports = {
|
||||
ignoredRouteFiles: ["**/.*"],
|
||||
// appDirectory: "app",
|
||||
// assetsBuildDirectory: "public/build",
|
||||
// serverBuildPath: "build/index.js",
|
||||
// publicPath: "/build/",
|
||||
};
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./app/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
Loading…
Reference in New Issue