keep-starknet-strange / tsubasa

Tsubasa onchain game built with Dojo, running on a Starknet Appchain.

https://play.tsubasa.win

MIT License

60 stars 31 forks source link

Game board design #3

Open 0xLucqs opened 1 year ago

0xLucqs commented 1 year ago

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

clicksave commented 1 year ago

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

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

(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

0xLucqs commented 1 year ago

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

clicksave commented 1 year ago

Game board update:

OK so we have some more formal comps

Game board has three sections

Scoreboard Section

See https://github.com/keep-starknet-strange/tsubasa/issues/18

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

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

Field Section

Everything here is /In play/

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:

https://github.com/keep-starknet-strange/tsubasa/discussions/11#discussioncomment-6660892

Hand Section

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

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

I will follow up here with hover states for these

Background is outlined in this issue

Responsiveness

Game board looks like this on mobile

Resources

Pages - Components