Feature Request: Horizontal battle arena layout with visual battle graphics #45

New issue

Closed

opened 2026-06-03 01:39:49 +00:00 by Mark · 0 comments

Mark commented

2026-06-03 01:39:49 +00:00

Owner

Summary

Currently the game layout is a vertical stack: opponent section at top, VS divider, player section at bottom. This feels like a mobile-era UI rather than an immersive battle arena. Requesting a horizontal layout with a visually rich battle arena that illustrates the battle with graphics.

Current Layout

[ Opponent section ]

      VS

[ Player section ]

[ Symbol palette + SpellHorizon + actions ]

This is essentially two rows with a label between them — not an "arena."

Desired Layout (Horizontal/Battle Arena)

+--sidebar--+--------------------------arena---------------------+--sidebar--+
|           |                                                    |          |
|  Opponent |  [Opponent's left chain]  vs  [Player's right chain] |  Player  |
|  Status   |                                                    |  Status  |
|           |  [Opponent's right chain] vs  [Player's left chain] |          |
|           |                                                    |          |
+--info-----+--------------------------actions------------------+----------+
|           |  [SpellHorizon / reachable spells]                |          |
|           |  [Symbol Palette]                                 |          |
+-----------------------------------------------------------------------+

Key Changes Requested

1. Horizontal Player Positioning

Player on the right (facing left), opponent on the left (facing right) — like facing opponents in combat
Health bars on outer edges (vertical orientation)
Chains in the middle, visually "clashing"
Dead lane indicators as physical obstructions/blocked paths

2. Battle Arena Visuals

Background gradient or subtle texture suggesting magical battlefield
Visual effects for active conditions (barbed, veiled, etc.) shown as aura/particles around chains
Flow tags visualized with color-coded energy between symbols
Chain symbols could have connecting lines/energy threads between them
Dead lanes shown as cracked/shattered/faded chain segments

3. Combat Feedback

When spells fire, show visual connection from casting hand to opponent
Damage flashes in red toward opponent's health bar
Healing glows in green toward player's health bar
Chain resolution shown as energy flowing through the chain

4. Side Panels

Left panel: opponent info (conditions, active modifiers, will/vitality)
Right panel: player info (same)
Bottom strip: symbol palette + SpellHorizon + turn controls

5. Atmospheric Elements

Subtle ambient particle effects (floating runes, energy motes)
Screen-edge vignette that intensifies when low on vitality/will
Chain color that shifts based on flow state (open=green, dead=gray, etc.)

Implementation Notes

Relevant components to work with:

src/components/ChainPane.tsx — chain display, would need reorientation for horizontal
src/components/HealthBar.tsx — currently horizontal, could be rotated to vertical
src/components/ChainResolveVFX.tsx — already has some VFX, expand for spell hit effects
src/components/ModifierMarker.tsx — would need to show on chains/around player avatar
src/components/SpellHorizon.tsx — stays bottom-center

Labels

priority:p2, UX, feature-request, visual-design

## Summary Currently the game layout is a vertical stack: opponent section at top, VS divider, player section at bottom. This feels like a mobile-era UI rather than an immersive battle arena. Requesting a horizontal layout with a visually rich battle arena that illustrates the battle with graphics. ## Current Layout ``` [ Opponent section ] VS [ Player section ] [ Symbol palette + SpellHorizon + actions ] ``` This is essentially two rows with a label between them — not an "arena." ## Desired Layout (Horizontal/Battle Arena) ``` +--sidebar--+--------------------------arena---------------------+--sidebar--+ | | | | | Opponent | [Opponent's left chain] vs [Player's right chain] | Player | | Status | | Status | | | [Opponent's right chain] vs [Player's left chain] | | | | | | +--info-----+--------------------------actions------------------+----------+ | | [SpellHorizon / reachable spells] | | | | [Symbol Palette] | | +-----------------------------------------------------------------------+ ``` ## Key Changes Requested ### 1. Horizontal Player Positioning - Player on the right (facing left), opponent on the left (facing right) — like facing opponents in combat - Health bars on outer edges (vertical orientation) - Chains in the middle, visually "clashing" - Dead lane indicators as physical obstructions/blocked paths ### 2. Battle Arena Visuals - Background gradient or subtle texture suggesting magical battlefield - Visual effects for active conditions (barbed, veiled, etc.) shown as aura/particles around chains - Flow tags visualized with color-coded energy between symbols - Chain symbols could have connecting lines/energy threads between them - Dead lanes shown as cracked/shattered/faded chain segments ### 3. Combat Feedback - When spells fire, show visual connection from casting hand to opponent - Damage flashes in red toward opponent's health bar - Healing glows in green toward player's health bar - Chain resolution shown as energy flowing through the chain ### 4. Side Panels - Left panel: opponent info (conditions, active modifiers, will/vitality) - Right panel: player info (same) - Bottom strip: symbol palette + SpellHorizon + turn controls ### 5. Atmospheric Elements - Subtle ambient particle effects (floating runes, energy motes) - Screen-edge vignette that intensifies when low on vitality/will - Chain color that shifts based on flow state (open=green, dead=gray, etc.) ## Implementation Notes Relevant components to work with: - `src/components/ChainPane.tsx` — chain display, would need reorientation for horizontal - `src/components/HealthBar.tsx` — currently horizontal, could be rotated to vertical - `src/components/ChainResolveVFX.tsx` — already has some VFX, expand for spell hit effects - `src/components/ModifierMarker.tsx` — would need to show on chains/around player avatar - `src/components/SpellHorizon.tsx` — stays bottom-center ## Labels priority:p2, UX, feature-request, visual-design