ut-code · na-trium-144 · May 17, 2025 · May 17, 2025 · May 17, 2025 · May 17, 2025
diff --git a/index.html b/index.html
@@ -4,11 +4,12 @@
 <head>
 	<meta charset="utf-8" />
 	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+	<link href="https://fonts.cdnfonts.com/css/fleftex-mono" rel="stylesheet">
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	%sveltekit.head%
 </head>
 
-<body data-sveltekit-preload-data="hover" style="margin: 0px; overflow: hidden;" data-theme="light">
+<body data-sveltekit-preload-data="hover" style="margin: 0px; overflow: hidden; font-family: 'Fleftex'; font-size: 1.5rem;" data-theme="light">
 	<div style="display: contents">%sveltekit.body%</div>
 </body>
 

diff --git a/src/ui-components/Ability.svelte b/src/ui-components/Ability.svelte
@@ -2,14 +2,12 @@
 import Key from "./Key.svelte";
 type Props = { name: string; key: string; count: number };
 const { name, count, key }: Props = $props();
-let isMacOS: boolean = $state(false);
-$effect(() => {
-  isMacOS = navigator.userAgent.includes("Mac OS X");
-});
 </script>
-<span style="color: {count > 0 ? "black" : "gray"};">
-  <Key key={isMacOS ? "⌘+" + key : "Ctrl+" + key} enabled={count > 0} />
-  <span style="font-size: 1.5rem;">{name}</span>
-  <span style="font-size: 1.5rem;">✕</span>
-  <span style="font-size: 2rem; margin-right: 1rem;">{isFinite(count) ? count : "∞"}</span>
+<span style="margin-right: 1rem; display: flex; align-items: end; color: {count > 0 ? "black" : "gray"};">
+  <Key withCtrl key={key} enabled={count > 0} />
+  <span style="margin-left:0.5rem; margin-right: 0.5rem;">{name}</span>
+  {#if isFinite(count)}
+    <span style="margin-right: 0.5rem; ">x</span>
+    <span style="">{count}</span>
+  {/if}
 </span>
diff --git a/src/ui-components/Game.svelte b/src/ui-components/Game.svelte
@@ -71,14 +71,15 @@ onDestroy(() => bindings.destroy());
   <GameOverMenu gameover={uiContext.gameover} reset={() => bindings.reset()} />
   <div
     class="uiBackground"
-    style="position: fixed; left: 0; top: 0; right: 0; display: flex; align-items: baseline;"
+    style="position: fixed; left: 0; top: 0; right: 0; display: flex; align-items: end; "
   >
-    <span style="font-size: 2rem; margin-right:0.5rem;">Stage:</span>
-    <span style="font-size: 2.5rem; margin-right: 1.5rem;">{stageNum}</span>
+    <!-- align-items: baseline does not work for Fleftex font -->
+    <span style="margin-right:0.5rem;">Stage:</span>
+    <span style="margin-right: 1.5rem;">{stageNum}</span>
     <Key key="Esc" enabled />
-    <span style="font-size: 1.5rem; margin-left: 0.5rem;">to pause</span>
+    <span style="margin-left: 0.5rem;">to pause</span>
     <span style="flex-grow: 1"></span>
-    <span style="font-size: 1.5rem;">Clipboard:</span>
+    <span style="">Clipboard:</span>
     <div class="inventory">
       {#if uiContext.inventory !== null}
         <!-- todo: tint 0xff0000 をする必要があるが、そもそもこの画像は仮なのか本当に赤色にするのか -->
@@ -91,16 +92,16 @@ onDestroy(() => bindings.destroy());
         />
       {/if}
     </div>
-    <span style="font-size: 1.5rem;">✕</span>
-    <span style="font-size: 2rem;"
-      >{uiContext.inventoryIsInfinite ? "∞" : "1"}</span
-    >
+    {#if !uiContext.inventoryIsInfinite}
+      <span style="">x</span>
+      <span style="">1</span>
+    {/if}
   </div>
   <div
     class="uiBackground"
-    style="position: fixed; left: 0; bottom: 0; right: 0; display: flex; align-items: baseline;"
+    style="position: fixed; left: 0; bottom: 0; right: 0; display: flex; align-items: end;"
   >
-    <span style="font-size: 1.5rem; margin-right: 1rem;">Abilities:</span>
+    <span style="margin-right: 1rem;">Abilities:</span>
     <Ability key="C" name="Copy" count={uiContext.copy} />
     <Ability key="X" name="Cut" count={uiContext.cut} />
     <Ability key="V" name="Paste" count={uiContext.paste} />

diff --git a/src/ui-components/Key.svelte b/src/ui-components/Key.svelte
@@ -1,15 +1,27 @@
 <script lang="ts">
-type Props = { key: string; enabled: boolean };
-const { key, enabled }: Props = $props();
+type Props = { key: string; enabled: boolean; withCtrl?: boolean };
+const { key, enabled, withCtrl }: Props = $props();
+let isMacOS: boolean = $state(false);
+$effect(() => {
+  isMacOS = navigator.userAgent.includes("Mac OS X");
+});
 </script>
-<span class="key" style="border-color: {enabled ? "black" : "gray"}; background: {enabled ? "white" : "lightgray"};">
-  {key}
+
+<span
+  class="key"
+  style="border-color: {enabled ? 'black' : 'gray'}; background: {enabled
+    ? 'white'
+    : 'lightgray'};"
+>
+  {(withCtrl ? (isMacOS ? "⌘+" : "Ctrl+") : "") + key}
 </span>
+
 <style>
-  .key{
+  .key {
     display: inline-block;
-    font-size: 1rem;
-    padding: 0.3rem;
+    font-family: system-ui;
+    font-size: 1.2rem;
+    padding: 0.2rem 0.3rem;
     border-style: solid;
     border-width: 0.2rem;
     border-radius: 0.3rem;

diff --git a/src/ui-components/menu/GameOverMenu.svelte b/src/ui-components/menu/GameOverMenu.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+import Key from "../Key.svelte";
 import "./menu.css";
 
 type Props = {
@@ -21,8 +22,11 @@ document.addEventListener("keydown", (ev) => {
 
 <dialog bind:this={el} class="modal">
   <div class="modal-box flex flex-col gap-1">
-    <h1 class="text-4xl text-center mt-6 mb-2">Game Over</h1>
-    <p class="text-xl text-center text-gray-500 mb-4">ctrl+Z で戻る</p>
+    <h1 class="text-center mt-6 mb-2">Game Over</h1>
+    <p class="text-center text-gray-500 mb-2 flex flex-row justify-center items-end ">   
+      <span class="mr-2 ">Back with</span>
+      <Key key="Z" withCtrl enabled />
+    </p>
     <button
       class="btn modal-btn"
       onclick={() => {

diff --git a/src/ui-components/menu/GoalMenu.svelte b/src/ui-components/menu/GoalMenu.svelte
@@ -30,7 +30,7 @@ onDestroy(() => {
 
 <dialog bind:this={el} class="modal">
   <div class="modal-box flex flex-col gap-1">
-    <h1 class="text-4xl text-center my-6">Goal!</h1>
+    <h1 class="text-center my-6">Goal!</h1>
     <a class="btn modal-btn" href={nextStageUrl}> Next Stage </a>
     <button
       class="btn modal-btn"

diff --git a/src/ui-components/menu/PauseMenu.svelte b/src/ui-components/menu/PauseMenu.svelte
@@ -28,7 +28,7 @@ document.addEventListener("keydown", (ev) => {
 
 <dialog bind:this={el} onclose={onresume} class="modal">
   <div class="modal-box flex flex-col gap-1">
-    <h1 class="text-4xl text-center my-6">Paused</h1>
+    <h1 class="text-center my-6">Paused</h1>
     <form method="dialog" class="w-full">
       <button class="btn modal-btn" type="submit">Resume</button>
     </form>

diff --git a/src/ui-components/menu/menu.css b/src/ui-components/menu/menu.css
@@ -1,9 +1,10 @@
 .modal-btn {
   width: 100%;
   margin-top: 0.5rem;
-  font-size: 1.5rem;
-  padding: 0.5rem;
+  padding: 0.4rem 0 0; /* Fleftexフォント側で文字が上に寄っているので */
   border-radius: 0.5rem;
+  font-size: inherit;
+  height: max-content;
 }
 .modal-box {
   background: oklch(82.8% 0.189 84.429 / 40%);