add hyperspace roll

website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace.tsx

@@ -0,0 +1,30 @@
+import { ShowcaseGame, shuffle } from "@/app/showcase/games";
+import h1 from "./hyperspace-roll-0.png";
+import h2 from "./hyperspace-roll-1.png";
+
+const Screenshots = [h1, h2];
+
+export const Hyperspace: ShowcaseGame = {
+  name: "Hyperspace Roll",
+  developers: shuffle(["Corwin Kuiper", "Gwilym Inzani", "Sam Williams"]),
+  screenshots: Screenshots,
+  description: (
+    <>
+      <p>
+        Get through as many levels as possible in this space themed, dice
+        rolling roguelike.
+      </p>
+      <p>
+        Build up powerful combos to defeat enemies which keep getting stronger.
+        Slowly acquire more dice and upgrade them in order to handle the
+        increasing strength of the enemies you face.
+      </p>
+
+      <p>
+        Hyperspace Roll was influenced by great games such as Slay the Spire,
+        FTL and the board game Escape: The Curse of the Temple.
+      </p>
+    </>
+  ),
+  itch: new URL("https://lostimmortal.itch.io/the-purple-night"),
+};

website/agb/src/app/showcase/games.tsx

@@ -2,6 +2,7 @@ import { StaticImageData } from "next/image";
 import { ReactNode } from "react";
 import { HatWiz } from "./data/tapir/hatwiz/hatwiz";
 import { Purple } from "./data/tapir/purple/purple";
+import { Hyperspace } from "./data/tapir/hyperspace/hyperspace";
 
 export interface ShowcaseGame {
   name: string;
@@ -24,4 +25,4 @@ export function shuffle<T>(a: T[]) {
   return a;
 }
 
-export const Games: ShowcaseGame[] = [HatWiz, Purple];
+export const Games: ShowcaseGame[] = [HatWiz, Purple, Hyperspace];

website/agb/src/app/showcase/page.tsx

@@ -1,10 +1,8 @@
 import { Metadata } from "next";
 import { ContentBlock } from "@/components/contentBlock";
 import { Games, ShowcaseGame } from "./games";
-import Link from "next/link";
 import { slugify } from "@/sluggify";
 import { GameDisplay, GameGrid, GameImage } from "./styles";
-import Image from "next/image";
 
 export const metadata: Metadata = {
   title: "Games made with agb",
@@ -28,15 +26,11 @@ export default function ColourPickerPage() {
 }
 
 function Game({ game }: { game: ShowcaseGame }) {
-  const lastImage = game.screenshots[game.screenshots.length - 1];
+  const showcaseImage = game.screenshots[game.screenshots.length - 1];
   return (
-    <GameDisplay>
-      <Link href={`./showcase/${slugify(game.name)}`}>
-        <GameImage>
-          <Image src={lastImage} alt={`Screenshot of ${game.name}`} />
-        </GameImage>
-        <h2>{game.name}</h2>
-      </Link>
+    <GameDisplay href={`./showcase/${slugify(game.name)}`}>
+      <GameImage src={showcaseImage} alt={`Screenshot of ${game.name}`} />
+      <h2>{game.name}</h2>
     </GameDisplay>
   );
 }

website/agb/src/app/showcase/styles.tsx

@@ -1,6 +1,8 @@
 "use client";
 
+import Link from "next/link";
 import styled from "styled-components";
+import Image from "next/image";
 
 export const GameGrid = styled.div`
   display: flex;
@@ -8,22 +10,18 @@ export const GameGrid = styled.div`
   justify-content: center;
 `;
 
-export const GameImage = styled.div`
-  img {
-    width: 100%;
-    width: round(down, 100%, 240px);
-    height: auto;
-    image-rendering: pixelated;
-  }
+export const GameImage = styled(Image)`
+  width: 100%;
+  width: round(down, 100%, 240px);
+  height: auto;
+  image-rendering: pixelated;
 `;
 
-export const GameDisplay = styled.div`
+export const GameDisplay = styled(Link)`
   width: 600px;
-  a {
-    text-align: center;
-    color: black;
-    text-decoration: none;
-  }
+  text-align: center;
+  color: black;
+  text-decoration: none;
 
   h2 {
     margin: 0;