Skip to content

Commit

Permalink
Merge pull request #4 from nasrulcodes/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@nasfadev
nasfadev committed Jan 30, 2024
2 parents 24438fc + ad12ff2 commit c20877e
Show file tree
Hide file tree
Showing 13 changed files with 508 additions and 54 deletions.
129 changes: 125 additions & 4 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,130 @@
:root{
font-size: 100%;
background-color: #0f768d;
}
div.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
div.container > div.screen{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

div.container > div.screen >div.content >canvas{
position:absolute;
border-radius: 2%;
height: 100%;
width: 100%;
}
div.container > div.screen >div.menu{
height: 10%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.2rem;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
div.container > div.screen >div.menu>span{
padding-right: .3rem;
padding-left: .3rem;
display: flex;
align-items: center;
}
div.container > div.screen >div.menu> span >img{
width: 1.2rem;
height: 1.2rem;
}
div.container > div.screen >div.footer{
height: 10%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 1.2rem;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
div.container > div.screen >div.footer> a{
text-decoration: none;
color: white ;
display: flex;
align-items: center;
}
div.container canvas.main-canvas{
div.container > div.screen >div.footer> a > span{
display: flex;
height: 90vmin;
width: 90vmin;
}
align-items: center;
padding-right: .3rem;
}
div.container > div.screen >div.footer> a >span >img{
width: 1.2rem;
height: 1.2rem;
}
div.container > div.screen >div.content{
border-radius: 2%;
box-shadow: rgba(100, 100, 111, 0.9) 0px 7px 29px 0px;
position: relative;
height: 80%;
width: 80%;
}
div.container > div.screen > div.content > div.game-over > p{
color: white;
font-size: 1.5rem;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
div.container > div.screen > div.content > div.game-over{
position:absolute;
border-radius: 2%;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .5);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999;
}
div.container > div.screen >div.content> div.game-over > span.play-again{
color: white;
border: .2rem solid white;
transition: .3s;
}
div.container > div.screen >div.content> div.game-over > span.play-again:hover{
color: black;
background-color: white;
}
div.container > div.screen >div.content> div.game-over > span.button{
cursor: pointer;
text-align: center;
border-radius: .9rem;
padding: 1rem;
font-size: 2rem;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
@media only screen and (max-width: 600px) {
div.container > div.screen >div.content{
height: 90%;
width: 90%;
}
div.container > div.screen >div.menu{
height: 5%;
position: absolute;
top: -5%;
}
div.container > div.screen >div.footer
{
height: 5%;
position: absolute;
bottom: -5%;
}
div.container > div.screen >div.content> div.game-over > span.play-again{
transition: none;
}
}
Binary file added img/flag-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/github-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/timer-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 35 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,41 @@

<body>
<div class="container">
<canvas id="main-canvas" class="main-canvas" width="2048" height="2048"></canvas>
<div class="screen">
<div class="menu">
<span class="flags">
<img src="img/flag-icon.png" width="20px" height="20px" alt="" srcset="">
<p>40</p>
</span>

<span class="timer">
<img src="img/timer-icon.png" width="20px" height="20px" alt="" srcset="">
<p>999</p>
</span>

</div>
<div class="content">
<div class="game-over">
<p>
You die.
</p>
<span id="play-again" class="play-again button" >
Play Again
</span>
</div>
<canvas id="main-canvas" class="main-canvas" width="2048" height="2048"></canvas>
<canvas id="stroke-canvas" class="stroke-canvas" width="2048" height="2048"></canvas>
<canvas id="pointer-canvas" class="pointer-canvas" width="2048" height="2048"></canvas>
</div>
<div class="footer">
<a href="https://github.com/nasrulcodes" target="_blank" rel="noopener noreferrer">
<span class="flags">
<img src="img/github-icon.png" width="20px" height="20px" alt="" srcset="">
</span>
nasrulcode
</a>
</div>
</div>
</div>
<script type="module" src="/main.js"></script>
</body>
Expand Down
9 changes: 9 additions & 0 deletions js/canvas.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
// stored canvas element from html
export const main = document.getElementById("main-canvas");
export const pointer = document.getElementById("pointer-canvas");
export const stroke = document.getElementById("stroke-canvas");
export const screen = document.querySelector(".screen");
export const gameOverScreen = document.querySelector(".game-over");
export const flag = document.querySelector(".menu .flags p");
export const gameOverOption = document.querySelector(".game-over p");
export const root = document.querySelector(":root");
// get the context of the canvas for drawing pusposes;
export const ctx = main.getContext("2d", { alpha: false });
export const ptrCtx = pointer.getContext("2d");
export const strCtx = stroke.getContext("2d");
8 changes: 5 additions & 3 deletions js/config.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
// class for configuration of the canvas
export default class Config {
// size of a grid in the canvas
static size = 10;
static bomCount = 15;
static size = 15;
static bomCount = 25;
}
export class Theme {
static defaultFontSize = 1000;
static boomIconUrl = "./img/bomb-icon.png";
static boomIconSize = 0.9;
static boomIconSize = 0.7;
static flagIconUrl = "./img/flag-icon.png";
static flagIconSize = 0.7;
}
37 changes: 34 additions & 3 deletions js/event-handler.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,41 @@
import { main as canvas } from "./canvas.js";
import { partialRender } from "./grid-generator.js";
import { pointer, gameOverScreen } from "./canvas.js";
import { partialRender, pointerRender } from "./grid-generator.js";
import { run as runUI } from "./ui-handler.js";
import initStyle from "./style.js";
// init event
export function init() {
// register event listener for prevent context menu
addEventListener("resize", (e) => {
if (screen.width < screen.height) return;
initStyle();
e.stopPropagation();
e.preventDefault();
});
pointer.addEventListener("contextmenu", (e) => {
e.stopPropagation();
e.preventDefault();
});
// register event listener for canvas element
gameOverScreen.addEventListener("mouseup", (e) => {
// render just one part of the grid
runUI(e);
e.stopPropagation();
e.preventDefault();
});
// register event listener for canvas element
canvas.addEventListener("click", (e) => {
pointer.addEventListener("mouseup", (e) => {
// render just one part of the grid
e.stopPropagation();
e.preventDefault();
console.log(e);
partialRender(e);
});
// register event listener for canvas element
pointer.addEventListener("mousemove", (e) => {
// render just one part of the grid
e.stopPropagation();
e.preventDefault();
console.log(e);
pointerRender(e);
});
}
21 changes: 19 additions & 2 deletions js/grid-data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,27 @@ class Data {
isTouched = false;
isBom = false;
nearestBomCount = 0;
isFlag = false;
}
export let bombIndexs = [];
// array that stored instances of Data class
export const datas = [];
export let datas = [];
// init datas array
export class Status {
static gridCount = 0;
static flagCount = 0;
}
export function init() {
Status.gridCount = Config.size * Config.size;
Status.flagCount = Config.bomCount;
datas = [];
bombIndexs = [];
for (let i = 0; i < Config.size * Config.size; i++) {
datas.push(new Data());
datas[i].isBom = i < Config.bomCount;
}
bomRandomizer();
bombCounter();
checkNearestBom();
}
function bomRandomizer() {
Expand All @@ -25,6 +36,12 @@ function bomRandomizer() {
datas[randomIndex].isBom = temp;
}
}
function bombCounter() {
for (let i = 0; i < datas.length; i++) {
if (!datas[i].isBom) continue;
bombIndexs.push(i);
}
}
function checkNearestBom() {
for (let i = 0; i < datas.length; i++) {
for (let j = 0; j < 8; j++) {
Expand All @@ -41,7 +58,7 @@ export function getNearestGridIndex(index, dataId) {
// 8 | 0 | 4 |
// 7 | 6 | 5 |
let canTop = !(index - Config.size < 0);
let canBottom = !(index + Config.size >= Config.size * Config.size - 1);
let canBottom = !(index + Config.size >= Config.size * Config.size);
let canRight = !(index % Config.size === Config.size - 1);
let canLeft = !(index % Config.size === 0);
if (dataId == 1 && canTop && canLeft) {
Expand Down
Loading

0 comments on commit c20877e

Please sign in to comment.