add "hide board" event, frontend button

bingosync-app/bingosync/models/events.py

@@ -22,7 +22,7 @@ def json_timestamp(self):
 
     @staticmethod
     def event_classes():
-        return [ChatEvent, GoalEvent, ColorEvent, RevealedEvent, ConnectionEvent, NewCardEvent]
+        return [ChatEvent, GoalEvent, ColorEvent, RevealedEvent, HiddenEvent, ConnectionEvent, NewCardEvent]
 
     @staticmethod
     def get_all_for_room(room):
@@ -147,6 +147,16 @@ def to_json(self):
             "timestamp": self.json_timestamp
         }
 
+class HiddenEvent(Event):
+
+    def to_json(self):
+        return {
+            "type": "hidden",
+            "player": self.player.to_json(),
+            "player_color": self.player_color.name,
+            "timestamp": self.json_timestamp
+        }
+
 @unique
 class ConnectionEventType(Enum):
     connected = 1

bingosync-app/bingosync/publish.py

@@ -19,6 +19,10 @@ def publish_revealed_event(revealed_event):
     data = revealed_event.to_json()
     _publish_json(data, revealed_event.player.room)
 
+def publish_hidden_event(hidden_event):
+    data = hidden_event.to_json()
+    _publish_json(data, hidden_event.player.room)
+
 def publish_connection_event(connection_event):
     data = connection_event.to_json()
     _publish_json(data, connection_event.player.room)

bingosync-app/bingosync/urls.py

@@ -35,6 +35,7 @@
     url(r'^api/chat$', views.chat_message, name='chat_message'),
     url(r'^api/color$', views.select_color, name='select_color'),
     url(r'^api/revealed$', views.board_revealed, name='board_revealed'),
+    url(r'^api/hidden$', views.board_hidden, name='board_hidden'),
     url(r'^api/new-card$', views.new_card, name='new_card'),
     url(r'^api/join-room$', views.join_room_api, name='join_room_api'),
     url(r'^api/get-socket-key/(?P<encoded_room_uuid>.+)$', views.get_socket_key, name='get_socket_key'),

bingosync-app/bingosync/views.py

@@ -18,9 +18,9 @@
 from bingosync.forms import RoomForm, JoinRoomForm, GoalListConverterForm
 from bingosync.models.colors import Color
 from bingosync.models.game_type import GameType, ALL_VARIANTS
-from bingosync.models.events import Event, ChatEvent, GoalEvent, RevealedEvent, ConnectionEvent, NewCardEvent
+from bingosync.models.events import Event, ChatEvent, GoalEvent, RevealedEvent, HiddenEvent, ConnectionEvent, NewCardEvent
 from bingosync.models.rooms import ANON_PLAYER, Room, Game, LockoutMode, Player
-from bingosync.publish import publish_goal_event, publish_chat_event, publish_color_event, publish_revealed_event
+from bingosync.publish import publish_goal_event, publish_chat_event, publish_color_event, publish_revealed_event, publish_hidden_event
 from bingosync.publish import publish_connection_event, publish_new_card_event
 from bingosync.util import generate_encoded_uuid, ANON_UUID, encode_uuid
 
@@ -368,6 +368,18 @@ def board_revealed(request):
     publish_revealed_event(revealed_event)
     return HttpResponse("Received data: " + str(data))
 
+@csrf_exempt
+def board_hidden(request):
+    data = parse_body_json_or_400(request, required_keys=["room"])
+
+    room = Room.get_for_encoded_uuid_or_404(data["room"])
+    player = _get_session_player(request.session, room)
+
+    hidden_event = HiddenEvent(player=player, player_color_value=player.color.value)
+    hidden_event.save()
+    publish_hidden_event(hidden_event)
+    return HttpResponse("Received data: " + str(data))
+
 @csrf_exempt
 def join_room_api(request):
     # grab data from input json

bingosync-app/static/bingosync/room/chat_panel.js

