- You likely got here from the link / QR code that was displayed when a
- game you were playing crashed. This is the default crash page for games
- made using the agb library.
-
-
- The creator of the game is very likely interested in the code
- below along with a description of what you were doing at the
- time.{" "}
- Send these to the creator of the game you are playing.
-
-
-
-
- The owners of this website are not necessarily the creators of the
- game you are playing.
-
-
-
Backtrace
- {backtrace && }
-
-
+ <>
+
+
agbrs crash backtrace viewer
+
+
+
+ You likely got here from the link / QR code that was displayed when a
+ game you were playing crashed. This is the default crash page for
+ games made using the agb library.
+
+
+ The creator of the game is very likely interested in the code
+ below along with a description of what you were doing at the
+ time.{" "}
+
+ Send these to the creator of the game you are playing.
+
+
+
+
+
+ The owners of this website are not necessarily the creators of the
+ game you are playing.
+
+
+
Backtrace
+ {backtrace && }
+
+
+
);
}
diff --git a/website/agb/src/app/crash/debug.tsx b/website/agb/src/app/crash/debug.tsx
index a573cef2..19eeb3cd 100644
--- a/website/agb/src/app/crash/debug.tsx
+++ b/website/agb/src/app/crash/debug.tsx
@@ -1,5 +1,9 @@
import { styled } from "styled-components";
-import { AddressInfo, AgbDebug, useAgbDebug } from "../useAgbDebug.hook";
+import {
+ AddressInfo,
+ AgbDebug,
+ useAgbDebug,
+} from "../../hooks/useAgbDebug.hook";
import { ReactNode, useMemo, useState } from "react";
const BacktraceListWrapper = styled.div`
diff --git a/website/agb/src/app/layout.tsx b/website/agb/src/app/layout.tsx
index 60d9b5d5..1a751f95 100644
--- a/website/agb/src/app/layout.tsx
+++ b/website/agb/src/app/layout.tsx
@@ -1,6 +1,6 @@
import type { Metadata } from "next";
import "./globalStyles.css";
-import StyledComponentsRegistry from "./registry";
+import StyledComponentsRegistry, { BodyPixelRatio } from "./registry";
export const metadata: Metadata = {
title: "agb - a rust framework for making Game Boy Advance games",
@@ -13,9 +13,9 @@ export default function RootLayout({
}>) {
return (
-
- {children}
-
+
+ {children}
+
);
}
diff --git a/website/agb/src/app/gba-parts/left.png b/website/agb/src/app/left.png
similarity index 100%
rename from website/agb/src/app/gba-parts/left.png
rename to website/agb/src/app/left.png
diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx
index 0f8e833a..ca51a90d 100644
--- a/website/agb/src/app/page.tsx
+++ b/website/agb/src/app/page.tsx
@@ -1,35 +1,18 @@
"use client";
import styled from "styled-components";
-import { CenteredBlock, ContentBlock } from "./contentBlock";
-import MgbaWrapper from "./mgba/mgbaWrapper";
+import { CenteredBlock, ContentBlock } from "../components/contentBlock";
+import MgbaWrapper from "../components/mgba/mgbaWrapper";
import Image from "next/image";
-import left from "./gba-parts/left.png";
-import right from "./gba-parts/right.png";
-import { MobileController } from "./mobileController";
+import left from "./left.png";
+import right from "./right.png";
+import { MobileController } from "../components/mobileController/mobileController";
import { useMemo, useRef, useState } from "react";
-import { GbaKey } from "./mgba/bindings";
-import { useClientValue } from "./useClientValue.hook";
-import { MgbaHandle } from "./mgba/mgba";
-
-const ExternalLink = styled.a`
- text-decoration: none;
- color: black;
- background-color: #fad288;
- border: solid #fad288 2px;
- border-radius: 5px;
- padding: 5px 10px;
-
- &:hover {
- border: solid black 2px;
- }
-`;
-
-const HelpLinks = styled.div`
- display: flex;
- justify-content: space-around;
-`;
+import { GbaKey } from "../components/mgba/bindings";
+import { useClientValue } from "../hooks/useClientValue.hook";
+import { MgbaHandle } from "../components/mgba/mgba";
+import { ExternalLink, ExternalLinkBlock } from "@/components/externalLink";
const GameDisplay = styled.div`
height: min(calc(100vw / 1.5), min(90vh, 480px));
@@ -78,7 +61,7 @@ function shouldStartPlaying(isTouchScreen: boolean | undefined) {
return !isTouchScreen;
}
-const COMBO_GAME = new URL("combo.gba.gz", import.meta.url);
+const COMBO_GAME = new URL("../roms/combo.gba.gz", import.meta.url);
function MgbaWithControllerSides() {
const mgba = useRef(null);
@@ -136,14 +119,14 @@ function MgbaWithControllerSides() {
export default function Home() {
return (
<>
-
+
agb - a rust framework for making Game Boy Advance games
-
-
+
+
GitHub
@@ -151,7 +134,8 @@ export default function Home() {
Docs
-
+ Showcase
+
);
diff --git a/website/agb/src/app/registry.tsx b/website/agb/src/app/registry.tsx
index fa12293e..e19526b5 100644
--- a/website/agb/src/app/registry.tsx
+++ b/website/agb/src/app/registry.tsx
@@ -1,8 +1,8 @@
"use client";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
import { useServerInsertedHTML } from "next/navigation";
-import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+import styled, { ServerStyleSheet, StyleSheetManager } from "styled-components";
export default function StyledComponentsRegistry({
children,
@@ -27,3 +27,18 @@ export default function StyledComponentsRegistry({
);
}
+
+const BodyWithPixelRatio = styled.body<{
+ $pixel: number;
+}>`
+ --device-pixel: calc(1px / ${(props) => props.$pixel});
+`;
+
+export function BodyPixelRatio({ children }: { children: React.ReactNode }) {
+ const [pixel, setPixel] = useState(1);
+ useEffect(() => {
+ setPixel(window.devicePixelRatio);
+ }, []);
+
+ return {children};
+}
diff --git a/website/agb/src/app/gba-parts/right.png b/website/agb/src/app/right.png
similarity index 100%
rename from website/agb/src/app/gba-parts/right.png
rename to website/agb/src/app/right.png
diff --git a/website/agb/src/app/showcase/[game]/page.tsx b/website/agb/src/app/showcase/[game]/page.tsx
new file mode 100644
index 00000000..3431e798
--- /dev/null
+++ b/website/agb/src/app/showcase/[game]/page.tsx
@@ -0,0 +1,81 @@
+import { slugify } from "@/sluggify";
+import { Games, ShowcaseGame } from "../games";
+import { ContentBlock } from "@/components/contentBlock";
+import { ExternalLink, ExternalLinkBlock } from "@/components/externalLink";
+import Link from "next/link";
+import {
+ BackToShowcaseWrapper,
+ DescriptionAndScreenshots,
+ Description,
+ Screenshots,
+} from "./styles";
+
+export async function generateStaticParams() {
+ return Games.map((game) => ({
+ game: slugify(game.name),
+ }));
+}
+
+function getGame(slug: string) {
+ const game = Games.find((game) => slugify(game.name) === slug);
+ if (!game) {
+ throw new Error("Not valid game name, this should never happen");
+ }
+
+ return game;
+}
+
+export function generateMetadata({ params }: { params: { game: string } }) {
+ const game = getGame(params.game);
+ return { title: game.name };
+}
+
+export default function Page({ params }: { params: { game: string } }) {
+ const game = getGame(params.game);
+ return ;
+}
+
+function DeveloperNames({ names }: { names: string[] }) {
+ if (names.length === 0) {
+ throw new Error("You must specify developer names");
+ }
+ if (names.length === 1) {
+ return names[0];
+ }
+ if (names.length === 2) {
+ return names.join(" and ");
+ }
+ const first = names.slice(0, -1);
+ return first.join(", ") + `, and ${names[names.length - 1]}`;
+}
+
+function Display({ game }: { game: ShowcaseGame }) {
+ return (
+ <>
+
+
+
+ < Back to showcase
+
+
+
+ Get through as many levels as possible in this space themed, dice
+ rolling roguelike.
+
+
+ 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.
+
+
+
+ Hyperspace Roll was influenced by great games such as Slay the Spire,
+ FTL and the board game Escape: The Curse of the Temple.
+
+
+ ),
+ itch: new URL("https://setsquare.itch.io/dungeon-puzzlers-lament"),
+};
diff --git a/website/agb/src/app/showcase/data/tapir/dungeon/the-dungeon-puzzlers-lament-0.png b/website/agb/src/app/showcase/data/tapir/dungeon/the-dungeon-puzzlers-lament-0.png
new file mode 100644
index 00000000..7129214d
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/dungeon/the-dungeon-puzzlers-lament-0.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/dungeon/the-dungeon-puzzlers-lament-1.png b/website/agb/src/app/showcase/data/tapir/dungeon/the-dungeon-puzzlers-lament-1.png
new file mode 100644
index 00000000..d73f1047
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/dungeon/the-dungeon-puzzlers-lament-1.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/hatwiz/hatwiz.tsx b/website/agb/src/app/showcase/data/tapir/hatwiz/hatwiz.tsx
new file mode 100644
index 00000000..efe9ad52
--- /dev/null
+++ b/website/agb/src/app/showcase/data/tapir/hatwiz/hatwiz.tsx
@@ -0,0 +1,43 @@
+import { ShowcaseGame, shuffle } from "../../../games";
+import h1 from "./the-hat-chooses-the-wizard-0.png";
+import h2 from "./the-hat-chooses-the-wizard-1.png";
+import h3 from "./the-hat-chooses-the-wizard-2.png";
+import h4 from "./the-hat-chooses-the-wizard-3.png";
+
+const HatWizScreenshots = [h1, h2, h3, h4];
+
+export const HatWiz: ShowcaseGame = {
+ name: "The Hat Chooses the Wizard",
+ developers: shuffle(["Corwin Kuiper", "Gwilym Inzani"]),
+ screenshots: HatWizScreenshots,
+ description: (
+ <>
+
+ ‘The Hat Chooses the Wizard’ is a 2D platformer. This game
+ was developed as an entry for the GMTK game jam 2021, with the theme
+ “joined together”. The entire game, except for the music,
+ was produced in just 48 hours.
+
+
+ In this game, you play as a wizard searching for his missing staff.
+ However, the path to the staff is filled with dangerous obstacles and
+ monsters. Luckily, you have a powerful magic hat that can be thrown and
+ recalled, allowing you to fly towards it and reach otherwise
+ inaccessible platforms.
+
+
+ With this unique mechanic, you can explore the game's levels and
+ defeat enemies. The game's simple but challenging gameplay will put
+ your platforming skills to the test as you try to reach the end.
+
+
+ ),
+ itch: new URL("https://lostimmortal.itch.io/the-hat-chooses-the-wizard"),
+};
diff --git a/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-0.png b/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-0.png
new file mode 100644
index 00000000..1dbe0a0f
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-0.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-1.png b/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-1.png
new file mode 100644
index 00000000..3c101a4d
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-1.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-2.png b/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-2.png
new file mode 100644
index 00000000..34e07902
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-2.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-3.png b/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-3.png
new file mode 100644
index 00000000..17130c0a
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-3.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace-roll-0.png b/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace-roll-0.png
new file mode 100644
index 00000000..d03f89eb
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace-roll-0.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace-roll-1.png b/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace-roll-1.png
new file mode 100644
index 00000000..47f792df
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace-roll-1.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace.tsx b/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace.tsx
new file mode 100644
index 00000000..945dc2dd
--- /dev/null
+++ b/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: (
+ <>
+
+ Get through as many levels as possible in this space themed, dice
+ rolling roguelike.
+
+
+ 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.
+
+
+
+ Hyperspace Roll was influenced by great games such as Slay the Spire,
+ FTL and the board game Escape: The Curse of the Temple.
+
Save a lost soul and take them safely back to the afterlife!
+
+ The purple night is a platformer game where your health bar is your
+ sword. The more damage you take, the shorter your sword gets, making you
+ more nimble and your attacks faster, but also increasing your risk.
+
+
+ Do you choose to stay at high health but low mobility, or low health and
+ higher mobility?
+
+
+ ),
+ itch: new URL("https://lostimmortal.itch.io/the-purple-night"),
+};
diff --git a/website/agb/src/app/showcase/data/tapir/purple/the-purple-night-0.png b/website/agb/src/app/showcase/data/tapir/purple/the-purple-night-0.png
new file mode 100644
index 00000000..3b39ff12
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/purple/the-purple-night-0.png differ
diff --git a/website/agb/src/app/showcase/data/tapir/purple/the-purple-night-1.png b/website/agb/src/app/showcase/data/tapir/purple/the-purple-night-1.png
new file mode 100644
index 00000000..ad53bb8a
Binary files /dev/null and b/website/agb/src/app/showcase/data/tapir/purple/the-purple-night-1.png differ
diff --git a/website/agb/src/app/showcase/games.tsx b/website/agb/src/app/showcase/games.tsx
new file mode 100644
index 00000000..952b1106
--- /dev/null
+++ b/website/agb/src/app/showcase/games.tsx
@@ -0,0 +1,34 @@
+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";
+import { Dungeon } from "./data/tapir/dungeon/dungeon";
+
+export interface ShowcaseGame {
+ name: string;
+ developers: string[];
+ rom?: URL;
+ screenshots: StaticImageData[];
+ description: ReactNode;
+ itch?: URL;
+ otherLink?: URL;
+}
+
+export function shuffle(a: T[]) {
+ var j, x, i;
+ for (i = a.length - 1; i > 0; i--) {
+ j = Math.floor(Math.random() * (i + 1));
+ x = a[i];
+ a[i] = a[j];
+ a[j] = x;
+ }
+ return a;
+}
+
+export const Games: ShowcaseGame[] = shuffle([
+ HatWiz,
+ Purple,
+ Hyperspace,
+ Dungeon,
+]);
diff --git a/website/agb/src/app/showcase/page.tsx b/website/agb/src/app/showcase/page.tsx
new file mode 100644
index 00000000..fcb2a42e
--- /dev/null
+++ b/website/agb/src/app/showcase/page.tsx
@@ -0,0 +1,39 @@
+import { Metadata } from "next";
+import { ContentBlock } from "@/components/contentBlock";
+import { Games, ShowcaseGame } from "./games";
+import { slugify } from "@/sluggify";
+import { GameDisplay, GameGrid, GameImage } from "./styles";
+
+export const metadata: Metadata = {
+ title: "Showcase - agb",
+};
+
+export default function ColourPickerPage() {
+ return (
+ <>
+
+