PaintBomb

diff --git a/apps/client/index.html b/apps/client/index.html index b3bc7d0..70bb78b 100644 --- a/apps/client/index.html +++ b/apps/client/index.html @@ -5,15 +5,15 @@ - + - PaintBomb + PixelPaintWar

diff --git a/apps/client/src/index.css b/apps/client/src/index.css index 4e690a0..7aa4ad3 100644 --- a/apps/client/src/index.css +++ b/apps/client/src/index.css @@ -27,13 +27,6 @@ touch-action: none; } -#app { - /* safe-area-inset対応：ノッチ・ホームバー領域へのはみ出しを防止 */ - padding-top: env(safe-area-inset-top); - padding-bottom: env(safe-area-inset-bottom); - padding-left: env(safe-area-inset-left); - padding-right: env(safe-area-inset-right); -} a { font-weight: 500; diff --git a/apps/client/src/scenes/game/GameView.tsx b/apps/client/src/scenes/game/GameView.tsx index 55e51a6..2045cb6 100644 --- a/apps/client/src/scenes/game/GameView.tsx +++ b/apps/client/src/scenes/game/GameView.tsx @@ -5,7 +5,7 @@ */ import { GameInputOverlay } from "./input/GameInputOverlay"; import { - GAME_VIEW_BOMB_HIT_DEBUG_STYLE, + GAME_VIEW_HP_GAUGE_STYLE, GAME_VIEW_FEVER_TEXT_STYLE, GAME_VIEW_HURRICANE_WARNING_STYLE, GAME_VIEW_PIXI_LAYER_STYLE, @@ -85,7 +85,7 @@ {/* タイマーUIの表示 */} -

HP: {heartGauge}

+

HP: {heartGauge}

- {/* 🌟🌟 追加：背景のWebPアニメーション 🌟🌟 */} -

+ {/* 背景アニメーション */} +

-

+

-

+

ルーム: {room.roomId} (待機中)

{/* 左半分: スタートボタン or 待機メッセージ */} -

-

+

+

