From 72e7850152a74b33b6bbfb1889599603fc52ebbb Mon Sep 17 00:00:00 2001
From: Corwin <corwin@kuiper.dev>
Date: Wed, 17 Apr 2024 19:44:31 +0100
Subject: [PATCH] backtrace page with more detail

---
 website/agb/src/app/crash/backtrace.tsx | 79 ++++++++++++++++++++-----
 website/agb/src/app/crash/page.tsx      | 16 +----
 2 files changed, 68 insertions(+), 27 deletions(-)

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 (
+    <ContentBlock>
+      <h1>agbrs crash backtrace viewer</h1>
+      <p>
+        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.
+      </p>
+      <p>
+        The creator of the game is <em>very</em> likely interested in the code
+        below <em>along with</em> a description of what you were doing at the
+        time.{" "}
+        <strong>Send these to the creator of the game you are playing.</strong>
+      </p>
+      <BacktraceDisplay />
+      <p>
+        <em>
+          The owners of this website are not necessarily the creators of the
+          game you are playing.
+        </em>
+      </p>
+      <h2>For game developers</h2>
+      <p>This page will eventually let you view backtraces in the browser.</p>
+      <p>
+        For now you can copy the backtrace code here and use it with{" "}
+        <code>agb-addr2line</code>.
+      </p>
+      <p>If you don&apos;t want players to be sent to this page, you can:</p>
+      <ol>
+        <li>Configure the backtrace page to point to your own site</li>
+        <li>Configure the backtrace page to not point to a site at all</li>
+        <li>Not use the backtrace feature</li>
+      </ol>
+    </ContentBlock>
+  );
 }
 
-export function BacktraceDisplay() {
+function BacktraceDisplay() {
   const backtrace = useClientValue(getBacktrace) ?? "";
 
   return (
     <BacktraceWrapper>
-      <label>Backtrace:</label>
-      <input type="text" value={backtrace} />
-      <button
+      <BacktraceCodeBlock>{backtrace}</BacktraceCodeBlock>
+      <BacktraceCopyButton
         onClick={() => {
           navigator.clipboard.writeText(backtrace);
         }}
       >
         Copy
-      </button>
+      </BacktraceCopyButton>
     </BacktraceWrapper>
   );
 }
+
+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 (
-    <ContentBlock>
-      <h1>agbrs crash backtrace viewer</h1>
-      <p>This page will eventually let you view backtraces in the browser.</p>
-      <p>
-        For now you can copy the backtrace code here and use it with{" "}
-        <code>agb-addr2line</code>
-      </p>
-      <BacktraceDisplay />
-    </ContentBlock>
-  );
+export default function Backtrace() {
+  return <BacktracePage />;
 }