http://guide13.jazoon.com/#/submissions/165

1. The Making of
GEEK
Alain M. Lafon & Phil Hofmann
Panter AG, Zurich

2. Please find the code here
github.com/branch14/geek-jeopardy

3. Our tech stack

4. Imagine a client...
...who has the idea of an online version of
Jeopardy.
“Participants should be able to join the game
with their smartphones, using their own devices
to ring in to score points.”

5. Ultra brief Rules of Jeopardy
●
●
●
●
●
●
3 Players, 1 Master
30 Clues: 6 Categories x 5 Levels
Player selects category & level
Master reads clue, Players ring in
Correct answers score points
Wrong or no answers cost points
● The twist: Players phrase questions

6. But, there is always a ‘but’
The client needs the App in about an hour.
Luckily, the client has a UI design team that is
capable of producing markup…

8. Chapter I
Basic Setup

9. Next Steps
•
•
•
•
unpack markup provided
start revision control
specify and install dependencies
hack the backend

10. Unpack & Revision Control
•
•
•
views
public
assets
git init .
git add .
git commit -m ‘initial commit’

11. We need two components
Master (web)
Player (mobile web)

13. We only need the basics.

14. Introducing Rack
“Rack provides a minimal interface between
webservers supporting Ruby and Ruby
frameworks.”

15. Rack Data Structures
Request (List of Key Value Pairs)
{ ‘PATH_INFO’: ‘/index.html’,
‘REQUEST_METHOD’: ‘GET’ }
Response (Array with 3 elements)
[ <code>, <header>, <content> ]

16. Rack: use, map & run

17. Geek Jeopardy - Rack Config

18. Chapter II
Introducing CoffeeScript & Faye

19. Next Steps
•
•
•
•
•
•
•
Code Ping
Jeopardy Exceptions
Explain CoffeeScript
Explain PubSub Pattern
Introduce Faye
Briefly Mention Reactor Pattern
Demo Ping

20. Our Jeopardy (some exceptions)
•
•
•
Teams (instead of single contestants)
After a wrong answer you can ring in again
No Timeout (timeout is handled by the host)

21. CoffeeScript’s Basics
•
•
•
•
translates to JavaScript
borrows syntax from Ruby & Python
semantic white space
implicit return
CoffeeScript is basically an
implementation of the best
practices desribed in the book
“JavaScript: The Good Parts”.

22. PubSub Pattern

23. Faye (Implementation of Bayeux)

24. Reactor Pattern
“An Object Behavioral Pattern for
Demultiplexing and Dispatching Handles for
Synchronous Events”
Implementation in Ruby: eventmachine
•
single threaded (in our case a good thing)

25. Demo
Ping Pong

26. Chapter III
Joining Players into Teams

27. Next Steps
•
•
•
•
Code some game logic
A word about jQuery
Briefly Mention RFC 4122
Demo some game logic

28. jQuery - but why?
•
•
$.getScript(url, callback)
DOM manipulation vs. fancy Frameworks
Source:
http://trends.builtwith.com/javascript/jQuery

29. Joining Players into to Teams
pseudo_uuid & localStorage
pseudo_uuid = -> # rfc 4122
p = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
p.replace /[xy]/g, (c) ->
r = Math.random() * 16 | 0
v = if c=='x' then r else (r & 0x3 | 0x8)
v.toString 16
get_uuid = ->
uuid = localStorage.getItem 'uuid'
uuid ?= pseudo_uuid()
localStorage.setItem 'uuid', uuid
uuid

30. Demo
Join Players in Teams

31. Chapter IV
The State Machine &
Some CoffeeScript Details

32. Next Steps
•
•
•
•
Code the State Machine
Explain the State Machine
Some CoffeeScript Details
Demo the whole game

33. Jeopardy in Single Steps
•
•
•
•
•
•
A clue is selected
The clue is read
No buzz is received
Buzz is received
Answer is correct
Answer is wrong
These are all events.

34. Jeopardy as State Machine
4+1 states
6+1 transitions

35. State Machine in JavaScript
An event is a transition from one state to another.
events: [
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
{ name:
]
'start',
'clue_selected',
'clue_read',
'buzz_received',
'answer_wrong',
'answer_correct',
'no_buzz',
from: 'initialize',
to: 'select_clue' },
from: 'select_clue',
to: 'read_clue' },
from: 'read_clue',
to: 'receive_buzz' },
from: 'receive_buzz',
to: 'receive_answer' },
from: 'receive_answer', to: 'receive_buzz' },
from: 'receive_answer', to: 'select_clue' },
from: 'receive_buzz',
to: 'select_clue' }
https://github.com/jakesgordon/javascript-state-machine

36. Callbacks on Transitions
onanswer_correct: ->
faye.publish "/state/#{active_player}", state: 'inactive'
scores[players[active_player]] += board[active_clue].value
show_scores()
onbuzz_received: (event, from, to, data) ->
active_player = data.uuid
team = players[active_player]
$("#team-#{team} .team").css color: 'red'
$('#controls').show()
$('#no_buzz').hide()
faye.publish "/state/#{active_player}", state: 'active'

37. (Ask Alain how the
coding is going.)
Next up: CoffeeScript details

38. Function Definition & String
Interpol.
faye.subscribe "/pong", (data) ->
util.log "pong received with Team #{data.team}"
faye.subscribe("/pong", function(data) {
return util.log("pong received with Team " + data.team);
});

39. Named Fields
faye.publish "/pong/#{data.uuid}", { team }
faye.publish("/pong/" + data.uuid, { team: team });

40. List Comprehensions
team_counts = ->
counts = {a:0,b:0,c:0}
counts[v]++ for k, v of
players
counts
var team_counts;
team_counts = function() {
var counts, k, v;
counts = {a:0,b:0,c:0};
for (k in players) {
v = players[k];
counts[v]++;
}
return counts;
};

41. Demo
The whole game

42. Shameless Plugs
Panter is hiring.
If you want to work with us
speak to us.
phil@branch14.org
alain.lafon@dispatched.ch

43. Linkbait
Geek Jeopardy:
github.com/branch14/geek-jeopardy
Used technology:
Rack: rack.github.io/
Faye: faye.jcoglan.com/
Bayeux: svn.cometd.com/trunk/bayeux/bayeux.html
Eventmachine: rubyeventmachine.com/