modalの表示修正

Author: na-trium-144

src/ui-components/Ability.svelte

@@ -2,13 +2,9 @@
 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="margin-right: 1rem; display: flex; align-items: end; color: {count > 0 ? "black" : "gray"};">
-  <Key key={isMacOS ? "⌘+" + key : "Ctrl+" + key} enabled={count > 0} />
+  <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>

src/ui-components/Key.svelte

@@ -1,12 +1,23 @@
 <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-family: system-ui;
     font-size: 1rem;

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={() => {

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"

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>

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.6rem 0 0; /* Fleftexフォント側で文字が上に寄っているので */
   border-radius: 0.5rem;
+  font-size: inherit;
+  height: max-content;
 }
 .modal-box {
   background: oklch(82.8% 0.189 84.429 / 40%);