sarsoo/game-of-life
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive viewport, proper container class, reset UI properly

Browse Source
This commit is contained in:
andy 2021-06-22 19:25:32 +01:00
parent 07d2e0bb68
commit 9b037e18c8
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
www/index.html
View File

@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>game of life</title> <title>game of life</title>
@ -28,7 +29,7 @@
</head> </head>
<body> <body>
<div class="card container-xs text-center p-4 m-3"> <div class="card container text-center p-4 m-3">
<div class="card-header"> <div class="card-header">
<h1>Game of Life 🚀</h1> <h1>Game of Life 🚀</h1>
</div> </div>

4
www/index.js
View File

@ -7,7 +7,7 @@ init();
const randSlider = document.getElementById("randThreshold"); const randSlider = document.getElementById("randThreshold");
const randSliderLabel = document.getElementById("randThreshold-label"); const randSliderLabel = document.getElementById("randThreshold-label");
const CELL_SIZE = 5; // px const CELL_SIZE = 4; // px
const GRID_COLOR = "#BBBBBB"; const GRID_COLOR = "#BBBBBB";
const DEAD_COLOR = "#FFFFFF"; const DEAD_COLOR = "#FFFFFF";
const ALIVE_COLOR = "#FF55AA"; const ALIVE_COLOR = "#FF55AA";
@ -173,6 +173,7 @@ const onWidth = () => {
// requestAnimationFrame(renderLoop); // requestAnimationFrame(renderLoop);
} }
widthBox.onchange = onWidth; widthBox.onchange = onWidth;
widthBox.value = 100;
const heightBox = document.getElementById("height"); const heightBox = document.getElementById("height");
/** /**
@ -187,6 +188,7 @@ const onHeight = () => {
// requestAnimationFrame(renderLoop); // requestAnimationFrame(renderLoop);
} }
heightBox.onchange = onHeight; heightBox.onchange = onHeight;
heightBox.value = 100;
// BUTTONS // BUTTONS