Game interface: ONGOING GAME SCREEN

[quinteselena]

Game Screen Initial Prototype

I have developed the first visual prototype for our game screen. This design focuses on usability and the "Quality of Life" features we discussed (Hints, Undo, Chat).

🖼️ Visual Preview

📸 Click to view Prototype Screenshots

Paper prototype

AI prototype

---

Design Decisions & Questions

@UO300569 @UO277488

Please review the following points regarding our UI/UX strategy. Check the box once you have reviewed the point and leave your thoughts in the comments.

1. Move Confirmation & Timing

• Q1: Validation - Should we implement a Confirm Button for each move, or is the move final as soon as the piece is dropped on the board?
• Q2: Turn Timer - If we use a "Confirm" button, should we add a visual timer (like the red bar in the prototype)?
  • Proposed behavior: If the timer ends, the player either loses the turn or the AI moves automatically.

2. Header & User Feedback

• Q3: Active Player - Idea: Display users at the top with a glow or highlight effect on the player whose turn is active.
• Q4: Top Bar Icons - Should we use small icons in the header for: Settings (⚙️), More Options (≡), Chat (💬), and Language (🌐)?

3. Chat & Responsive Layout

• Q5: Close Button - Should the "Close Chat" button be outside (as highlighted in red) or integrated inside the chat header?
• Q6: Auto-Resize - When the chat is closed, the screen should auto-resize, centering the hexagonal board in the middle of the workspace.
• Q7: Audio - Incoming messages will have a sound. Should the mute option be in "More Options", inside the chat, or both?

---

⚙️ Proposed "More Options" Menu

I suggest organizing the "More Options" menu into these categories. Please let me know if you agree:

🛠️ View Menu Content Details

1. Audio & Sound:
   • Master Mute.
   • Music vs. SFX (Independent sliders).
2. Accessibility (ISO 25010):
   • Color Blind Mode: Patterns or high-contrast colors for pieces.
   • Dark / Light Mode toggle.
3. UI Layout:
   • Chat Position: Toggle Left/Right.
   • Screen Focus: Fullscreen mode.
4. Information & Support:
   • How to Play: Visual tutorial of "Game Y".
   • Rules Summary: Quick guide for board variations.
5. Gameplay (QoL):
   • Move Confirmation Dialog: Toggle "¿Are you sure?" on/off.
   • Show Legal Moves: Toggle visual hints (dots).
   • AI Speed: Control the machine's execution speed.
6. Support & Credits:
   • Report a Bug: Direct link to GitHub Issues (🐛).
   • About the Team: Credits and roles.

---

🛠️ Next Steps

• Collect feedback from this issue.
• Finalize UI component structure in React.
• Start integration with the Rust Logic Engine (YEN notation).

---

[UO300569]

Review

For the parts that I agree on or don't have anything more to add, I left them empty

1. Move Confirmation & Timing

---

• Q1: Validation
  • In my opinion, it is better to add a Confirm Button so we can also add then the timer explained in Q2
• Q2: Turn Timer
  • I think it would be good to add a visual timer. Either a new progress bar is added or the part with the usernames should be the progress bar
  • Regarding when the timer ends, make the play that was not confirmed (with the button) if the user already had a play, or skip the turn if the player did not make any move
  • If when the timer finishes the turn is skipped, also add a button to skip so waiting for the timer is not the only option (maybe there is a strategy where it is better to skip?)

2. Header & User Feedback

---

• Q3: Active Player
• Q4: Top Bar Icons
  • It would be a nice idea to use icons, but making them all with the same style so they all look simillar (unlike the emojis where one is blue, another is smaller...)

3. Chat & Responsive Layout

• Q5: Close Button
  • I think the close button would be better both inside (like the in ✕ the 3rd photo) and outside, where if you click the open chat button while the chat is open, it closes.
• Q7: Audio
  • It would be better to have the mute option both inside the chat (to the left of the close button) and outside the chat in the "More Options"

---

⚙️ Proposed "More Options" Menu

🛠️ View Menu Content Details Changes

Only the parts where I would make changes are shown here

3. UI Layout:
   • Screen Focus: Fullscreen mode.
     • I think the fullscreen mode would be better to also have it while playing somewhere in the screen directly, without having to go through an intermediate page
4. Gameplay (QoL):
   • Move Confirmation Dialog: Toggle "¿Are you sure?" on/off.
     • This shouldn't be necessary if we have the "Confirm Button" explained before. If we don't have it, it is correct for me this part.
   • Show Legal Moves: Toggle visual hints (dots).
     • The game should directly only allow you to click on the parts that are not claimed by any player (just 1 click, not like chess where you have to click to show the moves and then click again to move)

---

[quinteselena]

David has done a initial ongoing game screen: