2020-10-11 21:46:15 +01:00
<!DOCTYPE html>
< html >
2021-06-22 15:28:31 +01:00
< head >
2020-10-11 21:46:15 +01:00
< meta charset = "utf-8" >
2021-06-22 15:28:31 +01:00
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel = "stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
2020-10-11 21:46:15 +01:00
< title > game of life< / title >
< style >
2021-06-22 15:28:31 +01:00
body {
/* position: absolute; */
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f0f0f0;
}
h1 {
font-family: monospace;
}
2020-10-11 21:46:15 +01:00
< / style >
2021-06-22 15:28:31 +01:00
< / head >
< body >
< div class = "card container-xs text-center p-4 m-3" >
< div class = "card-header" >
2021-06-22 16:45:07 +01:00
< h1 > Game of Life 🚀< / h1 >
2021-06-22 15:28:31 +01:00
< / div >
< div class = "card-body" >
2021-06-22 16:45:07 +01:00
< div class = "row p-1" >
< div class = "col-sm-12" >
< p class = "text-muted" > An implementation of the standard < a href = "https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life" > Conway Game of Life< / a > . The game logic is written in WASM-targeted Rust with a light Js frontend. Read through the source code < a href = "https://github.com/Sarsoo/game-of-life" > here< / a > . It was written following the guides in the < a href = "https://rustwasm.github.io/docs/book" > Rust & WebAssembly book< / a > .< / p >
< / div >
< / div >
2021-06-22 15:28:31 +01:00
< div class = "row p-3" >
< div class = "col-sm-6" >
< input type = "range"
id="frameRate"
name="frameRate"
2021-06-22 16:45:07 +01:00
min="1" max="500" value="100"
2021-06-22 15:28:31 +01:00
class="form-range">
< label for = "frameRate"
id="frameRate-label"
2021-06-22 16:45:07 +01:00
class="form-label">Frame Interval: 100ms< / label >
2021-06-22 15:28:31 +01:00
< / div >
< div class = "col-sm-6" >
< input type = "range"
id="randThreshold"
name="randThreshold"
min="0" max="100" value="50"
class="form-range">
< label for = "randThreshold"
id="randThreshold-label"
2021-06-22 16:45:07 +01:00
class="form-label">Random Threshold: 50%< / label >
2021-06-22 15:28:31 +01:00
< / div >
< / div >
< div class = "row p-3" >
< div class = "col-sm-6" >
< input type = "number"
id="width"
name="width"
min="1" max="1000" value="100"
class="form-control">
< label for = "width" > width< / label >
< / div >
< div class = "col-sm-6" >
< input type = "number"
id="height"
name="height"
min="1" max="1000" value="100"
class="form-control">
< label for = "height" > height< / label >
< / div >
< / div >
< div class = "row p-3 align-items-center" >
< div class = "col-sm-6" >
2021-06-22 16:45:07 +01:00
<!-- <input type="checkbox"
2021-06-22 15:28:31 +01:00
id="play-check"
name="play-check"
class="form-check-input">
2021-06-22 16:45:07 +01:00
< label for = "play-check" > Play< / label > -->
< button id = "play" class = "btn btn-success" > Play< / button >
2021-06-22 15:28:31 +01:00
< / div >
< div class = "col-sm-6" >
< div class = "row p-1" >
2021-06-22 16:45:07 +01:00
< button id = "step" class = "btn btn-secondary" > Step< / button >
2021-06-22 15:28:31 +01:00
< / div >
< div class = "row p-1" >
2021-06-22 16:45:07 +01:00
< button id = "reset" class = "btn btn-secondary" > Reset< / button >
2021-06-22 15:28:31 +01:00
< / div >
< / div >
< / div >
< / div >
< / div >
2020-10-11 21:46:15 +01:00
<!-- <pre id="game - of - life - canvas"></pre> -->
2021-06-22 15:28:31 +01:00
< canvas id = "game-of-life-canvas" class = "pb-2" > < / canvas >
2020-10-11 21:46:15 +01:00
< script src = "./bootstrap.js" > < / script >
2021-06-22 15:28:31 +01:00
2021-06-22 16:45:07 +01:00
< a href = "https://github.com/sarsoo" > < img src = "https://storage.googleapis.com/sarsooxyzstatic/andy.png" class = " pb-2" style = "width: 150px" / > < / a >
2021-06-22 15:28:31 +01:00
< / body >
< / html >
