Merge pull request #51 from kc3hack/fix

uiを修正

Author: taiseiue

apps/web/src/components/animations/SlidingGhost.tsx

@@ -28,6 +28,13 @@ const ghostContainerClass = css`
     bottom: 16px;
   }
 
+  @media (max-width: 600px) {
+    &.mobile-middle {
+      bottom: clamp(9.5rem, 29vh, 14rem);
+      transform: translateX(50%) scale(0.43);
+    }
+  }
+
   &.is-entering {
     animation: ${slideInFromRight} 1.2s cubic-bezier(0.22, 0.9, 0.22, 1) both;
   }
@@ -39,12 +46,12 @@ const ghostContainerClass = css`
   }
 
   &.is-entering-left {
-    animation: ${slideInFromLeft} 1.2s cubic-bezier(0.22, 0.9, 0.22, 1) both;
+    animation: ${slideInFromLeft} 3.2s cubic-bezier(0.22, 0.9, 0.22, 1) both;
   }
 
   @media (max-width: 600px) {
     &.is-entering-left {
-      animation: ${slideInFromLeftMobile} 1.2s cubic-bezier(0.22, 0.9, 0.22, 1) both;
+      animation: ${slideInFromLeftMobile} 3.2s cubic-bezier(0.22, 0.9, 0.22, 1) both;
     }
   }
 
@@ -57,6 +64,10 @@ const ghostContainerClass = css`
     }
   }
 
+  &.is-moving.is-moving-slow {
+    transition-duration: 3.4s;
+  }
+
   &.is-sleeping {
     pointer-events: none;
   }
@@ -81,11 +92,11 @@ const ghostContainerClass = css`
     opacity: 1;
   }
 
