111 lines
3.2 KiB
Svelte
111 lines
3.2 KiB
Svelte
<script lang='ts'>
|
|
import Backspace from "./icon/Backspace.svelte";
|
|
|
|
const keyboard = [
|
|
'QWERTYUIOP'.split(''),
|
|
'ASDFGHJKL'.split(''),
|
|
['Backspace', ...'ZXCVBNM'.split(''), 'Enter']
|
|
]
|
|
|
|
export let green_letters: string[] = [];
|
|
export let yellow_letters: string[] = [];
|
|
export let unfit_letters: string[] = [];
|
|
</script>
|
|
|
|
<div class='openwordle-keyboard'>
|
|
{#each keyboard as line}
|
|
<div class="openwordle-keyboard-line">
|
|
{#each line as key}
|
|
<button
|
|
class={'openwordle-keyboard-btn' + (green_letters.indexOf(key.toLowerCase()) !== -1 ? ' kb-btn-green' : yellow_letters.indexOf(key.toLowerCase()) !== -1 ? ' kb-btn-yellow' : unfit_letters.indexOf(key.toLowerCase()) !== -1 ? ' kb-btn-unfit' : '') }
|
|
on:click={() => {
|
|
document.dispatchEvent(new KeyboardEvent('keydown', { key: key.length == 1 ? key.toLowerCase() : key }))
|
|
}}>
|
|
{#if key == 'Backspace'}
|
|
<Backspace height='16pt' width='60px' />
|
|
{:else}
|
|
{key}
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.openwordle-keyboard .openwordle-keyboard-btn {
|
|
padding: 12px 16px;
|
|
border-radius: 3px;
|
|
margin: 3px;
|
|
background: #666686;
|
|
font-size: 14pt;
|
|
font-weight: 700;
|
|
border: 0;
|
|
width: 100%;
|
|
}
|
|
.openwordle-keyboard .openwordle-keyboard-btn:hover {
|
|
background: #8686a6;
|
|
}
|
|
.openwordle-keyboard .openwordle-keyboard-btn:active {
|
|
background: #565676;
|
|
}
|
|
.openwordle-keyboard .openwordle-keyboard-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 600px;
|
|
height: 56px;
|
|
}
|
|
@media (max-width: 667px) {
|
|
.openwordle-keyboard .openwordle-keyboard-line {
|
|
width: 96vw;
|
|
height: 40px;
|
|
}
|
|
.openwordle-keyboard .openwordle-keyboard-btn {
|
|
font-size: 10pt;
|
|
padding: 0 4px;
|
|
}
|
|
}
|
|
.kb-btn-unfit {
|
|
background: #444454 !important;
|
|
}
|
|
.kb-btn-unfit:hover {
|
|
background: #555565 !important;
|
|
}
|
|
.kb-btn-unfit:active {
|
|
background: #404050;
|
|
}
|
|
|
|
.kb-btn-green {
|
|
background: #66a666 !important;
|
|
}
|
|
.kb-btn-green:hover {
|
|
background: #76b676 !important;
|
|
}
|
|
.kb-btn-green:active {
|
|
background: #469646 !important;
|
|
}
|
|
|
|
.kb-btn-yellow {
|
|
background: #c6a666 !important;
|
|
}
|
|
.kb-btn-yellow:hover {
|
|
background: #d6b676 !important;
|
|
}
|
|
.kb-btn-yellow:active {
|
|
background: #b69656 !important;
|
|
}
|
|
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
.openwordle-keyboard .openwordle-keyboard-btn {
|
|
background: #e1e1e1;
|
|
}
|
|
.openwordle-keyboard .openwordle-keyboard-btn:hover {
|
|
background: #d1d1d1;
|
|
}
|
|
.kb-btn-unfit { background: #b1b1b1 !important; }
|
|
.kb-btn-unfit:hover { background: #bababa !important; }
|
|
.kb-btn-unfit:active { background: #c1c1c1 !important; }
|
|
}
|
|
|
|
</style> |