diff --git a/README.md b/README.md index 1e4bdc0..d4da0a3 100644 --- a/README.md +++ b/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 diff --git a/cypress/integration/core/soldiers_actions.spec.js b/cypress/integration/core/soldiers_actions.spec.js index d9ee02a..f060d31 100644 --- a/cypress/integration/core/soldiers_actions.spec.js +++ b/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", () => { diff --git a/cypress/integration/core/towns.spec.js b/cypress/integration/core/towns.spec.js index 85b4825..acb198e 100644 --- a/cypress/integration/core/towns.spec.js +++ b/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(); diff --git a/index.html b/index.html index b6a5ffa..1a9de53 100644 --- a/index.html +++ b/index.html @@ -23,12 +23,12 @@
- Gold: + 💰:
- - - + + +
@@ -54,9 +54,9 @@

- +

- +

@@ -64,38 +64,51 @@

- +
- +

- +
-
-
- - +
+
+
+ +
+
+ +
- -
- - + +
+
+ +
+
+ +
-
- - + +
+
+ +
+
+ +
- +
diff --git a/src/scripts/browser/DetailsPanelPainter.js b/src/scripts/browser/DetailsPanelPainter.js index 4791c6d..ae87da6 100644 --- a/src/scripts/browser/DetailsPanelPainter.js +++ b/src/scripts/browser/DetailsPanelPainter.js @@ -161,10 +161,14 @@ 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(); }; @@ -172,7 +176,7 @@ function DetailsPanelPainter() { 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) { diff --git a/src/scripts/game/Game.js b/src/scripts/game/Game.js index 2399eeb..e695d53 100644 --- a/src/scripts/game/Game.js +++ b/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("End turn (+3 gold)"); + $("#end_turn").html("⏩ End turn (+3 💰)"); $("#end_turn").prop("disabled", false); $("#reset_map").prop("disabled", false); $("#toggle-options").prop("disabled", false); @@ -320,7 +319,7 @@ 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); @@ -328,8 +327,7 @@ Game.prototype.bindAll = function () { $(".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, diff --git a/src/scripts/players/Player.js b/src/scripts/players/Player.js index 5f5d7cf..e9d7952 100644 --- a/src/scripts/players/Player.js +++ b/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); diff --git a/src/scripts/units/IconTemplates.js b/src/scripts/units/IconTemplates.js index d9292f9..b11908d 100644 --- a/src/scripts/units/IconTemplates.js +++ b/src/scripts/units/IconTemplates.js @@ -53,7 +53,7 @@ IconTemplates.prototype.getHumanMob = function (id, name, movements, strength) { id, name, `roman/${this.getSoldierIconByStrength(strength)}`, - ` | Moves: [${movements}] | Strength: [${strength}]`, + ` | 🦶 Moves: [${movements}] | 💪 Strength: [${strength}]`, draggable ); }; @@ -68,7 +68,7 @@ IconTemplates.prototype.getUsedHumanMob = function ( id, name, `roman/grey/${this.getSoldierIconByStrength(strength)}`, - ` | Moves: [${movements}] | Strength: [${strength}]` + ` | 🦶 Moves: [${movements}] | 💪 Strength: [${strength}]` ); }; @@ -85,7 +85,12 @@ IconTemplates.prototype.getTown = function (id, name, img, extraTitle = "") { }; IconTemplates.prototype.getHumanTown = function (id, name) { - return this.getTown(id, name, "roman/2", " | Quantity: [1] | Quality: [1]"); + return this.getTown( + id, + name, + "roman/2", + " | 👥 Quantity: [1] | 💪 Quality: [1]" + ); }; IconTemplates.prototype.getAITown = function (id, name) { diff --git a/src/stylesheets/layout.css b/src/stylesheets/layout.css index 00994f3..348fee5 100644 --- a/src/stylesheets/layout.css +++ b/src/stylesheets/layout.css @@ -20,6 +20,10 @@ html { padding-top: 20px; } +.padding-bottom-md { + padding-bottom: 20px; +} + .margin-top-md { margin-top: 20px; } diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css index 269f5ef..3aea71b 100644 --- a/src/stylesheets/main.css +++ b/src/stylesheets/main.css @@ -18,3 +18,31 @@ input { text-align: center; color: var(--black); } + +label { + margin: 0; +} + +.custom-col-checkbox { + display: flex; + justify-content: flex-end; +} + +.custom-col-label { + display: flex; + justify-content: flex-start; + margin-left: 5px; +} + +.custom-row { + display: flex; + margin-bottom: 10px; +} + +.custom-col-1 { + flex: 1; +} + +.custom-col-2 { + flex: 2; +}