Loading, standy...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Chips:
-
- Time left:
-
- Bonus points:
-
-
-
-
-
-
- Chips:
-
- Time left:
-
- Bonus points:
-
- Total score:
-
-
-
-
-
-
- 
- NotCC
-A scoreboard-legal Chip's Challenge 2® emulator.
-
-
-
- Load external files:
- - -GLP1
-
- By: G lander
- Difficulty: 2 / 5
- The best set ever.
-
+
+ )
+}
diff --git a/gamePlayer/src/artSetSpecials.ts b/gamePlayer/src/artSetSpecials.ts
deleted file mode 100644
index a5836c9e..00000000
--- a/gamePlayer/src/artSetSpecials.ts
+++ /dev/null
@@ -1,431 +0,0 @@
-import {
- Actor,
- Animation,
- BonusFlag,
- CloneMachine,
- CounterGate,
- CustomFloor,
- CustomWall,
- Direction,
- DirectionalBlock,
- FlameJet,
- InvisibleWall,
- LitTNT,
- Playable,
- Railroad,
- Rover,
- ThinWall,
- Tile,
- Trap,
- VoodooTile,
- WireOverlapMode,
-} from "@notcc/logic"
-import { registerSpecialFunction, registerStateFunction } from "./const"
-import { Art, Frame, Position, Size, SpecialArt, ctxToDir } from "./renderer"
-
-function bitfieldToDirs(bitfield: number): Direction[] {
- const directions: Direction[] = []
- for (let dir = Direction.UP; dir <= Direction.LEFT; dir += 1) {
- if ((bitfield & (1 << dir)) !== 0) {
- directions.push(dir)
- }
- }
- return directions
-}
-
-function getPlayableState(actor: Playable): string {
- const inWater = actor.tile.findActor(actor => actor.hasTag("water"))
- if (inWater) return "water"
- if (actor.playerBonked || actor.isPushing) return "bump"
- return "normal"
-}
-
-registerStateFunction("chip", getPlayableState)
-registerStateFunction("melinda", getPlayableState)
-registerStateFunction
+
+ )
+}
diff --git a/gamePlayer/src/components/Dialog.tsx b/gamePlayer/src/components/Dialog.tsx
new file mode 100644
index 00000000..14b335d7
--- /dev/null
+++ b/gamePlayer/src/components/Dialog.tsx
@@ -0,0 +1,67 @@
+import { applyRef } from "@/helpers"
+import { ComponentChildren, Ref } from "preact"
+import { ReactNode, forwardRef, useRef } from "preact/compat"
+import Draggable from "react-draggable"
+import { twJoin } from "tailwind-merge"
+
+export const Dialog = forwardRef(function (
+ props: {
+ header: ReactNode
+ children: ComponentChildren
+ notModal?: boolean
+ buttons: [string, () => void | PromiseVersion {import.meta.env.VITE_VERSION}
+ {updateInfo.state === "working" ? (
+ Failed to download update info
+ ) : !shouldUpdate ? (
+ Up to date
+ ) : installing ? (
+ <>
+ Downloading v{updateInfo.value.versionName}...
+
+
+
+ ) : (
+ <>
+ Version {updateInfo.value.versionName} available
+ {updateInfo.value.notice && {updateInfo.value.notice}
}
+
+
+ )}
+
+ {props.children}
+ {props.buttons.length !== 0 && (
+
+ )
+}
+
+function PregameCover(props: {
+ level: Level
+ set?: LevelSet
+ mobile?: boolean
+ onStart: () => void
+}) {
+ return (
+
+ {props.buttons.map(([name, callback]) => (
+
+ ))}
+
+ )}
+ + {props.level.metadata.title ?? "UNNAMED"} +
+ + by {props.level.metadata.author ?? "???"} + +
+
+
+
+
+ Paused
+
+
+ {trivia[triviaIdx]}
+ {/* For the guaranteed space */}
+
+ {triviaIdx + 1}/{trivia.length}
+
+
+ {triviaIdx + 1}/{trivia.length}
+
+
+
+ Did you know?
+
+ + {props.timeout ? "Ran out of time" : "You lost..."} +
+
+
+ Stop! You've violated the law!
+
+
+
+
+ Game crash
+
+
+
+
+ )
+}
+
+function WinCover(props: {
+ onNextLevel: () => void
+ onRestart: () => void
+ onSetSelector: () => void
+ onLevelList: () => void
+ singleLevel: boolean
+
+ levelStats: LevelStatsBoxProps
+}) {
+ const buttons: CoverButton[] = props.singleLevel
+ ? [
+ ["Restart", props.onRestart],
+ ["Back to set selector", props.onSetSelector],
+ ["Explode Jupiter", null],
+ ]
+ : [
+ ["Level list", props.onLevelList],
+ ["Next level", props.onNextLevel],
+ ["Explode Jupiter", null],
+ ]
+ return (
+
+
+ {props.totalMetrics && (
+ Metric
+ This run
+ Best run
+ {props.grades && (
+
+ Grade
+
+ )}
+ Time
+
+ {formatTime(props.metrics.timeLeft)}s
+
+
+ {props.bestMetrics
+ ? `${formatTime(props.bestMetrics.timeLeft)}s`
+ : "—"}
+
+ {props.grades && (
+
+
+ )}
+ {props.showScore && (
+ <>
+ Score
+
+
+
+
+ base score
+ {props.levelN * 500}pts
+ time score
+
+ {Math.ceil(props.metrics.timeLeft / 60) * 10}pts
+
+ {bonusPoints !== 0 && (
+ <>
+ bonus score
+ {bonusPoints}pts
+
+ )}
+ {props.metrics.score}pts
+
+ {props.bestMetrics ? `${props.bestMetrics.score}pts` : "—"}
+
+ {props.grades && (
+
+
+ )}
+
+ )}
+
+
+ )}
+
+ Total set time: {Math.ceil(props.totalMetrics.timeLeft / 60)}s
+
+ Total set score: {props.totalMetrics.score}pts
+
+
+ You won!
+
+
+
+ )
+}
+
+function MobileHintCover({ hintRef }: { hintRef: Ref
+
+ )
+}
+
+export function DumbLevelPlayer(props: {
+ level: LevelData
+ levelSet?: LevelSet
+ controlsRef?: Ref
+
+
+
+ No tileset loaded.
+
+ const [playerState, setPlayerState] = useState("pregame" as PlayerState)
+ const isPregameRef = useRef(false)
+ useLayoutEffect(() => {
+ isPregameRef.current = playerState === "pregame"
+ }, [playerState])
+
+ useEffect(() => {
+ if (playerState === "pause") sfx?.pause()
+ else sfx?.unpause()
+ }, [playerState, sfx])
+
+ // Inputs & LevelState
+
+ const [level, setLevel] = useState(() => props.level.initLevel())
+ const mobileControls = "ontouchstart" in window
+ const baseInputConfig = useAtomValue(inputConfigAtom)
+ const inputConfig = useMemo(() => {
+ if (!mobileControls) return baseInputConfig
+ const config = structuredClone(baseInputConfig)
+ config.seats[0].mappings.unshift({
+ enabled: true,
+ source: "touch",
+ codes: KEY_INPUTS,
+ })
+ return config
+ }, [baseInputConfig, mobileControls])
+
+ const mobileControlInputsRef = useRef
+
+ )
+}
diff --git a/gamePlayer/src/components/ErrorBox.tsx b/gamePlayer/src/components/ErrorBox.tsx
new file mode 100644
index 00000000..34491a46
--- /dev/null
+++ b/gamePlayer/src/components/ErrorBox.tsx
@@ -0,0 +1,12 @@
+import { memo } from "preact/compat"
+
+export const ErrorBox = memo(({ error: err }: { error: Error }) => (
+
+
+
+ {solutionJumpProgress !== null && (
+
+
+ )}
+
+
+
+ {replay && (
+ {cover}
+
+
+ {mobileControls && (
+
+
+ {playerSeat && (
+
+ Chips left:
+
+
+
+ Time left:
+
+
+
+ Bonus points:
+
+
+
+
+ )}
+
+
+ )}
+
+ {err.name}: {err.message}
+
+ {err.stack && `Stack trace: ${err.stack}`} +
+))
diff --git a/gamePlayer/src/components/Expl.tsx b/gamePlayer/src/components/Expl.tsx
new file mode 100644
index 00000000..2ffbb4f4
--- /dev/null
+++ b/gamePlayer/src/components/Expl.tsx
@@ -0,0 +1,46 @@
+import { useJotaiFn } from "@/helpers"
+import { PromptComponent, showPromptGs } from "@/prompts"
+import { ComponentChildren } from "preact"
+import { HTMLAttributes } from "preact/compat"
+import { Dialog } from "./Dialog"
+
+interface ExplDialogProps {
+ children: ComponentChildren
+ title?: ComponentChildren
+}
+
+function ExplButton(props: HTMLAttributes+ {err.stack && `Stack trace: ${err.stack}`} +
+ ?
+
+ )
+}
+
+const ExplPrompt =
+ (props: ExplDialogProps): PromptComponent
+
+ Grade
+ Meaning
+
+ Better than bold. You've achieved a higher score than what is on the
+ scoreboards! Report it and be part of Chips history!
+
+
+ Bold Confirm. You're the second person to achieve this score, thus{" "}
+ confirming the unconfirmed score.
+
+
+ Partial Confirm. You've achieved a score higher than the highest
+ confirmed score, but lower than the unconfirmed score, thus confirming
+ that the unconfirmed score is at least partially real.
+
+ Bold. Same as highest known/reported score for this level.
+
+ Better than public. This score is better than the score of the public
+ route, but is less than bold.
+
+ Public. This score matches the public route score.
+ Solved. This score is worse than the public route score.
+ Unsolved. This level has not been solved yet.
+ } + {str} + + ))} + + ) + } + return <>{haikuMode ? props.haiku : props.children} +} diff --git a/gamePlayer/src/components/Inventory.tsx b/gamePlayer/src/components/Inventory.tsx new file mode 100644 index 00000000..93dee989 --- /dev/null +++ b/gamePlayer/src/components/Inventory.tsx @@ -0,0 +1,119 @@ +import { Inventory as InventoryI, PlayerSeat, TileType } from "@notcc/logic" +import { Frame, Tileset } from "./GameRenderer/renderer" +import { Ref } from "preact" +import { useCallback, useEffect, useMemo, useState } from "preact/hooks" +import { applyRef } from "@/helpers" + +export function Inventory(props: { + inventory: InventoryI | PlayerSeat + cc1Boots?: boolean + tileScale: number + tileset: Tileset + renderRef?: Ref<(() => void) | undefined | null> +}) { + const [canvas, setCanvas] = useState
+
+ )
+ }
+ return (
+
+ )
+}
diff --git a/gamePlayer/src/components/MobileControls/cycle-active.svg b/gamePlayer/src/components/MobileControls/cycle-active.svg
new file mode 100644
index 00000000..922e3da1
--- /dev/null
+++ b/gamePlayer/src/components/MobileControls/cycle-active.svg
@@ -0,0 +1,8 @@
+
+
+
diff --git a/gamePlayer/src/components/MobileControls/cycle-inactive.svg b/gamePlayer/src/components/MobileControls/cycle-inactive.svg
new file mode 100644
index 00000000..3f2bd238
--- /dev/null
+++ b/gamePlayer/src/components/MobileControls/cycle-inactive.svg
@@ -0,0 +1,9 @@
+
+
+
diff --git a/gamePlayer/src/components/MobileControls/dpad.svg b/gamePlayer/src/components/MobileControls/dpad.svg
new file mode 100644
index 00000000..5d024d1c
--- /dev/null
+++ b/gamePlayer/src/components/MobileControls/dpad.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/gamePlayer/src/components/MobileControls/drop-active.svg b/gamePlayer/src/components/MobileControls/drop-active.svg
new file mode 100644
index 00000000..1108f9ec
--- /dev/null
+++ b/gamePlayer/src/components/MobileControls/drop-active.svg
@@ -0,0 +1,57 @@
+
+
+
+
diff --git a/gamePlayer/src/components/MobileControls/drop-inactive.svg b/gamePlayer/src/components/MobileControls/drop-inactive.svg
new file mode 100644
index 00000000..cee2fc95
--- /dev/null
+++ b/gamePlayer/src/components/MobileControls/drop-inactive.svg
@@ -0,0 +1,61 @@
+
+
+
+
diff --git a/gamePlayer/src/components/MobileControls/index.tsx b/gamePlayer/src/components/MobileControls/index.tsx
new file mode 100644
index 00000000..44828c14
--- /dev/null
+++ b/gamePlayer/src/components/MobileControls/index.tsx
@@ -0,0 +1,135 @@
+import dpadImage from "./dpad.svg"
+import { InputControls } from "@/inputs"
+import { KEY_INPUTS, KeyInputs } from "@notcc/logic"
+import { RefObject, memo } from "preact/compat"
+import { useEffect, useRef } from "preact/hooks"
+import dropActiveImage from "./drop-active.svg"
+import dropInactiveImage from "./drop-inactive.svg"
+import cycleActiveImage from "./cycle-active.svg"
+import cycleInactiveImage from "./cycle-inactive.svg"
+import switchActiveImage from "./switch-active.svg"
+import switchInactiveImage from "./switch-inactive.svg"
+import { applyRef } from "@/helpers"
+
+const DIRECTIONS = ["up", "right", "down", "left"]
+export const MOBILE_SOURCE_ID = "touch"
+
+export const MobileControls = memo(function MobileControls(props: {
+ inputsRef: RefObject📜︎
+ Intermission
+
+ 
+ 
+ 
+ 
+
+ )
+})
diff --git a/gamePlayer/src/components/MobileControls/switch-active.svg b/gamePlayer/src/components/MobileControls/switch-active.svg
new file mode 100644
index 00000000..3d6a4e8d
--- /dev/null
+++ b/gamePlayer/src/components/MobileControls/switch-active.svg
@@ -0,0 +1,8 @@
+
+
+
diff --git a/gamePlayer/src/components/MobileControls/switch-inactive.svg b/gamePlayer/src/components/MobileControls/switch-inactive.svg
new file mode 100644
index 00000000..1519d277
--- /dev/null
+++ b/gamePlayer/src/components/MobileControls/switch-inactive.svg
@@ -0,0 +1,9 @@
+
+
+
diff --git a/gamePlayer/src/components/NonLegalMessage.tsx b/gamePlayer/src/components/NonLegalMessage.tsx
new file mode 100644
index 00000000..7b5d0c1c
--- /dev/null
+++ b/gamePlayer/src/components/NonLegalMessage.tsx
@@ -0,0 +1,101 @@
+import { protobuf } from "@notcc/logic"
+import { Expl } from "./Expl"
+
+const KnownGlitches = protobuf.GlitchInfo.KnownGlitches
+
+interface GlitchText {
+ name: string
+ prevent?: string
+}
+
+export const glitchNames: Record<
+ protobuf.GlitchInfo.KnownGlitches,
+ GlitchText
+> = {
+ [KnownGlitches.INVALID]: { name: "???" },
+ [KnownGlitches.DESPAWN]: { name: "Despawn" },
+ [KnownGlitches.SIMULTANEOUS_CHARACTER_MOVEMENT]: {
+ name: "Simultaneous character movement",
+ prevent:
+ "Don't hold down any movement keys while switching players. Alternatively, if you're using the normal level player, enable \"Prevent simultaneous character movement\" in preferences.",
+ },
+ [KnownGlitches.DYNAMITE_EXPLOSION_SNEAKING]: {
+ name: "Dynamite explosion sneaking",
+ prevent: "Don't move inwards into a dynamite's explosion ring.",
+ },
+ [KnownGlitches.DROP_BY_DESPAWNED]: {
+ name: "Despawned item dropping",
+ prevent:
+ "Don't let any players or monsters drop items when despawned. This may be part of the level's design.",
+ },
+ [KnownGlitches.BLUE_TELEPORT_INFINITE_LOOP]: {
+ name: "Invalid blue teleport destination travel",
+ prevent:
+ "Don't step in the unwired teleporters close to the top-left of the level. Contact the designer of the level about this, as this behavior is most likely unintetional.",
+ },
+}
+
+const nonlegalGlitches: protobuf.GlitchInfo.KnownGlitches[] = [
+ KnownGlitches.SIMULTANEOUS_CHARACTER_MOVEMENT,
+ KnownGlitches.DYNAMITE_EXPLOSION_SNEAKING,
+]
+
+const WIKI_URL = "https://wiki.bitbusters.club/"
+
+export function isGlitchKindNonlegal(
+ glitchKind: protobuf.GlitchInfo.KnownGlitches
+): boolean {
+ return nonlegalGlitches.includes(glitchKind)
+}
+
+export function NonlegalMessage(props: { glitch: protobuf.IGlitchInfo }) {
+ const glitchText = glitchNames[props.glitch.glitchKind!]
+ return (
+ <>
+ {glitchText.name}, a non-scoreboard-legal glitch
+ +
+ To prevent the glitch from occuring, do the following:{" "} + {glitchText.prevent} + + )} +
+
+ + Read more about the glitch here. + + + ) +} + +export function CrashMessage(props: { glitch: protobuf.IGlitchInfo }) { + const glitchText = glitchNames[props.glitch.glitchKind!] + return ( + <> + {glitchText.name}, a game-crashing glitch, has occured. + In the real game, this would have caused the program to close. + {glitchText.prevent && ( + <> +
+
+ To prevent this glitch from occuring, do the following:{" "} + {glitchText.prevent} + + )} +
+
+ + Read more about the glitch here. + + + ) +} diff --git a/gamePlayer/src/components/PreferencesPrompt/Gallery.tsx b/gamePlayer/src/components/PreferencesPrompt/Gallery.tsx new file mode 100644 index 00000000..2944d6bb --- /dev/null +++ b/gamePlayer/src/components/PreferencesPrompt/Gallery.tsx @@ -0,0 +1,80 @@ +import { FC, Suspense } from "preact/compat" +import { twJoin } from "tailwind-merge" + +function GalleryItemC(props: { + selected: boolean + onClick?: () => void + id: string + desc?: string + onRemove?: () => void + Preview: FC<{ id: string }> +}) { + return ( +
+
+ )
+}
+
+export interface GalleryItem {
+ id: string
+ desc?: string
+}
+
+export interface GalleryProps {
+ chosenItem: string
+ onChooseItem: (id: string) => void
+ onRemoveItem: (id: string) => void
+ defaultItems: GalleryItem[]
+ customItems: GalleryItem[]
+ Preview: FC<{ id: string }>
+}
+
+export function Gallery(props: GalleryProps) {
+ return (
+
+ {props.defaultItems.map(item => (
+ props.onChooseItem(item.id)}
+ id={item.id}
+ desc={item.desc}
+ Preview={props.Preview}
+ />
+ ))}
+ {props.customItems.map(item => (
+ props.onChooseItem(item.id)}
+ id={item.id}
+ desc={item.desc}
+ Preview={props.Preview}
+ onRemove={() => props.onRemoveItem(item.id)}
+ />
+ ))}
+
+
+
+ {props.id.startsWith("custom") ? "custom" : props.id}
+
+
+
+ )
+}
+
+export const customSfxAtom = atom
+ {
+ set(
+ ev.currentTarget.value === ""
+ ? null
+ : parseInt(ev.currentTarget.value)
+ )
+ }}
+ />{" "}
+
+ {playerInfoRes.state === "working"
+ ? "Loading..."
+ : playerInfoRes.state === "error"
+ ? "Failed to load"
+ : playerInfoRes.value?.player}
+
+
+ )
+}
+
+function HaikuModePref({ value, set, inputId }: PrefDisplayProps
+
+ )
+}
diff --git a/gamePlayer/src/components/ProgressBar.tsx b/gamePlayer/src/components/ProgressBar.tsx
new file mode 100644
index 00000000..4ef175ce
--- /dev/null
+++ b/gamePlayer/src/components/ProgressBar.tsx
@@ -0,0 +1,10 @@
+export function ProgressBar(props: { progress: number }) {
+ return (
+
+ Preparing...
+
+ Loading {loadingStage} +
+
+ + Loading {loadingStage} +
+
+
+
+
+
+
+ )
+}
diff --git a/gamePlayer/src/components/ReportGenerator.tsx b/gamePlayer/src/components/ReportGenerator.tsx
new file mode 100644
index 00000000..a7777b8b
--- /dev/null
+++ b/gamePlayer/src/components/ReportGenerator.tsx
@@ -0,0 +1,265 @@
+import { PromptComponent } from "@/prompts"
+import {
+ ApiPackLevel,
+ ApiPackLevelAttribute,
+ ApiPackReport,
+ MetricGrades,
+ ReportGrade,
+ getLevelAttribute,
+ getMetricsForPlayerReports,
+ getPlayerPackDetails,
+ getReportGradesForMetrics,
+ optimizerIdAtom,
+ setScoresAtom,
+} from "@/scoresApi"
+import { Dialog } from "./Dialog"
+import { useAtomValue } from "jotai"
+import { importantSetAtom, levelSetAtom } from "@/levelData"
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks"
+import { SolutionMetrics, findBestMetrics, protobuf } from "@notcc/logic"
+import { usePromise } from "@/helpers"
+
+interface ReportMetric {
+ value: number
+ grade: ReportGrade
+ // The extra value for P+ and B+ grades
+ gradeImprovement?: number
+ alreadyReported: boolean
+}
+
+function formatReportMetric(
+ metric: ReportMetric,
+ type: "time" | "score"
+): string {
+ let gradeLetter: string | undefined
+ if (metric.grade === "better than bold") {
+ gradeLetter = `b+${metric.gradeImprovement ?? 0}`
+ } else if (metric.grade === "bold confirm") {
+ // If this exact metric value was already reported, it cannot be a bold confirm, since that
+ // requires a different player to achieve the same time
+ gradeLetter = metric.alreadyReported ? "b" : "bc"
+ } else if (metric.grade === "partial confirm") {
+ gradeLetter = "pc"
+ } else if (metric.grade === "bold") {
+ gradeLetter = "b"
+ } else if (metric.grade === "better than public") {
+ gradeLetter = `p+${metric.gradeImprovement ?? 0}`
+ } else if (metric.grade === "public") {
+ gradeLetter = "p"
+ }
+ return `${metric.value}${type === "time" ? "s" : "pts"}${gradeLetter ? ` (${gradeLetter})` : ""}`
+}
+
+function formatReportLine(line: ReportLine, timeOnly: boolean): string {
+ return `#${line.levelN} (${line.title}): ${formatReportMetric(line.time, "time")}${timeOnly ? "" : ` / ${formatReportMetric(line.score, "score")}`}\n`
+}
+
+interface ReportLine {
+ lineIncluded: boolean
+ levelN: number
+ title: string
+ time: ReportMetric
+ score: ReportMetric
+ hasImprovements: boolean
+}
+
+function getGradeImprovement(
+ grade: ReportGrade,
+ value: number,
+ attr?: ApiPackLevelAttribute
+): number | undefined {
+ if (grade === "better than bold")
+ return value - (attr?.attribs.highest_reported ?? 0)
+ if (grade === "better than public")
+ return value - (attr?.attribs.highest_public ?? 0)
+ return undefined
+}
+
+function makeReportLine(
+ levelInfo: protobuf.ILevelInfo,
+ levelScores?: ApiPackLevel,
+ playerScores?: ApiPackReport[]
+): ReportLine | null {
+ const localMetrics = findBestMetrics(levelInfo)
+ if (!localMetrics) return null
+ const reportedMetrics = getMetricsForPlayerReports(playerScores ?? [])
+ const maxMetrics: SolutionMetrics = {
+ timeLeft: Math.max(localMetrics.timeLeft, reportedMetrics.timeLeft ?? 0),
+ score: Math.max(localMetrics.score, reportedMetrics.score ?? 0),
+ realTime: Math.min(
+ localMetrics.realTime,
+ reportedMetrics.realTime ?? Infinity
+ ),
+ }
+ const grades: MetricGrades = !levelScores
+ ? { time: "solved", score: "solved" }
+ : getReportGradesForMetrics(maxMetrics, levelScores)
+
+ const maxTimeLeftS = Math.ceil(maxMetrics.timeLeft / 60)
+
+ return {
+ levelN: levelInfo.levelNumber!,
+ title: levelInfo.title! ?? "untitled level",
+ time: {
+ value: maxTimeLeftS,
+ grade: grades.time,
+ alreadyReported:
+ reportedMetrics.timeLeft !== undefined &&
+ Math.ceil(reportedMetrics.timeLeft / 60) >=
+ Math.ceil(localMetrics.timeLeft / 60),
+ gradeImprovement: getGradeImprovement(
+ grades.time,
+ maxTimeLeftS,
+ levelScores && getLevelAttribute("time", levelScores)
+ ),
+ },
+ score: {
+ value: maxMetrics.score,
+ grade: grades.score,
+ alreadyReported:
+ reportedMetrics.score !== undefined &&
+ reportedMetrics.score >= localMetrics.score,
+ gradeImprovement: getGradeImprovement(
+ grades.score,
+ maxMetrics.score,
+ levelScores && getLevelAttribute("score", levelScores)
+ ),
+ },
+ lineIncluded: true,
+ hasImprovements:
+ (reportedMetrics.score === undefined ||
+ localMetrics.score > reportedMetrics.score) &&
+ (reportedMetrics.timeLeft === undefined ||
+ Math.ceil(localMetrics.timeLeft / 60) >=
+ Math.ceil(reportedMetrics.timeLeft / 60)),
+ }
+}
+
+function ReportLineC(props: { line: ReportLine; showTimeOnly: boolean }) {
+ // FIXME: This whole component is really anti-React, but the correct way to do this
+ // (I guess have an `onIncludedToggled` prop which etc. etc.) is really dumb
+ const [, setChanged] = useState(false)
+ return (
+
+
+
+ )
+}
+
+export const ReportGeneratorPrompt: PromptComponent
+
+ )
+ }
+)
+
+function useErrorRethrow(err: Error | null | undefined) {
+ useEffect(() => {
+ if (err) throw err
+ }, [err])
+}
+
+export function SetsGrid() {
+ const localSetsChanged = useAtomValue(localSetsChangedAtom)
+ const localSetsRes = usePromise(
+ () => aiGather(findAllLocalSets()),
+ [localSetsChanged]
+ )
+ // Failing to load local sets is really bad, we probably messed something up, show an error message
+ useErrorRethrow(localSetsRes.state === "error" ? localSetsRes.error : null)
+
+ const setsPromise = useBBClubSetsPromise()
+ const bbClubSetsRes = usePromise(() => setsPromise, [setsPromise])
+ // On the other hand, failing to load bb.club stuff isn't a huge issue - we may be offline or bb.club might just happen to be down
+
+ const sets: ItemLevelSet[] = useMemo(() => {
+ const sets: ItemLevelSet[] = []
+ if (localSetsRes.state === "done") {
+ sets.push(...localSetsRes.value)
+ }
+ if (bbClubSetsRes.state === "done") {
+ for (const bbClubSet of bbClubSetsRes.value) {
+ const localSet = sets.find(
+ lSet => lSet.localBBClubSet?.id === bbClubSet.bbClubSet!.set.id
+ )
+ // If there's a local set that's supposed to auto-update with a bb.club set, just add more info to that local set
+ if (localSet) {
+ localSet.bbClubSet = bbClubSet.bbClubSet!
+ localSet.setKey = `bb.club-${bbClubSet.bbClubSet!.set.id}`
+ } else {
+ sets.push(bbClubSet)
+ }
+ }
+ }
+ return sets
+ }, [bbClubSetsRes.state, localSetsRes.state])
+
+ // If there are multiple sets with the same name, we should show the set idents for those sets
+ const setsToDisambiguate = useMemo(() => {
+ const setNames = new Set()
+ const duplicateSets = new Set()
+ for (const set of sets) {
+ if (setNames.has(set.setName)) {
+ duplicateSets.add(set.setName)
+ }
+ setNames.add(set.setName)
+ }
+ return duplicateSets
+ }, [sets])
+
+ const [query, setQuery] = useState("")
+ const [localFirst, setLocalFirst] = useState(true)
+ const [sortingMode, setSortingMode] = useState
+
+
+
+
+ {props.set.setName}
+ {props.showDisambiguation && (
+ ({props.set.setIdent})
+ )}
+
+ {localSetMetadata?.by && By {localSetMetadata.by}
}
+ {bbClubSet && (
+
+ {bbClubSet.set.level_count} level
+ {bbClubSet.set.level_count !== 1 && "s"}
+
+ )}
+ {bbClubSet && (
+
+ Uploaded {new Date(bbClubSet.set.release_date).toLocaleDateString()}
+ {bbClubSet.set.release_date !== bbClubSet.set.last_updated && (
+ <>
+ , last updated{" "}
+ {new Date(bbClubSet.set.last_updated).toLocaleDateString()}
+
+ )}
+
+ )}
+ {localSetMetadata?.difficulty && (
+ Difficulty: {localSetMetadata.difficulty} / 5
+ )}
+ {localSetMetadata?.description && (
+ {localSetMetadata.description}
+ )}
+
+ {!localSetData || props.set.localBBClubSet ? "bb.club" : "local"}
+
+
+
+ {!isDownloading && (
+
+ {localSetData && (
+
+ )}
+ {isOutOfDate && (
+
+ )}
+ {bbClubSet && !localSetData && (
+
+ )}
+
+
+ )}
+
+
+ )
+}
diff --git a/gamePlayer/src/components/Sidebar/backfeedPruning.png b/gamePlayer/src/components/Sidebar/backfeedPruning.png
new file mode 100644
index 00000000..3dc900c7
Binary files /dev/null and b/gamePlayer/src/components/Sidebar/backfeedPruning.png differ
diff --git a/gamePlayer/src/components/Sidebar/index.tsx b/gamePlayer/src/components/Sidebar/index.tsx
new file mode 100644
index 00000000..23df1afc
--- /dev/null
+++ b/gamePlayer/src/components/Sidebar/index.tsx
@@ -0,0 +1,721 @@
+import { ComponentChildren, ComponentProps, Ref, createContext } from "preact"
+import leafIcon from "./tabIcons/leaf.svg"
+import levelIcon from "./tabIcons/level.svg"
+import floppyIcon from "./tabIcons/floppy.svg"
+import clockIcon from "./tabIcons/clock.svg"
+import toolsIcon from "./tabIcons/tools.svg"
+import infoIcon from "./tabIcons/info.svg"
+import {
+ useContext,
+ useEffect,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from "preact/hooks"
+import { forwardRef } from "preact/compat"
+import { twJoin } from "tailwind-merge"
+import { useMediaQuery } from "react-responsive"
+import { Getter, Setter, atom, useAtomValue, useStore } from "jotai"
+import { levelSetIdentAtom, pageAtom } from "@/routing"
+import { showPromptGs } from "@/prompts"
+import { AboutPrompt } from "../AboutDialog"
+import { applyRef, formatTimeLeft, keypressIsFocused } from "@/helpers"
+import { PreferencesPrompt } from "../PreferencesPrompt"
+import isHotkey from "is-hotkey"
+import { openExaCC, toggleExaCC } from "@/pages/ExaPlayerPage/OpenExaPrompt"
+import {
+ goToNextLevelGs,
+ goToPreviousLevelGs,
+ levelAtom,
+ levelSetAtom,
+ useSwrLevel,
+} from "@/levelData"
+import { Expl } from "../Expl"
+import backfeedPruningImg from "./backfeedPruning.png"
+import {
+ InputProvider,
+ ReplayInputProvider,
+ Route,
+ RouteFileInputProvider,
+ SolutionInfoInputProvider,
+ calculateLevelPoints,
+ protoTimeToMs,
+} from "@notcc/logic"
+import { protobuf } from "@notcc/logic"
+import { RRLevel, RRRoute, getRRLevel, setRRRoutesAtom } from "@/railroad"
+import { Toast, addToastGs, removeToastGs } from "@/toast"
+import { showLoadPrompt } from "@/fs"
+import { LevelListPrompt } from "../LevelList"
+import { unwrap } from "jotai/utils"
+import { Ht } from "../Ht"
+import { MOBILE_QUERY, PORTRAIT_QUERY } from "../../../tailwind.config"
+
+export interface LevelControls {
+ restart?(): void
+ pause?(): void
+ saveMapScreenshot?(): void
+ playInputs?(ip: InputProvider): void
+ exa?: {
+ undo(): void
+ redo(): void
+ save?(): void
+ export(): void
+ purgeBackfeed?(): void
+ cameraControls(): void
+ tileInspector(): void
+ levelModifiersControls(): void
+ }
+}
+
+export const levelControlsAtom = atom
+ setQuery(ev.currentTarget.value)}
+ />
+
+
+
+ {bbClubSetsRes.state === "error" && (
+
+
+ )}
+ {!allDoneLoading && (
+
+
+ Failed to load bb.club sets{" "}
+
+ Failed to load bb.club sets due to the following error:
+
+
+
+
+
+
+ )}
+ {sortedSets.map(set => (
+
+ Loading following set data:
+ {localSetsRes.state === "working" && local sets}
+ {bbClubSetsRes.state === "working" && bb.club sets}
+
+
+
+ {
+ if (!isDisabled) {
+ props.onTrigger?.(get, set)
+ }
+ }}
+ >
+
+ )
+}
+
+function useSidebarChooserAnim
+ {props.label}
+ {props.expl && {props.expl} }
+
+ {props.shortcut && (
+
+ {props.shortcut}
+
+ )}
+
+
+
+
+ )
+})
+
+const SidebarDrawer = forwardRef