diff --git a/website/agb/src/app/crash/backtrace.tsx b/website/agb/src/app/crash/backtrace.tsx index 30570fca..28185f76 100644 --- a/website/agb/src/app/crash/backtrace.tsx +++ b/website/agb/src/app/crash/backtrace.tsx @@ -1,33 +1,84 @@ "use client"; -import { FC } from "react"; +import { ContentBlock } from "../contentBlock"; import { useClientValue } from "../useClientValue.hook"; import { styled } from "styled-components"; -const BacktraceWrapper = styled.section` - display: flex; - gap: 10px; - justify-content: center; -`; - -function getBacktrace() { - return window.location.hash.slice(1); +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. + +

+

For game developers

+

This page will eventually let you view backtraces in the browser.

+

+ For now you can copy the backtrace code here and use it with{" "} + agb-addr2line. +

+

If you don't want players to be sent to this page, you can:

+
    +
  1. Configure the backtrace page to point to your own site
  2. +
  3. Configure the backtrace page to not point to a site at all
  4. +
  5. Not use the backtrace feature
  6. +
+
+ ); } -export function BacktraceDisplay() { +function BacktraceDisplay() { const backtrace = useClientValue(getBacktrace) ?? ""; return ( - - - + ); } + +const BacktraceCodeBlock = styled.code` + font-size: 3rem; + background-color: #dddddd; + padding: 0px 40px; + overflow-x: scroll; +`; + +const BacktraceWrapper = styled.section` + display: flex; + gap: 10px; + justify-content: center; + align-items: center; + flex-wrap: wrap; +`; + +const BacktraceCopyButton = styled.button` + padding: 10px; + overflow-x: scroll; +`; + +function getBacktrace() { + return window.location.hash.slice(1); +} diff --git a/website/agb/src/app/crash/page.tsx b/website/agb/src/app/crash/page.tsx index 3b97c492..05283ac3 100644 --- a/website/agb/src/app/crash/page.tsx +++ b/website/agb/src/app/crash/page.tsx @@ -1,21 +1,11 @@ import { Metadata } from "next"; -import { BacktraceDisplay } from "./backtrace"; +import { BacktracePage } from "./backtrace"; import { ContentBlock } from "../contentBlock"; export const metadata: Metadata = { title: "agbrs crash backtrace", }; -export default function Crash() { - return ( - -

agbrs crash backtrace viewer

-

This page will eventually let you view backtraces in the browser.

-

- For now you can copy the backtrace code here and use it with{" "} - agb-addr2line -

- -
- ); +export default function Backtrace() { + return ; }