-  &.is-moving .ghost-eye {
+  &.is-moving.use-wake-eye .ghost-eye {
     opacity: 0;
   }
 
-  &.is-moving .wake-eye {
+  &.is-moving.use-wake-eye .wake-eye {
     opacity: 1;
   }
 
@@ -273,6 +284,9 @@ type Props = {
   showNotes?: boolean;
   enteringFromRight?: boolean;
   enteringFromLeft?: boolean;
+  wakeEyesOnMove?: boolean;
+  slowMove?: boolean;
+  mobilePlacement?: "bottom" | "button";
 };
 
 export const SlidingGhost = ({
@@ -281,12 +295,17 @@ export const SlidingGhost = ({
   showNotes = false,
   enteringFromRight = false,
   enteringFromLeft = false,
+  wakeEyesOnMove = true,
+  slowMove = false,
+  mobilePlacement = "bottom",
 }: Props) => {
   const bodyId = "sliding-ghost-body";
   const isInteractive = !isMoving && !isSleeping;
   const className = `${ghostContainerClass} ${isMoving ? "is-moving" : ""} ${isSleeping ? "is-sleeping" : ""} ${
     enteringFromRight ? "is-entering" : ""
-  } ${enteringFromLeft ? "is-entering-left" : ""}`;
+  } ${enteringFromLeft ? "is-entering-left" : ""} ${wakeEyesOnMove ? "use-wake-eye" : ""} ${
+    slowMove ? "is-moving-slow" : ""
+  } ${mobilePlacement === "button" ? "mobile-middle" : ""}`;
 
   return (
     <div class={className}>

apps/web/src/components/animations/TransferHandoverScene.tsx

@@ -144,7 +144,7 @@ const handoverClass = css`
   .green-ghost {
     left: -48%;
     transform: scale(0.44);
-    transition: left 1.55s cubic-bezier(0.2, 0.9, 0.22, 1);
+    transition: left 2.9s cubic-bezier(0.2, 0.9, 0.22, 1);
   }
 
   .orange-ghost {
@@ -168,31 +168,31 @@ const handoverClass = css`
   }
 
   &.is-active .orange-ghost {
-    animation: ${orangeArrival} 1.05s cubic-bezier(0.24, 1, 0.38, 1) forwards;
+    animation: ${orangeArrival} 2.3s cubic-bezier(0.24, 1, 0.38, 1) forwards;
   }
 
   &.is-active .green-arm-left {
     transform: rotate(-73deg) translate(10px, 22px);
-    transition-delay: 1.68s;
+    transition-delay: 3.15s;
   }
 
   &.is-active .orange-arm-right {
     transform: rotate(58deg) translate(16px, -10px);
-    transition-delay: 2.05s;
+    transition-delay: 4.45s;
   }
 
   &.is-active .orange-arm-left {
     transform: rotate(-58deg) translate(-16px, -10px);
-    transition-delay: 2.05s;
+    transition-delay: 4.45s;
   }
 
   &.is-active .letter-item {
-    animation: ${letterAppear} 0.65s cubic-bezier(0.24, 1, 0.38, 1) 1.95s forwards;
+    animation: ${letterAppear} 1.05s cubic-bezier(0.24, 1, 0.38, 1) 3.75s forwards;
   }
 
   &.is-active .orange-ghost .cheek {
     opacity: 0.78;
-    transition-delay: 2.14s;
+    transition-delay: 4.6s;
   }
 
   @media (max-width: 600px) {

apps/web/src/components/button/FileSelectArea.tsx

@@ -16,10 +16,11 @@ const containerStyles = css`
 
   /* モバイル対応：さらにコンパクトに */
   @media (max-width: 600px) {
-    max-width: 280px;   /* 横幅を絞る */
-    padding: 1.2rem 1rem;
-    gap: 0.5rem;
-    border-width: 4px;  /* 枠線を少し細く */
+    width: min(94vw, 21rem);
+    max-width: 21rem;
+    padding: 1.45rem 1.1rem;
+    gap: 0.65rem;
+    border-width: 4px;
   }
 `;
 
@@ -41,8 +42,8 @@ const dropZoneStyles = css`
   box-sizing: border-box;
 
   @media (max-width: 600px) {
-    padding: 1.5rem 0.5rem;
-    font-size: 1rem;    /* 文字を小さく */
+    padding: 1.7rem 0.7rem;
+    font-size: 1.08rem;
   }
 
   &:hover {
@@ -67,7 +68,7 @@ export const FileSelectArea = ({ onSelect }: Props) => {
 
       <span style="color: #fff; font-weight: bold; font-size: 1.1rem;">または</span>
 
-      <div style="width: 100%; display: flex; justify-content: center; transform: scale(0.8);">
+      <div style="width: 100%; display: flex; justify-content: center; transform: scale(0.8);" class="file-select-btn">
         <GreenButton text="ファイルを選択" onClick={onSelect} />
       </div>
     </div>

apps/web/src/components/button/PinInputBlock.tsx

@@ -15,8 +15,9 @@ const containerStyles = css`
   margin: 0 auto;
 
   @media (max-width: 600px) {
-    max-width: 300px;
-    padding: 1.5rem 1rem;
+    width: min(95vw, 22.4rem);
+    max-width: 22.4rem;
+    padding: 1.65rem 1.15rem;
     border-width: 4px;
   }
 `;
@@ -34,8 +35,13 @@ const titleStyles = css`
 
 const pinContainerStyles = css`
   display: flex;
+  width: 100%;
   gap: 0.5rem;
   justify-content: center;
+
+  @media (max-width: 600px) {
+    gap: 0.38rem;
+  }
 `;
 
 const pinInputStyles = css`
@@ -58,9 +64,9 @@ const pinInputStyles = css`
   }
 
   @media (max-width: 600px) {
-    width: 2.2rem;
-    height: 3rem;
-    font-size: 1.5rem;
+    width: 2.28rem;
+    height: 3.18rem;
+    font-size: 1.45rem;
   }
 `;
 
@@ -102,6 +108,10 @@ const helperTextStyles = css`
   line-height: 1.65;
   text-align: center;
   white-space: pre-line;
+
+  @media (max-width: 600px) {
+    font-size: 0.98rem;
+  }
 `;
 
 const PIN_INPUT_KEYS = ["pin-1", "pin-2", "pin-3", "pin-4", "pin-5", "pin-6"] as const;

apps/web/src/components/button/ReceiveButton.tsx

@@ -23,6 +23,12 @@ export const ReceiveButton = ({ onClick }: Props) => {
 
     &:hover { transform: scale(1.1); }
     &:active { transform: scale(0.95); }
+
+    @media (max-width: 600px) {
+      margin-top: 1.05rem;
+      font-size: 1.68rem;
+      padding: 0.55rem 0.9rem;
+    }
   `;
 
   return (

apps/web/src/components/button/SendBackButton.tsx

@@ -24,6 +24,12 @@ export const SendBackButton = ({ onClick }: Props) => {
 
     &:hover { transform: scale(1.1); }
     &:active { transform: scale(0.95); }
+
+    @media (max-width: 600px) {
+      margin-top: 1.05rem;
+      font-size: 1.65rem;
+      padding: 0.55rem 0.9rem;
+    }
   `;
 
   return (

apps/web/src/hooks/useFileSenderConnection.ts

@@ -23,6 +23,7 @@ export const useFileSenderConnection = () => {
   const [errorMessage, setErrorMessage] = useState("");
   const [shortcode, setShortcode] = useState("");
   const [receiverJoinMethod, setReceiverJoinMethod] = useState<ReceiverJoinMethod>("unknown");
+  const [receiverConfirmedByOk, setReceiverConfirmedByOk] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -57,6 +58,7 @@ export const useFileSenderConnection = () => {
     setErrorMessage("");
     setLastSentFile("");
     setReceiverJoinMethod("unknown");
+    setReceiverConfirmedByOk(false);
 
     signaling.on("connected", () => {
       setStateIfActive(() => setWsStatus("connected"));
@@ -160,6 +162,11 @@ export const useFileSenderConnection = () => {
         const joinMethod = payload.joinMethod;
         if (payload.type === "receiver-join-meta" && (joinMethod === "qr" || joinMethod === "code")) {
           setStateIfActive(() => setReceiverJoinMethod(joinMethod));
+          return;
+        }
+
+        if (payload.type === "receiver-ok") {
+          setStateIfActive(() => setReceiverConfirmedByOk(true));
         }
       } catch {
         // 送信ファイルのメッセージ以外は無視する
@@ -235,6 +242,7 @@ export const useFileSenderConnection = () => {
       setShortcode(payload.shortcode);
       setErrorMessage("");
       setReceiverJoinMethod("unknown");
+      setReceiverConfirmedByOk(false);
 
       // モーダルを開く
       setUrl(uri);
@@ -261,6 +269,7 @@ export const useFileSenderConnection = () => {
     fileInputRef,
     shortcode,
     receiverJoinMethod,
+    receiverConfirmedByOk,
     toggleOpen,
     closeModal,
     handleCreateRoom,

apps/web/src/hooks/useWebRTCConnection.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "hono/jsx";
+import { useEffect, useRef, useState } from "hono/jsx";
 import { fetchTurnIceServer, getSignalUrl } from "@/lib/realtime/client-utils";
 import { FileReceiver } from "@/lib/realtime/file-transfer";
 import { PeerConnectionManager } from "@/lib/realtime/peer-connection";
@@ -28,6 +28,7 @@ export const useWebRTCConnection = (roomId: string, entryMethod: ReceiverEntryMe
   const [receiveProgress, setReceiveProgress] = useState("0 / 0 bytes");
   const [lastReceivedFile, setLastReceivedFile] = useState("");
   const [errorMessage, setErrorMessage] = useState("");
+  const dataChannelRef = useRef<RTCDataChannel | null>(null);
 
   useEffect(() => {
     let isDisposed = false;
@@ -126,6 +127,7 @@ export const useWebRTCConnection = (roomId: string, entryMethod: ReceiverEntryMe
         setPeerStatus("connected");
         setDataChannelStatus("open");
       });
+      dataChannelRef.current = channel;
 
       if (!hasSharedEntryMeta && channel.readyState === "open") {
         hasSharedEntryMeta = true;
@@ -146,13 +148,15 @@ export const useWebRTCConnection = (roomId: string, entryMethod: ReceiverEntryMe
       setStateIfActive(() => {
         setDataChannelStatus("closed");
       });
+      dataChannelRef.current = null;
     });
 
     peerManager.on("disconnected", () => {
       setStateIfActive(() => {
         resetPeerState();
         setPeerStatus("disconnected");
       });
+      dataChannelRef.current = null;
     });
 
     peerManager.on("datachannel-message", (data) => {
@@ -185,11 +189,26 @@ export const useWebRTCConnection = (roomId: string, entryMethod: ReceiverEntryMe
 
     return () => {
       isDisposed = true;
+      dataChannelRef.current = null;
       signaling.disconnect();
       peerManager.cleanup();
     };
   }, [roomId, entryMethod]);
 
+  const sendControlMessage = (payload: { type: string; [key: string]: unknown }): boolean => {
+    const channel = dataChannelRef.current;
+    if (!channel || channel.readyState !== "open") {
+      return false;
+    }
+
+    try {
+      channel.send(JSON.stringify(payload));
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
   return {
     wsStatus,
     peerStatus,
@@ -198,5 +217,6 @@ export const useWebRTCConnection = (roomId: string, entryMethod: ReceiverEntryMe
     receiveProgress,
     lastReceivedFile,
     errorMessage,
+    sendControlMessage,
   };
 };