workadventure/front/src/Components/Menu/SettingsSubMenu.svelte

<script lang="typescript">
import {localUserStore} from "../../Connexion/LocalUserStore";
import {videoConstraintStore} from "../../Stores/MediaStore";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
import {isMobile} from "../../Enum/EnvironmentVariable";

let fullscreen : boolean = localUserStore.getFullscreen();
let notification : boolean = localUserStore.getNotification() === 'granted';
let valueGame : number = localUserStore.getGameQualityValue();
let valueVideo : number = localUserStore.getVideoQualityValue();
let previewValueGame = valueGame;
let previewValueVideo =  valueVideo;

function saveSetting(){
    if (valueGame !== previewValueGame) {
        previewValueGame = valueGame;
        localUserStore.setGameQualityValue(valueGame);
        window.location.reload();
    }

    if (valueVideo !== previewValueVideo) {
        previewValueVideo = valueVideo;
        videoConstraintStore.setFrameRate(valueVideo);
    }
}

function changeFullscreen() {
    const body = HtmlUtils.querySelectorOrFail('body');
    if (body) {
        if (document.fullscreenElement !== null && !fullscreen) {
            document.exitFullscreen()
        } else {
            body.requestFullscreen();
        }
        localUserStore.setFullscreen(fullscreen);
    }
}

function changeNotification() {
    if (Notification.permission === 'granted') {
        localUserStore.setNotification(notification ? 'granted' : 'denied');
    } else {
        Notification.requestPermission().then((response) => {
            if (response === 'granted') {
                localUserStore.setNotification(notification ? 'granted' : 'denied');
            } else {
                localUserStore.setNotification('denied');
                notification = false;
            }
        })
    }
}
</script>

<div class="settings-main" on:submit|preventDefault={saveSetting}>
    <section>
        <h3>Game quality</h3>
        <div class="nes-select is-dark">
            <select bind:value={valueGame}>
                <option value="{120}">{isMobile() ? 'High (120 fps)' : 'High video quality (120 fps)'}</option>
                <option value="{60}">{isMobile() ? 'Medium (60 fps)' : 'Medium video quality (60 fps, recommended)'}</option>
                <option value="{40}">{isMobile() ? 'Minimum (40 fps)' : 'Minimum video quality (40 fps)'}</option>
                <option value="{20}">{isMobile() ? 'Small (20 fps)' : 'Small video quality (20 fps)'}</option>
            </select>
        </div>
    </section>
    <section>
        <h3>Video quality</h3>
        <div class="nes-select is-dark">
            <select bind:value={valueVideo}>
                <option value="{30}">{isMobile() ? 'High (30 fps)' : 'High video quality (30 fps)'}</option>
                <option value="{20}">{isMobile() ? 'Medium (20 fps)' : 'Medium video quality (20 fps, recommended)'}</option>
                <option value="{10}">{isMobile() ? 'Minimum (10 fps)' : 'Minimum video quality (10 fps)'}</option>
                <option value="{5}">{isMobile() ? 'Small (5 fps)' : 'Small video quality (5 fps)'}</option>
            </select>
        </div>
    </section>
    <section class="settings-section-save">
        <p>(Saving these settings will restart the game)</p>
        <button type="button" class="nes-btn is-primary" on:click|preventDefault={saveSetting}>Save</button>
    </section>
    <section class="settings-section-noSaveOption">
        <label>
            <input type="checkbox" class="nes-checkbox is-dark" bind:checked={fullscreen} on:change={changeFullscreen}/>
            <span>Fullscreen</span>
        </label>
        <label>
            <input type="checkbox" class="nes-checkbox is-dark" bind:checked={notification} on:change={changeNotification}>
            <span>Notifications</span>
        </label>
    </section>
</div>

<style lang="scss">
  div.settings-main {
    height: calc(100% - 40px);

    section {
      width: 100%;
      padding: 20px 20px 0;
      margin-bottom: 20px;
      text-align: center;

      div.nes-select select:focus {
        outline: none;
      }
    }
    section.settings-section-save {
      text-align: center;
      p {
        margin: 16px 0;
      }
    }
    section.settings-section-noSaveOption {
      --nb-noSaveOptions: 2; //number of sub-element in the section
      display: grid;
      grid-template-columns: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element

      label {
        text-align: center;
        width: 100%;
        margin: 0;
      }
    }
  }

  @media only screen and (max-width: 800px), only screen and (max-height: 800px) {
    div.settings-main {
      section {
        padding: 0;
      }

      section.settings-section-noSaveOption {
        height: 80px;
        grid-template-columns: none;
        grid-template-rows: calc(100% / var(--nb-noSaveOptions)) calc(100% / var(--nb-noSaveOptions)); //Same size for every sub-element;
      }
    }
  }
</style>