add settings

src/App.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
     import Game from './Game.svelte';
+    import Settings from './Settings.svelte';
     import Shield from './icon/Shield.svelte';
 
-    import { areScriptsAllowed } from './lib/scriptinterface';
+    import { areScriptsAllowed, addScriptAllowedHook } from './lib/scriptinterface';
+
+    let currentInterface: 'game' | 'settings' = 'game';
+    let scriptEnabled = areScriptsAllowed();
+    addScriptAllowedHook(() => {
+        scriptEnabled = true;
+    })
 </script>
 
 <main>
@@ -18,6 +25,16 @@
         <a href='https://git.blek.codes/blek/wordle'>
             Source Code
         </a>
+        <a href='javascript:' on:click={() => {currentInterface = currentInterface == 'settings' ? 'game' : 'settings'}}>
+            {currentInterface == 'settings' ? 'Go back' : 'Settings'}
+        </a>
     </p>
-    <Game />
+
+    {#if currentInterface == 'game'}
+        <Game />
+    {/if}
+
+    {#if currentInterface == 'settings'}
+        <Settings />
+    {/if}
 </main>

src/Settings.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import Switch from "./Switch.svelte";
+    import { allowScripts, areScriptsAllowed } from "./lib/scriptinterface";
+
+    let scriptsAllowed = areScriptsAllowed();
+    function scriptAllow() {
+        scriptsAllowed = true;
+        allowScripts();
+    }
+    
+</script>
+
+<div class='openwordle-settings-menu'>
+    <h3>Game settings</h3>
+
+    <ul>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+        <li on:click={scriptAllow}>
+            Allow scripts
+            <span style='margin-left:4px;transform:translateY(1px);display:inline-block'>
+                <Switch checked={scriptsAllowed} disabled={scriptsAllowed} />
+            </span>
+        </li>
+        <li style='margin-top:6px;font-size:9pt'>
+            Warning: when allowing scripts,
+            you will not be able to turn them
+            back on without refreshing the tab!
+        </li>
+    </ul>
+</div>
+
+<style>
+    .openwordle-settings-menu ul {
+        padding-left: 0;
+        text-align: left;
+    }
+    .openwordle-settings-menu li {
+        list-style: none;
+    }
+</style>

src/Switch.svelte

@@ -0,0 +1,66 @@
+<script>
+    export let checked = false;
+    export let color = "#2196F3";
+    export let disabled = false;
+  </script>
+  
+  <style>
+    .openwordle-switch {
+      position: relative;
+      display: inline-block;
+      width: 50px;
+      height: 24px;
+
+    }
+  
+    .openwordle-switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+    }
+  
+    .openwordle-slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+      border-radius: 24px;
+    }
+  
+    .openwordle-slider:before {
+      position: absolute;
+      content: "";
+      height: 16px;
+      width: 16px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+      border-radius: 50%;
+    }
+  
+    input:checked + .openwordle-slider {
+      background-color: #2196f3;
+    }
+  
+    input:checked + .openwordle-slider {
+      box-shadow: 0 0 1px #2196f3;
+    }
+  
+    input:checked + .openwordle-slider:before {
+      -webkit-transform: translateX(26px);
+      -ms-transform: translateX(26px);
+      transform: translateX(26px);
+    }
+  </style>
+  
+  <label class="openwordle-switch">
+    <input type="checkbox" bind:checked {disabled} />
+    <span class="openwordle-slider" />
+  </label>

src/lib/scriptinterface.ts

@@ -1,10 +1,23 @@
 import { random } from "./random";
 import { encode, decode } from "./cipher";
 
+let allowHooks: {(): void}[] = [];
+
+export function addScriptAllowedHook(hook: {(): void}) {
+    allowHooks.push(hook)
+}
+
 let scriptsAllowed = false;
 
 export function allowScripts() {
+    if (scriptsAllowed) return;
+
+    console.warn('Scripts are now allowed');
+
     scriptsAllowed = true;
+    for (const hook of allowHooks) {
+        hook();
+    }
 }
 
 export function areScriptsAllowed() {

src/vite-env.d.ts

@@ -3,9 +3,9 @@
 
 import type { ScriptInterface } from "./lib/scriptinterface";
 
-const TARGETS: string;
 declare module 'qr-creator';
 
 declare global {
     var ScriptInterface: ScriptInterface;
+    var TARGETS: string;
 }