From 493b116f73ec3912ca7af3d6ece3434279cbcfb5 Mon Sep 17 00:00:00 2001 From: Olivier Gayot Date: Fri, 9 Mar 2018 13:38:22 +0100 Subject: renamed the project SwiftStory Signed-off-by: Olivier Gayot --- webapp/cao-common.css | 32 ---- webapp/cao-common.js | 348 ----------------------------------------- webapp/cao-config.js | 13 -- webapp/cao-desktop.html | 21 --- webapp/cao-desktop.js | 88 ----------- webapp/cao-mobile.css | 147 ----------------- webapp/cao-mobile.html | 41 ----- webapp/cao-mobile.js | 155 ------------------ webapp/index.html | 2 +- webapp/swiftstory-common.css | 32 ++++ webapp/swiftstory-common.js | 348 +++++++++++++++++++++++++++++++++++++++++ webapp/swiftstory-config.js | 13 ++ webapp/swiftstory-desktop.html | 21 +++ webapp/swiftstory-desktop.js | 88 +++++++++++ webapp/swiftstory-mobile.css | 147 +++++++++++++++++ webapp/swiftstory-mobile.html | 41 +++++ webapp/swiftstory-mobile.js | 155 ++++++++++++++++++ 17 files changed, 846 insertions(+), 846 deletions(-) delete mode 100644 webapp/cao-common.css delete mode 100644 webapp/cao-common.js delete mode 100644 webapp/cao-config.js delete mode 100644 webapp/cao-desktop.html delete mode 100644 webapp/cao-desktop.js delete mode 100644 webapp/cao-mobile.css delete mode 100644 webapp/cao-mobile.html delete mode 100644 webapp/cao-mobile.js create mode 100644 webapp/swiftstory-common.css create mode 100644 webapp/swiftstory-common.js create mode 100644 webapp/swiftstory-config.js create mode 100644 webapp/swiftstory-desktop.html create mode 100644 webapp/swiftstory-desktop.js create mode 100644 webapp/swiftstory-mobile.css create mode 100644 webapp/swiftstory-mobile.html create mode 100644 webapp/swiftstory-mobile.js (limited to 'webapp') diff --git a/webapp/cao-common.css b/webapp/cao-common.css deleted file mode 100644 index c574b6d..0000000 --- a/webapp/cao-common.css +++ /dev/null @@ -1,32 +0,0 @@ -body { - background-color: #222222; - color: #dddddd; -} - -td { - border: 1px white solid; -} - -#black_card { - display: none; -} - -#white_cards { - display: none; -} - -#played_cards { - display: none; -} - -#btn_join { - display: none; -} - -#btn_collect { - display: none; -} - -#btn_pick_black { - display: none; -} diff --git a/webapp/cao-common.js b/webapp/cao-common.js deleted file mode 100644 index 0ec516d..0000000 --- a/webapp/cao-common.js +++ /dev/null @@ -1,348 +0,0 @@ -var CAO = function() { - this.on_socket_open = function() { /* to override */ }; - this.on_socket_close = function() { /* to override */ }; - this.on_socket_error = function(evt) { /* to override */}; - - this.on_join_game_ok = function(state) { /* to override */ }; - this.on_show_white_card = function(idx, desc) { /* to override */ }; - this.on_pick_black_card_ok = function() { /* to override */ }; - this.on_show_black_card = function(desc) { /* to override */ }; - this.on_play_white_card_ok = function(idx) { /* to override */ }; - this.on_collect_cards_ok = function() { /* to override */ }; - this.on_show_played_card = function(idx, desc) { /* to override */ }; - this.on_designate_card_ok = function(idx) { /* to override */ }; - - this.on_judge_needed = function() { /* to override */ }; - this.on_judge_designed = function() { /* to override */ }; - this.on_player_joined_game = function() { /* to override */ }; - this.on_card_played = function() { /* to override */ }; - this.on_cards_collected = function() { /* to override */ }; - this.on_updated_score = function(new_score) { /* to override */ }; - this.on_change_state = function(state) { /* to override */ }; - this.on_change_nbr_played_cards = function(nbr) { /* to override */ }; - - var request_queue = []; - - var judge = false; - - var self = this; - var ws; - - var lang; - - var nbr_played_cards = 0; - - var played_cards = []; - var white_cards = {}; - var black_card; - - var score = 0; - - var map_handle_response_ok = {}; - var map_handle_notif = {}; - - this.set_lang = function(language) { - lang = language; - }; - - this.is_judge = function() { - return judge; - }; - - this.reset_nbr_played_cards = function() { - nbr_played_cards = 0; - - self.on_change_nbr_played_cards(nbr_played_cards); - }; - - this.incr_nbr_played_cards = function() { - ++nbr_played_cards; - - self.on_change_nbr_played_cards(nbr_played_cards); - }; - - this.get_white_card_event = function(idx) { - return white_cards[idx]['event']; - }; - - this.get_played_card_event = function(idx) { - return played_cards[idx]['event']; - }; - - this.change_state = function(state) { - game_state = state; - - switch (state) { - case 'waiting_judge': - played_cards = []; - self.reset_nbr_played_cards(); - judge = false; - - self.on_judge_needed(); - - break; - case 'waiting_collection': - break; - case 'waiting_designation': - break; - } - - this.on_change_state(state); - }; - - /* map_handle_response_ok {{{ */ - - map_handle_response_ok['join_game'] = function(result) { - self.on_join_game_ok(); - - self.change_state(result['game_state']); - - map_handle_response_ok['view_player_cards'](result); - }; - - map_handle_response_ok['view_player_cards'] = function(result) { - for (var i in result['cards']) { - var idx = result['cards'][i][0]; - var desc = result['cards'][i][1]; - - white_cards[idx] = { - 'desc': desc, - 'event': self.gen_callback_white_card(idx) - }; - - self.on_show_white_card(idx, desc) - } - }; - - map_handle_response_ok['pick_black_card'] = function(result) { - judge = true; - self.change_state('waiting_collection'); - - self.on_pick_black_card_ok(); - map_handle_response_ok['view_black_card'](result); - }; - - map_handle_response_ok['view_black_card'] = function(result) { - black_card = result; - self.on_show_black_card(black_card); - }; - - map_handle_response_ok['play_white_card'] = function(result) { - idx = result['card_id']; - - self.on_play_white_card_ok(idx); - - delete white_cards[idx]; - }; - - map_handle_response_ok['collect_cards'] = function(result) { - self.change_state('waiting_designation'); - - self.on_collect_cards_ok(); - map_handle_response_ok['view_played_cards'](result); - }; - - map_handle_response_ok['view_played_cards'] = function(result) { - for (var i in result) { - var desc = result[i]; - - played_cards.push({ - 'desc': desc, - 'event': self.gen_callback_played_card(i), - }); - self.on_show_played_card(i, desc); - } - - if (!result.length) { - self.gen_callback_played_card(null)(); - } - }; - - map_handle_response_ok['designate_card'] = function(result) { - self.change_state('waiting_judge'); - - self.on_designate_card_ok(); - }; - - /* }}} */ - /* handle_notif {{{ */ - - map_handle_notif['judge_designed'] = function(result) { - self.change_state('waiting_collection'); - - self.on_judge_designed(); - }; - - map_handle_notif['received_card'] = function(result) { - var idx = result['card']['id']; - var desc = result['card']['desc']; - - white_cards[idx] = { - 'desc': desc, - 'event': self.gen_callback_white_card(idx) - }; - - self.on_show_white_card(idx, desc); - }; - - map_handle_notif['judge_needed'] = function(result) { - self.change_state('waiting_judge'); - }; - - map_handle_notif['player_joined_game'] = function(result) { - self.on_player_joined_game(); - }; - - map_handle_notif['card_played'] = function(result) { - self.incr_nbr_played_cards(); - - self.on_card_played(); - }; - - map_handle_notif['cards_collected'] = function(result) { - self.change_state('waiting_designation'); - - self.on_cards_collected(); - }; - - map_handle_notif['updated_score'] = function(result) { - self.score = result; - - self.on_updated_score(self.score); - }; - - /* }}} */ - - this.run = function() { - ws = new WebSocket('ws://' + document.location.hostname + ':1236'); - - ws.onopen = function() { - console.log('connection established'); - self.on_socket_open(); - }; - - ws.onclose = function() { - self.on_socket_close(); - }; - - ws.onmessage = function(evt) { - var message = JSON.parse(evt.data); - - if (message['type'] == 'notification') { - handle_notif(message['content']); - } else { - handle_response(message['content']); - } - }; - - ws.onerror = function(evt) { - console.log(evt); - self.on_socket_error(evt); - }; - - }; - - var handle_notif = function(notif) { - if (map_handle_notif[notif['op']]) { - map_handle_notif[notif['op']](notif['content']); - } else { - console.log('unhandled notif ' + notif); - } - }; - - var handle_response = function(response) { - var rq = request_queue.shift(); - - if (response['status'] != 0) { - alert(response['info']); - return; - } - - if (map_handle_response_ok[rq]) { - map_handle_response_ok[rq](response['result']) - } else { - console.log(evt); - } - }; - - this.gen_callback_white_card = function(index) { - return function() { - var request = { - 'op': 'play_white_card', - 'card_id': index, - }; - - request_queue.push('play_white_card'); - ws.send(JSON.stringify(request)); - }; - }; - - this.gen_callback_played_card = function(index) { - return function() { - var request = { - 'op': 'designate_card', - 'card_id': index, - }; - - request_queue.push('designate_card'); - ws.send(JSON.stringify(request)); - }; - }; - - this.join_game = function(game_name) { - var request = { - 'op': 'join_game', - 'game_name': game_name, - 'lang': lang, - }; - request_queue.push('join_game'); - ws.send(JSON.stringify(request)); - }; - - this.pick_black_card = function() { - var request = { - 'op': 'pick_black_card', - }; - request_queue.push('pick_black_card'); - ws.send(JSON.stringify(request)); - }; - - this.collect_cards = function() { - var request = { - 'op': 'collect_cards', - }; - request_queue.push('collect_cards'); - ws.send(JSON.stringify(request)); - }; - - this.request_show_cards = function() { - var request = { - 'op': 'view_player_cards', - }; - - request_queue.push('view_player_cards'); - ws.send(JSON.stringify(request)); - }; - this.request_show_black_card = function() { - var request = { - 'op': 'view_black_card', - }; - - request_queue.push('view_black_card'); - ws.send(JSON.stringify(request)); - }; - this.request_show_played_cards = function() { - var request = { - 'op': 'view_played_cards', - }; - - request_queue.push('view_played_cards'); - ws.send(JSON.stringify(request)); - }; -}; - -var cao; - -$(document).ready(function() { - cao = new CAO(); -}); diff --git a/webapp/cao-config.js b/webapp/cao-config.js deleted file mode 100644 index ddfe0fc..0000000 --- a/webapp/cao-config.js +++ /dev/null @@ -1,13 +0,0 @@ -$(document).ready(function() { - var lang; - var hostname = document.location.hostname; - - /* XXX replace this with your desired behaviour */ - if (hostname.substring(0, 3) === 'fr.') { - lang = 'fr'; - } else if (hostname.substring(0, 3) === 'en.') { - lang = 'en'; - } - - cao.set_lang(lang); -}); diff --git a/webapp/cao-desktop.html b/webapp/cao-desktop.html deleted file mode 100644 index 34f4721..0000000 --- a/webapp/cao-desktop.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - CAO - - - - - - - - - - -
-
- - - - diff --git a/webapp/cao-desktop.js b/webapp/cao-desktop.js deleted file mode 100644 index faa864b..0000000 --- a/webapp/cao-desktop.js +++ /dev/null @@ -1,88 +0,0 @@ -$(document).ready(function() { - $('#btn_join').click(function() { - var game_name = prompt('Name of the game'); - - cao.join_game(game_name); - }); - - $('#btn_pick_black').click(function() { - cao.pick_black_card(); - }); - - $('#btn_collect').click(function() { - cao.collect_cards(); - }); - - cao.on_socket_open = function() { - $('#btn_join').show(); - }; - - cao.on_join_game_ok = function(state) { - $('#btn_join').hide(); - $('#btn_pick_black').show(); - $('#white_cards').show(); - }; - - cao.on_show_white_card = function(idx, desc) { - identifier = 'white_card_' + idx; - content = '
  • ' + desc + '
    • '; - - $('#white_cards').append(content); - - $('#' + identifier).dblclick(this.gen_callback_white_card(idx)); - }; - - cao.on_show_played_card = function(idx, desc) { - identifier = 'played_card_' + idx; - - content = '
  • ' + desc + '
    • '; - - $('#played_cards').append(content); - - $('#' + identifier).dblclick(this.gen_callback_played_card(idx)); - }; - - - cao.on_pick_black_card_ok = function() { - $('#btn_collect').show(); - $('#btn_pick_black').hide(); - }; - - cao.on_show_black_card = function(desc) { - $('#black_card').show(); - $('#black_card').html(desc); - }; - - - cao.on_play_white_card_ok = function(idx) { - identifier = 'white_card_' + idx; - $('#' + identifier).remove(); - }; - - cao.on_designate_card_ok = function() { - $('#played_cards').empty(); - $('#played_cards').hide(); - $('#black_card').hide(); - $('#btn_collect').hide(); - $('#btn_pick_black').show(); - }; - - cao.on_collect_cards_ok = function() { - $('#btn_collect').hide(); - $('#played_cards').show(); - }; - - cao.on_judge_designed = function() { - $('#btn_pick_black').hide(); - }; - - cao.on_judge_needed = function() { - $('#btn_pick_black').show(); - }; - - cao.on_updated_score = function(score) { - console.log('new score: ' + score); - }; - - cao.run(); -}); diff --git a/webapp/cao-mobile.css b/webapp/cao-mobile.css deleted file mode 100644 index 796f190..0000000 --- a/webapp/cao-mobile.css +++ /dev/null @@ -1,147 +0,0 @@ -@import url(http://fonts.googleapis.com/css?family=Special+Elite); -body { - font-family: "Special Elite", sans-serif; - background: #333333; - color: #dddddd; -} -header { - background: #222222; - position: fixed; - top: 0; - left: 0; - right: 0; - height: 50px; - z-index: 1; - border-bottom: 4px solid #000; - padding: 20px; - box-sizing: border-box; -} -header > span#score { - opacity: 0.7; -} -header > span#leave-room { - opacity: 0.7; - float: right; - cursor: pointer; -} -header > span#leave-room:hover { - opacity: 1; -} -.page { - padding: 70px 20px 120px; - margin: auto; - max-width: 650px; -} -#home { - padding-top: 20px; -} -.page:not(.current) { - display: none; -} -h1 { - font-weight: normal; - font-size: 4.5em; - text-align: center; - text-shadow: 0 5px 0 #000; -} -h2 { - text-align: center; - font-weight: normal; - color: #999999; - font-size: 2em; -} -button { - outline: none; - font-size: 2em; - width: 100%; - cursor: pointer; - font-family: "Special Elite", sans-serif; -} -button.card { - color: #222222; - background: #dddddd; - border: 4px solid #999; - box-shadow: 0 5px 0 #999; - padding: 20px; - border-radius: 10px; - animation: appear .3s; -} -button.card:not(:last-child) { - margin-bottom: 20px; -} -button.card:active, button.card.black:active { - transform: translateY(5px); - box-shadow: none; -} -button.card.black { - background: #222222; - color: #dddddd; - border: 4px solid #000; - box-shadow: 0 5px 0 #000; -} -button.card:not(.active) { - opacity: 0.7; -} -button.card:hover { - opacity: 1.0; -} -div.card-list.read-only > button.card { - cursor: default; -} -div.card-list.read-only > button.card:hover { - opacity: 0.7; -} -div.card-list.read-only > button.card:active { - transform: none; - box-shadow: 0 5px 0 #999; -} -div.card-list.read-only > button.card.black:active { - box-shadow: 0 5px 0 #000; -} -.bottom { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 100px; - box-sizing: border-box; -} -div.bottom { - padding: 20px; - font-size: 1.5em; - background: #222222; - color: #dddddd; - border: 4px solid #000; -} -button.bottom { - font-size: 2.5em; - color: #222222; - border: 4px solid #455A64; - background: #78909C; - transition: .3s; -} -button.bottom:hover { - background: #455A64; - font-size: 2.7em; -} -.message { - padding: 40px; - font-size: 2.5em; - text-align: center; - text-shadow: 0 5px 0 #000; -} -@media screen and (max-width: 600px) { - h1 { - font-size: 3em; - } -} -@keyframes appear { - 0% { - opacity: 0; - transform: translateX(-400px); - } - 100% { - transform: translateX(0); - opacity: 0.7; - } -} \ No newline at end of file diff --git a/webapp/cao-mobile.html b/webapp/cao-mobile.html deleted file mode 100644 index 7aa619d..0000000 --- a/webapp/cao-mobile.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - CAO - - - - - - - - -
    - -
    -

    Cards Against Humanity

    -

    A party game for horrible people.

    - -
    -
    -
    -
    - -
    -
    You have 0 cards!
    -
    -
    -
    - -
    Pick the best card...
    -
    Choose a card...
    -
    Waiting for judge...
    - -
    - - diff --git a/webapp/cao-mobile.js b/webapp/cao-mobile.js deleted file mode 100644 index acac68e..0000000 --- a/webapp/cao-mobile.js +++ /dev/null @@ -1,155 +0,0 @@ -$(document).ready(function() { - var $home = $("#home"); - var $game = $("#game"); - var $become_judge = $('[data-state="become-judge"]'); - var $judge_collect = $('[data-state="judge-collect"]'); - var $judge_choose = $('[data-state="judge-choose"]'); - var $player_choose = $('[data-state="player-choose"]'); - var $player_wait = $('[data-state="player-wait"]'); - var $leave_room = $('#leave-room'); - var $all = $("[data-state]"); - var $join_btn = $("#join-btn"); - var $become_judge_btn = $("#become-judge-btn"); - var $judge_collect_btn = $("#judge-collect-btn"); - var $black_card = $("#black-card"); - var $played_card_number = $("#played-card-number"); - var $header = $("header"); - var $white_cards = $('#white-cards'); - var $played_cards = $('#played-cards'); - var $score_value = $('#score-value'); - - $leave_room.click(function () { - window.location.reload(); - }); - - $become_judge_btn.click(function() { - cao.pick_black_card(); - }); - - $join_btn.click(function () { - cao.join_game(prompt('Name of the game')); - }); - - $judge_collect_btn.click(function() { - cao.collect_cards(); - }); - - cao.on_socket_open = function() { - $join_btn.show(); - }; - - cao.on_join_game_ok = function() { - $header.show(); - $home.removeClass("current"); - $game.addClass("current"); - $all.hide(); - }; - - cao.on_change_state = function(state) { - $all.hide(); - - switch (state) { - case 'waiting_judge': - $become_judge.show(); - $white_cards.attr('disabled', true); - $white_cards.addClass('read-only'); - break; - case 'waiting_designation': - if (cao.is_judge()) { - $judge_choose.show(); - $played_cards.removeAttr('disabled'); - $played_cards.removeClass('read-only'); - } else { - $player_wait.show(); - $white_cards.attr('disabled', true); - $white_cards.addClass('read-only'); - } - break; - case 'waiting_collection': - if (cao.is_judge()) { - $judge_collect.show(); - $white_cards.attr('disabled', true); - $white_cards.addClass('read-only'); - } else { - $player_choose.show(); - $white_cards.removeAttr('disabled'); - $white_cards.removeClass('read-only'); - } - break; - default: - console.log('unhandled state'); - break; - } - }; - - cao.on_show_white_card = function(idx, desc) { - var identifier = 'white-card-' + idx; - var content = ''; - $white_cards.append(content); - var self = this; - $('#' + identifier).click(function () { - var $this = $(this); - if (!$white_cards.attr('disabled')) { - if ($this.hasClass("active")) { - cao.get_white_card_event($this.prop('name'))(); - } else { - $white_cards.find("> .card").removeClass("active"); - $this.addClass("active"); - } - } - }); - }; - - cao.on_show_played_card = function(idx, desc) { - var identifier = 'played-card-' + idx; - var content = ''; - $played_cards.append(content); - var self = this; - $('#' + identifier).click(function () { - var $this = $(this); - if (!$played_cards.attr('disabled')) { - if ($this.hasClass("active")) { - cao.get_played_card_event($this.prop('name'))(); - } else { - $played_cards.find("> .card").removeClass("active"); - $this.addClass("active"); - } - } - }); - }; - - cao.on_show_black_card = function(desc) { - $('#black-card').html(desc); - }; - - cao.on_play_white_card_ok = function(idx) { - $white_cards.attr('disabled', true); - $white_cards.addClass('read-only'); - - $player_wait.show(); - - $('#white-card-' + idx).remove(); - }; - - cao.on_updated_score = function(score) { - $score_value.text(score); - }; - - cao.on_change_nbr_played_cards = function(nbr) { - $played_card_number.text(nbr); - }; - - cao.on_collect_cards_ok = function() { - $white_cards.hide(); - $played_cards.show(); - }; - - cao.on_designate_card_ok = function(idx) { - $played_cards.empty(); - - $played_cards.hide(); - $white_cards.show(); - }; - - cao.run(); -}); diff --git a/webapp/index.html b/webapp/index.html index 8ffec2d..36c43de 120000 --- a/webapp/index.html +++ b/webapp/index.html @@ -1 +1 @@ -cao-mobile.html \ No newline at end of file +swiftstory-mobile.html \ No newline at end of file diff --git a/webapp/swiftstory-common.css b/webapp/swiftstory-common.css new file mode 100644 index 0000000..c574b6d --- /dev/null +++ b/webapp/swiftstory-common.css @@ -0,0 +1,32 @@ +body { + background-color: #222222; + color: #dddddd; +} + +td { + border: 1px white solid; +} + +#black_card { + display: none; +} + +#white_cards { + display: none; +} + +#played_cards { + display: none; +} + +#btn_join { + display: none; +} + +#btn_collect { + display: none; +} + +#btn_pick_black { + display: none; +} diff --git a/webapp/swiftstory-common.js b/webapp/swiftstory-common.js new file mode 100644 index 0000000..174b473 --- /dev/null +++ b/webapp/swiftstory-common.js @@ -0,0 +1,348 @@ +var SwiftStory = function() { + this.on_socket_open = function() { /* to override */ }; + this.on_socket_close = function() { /* to override */ }; + this.on_socket_error = function(evt) { /* to override */}; + + this.on_join_game_ok = function(state) { /* to override */ }; + this.on_show_white_card = function(idx, desc) { /* to override */ }; + this.on_pick_black_card_ok = function() { /* to override */ }; + this.on_show_black_card = function(desc) { /* to override */ }; + this.on_play_white_card_ok = function(idx) { /* to override */ }; + this.on_collect_cards_ok = function() { /* to override */ }; + this.on_show_played_card = function(idx, desc) { /* to override */ }; + this.on_designate_card_ok = function(idx) { /* to override */ }; + + this.on_judge_needed = function() { /* to override */ }; + this.on_judge_designed = function() { /* to override */ }; + this.on_player_joined_game = function() { /* to override */ }; + this.on_card_played = function() { /* to override */ }; + this.on_cards_collected = function() { /* to override */ }; + this.on_updated_score = function(new_score) { /* to override */ }; + this.on_change_state = function(state) { /* to override */ }; + this.on_change_nbr_played_cards = function(nbr) { /* to override */ }; + + var request_queue = []; + + var judge = false; + + var self = this; + var ws; + + var lang; + + var nbr_played_cards = 0; + + var played_cards = []; + var white_cards = {}; + var black_card; + + var score = 0; + + var map_handle_response_ok = {}; + var map_handle_notif = {}; + + this.set_lang = function(language) { + lang = language; + }; + + this.is_judge = function() { + return judge; + }; + + this.reset_nbr_played_cards = function() { + nbr_played_cards = 0; + + self.on_change_nbr_played_cards(nbr_played_cards); + }; + + this.incr_nbr_played_cards = function() { + ++nbr_played_cards; + + self.on_change_nbr_played_cards(nbr_played_cards); + }; + + this.get_white_card_event = function(idx) { + return white_cards[idx]['event']; + }; + + this.get_played_card_event = function(idx) { + return played_cards[idx]['event']; + }; + + this.change_state = function(state) { + game_state = state; + + switch (state) { + case 'waiting_judge': + played_cards = []; + self.reset_nbr_played_cards(); + judge = false; + + self.on_judge_needed(); + + break; + case 'waiting_collection': + break; + case 'waiting_designation': + break; + } + + this.on_change_state(state); + }; + + /* map_handle_response_ok {{{ */ + + map_handle_response_ok['join_game'] = function(result) { + self.on_join_game_ok(); + + self.change_state(result['game_state']); + + map_handle_response_ok['view_player_cards'](result); + }; + + map_handle_response_ok['view_player_cards'] = function(result) { + for (var i in result['cards']) { + var idx = result['cards'][i][0]; + var desc = result['cards'][i][1]; + + white_cards[idx] = { + 'desc': desc, + 'event': self.gen_callback_white_card(idx) + }; + + self.on_show_white_card(idx, desc) + } + }; + + map_handle_response_ok['pick_black_card'] = function(result) { + judge = true; + self.change_state('waiting_collection'); + + self.on_pick_black_card_ok(); + map_handle_response_ok['view_black_card'](result); + }; + + map_handle_response_ok['view_black_card'] = function(result) { + black_card = result; + self.on_show_black_card(black_card); + }; + + map_handle_response_ok['play_white_card'] = function(result) { + idx = result['card_id']; + + self.on_play_white_card_ok(idx); + + delete white_cards[idx]; + }; + + map_handle_response_ok['collect_cards'] = function(result) { + self.change_state('waiting_designation'); + + self.on_collect_cards_ok(); + map_handle_response_ok['view_played_cards'](result); + }; + + map_handle_response_ok['view_played_cards'] = function(result) { + for (var i in result) { + var desc = result[i]; + + played_cards.push({ + 'desc': desc, + 'event': self.gen_callback_played_card(i), + }); + self.on_show_played_card(i, desc); + } + + if (!result.length) { + self.gen_callback_played_card(null)(); + } + }; + + map_handle_response_ok['designate_card'] = function(result) { + self.change_state('waiting_judge'); + + self.on_designate_card_ok(); + }; + + /* }}} */ + /* handle_notif {{{ */ + + map_handle_notif['judge_designed'] = function(result) { + self.change_state('waiting_collection'); + + self.on_judge_designed(); + }; + + map_handle_notif['received_card'] = function(result) { + var idx = result['card']['id']; + var desc = result['card']['desc']; + + white_cards[idx] = { + 'desc': desc, + 'event': self.gen_callback_white_card(idx) + }; + + self.on_show_white_card(idx, desc); + }; + + map_handle_notif['judge_needed'] = function(result) { + self.change_state('waiting_judge'); + }; + + map_handle_notif['player_joined_game'] = function(result) { + self.on_player_joined_game(); + }; + + map_handle_notif['card_played'] = function(result) { + self.incr_nbr_played_cards(); + + self.on_card_played(); + }; + + map_handle_notif['cards_collected'] = function(result) { + self.change_state('waiting_designation'); + + self.on_cards_collected(); + }; + + map_handle_notif['updated_score'] = function(result) { + self.score = result; + + self.on_updated_score(self.score); + }; + + /* }}} */ + + this.run = function() { + ws = new WebSocket('ws://' + document.location.hostname + ':1236'); + + ws.onopen = function() { + console.log('connection established'); + self.on_socket_open(); + }; + + ws.onclose = function() { + self.on_socket_close(); + }; + + ws.onmessage = function(evt) { + var message = JSON.parse(evt.data); + + if (message['type'] == 'notification') { + handle_notif(message['content']); + } else { + handle_response(message['content']); + } + }; + + ws.onerror = function(evt) { + console.log(evt); + self.on_socket_error(evt); + }; + + }; + + var handle_notif = function(notif) { + if (map_handle_notif[notif['op']]) { + map_handle_notif[notif['op']](notif['content']); + } else { + console.log('unhandled notif ' + notif); + } + }; + + var handle_response = function(response) { + var rq = request_queue.shift(); + + if (response['status'] != 0) { + alert(response['info']); + return; + } + + if (map_handle_response_ok[rq]) { + map_handle_response_ok[rq](response['result']) + } else { + console.log(evt); + } + }; + + this.gen_callback_white_card = function(index) { + return function() { + var request = { + 'op': 'play_white_card', + 'card_id': index, + }; + + request_queue.push('play_white_card'); + ws.send(JSON.stringify(request)); + }; + }; + + this.gen_callback_played_card = function(index) { + return function() { + var request = { + 'op': 'designate_card', + 'card_id': index, + }; + + request_queue.push('designate_card'); + ws.send(JSON.stringify(request)); + }; + }; + + this.join_game = function(game_name) { + var request = { + 'op': 'join_game', + 'game_name': game_name, + 'lang': lang, + }; + request_queue.push('join_game'); + ws.send(JSON.stringify(request)); + }; + + this.pick_black_card = function() { + var request = { + 'op': 'pick_black_card', + }; + request_queue.push('pick_black_card'); + ws.send(JSON.stringify(request)); + }; + + this.collect_cards = function() { + var request = { + 'op': 'collect_cards', + }; + request_queue.push('collect_cards'); + ws.send(JSON.stringify(request)); + }; + + this.request_show_cards = function() { + var request = { + 'op': 'view_player_cards', + }; + + request_queue.push('view_player_cards'); + ws.send(JSON.stringify(request)); + }; + this.request_show_black_card = function() { + var request = { + 'op': 'view_black_card', + }; + + request_queue.push('view_black_card'); + ws.send(JSON.stringify(request)); + }; + this.request_show_played_cards = function() { + var request = { + 'op': 'view_played_cards', + }; + + request_queue.push('view_played_cards'); + ws.send(JSON.stringify(request)); + }; +}; + +var swst; + +$(document).ready(function() { + swst = new SwiftStory(); +}); diff --git a/webapp/swiftstory-config.js b/webapp/swiftstory-config.js new file mode 100644 index 0000000..9a6be3c --- /dev/null +++ b/webapp/swiftstory-config.js @@ -0,0 +1,13 @@ +$(document).ready(function() { + var lang; + var hostname = document.location.hostname; + + /* XXX replace this with your desired behaviour */ + if (hostname.substring(0, 3) === 'fr.') { + lang = 'fr'; + } else if (hostname.substring(0, 3) === 'en.') { + lang = 'en'; + } + + swst.set_lang(lang); +}); diff --git a/webapp/swiftstory-desktop.html b/webapp/swiftstory-desktop.html new file mode 100644 index 0000000..10706af --- /dev/null +++ b/webapp/swiftstory-desktop.html @@ -0,0 +1,21 @@ + + + + + SwiftStory + + + + + + + + + + +
    +
    +
      +
        + + diff --git a/webapp/swiftstory-desktop.js b/webapp/swiftstory-desktop.js new file mode 100644 index 0000000..af86e83 --- /dev/null +++ b/webapp/swiftstory-desktop.js @@ -0,0 +1,88 @@ +$(document).ready(function() { + $('#btn_join').click(function() { + var game_name = prompt('Name of the game'); + + swst.join_game(game_name); + }); + + $('#btn_pick_black').click(function() { + swst.pick_black_card(); + }); + + $('#btn_collect').click(function() { + swst.collect_cards(); + }); + + swst.on_socket_open = function() { + $('#btn_join').show(); + }; + + swst.on_join_game_ok = function(state) { + $('#btn_join').hide(); + $('#btn_pick_black').show(); + $('#white_cards').show(); + }; + + swst.on_show_white_card = function(idx, desc) { + identifier = 'white_card_' + idx; + content = '
      • ' + desc + '
        • '; + + $('#white_cards').append(content); + + $('#' + identifier).dblclick(this.gen_callback_white_card(idx)); + }; + + swst.on_show_played_card = function(idx, desc) { + identifier = 'played_card_' + idx; + + content = '
      • ' + desc + '
        • '; + + $('#played_cards').append(content); + + $('#' + identifier).dblclick(this.gen_callback_played_card(idx)); + }; + + + swst.on_pick_black_card_ok = function() { + $('#btn_collect').show(); + $('#btn_pick_black').hide(); + }; + + swst.on_show_black_card = function(desc) { + $('#black_card').show(); + $('#black_card').html(desc); + }; + + + swst.on_play_white_card_ok = function(idx) { + identifier = 'white_card_' + idx; + $('#' + identifier).remove(); + }; + + swst.on_designate_card_ok = function() { + $('#played_cards').empty(); + $('#played_cards').hide(); + $('#black_card').hide(); + $('#btn_collect').hide(); + $('#btn_pick_black').show(); + }; + + swst.on_collect_cards_ok = function() { + $('#btn_collect').hide(); + $('#played_cards').show(); + }; + + swst.on_judge_designed = function() { + $('#btn_pick_black').hide(); + }; + + swst.on_judge_needed = function() { + $('#btn_pick_black').show(); + }; + + swst.on_updated_score = function(score) { + console.log('new score: ' + score); + }; + + swst.run(); +}); diff --git a/webapp/swiftstory-mobile.css b/webapp/swiftstory-mobile.css new file mode 100644 index 0000000..796f190 --- /dev/null +++ b/webapp/swiftstory-mobile.css @@ -0,0 +1,147 @@ +@import url(http://fonts.googleapis.com/css?family=Special+Elite); +body { + font-family: "Special Elite", sans-serif; + background: #333333; + color: #dddddd; +} +header { + background: #222222; + position: fixed; + top: 0; + left: 0; + right: 0; + height: 50px; + z-index: 1; + border-bottom: 4px solid #000; + padding: 20px; + box-sizing: border-box; +} +header > span#score { + opacity: 0.7; +} +header > span#leave-room { + opacity: 0.7; + float: right; + cursor: pointer; +} +header > span#leave-room:hover { + opacity: 1; +} +.page { + padding: 70px 20px 120px; + margin: auto; + max-width: 650px; +} +#home { + padding-top: 20px; +} +.page:not(.current) { + display: none; +} +h1 { + font-weight: normal; + font-size: 4.5em; + text-align: center; + text-shadow: 0 5px 0 #000; +} +h2 { + text-align: center; + font-weight: normal; + color: #999999; + font-size: 2em; +} +button { + outline: none; + font-size: 2em; + width: 100%; + cursor: pointer; + font-family: "Special Elite", sans-serif; +} +button.card { + color: #222222; + background: #dddddd; + border: 4px solid #999; + box-shadow: 0 5px 0 #999; + padding: 20px; + border-radius: 10px; + animation: appear .3s; +} +button.card:not(:last-child) { + margin-bottom: 20px; +} +button.card:active, button.card.black:active { + transform: translateY(5px); + box-shadow: none; +} +button.card.black { + background: #222222; + color: #dddddd; + border: 4px solid #000; + box-shadow: 0 5px 0 #000; +} +button.card:not(.active) { + opacity: 0.7; +} +button.card:hover { + opacity: 1.0; +} +div.card-list.read-only > button.card { + cursor: default; +} +div.card-list.read-only > button.card:hover { + opacity: 0.7; +} +div.card-list.read-only > button.card:active { + transform: none; + box-shadow: 0 5px 0 #999; +} +div.card-list.read-only > button.card.black:active { + box-shadow: 0 5px 0 #000; +} +.bottom { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 100px; + box-sizing: border-box; +} +div.bottom { + padding: 20px; + font-size: 1.5em; + background: #222222; + color: #dddddd; + border: 4px solid #000; +} +button.bottom { + font-size: 2.5em; + color: #222222; + border: 4px solid #455A64; + background: #78909C; + transition: .3s; +} +button.bottom:hover { + background: #455A64; + font-size: 2.7em; +} +.message { + padding: 40px; + font-size: 2.5em; + text-align: center; + text-shadow: 0 5px 0 #000; +} +@media screen and (max-width: 600px) { + h1 { + font-size: 3em; + } +} +@keyframes appear { + 0% { + opacity: 0; + transform: translateX(-400px); + } + 100% { + transform: translateX(0); + opacity: 0.7; + } +} \ No newline at end of file diff --git a/webapp/swiftstory-mobile.html b/webapp/swiftstory-mobile.html new file mode 100644 index 0000000..a0407d4 --- /dev/null +++ b/webapp/swiftstory-mobile.html @@ -0,0 +1,41 @@ + + + + + + SwiftStory + + + + + + + + +
        + +
        +

        SwiftStory

        +

        We're not out of the woods yet.

        + +
        +
        +
        +
        + +
        +
        You have 0 cards!
        +
        +
        +
        + +
        Pick the best card...
        +
        Choose a card...
        +
        Waiting for judge...
        + +
        + + diff --git a/webapp/swiftstory-mobile.js b/webapp/swiftstory-mobile.js new file mode 100644 index 0000000..b05193c --- /dev/null +++ b/webapp/swiftstory-mobile.js @@ -0,0 +1,155 @@ +$(document).ready(function() { + var $home = $("#home"); + var $game = $("#game"); + var $become_judge = $('[data-state="become-judge"]'); + var $judge_collect = $('[data-state="judge-collect"]'); + var $judge_choose = $('[data-state="judge-choose"]'); + var $player_choose = $('[data-state="player-choose"]'); + var $player_wait = $('[data-state="player-wait"]'); + var $leave_room = $('#leave-room'); + var $all = $("[data-state]"); + var $join_btn = $("#join-btn"); + var $become_judge_btn = $("#become-judge-btn"); + var $judge_collect_btn = $("#judge-collect-btn"); + var $black_card = $("#black-card"); + var $played_card_number = $("#played-card-number"); + var $header = $("header"); + var $white_cards = $('#white-cards'); + var $played_cards = $('#played-cards'); + var $score_value = $('#score-value'); + + $leave_room.click(function () { + window.location.reload(); + }); + + $become_judge_btn.click(function() { + swst.pick_black_card(); + }); + + $join_btn.click(function () { + swst.join_game(prompt('Name of the game')); + }); + + $judge_collect_btn.click(function() { + swst.collect_cards(); + }); + + swst.on_socket_open = function() { + $join_btn.show(); + }; + + swst.on_join_game_ok = function() { + $header.show(); + $home.removeClass("current"); + $game.addClass("current"); + $all.hide(); + }; + + swst.on_change_state = function(state) { + $all.hide(); + + switch (state) { + case 'waiting_judge': + $become_judge.show(); + $white_cards.attr('disabled', true); + $white_cards.addClass('read-only'); + break; + case 'waiting_designation': + if (swst.is_judge()) { + $judge_choose.show(); + $played_cards.removeAttr('disabled'); + $played_cards.removeClass('read-only'); + } else { + $player_wait.show(); + $white_cards.attr('disabled', true); + $white_cards.addClass('read-only'); + } + break; + case 'waiting_collection': + if (swst.is_judge()) { + $judge_collect.show(); + $white_cards.attr('disabled', true); + $white_cards.addClass('read-only'); + } else { + $player_choose.show(); + $white_cards.removeAttr('disabled'); + $white_cards.removeClass('read-only'); + } + break; + default: + console.log('unhandled state'); + break; + } + }; + + swst.on_show_white_card = function(idx, desc) { + var identifier = 'white-card-' + idx; + var content = ''; + $white_cards.append(content); + var self = this; + $('#' + identifier).click(function () { + var $this = $(this); + if (!$white_cards.attr('disabled')) { + if ($this.hasClass("active")) { + swst.get_white_card_event($this.prop('name'))(); + } else { + $white_cards.find("> .card").removeClass("active"); + $this.addClass("active"); + } + } + }); + }; + + swst.on_show_played_card = function(idx, desc) { + var identifier = 'played-card-' + idx; + var content = ''; + $played_cards.append(content); + var self = this; + $('#' + identifier).click(function () { + var $this = $(this); + if (!$played_cards.attr('disabled')) { + if ($this.hasClass("active")) { + swst.get_played_card_event($this.prop('name'))(); + } else { + $played_cards.find("> .card").removeClass("active"); + $this.addClass("active"); + } + } + }); + }; + + swst.on_show_black_card = function(desc) { + $('#black-card').html(desc); + }; + + swst.on_play_white_card_ok = function(idx) { + $white_cards.attr('disabled', true); + $white_cards.addClass('read-only'); + + $player_wait.show(); + + $('#white-card-' + idx).remove(); + }; + + swst.on_updated_score = function(score) { + $score_value.text(score); + }; + + swst.on_change_nbr_played_cards = function(nbr) { + $played_card_number.text(nbr); + }; + + swst.on_collect_cards_ok = function() { + $white_cards.hide(); + $played_cards.show(); + }; + + swst.on_designate_card_ok = function(idx) { + $played_cards.empty(); + + $played_cards.hide(); + $white_cards.show(); + }; + + swst.run(); +}); -- cgit v1.2.3