add settings

This commit is contained in:
blek 2023-09-04 00:12:37 +10:00
parent ad397eb1ae
commit fadfd21352
Signed by: blek
GPG Key ID: 14546221E3595D0C
4 changed files with 139 additions and 2 deletions

View File

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

41
src/Settings.svelte Normal file
View File

@ -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>

66
src/Switch.svelte Normal file
View File

@ -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>

View File

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