Skip to content

Commit 46ae2ff

Browse files
TKHR-ShiuTKHR-Shiu
committed
追加翻訳
1 parent e70cfc9 commit 46ae2ff

1 file changed

Lines changed: 129 additions & 115 deletions

File tree

‎src/routes/+page.svelte‎

Lines changed: 129 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,9 @@
136136
<div class="flex gap-4">
137137
{#each Object.keys(patterns) as (keyof typeof patterns)[] as patternName (patternName)}
138138
<div class="text-center flex-shrink-0">
139-
<p class="font-bold mb-2">{patterns[patternName].names.ja}</p>
139+
<p class="font-bold mb-2">
140+
{japanese ? patterns[patternName].names.ja : patterns[patternName].names.en}
141+
</p>
140142
<button
141143
class="btn overflow-hidden p-0 w-24 h-24"
142144
onclick={() => {
@@ -277,128 +279,140 @@
277279
</div>
278280
</div>
279281

280-
<div class="bg-[#E0E0E0] shadow-sm fixed bottom-0 left-0 right-0 z-50 h-12 p-0 flex items-center">
281-
<button
282-
class="btn rounded-none h-12 justify-start"
283-
onclick={() => (bottomDrawerOpen = !bottomDrawerOpen)}
284-
>
285-
{bottomDrawerOpen ? "▼" : japanese ? "▲ テンプレート" : "▲ Template"}
286-
</button>
287-
288-
<div class="font-bold text-black ml-10">
289-
{japanese ? "第" : "Generation"}
290-
{generationFigure}
291-
{japanese ? "世代" : ""}
282+
<div
283+
class="bg-[#E0E0E0] shadow-sm fixed bottom-0 left-0 right-0 z-50 h-12 p-0 flex items-center px-4"
284+
>
285+
<!-- Left Section -->
286+
<div class="flex items-center">
287+
<button
288+
class="btn rounded-none h-12 justify-start"
289+
onclick={() => (bottomDrawerOpen = !bottomDrawerOpen)}
290+
>
291+
{bottomDrawerOpen ? "▼" : japanese ? "▲ テンプレート" : "▲ Template"}
292+
</button>
293+
294+
<div class="font-bold text-black ml-4">
295+
{japanese ? "第" : "Generation"}
296+
{generationFigure}
297+
{japanese ? "世代" : ""}
298+
</div>
292299
</div>
293300

294-
<button
295-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-20"
296-
onclick={() => {
297-
intervalMs = intervalMs * 2;
298-
sendEvent("timer_change", intervalMs);
299-
}}
300-
>
301-
<img class="size-6" src={icons.decelerate} alt="decelerate" />
302-
</button>
303-
304-
<button
305-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
306-
onclick={() => {
307-
intervalMs = 1000;
308-
sendEvent("timer_change", intervalMs);
309-
}}
310-
>
311-
x1
312-
</button>
313-
314-
<button
315-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] text-black ml-2"
316-
onclick={() => {
317-
intervalMs = intervalMs / 2;
318-
sendEvent("timer_change", intervalMs);
319-
}}
320-
>
321-
<img class="size-6" src={icons.accelerate} alt="accelerate" />
322-
</button>
301+
<!-- Center Section -->
302+
<div class="flex-1 flex justify-center items-center gap-x-2">
303+
<button
304+
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)]"
305+
onclick={() => {
306+
intervalMs = intervalMs * 2;
307+
sendEvent("timer_change", intervalMs);
308+
}}
309+
>
310+
<img class="size-6" src={icons.decelerate} alt="decelerate" />
311+
</button>
312+
313+
<button
314+
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)]"
315+
onclick={() => {
316+
intervalMs = 1000;
317+
sendEvent("timer_change", intervalMs);
318+
}}
319+
>
320+
x1
321+
</button>
322+
323+
<button
324+
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)]"
325+
onclick={() => {
326+
intervalMs = intervalMs / 2;
327+
sendEvent("timer_change", intervalMs);
328+
}}
329+
>
330+
<img class="size-6" src={icons.accelerate} alt="accelerate" />
331+
</button>
323332

324-
<div class="font-bold text-black ml-5">
325-
{japanese ? "現在の速度" : "Current speed"}: x{1000 / intervalMs}
326-
</div>
333+
<div class="font-bold text-black ml-2">
334+
{japanese ? "現在の速度" : "Current speed"}: x{1000 / intervalMs}
335+
</div>
327336

