Add settings UI, song time, accuracy, mistakes

This commit is contained in:
Isaiah Billingsley
2026-03-05 17:03:19 -05:00
parent 0d22d036f7
commit e3b376b9a8
10 changed files with 331 additions and 62 deletions
+26 -1
View File
@@ -8,7 +8,7 @@
<body>
<div class="row">
<img id="coverImg" src="images/unknown.svg">
<div class="column">
<div id="mapInfo">
<div class="row">
<span id="title">Title</span>
<span id="subTitle">Subtitle</span>
@@ -26,6 +26,31 @@
</div>
</div>
</div>
<div class="row">
<div id="time">1:23 / 4:56</div>
<div id="score">
<span id="accuracy">96.9</span>
<span id="mistakes">7</span>
</div>
</div>
<dialog id="settings">
<strong>Settings</strong>
<label>Show cover: <input id="coverInput" type="checkbox"></label>
<label>Show map info: <input id="mapInfoInput" type="checkbox"></label>
<label>Show time: <input id="timeInput" type="checkbox"></label>
<label>Show score: <input id="scoreInput" type="checkbox"></label>
<label>Position: <select id="positionInput">
<option value="[false,false]">Top left</option>
<option value="[true,false]">Top right</option>
<option value="[false,true]">Bottom left</option>
<option value="[true,true]">Bottom right</option>
</select></label>
<label>Scale (%): <input id="scaleInput" type="number" min="10" max="1000" step="5"></label>
<label>Fade (ms): <input id="fadeInput" type="number" min="0" max="5000" step="10"></label>
<br>
<strong>About</strong>
<a href="https://github.com/ibillingsley/BeatSaber-Overlay" target="_blank">Source code</a>
</dialog>
<script src="index.js"></script>
</body>
</html>