Add on-board counters for recording progress toward goal

.gitignore

@@ -68,3 +68,7 @@ bingosync-app/generators/working
 dumps/
 lbingosync.scpt
 bingosync-app/tools
+
+# mac
+.DS_Store
+bingosync-app/.DS_Store

bingosync-app/bingosync/generators/bingo_generator.py

@@ -5,12 +5,13 @@
 
 GEN_DIR = "generators"
 GEN_NAME_TEMPL = "{}_generator.js"
+GOAL_IMAGE_PATH_TEMPL = "/static/goal_images/{game}/{file}"
 
 
 def load_generator(game_name):
     filename = os.path.join(GEN_DIR, GEN_NAME_TEMPL.format(game_name))
     with open(filename) as js_file:
-        return BingoGenerator(js_file.read())
+        return BingoGenerator(js_file.read(), game_name)
 
 
 class BingoGenerator:
@@ -30,8 +31,9 @@ def instance(game_name):
     def reload(game_name):
         BingoGenerator.CACHED_INSTANCES[game_name] = load_generator(game_name)
 
-    def __init__(self, generator_js):
+    def __init__(self, generator_js, game_name):
         self.generator_js_bytes = generator_js.encode("utf-8")
+        self.game_name = game_name
 
     def validate_custom_json(self, custom_json):
         return []
@@ -52,13 +54,21 @@ def get_card(self, seed=None, custom_board=None):
 
         js_command = "bingoGenerator(bingoList, " + json.dumps(opts) + ")"
         card = self.eval(js_command)
-        return process_card(card)
+        return process_card(card, self.game_name)
 
 
-def process_card(card):
+def process_card(card, game_name):
     # the regular SRL generator includes an extra null element at the front, so ignore that
     if len(card) == 26:
         card = card[1:]
     if len(card) != 25:
         raise Exception("bad card length: " + str(len(card)) + ", card: " + str(card))
-    return [{"name": goal.get("name", "")} for goal in card]
+    return [{"name": goal.get("name", ""), "image": get_image(goal, game_name)} for goal in card]
+
+def get_image(goal, game_name):
+    image = goal.get("image", "")
+    if image != "" and ":" not in image:
+        # There is an image listed without a protocol, so we assume it is relative
+        # and add our own path template
+        image = GOAL_IMAGE_PATH_TEMPL.format(game = game_name, file = image)
+    return image

bingosync-app/bingosync/models/rooms.py

@@ -164,7 +164,7 @@ def from_board(board_json, *args, **kwargs):
             game.save()
             for index, square_json in enumerate(board_json):
                 slot = index + 1
-                square = Square(game=game, slot=slot, goal=square_json["name"])
+                square = Square(game=game, slot=slot, goal=square_json["name"], image=square_json.get("image", ""))
                 square.full_clean()
                 square.save()
         return game
@@ -222,6 +222,7 @@ class Square(models.Model):
     game = models.ForeignKey(Game, on_delete=models.CASCADE)
     slot = models.IntegerField(choices=SLOT_CHOICES, validators=[validate_in_slot_range])
     goal = models.CharField(max_length=255)
+    image = models.CharField(max_length=2048, default="", blank=True)
     color_value = models.IntegerField("Color", default=CompositeColor.goal_default().value, choices=CompositeColor.goal_choices())
 
     @property
@@ -239,6 +240,7 @@ def slot_name(self):
     def to_json(self):
         return {
             "name": self.goal,
+            "image": self.image,
             "slot": self.slot_name,
             "colors": self.color.name
         }

bingosync-app/bingosync/views.py

@@ -361,7 +361,6 @@ def goal_converter(request):
 
     return render(request, "bingosync/convert.html", {"form": form})
 
-
 def jstests(request):
     return render(request, "bingosync/tests/jstest.html", {})
 

bingosync-app/generators/generator_bases/srl_generator_v5.js

@@ -219,6 +219,7 @@ bingoGenerator = function(bingoList, opts) {
             } while ((synergy != 0) && (j < bingoList[getDifficulty].length));
             bingoBoard[i].types = minSynObj.value.types;
             bingoBoard[i].name = minSynObj.value[LANG] || minSynObj.value.name;
+            bingoBoard[i].image = minSynObj.value.image;
             bingoBoard[i].synergy = minSynObj.synergy;
         }
         return bingoBoard;

