Skip to content

a 1010! game clone in vanilla JS and snapSVG

Notifications You must be signed in to change notification settings

JosePedroDias/tenbyten

Repository files navigation

ten by ten

what is this

I'm programming a clone of the popular mobile game 1010!

roadmap

  • client: mimic game rules and layout
  • both: refactor logic so it can run in bot client and server-side
  • client: rewrite client with common refactoring
  • server: deploy server to validate ongoing games and store highscores
  • client: make client use server
  • client: store name, email and theme on localStorage
  • client: add some animations (line shrinking pieces, alert fade)
  • client: handle server timeout better: lock while communicating; retry n times, allow retry later
  • client: create sfx w/ webaudio
  • server: added stats endpoint
  • client: made stats page
  • client: toggle sound button; use alternate svg icons
  • client: display credits on 8bit font and ribbon to the github repos
  • client: make sfx work on mobile browsers or fallback impl with samples (using audacity and soundflower)
  • server: store whole game in server for replay
  • client: mode which receives an id for a recorded session and plays it
  • client: make it work on windows phone (lock scroll)

resources

assets:

client-side libs:

  • snapSVG - SVG rendering lib
  • jsfx - web audio sound effects

server-side modules:

  • response-time - returns response header X-Response-Time
  • express-stats - measures several server stats, returning them at an endpoint (customized it)

server-side highscores

game session state consists of:
- id    (session id)
- m     (10x10 of bool, initially false)
- slots (int[3], random pieceIdx, each can be false if empty)
- step  (int, initially 0)
- score (int, initially 0)
- ended (bool, initially false)

endpoints:

/new-game
creates new game session, returning it
<gameSessionState> (always)


/play/<sessionId:string>/<step:int>/<slotIndex:int>/<x:int>/<y:int>
attempts to play the given command and returns updated state
{err:'invalid arguments'} (if malformed params)    
{err:'inactive session'}  (if session does not exist)
{err:'finished game'}     (if session already ended)
{err:'no piece found'}    (if slot has no piece)
{err:'piece did not fit'} (if piece does not fit matrix)


/highscore/<sessionId:string>/<email:string>/<name:string>
converts an ended state into a high score (email is to use gravatar avatar)
{score:<int>, rank:<int>} (regular scenario)
{err:'inactive session'}  (if session does not exist)
{err:'unfinished game'}   (if session hasn't ended)


/highscores
returns array of ordered high scores
{err:null, results:[{name:<string>, email:<string>, score:<int>}]}


/get/<sessionId:string>
for debugging purposes. sends current state, with matrix


/active-sessions
for debugging purposes. returns array of active sessions