328-
<div
329-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 -ml-15 bottom-1"
330-
>
331-
<img class="size-6" src={icons.LeftArrow} alt="Left Arrow" />
332-
</div>
337+
<div class="w-px bg-gray-400 h-6 mx-4"></div>
338+
<!-- Separator -->
333339

334-
<button
335-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 bottom-1"
336-
onclick={() => {
337-
const eventName = isProgress ? "pause" : "play";
338-
sendEvent(eventName);
339-
isProgress = !isProgress;
340-
}}
341-
>
342-
<input type="checkbox" bind:checked={isProgress} />
343-
<img class="size-6 swap-on" src={icons.Pause} alt="Pause" />
344-
<img class="size-6 swap-off" src={icons.Play} alt="Play" />
345-
</button>
340+
<button class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)]">
341+
<img class="size-6" src={icons.LeftArrow} alt="Left Arrow" />
342+
</button>
346343

347-
<div
348-
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap fixed left-1/2 !-translate-x-1/2 ml-15 bottom-1"
349-
>
350-
<img class="size-6" src={icons.RightArrow} alt="Right Arrow" />
344+
<button
345+
class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap"
346+
onclick={() => {
347+
const eventName = isProgress ? "pause" : "play";
348+
sendEvent(eventName);
349+
isProgress = !isProgress;
350+
}}
351+
>
352+
<input type="checkbox" bind:checked={isProgress} />
353+
<img class="size-6 swap-on" src={icons.Pause} alt="Pause" />
354+
<img class="size-6 swap-off" src={icons.Play} alt="Play" />
355+
</button>
356+
357+
<button class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)]">
358+
<img class="size-6" src={icons.RightArrow} alt="Right Arrow" />
359+
</button>
351360
</div>
352361

353-
<div class="font-bold text-black absolute right-143">{japanese ? "盤面" : "Board"}:</div>
354-
355-
<button
356-
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black fixed right-125 bottom-1"
357-
onclick={() => {
358-
isProgress = false;
359-
sendEvent("save_board");
360-
}}
361-
>
362-
{japanese ? "保存" : "Save"}
363-
</button>
364-
365-
<button
366-
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black fixed right-109 bottom-1"
367-
onclick={() => {
368-
isProgress = false;
369-
sendEvent("pause");
370-
handleLoad();
371-
}}
372-
>
373-
{japanese ? "ロード" : "Load"}
374-
</button>
375-
376-
<button
377-
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black fixed right-92 bottom-1"
378-
onclick={() => {
379-
isProgress = false;
380-
sendEvent("boardreset");
381-
}}
382-
>
383-
{japanese ? "リセット" : "Reset"}
384-
</button>
362+
<!-- Right Section -->
363+
<div class="flex items-center gap-x-2">
364+
<div class="font-bold text-black">{japanese ? "盤面" : "Board"}:</div>
365+
<button
366+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
367+
onclick={() => {
368+
isProgress = false;
369+
sendEvent("save_board");
370+
}}
371+
>
372+
{japanese ? "保存" : "Save"}
373+
</button>
374+
375+
<button
376+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
377+
onclick={() => {
378+
isProgress = false;
379+
sendEvent("pause");
380+
handleLoad();
381+
}}
382+
>
383+
{japanese ? "ロード" : "Load"}
384+
</button>
385+
386+
<button
387+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
388+
onclick={() => {
389+
isProgress = false;
390+
sendEvent("boardreset");
391+
}}
392+
>
393+
{japanese ? "リセット" : "Reset"}
394+
</button>
395+
396+
<button
397+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
398+
onclick={() => {
399+
isProgress = false;
400+
sendEvent("boardrandom");
401+
}}
402+
>
403+
{japanese ? "ランダム" : "Random"}
404+
</button>
385405

386-
<button
387-
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black fixed right-70 bottom-1"
388-
onclick={() => {
389-
isProgress = false;
390-
sendEvent("boardrandom");
391-
}}
392-
>
393-
{japanese ? "ランダム" : "Random"}
394-
</button>
406+
<div class="w-px bg-gray-400 h-6 mx-2"></div>
407+
<!-- Separator -->
395408

396-
<button
397-
class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-5 text-black fixed right-20 bottom-1"
398-
onclick={() => {
399-
appliedCode = editingcode;
400-
}}
401-
>
402-
{japanese ? "コードを適用" : "Apply Code"}
403-
</button>
409+
<button
410+
class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
411+
onclick={() => {
412+
appliedCode = editingcode;
413+
}}
414+
>
415+
{japanese ? "コードを適用" : "Apply Code"}
416+
</button>
417+
</div>
404418
</div>

0 commit comments

Comments
 (0)