a2nr
/
elemes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove reset button, move auto save indicator in velxio

master
a2nr 2026-04-15 20:03:36 +07:00
parent 998472f996
commit 65c12bc716
2 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/lib/components/CrosshairOverlay.svelte
View File

@ -27,7 +27,8 @@
const LONG_PRESS_MS = 400;
const DOUBLE_TAP_MS = 300;
const HOLDING_TIMEOUT_MS = 5000;
const CURSOR_OFFSET_Y = -(parseInt(env.PUBLIC_CURSOR_OFFSET_Y || '50', 10));
const BASE_OFFSET_Y = -(parseInt(env.PUBLIC_CURSOR_OFFSET_Y || '50', 10));
let currentOffset = $derived(isTouchDevice ? BASE_OFFSET_Y : 0);
/**
* State machine:
@ -46,12 +47,18 @@
$effect(() => {
if (typeof window === 'undefined') return;
const mql = window.matchMedia('(hover: none) and (pointer: coarse)');
isTouchDevice = mql.matches;
const handler = (e: MediaQueryListEvent) => {
isTouchDevice = e.matches;
const checkTouch = () => {
isTouchDevice = mql.matches && window.innerWidth < 768;
};
checkTouch();
mql.addEventListener('change', checkTouch);
window.addEventListener('resize', checkTouch);
return () => {
mql.removeEventListener('change', checkTouch);
window.removeEventListener('resize', checkTouch);
};
mql.addEventListener('change', handler);
return () => mql.removeEventListener('change', handler);
});
function getIframeTarget(x: number, y: number): Element | null {
@ -142,7 +149,7 @@
if (!overlayEl) return;
const rect = overlayEl.getBoundingClientRect();
crosshairX = viewportX - rect.left;
crosshairY = viewportY - rect.top + CURSOR_OFFSET_Y;
crosshairY = viewportY - rect.top + currentOffset;
}
function getCrosshairViewport(): { x: number; y: number } {

29
frontend/src/routes/lesson/[slug]/+page.svelte
View File

@ -101,7 +101,7 @@
// Auto-save Velxio state periodically
$effect(() => {
if (velxioReady && auth.isLoggedIn && !showSolution) {
if (velxioReady && $authLoggedIn && !showSolution) {
const interval = setInterval(() => {
const state = getVelxioState();
if (!state) return;
@ -921,9 +921,7 @@
Hubungi guru jika masalah berlanjut.
</div>
{:else}
<div class="velxio-toolbar">
<button type="button" class="btn btn-secondary btn-sm" onclick={handleReset}>Reset</button>
{#if auth.isLoggedIn}
{#if $authLoggedIn}
<div class="storage-indicator-inline" title={velxioSaving ? "Menyimpan draf..." : "Draf tersimpan di browser"}>
<span class="indicator-icon" class:saving={velxioSaving}>
{velxioSaving ? '●' : '☁'}
@ -931,7 +929,6 @@
<span class="indicator-text">Auto-save</span>
</div>
{/if}
</div>
<!-- svelte-ignore a11y_missing_attribute -->
<iframe
class="velxio-iframe"
@ -1243,22 +1240,23 @@
}
/* ── Velxio (Arduino simulator) ─────────────────────── */
.velxio-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.5rem;
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.storage-indicator-inline {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.7rem;
font-size: 0.75rem;
color: var(--color-text-muted);
background: var(--color-bg-secondary);
padding: 3px 10px;
border-radius: 12px;
border: 1px solid var(--color-border);
position: absolute;
bottom: 1rem;
right: 1.5rem;
z-index: 10;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
pointer-events: none;
margin-left: auto;
opacity: 0.8;
}
.storage-indicator-inline .indicator-icon {
line-height: 1;
@ -1278,6 +1276,7 @@
flex-direction: column;
flex: 1;
min-height: 0;
position: relative;
}
.velxio-panel.tab-hidden {
display: none;