From 6d7e6f934ab74f822cde78a5ba98bc804b34afa6 Mon Sep 17 00:00:00 2001 From: Corwin Date: Sun, 28 Apr 2024 22:52:59 +0100 Subject: [PATCH 1/9] some sweeping changes that at some level involves adding a showcase --- justfile | 12 +-- website/agb/src/app/colour/colour.tsx | 82 +++++++-------- website/agb/src/app/crash/backtrace.tsx | 59 ++++++----- website/agb/src/app/crash/debug.tsx | 6 +- website/agb/src/app/{gba-parts => }/left.png | Bin website/agb/src/app/page.tsx | 37 +++---- website/agb/src/app/{gba-parts => }/right.png | Bin website/agb/src/app/showcase/[game]/page.tsx | 93 ++++++++++++++++++ .../agb/src/app/showcase/[game]/styled.tsx | 36 +++++++ .../app/showcase/data/tapir/hatwiz/hatwiz.tsx | 43 ++++++++ .../hatwiz/the-hat-chooses-the-wizard-0.png | Bin 0 -> 2741 bytes .../hatwiz/the-hat-chooses-the-wizard-1.png | Bin 0 -> 4306 bytes .../hatwiz/the-hat-chooses-the-wizard-2.png | Bin 0 -> 3852 bytes .../hatwiz/the-hat-chooses-the-wizard-3.png | Bin 0 -> 3619 bytes .../app/showcase/data/tapir/purple/purple.tsx | 26 +++++ .../data/tapir/purple/the-purple-night-0.png | Bin 0 -> 2088 bytes .../data/tapir/purple/the-purple-night-1.png | Bin 0 -> 3346 bytes website/agb/src/app/showcase/games.tsx | 27 +++++ website/agb/src/app/showcase/page.tsx | 42 ++++++++ website/agb/src/app/showcase/styles.tsx | 32 ++++++ .../src/{app => components}/contentBlock.tsx | 0 website/agb/src/components/externalLink.tsx | 16 +++ .../src/{app => components}/mgba/Slider.tsx | 0 .../src/{app => components}/mgba/bindings.tsx | 0 .../{app => components}/mgba/globalStyles.ts | 0 .../agb/src/{app => components}/mgba/mgba.tsx | 0 .../{app => components}/mgba/mgbaWrapper.tsx | 0 .../mgba/useAvoidItchIoScrolling.ts | 0 .../mgba/useController.hook.ts | 0 .../mgba/useFrameSkip.hook.ts | 0 .../mgba/useLocalStorage.hook.ts | 0 .../mgba/useOnKeyUp.hook.ts | 0 .../mobileController}/gba-parts/L.png | Bin .../mobileController}/gba-parts/R.png | Bin .../mobileController}/gba-parts/SELECT.png | Bin .../mobileController}/gba-parts/START.png | Bin .../mobileController}/gba-parts/ab.png | Bin .../mobileController}/gba-parts/dpad.png | Bin .../mobileController}/mobileController.tsx | 6 +- .../src/{app => hooks}/useAgbDebug.hook.ts | 2 +- .../src/{app => hooks}/useClientValue.hook.ts | 0 website/agb/src/sluggify.ts | 3 + 42 files changed, 423 insertions(+), 99 deletions(-) rename website/agb/src/app/{gba-parts => }/left.png (100%) rename website/agb/src/app/{gba-parts => }/right.png (100%) create mode 100644 website/agb/src/app/showcase/[game]/page.tsx create mode 100644 website/agb/src/app/showcase/[game]/styled.tsx create mode 100644 website/agb/src/app/showcase/data/tapir/hatwiz/hatwiz.tsx create mode 100644 website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-0.png create mode 100644 website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-1.png create mode 100644 website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-2.png create mode 100644 website/agb/src/app/showcase/data/tapir/hatwiz/the-hat-chooses-the-wizard-3.png create mode 100644 website/agb/src/app/showcase/data/tapir/purple/purple.tsx create mode 100644 website/agb/src/app/showcase/data/tapir/purple/the-purple-night-0.png create mode 100644 website/agb/src/app/showcase/data/tapir/purple/the-purple-night-1.png create mode 100644 website/agb/src/app/showcase/games.tsx create mode 100644 website/agb/src/app/showcase/page.tsx create mode 100644 website/agb/src/app/showcase/styles.tsx rename website/agb/src/{app => components}/contentBlock.tsx (100%) create mode 100644 website/agb/src/components/externalLink.tsx rename website/agb/src/{app => components}/mgba/Slider.tsx (100%) rename website/agb/src/{app => components}/mgba/bindings.tsx (100%) rename website/agb/src/{app => components}/mgba/globalStyles.ts (100%) rename website/agb/src/{app => components}/mgba/mgba.tsx (100%) rename website/agb/src/{app => components}/mgba/mgbaWrapper.tsx (100%) rename website/agb/src/{app => components}/mgba/useAvoidItchIoScrolling.ts (100%) rename website/agb/src/{app => components}/mgba/useController.hook.ts (100%) rename website/agb/src/{app => components}/mgba/useFrameSkip.hook.ts (100%) rename website/agb/src/{app => components}/mgba/useLocalStorage.hook.ts (100%) rename website/agb/src/{app => components}/mgba/useOnKeyUp.hook.ts (100%) rename website/agb/src/{app => components/mobileController}/gba-parts/L.png (100%) rename website/agb/src/{app => components/mobileController}/gba-parts/R.png (100%) rename website/agb/src/{app => components/mobileController}/gba-parts/SELECT.png (100%) rename website/agb/src/{app => components/mobileController}/gba-parts/START.png (100%) rename website/agb/src/{app => components/mobileController}/gba-parts/ab.png (100%) rename website/agb/src/{app => components/mobileController}/gba-parts/dpad.png (100%) rename website/agb/src/{app => components/mobileController}/mobileController.tsx (97%) rename website/agb/src/{app => hooks}/useAgbDebug.hook.ts (94%) rename website/agb/src/{app => hooks}/useClientValue.hook.ts (100%) create mode 100644 website/agb/src/sluggify.ts diff --git a/justfile b/justfile index e64dfb26..b59c3838 100644 --- a/justfile +++ b/justfile @@ -98,14 +98,14 @@ setup-cargo-wasm: build-website-backtrace: (cd website/backtrace && wasm-pack build --target web) - rm -rf website/agb/src/app/vendor/backtrace - mkdir -p website/agb/src/app/vendor - cp website/backtrace/pkg website/agb/src/app/vendor/backtrace -r + rm -rf website/agb/src/vendor/backtrace + mkdir -p website/agb/src/vendor + cp website/backtrace/pkg website/agb/src/vendor/backtrace -r build-mgba-wasm: - rm -rf website/agb/src/app/mgba/vendor - mkdir website/agb/src/app/mgba/vendor - {{podman_command}} build --file website/mgba-wasm/BuildMgbaWasm --output=website/agb/src/app/mgba/vendor . + rm -rf website/agb/src/components/mgba/vendor + mkdir website/agb/src/components/mgba/vendor + {{podman_command}} build --file website/mgba-wasm/BuildMgbaWasm --output=website/agb/src/components/mgba/vendor . build-combo-rom-site: just _build-rom "examples/combo" "AGBGAMES" diff --git a/website/agb/src/app/colour/colour.tsx b/website/agb/src/app/colour/colour.tsx index 77d11789..c9770737 100644 --- a/website/agb/src/app/colour/colour.tsx +++ b/website/agb/src/app/colour/colour.tsx @@ -1,6 +1,6 @@ "use client"; -import { ContentBlock } from "../contentBlock"; +import { ContentBlock } from "../../components/contentBlock"; import { useState } from "react"; import { styled } from "styled-components"; @@ -69,44 +69,48 @@ export default function ColourPicker() { } return ( - -

agbrs colour converter

- - -

Regular RGB8

- setHexColour(evt.target.value)} - /> - setHexColour(evt.target.value)} - /> - - -

