keep-starknet-strange/tsubasa

Game board design

Opened this issue · 3 comments

Description

According to the game rules we need a game board design.

The game board screen is vital for the demo, we need something balanced between intuitive and easy to design/integrate. We absolutely need this for next Friday.

Acceptance criteria

  • We'll schedule a meeting with Starkware/Dojo/Designer to validate the design

Game Page

Here, you're in the middle of a game. on the left side is your hand with cards that are available to be played. On the right side is the game board

image

Breaking down the status bar from left to right...

image

(Goal Scored Against) (Player ID) (Available Energy) (Cards in Hand)

Note: Think the game is sufficiently detailed that we'll want some kind of onboarding flow
Note: Think theres a fun opportunity to show the players position and for that to have some kind of meaninful game impact


Game State Change

Created a simple overlay that can flash on the screen whenever the state of the game changes I.e. Game start or Round End

image

I like the design it great but how about we add a background related to football, either a stadium or whatever you think works best

Game board update:

OK so we have some more formal comps

image

Game board has three sections


Scoreboard Section

image

See #18

Scoreboard shows game state, and has some player information to the left and right side.

image

The user thumbnail is a chat head of your deck's captain


Field Section

Everything here is /In play/

image

Cards here are attacking/ dribbling / etc. ideally we'll have some animation that can articulate combat

Described some of the card behaviors and feedback here:

#11 (comment)


Hand Section

image

These are the cards in your hand, you can play them to the field if you can meet their energy requirements...

Available energy is displayed here and it increases incrementally each turn

image

The buttons to the left and right of your hand allow you to either concede the match or end your turn

image

I will follow up here with hover states for these


Background is outlined in this issue

Link


Responsiveness

Game board looks like this on mobile

image

Resources

Pages - Components