Expose and sync power-up inventory in Battle Tanks full-screen controls - #77
Merged
bashmohandes merged 1 commit intoAug 16, 2026
Merged
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 73a600e16f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| .arena-health{position:absolute;z-index:2;top:14px;left:50%;display:grid;width:min(52%,430px);grid-template-columns:1fr 1fr;gap:18px;transform:translateX(-50%);pointer-events:none}.health-card{display:grid;gap:5px;padding:8px 10px;border:1px solid rgba(255,255,255,.65);border-radius:9px;color:#fff;background:rgba(18,38,32,.72);box-shadow:0 5px 18px rgba(0,0,0,.18);backdrop-filter:blur(7px)}.health-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.health-card span{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.health-card strong{font-size:14px;font-variant-numeric:tabular-nums}.health-card.right>div:first-child{flex-direction:row-reverse}.health-track{height:7px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.2)}.health-track i{display:block;width:100%;height:100%;border-radius:inherit;background:#78d294;transition:width .35s ease,background .35s}.health-card.right .health-track i{margin-left:auto}.impact-callout{position:absolute;z-index:3;top:42%;left:50%;color:#fff;font-size:clamp(22px,4vw,38px);font-weight:900;letter-spacing:.08em;text-shadow:0 3px 16px #000;opacity:0;transform:translate(-50%,-50%) scale(.7);pointer-events:none}.impact-callout.show{animation:impact-pop .8s ease-out}@keyframes impact-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-65%) scale(1)}} | ||
| @media(max-width:480px){.arena-health{top:7px;width:58%;gap:5px}.health-card{padding:5px 6px}.health-card span{font-size:7px}.health-track{height:5px}} | ||
| .fullscreen-controls{display:none}.arena-wrap:fullscreen .fullscreen-controls,.arena-wrap.is-fullscreen .fullscreen-controls{position:absolute;z-index:5;bottom:max(14px,env(safe-area-inset-bottom));left:50%;display:grid;width:min(94vw,760px);grid-template-columns:repeat(7,minmax(44px,1fr));gap:7px;padding:8px;border:1px solid rgba(255,255,255,.55);border-radius:12px;background:rgba(15,28,24,.82);transform:translateX(-50%);backdrop-filter:blur(8px)}.arena-wrap[data-phase="game-over"] .fullscreen-controls{display:none}.fullscreen-controls button{min-height:46px;padding:5px;border:1px solid rgba(255,255,255,.55);border-radius:8px;color:#fff;background:rgba(255,255,255,.12);font-size:clamp(11px,1.8vw,16px);font-weight:800;touch-action:manipulation}.fullscreen-controls button:disabled{opacity:.4}.fullscreen-controls .fullscreen-fire{color:#14251f;background:#ffd36a}.arena-wrap .arena-share{top:clamp(70px,15%,92px);bottom:auto}.arena-wrap:fullscreen .arena-share,.arena-wrap.is-fullscreen .arena-share{top:max(76px,calc(env(safe-area-inset-top) + 64px));z-index:7}.arena-wrap:fullscreen .fullscreen-exit,.arena-wrap.is-fullscreen .fullscreen-exit{z-index:10;border:2px solid #fff;color:#10231c;background:#ffd36a;box-shadow:0 4px 18px rgba(0,0,0,.55)}@media(max-width:620px){.arena-wrap:fullscreen .fullscreen-controls,.arena-wrap.is-fullscreen .fullscreen-controls{grid-template-columns:repeat(4,1fr)}.fullscreen-controls .fullscreen-fire{grid-column:span 2}.arena-wrap:fullscreen .fullscreen-exit,.arena-wrap.is-fullscreen .fullscreen-exit{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));min-height:44px;padding-inline:12px}} | ||
| .fullscreen-inventory{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0;color:#fff}.fullscreen-inventory>strong{font-size:11px;text-transform:uppercase}.fullscreen-inventory .inventory{flex:1;min-height:0}.fullscreen-inventory .inventory button{min-height:36px;padding:4px 9px;border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.12);font-size:12px}.fullscreen-inventory .inventory:not(:has(button)){color:rgba(255,255,255,.75);font-size:12px} |
There was a problem hiding this comment.
In short landscape full-screen viewports with a collected item, this full-width row makes the control panel at least roughly 90px tall (a 36px inventory button, the 42px control row, gap, and padding), but the landscape rule later in this stylesheet still reduces the centered canvas by only 72px, leaving just 36px of bottom clearance. The inventory and controls therefore overlap the playable canvas—and can cover tanks—on the mobile-landscape layout that rule is intended to protect; increase the reserved space or compact/reposition the inventory in that media query.
Useful? React with 👍 / 👎.
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.
Motivation
Description
#fullscreen-inventory) to the Battle Tanks full-screen control bar inbattle-tanks/index.htmlso power-ups are visible while in full-screen.syncInventoryinbattle-tanks/scripts/app.jsto populate and render both the in-page#inventoryand the new#fullscreen-inventory, preserving disabled/online-only states and click activation behavior viausePowerUp..fullscreen-inventoryrules inbattle-tanks/styles.cssso it layouts as a full-width control row.tests/battle-tanks-page.test.jsthat asserts the full-screen inventory markup, synchronization hook, and styling rules are present.Testing
npm test -- --test-name-pattern='Battle Tanks|full-screen', which completed and all matched Battle Tanks/full-screen tests passed.npm run check, which succeeded without syntax errors.git diff --checkto validate no whitespace/patch errors, which returned clean results.Codex Task