Adding Games II ~ Wireframes - uchicago-cs/chigame GitHub Wiki

Wireframe for the "Words game"

"Words" Selection Screen (Middle Panel)

  • Title: “Words” prominently displayed.
  • Game Mode Selection:
    • Three modes: Solo, Versus, and Tournament.
    • Each mode is highlighted in a green pill-shaped button.
    • Below each mode, there's a placeholder for a short explanation (e.g., Mode: Explanation). Consistent Header/Footer: The Navigation bar and footer are identical to the Game Screen.

"Words" Gameplay Screen (Right Panel)

  • Header: “Words” title remains at the top.
  • Streak Display: Shows a counter labeled Streak: # on the left.
  • Game Grid: A familiar Wordle layout with 6 rows of 5 boxes each for word guessing.
  • Scoreboard (Right): Displays scoring based on number of guesses (1 word: #, 2 word: #, etc.).
  • Virtual Keyboard: Full on-screen QWERTY keyboard at the bottom with “ENTER” and backspace buttons.