feat: example credits, keybinds, and description overlay#8783
Merged
Conversation
kpal81xd
changed the title
kpal81xd
force-pushed
the
feat/example-credits-keybinds
branch
from
2a912bb to
90f8e1e
Compare
backdrop-filter: blur(32px) over a live canvas forces the compositor to re-sample and re-blur every frame the canvas redraws. Bump background opacity 0.64 -> 0.85 to retain the dark-overlay look without the per-frame GPU cost.
Remove the @keybinds config block and its dedicated Info subpanel. Rewrite the 11 examples that declared @keybinds to instead express keybinds as markdown-lite description prose: each key wrapped in `code`, bindings joined by ` · `. Strips the now-redundant parser branch, lint validation, renderer, and CSS.
Deprecate the desktop info panel. Credits now render as an absolutely- positioned overlay in the bottom-right corner, styled to match the description overlay. A new © toggle button in the top-left menu hides or shows it (highlighted orange when active, mirroring the MiniStats button). Mobile flow unchanged - the description sheet still hosts credits via renderInfoContent. Also pass pointer events through the empty space of #desktopPanelStack so links in the credits overlay underneath remain clickable.
Remember the show/hide state of the desktop credits overlay across page reloads, matching the convention used for sideBarCollapsed and codePaneCollapsed. Default-true when the key is absent so attribution is shown on first visit.
The centered top description overlay used to overlap the controls panel at narrow canvas widths. Drive its layout off a container query against the canvas container so it reacts to sidebar + code pane width changes, not just the viewport: - Canvas >= 1067px: centered, max-width 475 (unchanged). - Canvas 892-1066px: stays centered but shrinks 475 -> 300 via calc() so it never extends into the controls panel column. - Canvas < 892px: drops below the menu row, left-aligned, with width clamped to canvas - 304px (left margin + controls column + gap).
Add #exampleCredits and #showCreditsButton to the fullscreen display: none group alongside the controls panel and sidebar. CSS-only so the user's showCredits preference (sticky via localStorage) is preserved across fullscreen toggles - credits and button restore on exit.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
@credit/@flagblocks to example@configcomments, with schema validation.@keybindsdirective into description prose using markdown-lite — authors write keybinds inline as`key`chips separated by·. No more dedicated subpanel.**bold**,*italic*,`code`,[text](url), and{accent:text}palette colors — parsed safely to React nodes (no raw HTML).backdrop-filter: blurfrom every overlay (Controls panel, mobile sheet, mobile dock, description, credits) — was burning GPU time per frame over the live canvas; bumped background opacity 0.64 → 0.85 to compensate.Preview
Desktop: credits overlay in the bottom-right, toggled via the © button in the top-left menu
Mobile: credits rendered inside the info sheet alongside the description
Checklist
Manual tests
@creditblocks (button is hidden when there are no credits).@keybinds.