bingosync-app/generators/generator_bases/srl_generator_v8.js

@@ -367,6 +367,7 @@ bingoGenerator = function (bingoList, opts) {
 
         bingoBoard[sq].types = minSynObj.value.types;
         bingoBoard[sq].name = minSynObj.value[LANG] || minSynObj.value.name;
+        bingoBoard[sq].image = minSynObj.value.image;
         bingoBoard[sq].child = minSynObj.value.child;
         bingoBoard[sq].synergy = minSynObj.synergy;
     }

bingosync-app/generators/goal_lists/zelda_botw_english.js

@@ -547,7 +547,7 @@ bingoList[23] = [
     { name: "Collect 6 Picture Memories", types: ["Camera"] },
     { name: "Remake a Champion's Weapon or Shield", types: ["Equipment","Divine Beast","Gems"] },
     { name: "Climbing Gear ★", types: ["Clothes","Climbing Gear","Great Fairy"] },
-    { name: "Activate 8 Towers", types: ["Tower"] }
+    { name: "Activate 8 Towers", types: ["Tower"], image: "8Towers.png" }
 ];
 bingoList[24] = [
     { name: "45 Koroks", types: ["Korok"] },

bingosync-app/static/bingosync/bingosync.js

@@ -21,4 +21,16 @@ function initializeChatSettings($chatSettings, $chatWindow) {
     });
 }
 
+function initializeDisplaySettings($displaySettings, $boardWindow) {
+    $("#display-settings-collapse").on("mousedown", function() {
+        $("#display-settings .panel-body").toggle(50);
+    });
+
+    $displaySettings.find("#use-images-toggle").on("change", function() {
+        oBoard.toggleImages();
+    });
 
+    $displaySettings.find("#show-counters-toggle").on("change", function() {
+        oBoard.toggleCounters(this.checked);
+    });
+}

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

