Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Additional improvements #16

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Additional improvements #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff19b06
Additional improvements
PitPik Jan 30, 2023
d41208c
fix timer start
PitPik Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,21 @@
<header>
<label for="level">Level</label>
<select title="Level will change after restart game" id="level">
<option title="8x8 and 10 mines" value="easy">Easy</option>
<option title="10x10 and 14 mines" value="normal">Normal</option>
<option title="12x12 and 20 mines" value="hard">Hard</option>
<option title="8x8 and 10 mines" value="8,8,10">Easy</option>
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See app.js line 15 to see how this helps.

<option title="10x10 and 14 mines" value="10,10,14">Normal</option>
<option title="12x12 and 20 mines" value="12,12,20">Hard</option>
</select>
<button id="restart">Restart game</button>
<p>
<span id="hours">00</span>
<span id="hours"></span>
:
<span id="minutes">00</span>
<span id="minutes"></span>
:
<span id="seconds">00</span>
<span id="seconds"></span>
</p>

<p>
<span id="counter-flags">0</span>
<span id="counter-flags"></span>
/
<span id="amount-mines"></span>
</p>
Expand Down
98 changes: 18 additions & 80 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,116 +49,54 @@ button {
}

.game-canvas {
display: flex;
flex-direction: column;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This way we don't need all the specific classes further down .cell-8 , cell-10, ... We set the max width and height we want to see and flex-box does the rest.

margin: 20px auto;
padding: 5px 0 0 5px;
background-color: #55b4ff;
justify-content: center;
width: 500px;
height: 500px;
}

.row {
display: flex;
flex: auto;
flex-wrap: nowrap;
}

[class^="cell"] {
background-color: rgba(255, 255, 255, 0.6);
text-align: center;
}

[class^="cell"]:hover {
background-color: rgba(255, 255, 255, 0.8);;
}

.cell-8 {
margin-right: 5px;
margin-bottom: 5px;
height: 60px;
width: 60px;
flex: auto;
}

.cell-10 {
margin-right: 5px;
margin-bottom: 5px;
height: 60px;
width: 60px;
}

.cell-12 {
margin-right: 5px;
margin-bottom: 5px;
height: 60px;
width: 60px;
}

@media screen and (max-width: 1200px) {
.cell-12 {
height: 50px;
width: 50px;
}
}