{isMeOwner ? ( -

- +

+ ゲーム人数 - + フィールドサイズ -

) : ( -

-

+

+

ホストの開始を待っています...

@@ -359,49 +220,15 @@

{/* 右半分: 参加プレイヤーリスト */} -

-

+
+
参加プレイヤー ({room.players.length}/{room.maxPlayers})
-
+
{room.players.map((p: domain.room.RoomMember) => ( -
+
{p.id === myId ? "🟢" : "⚪"} - + {p.name} {p.isOwner && 👑} @@ -419,9 +246,7 @@ {isRuleModalOpen && ( { - setIsRuleModalOpen(false); - }} + onClose={() => { setIsRuleModalOpen(false); }} /> )} diff --git a/apps/client/src/scenes/lobby/styles/LobbyScene.styles.ts b/apps/client/src/scenes/lobby/styles/LobbyScene.styles.ts new file mode 100644 index 0000000..8763dc3 --- /dev/null +++ b/apps/client/src/scenes/lobby/styles/LobbyScene.styles.ts @@ -0,0 +1,156 @@ +/** + * LobbyScene.styles + * LobbyScene の描画スタイル定数を集約する + */ +import type { CSSProperties } from "react"; +import { safeLeft, safeTop } from "@client/styles/safeArea"; + +/** 背景アニメーション画像レイヤーのスタイル */ +export const LOBBY_BACKGROUND_STYLE: CSSProperties = { + position: "fixed", + top: 0, + left: 0, + width: "100vw", + height: "100dvh", + backgroundImage: "url('/LobbyAni2.webp')", + backgroundSize: "cover", + backgroundPosition: "center", + zIndex: 0, + pointerEvents: "none", + filter: "brightness(0.4)", +}; + +/** メインコンテナのスタイル */ +export const LOBBY_CONTAINER_STYLE: CSSProperties = { + position: "fixed", + inset: 0, + padding: "20px", + color: "white", + background: "transparent", + height: "100dvh", + width: "100vw", + overflowX: "hidden", + overflowY: "auto", + WebkitOverflowScrolling: "touch", + touchAction: "pan-y", + display: "flex", + flexDirection: "column", + alignItems: "center", + zIndex: 1, +}; + +/** タイトルへ戻るボタンのスタイル */ +export const LOBBY_BACK_BUTTON_STYLE: CSSProperties = { + position: "absolute", + top: safeTop(20), + left: safeLeft(20), +}; + +/** ルームタイトルのスタイル */ +export const LOBBY_TITLE_STYLE: CSSProperties = { + fontSize: "clamp(1.5rem, 4vw, 2rem)", + margin: "0 0 15px 0", + textShadow: "2px 2px 4px rgba(0,0,0,0.8)", +}; + +/** 左パネルのスタイル */ +export const LOBBY_LEFT_PANEL_STYLE: CSSProperties = { + flex: 1, + minWidth: 0, + display: "flex", + flexDirection: "column", + padding: "4px 10px 10px", +}; + +/** 左パネル内コントロール群ラッパーのスタイル */ +export const LOBBY_LEFT_INNER_STYLE: CSSProperties = { + width: "100%", + flexGrow: 1, + display: "flex", + alignItems: "flex-start", + justifyContent: "flex-start", + paddingTop: "2px", +}; + +/** オーナー・非オーナー共通のコントロールブロックのスタイル */ +export const LOBBY_CONTROLS_BLOCK_STYLE: CSSProperties = { + width: "100%", + maxWidth: "350px", + display: "flex", + flexDirection: "column", + gap: "12px", +}; + +/** セレクトラベルのスタイル */ +export const LOBBY_LABEL_STYLE: CSSProperties = { + fontSize: "0.95rem", + fontWeight: 700, + textShadow: "1px 1px 2px rgba(0,0,0,0.7)", +}; + +/** セレクトボックスのスタイル */ +export const LOBBY_SELECT_STYLE: CSSProperties = { + width: "100%", + padding: "10px 12px", + borderRadius: "8px", + border: "1px solid rgba(255,255,255,0.4)", + background: "rgba(0,0,0,0.55)", + color: "white", + fontSize: "1rem", + fontWeight: 700, +}; + +/** ゲームスタートボタンのスタイル */ +export const LOBBY_START_BUTTON_STYLE: CSSProperties = { + width: "100%", + padding: "20px", + fontSize: "clamp(1.2rem, 3vw, 1.8rem)", + cursor: "pointer", + backgroundColor: "#4ade80", + color: "#111", + border: "none", + borderRadius: "8px", + fontWeight: "bold", + boxShadow: "0 4px 6px rgba(0,0,0,0.3)", +}; + +/** 非オーナー待機表示のスタイル */ +export const LOBBY_WAITING_STYLE: CSSProperties = { + padding: "20px", + fontSize: "clamp(1.2rem, 3vw, 1.5rem)", + backgroundColor: "#555", + color: "#ccc", + borderRadius: "8px", + textAlign: "center", + boxShadow: "0 4px 6px rgba(0,0,0,0.3)", +}; + +/** 右パネル（プレイヤーリスト）のスタイル */ +export const LOBBY_PLAYER_LIST_PANEL_STYLE: CSSProperties = { + flex: 1, + minWidth: 0, + background: "rgba(0, 0, 0, 0.6)", + padding: "20px", + borderRadius: "8px", + display: "flex", + flexDirection: "column", + minHeight: 0, + boxShadow: "0 4px 6px rgba(0,0,0,0.3)", + border: "1px solid rgba(255, 255, 255, 0.1)", +}; + +/** プレイヤーリストヘッダーのスタイル */ +export const LOBBY_PLAYER_LIST_HEADER_STYLE: CSSProperties = { + borderBottom: "1px solid #555", + paddingBottom: "10px", + margin: "0 0 10px 0", + fontSize: "clamp(1rem, 3vw, 1.2rem)", +}; + +/** プレイヤーリスト1行のスタイル */ +export const LOBBY_PLAYER_LIST_ITEM_STYLE: CSSProperties = { + margin: "10px 0", + display: "flex", + alignItems: "center", + gap: "10px", +}; diff --git a/apps/client/src/scenes/result/styles/resultStyles.ts b/apps/client/src/scenes/result/styles/resultStyles.ts index f2b86a4..f584eb2 100644 --- a/apps/client/src/scenes/result/styles/resultStyles.ts +++ b/apps/client/src/scenes/result/styles/resultStyles.ts @@ -30,7 +30,7 @@ boxSizing: "border-box", overscrollBehaviorX: "none", overscrollBehaviorY: "none", - touchAction: "pan-y", + touchAction: "none", }; /** 結果発表タイトルのスタイル */ @@ -143,6 +143,7 @@ overflowY: "auto", overscrollBehaviorY: "contain", WebkitOverflowScrolling: "touch", + touchAction: "pan-y", }; /** 順位表ヘッダー行のスタイル */ @@ -276,6 +277,7 @@ overflowY: "auto", overscrollBehaviorY: "contain", WebkitOverflowScrolling: "touch", + touchAction: "pan-y", }; /** プレイヤースタッツ数値セルのスタイル */ @@ -355,6 +357,7 @@ overflowY: "auto", overscrollBehaviorY: "contain", WebkitOverflowScrolling: "touch", + touchAction: "pan-y", }; /** プレイヤーランキング数値セルのスタイル */ diff --git a/apps/client/src/scenes/title/TitleScene.tsx b/apps/client/src/scenes/title/TitleScene.tsx index 2f7d0b6..d261437 100644 --- a/apps/client/src/scenes/title/TitleScene.tsx +++ b/apps/client/src/scenes/title/TitleScene.tsx @@ -56,8 +56,6 @@ style={{ position: "fixed", inset: 0, - width: "100vw", - height: "100lvh", overflow: "hidden", backgroundImage: "url('/title.png')", backgroundSize: "cover", diff --git a/apps/client/src/styles/safeArea.ts b/apps/client/src/styles/safeArea.ts new file mode 100644 index 0000000..55dbc5e --- /dev/null +++ b/apps/client/src/styles/safeArea.ts @@ -0,0 +1,20 @@ +/** + * safeArea + * safe-area-inset を考慮したCSSオフセット値生成ユーティリティ + */ + +/** 右端オフセットにsafe-area-inset-rightを加算した値を返す */ +export const safeRight = (px: number): string => + `max(${px}px, calc(${px}px + env(safe-area-inset-right)))` + +/** 左端オフセットにsafe-area-inset-leftを加算した値を返す */ +export const safeLeft = (px: number): string => + `max(${px}px, calc(${px}px + env(safe-area-inset-left)))` + +/** 上端オフセットにsafe-area-inset-topを加算した値を返す */ +export const safeTop = (px: number): string => + `max(${px}px, calc(${px}px + env(safe-area-inset-top)))` + +/** 下端オフセットにsafe-area-inset-bottomを加算した値を返す / +export const safeBottom = (px: number): string => + `max(${px}px, calc(${px}px + env(safe-area-inset-bottom)))` diff --git a/apps/client/vite.config.ts b/apps/client/vite.config.ts index ff30192..5e5cdfd 100644 --- a/apps/client/vite.config.ts +++ b/apps/client/vite.config.ts @@ -14,13 +14,28 @@ VitePWA({ registerType: 'autoUpdate', workbox: { + // SPAとして index.html へフォールバックさせる + navigateFallback: 'index.html', // Socket.IO の通信をService Workerのキャッシュ対象から除外 navigateFallbackDenylist: [/^\/socket\.io/], - runtimeCaching: [], + runtimeCaching: [ + { + // 画像アセットをキャッシュして初回以降の読み込みを高速化 + urlPattern: /\.(?:png|webp|svg)$/i, + handler: 'CacheFirst', + options: { + cacheName: 'image-assets', + expiration: { + maxEntries: 30, + maxAgeSeconds: 60 60 * 24 * 30, // 30日 + }, + }, + }, + ], }, manifest: { - name: 'PaintBomb', - short_name: 'PaintBomb', + name: 'PixelPaintWar', + short_name: 'PxPaintWar', description: 'リアルタイム対戦ペイントゲーム', theme_color: '#111111', background_color: '#111111',