responsive viewport, proper container class, reset UI properly

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

View File

@ -3,6 +3,7 @@
<head>
<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"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>game of life</title>
@ -28,7 +29,7 @@
</head>
<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">
<h1>Game of Life 🚀</h1>
</div>

View File

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