schmop/zahlzerlegung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vollbild-Knopf im Startbildschirm hinzufügen

Browse Source
This commit is contained in:
schmop 2026-05-31 18:03:21 +02:00
parent 684a430005
commit 07ddd9c91a
2 changed files with 90 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/lib/components/shared/FullscreenToggle.svelte Normal file
View File

@ -0,0 +1,72 @@
<script lang="ts">
// Vollbild umschalten via Fullscreen-API. Wird ausgeblendet, wo die API fehlt (z. B. iPhone-Safari).
const supported =
typeof document !== 'undefined' && typeof document.documentElement.requestFullscreen === 'function';
let isFullscreen = $state(false);
function sync() {
isFullscreen = !!document.fullscreenElement;
}
$effect(() => {
sync();
document.addEventListener('fullscreenchange', sync);
return () => document.removeEventListener('fullscreenchange', sync);
});
function toggle() {
if (document.fullscreenElement) {
document.exitFullscreen?.();
} else {
document.documentElement.requestFullscreen?.().catch(() => {});
}
}
</script>
{#if supported}
<button
class="fs-toggle"
type="button"
aria-label={isFullscreen ? 'Vollbild beenden' : 'Vollbild'}
onclick={toggle}
>
{#if isFullscreen}
<svg width="30" height="30" viewBox="0 0 32 32" aria-hidden="true">
<path
d="M13 4 L13 13 L4 13 M19 4 L19 13 L28 13 M13 28 L13 19 L4 19 M19 28 L19 19 L28 19"
fill="none"
stroke="currentColor"
stroke-width="2.6"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{:else}
<svg width="30" height="30" viewBox="0 0 32 32" aria-hidden="true">
<path
d="M4 11 L4 4 L11 4 M28 11 L28 4 L21 4 M4 21 L4 28 L11 28 M28 21 L28 28 L21 28"
fill="none"
stroke="currentColor"
stroke-width="2.6"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
{/if}
</button>
{/if}
<style>
.fs-toggle {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
color: var(--c-text-on-dark);
display: grid;
place-items: center;
transition: transform 0.12s ease;
}
.fs-toggle:active { transform: scale(0.92); }
</style>

27
src/lib/screens/HomeScreen.svelte
View File

@ -6,6 +6,7 @@
import { play, unlockAudio } from '../audio/soundManager';
import NumberCard from '../components/home/NumberCard.svelte';
import SoundToggle from '../components/shared/SoundToggle.svelte';
import FullscreenToggle from '../components/shared/FullscreenToggle.svelte';
import IconButton from '../components/shared/IconButton.svelte';
function handlePick(t: Target) {
@ -20,15 +21,18 @@
<header class="topbar">
<SoundToggle />
<h1 class="visually-hidden">Zahlzerlegung</h1>
<IconButton label="Einstellungen" onClick={goSettings}>
<svg width="34" height="34" viewBox="0 0 32 32" aria-hidden="true">
<path
d="M14 3 L18 3 L18.6 6.4 L21.5 7.6 L23.9 5.3 L26.7 8.1 L24.4 10.5 L25.6 13.4 L29 14 L29 18 L25.6 18.6 L24.4 21.5 L26.7 23.9 L23.9 26.7 L21.5 24.4 L18.6 25.6 L18 29 L14 29 L13.4 25.6 L10.5 24.4 L8.1 26.7 L5.3 23.9 L7.6 21.5 L6.4 18.6 L3 18 L3 14 L6.4 13.4 L7.6 10.5 L5.3 8.1 L8.1 5.3 L10.5 7.6 L13.4 6.4 Z M16 12 A4 4 0 1 0 16.001 12 Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</IconButton>
<div class="actions">
<FullscreenToggle />
<IconButton label="Einstellungen" onClick={goSettings}>
<svg width="34" height="34" viewBox="0 0 32 32" aria-hidden="true">
<path
d="M14 3 L18 3 L18.6 6.4 L21.5 7.6 L23.9 5.3 L26.7 8.1 L24.4 10.5 L25.6 13.4 L29 14 L29 18 L25.6 18.6 L24.4 21.5 L26.7 23.9 L23.9 26.7 L21.5 24.4 L18.6 25.6 L18 29 L14 29 L13.4 25.6 L10.5 24.4 L8.1 26.7 L5.3 23.9 L7.6 21.5 L6.4 18.6 L3 18 L3 14 L6.4 13.4 L7.6 10.5 L5.3 8.1 L8.1 5.3 L10.5 7.6 L13.4 6.4 Z M16 12 A4 4 0 1 0 16.001 12 Z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
</IconButton>
</div>
</header>
<div class="cards-grid">
@ -51,6 +55,11 @@
justify-content: space-between;
align-items: center;
}
.actions {
display: flex;
gap: 10px;
align-items: center;
}
.visually-hidden {
position: absolute;
width: 1px;