add settings
This commit is contained in:
parent
ad397eb1ae
commit
fadfd21352
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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() {
|
||||||
|
|
Loading…
Reference in New Issue