GBA RGB5

- setGbaHexColour(evt.target.value)} - /> - setGbaHexColour(evt.target.value)} - /> - - setColour(fromRgb15(parseInt(evt.target.value, 16))) - } - /> - - - + <> + +

agbrs colour converter

+ + + + +

Regular RGB8

+ setHexColour(evt.target.value)} + /> + setHexColour(evt.target.value)} + /> + + +

GBA RGB5

+ setGbaHexColour(evt.target.value)} + /> + setGbaHexColour(evt.target.value)} + /> + + setColour(fromRgb15(parseInt(evt.target.value, 16))) + } + /> + + + + ); } diff --git a/website/agb/src/app/crash/backtrace.tsx b/website/agb/src/app/crash/backtrace.tsx index 589d1137..0eb7425c 100644 --- a/website/agb/src/app/crash/backtrace.tsx +++ b/website/agb/src/app/crash/backtrace.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; -import { ContentBlock } from "../contentBlock"; +import { ContentBlock } from "../../components/contentBlock"; import { GameDeveloperSummary } from "./gameDeveloperSummary"; import { styled } from "styled-components"; import { Debug } from "./debug"; @@ -14,30 +14,39 @@ export function BacktracePage() { }, []); return ( - -

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

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/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..225ede6d 100644 --- a/website/agb/src/app/page.tsx +++ b/website/agb/src/app/page.tsx @@ -1,30 +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; - } -`; +import { GbaKey } from "../components/mgba/bindings"; +import { useClientValue } from "../hooks/useClientValue.hook"; +import { MgbaHandle } from "../components/mgba/mgba"; +import { ExternalLink } from "@/components/externalLink"; const HelpLinks = styled.div` display: flex; @@ -78,7 +66,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,13 +124,13 @@ function MgbaWithControllerSides() { export default function Home() { return ( <> - +

agb - a rust framework for making Game Boy Advance games

 - + GitHub @@ -151,6 +139,7 @@ export default function Home() { Docs + Showcase 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..cf3b2138 --- /dev/null +++ b/website/agb/src/app/showcase/[game]/page.tsx @@ -0,0 +1,93 @@ +import { slugify } from "@/sluggify"; +import { Games, ShowcaseGame } from "../games"; +import { ContentBlock } from "@/components/contentBlock"; +import { ExternalLink } from "@/components/externalLink"; +import Link from "next/link"; +import Image, { StaticImageData } from "next/image"; +import { + ScreenshotsWrapper, + ScreenshotWrapper, + BackToShowcaseWrapper, + DescriptionAndScreenshots, + Description, +} from "./styled"; + +export async function generateStaticParams() { + return Games.map((game) => ({ + game: slugify(game.name), + })); +} + +export 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 Screenshots({ screenshots }: { screenshots: StaticImageData[] }) { + return ( + + {screenshots.map((screenshot) => ( + + + + ))} + + ); +} + +function Display({ game }: { game: ShowcaseGame }) { + return ( + <> + + + + < Back to showcase + + +

{game.name}

+
+ By: +
+ + + + {game.description} + + + + + {game.itch && ( + View on itch.io + )} + + + ); +} diff --git a/website/agb/src/app/showcase/[game]/styled.tsx b/website/agb/src/app/showcase/[game]/styled.tsx new file mode 100644 index 00000000..8ee4f0ce --- /dev/null +++ b/website/agb/src/app/showcase/[game]/styled.tsx @@ -0,0 +1,36 @@ +"use client"; + +import { styled } from "styled-components"; + +export const ScreenshotsWrapper = styled.div` + flex: 4; +`; + +export const ScreenshotWrapper = styled.div` + text-align: center; + img { + width: 100%; + width: round(down, 100%, 240px); + height: auto; + image-rendering: pixelated; + } +`; + +export const Description = styled.div` + flex: 5; + :first-child { + margin-top: 0; + } +`; + +export const DescriptionAndScreenshots = styled.div` + display: flex; + gap: 16px; +`; + +export const BackToShowcaseWrapper = styled.div` + a { + text-decoration: none; + color: black; + } +`; 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. +

+

+ The music is by Otto Halmén released under creative commons attribution + 3.0 and can be found here:{" "} + + opengameart.org/content/sylvan-waltz-standard-looped-version + +

+ + ), + 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 0000000000000000000000000000000000000000..1dbe0a0f9eeb8fbf956ef1d882a646bc3674525c GIT binary patch literal 2741 zcmbuBX*e6`8irM>ltaZbW{grP)v?7+V+lcPsihcI1g$aD&RAQ~|?gp;0g{+{bx=bRtk_xyOT=X>5i-~GNRw$``!dBu4-I5_yt z%}ngry2C!jJe=&it35)EgM&B5+{DNss$d%>?Y}xCK1g^>dO1*>1(4TABqjpH8m81A z8(XXCd}`od>?sWM09aG|dU});l>WBWB(6u{8aL;=?Py_S)XNFok>NIJGU^3jcj=XB zo^m+PxYM)d)GbPwTHdkOUi3)-y&oEP%zds0Nx0kr;K;uCY>;Z@jYnj&cjM zp!4DAVSc%aZKm7mk6Z_6b&nQU`ct7dDc4!AH@u>YOV=7#v=IJI7xi;*7MC(>Y;OS* zQibdRqO$pwacj%(81YXpkn~wJ{4c>vx-wL!KRj7qKjm`q+9pr7yo>AOOBu=<=*Z)7 z(7-BLic5J;XC=v|8JfOGReVSuBsvFz^5=8PN+Z=(LE=DQrq*I7?;&j%BpDagakLYm zT9j0wn-&ED1hz|D1!-&PLnqxJ@_W}AJ}!k)f|-6Ufwv`1`}p9Si6@59D?=g-^hL2z zr~JgHo&7KY5>5{qToq|{wOFtgCIGS<{Xhq_Jbwuw;jYo;NVu@!Urx(&RDrVG_$KE8 z{2wh!psD?!Yi0V(5cJa_I$%k>Dh(2GLues1+8|t+ZF!h#>_`sMzLMMo4z!@nA2xgG z(aIf5Gz0RI0LW{lli|J}j>iI zsVUk$7XpOvO3ZqG8!RRtHSIvr!m-KMAeXLNMPpweI~NIZRAz>NQ;+nfw86p6|IRw99GE~6y;E}3o}9E=&<=WO-wush1RTUXi} z4mN*1cd^Q(yuOc9R8}@eV=8*Kes0;(tr-=tzg^Ns;0@nIl3qM6__^mkQkezV&FG{C z?2r0-yRahF@0(wx#H47b488v}NXI@nPTO7gGKJqbAM)5G5CI6;JKcIuM`)WsUCG~Y--4C!Fi{Y(QnZZpLVL2C>vj+wz190|1%5fN>!)V$rMUo%oB^KW_;>=xrF z%6?y*;38TonN1ZM(eooouO`J$V%Jd`lcWl}iuYp4Z~+dXZ?y3)`SGZC;k>x6Vnx_< z>|`MvCxC$XZ+Yi3C@hd(z=()|r99buk|J>(*d=uOYcp z@fBVcFYEjHZfLxwAOu{Qo$L1onx}8w>ZxAgQIc4OUcS$Pm7NkeqE zRd1VH8i5CLO#oOlnD=Y$iY&1%+aZRpzH8MMgrS`z*D}4@u5>{6BF|ufzCw?H>CjI2 zx4-*rSm(^O5;~vWWM6ree{A5paC=dbJp81v|WTn&=NIy-y%-Zq2lt30$M2 zrs$oEdJ)P7pdJSHzdntG`q=ucc5l9M*RoM=;y5{&r4K6i0ds& zQ=-eO+-GXqe?HXzgOy2$9Nf!rdn0_(;iL;+qH85@gA6n&9OuK&AxWCW$$t9 zMU?lFRgzO=ExrO`3j~f;l-TSi#I;U1KH@Kut9Yq8Uh#EKc19#rMyknl?6iY%h&~1Y zV@Ddfz?F!C!#mSoRhiX&N-G|hgZyoMB=!iH%1qU9NPKtR^O4wrJ{b6RW=OtOp$cTl zW7++hR-DAwsP%sgrDNUST=$ZRngopTM&zXzad(cG?f{D}>sSjD_PoLzP^)Fr)}mZk zW^{&obs2)4lds9;ms<}}c_h)wPzJey9(mr)Q~d*v$Ltfqx({O^m* zcDKx< zFl&IQ{;9(0{>1dBl^eE1DveG#wqba*Fr=dyx$6n3Sy|KcqQB~eiIGUrX8Ukf0L$O< zY|-wF1hx5E-#1IzJhNC`Yb+Oaj*F+$%P!6mbxcf(a#}aT?^Ap|S7ML*6u%HvFOF#LVy8z?dpHu%l@r1_3YgESe38X Tz0w8tI?7>gYHfmnc_jWF)W=qC literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..3c101a4d097b007c96e88e79b995e2f0cee11a7e GIT binary patch literal 4306 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..34e07902598848eddb24ffe490c7a1b7b79efad0 GIT binary patch literal 3852 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 literal 0 HcmV?d00001 diff --git a/website/agb/src/app/showcase/data/tapir/purple/purple.tsx b/website/agb/src/app/showcase/data/tapir/purple/purple.tsx new file mode 100644 index 00000000..34fa37ec --- /dev/null +++ b/website/agb/src/app/showcase/data/tapir/purple/purple.tsx @@ -0,0 +1,26 @@ +import { ShowcaseGame, shuffle } from "@/app/showcase/games"; +import p1 from "./the-purple-night-0.png"; +import p2 from "./the-purple-night-1.png"; + +const Screenshots = [p1, p2]; + +export const Purple: ShowcaseGame = { + name: "The Purple Night", + developers: shuffle(["Corwin Kuiper", "Gwilym Inzani", "Sam Williams"]), + screenshots: Screenshots, + description: ( + <> +

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 0000000000000000000000000000000000000000..3b39ff1261224d40c251d0d01fa5799b8eb9cad0 GIT binary patch literal 2088 zcmb7`dpy&P7sr<;tYu3*%rzr&Dc2Is-Q1N;p}C|XNj1qOG<_{ImvX7(Qn~JNEAI{OCLCzB~E|AB~3K`d<@LBd2Tm3ag_pQ`_xr`B4RjrmmIA~VA>zkGGDYFd`HX4 z?n%ZuE5r!ZG@l|jTyK8~Q9K!T#0!B(O(&Q1!eqKA<@AQwr%L))9q-cj>>|xbds_~} z?EB0qQ@N&bDs~$kzCjU@5 zq&ghcbtA;9T5#oQWjFhyW$;6hZVTIY>M!@++X_4}I`)LVP5*kgD(C^N-R~c(iIrdj_%=h|gDH!_@|Hc8ehl!`)?^8Rj@P&S!?;&nhaGB6q z%+URVH7f!;It4?lqX&vRI7(uAW054qT;JP01Z5yP>6^*@_bD2QEJ8`gQ4gQ?cYIy$ zr}UQG_Vx#wHZ++|i$`CIYmbK%SC{}^%7dZ=Qp{;ECQy~%5-Tmm>?_bk}xCf*B|p)T=B4W;b|iTF%Aip zf@Q@Ed!yY&%02Tf4wZX`lXYaDSY_PVIGB9ZrwQ*Y8m{(D8(FJ{&d+h7W~yT4tkzWW z%uwg0Z3FJeB-V^w+jp`z6?Kv{q_$5!TLr4+48tb{+R6|f8)1$fTHwj*L9F$|64m#j z0uDgZ8TSf3eKYu+k@R~WVLNO;u=;2>^hR!z zR^HzC()14}N)j5vHZ}qm zq`Z6QW0r?RdrO*#?jpbCi;**6m1R3A6D&ofOGv~^hrPbAQ<2!tqhh}+ZgPGC$8uW6 zGtJ#TUV9yCY&41{W@oA%Xuww~g+A-xOj_rF+5*_=+^-OdT~FnRS(RSs|I)FDlI%D3Ped{VSNpmw5PAN6)zi+;Uo%v@XJhY#iim9tn5!_`ns8$ zvj?YcGgR}aTrx>w|NSpIb?dw!TAVAUk-G^1)ML2)#kH#hd5UW0igvZo*ZgzN(7mXX z1`s8$w07A2P2CC8ptPnk&c>RcYVEt?BEGJ$0C%`7h&L#>GzcUdbTXdJm}pu~d-JGf zaf*7&lADbJ<`o)SiD%ZuB#uqIKY6p|HOEY|tbckYkJlOfj5oV+R?7o;%o%0R#`fnL z^A}%o%uI?#)C(xW-inK;Sq1&m0Ke$r^%fnOPZevDd3%=4GYz7Y0OwbH2v@NM7-f4| z2yYp5cVaACbmlD2GU?l~6LIr+L(Usj#(6}a^l+;ygWcphK6E1v*}O5`w6<2?_zY7W zHLX$R4p2AicRza3VV`}aPe*)(&dZK;0)mA#b4K3Rt`-qrC5OT}xQIm@x5>xyQw4VG z!jj};k&>3CM_)Fb{CPco;ix?g+KZ84$m%_F3>E(wfXN8pv@C6ezaDn)LJ*(NZF#lC z`2tPEmN*aMIave^f2BVbmRZ|%-%n}f2shIvT328=m0(&5-Mr&4@3aa3HH|IHB6uGz z>mSvNr5y=W9Dh{P6U1jj^E+JW!Q-E(SM*BTl-3!+AIN743gQ-~9eqQ0Hx`L^pKqP0 z5PTmnuu;$|t?rq!r>UhJa*g(p!y?oS0+kZ<%3p&Eitloo;Thi|u{b;|1yDLaBCqc~ zWeAL<@gkp2*url{1#L#S6@@ge__5`54A&$`ei-Jm5Ta8bjm%jzNoO$590)lq_)`2J z2-^rYS5q&FU<@(6KhF=0nf$1H8$mRQmd>VH(0weIxY#GZ;MbzbARw4&Q3bS)Nz9Mi zL#$-CfbV0CJ*yXfPQGCWam|MQM5N`WF$H>w4L~Fw5#4zl1l!rkS_<lSd3dI}=h-|Gu$*TL8aAo_h!v Upijft+aCbP$qsE>h4Lf)3zu)_wEzGB literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..ad53bb8af36d6472a8d0c02a2e709662a41c4c8f GIT binary patch literal 3346 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 literal 0 HcmV?d00001 diff --git a/website/agb/src/app/showcase/games.tsx b/website/agb/src/app/showcase/games.tsx new file mode 100644 index 00000000..3ba4a542 --- /dev/null +++ b/website/agb/src/app/showcase/games.tsx @@ -0,0 +1,27 @@ +import { StaticImageData } from "next/image"; +import { ReactNode } from "react"; +import { HatWiz } from "./data/tapir/hatwiz/hatwiz"; +import { Purple } from "./data/tapir/purple/purple"; + +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[] = [HatWiz, Purple]; diff --git a/website/agb/src/app/showcase/page.tsx b/website/agb/src/app/showcase/page.tsx new file mode 100644 index 00000000..7387c023 --- /dev/null +++ b/website/agb/src/app/showcase/page.tsx @@ -0,0 +1,42 @@ +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", +}; + +export default function ColourPickerPage() { + return ( + <> + +

Showcase

+ + + + {Games.map((game, idx) => ( + + ))} + + + + ); +} + +function Game({ game }: { game: ShowcaseGame }) { + const lastImage = game.screenshots[game.screenshots.length - 1]; + return ( + + + + {`Screenshot + +

{game.name}

+ + + ); +} diff --git a/website/agb/src/app/showcase/styles.tsx b/website/agb/src/app/showcase/styles.tsx new file mode 100644 index 00000000..0b7a5395 --- /dev/null +++ b/website/agb/src/app/showcase/styles.tsx @@ -0,0 +1,32 @@ +"use client"; + +import styled from "styled-components"; + +export const GameGrid = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: center; +`; + +export const GameImage = styled.div` + img { + width: 100%; + width: round(down, 100%, 240px); + height: auto; + image-rendering: pixelated; + } +`; + +export const GameDisplay = styled.div` + width: 600px; + a { + text-align: center; + color: black; + text-decoration: none; + } + + h2 { + margin: 0; + margin-top: 8px; + } +`; diff --git a/website/agb/src/app/contentBlock.tsx b/website/agb/src/components/contentBlock.tsx similarity index 100% rename from website/agb/src/app/contentBlock.tsx rename to website/agb/src/components/contentBlock.tsx diff --git a/website/agb/src/components/externalLink.tsx b/website/agb/src/components/externalLink.tsx new file mode 100644 index 00000000..fe1aa40a --- /dev/null +++ b/website/agb/src/components/externalLink.tsx @@ -0,0 +1,16 @@ +"use client"; +import Link from "next/link"; +import { styled } from "styled-components"; + +export const ExternalLink = styled(Link)` + text-decoration: none; + color: black; + background-color: #fad288; + border: solid #fad288 2px; + border-radius: 5px; + padding: 5px 10px; + + &:hover { + border: solid black 2px; + } +`; diff --git a/website/agb/src/app/mgba/Slider.tsx b/website/agb/src/components/mgba/Slider.tsx similarity index 100% rename from website/agb/src/app/mgba/Slider.tsx rename to website/agb/src/components/mgba/Slider.tsx diff --git a/website/agb/src/app/mgba/bindings.tsx b/website/agb/src/components/mgba/bindings.tsx similarity index 100% rename from website/agb/src/app/mgba/bindings.tsx rename to website/agb/src/components/mgba/bindings.tsx diff --git a/website/agb/src/app/mgba/globalStyles.ts b/website/agb/src/components/mgba/globalStyles.ts similarity index 100% rename from website/agb/src/app/mgba/globalStyles.ts rename to website/agb/src/components/mgba/globalStyles.ts diff --git a/website/agb/src/app/mgba/mgba.tsx b/website/agb/src/components/mgba/mgba.tsx similarity index 100% rename from website/agb/src/app/mgba/mgba.tsx rename to website/agb/src/components/mgba/mgba.tsx diff --git a/website/agb/src/app/mgba/mgbaWrapper.tsx b/website/agb/src/components/mgba/mgbaWrapper.tsx similarity index 100% rename from website/agb/src/app/mgba/mgbaWrapper.tsx rename to website/agb/src/components/mgba/mgbaWrapper.tsx diff --git a/website/agb/src/app/mgba/useAvoidItchIoScrolling.ts b/website/agb/src/components/mgba/useAvoidItchIoScrolling.ts similarity index 100% rename from website/agb/src/app/mgba/useAvoidItchIoScrolling.ts rename to website/agb/src/components/mgba/useAvoidItchIoScrolling.ts diff --git a/website/agb/src/app/mgba/useController.hook.ts b/website/agb/src/components/mgba/useController.hook.ts similarity index 100% rename from website/agb/src/app/mgba/useController.hook.ts rename to website/agb/src/components/mgba/useController.hook.ts diff --git a/website/agb/src/app/mgba/useFrameSkip.hook.ts b/website/agb/src/components/mgba/useFrameSkip.hook.ts similarity index 100% rename from website/agb/src/app/mgba/useFrameSkip.hook.ts rename to website/agb/src/components/mgba/useFrameSkip.hook.ts diff --git a/website/agb/src/app/mgba/useLocalStorage.hook.ts b/website/agb/src/components/mgba/useLocalStorage.hook.ts similarity index 100% rename from website/agb/src/app/mgba/useLocalStorage.hook.ts rename to website/agb/src/components/mgba/useLocalStorage.hook.ts diff --git a/website/agb/src/app/mgba/useOnKeyUp.hook.ts b/website/agb/src/components/mgba/useOnKeyUp.hook.ts similarity index 100% rename from website/agb/src/app/mgba/useOnKeyUp.hook.ts rename to website/agb/src/components/mgba/useOnKeyUp.hook.ts diff --git a/website/agb/src/app/gba-parts/L.png b/website/agb/src/components/mobileController/gba-parts/L.png similarity index 100% rename from website/agb/src/app/gba-parts/L.png rename to website/agb/src/components/mobileController/gba-parts/L.png diff --git a/website/agb/src/app/gba-parts/R.png b/website/agb/src/components/mobileController/gba-parts/R.png similarity index 100% rename from website/agb/src/app/gba-parts/R.png rename to website/agb/src/components/mobileController/gba-parts/R.png diff --git a/website/agb/src/app/gba-parts/SELECT.png b/website/agb/src/components/mobileController/gba-parts/SELECT.png similarity index 100% rename from website/agb/src/app/gba-parts/SELECT.png rename to website/agb/src/components/mobileController/gba-parts/SELECT.png diff --git a/website/agb/src/app/gba-parts/START.png b/website/agb/src/components/mobileController/gba-parts/START.png similarity index 100% rename from website/agb/src/app/gba-parts/START.png rename to website/agb/src/components/mobileController/gba-parts/START.png diff --git a/website/agb/src/app/gba-parts/ab.png b/website/agb/src/components/mobileController/gba-parts/ab.png similarity index 100% rename from website/agb/src/app/gba-parts/ab.png rename to website/agb/src/components/mobileController/gba-parts/ab.png diff --git a/website/agb/src/app/gba-parts/dpad.png b/website/agb/src/components/mobileController/gba-parts/dpad.png similarity index 100% rename from website/agb/src/app/gba-parts/dpad.png rename to website/agb/src/components/mobileController/gba-parts/dpad.png diff --git a/website/agb/src/app/mobileController.tsx b/website/agb/src/components/mobileController/mobileController.tsx similarity index 97% rename from website/agb/src/app/mobileController.tsx rename to website/agb/src/components/mobileController/mobileController.tsx index d3537961..9fdd845d 100644 --- a/website/agb/src/app/mobileController.tsx +++ b/website/agb/src/components/mobileController/mobileController.tsx @@ -1,4 +1,4 @@ -import { FC, useMemo, useState } from "react"; +import { useMemo, useState } from "react"; import styled from "styled-components"; import Image from "next/image"; @@ -8,8 +8,8 @@ import DPad from "./gba-parts/dpad.png"; import ABButtons from "./gba-parts/ab.png"; import Select from "./gba-parts/SELECT.png"; import Start from "./gba-parts/START.png"; -import { GbaKey } from "./mgba/bindings"; -import { MgbaHandle } from "./mgba/mgba"; +import { GbaKey } from "../mgba/bindings"; +import { MgbaHandle } from "../mgba/mgba"; const MobileControls = styled.div` display: flex; diff --git a/website/agb/src/app/useAgbDebug.hook.ts b/website/agb/src/hooks/useAgbDebug.hook.ts similarity index 94% rename from website/agb/src/app/useAgbDebug.hook.ts rename to website/agb/src/hooks/useAgbDebug.hook.ts index 4ed74e4e..79fc477e 100644 --- a/website/agb/src/app/useAgbDebug.hook.ts +++ b/website/agb/src/hooks/useAgbDebug.hook.ts @@ -4,7 +4,7 @@ import debugInit, { DebugFile, InitOutput, AddressInfo, -} from "./vendor/backtrace/backtrace"; +} from "../vendor/backtrace/backtrace"; let agbDebug: Promise | undefined; diff --git a/website/agb/src/app/useClientValue.hook.ts b/website/agb/src/hooks/useClientValue.hook.ts similarity index 100% rename from website/agb/src/app/useClientValue.hook.ts rename to website/agb/src/hooks/useClientValue.hook.ts diff --git a/website/agb/src/sluggify.ts b/website/agb/src/sluggify.ts new file mode 100644 index 00000000..b02353b9 --- /dev/null +++ b/website/agb/src/sluggify.ts @@ -0,0 +1,3 @@ +export function slugify(x: string) { + return x.toLowerCase().split(" ").join("-"); +} From 7590a3592140579108e4b2d930d0a20d2ff87592 Mon Sep 17 00:00:00 2001 From: Corwin Date: Sun, 28 Apr 2024 23:00:03 +0100 Subject: [PATCH 2/9] add hyperspace roll --- .../tapir/hyperspace/hyperspace-roll-0.png | Bin 0 -> 2867 bytes .../tapir/hyperspace/hyperspace-roll-1.png | Bin 0 -> 2605 bytes .../data/tapir/hyperspace/hyperspace.tsx | 30 ++++++++++++++++++ website/agb/src/app/showcase/games.tsx | 3 +- website/agb/src/app/showcase/page.tsx | 14 +++----- website/agb/src/app/showcase/styles.tsx | 24 +++++++------- 6 files changed, 47 insertions(+), 24 deletions(-) create mode 100644 website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace-roll-0.png create mode 100644 website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace-roll-1.png create mode 100644 website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace.tsx 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 0000000000000000000000000000000000000000..d03f89eb63d4f9e4d425beb57f25f98c33de41e7 GIT binary patch literal 2867 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 RPG|rC002ovPDHLkV1jk6fqMV| literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..47f792dfd0a9df3f305ef526ea840520ebc984e3 GIT binary patch literal 2605 zcmV+|3exq7P) zEqL2F7{}kc=RnF@)`NyQ*0L1_`e0ySj$PTtuCQZ+8@s^395gK4SjsNYaAP;tzynG& zRgymqu#C~tOcY+AS-@~7NP6yy0~3L zS{cX{N1;DVCcb;(LiPPH@if`{S|)Zp$$7W3+_;iHTRBF`kruEyY2u|E07L*08n6OF z16KUvcX6^7BQsGk#xm!tZ_yewP5bRCaK>R{Mcc~$BXm=rtn<~9f;yo#hRP$vx`DI} zC$Vm2IW27VwUy(g9A+WCsX$h5*Eko$hR!mms`YRp32pAX?SE&}z7Eo&e^Gx#5n9`~ zth<^Pbgh4<)Xgxx-jn&kqb1Qc)q<;ee>d=4{DBA%J$oLJR!-9M%4l=ia&|x{( z&^Fs02{|-i1tN69WE+NCfY1r!_mqT5iaQKajx@k+2R%WAPJ^av1mgE(Ovr9 zn`A9CgyeI7Y9U`5su8t?-`16Dw2z={NfPHtQR&Pc#PVZE4^H*eKByLW$tS{X=( zdivvmOvTRIBd-Kus~q)WI<0E?Yw_1dF#)qPM0z}XR%ZHphMOR`(6{@U{PpE&1*dbv z^td>_v|1O%a_4t-o`sfahV&Iq=Shplk`O}s9~9Q_@9X#X(+_{QG!PRlZ9t;b(~0<* zJ(Kt$q9T^fG-_J_Qpv|04&d!x<1!m}w!kU^p8^ws=N z`RdERTOzvn?N$VAsdc?tnTy)*zWDDS7)HCtDosuY$~P#q&_wj|w7Qrrg~S>czujtc ztj$bvu)JQsB_i5afi}D|v;CygW0fYSJ$~teihrR$OeXJtUlP&vo11T6p2^U(ST5_; z%Cylkbj)9zQP-wL|twEu>dwAbfFer4xUFeogh_anv{09U##$2{@|BjXZHrI>kv^tz4 zq+@J0Ppl;8ZfAsMX)~$8^}FMVm2iYQQz&hw*NPL-#cYX7l$ar7wmRx>w>eOd_J6gV zILmF?EYQ*n*vt&;Mb9y_4$oifMn_p&Ooh#ik$0ffH$Ti4VO!IBxv1;)bnMqdYv5vN zkoE=s8n^`uNRqz=3pdFED+%8u3qWK-J(q*`1p{ETAVLFHB=F=U0Q$p9XyiFV;PL4p zRI=gywOq1OmA=-L6&SAav-j>tjs&hjx~abl^3&$e{r%I7DawBoG>~ z0zv~;K+fISH~58ZIV>a|}Yt0a%emga)I<`=}Q}rv$&Ehxcp{LZ<|q!9ch@ z6FD?sMR$becbH=UHcAtS(0~=lp#du(G++gU2CRV4z?~6}O))40tY99YM;JnQFxn3m z5gM?9d4!gXHlifW2tQRsXut~pU%UydT+RRVvYh`mpS&!GE4ic`Lm1(Kl?Nd{SP0z> zn~OHbMu-mHNlG6{n()y}7pD`Yj z>5PO9_voWjZ7z$6GDFuFiVp!NRw5zl(1y(is(LRbI;}+=x*eAYt%f?0{ir#9al25z znagZowzn=yov(&K^Cfe2a$5eYt-|by*`$1+TF=d9O?ySlqB^nu6^HPw+Dt?@4`NPPOtj$r zIIZN5Lm!gBd$4ef(0$r8h1jNMr}m-G8`Z9A(YmQw*r$wYHmmcGp<2$9c?k7Lqd!b6 znT#{l_n}L8n(Vt91;C|j*JpccVYsDP&=bqrs?`HRQ?t-r0u=JZ%AhKTdUUp?%l$*0 z_I7H>&PfThTH@OoS38()D6yn}*$%Xms?cM$xrK*aNmQ95zjlvtVx>PP z3*D63w$zx-+69HaLvShEHTl|d#!h>C%fj924=26F+Gh%; zFNn#|I<$Gjx6ap2aP(ikLzntA?(8#26rY1aEvfBOkT#Q7>tfA%bI-MOF5miU|Dre; z8>mA^0(X7K0e7qbRvp#dupq0=DepnDP-2`!ySQ4UlIdy!s;G3Sy)ukJ3T+?!2Z{d!e>9sKMGcBF1I zh4l2fB;{dHxUmgbc>fV5}OZ87IPvv4OkMdY-gqu zKWw%=8Y=>uO+BZgT3nUu*i}3R1+sAxR_Laj*sk(%PDzi{J4id5(I@K&ryXn#L@1%# z;<2RVVaavFO9m}ZeI7`N#Ue0=Cdabf8G+5A2_^K$&o5feP}O_+bC}hXE}xP{2h9p_ zsc~|I&7oDN)g(kXT^5sryRQd@RlV!F)uJxfTQ z&kNetHK@LD@ zzzPTrSOK8{D +

+ 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://lostimmortal.itch.io/the-purple-night"), +}; diff --git a/website/agb/src/app/showcase/games.tsx b/website/agb/src/app/showcase/games.tsx index 3ba4a542..02418bb7 100644 --- a/website/agb/src/app/showcase/games.tsx +++ b/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(a: T[]) { return a; } -export const Games: ShowcaseGame[] = [HatWiz, Purple]; +export const Games: ShowcaseGame[] = [HatWiz, Purple, Hyperspace]; diff --git a/website/agb/src/app/showcase/page.tsx b/website/agb/src/app/showcase/page.tsx index 7387c023..8ebb7fbc 100644 --- a/website/agb/src/app/showcase/page.tsx +++ b/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 ( - - - - {`Screenshot - -

{game.name}

- + + +

{game.name}

 ); } diff --git a/website/agb/src/app/showcase/styles.tsx b/website/agb/src/app/showcase/styles.tsx index 0b7a5395..32936871 100644 --- a/website/agb/src/app/showcase/styles.tsx +++ b/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; From 1991fbf056198c51eff48c8a11c87761b7878677 Mon Sep 17 00:00:00 2001 From: Corwin Date: Sun, 28 Apr 2024 23:29:57 +0100 Subject: [PATCH 3/9] add dpl --- justfile | 3 +- website/agb/src/app/showcase/[game]/page.tsx | 2 +- .../showcase/data/tapir/dungeon/dungeon.tsx | 30 ++++++++++++++++++ .../dungeon/the-dungeon-puzzlers-lament-0.png | Bin 0 -> 5939 bytes .../dungeon/the-dungeon-puzzlers-lament-1.png | Bin 0 -> 8105 bytes .../data/tapir/hyperspace/hyperspace.tsx | 2 +- website/agb/src/app/showcase/games.tsx | 8 ++++- website/agb/src/app/showcase/page.tsx | 2 +- website/agb/src/app/showcase/styles.tsx | 5 +-- 9 files changed, 45 insertions(+), 7 deletions(-) create mode 100644 website/agb/src/app/showcase/data/tapir/dungeon/dungeon.tsx create mode 100644 website/agb/src/app/showcase/data/tapir/dungeon/the-dungeon-puzzlers-lament-0.png create mode 100644 website/agb/src/app/showcase/data/tapir/dungeon/the-dungeon-puzzlers-lament-1.png diff --git a/justfile b/justfile index b59c3838..95e4a4b6 100644 --- a/justfile +++ b/justfile @@ -109,7 +109,8 @@ build-mgba-wasm: build-combo-rom-site: just _build-rom "examples/combo" "AGBGAMES" - gzip -9 -c examples/target/examples/combo.gba > website/agb/src/app/combo.gba.gz + mkdir -p website/agb/src/roms + gzip -9 -c examples/target/examples/combo.gba > website/agb/src/roms/combo.gba.gz setup-app-build: build-mgba-wasm build-combo-rom-site build-website-backtrace diff --git a/website/agb/src/app/showcase/[game]/page.tsx b/website/agb/src/app/showcase/[game]/page.tsx index cf3b2138..e4b82f72 100644 --- a/website/agb/src/app/showcase/[game]/page.tsx +++ b/website/agb/src/app/showcase/[game]/page.tsx @@ -18,7 +18,7 @@ export async function generateStaticParams() { })); } -export function getGame(slug: string) { +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"); diff --git a/website/agb/src/app/showcase/data/tapir/dungeon/dungeon.tsx b/website/agb/src/app/showcase/data/tapir/dungeon/dungeon.tsx new file mode 100644 index 00000000..1940f75b --- /dev/null +++ b/website/agb/src/app/showcase/data/tapir/dungeon/dungeon.tsx @@ -0,0 +1,30 @@ +import { ShowcaseGame, shuffle } from "@/app/showcase/games"; +import d1 from "./the-dungeon-puzzlers-lament-0.png"; +import d2 from "./the-dungeon-puzzlers-lament-1.png"; + +const Screenshots = [d1, d2]; + +export const Dungeon: ShowcaseGame = { + name: "The Dungeon Puzzler's Lament", + developers: shuffle(["Corwin Kuiper", "Gwilym Inzani"]), + 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. +

+ + ), + 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 0000000000000000000000000000000000000000..7129214de1e6f4568c5076db07d068305e800d0b GIT binary patch literal 5939 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 K$ydo*g#Hh)rngrB literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..d73f10471ac099ccfe4e3e6eb25cac520ef03fdd GIT binary patch literal 8105 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�CP}VaDiiqdEV16Q0Y)K{% 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 D_<#pN literal 0 HcmV?d00001 diff --git a/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace.tsx b/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace.tsx index 84ffdcd9..945dc2dd 100644 --- a/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace.tsx +++ b/website/agb/src/app/showcase/data/tapir/hyperspace/hyperspace.tsx @@ -26,5 +26,5 @@ export const Hyperspace: ShowcaseGame = {

), - itch: new URL("https://lostimmortal.itch.io/the-purple-night"), + itch: new URL("https://lostimmortal.itch.io/hyperspace-roll"), }; diff --git a/website/agb/src/app/showcase/games.tsx b/website/agb/src/app/showcase/games.tsx index 02418bb7..952b1106 100644 --- a/website/agb/src/app/showcase/games.tsx +++ b/website/agb/src/app/showcase/games.tsx @@ -3,6 +3,7 @@ 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; @@ -25,4 +26,9 @@ export function shuffle(a: T[]) { return a; } -export const Games: ShowcaseGame[] = [HatWiz, Purple, Hyperspace]; +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 index 8ebb7fbc..00021d5a 100644 --- a/website/agb/src/app/showcase/page.tsx +++ b/website/agb/src/app/showcase/page.tsx @@ -5,7 +5,7 @@ import { slugify } from "@/sluggify"; import { GameDisplay, GameGrid, GameImage } from "./styles"; export const metadata: Metadata = { - title: "Games made with agb", + title: "Showcase - agb", }; export default function ColourPickerPage() { diff --git a/website/agb/src/app/showcase/styles.tsx b/website/agb/src/app/showcase/styles.tsx index 32936871..33c6ac08 100644 --- a/website/agb/src/app/showcase/styles.tsx +++ b/website/agb/src/app/showcase/styles.tsx @@ -5,9 +5,10 @@ import styled from "styled-components"; import Image from "next/image"; export const GameGrid = styled.div` - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: repeat(auto-fit, 600px); justify-content: center; + gap: 48px; `; export const GameImage = styled(Image)` From 917d7b3d5a7e37377ee8fb3a0d17ebf071595c53 Mon Sep 17 00:00:00 2001 From: Corwin Date: Mon, 29 Apr 2024 00:28:17 +0100 Subject: [PATCH 4/9] pixel perfect scaling even on high density screens --- website/agb/src/app/layout.tsx | 6 +-- website/agb/src/app/page.tsx | 2 + website/agb/src/app/registry.tsx | 19 +++++++++- website/agb/src/app/showcase/[game]/page.tsx | 16 +------- .../agb/src/app/showcase/[game]/styled.tsx | 38 ++++++++++++++----- website/agb/src/app/showcase/styles.tsx | 9 +++-- website/agb/src/components/contentBlock.tsx | 7 +--- 7 files changed, 60 insertions(+), 37 deletions(-) diff --git a/website/agb/src/app/layout.tsx b/website/agb/src/app/layout.tsx index 60d9b5d5..3bb3db51 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} - + ); } diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx index 225ede6d..e24dc409 100644 --- a/website/agb/src/app/page.tsx +++ b/website/agb/src/app/page.tsx @@ -16,6 +16,8 @@ import { ExternalLink } from "@/components/externalLink"; const HelpLinks = styled.div` display: flex; + flex-wrap: wrap; + gap: 16px; justify-content: space-around; `; diff --git a/website/agb/src/app/registry.tsx b/website/agb/src/app/registry.tsx index fa12293e..45552c80 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/showcase/[game]/page.tsx b/website/agb/src/app/showcase/[game]/page.tsx index e4b82f72..4e943473 100644 --- a/website/agb/src/app/showcase/[game]/page.tsx +++ b/website/agb/src/app/showcase/[game]/page.tsx @@ -3,13 +3,11 @@ import { Games, ShowcaseGame } from "../games"; import { ContentBlock } from "@/components/contentBlock"; import { ExternalLink } from "@/components/externalLink"; import Link from "next/link"; -import Image, { StaticImageData } from "next/image"; import { - ScreenshotsWrapper, - ScreenshotWrapper, BackToShowcaseWrapper, DescriptionAndScreenshots, Description, + Screenshots, } from "./styled"; export async function generateStaticParams() { @@ -51,18 +49,6 @@ function DeveloperNames({ names }: { names: string[] }) { return first.join(", ") + `, and ${names[names.length - 1]}`; } -function Screenshots({ screenshots }: { screenshots: StaticImageData[] }) { - return ( - - {screenshots.map((screenshot) => ( - - - - ))} - - ); -} - function Display({ game }: { game: ShowcaseGame }) { return ( <> diff --git a/website/agb/src/app/showcase/[game]/styled.tsx b/website/agb/src/app/showcase/[game]/styled.tsx index 8ee4f0ce..2b8e51f4 100644 --- a/website/agb/src/app/showcase/[game]/styled.tsx +++ b/website/agb/src/app/showcase/[game]/styled.tsx @@ -1,19 +1,35 @@ "use client"; import { styled } from "styled-components"; +import Image, { StaticImageData } from "next/image"; -export const ScreenshotsWrapper = styled.div` +export function Screenshots({ + screenshots, +}: { + screenshots: StaticImageData[]; +}) { + return ( + + {screenshots.map((screenshot) => ( + + ))} + + ); +} + +const ScreenshotsWrapper = styled.div` flex: 4; + text-align: center; `; -export const ScreenshotWrapper = styled.div` - text-align: center; - img { - width: 100%; - width: round(down, 100%, 240px); - height: auto; - image-rendering: pixelated; - } +const Screenshot = styled(Image)` + width: 100%; + width: max( + round(down, 100%, calc(240 * var(--device-pixel))), + calc(240 * var(--device-pixel)) + ); + height: auto; + image-rendering: pixelated; `; export const Description = styled.div` @@ -26,6 +42,10 @@ export const Description = styled.div` export const DescriptionAndScreenshots = styled.div` display: flex; gap: 16px; + + @media (max-width: 1000px) { + display: block; + } `; export const BackToShowcaseWrapper = styled.div` diff --git a/website/agb/src/app/showcase/styles.tsx b/website/agb/src/app/showcase/styles.tsx index 33c6ac08..6eac2dae 100644 --- a/website/agb/src/app/showcase/styles.tsx +++ b/website/agb/src/app/showcase/styles.tsx @@ -6,20 +6,23 @@ import Image from "next/image"; export const GameGrid = styled.div` display: grid; - grid-template-columns: repeat(auto-fit, 600px); + grid-template-columns: repeat(auto-fit, min(100vw, 600px)); justify-content: center; gap: 48px; `; export const GameImage = styled(Image)` width: 100%; - width: round(down, 100%, 240px); + width: max( + round(down, 100%, calc(240 * var(--device-pixel))), + min(calc(240 * var(--device-pixel)), 100vw) + ); height: auto; image-rendering: pixelated; `; export const GameDisplay = styled(Link)` - width: 600px; + width: 100%; text-align: center; color: black; text-decoration: none; diff --git a/website/agb/src/components/contentBlock.tsx b/website/agb/src/components/contentBlock.tsx index 8a05d749..20e7e3a1 100644 --- a/website/agb/src/components/contentBlock.tsx +++ b/website/agb/src/components/contentBlock.tsx @@ -14,11 +14,8 @@ const Section = styled.section<{ $color: string }>` const CENTERED_CSS = ` margin-left: auto; margin-right: auto; - max-width: 60%; - - @media (max-width: 40rem) { - max-width: 90%; - } + width: 60%; + min-width: min(95%, 1000px); `; export const CenteredBlock = styled.div` From c14b4dfc355acaf7a84dccbcdcd1a3cc6bd7d0c6 Mon Sep 17 00:00:00 2001 From: Corwin Date: Mon, 29 Apr 2024 00:30:52 +0100 Subject: [PATCH 5/9] link back to where you left off --- website/agb/src/app/showcase/[game]/page.tsx | 2 +- website/agb/src/app/showcase/page.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/website/agb/src/app/showcase/[game]/page.tsx b/website/agb/src/app/showcase/[game]/page.tsx index 4e943473..2a00b287 100644 --- a/website/agb/src/app/showcase/[game]/page.tsx +++ b/website/agb/src/app/showcase/[game]/page.tsx @@ -54,7 +54,7 @@ function Display({ game }: { game: ShowcaseGame }) { <> - + < Back to showcase diff --git a/website/agb/src/app/showcase/page.tsx b/website/agb/src/app/showcase/page.tsx index 00021d5a..fcb2a42e 100644 --- a/website/agb/src/app/showcase/page.tsx +++ b/website/agb/src/app/showcase/page.tsx @@ -28,7 +28,10 @@ export default function ColourPickerPage() { function Game({ game }: { game: ShowcaseGame }) { const showcaseImage = game.screenshots[game.screenshots.length - 1]; return ( - +

{game.name}

 From b7aa9a8157f7a0ea6ded43e39a0d0cf54e76e9db Mon Sep 17 00:00:00 2001 From: Corwin Date: Mon, 29 Apr 2024 02:14:56 +0100 Subject: [PATCH 6/9] unify naming scheme --- website/agb/src/app/showcase/[game]/page.tsx | 2 +- website/agb/src/app/showcase/[game]/{styled.tsx => styles.tsx} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename website/agb/src/app/showcase/[game]/{styled.tsx => styles.tsx} (100%) diff --git a/website/agb/src/app/showcase/[game]/page.tsx b/website/agb/src/app/showcase/[game]/page.tsx index 2a00b287..04a5fc72 100644 --- a/website/agb/src/app/showcase/[game]/page.tsx +++ b/website/agb/src/app/showcase/[game]/page.tsx @@ -8,7 +8,7 @@ import { DescriptionAndScreenshots, Description, Screenshots, -} from "./styled"; +} from "./styles"; export async function generateStaticParams() { return Games.map((game) => ({ diff --git a/website/agb/src/app/showcase/[game]/styled.tsx b/website/agb/src/app/showcase/[game]/styles.tsx similarity index 100% rename from website/agb/src/app/showcase/[game]/styled.tsx rename to website/agb/src/app/showcase/[game]/styles.tsx From c71ad00f1af12ca4f584a5798afa183ed221c4d9 Mon Sep 17 00:00:00 2001 From: Corwin Date: Tue, 30 Apr 2024 02:16:20 +0100 Subject: [PATCH 7/9] put body inside registry --- website/agb/src/app/layout.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/website/agb/src/app/layout.tsx b/website/agb/src/app/layout.tsx index 3bb3db51..1a751f95 100644 --- a/website/agb/src/app/layout.tsx +++ b/website/agb/src/app/layout.tsx @@ -13,9 +13,9 @@ export default function RootLayout({ }>) { return ( - - {children} - + + {children} + ); } From 3587c599ac5d8481a852daab5129d9613e62c409 Mon Sep 17 00:00:00 2001 From: Corwin Date: Tue, 30 Apr 2024 02:16:42 +0100 Subject: [PATCH 8/9] not optional pixel ratio --- website/agb/src/app/registry.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/agb/src/app/registry.tsx b/website/agb/src/app/registry.tsx index 45552c80..e19526b5 100644 --- a/website/agb/src/app/registry.tsx +++ b/website/agb/src/app/registry.tsx @@ -29,7 +29,7 @@ export default function StyledComponentsRegistry({ } const BodyWithPixelRatio = styled.body<{ - $pixel?: number; + $pixel: number; }>` --device-pixel: calc(1px / ${(props) => props.$pixel}); `; From 9c00be8d6ad52faa6055c628b5bf69b123ee1bb8 Mon Sep 17 00:00:00 2001 From: Corwin Date: Tue, 30 Apr 2024 02:16:56 +0100 Subject: [PATCH 9/9] extract content block kind --- website/agb/src/app/page.tsx | 13 +++---------- website/agb/src/app/showcase/[game]/page.tsx | 10 ++++++---- website/agb/src/components/externalLink.tsx | 7 +++++++ 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx index e24dc409..ca51a90d 100644 --- a/website/agb/src/app/page.tsx +++ b/website/agb/src/app/page.tsx @@ -12,14 +12,7 @@ import { useMemo, useRef, useState } from "react"; import { GbaKey } from "../components/mgba/bindings"; import { useClientValue } from "../hooks/useClientValue.hook"; import { MgbaHandle } from "../components/mgba/mgba"; -import { ExternalLink } from "@/components/externalLink"; - -const HelpLinks = styled.div` - display: flex; - flex-wrap: wrap; - gap: 16px; - justify-content: space-around; -`; +import { ExternalLink, ExternalLinkBlock } from "@/components/externalLink"; const GameDisplay = styled.div` height: min(calc(100vw / 1.5), min(90vh, 480px)); @@ -133,7 +126,7 @@ export default function Home() { - + GitHub @@ -142,7 +135,7 @@ export default function Home() { Docs Showcase - + ); diff --git a/website/agb/src/app/showcase/[game]/page.tsx b/website/agb/src/app/showcase/[game]/page.tsx index 04a5fc72..3431e798 100644 --- a/website/agb/src/app/showcase/[game]/page.tsx +++ b/website/agb/src/app/showcase/[game]/page.tsx @@ -1,7 +1,7 @@ import { slugify } from "@/sluggify"; import { Games, ShowcaseGame } from "../games"; import { ContentBlock } from "@/components/contentBlock"; -import { ExternalLink } from "@/components/externalLink"; +import { ExternalLink, ExternalLinkBlock } from "@/components/externalLink"; import Link from "next/link"; import { BackToShowcaseWrapper, @@ -70,9 +70,11 @@ function Display({ game }: { game: ShowcaseGame }) { - {game.itch && ( - View on itch.io - )} + + {game.itch && ( + View on itch.io + )} + ); diff --git a/website/agb/src/components/externalLink.tsx b/website/agb/src/components/externalLink.tsx index fe1aa40a..0bbdaa3a 100644 --- a/website/agb/src/components/externalLink.tsx +++ b/website/agb/src/components/externalLink.tsx @@ -14,3 +14,10 @@ export const ExternalLink = styled(Link)` border: solid black 2px; } `; + +export const ExternalLinkBlock = styled.div` + display: flex; + flex-wrap: wrap; + gap: 16px; + justify-content: space-around; +`;