xcc.es
[READ-ONLY] Mirror of https://github.com/mrgnw/ananas. learn multiple languages at once
ananas.xcc.es
wip debugging example animation with play/pause
author
Morgan
date
(Mar 7, 2025, 2:28 AM +0100)
commit
786c2b4a
786c2b4a35275665ede9fa6182f7fa26cd3518db
parent
8f2756e2
8f2756e21489e9df851876aa3d4b40b546da4218
+65
-11
+56
-10
src/jibs/NewLang.svelte
+56
-10
src/jibs/NewLang.svelte
···
55
55
56
56
// Interval for cycling examples
57
57
let cycleInterval = $state(null);
58
+
// Track if examples are paused or playing
59
+
let examplesPaused = $state(false);
58
60
59
61
// Function to cycle to the next example
60
62
function cycleExamples() {
61
-
console.log('Cycling to next example');
62
-
if (history.length === 0) {
63
+
// Only show examples if not paused and no history
64
+
if (!examplesPaused && history.length === 0) {
63
65
typeLetters(examplePhrases[Math.floor(Math.random() * examplePhrases.length)]);
64
66
}
65
67
}
66
68
67
69
// Handle input focus event from TranslationInput
68
70
function handleInputFocus() {
69
-
console.log('Input focus event received in NewLang');
70
-
71
-
// If currently typing, complete the entire example quickly
71
+
// Pause examples during input focus
72
+
examplesPaused = true;
73
+
74
+
// Clear the cycling interval to prevent new examples
75
+
cycleInterval = clearTimer(cycleInterval);
76
+
77
+
// If currently typing, complete the current example quickly
72
78
if (isTyping && typingInterval) {
73
-
console.log('Completing entire example quickly');
74
-
79
+
console.log('Completing typing animation quickly');
75
80
typingInterval = clearTimer(typingInterval);
81
+
76
82
// Find matching example or use current text
77
83
const targetText = (text && examplePhrases.find((ex) => ex.startsWith(text))) || '';
78
84
if (!targetText) return (isTyping = false);
79
85
80
86
// Type remaining text at 5ms per character
81
87
let i = text.length;
82
-
console.log(`Fast-typing: ${targetText.slice(i)}`);
83
88
84
89
// finish typing quickly (5ms per character)
85
90
typingInterval = setInterval(() => {
···
89
94
i++;
90
95
} else {
91
96
// Once we've completed the entire example, stop typing
92
-
console.log('Finished typing entire example');
93
97
typingInterval = clearTimer(typingInterval);
94
98
isTyping = false;
95
99
}
96
100
}, 5);
101
+
}
102
+
}
103
+
104
+
// Handle input blur event
105
+
function handleInputBlur() {
106
+
// If the user hasn't added text, resume examples
107
+
if (!text && history.length === 0) {
108
+
examplesPaused = false;
109
+
// Resume cycling if not already cycling
110
+
if (!cycleInterval) {
111
+
cycleInterval = setInterval(cycleExamples, 5000);
112
+
}
113
+
}
114
+
}
115
+
116
+
// Toggle play/pause for examples
117
+
function toggleExamples() {
118
+
examplesPaused = !examplesPaused;
119
+
120
+
if (examplesPaused) {
121
+
// Pause examples
122
+
cycleInterval = clearTimer(cycleInterval);
97
123
} else {
98
-
console.log('No typing animation to stop');
124
+
// Resume examples
125
+
if (!cycleInterval && history.length === 0) {
126
+
cycleExamples(); // Show one immediately
127
+
cycleInterval = setInterval(cycleExamples, 5000);
128
+
}
99
129
}
100
130
}
101
131
···
259
289
{handleSubmit}
260
290
needsAttention={history.length === 0}
261
291
onInputFocus={handleInputFocus}
292
+
onInputBlur={handleInputBlur}
262
293
inputClass="px-1 font-medium py-2.5"
263
294
containerClass="desktop-input w-full"
264
295
/>
···
271
302
<div class="flex flex-wrap items-center justify-between gap-2 pb-2">
272
303
<div class="flex items-center gap-3">
273
304
<h2 class="text-xl font-semibold text-gray-800">Review</h2>
305
+
306
+
{#if history.length === 0}
307
+
<!-- Play/Pause button for examples -->
308
+
<button
309
+
class="flex h-7 w-7 items-center justify-center rounded-full text-gray-500 hover:bg-gray-100 hover:text-gray-700"
310
+
onclick={toggleExamples}
311
+
title={examplesPaused ? 'Play examples' : 'Pause examples'}
312
+
>
313
+
{#if examplesPaused}
314
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
315
+
{:else}
316
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
317
+
{/if}
318
+
</button>
319
+
{/if}
274
320
275
321
{#if tgt_langs.length > 0}
276
322
<div class="flex items-center">
+5
-1
src/jibs/TranslationInput.svelte
+5
-1
src/jibs/TranslationInput.svelte
···
8
8
handleSubmit,
9
9
needsAttention = false,
10
10
onInputFocus,
11
+
onInputBlur,
11
12
inputClass = '',
12
13
containerClass = ''
13
14
} = $props();
···
74
75
onkeydown={handleKeyDown}
75
76
onfocus={handleFocus}
76
77
onclick={handleFocus}
77
-
onblur={() => (isInputFocused = false)}
78
+
onblur={() => {
79
+
isInputFocused = false;
80
+
if (typeof onInputBlur === 'function') onInputBlur();
81
+
}}
78
82
/>
79
83
80
84
<button
+4
src/routes/languages/+page.svelte
+4
src/routes/languages/+page.svelte
···
160
160
/>
161
161
</div>
162
162
163
+
<div class="mb-4 text-sm text-gray-600">
164
+
<p>Greyed out languages are not supported by our translation model.</p>
165
+
</div>
166
+
163
167
<div class="overflow-x-auto">
164
168
<table class="w-full border-collapse bg-white">
165
169
<thead class="border-b bg-gray-50">