Feat(question game)/question cards

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;

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

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"
               />

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>
+    )
+}

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,
     },
   })
 

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
 })