Allow typing in the backtrace

This commit is contained in:
Gwilym Inzani 2024-04-20 12:31:20 +01:00
parent 162bc17add
commit 911ea848df

View file

@ -1,12 +1,13 @@
"use client"; "use client";
import { useState } from 'react';
import { ContentBlock } from "../contentBlock"; import { ContentBlock } from "../contentBlock";
import { useClientValue } from "../useClientValue.hook";
import { styled } from "styled-components"; import { styled } from "styled-components";
import { Debug } from "./debug"; import { Debug } from "./debug";
export function BacktracePage() { export function BacktracePage() {
const backtrace = useClientValue(getBacktrace); const [backtrace, setBacktrace] = useState(getBacktrace);
return ( return (
<ContentBlock> <ContentBlock>
@ -22,9 +23,7 @@ export function BacktracePage() {
time.{" "} time.{" "}
<strong>Send these to the creator of the game you are playing.</strong> <strong>Send these to the creator of the game you are playing.</strong>
</p> </p>
{(backtrace && <BacktraceCopyDisplay backtrace={backtrace} />) || ( <BacktraceCopyDisplay backtrace={backtrace} setBacktrace={setBacktrace}/>
<p>No backtrace data in Url</p>
)}
<p> <p>
<em> <em>
The owners of this website are not necessarily the creators of the The owners of this website are not necessarily the creators of the
@ -44,10 +43,10 @@ export function BacktracePage() {
); );
} }
function BacktraceCopyDisplay({ backtrace }: { backtrace: string }) { function BacktraceCopyDisplay({ backtrace, setBacktrace }: { backtrace: string , setBacktrace: (newValue: string) => void}) {
return ( return (
<BacktraceWrapper> <BacktraceWrapper>
<BacktraceCodeBlock>{backtrace}</BacktraceCodeBlock> <BacktraceInputBox type="text" defaultValue="Enter the backtrace code here" onChange={e => setBacktrace(e.target.value)} value={backtrace} />
<BacktraceCopyButton <BacktraceCopyButton
onClick={() => { onClick={() => {
navigator.clipboard.writeText(backtrace); navigator.clipboard.writeText(backtrace);
@ -59,11 +58,10 @@ function BacktraceCopyDisplay({ backtrace }: { backtrace: string }) {
); );
} }
const BacktraceCodeBlock = styled.code` const BacktraceInputBox = styled.input`
font-size: 3rem; font-size: larger;
background-color: #dddddd; background-color: #dddddd;
padding: 0px 40px; flex-grow: 999;
overflow-x: scroll;
`; `;
const BacktraceWrapper = styled.section` const BacktraceWrapper = styled.section`
@ -76,7 +74,6 @@ const BacktraceWrapper = styled.section`
const BacktraceCopyButton = styled.button` const BacktraceCopyButton = styled.button`
padding: 10px; padding: 10px;
overflow-x: scroll;
`; `;
function getBacktrace() { function getBacktrace() {