<!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"> <title>draught</title> <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; } .no-select { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ } #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; } } </style> </head> <body> <div class="card container text-center p-4 m-3"> <div class="card-header"> <h1>Draught 🚀</h1> </div> <div class="card-body no-select"> <div class="row p-1"> <div class="col-sm-12"> <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> </div> </div> <div class="row p-3"> <div class="col-sm-12"> <a href="doc/draught" class="btn btn-secondary" target="_blank">Docs</a> <button id="startBtn" class="btn btn-success" title="reset the game and start again">Start</button> </div> </div> <div class="row p-3"> <div class="col-sm-4" title="board width in cells"> <input type="number" id="width" name="width" min="3" max="40" value="8" class="form-control"> <label for="width">width</label> </div> <div class="col-sm-4" title="board height in cells"> <input type="number" id="height" name="height" min="3" max="40" value="8" class="form-control"> <label for="height">height</label> </div> <div class="col-sm-4" title="number of rows to populate with pieces per player"> <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"> <div class="col-sm-3" title="should the AI play?"> <input class="form-check-input" type="checkbox" value="" id="ai-checkbox" checked="checked"> <label class="form-check-label" for="ai-checkbox"> AI Player </label> </div> <div class="col-sm-3" title="how many layers deep should the AI search (grows exponentially, be careful)"> <input type="number" id="ai_search_depth" name="ai_search_depth" min="1" max="10" value="4" class="form-control"> <label for="ai_search_depth">ai clairvoyance <small class="text-muted">moves ahead</small></label> </div> <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"> <p class="text-muted" id="node-count"></p> </div> </div> <div class="row p-3"> <div class="col-sm-6" title="current turn"> <h1 id="team-p"></h1> </div> <div class="col-sm-6" title="who's winning"> <h1 id="winning-p"></h1> </div> </div> <div class="row p-3"> <div class="col-sm-12"> <p hidden id="status-p"></p> <div hidden id="status-d" class="alert alert-danger" role="alert"> A simple success alert—check it out! </div> </div> </div> </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>