[#17] feature: add game map, revise tailwind color styling declaratio…

…n to allow color to be used as var

frontend/app/game/layout.tsx

@@ -0,0 +1,7 @@
+export default function GameLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="h-screen">{children}</div>;
+}

frontend/app/game/page.tsx

@@ -0,0 +1,16 @@
+import { GameMap } from "@/components/map";
+import { Background } from "@/components/background";
+
+export default function GamePage() {
+  return (
+    <>
+      <Background cls=" h-full" isFullScreen={true}/>
+      <section className="h-full flex flex-col justify-center items-center bg-brown/40">
+
+        <div className="flex justify-center items-center p-4 w-full h-[80%]">
+          <GameMap width={1080} height={720} />
+        </div>
+      </section>
+    </>
+  );
+}

frontend/app/globals.css

@@ -1,76 +1,94 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
-    --primary: 222.2 47.4% 11.2%;
+
+    --primary: 129 17% 51%;
     --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
+
+    --secondary: 163 66% 14%;
     --secondary-foreground: 222.2 47.4% 11.2%;
-
+
+    --tertiary: 32 44% 53%;
+
+    --yellow: 44 100% 50%;
+    --green: 155 51% 34%;
+    --brown: 33 48% 32%;
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 84.2% 60.2%;
+
+    --destructive: 3 90% 54%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}
+
+.title-stroke {
+  text-shadow: 3px 3px 3px var(--secondary), -3px -3px 3px var(--secondary),
+    3px -3px 3px var(--secondary), -3px 3px 3px var(--secondary),
+    3px 3px 3px var(--secondary);
+}
+
+.stroke {
+  text-shadow: 2px 2px 2px var(--secondary), -2px -2px 2px var(--secondary),
+  2px -2px 2px var(--secondary), -2px 2px 2px var(--secondary),
+  2px 2px 2px var(--secondary);
+}

frontend/components/background.tsx

@@ -0,0 +1,20 @@
+import bgImage from "@/assets/background.png";
+import { cn } from "@/lib/utils";
+import Image from "next/image";
+
+interface Props {
+    isFullScreen?: boolean
+    cls?: string
+}
+export const Background = ({ isFullScreen = false, cls }: Props) => {
+  return (
+    <div className={cn("w-full h-full", isFullScreen &&  "absolute z-[-10]", cls)}>
+      <Image
+        src={bgImage}
+        fill
+        alt="map-background"
+        className={cn('object-center', isFullScreen ? 'object-cover' : 'object-contain')}
+      />
+    </div>
+  );
+};

frontend/components/map/constants/index.ts

@@ -0,0 +1,3 @@
+export * from './map-data'
+export * from './nodes'
+export * from './styling'

frontend/components/map/constants/map-data.ts

@@ -0,0 +1,98 @@
+import { MapData } from "../map.interface";
+import {
+  BoardwalkNode,
+  CafeNode,
+  ChurchNode,
+  DinerNode,
+  DocksNode,
+  FactoryNode,
+  FarmsteadNode,
+  GraveyardNode,
+  GreatHallNode,
+  HistoricInnNode,
+  HospitalNode,
+  JunkyardNode,
+  MarketNode,
+  OldMillNode,
+  ParkNode,
+  PawnShopNode,
+  PoliceStationNode,
+  SecretLodgeNode,
+  SwampNode,
+  TheaterNode,
+  TrainStationNode,
+  UniversityNode,
+  WharfNode,
+  WoodsNode,
+} from "./nodes";
+
+export const mapData: MapData = {
+  nodes: [
+    // Arkham Nodes
+    TrainStationNode,
+    UniversityNode,
+    PoliceStationNode,
+    DinerNode,
+    SecretLodgeNode,
+    ParkNode,
+
+    // Dunwich Nodes
+    CafeNode,
+    OldMillNode,
+    FarmsteadNode,
+    ChurchNode,
+    SwampNode,
+    HistoricInnNode,
+
+    // Kingsport Nodes
+    GreatHallNode,
+    TheaterNode,
+    GraveyardNode,
+    WharfNode,
+    MarketNode,
+    WoodsNode,
+
+    // Innsmouth Nodes
+    JunkyardNode,
+    PawnShopNode,
+    DocksNode,
+    HospitalNode,
+    FactoryNode,
+    BoardwalkNode,
+  ],
+  links: [
+    { source: TrainStationNode, target: UniversityNode },
+    { source: UniversityNode, target: PoliceStationNode },
+    { source: PoliceStationNode, target: ParkNode },
+    { source: ParkNode, target: UniversityNode },
+
+    { source: PoliceStationNode, target: SecretLodgeNode },
+    { source: SecretLodgeNode, target: DinerNode },
+    { source: ParkNode, target: SecretLodgeNode },
+    { source: TrainStationNode, target: CafeNode },
+    { source: DinerNode, target: JunkyardNode },
+
+    { source: CafeNode, target: ChurchNode },
+    { source: ChurchNode, target: OldMillNode },
+    { source: ChurchNode, target: HistoricInnNode },
+    { source: ChurchNode, target: FarmsteadNode },
+    { source: HistoricInnNode, target: FarmsteadNode },
+    { source: FarmsteadNode, target: SwampNode },
+    { source: SwampNode, target: GreatHallNode },
+
+    { source: JunkyardNode, target: PawnShopNode },
+    { source: PawnShopNode, target: HospitalNode },
+    { source: HospitalNode, target: FactoryNode },
+    { source: FactoryNode, target: PawnShopNode },
+    { source: FactoryNode, target: BoardwalkNode },
+    { source: BoardwalkNode, target: DocksNode },
+    { source: DocksNode, target: WoodsNode },
+
+    { source: GreatHallNode, target: WoodsNode },
+    { source: WoodsNode, target: MarketNode },
+    { source: MarketNode, target: GreatHallNode },
+    { source: MarketNode, target: TheaterNode },
+    { source: MarketNode, target: WharfNode },
+    { source: WharfNode, target: GraveyardNode },
+  ],
+};