From 54aa4310ec3bab7ec9e1816d6514b9f93987fc6c Mon Sep 17 00:00:00 2001
From: FridaKroken <frida.kroken@hotmail.com>
Date: Sun, 27 Oct 2024 14:34:19 +0100
Subject: [PATCH 1/2] started on question game carousel

---
 src/app/question-game/page.tsx       |  9 +++++++++
 src/components/questiongame/card.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 src/components/questiongame/card.tsx

diff --git a/src/app/question-game/page.tsx b/src/app/question-game/page.tsx
index e69de29..d8f7c08 100644
--- a/src/app/question-game/page.tsx
+++ b/src/app/question-game/page.tsx
@@ -0,0 +1,9 @@
+import { QuestionCard } from "~/components/questiongame/card";
+
+export default function Page() {
+    return (
+        <div>
+            <QuestionCard />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/questiongame/card.tsx b/src/components/questiongame/card.tsx
new file mode 100644
index 0000000..c6eabf9
--- /dev/null
+++ b/src/components/questiongame/card.tsx
@@ -0,0 +1,24 @@
+
+import { Card, CardContent } from "../ui/card";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "../ui/carousel";
+
+export function QuestionCard() {
+    
+  return (
+    <Carousel className="w-full max-w-xs">
+        <CarouselContent>
+                <CarouselItem >
+                    <div className="p-1">
+                        <Card>
+                            <CardContent className="flex aspect-square items-center justify-center p-6">
+                                <span className="text-4xl font-semibold">{1}</span>
+                            </CardContent>
+                        </Card>
+                    </div>
+                </CarouselItem>
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext className="" />
+    </Carousel>
+    )
+}

From 8581724a6dd969925717b1fc1d90f035bb30efc5 Mon Sep 17 00:00:00 2001
From: FridaKroken <frida.kroken@hotmail.com>
Date: Sun, 27 Oct 2024 16:12:09 +0100
Subject: [PATCH 2/2] added first version of question carousel

---
 src/app/question-game/[id]/page.tsx           | 64 +++++++++++++++++++
 src/app/question-game/page.tsx                | 11 +++-
 src/components/layout/footer.tsx              |  4 +-
 .../question/controller/get-from-game.ts      |  2 +-
 .../api/question-game/question/router.ts      |  4 +-
 5 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 src/app/question-game/[id]/page.tsx

diff --git a/src/app/question-game/[id]/page.tsx b/src/app/question-game/[id]/page.tsx
new file mode 100644
index 0000000..22b1028
--- /dev/null
+++ b/src/app/question-game/[id]/page.tsx
@@ -0,0 +1,64 @@
+import { Card, CardContent } from "~/components/ui/card";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "~/components/ui/carousel";
+import { api } from "~/trpc/server";
+
+
+interface QuestionGameProps {
+    params: {
+        id: string;
+    };
+}
+
+interface Question {
+    id: number;
+    question: string;
+}
+
+const QuestionGame = async ({ params }: QuestionGameProps) => {
+    const data = await api.questionGame.question.getAll({
+        questionGameId: parseInt(params.id)
+    });
+
+    const shuffleArray = (arr: Question[]): Question[] => {
+        // Clone the array to avoid mutating the original
+        const array = [...arr];
+
+        // Loop through the array from the last to the second element
+        for (let i = array.length - 1; i > 0; i--) {
+            // Generate a random index from 0 to i
+            const j = Math.floor(Math.random() * (i + 1));
+
+            // Use type assertions to satisfy TypeScript
+            [array[i], array[j]] = [array[j] as Question, array[i] as Question];
+        }
+
+        return array;
+    }
+
+    return (
+        <main className="h-screen">
+            <Carousel className="w-full max-w-xs">
+                <CarouselContent>
+                    {shuffleArray(data.questions).map((question, index) => (
+                        <CarouselItem className="md:basis-1/2 lg:basis-1/3" key={index}>
+                            <div className="p-1">
+                                <Card>
+                                    <CardContent className="flex aspect-square items-center justify-center p-6">
+                                        <span className="text-4xl font-semibold">{question.question}</span>
+                                    </CardContent>
+                                </Card>
+                            </div>
+                        </CarouselItem>
+                    ))}
+                </CarouselContent>
+                <div className="flex mt-8 w-full items-center justify-center space-x-6">
+                    <CarouselPrevious variant="default" className="relative rounded-sm w-full" />
+                    <CarouselNext variant="default" className="relative rounded-sm w-full" />
+                </div>
+            </Carousel>
+        </main>
+    )
+};
+
+
+export default QuestionGame;
\ No newline at end of file
diff --git a/src/app/question-game/page.tsx b/src/app/question-game/page.tsx
index 526bc51..a9ff146 100644
--- a/src/app/question-game/page.tsx
+++ b/src/app/question-game/page.tsx
@@ -1,11 +1,20 @@
+import { Button } from "~/components/ui/button";
 import GameLinkCard from "../../components/ui/game-link-card";
 import { api } from "../../trpc/server";
+import Link from "next/link";
 
 export default async function QuestionGamesPage() {
   const games = await api.questionGame.game.getAll();
 
   return (
-    <div className="mt-6 min-h-[100svh]">
+    <div className="mt-6 min-h-[100svh] space-y-4">
+      <Button asChild>
+        <Link
+          href="/question-game/create"
+        >
+          Opprett spill
+        </Link>
+      </Button>
       <div className="grid grid-cols-2 gap-6">
         {games.map((g) => (
           <GameLinkCard
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
index 974b768..d6e8a4d 100644
--- a/src/components/layout/footer.tsx
+++ b/src/components/layout/footer.tsx
@@ -27,7 +27,9 @@ function PartnershipCol() {
           <li className="mb-4">
             <a href="https://vercel.com/?utm_source=kvark&utm_campaign=oss">
               <img
-                src="favicon.ico"
+                // This can´t be here because of how Next handles dynamic routes.
+                // NEVER USE favicon INSIDE A COMPONENT
+                // src="favicon.ico"
                 alt="vercel"
                 className="mr-2 inline h-5 w-5"
               />
diff --git a/src/server/api/question-game/question/controller/get-from-game.ts b/src/server/api/question-game/question/controller/get-from-game.ts
index 2d56ddf..ce9357f 100644
--- a/src/server/api/question-game/question/controller/get-from-game.ts
+++ b/src/server/api/question-game/question/controller/get-from-game.ts
@@ -24,7 +24,7 @@ const handler: Controller<
 > = async ({ input, ctx }) => {
   const questions = await db.question.findMany({
     where: {
-      id: input.questionGameId,
+      questionGameId: input.questionGameId,
     },
   })
 
diff --git a/src/server/api/question-game/question/router.ts b/src/server/api/question-game/question/router.ts
index 1287146..6730b1d 100644
--- a/src/server/api/question-game/question/router.ts
+++ b/src/server/api/question-game/question/router.ts
@@ -1,6 +1,8 @@
 import { createTRPCRouter } from "../../trpc";
 import create from "./controller/create";
+import getAll from "./controller/get-from-game";
 
 export const questionRouter = createTRPCRouter({
-    create  
+    create,
+    getAll
 })
\ No newline at end of file