add some more games

README.md

@@ -1,3 +1,3 @@
 # G.U.D. Gaming
 
-Work in progress.
+Work in progress.

app/api/auth/[...nextauth]/route.ts

@@ -1,20 +1,21 @@
 import NextAuth from "next-auth";
+import type { NextAuthOptions } from "next-auth";
 import BoxyHQ from "next-auth/providers/boxyhq-saml";
 
-const samlLoginUrl = process.env.AUTH_BOXYHQ_SAML_ISSUER;
-
 // For more information on each option (and a full list of options) go to
 // https://next-auth.js.org/configuration/options
-const handler = NextAuth({
-  // https://next-auth.js.org/configuration/providers/oauth
+
+export const authOptions: NextAuthOptions = {
   providers: [
     BoxyHQ({
       authorization: { params: { scope: "" } },
-      issuer: samlLoginUrl,
+      issuer: process.env.AUTH_BOXYHQ_SAML_ISSUER,
       clientId: process.env.AUTH_BOXYHQ_SAML_ID || "dummy",
       clientSecret: process.env.AUTH_BOXYHQ_SAML_SECRET || "dummy",
     }),
   ],
-});
+};
+
+const handler = NextAuth(authOptions);
 
 export { handler as GET, handler as POST };

app/api/minecraft/actions.ts

@@ -0,0 +1,30 @@
+"use server";
+
+interface MojangResponse {
+  id: string;
+  name: string;
+}
+
+export async function register(prevState: any, formData: FormData) {
+  const username = formData.get("username").toString().toLowerCase();
+
+  if (!username) {
+    return { message: "Username is required" };
+  }
+
+  const response = await fetch(
+    `https://api.mojang.com/users/profiles/minecraft/${username}`,
+  );
+
+  if (response.status === 404 || !response.ok) {
+    return { message: "Username not found" };
+  }
+
+  const uuid = ((await response.json()) as MojangResponse).id;
+
+  if (!uuid) {
+    return { message: "UUID not found" };
+  }
+
+  return { message: "Saved" };
+}

