arne/minesweeper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added icons

Browse Source
This commit is contained in:
Arne van Iterson 2020-11-27 19:54:43 +01:00
parent 0fed261ac4
commit 3a87d6a656
8 changed files with 57 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
html/index.html
View File

@ -4,6 +4,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
SVG Icons by FontAwesome, no changes have been made to the icons used (bomb, flag)
Licence: https://fontawesome.com/license
-->
<title>Minesweeper 99</title>
</head>

1
res/svg/bomb-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bomb" class="svg-inline--fa fa-bomb fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M440.5 88.5l-52 52L415 167c9.4 9.4 9.4 24.6 0 33.9l-17.4 17.4c11.8 26.1 18.4 55.1 18.4 85.6 0 114.9-93.1 208-208 208S0 418.9 0 304 93.1 96 208 96c30.5 0 59.5 6.6 85.6 18.4L311 97c9.4-9.4 24.6-9.4 33.9 0l26.5 26.5 52-52 17.1 17zM500 60h-24c-6.6 0-12 5.4-12 12s5.4 12 12 12h24c6.6 0 12-5.4 12-12s-5.4-12-12-12zM440 0c-6.6 0-12 5.4-12 12v24c0 6.6 5.4 12 12 12s12-5.4 12-12V12c0-6.6-5.4-12-12-12zm33.9 55l17-17c4.7-4.7 4.7-12.3 0-17-4.7-4.7-12.3-4.7-17 0l-17 17c-4.7 4.7-4.7 12.3 0 17 4.8 4.7 12.4 4.7 17 0zm-67.8 0c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17zm67.8 34c-4.7-4.7-12.3-4.7-17 0-4.7 4.7-4.7 12.3 0 17l17 17c4.7 4.7 12.3 4.7 17 0 4.7-4.7 4.7-12.3 0-17l-17-17zM112 272c0-35.3 28.7-64 64-64 8.8 0 16-7.2 16-16s-7.2-16-16-16c-52.9 0-96 43.1-96 96 0 8.8 7.2 16 16 16s16-7.2 16-16z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
res/svg/flag-solid.svg Normal file
View File

@ -0,0 +1 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="flag" class="svg-inline--fa fa-flag fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M349.565 98.783C295.978 98.783 251.721 64 184.348 64c-24.955 0-47.309 4.384-68.045 12.013a55.947 55.947 0 0 0 3.586-23.562C118.117 24.015 94.806 1.206 66.338.048 34.345-1.254 8 24.296 8 56c0 19.026 9.497 35.825 24 45.945V488c0 13.255 10.745 24 24 24h16c13.255 0 24-10.745 24-24v-94.4c28.311-12.064 63.582-22.122 114.435-22.122 53.588 0 97.844 34.783 165.217 34.783 48.169 0 86.667-16.294 122.505-40.858C506.84 359.452 512 349.571 512 339.045v-243.1c0-23.393-24.269-38.87-45.485-29.016-34.338 15.948-76.454 31.854-116.95 31.854z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 755 B

14
scss/index.scss
View File

@ -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;
}

4
src/helpers/multiplayer.js
View File

@ -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();
}

7
src/index.js
View File

@ -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);

21
src/screens/game.js
View File

@ -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,11 +260,15 @@ class Game extends EventEmitter {
for (let index = 0; index < this.size; index++) {
if (this.bombs[index]) {
this.children[index].innerHTML = "[]";
if (!this.discovered[index]) {
var img = document.createElement("img");
img.src = bomb;
this.children[index].appendChild(img);
this.children[index].classList.add("bomb");
}
}
}
}
}
export default Game;

12
webpack.config.js
View File

@ -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/"
}
}]
}
]
}