@@ -51,6 +51,12 @@ var ChatPanel = (function(){
             var revealedMessage = playerName + " revealed the card";
             return $("<div>", {"class": "revealed-message", html: timeHtml + " " + revealedMessage}).toHtml();
         }
+        else if(json["type"] === "hidden") {
+            var playerColorClass = getPlayerColorClass(json["player_color"]);
+            var playerName = $("<span>", {"class": playerColorClass, text: json["player"]["name"]}).toHtml();
+            var revealedMessage = playerName + " hid the card";
+            return $("<div>", {"class": "revealed-message", html: timeHtml + " " + revealedMessage}).toHtml();
+        }
         else if(json["type"] === "new-card") {
             var playerColorClass = getPlayerColorClass(json["player_color"]);
             var playerName = $("<span>", {"class": playerColorClass, text: json["player"]["name"]}).toHtml();

bingosync-app/static/bingosync/room/room_settings_panel.js

@@ -1,9 +1,10 @@
 var RoomSettingsPanel = (function(){
     "use strict";
 
-    var RoomSettingsPanel = function($roomSettingsContainer, roomSettingsUrl, board) {
+    var RoomSettingsPanel = function($roomSettingsContainer, roomSettingsUrl, boardHiddenUrl, board) {
         this.$roomSettingsContainer = $roomSettingsContainer;
         this.roomSettingsUrl = roomSettingsUrl;
+        this.boardHiddenUrl = boardHiddenUrl;
         this.board = board;
 
         this.initPanel();
@@ -12,11 +13,26 @@ var RoomSettingsPanel = (function(){
     RoomSettingsPanel.prototype.initPanel = function() {
         this.$panelBody = this.$roomSettingsContainer.find(".panel-body");
         this.$collapseButton = this.$roomSettingsContainer.find(".collapse-button");
+        this.$hideButton = this.$roomSettingsContainer.find(".hide-button");
 
         var that = this;
         this.$collapseButton.on("mousedown", function() {
             that.$panelBody.toggle(50);
         });
+
+        this.$hideButton.on("mousedown", function() {
+            hideBoard();
+            $.ajax({
+                "url": that.boardHiddenUrl,
+                "type": "PUT",
+                "data": JSON.stringify({
+                    "room": window.sessionStorage.getItem("room"),
+                }),
+                "error": function(result) {
+                    console.log(result);
+                }
+            });
+        })
     };
 
     RoomSettingsPanel.prototype.reloadSettingsRequest = function() {
@@ -57,5 +73,9 @@ var RoomSettingsPanel = (function(){
         this.reloadSettingsRequest();
     };
 
+    RoomSettingsPanel.prototype.setBoardHidden = function(hideBoard) {
+        this.$hideButton.disabled = !hideBoard;
+    }
+
     return RoomSettingsPanel;
 })();

bingosync-app/templates/bingosync/bingosync.html

@@ -86,6 +86,7 @@ <h4 style="display: inline-block; position: absolute; right: 0; bottom: 0;">
         var socketsUrl = "{{ sockets_url }}/broadcast";
         var goalSelectedUrl = "{% url 'goal_selected' %}";
         var boardRevealedUrl = "{% url 'board_revealed' %}";
+        var boardHiddenUrl = "{% url 'board_hidden' %}";
         var roomSettingsUrl = "{% url 'room_settings' room.encoded_uuid %}";
         var temporarySocketKey = "{{ temporary_socket_key }}";
 
@@ -95,7 +96,7 @@ <h4 style="display: inline-block; position: absolute; right: 0; bottom: 0;">
         colorChooser.$board = board;
         var boardCover = new BoardCover($(".board-container"), ROOM_SETTINGS.hide_card, boardRevealedUrl);
         var playersPanel = new PlayersPanel($("#players-panel"));
-        var roomSettingsPanel = new RoomSettingsPanel($("#room-settings-container"), roomSettingsUrl, board);
+        var roomSettingsPanel = new RoomSettingsPanel($("#room-settings-container"), roomSettingsUrl, boardHiddenUrl, board);
 
         additionalSettingsPanel = undefined;
 
@@ -125,9 +126,11 @@ <h4 style="display: inline-block; position: absolute; right: 0; bottom: 0;">
         };
         hideBoard = function() {
             boardCover.setBoardHidden(true);
+            roomSettingsPanel.setBoardHidden(true);
         };
         revealBoard = function() {
             boardCover.setBoardHidden(false);
+            roomSettingsPanel.setBoardHidden(false);
             $("#the-seed").text(ROOM_SETTINGS.seed);
             var $seedHidden = $("#bingo-chat .new-card-message .seed-hidden");
             $seedHidden.text(ROOM_SETTINGS.seed).removeClass('seed-hidden').addClass('seed');

bingosync-app/templates/bingosync/room_settings_panel.html

@@ -32,6 +32,9 @@
             <div id="new-card" class="btn btn-default" data-toggle="modal" data-target="#new-card-dialog">
                 New Card
             </div>
+            <div id="hide-card" class="btn btn-default hide-button">
+                Hide Card
+            </div>
         </div>
     </div>
 </div>