app/components/copy-text.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+export function CopyText({ text }: { text: string }) {
+  return (
+    <button
+      className={`group inline align-text-bottom`}
+      onClick={async (event) => {
+        event.preventDefault();
+        navigator.clipboard.writeText(text);
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className={`
+          group size-4 transition-colors
+          group-hover:text-slate-400
+        `}
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+        />
+      </svg>
+    </button>
+  );
+}

app/components/logout-button.tsx

@@ -6,7 +6,7 @@ export function LogoutButton() {
   return (
     <button
       className={`
-        relative mb-24 flex flex-row rounded bg-slate-700 px-20 py-4 transition-colors
+        relative flex flex-row rounded bg-slate-700 px-20 py-4 transition-colors
         hover:bg-slate-600
       `}
       onClick={async (event) => {

app/components/minecraft-login.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Form from "next/form";
+import { useActionState } from "react";
+
+import { register } from "../api/minecraft/actions";
+import { cn } from "../lib/cn";
+
+const initialState = {
+  message: "",
+  loading: false,
+};
+
+export function MinecraftLogin() {
+  const [state, formAction] = useActionState(register, initialState);
+
+  return (
+    <Form action={formAction} className="space-y-2">
+      <input
+        className={`
+          block w-full rounded border-0 bg-slate-950 p-2 shadow ring-1 ring-inset ring-slate-600
+          focus:ring-2 focus:ring-inset focus:ring-slate-600
+          placeholder:text-slate-600
+        `}
+        name="username"
+        id="minecraft-username"
+        placeholder="Minecraft Username"
+      />
+      <p aria-live="polite">{state?.message}</p>
+      <button
+        disabled={state?.loading}
+        type="submit"
+        className={cn(`
+          flex w-full justify-center rounded bg-slate-700 p-2 text-sm/6 font-semibold text-white
+          shadow
+          disabled:cursor-wait disabled:bg-slate-800 disabled:text-slate-600
+          focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+          focus-visible:outline-slate-600
+          hover:bg-slate-500
+        `)}
+      >
+        Save
+      </button>
+    </Form>
+  );
+}

app/games/page.tsx

@@ -1,8 +1,18 @@
+import { auth } from "@/app/lib/auth";
 import Link from "next/link";
+import { redirect } from "next/navigation";
 
+import { CopyText } from "../components/copy-text";
 import { LogoutButton } from "../components/logout-button";
+import { MinecraftLogin } from "../components/minecraft-login";
+
+export default async function Page() {
+  const session = await auth();
+
+  if (!session) {
+    redirect("/");
+  }
 
-export default function Page() {
   return (
     <>
       <div
@@ -11,34 +21,65 @@ export default function Page() {
           to-slate-800 py-20
         `}
       >
-        <h1 className="text-8xl font-black uppercase">Games</h1>
+        <h1 className="mb-10 text-8xl font-black uppercase">Games</h1>
+        <LogoutButton />
       </div>
 
-      <div className={`
-        mx-auto mt-4 flex w-full max-w-3xl flex-col content-center justify-center gap-4 p-10
-      `}>
+      <div
+        className={`
+          mx-auto mt-4 flex w-full max-w-3xl flex-col content-center justify-center gap-4 p-10
+        `}
+      >
+        <h2 className="text-xl font-semibold">
+          Welcome {session?.user?.name}!
+        </h2>
         <p>
           Find the games you want to play in the list below. Some games needs
           your playername for whitelist. You can always come back to this page
           by login in again.
         </p>
-        <iframe
+        {/* <iframe
           src={process.env.DISCORD_WIDGET}
           width="350"
           height="350"
           allowTransparency={true}
           sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
           className="w-full"
-        />
-        <details className="w-full rounded border border-slate-800 p-4">
+        /> */}
+        <details className="w-full space-y-4 rounded border border-slate-800 p-4">
+          <summary>Discord</summary>
+
+          <ol className="list-inside list-decimal">
+            <li>
+              Join{" "}
+              <Link
+                href={process.env.DISCORD_INVITE ?? ""}
+                className={`
+                  underline
+                  hover:text-white
+                `}
+              >
+                {process.env.DISCORD_INVITE}
+              </Link>
+            </li>
+          </ol>
+        </details>
+        <details className="w-full space-y-4 rounded border border-slate-800 p-4">
           <summary>Minecraft</summary>
+          <MinecraftLogin />
           <p>
-            To connect to minecraft visit{" "}
-            <Link href="mc.chs.se">mc.chs.se</Link>.
+            And then connect to <u>mc.chs.se</u> <CopyText text="mc.chs.se" />
           </p>
         </details>
-
-        <LogoutButton />
+        <details className="w-full space-y-4 rounded border border-slate-800 p-4">
+          <summary>Factorio</summary>
+          <p></p>
+        </details>
+        <details className="w-full space-y-4 rounded border border-slate-800 p-4">
+          <summary>Valheim</summary>
+          <p></p>
+        </details>
+        <p>Missing any game? Request it on the discord!</p>
       </div>
     </>
   );

app/lib/auth.ts

@@ -0,0 +1,18 @@
+import type {
+  GetServerSidePropsContext,
+  NextApiRequest,
+  NextApiResponse,
+} from "next";
+import { getServerSession } from "next-auth";
+
+import { authOptions } from "../api/auth/[...nextauth]/route";
+
+// Use it in server contexts
+export function auth(
+  ...args:
+    | [GetServerSidePropsContext["req"], GetServerSidePropsContext["res"]]
+    | [NextApiRequest, NextApiResponse]
+    | []
+) {
+  return getServerSession(...args, authOptions);
+}

app/page.tsx

@@ -3,7 +3,9 @@ import Image from "next/image";
 import Link from "next/link";
 
 import chs from "../public/chs.png";
+import factorio from "../public/games/factorio.png";
 import minecraft from "../public/games/minecraft.png";
+import valheim from "../public/games/valheim.png";
 import gud from "../public/gud-clean.png";
 
 export default function Home() {
@@ -51,6 +53,26 @@ export default function Home() {
               `}
             />
           </div>
+          <div className="h-40 w-64 max-w-full rounded bg-slate-900 p-4">
+            <Image
+              src={valheim}
+              alt="Valheim"
+              className={`
+                size-full object-contain brightness-75 grayscale transition-[filter]
+                hover:brightness-100 hover:grayscale-0
+              `}
+            />
+          </div>
+          <div className="h-40 w-64 max-w-full rounded bg-slate-900 p-4">
+            <Image
+              src={factorio}
+              alt="Factorio"
+              className={`
+                size-full object-contain brightness-75 grayscale transition-[filter]
+                hover:brightness-100 hover:grayscale-0
+              `}
+            />
+          </div>
           <div className="h-40 w-64 max-w-full rounded bg-slate-900">
             <div
               className={`

next.config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
-  swcMinify: true,
   output: "standalone",
 };