Improve CSS-only UI, HUD, documentation, and build workflow#4
Open
dgmnzrd wants to merge 12 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Refactors the project into a more maintainable SCSS + Pug structure, adds documentation, and improves the UI/UX (HUD panels, responsive layout, and accessibility attributes) while keeping the CSS-only interaction model.
Changes:
- Split the previous monolithic
main.scssinto multiple SCSS partials and centralized block tokens. - Expanded
index.pugUI (inventory, mode status, hints) and introduced world-size presets with inline status display. - Added project docs (
WORLD_CONFIG.md,ARCHITECTURE.md), build tooling (package.json), and ignored generated artifacts (main.css,index.html).
Reviewed changes
Copilot reviewed 14 out of 19 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
main.scss |
Replaced monolithic styles with @use imports of partials |
styles/_tokens.scss |
Centralizes $blocks and CSS custom properties (images, sizing) |
styles/_base.scss |
Base element styling extracted from previous main.scss |
styles/_info.scss |
New structured info panel styling |
styles/_controls.scss |
New HUD/control panel styling + :has() driven state UI |
styles/_world.scss |
Extracted 3D world/cube styling and selection-driven visuals |
styles/_interactions.scss |
Hover/focus/“remove mode” interaction styling |
styles/_responsive.scss |
Responsive adjustments and reduced-motion handling |
index.pug |
Adds world presets, HUD layout, ARIA labels, and more preloads |
README.md |
Expanded setup/build/run documentation |
WORLD_CONFIG.md |
Documents DOM-per-position performance implications + presets |
ARCHITECTURE.md |
Explains the CSS-only architecture and interaction model |
.gitignore |
Stops committing generated build outputs |
package.json |
Adds local build/dev scripts and dev dependencies |
main.css |
Removed generated CSS artifact from the repo |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+95
to
+107
| & .mode-message.air { | ||
| color: #ff9b9b; | ||
| --mode-image: var(--pickaxe-image); | ||
|
|
||
| &::before { | ||
| border-radius: 999rem; | ||
| } | ||
| } | ||
|
|
||
| @each $block in $blocks { | ||
| & .mode-message.#{$block} { | ||
| --mode-image: var(--#{$block}-image); | ||
| } |
Comment on lines
+27
to
+32
| .controls label:focus-visible, | ||
| .controls button:focus-visible, | ||
| .info .close:focus-visible { | ||
| outline: 3px solid #f7d66d; | ||
| outline-offset: 3px; | ||
| } |
Comment on lines
+148
to
+150
| &:has(> .cube.#{list.nth($blocks, 1)} > input[type=radio]:checked) { | ||
| display: none; | ||
| } |
| //- Current block types: 8 | ||
| //- | ||
|
|
||
| - const worldPresets = { small: { layers: 7, rows: 7, columns: 7 }, default: { layers: 9, rows: 9, columns: 9 }, large: { layers: 11, rows: 11, columns: 11 }, experimental: { layers: 13, rows: 13, columns: 13 } }; |
Comment on lines
+247
to
+251
| @each $block, $_ in $blocks { | ||
| &:has(.block-chooser > .#{$block} > input[type=radio]:checked) ~ main .cubes-container > .cube:not(.#{$block}) { | ||
| display: none; | ||
| } | ||
| } |
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
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.
Summary
This PR improves the CSS-only Minecraft experience while keeping the project JavaScript-free at runtime.
Changes
index.html,main.css, andmain.css.map.Notes
The final page still uses only HTML and CSS. No JavaScript was added to the runtime game logic.