<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Matrix of Life</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<style>
html {
width: 100%;
min-height: 100%;
}
#wsMessages {
font-size: 0.7rem;
}
</style>
</head>
<body class="w-100 min-vh-100 d-flex align-items-center py-3" data-bs-theme="dark">
<div class="container justify-content-center">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="mb-3">
<div class="card">
<h5 class="card-header">
Matrix of Life <div id="spinner" class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</h5>
<div class="card-body text-center">
<!-- color mode -->
<div class="row mb-3 px-3">
<div class="btn-group" role="group">
<input type="radio" class="btn-check btnColorMode" id="btnColorMode_0" data-mode="0" data-control="#collapseColorpicker" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="btnColorMode_0">Static</label>
<input type="radio" class="btn-check btnColorMode" id="btnColorMode_1" data-mode="1" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="btnColorMode_1">Simple</label>
<input type="radio" class="btn-check btnColorMode" id="btnColorMode_2" data-mode="2" data-control="#collapseDecay" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="btnColorMode_2">Dynamic</label>
</div>
</div>
<!-- // color mode -->
<div class="row mb-2 px-3 collapse collapseSettings" id="collapseColorpicker">
<div id="colorpicker" class="d-flex justify-content-center"></div>
</div>
<div class="row mb-2 px-3 collapse collapseSettings" id="collapseDecay">
<label for="rangeDecay" class="col-form-label">Cell Aging</label>
<input type="range" class="form-range rangeSetting" id="rangeDecay" data-name="colorDecay" min="1"
max="100" steps="1" disabled>
</div>
<div class="row mb-2 px-3">
<label for="rangeBrightness" class="col-form-label">Brightness</label>
<input type="range" class="form-range rangeSetting" id="rangeBrightness" data-name="brightness" min="1"
max="100" steps="1" disabled>
</div>
<div class="row mb-2 px-3">
<label for="rangeSpeed" class="col-form-label">Speed</label>
<input type="range" class="form-range rangeSetting" id="rangeSpeed" data-name="interval" min="1" max="100"
steps="10" disabled>
</div>
<div class="row px-3 mt-4">
<button type="button" class="btn btn-primary btnAction" data-action="addGlider" disabled>Add
Glider</button>
</div>
</div>
<!-- card footer -->
<div class="card-footer text-body-secondary py-3">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-success btnAction me-1" data-action="loadSettings"
disabled>Load</button>
<button type="button" class="btn btn-sm btn-success btnAction" data-action="saveSettings"
disabled>Save</button>
</div>
<div class="col-6 text-end">
<button type="button" class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="collapse"
data-bs-target="#debug">Debug</button>
</div>
</div>
</div>
<!-- // card footer -->
</div>
</div> <!-- main -->
</div>
<div class="col-lg-4">
<div class="mb-3" id="scores">
<div class="card">
<h5 class="card-header">
Last Game / Highscores
</h5>
<div class="card-body">
<div class="row mb-1">
<div class="col col-lg-3 text-end">Games</div>
<div class="col col-lg-8 pt-1">
<div class="progress-stacked">
<div class="progress" role="progressbar" style="width: 0%" id="lastGame">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
</div>
<div class="progress" role="progressbar" style="width: 0%" id="hsGames">
<div class="progress-bar bg-primary"></div>
</div>
</div>
</div>
</div>
<div class="row mb-1">
<div class="col col-lg-3 text-end">Ticks</div>
<div class="col col-lg-8 pt-1">
<div class="progress-stacked">
<div class="progress" role="progressbar" style="width: 0%" id="lastTicks">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
</div>
<div class="progress" role="progressbar" style="width: 0%" id="hsTicks">
<div class="progress-bar bg-primary"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col col-lg-3 text-end">Cells</div>
<div class="col col-lg-8 pt-1">
<div class="progress-stacked">
<div class="progress" role="progressbar" style="width: 0%" id="lastCells">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
</div>
<div class="progress" role="progressbar" style="width: 0%" id="hsCells">
<div class="progress-bar bg-primary"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- scores -->
<div class="collapse" id="debug">
<div class="card">
<h5 class="card-header">
Debug
</h5>
<div class="card-body">
<textarea id="wsMessages" class="form-control mb-2 font-monospace" rows="10" spellcheck="false"></textarea>
<div id="input_div">
<div class="input-group">
<span class="input-group-text">➡️</span>
<input type="text" id="prompt" class="form-control form-control-sm font-monospace">
</div>
</div>
</div>
<div class="card-footer text-body-secondary py-3">
<div class="row">
<div class="col-6">
<button type="button" class="btn btn-sm btn-warning btnConfirm" data-action="reboot" data-title="Reboot"
data-text="reboot?" disabled>Reboot</button>
</div>
<div class="col-6 text-end">
<button type="button" class="btn btn-sm btn-danger btnConfirm" data-action="reset"
data-title="Factory Reset" data-text="erase all highscores and settings?" disabled>Factory
Reset</button>
</div>
</div>
</div>
</div>
</div> <!-- debug -->
</div>
</div>
</div>
<div class="modal fade" id="modalConfirm" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5"></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btnAction" data-action="">Confirm</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/gh/jbloemendal/jquery-simple-websocket@master/dist/jquery.simple.websocket.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5.5.2/dist/iro.min.js"
integrity="sha256-XQju26ya9yEvX99+M2rrLah6xHsjZIGK1LvX/L3RjQ0=" crossorigin="anonymous"></script>
<script>
var colorPicker = new iro.ColorPicker('#colorpicker', {
layout: [
{
component: iro.ui.Wheel,
}
]
});
</script>
<script src="main.js"></script>
</body>
</html>