WTactics Online Play : the first mockup

Anything related to dev. & that doesn't fit in below categories.
Post Reply
ngoeminne
Posts:324
Joined:Mon Feb 29, 2016 15:34
WTactics Online Play : the first mockup

Post by ngoeminne » Sun Sep 25, 2016 12:29

Hi folks,

Since we discussed to revive sandscape and create an online playable game. I start to work on a prototype mockup version. The goals I set for the mockup are the following:

Research wise:
- Create a more or less appealing layout ( a perspective table)
- Investigate/research the browsers capabilities (CSS3)
- Drag and drop support
- Learn Vue.js / dust off my JQuery skills

Functional wise
- Cards on the play field are
- draggable
- droppable in hand, deck and graveyards
- (un)markable by double click
- turn face up/face down by right click
- Cards in hand are draggable & droppable in play, decks and graveyards (and opponent hand)

- Deck & Graveyard have the following actions
- draw card to player hand
- discard top card to graveyard (target graveyard depends on deck)
- deck top card (put the card on top of the deck)
- put top card in play directly
- shuffle cards
- View the deck / graveyard / opponent's hand (see next)
- number of cards in the deck / graveyard /hand

- Viewing the deck / graveyard
- the entire card list can be made face up/face down
- a single card can be made face up/face down by context click
- the deck can be shuffled
- a single card can be selected and then some actions can be applied
- draw to player's hand, discard to graveyard (owner's), put in play, put on top of deck (owner's)
- drag and drop reordering of the cards is also possible
- When dismissing the flyout-list it is important to know that the card state will be shown in the game. Thus face up cards will be shown face up, and vice versa.

- Opponent hand is shown at the top, it features only some actions and the number of cards in his/her hand

- Opponent's Victory Points are in the top-left, the player's in the bottom right
- they can be changed by dragging the round slider, or with the mouse wheel

- Resources can be maintained on the left of the battlefield, for each kind of resource a different color is available (red = Red Banner, Yellow = The Empire, Blue = House of Nobles, Green = Gaian, black = Dark Legion).
- they are indicated by "used / available" e.g. 3/5. The numbers can be changed by clicking, (no visual feedback yet), if you hit the top of the available number it will increase, if you hit the bottom it will decrease. The used counter is limited to the available number. Btw, they can also be changed more easily by the mouse wheel.

- Card preview : when hovering over a face up card a larger preview is shown in the top right corner.

Functional limitations and items out of the mockup's scope:
- card counters are not yet supported
- the players actions are not recorded nor shown
- the decks are fixed (and not fetched from our card db)
- no game setup, (creation, joining)
- no backend, thus no communication, thus no actual game (was not the purpose of the mockup)
- no game api
- Only support for rather new browser versions (latest versions of Chrome, FireFox, Edge)

So after all this info, here's the mockup (keep in mind it is only a UI (play interaction) test

http://wtactics.westeurope.cloudapp.azu ... index.html

Oh yeah, it does fetch the card images from our card db, so once in a while clear your cache (CTRL+F5) and you'll get the latest rules and Santi's artwork.

Feedback and suggestions are always welcome, here, on our freenode channel or by mail.
Enjoy,

Nico
ngoeminne
Posts:324
Joined:Mon Feb 29, 2016 15:34

Re: WTactics Online Play : the first mockup

Post by ngoeminne » Wed Oct 19, 2016 19:14

Hey folks,

Check out the screencast of the online play mockup:

https://www.youtube.com/watch?v=M17bCqV ... e=youtu.be

Kind regards,
Nico
Post Reply