Add emojis to topbar and options literals; code clean (#113)

* Add emojis to topbar, options literals, info panel and in tooltip stats;
* Fix options checkboxes layout
* Update README

README.md

@@ -20,15 +20,24 @@ A little web-browser turn-based strategy game.
 
 Just open the `index.html` file with your browser of choice 👍
 
+## Features details:
+
+- Hover a unit to display a tooltip with extra information
+- You can drag and drop a Roman soldier to move it, or just select it and then click where do you want to move it
+
 # Url Params (cheat codes):
 
-- Choose the map/level: 'index.html?level=2'
+- Choose the map/level: `index.html?level=2`
   (1 - 10 are used for the main campaign, 0 and 11 - XX are used for testing)
-- Mute the story narration on startup: 'index.html?muteNarration'
-- Disable animations on startup: 'index.html?disableAnimations'
-- Disable modals (pop-ups) on startup: 'index.html?disableModals'
+- Mute the story narration on startup: `index.html?muteNarration`
+- Disable animations on startup: `index.html?disableAnimations`
+- Disable modals (pop-ups) on startup: `index.html?disableModals`
+
+Example (useful for manual testing):
 
-Example (useful for manual testing): `index.html?level=12&muteNarration&disableAnimations&disableModals`
+```
+index.html?level=12&muteNarration&disableAnimations&disableModals
+```
 
 # How to test
 

cypress/integration/core/soldiers_actions.spec.js

@@ -33,7 +33,7 @@ context("Soldiers actions", () => {
     cy.get("#strength").should("contain", "Combat strength: [2].");
     moreStrength();
 
-    cy.get("#modal-content").should("contain", "You don't have enough gold!");
+    cy.get("#modal-content").should("contain", "You don't have enough 💰!");
     click("#modal-ok");
 
     cy.get("#strength").should("contain", "Combat strength: [2].");
@@ -46,20 +46,32 @@ context("Soldiers actions", () => {
     click("#icon70a");
 
     cy.get("#strength").should("contain", "Combat strength: [1].");
-    cy.get("#improve_strength").should("contain", "Improve Strength (1 Gold)");
+    cy.get("#improve_strength").should(
+      "contain",
+      "💪 Improve Strength (-1 💰)"
+    );
     cy.get("#gold").should("have.value", 4);
     moreStrength();
     cy.get("#gold").should("have.value", 3);
     cy.get("#strength").should("contain", "Combat strength: [2].");
-    cy.get("#improve_strength").should("contain", "Improve Strength (2 Gold)");
+    cy.get("#improve_strength").should(
+      "contain",
+      "💪 Improve Strength (-2 💰)"
+    );
 
     click("#icon71a");
     cy.get("#strength").should("contain", "Combat strength: [1].");
-    cy.get("#improve_strength").should("contain", "Improve Strength (1 Gold)");
+    cy.get("#improve_strength").should(
+      "contain",
+      "💪 Improve Strength (-1 💰)"
+    );
     moreStrength();
     cy.get("#gold").should("have.value", 2);
     cy.get("#strength").should("contain", "Combat strength: [2].");
-    cy.get("#improve_strength").should("contain", "Improve Strength (2 Gold)");
+    cy.get("#improve_strength").should(
+      "contain",
+      "💪 Improve Strength (-2 💰)"
+    );
   });
 
   it("Destroy one of the soldiers after confirmation", () => {

cypress/integration/core/towns.spec.js

@@ -46,12 +46,12 @@ context("Towns upgrades and unit generation", () => {
     click("#icon11A");
     cy.get("#prod").should(
       "contain",
-      "Producing [1] soldiers with [1] strength each turn. Upgrade: "
+      "Producing [1] soldiers with [1] strength each turn."
     );
     click("#improve_quantity");
     cy.get("#prod").should(
       "contain",
-      "Producing [2] soldiers with [1] strength each turn. Upgrade: "
+      "Producing [2] soldiers with [1] strength each turn."
     );
 
     endTurn();
@@ -74,7 +74,7 @@ context("Towns upgrades and unit generation", () => {
       click("#icon11A");
       cy.get("#prod").should(
         "contain",
-        "Producing [1] soldiers with [1] strength each turn. Upgrade: "
+        "Producing [1] soldiers with [1] strength each turn."
       );
       endTurn();
 
@@ -87,7 +87,7 @@ context("Towns upgrades and unit generation", () => {
       click("#icon11A");
       cy.get("#prod").should(
         "contain",
-        "Producing [1] soldiers with [2] strength each turn. Upgrade: "
+        "Producing [1] soldiers with [2] strength each turn."
       );
 
       endTurn();

index.html

@@ -23,12 +23,12 @@
     <div class="container">
         <div class="control-bar padding-sm margin-top-md row">
             <div class="control-bar-col col-sm-2">
-                <span class="gold-label">Gold: </span>
+                <span class="gold-label">💰: </span>
                 <input id="gold" class="gold-marker" value="1" type="text" readonly disabled></input>
             </div>
-            <button type="button" id="end_turn" class="control-bar-col col-sm-2"> <b>End turn</b> (+3 gold) </button>
-            <button type="button" id="reset_map" class="control-bar-col col-sm-3"> Reset map </button>
-            <button type="button" id="toggle-options" class="control-bar-col col-sm-2">Open Options</button>
+            <button type="button" id="end_turn" class="control-bar-col col-sm-2"> <b>⏩ End turn</b> (+3 💰) </button>
+            <button type="button" id="reset_map" class="control-bar-col col-sm-3"> ⏮ Reset map </button>
+            <button type="button" id="toggle-options" class="control-bar-col col-sm-2">🔽 Open Options ⚙</button>
         </div>
 
         <div class="control-board margin-top-md row">
@@ -54,48 +54,61 @@
                     <form id="town_info" class="hidden-div">
                         <div id="prod" type="text" readonly></div>
                         <br>
-                        <button type="button" id="improve_quantity">Improve quantity (1 Gold)</button>
+                        <button type="button" id="improve_quantity">👥 Improve Quantity (-1 💰)</button>
                         <br><br>
-                        <button type="button" id="improve_quality">Improve quality (1 Gold)</button>
+                        <button type="button" id="improve_quality">💪 Improve Quality (-1 💰)</button>
                         <br><br>
                     </form>
                     <form id="soldier_info" class="hidden-div">
                         <div id="movement" type="text" readonly></div>
                         <br>
                         <div id="strength" type="text" readonly></div>
                         <br>
-                        <button type="button" id="improve_strength">Improve Strength (1 Gold)</button>
+                        <button type="button" id="improve_strength">💪 Improve Strength (-1 💰)</button>
                         <br>
-                        <button type="button" id="destroy" class="hidden-div">Destroy</button>
+                        <button type="button" id="destroy" class="hidden-div">💀 Destroy</button>
                         <br><br>
                     </form>
 
-                    <button type="button" id="close" class="close-button">Close</button>
+                    <button type="button" id="close" class="close-button">❌ Close</button>
                 </div>
                 <div id="options" class="info hidden-div">
-                    <div class="padding-top-md">
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" value="" id="enable_narration" checked>
-                            <label class="form-check-label" for="enable_narration">
-                                Narration
-                            </label>
+                    <div class="padding-top-md padding-bottom-md">
+                        <div class="custom-row">
+                            <div class="custom-col-1 custom-col-checkbox">
+                                <input type="checkbox" value="" id="enable_narration" checked>
+                            </div>
+                            <div class="custom-col-2 custom-col-label">
+                                <label for="enable_narration">
+                                    🔊 Narration
+                                </label>
+                            </div>
                         </div>
-
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" value="" id="enable_animations" checked>
-                            <label class="form-check-label" for="enable_animations">
-                                Animations
-                            </label>
+
+                        <div class="custom-row">
+                            <div class="custom-col-1 custom-col-checkbox">
+                                <input type="checkbox" value="" id="enable_animations" checked>
+                            </div>
+                            <div class="custom-col-2 custom-col-label">
+                                <label for="enable_animations">
+                                    👁‍🗨 Animations
+                                </label>
+                            </div>
                         </div>
-                        <div class="form-check">
-                            <input class="form-check-input" type="checkbox" value="" id="enable_modals" checked>
-                            <label class="form-check-label" for="enable_modals">
-                                Modals
-                            </label>
+
+                        <div class="custom-row">
+                            <div class="custom-col-1 custom-col-checkbox">
+                                <input type="checkbox" value="" id="enable_modals" checked>
+                            </div>
+                            <div class="custom-col-2 custom-col-label">
+                                <label for="enable_modals">
+                                    💬 Modals
+                                </label>
+                            </div>
                         </div>
                     </div>
 
-                    <button type="button" id="close-options" class="close-button">Close</button>
+                    <button type="button" id="close-options" class="close-button">❌ Close</button>
                 </div>
             </div>
         </div>

src/scripts/browser/DetailsPanelPainter.js

@@ -161,18 +161,22 @@ function DetailsPanelPainter() {
       players.human.upgradeMode(unit, "improve_quality");
     });
 
-    $("#improve_quantity").html(`Quantity (${quantityUpgradePrice} Gold)`);
-    $("#improve_quality").html(`Quality (${qualityUpgradePrice} Gold)`);
+    $("#improve_quantity").html(
+      `👥 Improve Quantity (-${quantityUpgradePrice} 💰)`
+    );
+    $("#improve_quality").html(
+      `💪 Improve Quality (-${qualityUpgradePrice} 💰)`
+    );
     $("#prod").html(
-      `Producing [${quantity}] soldiers with [${quality}] strength each turn. Upgrade: `
+      `Producing [${quantity}] soldiers with [${quality}] strength each turn.`
     );
     $("#prod").show();
   };
 
   var updateHumanSoldierStats = function (movements, strength) {
     $("#movement").html(`Movements left: [${movements}]`);
     $("#strength").html(`Combat strength: [${strength}].`);
-    $("#improve_strength").html(`Improve Strength (${strength} Gold)`);
+    $("#improve_strength").html(`💪 Improve Strength (-${strength} 💰)`);
   };
 
   var updateAISoldierStats = function (strength) {

src/scripts/game/Game.js

@@ -98,6 +98,11 @@ Game.prototype.getUnit = function (icon) {
   }
 };
 
+Game.prototype.resetOptionsButton = function () {
+  document.getElementById("toggle-options").innerHTML = "🔽 Open Options ⚙";
+  document.getElementById("options").className = "info hidden-div";
+};
+
 Game.prototype.onCellClick = function (event, unit) {
   const target = event.target.id;
 
@@ -238,8 +243,7 @@ Game.prototype.bindIconClick = function () {
   $(".icon").one("click", (event) => {
     event.stopPropagation();
 
-    document.getElementById("toggle-options").innerHTML = "Open Options";
-    document.getElementById("options").className = "info hidden-div";
+    this.resetOptionsButton();
     let modeToActivate = this.infoLayer.checkUnitInfo(event, this.players);
 
     if (modeToActivate.mode === "move") {
@@ -272,12 +276,7 @@ Game.prototype.bindAll = function () {
     this.resetBoardBindings.call(this);
   });
 
-  $("#close-options").click(
-    function () {
-      document.getElementById("toggle-options").innerHTML = "Open Options";
-      document.getElementById("options").className = "info hidden-div";
-    }.bind(this)
-  );
+  $("#close-options").click(this.resetOptionsButton.bind(this));
 
   $("#toggle-options").click(
     function () {
@@ -286,17 +285,17 @@ Game.prototype.bindAll = function () {
       const optionsComponent = document.getElementById("options");
 
       if (optionsComponent.className.includes("hidden-div")) {
-        document.getElementById("toggle-options").innerHTML = "Close Options";
+        document.getElementById("toggle-options").innerHTML =
+          "🔼 Close Options ⚙";
         optionsComponent.className = "info";
       } else {
-        document.getElementById("toggle-options").innerHTML = "Open Options";
-        optionsComponent.className = "info hidden-div";
+        this.resetOptionsButton();
       }
     }.bind(this)
   );
 
   $("#reset_map").click(() => {
-    if (confirm("Reset current map?")) {
+    if (confirm("⏮ Reset current map?")) {
       this.map.generate(this.currentMapLevel, this.players);
       this.bindIconClick();
       this.bindDrag();
@@ -311,7 +310,7 @@ Game.prototype.bindAll = function () {
         this.bindDrag();
       }
 
-      $("#end_turn").html("<b>End turn</b> (+3 gold)");
+      $("#end_turn").html("<b>⏩ End turn</b> (+3 💰)");
       $("#end_turn").prop("disabled", false);
       $("#reset_map").prop("disabled", false);
       $("#toggle-options").prop("disabled", false);
@@ -320,16 +319,15 @@ Game.prototype.bindAll = function () {
       this.bindIconClick();
     };
 
-    $("#end_turn").html("AI Turn...");
+    $("#end_turn").html("🤖 AI Turn...");
     $("#end_turn").prop("disabled", true);
     $("#reset_map").prop("disabled", true);
     $("#toggle-options").prop("disabled", true);
     $("#enable_animations").prop("disabled", true);
     $(".cell").off();
     $(".icon").off();
     $("#info").hide();
-    document.getElementById("toggle-options").innerHTML = "Open Options";
-    document.getElementById("options").className = "info hidden-div";
+    this.resetOptionsButton();
 
     this.turnManager.endTurn.call(
       this.turnManager,

src/scripts/players/Player.js

@@ -61,20 +61,20 @@ Player.prototype.moveSoldier = function (unit, target) {
 // upgrade_auto is for AI turn use of this function. In other case, this is invoked by an event_handler
 // TODO: refactor, doesn't make much sense that soldiers and towns share this function
 Player.prototype.upgradeMode = function (unit, upgrade) {
-  const errorMessage = "You don't have enough gold!";
+  const errorMessage = "You don't have enough 💰!";
 
   let cell;
 
   const updateTownHtml = () => {
     $("#prod").html(
-      `Producing [${unit.stats.quantity}] soldiers with [${unit.stats.quality}] strength each turn. Upgrade: `
+      `Producing [${unit.stats.quantity}] soldiers with [${unit.stats.quality}] strength each turn.`
     );
 
     cell = unit.cell.replace("icon", "#cell");
     cell = cell.substring(0, cell.length - 1);
     const factionTitleMap = {
       roman: () =>
-        ` Quantity: [${unit.stats.quantity}], Quality: [${unit.stats.quality}]`,
+        ` 👥 Quantity: [${unit.stats.quantity}], 💪 Quality: [${unit.stats.quality}]`,
     };
 
     this.mapPainter.repaintTown(
@@ -94,7 +94,7 @@ Player.prototype.upgradeMode = function (unit, upgrade) {
 
       //TODO refactor: move all this DOM acceses to DetailsPanelPainter
       $("#improve_quantity").html(
-        `Quantity (${unit.stats.quantityUpgradePrice} Gold)`
+        `👥 Improve Quantity (-${unit.stats.quantityUpgradePrice} 💰)`
       );
     } else {
       this.browserUtils.showMessage(errorMessage);
@@ -107,7 +107,7 @@ Player.prototype.upgradeMode = function (unit, upgrade) {
 
       updateTownHtml();
       $("#improve_quality").html(
-        `Quality (${unit.stats.qualityUpgradePrice} Gold)`
+        `💪 Improve Quality (-${unit.stats.qualityUpgradePrice} 💰)`
       );
     } else {
       this.browserUtils.showMessage(errorMessage);
@@ -120,16 +120,14 @@ Player.prototype.upgradeMode = function (unit, upgrade) {
       unit.strength += unit.strength;
 
       $("#strength").html("Combat strength: [" + unit.strength + "].");
-      $("#improve_strength").html(
-        "Improve Strength (" + unit.strength + " Gold)"
-      );
+      $("#improve_strength").html(`💪 Improve Strength (-${unit.strength} 💰)`);
 
       cell = unit.cell.replace("icon", "#cell");
       cell = cell.substring(0, cell.length - 1);
       this.mapPainter.repaintMob(
         cell,
         unit,
-        ` | Moves: [${unit.movements}] | Strength: [${unit.strength}]`
+        ` | 🦶 Moves: [${unit.movements}] | 💪 Strength: [${unit.strength}]`
       );
     } else {
       this.browserUtils.showMessage(errorMessage);