Skip to content

Commit

Permalink
[#17] feature: add game map, revise tailwind color styling declaratio…
Browse files Browse the repository at this point in the history
…n to allow color to be used as var
  • Loading branch information
wingtkw committed Dec 28, 2023
1 parent 7bba139 commit 7543baf
Show file tree
Hide file tree
Showing 18 changed files with 1,243 additions and 42 deletions.
7 changes: 7 additions & 0 deletions frontend/app/game/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function GameLayout({
children,
}: {
children: React.ReactNode;
}) {
return <div className="h-screen">{children}</div>;
}
16 changes: 16 additions & 0 deletions frontend/app/game/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
54 changes: 19 additions & 35 deletions frontend/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,25 @@
--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%;
Expand Down Expand Up @@ -73,38 +79,16 @@
body {
@apply bg-background text-foreground;
}
html,
body {
height: 100%;
}
}

@layer utilities {
.text-outline-2 {
text-shadow: -2px -2px 0 #000, -2px -1px 0 #000, -2px 0px 0 #000, -2px 1px 0 #000,
-2px 2px 0 #000, -1px -2px 0 #000, -1px -1px 0 #000, -1px 0px 0 #000, -1px 1px 0 #000,
-1px 2px 0 #000, 0px -2px 0 #000, 0px -1px 0 #000, 0px 0px 0 #000, 0px 1px 0 #000,
0px 2px 0 #000, 1px -2px 0 #000, 1px -1px 0 #000, 1px 0px 0 #000, 1px 1px 0 #000,
1px 2px 0 #000, 2px -2px 0 #000, 2px -1px 0 #000, 2px 0px 0 #000, 2px 1px 0 #000,
2px 2px 0 #000;
}
.text-outline-4 {
text-shadow: -4px -4px 0 #000, -4px -3px 0 #000, -4px -2px 0 #000, -4px -1px 0 #000,
-4px 0px 0 #000, -4px 1px 0 #000, -4px 2px 0 #000, -4px 3px 0 #000, -4px 4px 0 #000,
-3px -4px 0 #000, -3px -3px 0 #000, -3px -2px 0 #000, -3px -1px 0 #000, -3px 0px 0 #000,
-3px 1px 0 #000, -3px 2px 0 #000, -3px 3px 0 #000, -3px 4px 0 #000, -2px -4px 0 #000,
-2px -3px 0 #000, -2px -2px 0 #000, -2px -1px 0 #000, -2px 0px 0 #000, -2px 1px 0 #000,
-2px 2px 0 #000, -2px 3px 0 #000, -2px 4px 0 #000, -1px -4px 0 #000, -1px -3px 0 #000,
-1px -2px 0 #000, -1px -1px 0 #000, -1px 0px 0 #000, -1px 1px 0 #000, -1px 2px 0 #000,
-1px 3px 0 #000, -1px 4px 0 #000, 0px -4px 0 #000, 0px -3px 0 #000, 0px -2px 0 #000,
0px -1px 0 #000, 0px 0px 0 #000, 0px 1px 0 #000, 0px 2px 0 #000, 0px 3px 0 #000,
0px 4px 0 #000, 1px -4px 0 #000, 1px -3px 0 #000, 1px -2px 0 #000, 1px -1px 0 #000,
1px 0px 0 #000, 1px 1px 0 #000, 1px 2px 0 #000, 1px 3px 0 #000, 1px 4px 0 #000,
2px -4px 0 #000, 2px -3px 0 #000, 2px -2px 0 #000, 2px -1px 0 #000, 2px 0px 0 #000,
2px 1px 0 #000, 2px 2px 0 #000, 2px 3px 0 #000, 2px 4px 0 #000, 3px -4px 0 #000,
3px -3px 0 #000, 3px -2px 0 #000, 3px -1px 0 #000, 3px 0px 0 #000, 3px 1px 0 #000,
3px 2px 0 #000, 3px 3px 0 #000, 3px 4px 0 #000, 4px -4px 0 #000, 4px -3px 0 #000,
4px -2px 0 #000, 4px -1px 0 #000, 4px 0px 0 #000, 4px 1px 0 #000, 4px 2px 0 #000,
4px 3px 0 #000, 4px 4px 0 #000;
}
.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);
}
Binary file added frontend/assets/background.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions frontend/components/background.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
3 changes: 3 additions & 0 deletions frontend/components/map/constants/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export * from './map-data'
export * from './nodes'
export * from './styling'
98 changes: 98 additions & 0 deletions frontend/components/map/constants/map-data.ts
Original file line number Diff line number Diff line change
@@ -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 },
],
};
Loading

0 comments on commit 7543baf

Please sign in to comment.