forked from phenom/healer-man
72 lines
4.1 KiB
TypeScript
72 lines
4.1 KiB
TypeScript
import { useMemo, useRef, useState, type FormEvent } from "react";
|
|
import { useShellStore } from "../app/shellStore";
|
|
import { DUNGEON_REPORT_COMMENT_MAX_LENGTH, submitDungeonReport } from "../app/dungeonReports";
|
|
import { dungeonById } from "../game/dungeonCatalog";
|
|
import { useGameStore } from "../game/store";
|
|
import { useMenuController, type MenuAction } from "../input/useMenuController";
|
|
import { ControllerButton } from "./ControllerButton";
|
|
|
|
export function DungeonIssueReportPanel() {
|
|
const dungeonId = useGameStore((state) => state.activeDungeonId);
|
|
const bossTest = useGameStore((state) => state.bossTest);
|
|
const openOverlay = useGameStore((state) => state.openOverlay);
|
|
const session = useShellStore((state) => state.session);
|
|
const [comment, setComment] = useState("");
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const busy = useRef(false);
|
|
const form = useRef<HTMLFormElement>(null);
|
|
const back = () => { if (!busy.current) openOverlay(bossTest ? "boss-test-review" : "pause"); };
|
|
const canSubmit = Boolean(comment.trim()) && comment.length <= DUNGEON_REPORT_COMMENT_MAX_LENGTH && !submitting;
|
|
const actions = useMemo<MenuAction[]>(() => [
|
|
{ id: "report-back", run: back, enabled: !submitting },
|
|
{ id: "report-submit", run: () => form.current?.requestSubmit(), enabled: canSubmit && !submitted },
|
|
], [bossTest, canSubmit, openOverlay, submitted, submitting]);
|
|
const controller = useMenuController(actions, { initialId: "report-back", onBack: back });
|
|
|
|
const submit = async (event: FormEvent) => {
|
|
event.preventDefault();
|
|
if (!canSubmit || busy.current || submitted) return;
|
|
busy.current = true;
|
|
setSubmitting(true);
|
|
setError("");
|
|
try {
|
|
await submitDungeonReport(session, bossTest?.sourceDungeonId ?? dungeonId, comment,
|
|
bossTest ? { bossKey: bossTest.key, bossName: bossTest.name } : undefined);
|
|
setSubmitted(true);
|
|
} catch (failure) {
|
|
setError(failure instanceof Error ? failure.message : "Your report could not be submitted. Please try again.");
|
|
} finally {
|
|
busy.current = false;
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="modal-backdrop" role="presentation">
|
|
<section className="pause-menu dungeon-issue-report" role="dialog" aria-modal="true" aria-labelledby="issue-report-title">
|
|
<p className="eyebrow">{bossTest ? "Boss feedback" : "Dungeon feedback"}</p>
|
|
<h2 id="issue-report-title">{bossTest ? "Submit a boss report" : "Report an issue"}</h2>
|
|
<p>{bossTest ? `${bossTest.name} · ${dungeonById(bossTest.sourceDungeonId)?.title ?? bossTest.sourceDungeonId}` : dungeonById(dungeonId)?.title ?? dungeonId}</p>
|
|
{submitted ? <p role="status">Report submitted. You can follow its status in View Reports on the main menu.</p> : (
|
|
<form ref={form} onSubmit={(event) => void submit(event)}>
|
|
<label htmlFor="dungeon-issue-comment">Describe the issue</label>
|
|
<textarea id="dungeon-issue-comment" autoFocus required maxLength={DUNGEON_REPORT_COMMENT_MAX_LENGTH}
|
|
value={comment} disabled={submitting} onChange={(event) => setComment(event.target.value)}
|
|
aria-describedby="dungeon-issue-count" placeholder="What happened, and what were you doing when it happened?" />
|
|
<small id="dungeon-issue-count">{comment.length} / {DUNGEON_REPORT_COMMENT_MAX_LENGTH} characters</small>
|
|
{error && <p role="alert" className="dungeon-report-error">{error}</p>}
|
|
<ControllerButton controlId="report-submit" selectedId={controller.selectedId} select={controller.select}
|
|
className="button button--primary" type="submit" disabled={!canSubmit}>
|
|
{submitting ? "Submitting..." : "Submit report"}
|
|
</ControllerButton>
|
|
</form>
|
|
)}
|
|
<ControllerButton controlId="report-back" selectedId={controller.selectedId} select={controller.select}
|
|
className="button" type="button" onClick={back} disabled={submitting}>{bossTest ? "Back to boss review" : "Back to pause menu"}</ControllerButton>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|