diff --git a/apps/client/src/scenes/lobby/LobbyScene.tsx b/apps/client/src/scenes/lobby/LobbyScene.tsx index 07e67b9..8dee19c 100644 --- a/apps/client/src/scenes/lobby/LobbyScene.tsx +++ b/apps/client/src/scenes/lobby/LobbyScene.tsx @@ -36,6 +36,15 @@ teamAssignmentMode: TeamAssignmentMode; }; +/** プレイヤーリストの並び順 */ +type PlayerSortKey = "join" | "team" | "name"; + +const PLAYER_SORT_OPTIONS_BASE: Array<{ value: PlayerSortKey; label: string; teamOnly?: boolean }> = [ + { value: "join", label: "入った順" }, + { value: "team", label: "チーム順", teamOnly: true }, + { value: "name", label: "名前順" }, +]; + const TEAM_COLOR_LABELS = ["赤チーム", "青チーム", "緑チーム", "黄チーム"] as const; /** チームIDを色名ラベルに変換する */ @@ -137,6 +146,32 @@ const [isRuleModalOpen, setIsRuleModalOpen] = useState(false); const [isStartConfirmVisible, setIsStartConfirmVisible] = useState(false); const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); + const [playerSortKey, setPlayerSortKey] = useState("join"); + + const isPlayerSelect = room.teamAssignmentMode === "player_select"; + + // チーム選択モードでないときは「チーム順」を選択肢から除外し,選択中ならリセットする + const playerSortOptions = useMemo( + () => PLAYER_SORT_OPTIONS_BASE.filter((o) => !o.teamOnly || isPlayerSelect), + [isPlayerSelect], + ); + useEffect(() => { + if (!isPlayerSelect && playerSortKey === "team") { + setPlayerSortKey("join"); + } + }, [isPlayerSelect, playerSortKey]); + + // ソート済みプレイヤーリスト + const sortedPlayers = useMemo(() => { + if (playerSortKey === "join") return room.players; + const sorted = [...room.players]; + if (playerSortKey === "team") { + sorted.sort((a, b) => (a.preferredTeamId ?? Infinity) - (b.preferredTeamId ?? Infinity)); + } else { + sorted.sort((a, b) => a.name.localeCompare(b.name)); + } + return sorted; + }, [room.players, playerSortKey]); useEffect(() => { setGameSettings((prev) => { @@ -267,8 +302,8 @@ @@ -311,8 +346,8 @@ @@ -323,19 +358,42 @@ {/* 右半分: 参加プレイヤーリスト */}
-

- 参加プレイヤー ({room.players.length}/{room.maxPlayers}) -

+
+

+ 参加プレイヤー ({room.players.length}/{room.maxPlayers}) +

+ +
    - {room.players.map((p: domain.room.RoomMember) => ( + {sortedPlayers.map((p: domain.room.RoomMember) => (
  • {p.id === myId ? "🟢" : "⚪"} - + {p.name} {p.isOwner && 👑} - {room.teamAssignmentMode === "player_select" && ( - + {isPlayerSelect && ( + {p.preferredTeamId !== null ? toTeamLabel(p.preferredTeamId) : "ランダム"} )}