@media screen and (max-width: 992px) {
.cell-10 {
height: 50px;
width: 50px;
}

.cell-12 {
height: 40px;
width: 40px;
}
[class^="cell"]:hover {
background-color: rgba(255, 255, 255, 0.8);
}

@media screen and (max-width: 768px) {
.cell-8 {
height: 50px;
width: 50px;
margin-right: 2px;
margin-bottom: 2px;
}
.game-canvas {
padding: 2px 0 0 2px;
width: 450px;
height: 450px;

.cell-10 {
height: 40px;
width: 40px;
margin-right: 2px;
margin-bottom: 2px;
}

.cell-12 {
height: 35px;
width: 35px;
[class^="cell"] {
margin-right: 2px;
margin-bottom: 2px;
}

.game-canvas {
padding: 2px 0 0 2px;
}
}

@media screen and (max-width: 567px) {
.cell-8 {
height: 40px;
width: 40px;
margin-right: 1px;
margin-bottom: 1px;
.game-canvas {
padding: 1px 0 0 1px;
width: 400px;
height: 400px;
}

.cell-10 {
height: 35px;
width: 35px;
[class^="cell"] {
margin-right: 1px;
margin-bottom: 1px;
}

.cell-12 {
height: 30px;
width: 30px;
margin-right: 1px;
margin-bottom: 1px;
}

.game-canvas {
padding: 1px 0 0 1px;
}
}
30 changes: 12 additions & 18 deletions src/js/actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,28 @@ import { table } from "./app.js";

//// Left click

export function clickOnCell(event){
export function clickOnCell(e){

if (!table.timeCounterIsStart){startTimer()}
if (table.won === undefined && !table.timeCounterIsStart){startTimer()}

let cellId = event.target.id;
let cellId = e.target.id;
let cellElement = document.getElementById(cellId);
let cell = table.tableCells[cellId];

if (!cell || cell.haveFlag || table.won !== undefined) return;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is newly introduced to realise event delegation. Same further down in rightClickOnCell()


if (!table.firstClick) {
firstClick(table, cellElement, cellId)
} else {
let haveMine = table.tableCells[cellId].haveMine;
let amountNeighborsWithMine = table.tableCells[cellId].amountNeighborsWithMine;
let haveMine = cell.haveMine;
let amountNeighborsWithMine = cell.amountNeighborsWithMine;

if (haveMine){
openCellWithMine(cellElement, cellId, table);
gameOver();
} else if(!haveMine && amountNeighborsWithMine > 0){
getNumberToCell(amountNeighborsWithMine, cellElement);
table.tableCells[cellId].isOpen = true;
cell.isOpen = true;
} else {
openEmptyCell(cellElement, cellId, table);
}
Expand All @@ -43,9 +46,11 @@ export function clickOnCell(event){
export function rightClickOnCell(e) {
e.preventDefault();

let cellId = event.target.id;
let cellId = e.target.id;
let cellElement = document.getElementById(cellId);

if (!table.tableCells[cellId] || table.won !== undefined) return;

let haveFlag = table.tableCells[cellId].haveFlag;

if (!table.timeCounterIsStart){startTimer()}
Expand Down Expand Up @@ -89,9 +94,6 @@ function firstClick(table, cellElement, cellId){
table.tableCells[cellId].firstClickOpen = true;
table.tableCells[cellId].haveFlag = false;
cellElement.style.backgroundImage = '';
cellElement.removeEventListener("contextmenu", rightClickOnCell, false);
cellElement.removeEventListener('touchstart', onTouchStart,false);
cellElement.removeEventListener('touchend', onTouchEnd,false);

let neighbors = table.tableCells[cellId].neighbors;
for (const neighbor in neighbors){
Expand Down Expand Up @@ -173,19 +175,13 @@ function getNumberToCell(amountNeighborsWithMine, cellElement){
cellElement.style.backgroundSize = "cover";
cellElement.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
cellElement.style.backgroundImage = urlImg;
cellElement.removeEventListener("contextmenu", rightClickOnCell, false);
cellElement.removeEventListener('touchstart', onTouchStart,false);
cellElement.removeEventListener('touchend', onTouchEnd,false);
}

function openEmptyCell(cellElement, cellId, table){
cellElement.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
table.tableCells[cellId].isOpen = true;
table.tableCells[cellId].haveFlag = false;
cellElement.style.backgroundImage = '';
cellElement.removeEventListener("contextmenu", rightClickOnCell, false);
cellElement.removeEventListener('touchstart', onTouchStart,false);
cellElement.removeEventListener('touchend', onTouchEnd,false);
checkNeighborsWithNeighborsWithMine(table, cellId);
}

Expand Down Expand Up @@ -232,14 +228,12 @@ function checkAndAddNumberCellsWithFlag() {
}

function getFlagToCell(cellElement, table, cellId){
cellElement.removeEventListener("click", clickOnCell);
cellElement.style.backgroundSize = "cover";
cellElement.style.backgroundImage = "url('./src/img/flag.png')";
table.tableCells[cellId].haveFlag = true;
}

function removeFlagFromCell(cellElement, table, cellId){
cellElement.addEventListener("click", clickOnCell);
cellElement.style.backgroundSize = "";
cellElement.style.backgroundImage = "";
table.tableCells[cellId].haveFlag = false;
Expand Down
50 changes: 8 additions & 42 deletions src/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,18 @@
import {
buildGameTable
} from "./gameBuilder.js";
import { removeGameTable } from "./gameState";
import { buildGameTable } from "./gameBuilder.js";
import { stopTimer, resetTimeCounter } from "./timer";

var level;
setLevel();
const restartElement = document.getElementById("restart");
const levelElement = document.getElementById('level');

export var table = buildGameTable(level);
export let table = {};

document.getElementById("restart").addEventListener("click", restartGame);
restartElement.addEventListener("click", restartGame);
levelElement.addEventListener("change", restartGame);

restartGame();

function restartGame() {
setLevel();
removeGameTable();
table = buildGameTable(level);
table = buildGameTable(levelElement.value.split(',').map(item => +item));
stopTimer();
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We directly pass the value from the <select> to the function. This way we can change the levels in one place (the index.html)

resetTimeCounter();
}

function setLevel() {
level = document.getElementById('level').value;

switch (level) {
case "easy":
level = {
rows: 8,
cols: 8,
maxMines:10
}
break;
case "normal":
level = {
rows: 10,
cols: 10,
maxMines: 14
}
break;
case "hard":
level = {
rows: 12,
cols: 12,
maxMines: 20
}
break;
default:
break;
}

}
Loading