From 3a87d6a656dd092ec3e8df6797ff6e88fb7641e8 Mon Sep 17 00:00:00 2001 From: Arne van Iterson Date: Fri, 27 Nov 2020 19:54:43 +0100 Subject: [PATCH] Added icons --- html/index.html | 6 ++++++ res/svg/bomb-solid.svg | 1 + res/svg/flag-solid.svg | 1 + scss/index.scss | 14 ++++++++++++++ src/helpers/multiplayer.js | 4 ++-- src/index.js | 7 +++++-- src/screens/game.js | 23 +++++++++++++++++------ webpack.config.js | 12 +++++++++++- 8 files changed, 57 insertions(+), 11 deletions(-) create mode 100644 res/svg/bomb-solid.svg create mode 100644 res/svg/flag-solid.svg diff --git a/html/index.html b/html/index.html index 41c23f8..420774f 100644 --- a/html/index.html +++ b/html/index.html @@ -4,6 +4,12 @@ + + + Minesweeper 99 diff --git a/res/svg/bomb-solid.svg b/res/svg/bomb-solid.svg new file mode 100644 index 0000000..ddc2a3e --- /dev/null +++ b/res/svg/bomb-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/svg/flag-solid.svg b/res/svg/flag-solid.svg new file mode 100644 index 0000000..80ad2dc --- /dev/null +++ b/res/svg/flag-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scss/index.scss b/scss/index.scss index f42c469..158b500 100644 --- a/scss/index.scss +++ b/scss/index.scss @@ -22,6 +22,14 @@ body { h1 { text-align: center; + + img { + fill: white; + filter: invert(1); + height: 1em; + padding-right: 0.3em; + margin-bottom: -0.15em; + } } h4.subheader { @@ -66,6 +74,12 @@ body { background-color: #303030; font-size: large; + img { + fill: white; + filter: invert(1); + height: 1em; + } + &.discovered { background-color: #424242; } diff --git a/src/helpers/multiplayer.js b/src/helpers/multiplayer.js index 875065b..821d49d 100644 --- a/src/helpers/multiplayer.js +++ b/src/helpers/multiplayer.js @@ -77,7 +77,7 @@ class Multiplayer { if (data[id] == undefined) { log(`${this.players[id].username} has left.`, "alert"); delete this.players[id]; - if (Object.keys(this.players).length == 0) { + if (Object.keys(this.players).length == 0 && this.game.active) { log("No other players left", "alert"); this.game.gameOver(); } @@ -100,7 +100,7 @@ class Multiplayer { if (!data.player.active) { log(`${this.players[data.uuid].username} had died`); delete this.players[data.uuid]; - if (Object.keys(this.players).length == 0) { + if (Object.keys(this.players).length == 0 && this.game.active) { log("No other players left", "alert"); this.game.gameOver(); } diff --git a/src/index.js b/src/index.js index 0ed031c..7328e6d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,10 @@ /* eslint-disable no-unused-vars */ import "../scss/index.scss"; -// import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; +import bomb from "../res/svg/bomb-solid.svg"; import Game from "./screens/game.js"; import Multiplayer from "./helpers/multiplayer.js"; - ["DOMContentLoaded", "resize"].forEach(evt => window.addEventListener(evt, (e) => { var main = document.getElementById("main"); @@ -21,6 +20,10 @@ import Multiplayer from "./helpers/multiplayer.js"; }) ); +var img = document.createElement("img"); +img.src = bomb; +document.querySelector("body > h1").prepend(img); + var board = document.getElementById("board"); var game = new Game(board); var mp = new Multiplayer(game); diff --git a/src/screens/game.js b/src/screens/game.js index 57c1cba..6426139 100644 --- a/src/screens/game.js +++ b/src/screens/game.js @@ -4,6 +4,9 @@ import { EventEmitter } from "events"; +import bomb from "../../res/svg/bomb-solid.svg"; +import flag from "../../res/svg/flag-solid.svg"; + class Game extends EventEmitter { constructor(element) { super(); @@ -169,14 +172,14 @@ class Game extends EventEmitter { } if (this.active && !this.discovered[cell]) { - this.discovered[cell] = 1; - this.children[cell].classList.add("discovered"); - if (this.bombs[cell]) { this.gameOver(); return; } + this.discovered[cell] = 1; + this.children[cell].classList.add("discovered"); + var surrounds = this.surrounds(cell); var value = 0; @@ -206,8 +209,12 @@ class Game extends EventEmitter { if (this.bombs[cell]) { if (!this.discovered[cell]) { this.discovered[cell] = 1; - this.children[cell].innerHTML = "#"; + + var img = document.createElement("img"); + img.src = flag; + this.children[cell].appendChild(img); this.children[cell].classList.add("flag"); + this.bombAmount--; this.emit("sendBomb"); @@ -253,8 +260,12 @@ class Game extends EventEmitter { for (let index = 0; index < this.size; index++) { if (this.bombs[index]) { - this.children[index].innerHTML = "[]"; - this.children[index].classList.add("bomb"); + if (!this.discovered[index]) { + var img = document.createElement("img"); + img.src = bomb; + this.children[index].appendChild(img); + this.children[index].classList.add("bomb"); + } } } } diff --git a/webpack.config.js b/webpack.config.js index 8c1681c..4aa8d9b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,7 +18,7 @@ module.exports = { ], }, { - test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, + test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/, use: [{ loader: "file-loader", options: { @@ -26,6 +26,16 @@ module.exports = { outputPath: "res/fonts/" } }] + }, + { + test: /\.(svg)$/, + use: [{ + loader: "file-loader", + options: { + name: "[name].[ext]", + outputPath: "res/svg/" + } + }] } ] }