@@ -78,6 +78,7 @@ var Board = (function(){
     var Square = function($square) {
         this.$square = $square;
         this.$square.on("click", this.onClick);
+        this.counterValue = 0;
     };
 
     Square.prototype.setColors = function(colors) {
@@ -98,13 +99,50 @@ var Board = (function(){
     };
 
     Square.prototype.setJson = function(json) {
+        var oSquare = this;
         this.$square.html('<div class="starred hidden"></div><div class="shadow"></div>' +
-                          '<div class="vertical-center text-container"></div>');
-        this.$square.children(".text-container").text(json["name"]);
+                          '<div class="counter hidden"><button class="counterbutton minus">-</button>' +
+                          '<div class="counter-value">0</div><button class="counterbutton plus">+</button></div>' +
+                          '<div class="text-area"><div class="text-container"></div></div>' +
+                          '<div class="image-container hidden"><img/></div>');
+        this.$square.find(".text-container").text(json["name"]);
+
+        if (json["image"]) {
+            this.$square.children(".image-container").children('img').attr('src', json["image"]).attr('title', json["name"]);
+        }
+
+        this.$counterValue = this.$square.find(".counter-value");
+
+        this.$square.find(".plus").on("click", function(e) { 
+            oSquare.incrementCounter();
+            return false;
+        });
+
+        this.$square.find(".minus").on("click", function() {
+            oSquare.decrementCounter();
+            return false;
+        });
         setSquareColors(this.$square, json["colors"]);
     };
 
+    Square.prototype.incrementCounter = function() {
+        this.counterValue += 1;
+        this.updateCounterValue();
+    }
+
+    Square.prototype.decrementCounter = function() {
+        if (this.counterValue > 0) {
+            this.counterValue -= 1;
+            this.updateCounterValue()
+        }
+    }
+
+    Square.prototype.updateCounterValue = function() {
+        this.$counterValue.text(this.counterValue);
+    }
+
     var Board = function($board, playerJson, colorChooser, getBoardUrl, selectGoalUrl) {
+        window.oBoard = this;
         this.$board = $board;
         this.$squares = $board.find(".square");
         this.isSpectator = playerJson.is_spectator;
@@ -153,6 +191,15 @@ var Board = (function(){
         for(var i = 0; i < json.length; i++) {
             this.squares[i].setJson(json[i]);
         }
+
+        if ($('#use-images-toggle').is(':checked')) {
+            this.toggleImages();
+        }
+
+        if ($('#show-counters-toggle').is(":checked")) {
+            this.toggleCounters(true);
+        }
+
         this.refitGoalText();
     };
 
@@ -244,5 +291,32 @@ var Board = (function(){
         });
     };
 
+    Board.prototype.toggleImages = function() {
+        this.$squares.each(function() {
+            var srcValue = $(this).find("img").attr("src");
+            if (srcValue) {
+                // There is an image, toggle the image visibility and the text visibility
+                $(this).children(".text-area").toggleClass("hidden");
+                $(this).children(".image-container").toggleClass("hidden");
+            }
+        });
+    }
+
+    Board.prototype.toggleCounters = function(enabled) {
+        this.$squares.each(function() {
+            $(this).find(".counter").toggleClass("hidden");
+            if (enabled) {
+                $(this).find(".text-area").height("80%");
+                $(this).find(".image-container").height("80%");
+            }
+            else {
+                $(this).find(".text-area").height("100%");
+                $(this).find(".image-container").height("100%");
+            }
+        });
+
+        this.refitGoalText();
+    }
+
     return Board;
 })();

bingosync-app/static/bingosync/style.css

@@ -170,7 +170,6 @@
 .square {
     color: #fff;
     text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
-    padding: 0 5px;
     cursor: pointer;
     width: 105px;
     height: 95px;
@@ -193,7 +192,7 @@
 }
 
 .square .bg-color, .square .shadow {
-    height: inherit;
+    height: 100%;
     position: absolute;
     left: -2px;
     right: -2px;
@@ -212,6 +211,12 @@
     -webkit-box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.6);
 }
 
+.square .image-container img {
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+}
+
 .blanksquare:hover,
 .blanksquare.hover {
     background: #0a245a;
@@ -575,3 +580,43 @@
 .asteriskField {
     display: none;
 }
+
+.counterbutton {
+    position: absolute;
+    bottom: 0;
+    background: rgba(0,0,0,0);
+    border: 0;
+}
+
+.minus {
+    left: 0;
+}
+
+.plus {
+    right: 0;
+}
+
+.counter {
+    height: 20%;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+}
+
+.counter-value {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.text-area {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    vertical-align: middle;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

bingosync-app/static/goal_images/zelda_botw_long

@@ -0,0 +1 @@
+./zelda_botw

bingosync-app/static/goal_images/zelda_botw_short

@@ -0,0 +1 @@
+./zelda_botw

bingosync-app/templates/bingosync/bingosync.html

@@ -44,6 +44,9 @@ <h4 style="display: inline-block; position: absolute; right: 0; bottom: 0;">
                         <div class="flex-col-footer m-b-l" id="room-settings-container">
                             {% include 'bingosync/room_settings_panel.html' %}
                         </div>
+                        <div class="flex-col-footer m-b-l">
+                            {% include 'bingosync/display_settings_panel.html' %}
+                        </div>
                         <div class="flex-col-footer">
                             {% include 'bingosync/chat_settings_panel.html' %}
                         </div>
@@ -87,6 +90,7 @@ <h4 style="display: inline-block; position: absolute; right: 0; bottom: 0;">
         var roomSettingsPanel = new RoomSettingsPanel($("#room-settings-container"), roomSettingsUrl);
         var chatPanel = new ChatPanel($("#bingo-chat"), $("#chat-settings"), chatUrl, chatHistoryUrl);
         initializeChatSettings($("#chat-settings"), $("#bingo-chat"));
+        initializeDisplaySettings($("#display-settings"), $("#bingo"));
 
         var chatSocket = new ChatSocket(chatPanel, board, playersPanel, socketsUrl);
 

bingosync-app/templates/bingosync/display_settings_panel.html

@@ -0,0 +1,20 @@
+<div id="display-settings" class="panel panel-default fill-parent">
+    <div class="panel-heading">
+        <span>
+            Display Settings
+        </span>
+        <span id="display-settings-collapse" class="btn btn-default btn-xs pull-right collapse-button">
+            -
+        </span>
+    </div>
+    <div class="panel-body">
+        <div>
+            <div class="checkbox m-b-s" style="margin-top: 0">
+                <label><input id="use-images-toggle" type="checkbox"> Show Images</label>
+            </div>
+            <div class="checkbox m-b-s">
+                <label><input id="show-counters-toggle" type="checkbox"> Show Counters</label>
+            </div>
+        </div>
+    </div>
+</div>