fullscreen checkbox

index.html

@@ -79,6 +79,12 @@
                 </select></div>
                 <div class="col-4 d-flex align-items-baseline"><input name="sfxVolumeRange" id="sfxVolumeRange" class="form-range" type="range" min="0" max="1" step="any" value="0.7"></div>
                 <label for="sfxVolumeRange" class="col-2 col-form-label">Volume</label>
+                <div class="inline field">
+                  <div class="ui toggle checkbox">
+                    <input id="fullscreenCheckbox" type="checkbox" tabindex="0" class="hidden">
+                    <label for="fullscreenCheckbox">Plein écran</label>
+                  </div>
+                </div>
               </fieldset>
               <fieldset class="row g-2 mb-3 align-items-center text-center"><legend class="text-start">Partie</legend>
                 <label for="levelInput" class="col-2 col-form-label text-center">Niveau</label>

js/app.js

@@ -13,9 +13,28 @@ window.onload = function(event) {
     selectedStyleSheet.href = stylesheetSelect.value
     favicon = document.querySelector("link[rel~='icon']")
 
+    fullscreenCheckbox.onchange = function() {
+        if (this.checked) {
+            document.documentElement.requestFullscreen()
+        } else {
+            document.exitFullscreen()
+        }
+    }
+
     restart()
 }
 
+document.onfullscreenchange = function() {
+    if (document.fullscreenElement) {
+        fullscreenCheckbox.checked = true
+    } else {
+        fullscreenCheckbox.checked = false
+    }
+}
+document.onfullscreenerror = function() {
+    fullscreenCheckbox.checked = false
+}
+
 function restart() {
     stats.modal.hide()
     holdQueue.init()