add mobile-voting

frontend/src/app/layout.tsx

@@ -11,19 +11,60 @@ import SessionChecker from "muzak/components/SessionChecker";
 import { AnimationContext } from "muzak/contexts/AnimationContext";
 import { QuotaContext } from "muzak/contexts/QuotaContext";
 import { SessionContext } from "muzak/contexts/SessionContext";
+import { usePathname } from "next/navigation";
 
 const nunito = Nunito({
   subsets: ["latin"],
 });
 
+const navToggle = true; //voor dev navigatie
+
+const pageConfig: Record<
+  string,
+  {
+    showAuthStatus: boolean;
+    showSessionChecker: boolean;
+    showNav: boolean;
+    showQuota: boolean;
+  }
+> = {
+  "/nominations": {
+    showAuthStatus: true,
+    showSessionChecker: false,
+    showQuota: true,
+    showNav: navToggle,
+  },
+  "/mobile-voting": {
+    showAuthStatus: false,
+    showSessionChecker: false,
+    showQuota: false,
+    showNav: false,
+  },
+  "/lobby": {
+    showAuthStatus: true,
+    showSessionChecker: false,
+    showQuota: true,
+    showNav: navToggle,
+  },
+};
+
 function LayoutContent({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  const config = pageConfig[pathname] ?? {
+    showAuthStatus: true,
+    showSessionChecker: true,
+    showQuota: false,
+    showNav: navToggle,
+  };
+
   return (
     <>
-      <SessionChecker />
+      {config.showSessionChecker && <SessionChecker />}
-      <AuthStatus />
+      {config.showAuthStatus && <AuthStatus />}
       {children}
-      {/* <NavigationBar /> */}
+      {config.showNav && <NavigationBar />}
-      <Quota />
+      {config.showQuota && <Quota />}
     </>
   );
 }

frontend/src/app/login/page.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { Nunito } from "next/font/google";
-import { useState } from "react";
-import Link from "next/link";
-
-const nunito = Nunito({
-  weight: "900",
-  subsets: ["latin"],
-});
-
-export default function Login() {
-  const [userName, setUserName] = useState("Stroop");
-  const [pin, setPin] = useState("");
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div>
-        <h1
-          className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
-        >
-          LOGIN
-        </h1>
-      </div>
-
-      <div className="mb-12 flex flex-col items-center justify-between gap-4 rounded-md bg-blue-950/80 p-8">
-        <p className="text-2xl font-semibold text-white drop-shadow-sm drop-shadow-gray-900">
-          Welkom, {userName}!
-        </p>
-        <form className="flex flex-col items-center justify-center gap-4">
-          <input
-            className="w-full rounded border border-white px-4 py-2 font-bold text-white/70 focus:border-yellow-500 focus:outline-2 focus:outline-yellow-500"
-            type="text"
-            placeholder="Game PIN"
-            value={pin}
-            onChange={(e) => setPin(e.target.value.toUpperCase())}
-          />
-          <Link
-            href="/lobby"
-            className="w-full rounded bg-blue-500 px-4 py-2 text-center font-bold text-white hover:bg-blue-400"
-          >
-            Join
-          </Link>
-        </form>
-      </div>
-      <div></div>
-    </main>
-  );
-}

frontend/src/app/mobile-voting/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Nunito } from "next/font/google";
+import { useState } from "react";
+import Link from "next/link";
+
+const nunito = Nunito({
+  weight: "900",
+  subsets: ["latin"],
+});
+
+export default function MobileVoting() {
+  const [vote, setVote] = useState(0.5);
+  const [noHighlight, setNoHighlight] = useState(false);
+  const [yesHighlight, setYesHighlight] = useState(false);
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div></div>
+
+      <div className="mb-0 flex flex-row items-center justify-between gap-32 rounded-md bg-blue-950/80 p-16">
+        <button
+          className={`flex w-full flex-col items-center gap-2 rounded bg-blue-500/0 p-[0px] text-center font-bold text-white ${noHighlight ? "ring-5 ring-amber-500" : "ring-0"}`}
+          onClick={() => {
+            setYesHighlight(false);
+            setNoHighlight(true);
+            setVote(0);
+          }}
+        >
+          <img
+            src="https://media.tenor.com/HU0FukwCUH4AAAAm/nono.webp"
+            alt="icon"
+            className="h-45 w-45 object-contain"
+          />
+          {/*<span>MEH</span>*/}
+        </button>
+        <button
+          className={`flex w-full flex-col items-center gap-2 rounded bg-blue-500/0 p-[0px] text-center font-bold text-white ${yesHighlight ? "ring-5 ring-amber-500" : "ring-0"}`}
+          onClick={() => {
+            setYesHighlight(true);
+            setNoHighlight(false);
+            setVote(1);
+          }}
+        >
+          <img
+            src="https://media.tenor.com/wtv7ADhTUD4AAAAm/dance-happy.webp"
+            alt="icon"
+            className="h-45 w-45 object-contain"
+          />
+          {/*<span>YEAH</span>*/}
+        </button>
+      </div>
+      <div></div>
+    </main>
+  );
+}

frontend/src/app/post-game/page.tsx

@@ -2,6 +2,8 @@ export default function PostGame() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <h1>Post-game</h1>
+      <p>Bedankt voor het stemmen!</p>
+      <p>;)</p>
     </main>
   );
 }

frontend/src/components/NavigationBar.tsx

@@ -5,6 +5,8 @@ const source = Source_Sans_3({
   subsets: ["latin"],
 });
 const font = source.className;
+const btnStyle =
+  "rounded-md px-4 py-2 text-sm font-medium text-white bg-green-600 hover:bg-green-700";
 
 export default function NavigationBar() {
   const auth = useAuth();
@@ -12,11 +14,26 @@ export default function NavigationBar() {
     return (
       <nav className="absolute right-0 bottom-0 left-0 flex justify-center">
         <div
-          className={`${font} flex flex-row items-center gap-6 rounded-tl-lg rounded-tr-lg border-4 border-b-0 border-black bg-sky-900 px-4 py-6 text-white`}
+          className={`${font} flex flex-row items-center gap-6 rounded-tl-lg rounded-tr-lg border-2 border-b-0 border-black bg-sky-900 p-4 text-white`}
         >
-          <Link href="/nominations">Nomineren</Link>
+          <Link className={btnStyle} href="/nominations">
-          <Link href="/lobby">Start spel (test)</Link>
+            Nomineren
-          <Link href="/users">Users</Link>
+          </Link>
+          <Link className={btnStyle} href="/lobby">
+            Start spel (test)
+          </Link>
+          <Link className={btnStyle} href="/session">
+            Session Connect
+          </Link>
+          <Link className={btnStyle} href="/mobile-voting">
+            Mobile Voting
+          </Link>
+          <Link className={btnStyle} href="/post-game">
+            Post Game
+          </Link>
+          <Link className={btnStyle} href="/users">
+            Users
+          </Link>
         </div>
       </nav>
     );