2021-06-26 21:15:29 +01:00
<!DOCTYPE html>
< html >
< 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">
2021-07-02 15:37:40 +01:00
< title > draught< / title >
2021-06-26 21:15:29 +01:00
< style >
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;
}
2021-07-12 23:48:29 +01:00
2021-07-13 12:09:58 +01:00
.no-select {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
2021-07-12 23:48:29 +01:00
#game-canvas {
width: 1000px;
height: 1000px;
}
@media only screen and (max-width: 1000px) {
#game-canvas {
width: 700px;
height: 700px;
}
}
@media only screen and (max-width: 800px) {
#game-canvas {
width: 600px;
height: 600px;
}
}
@media only screen and (max-width: 600px) {
#game-canvas {
width: 400px;
height: 400px;
}
}
@media only screen and (max-width: 400px) {
#game-canvas {
width: 300px;
height: 300px;
}
}
@media only screen and (max-width: 300px) {
#game-canvas {
width: 200px;
height: 200px;
}
}
2021-06-26 21:15:29 +01:00
< / style >
< / head >
< body >
< div class = "card container text-center p-4 m-3" >
< div class = "card-header" >
< h1 > Draught 🚀< / h1 >
< / div >
2021-07-13 12:09:58 +01:00
< div class = "card-body no-select" >
2021-06-26 21:15:29 +01:00
< div class = "row p-1" >
< div class = "col-sm-12" >
2021-07-13 12:09:58 +01:00
< p class = "text-muted" > An implementation of checkers in Rust WASM with a thin Js frontend, mainly as an exercise to learn Rust and to have a larger project in the language to fiddle with. Using the < a href = "https://en.wikipedia.org/wiki/Minimax" > minimax< / a > algorithm for an AI player that can operate with reasonable performance as a result of Rust's compiled performance.< / p >
2021-06-26 21:15:29 +01:00
< / div >
< / div >
2021-07-09 22:31:30 +01:00
< div class = "row p-3" >
2021-06-26 21:15:29 +01:00
< div class = "col-sm-12" >
2021-07-10 23:56:15 +01:00
< a href = "doc/draught" class = "btn btn-secondary" target = "_blank" > Docs< / a >
2021-07-13 12:09:58 +01:00
< button id = "startBtn" class = "btn btn-success" title = "reset the game and start again" > Start< / button >
2021-06-26 21:15:29 +01:00
< / div >
< / div >
2021-07-09 22:31:30 +01:00
2021-07-12 23:48:29 +01:00
< div class = "row p-3" >
2021-07-13 12:09:58 +01:00
< div class = "col-sm-4" title = "board width in cells" >
2021-07-12 23:48:29 +01:00
< input type = "number"
id="width"
name="width"
min="3" max="40" value="8"
class="form-control">
< label for = "width" > width< / label >
< / div >
2021-07-13 12:09:58 +01:00
< div class = "col-sm-4" title = "board height in cells" >
2021-07-12 23:48:29 +01:00
< input type = "number"
id="height"
name="height"
min="3" max="40" value="8"
class="form-control">
< label for = "height" > height< / label >
< / div >
2021-07-13 12:09:58 +01:00
< div class = "col-sm-4" title = "number of rows to populate with pieces per player" >
2021-07-12 23:48:29 +01:00
< input type = "number"
id="play_rows"
name="play_rows"
min="1" max="3" value="3"
class="form-control">
< label for = "play_rows" > playable rows< / label >
< / div >
< / div >
< div class = "row p-3" >
2021-07-14 14:11:40 +01:00
< div class = "col-sm-3" title = "should the AI play?" >
2021-07-13 12:09:58 +01:00
< input class = "form-check-input"
type="checkbox"
value=""
id="ai-checkbox"
checked="checked">
2021-07-12 23:48:29 +01:00
< label class = "form-check-label" for = "ai-checkbox" >
AI Player
< / label >
< / div >
2021-07-14 14:11:40 +01:00
< div class = "col-sm-3" title = "how many layers deep should the AI search (grows exponentially, be careful)" >
2021-07-12 23:48:29 +01:00
< input type = "number"
id="ai_search_depth"
name="ai_search_depth"
min="1" max="10" value="4"
class="form-control">
2021-07-14 14:11:40 +01:00
< label for = "ai_search_depth" > ai clairvoyance < small class = "text-muted" > moves ahead< / small > < / label >
2021-07-12 23:48:29 +01:00
< / div >
2021-07-14 14:11:40 +01:00
< div class = "col-sm-3" title = "what percentage of the AI's moves should be perfect?" >
< label for = "ai_difficulty" class = "form-label" > ai difficulty < small class = "text-muted" > %< / small > < / label >
< input type = "range" class = "form-range" min = "1" max = "100" id = "ai_difficulty" >
< / div >
< div class = "col-sm-3" title = "how many nodes were expanded in the search tree" >
2021-07-12 23:48:29 +01:00
< p class = "text-muted" id = "node-count" > < / p >
< / div >
< / div >
2021-07-10 21:02:28 +01:00
< div class = "row p-3" >
2021-07-13 12:09:58 +01:00
< div class = "col-sm-6" title = "current turn" >
2021-07-10 21:02:28 +01:00
< h1 id = "team-p" > < / h1 >
< / div >
2021-07-13 12:09:58 +01:00
< div class = "col-sm-6" title = "who's winning" >
< h1 id = "winning-p" > < / h1 >
< / div >
2021-07-10 23:56:15 +01:00
< / div >
< div class = "row p-3" >
< div class = "col-sm-12" >
2021-07-09 22:31:30 +01:00
< p hidden id = "status-p" > < / p >
2021-07-10 21:02:28 +01:00
< div hidden id = "status-d" class = "alert alert-danger" role = "alert" >
A simple success alert—check it out!
< / div >
2021-07-09 22:31:30 +01:00
< / div >
< / div >
2021-06-26 21:15:29 +01:00
< / div >
< / div >
<!-- <pre id="game - of - life - canvas"></pre> -->
< canvas id = "game-canvas" class = "pb-2" > < / canvas >
< script src = "./bootstrap.js" > < / script >
< a href = "https://github.com/sarsoo" > < img src = "https://storage.googleapis.com/sarsooxyzstatic/andy.png" class = " pb-2" style = "width: 150px" / > < / a >
< / body >
< / html >
