Skip to content

Commit c5b27f4

Browse files
drcrazydrcrazy
committed
Center the game field
1 parent a8aaecf commit c5b27f4

4 files changed

Lines changed: 101 additions & 77 deletions

File tree

‎artifacts/game-client/src/apps/adepts-game-2/pages/Home.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -125,34 +125,42 @@ export default function Home() {
125125
</div>
126126
</header>
127127

128-
<div className="flex flex-1 min-h-0">
129-
<ChatPanel className="w-[15%] flex-shrink-0 m-2" />
130-
131-
<main className="flex-1 min-h-0 py-3">
132-
<QuizBoard
133-
board={2}
134-
themes={state.themes}
135-
questions={state.questions}
136-
onUpdateTheme={updateThemeName}
137-
onQuestionClick={handleQuestionClick}
138-
readonly={!canOpenCards}
139-
blockTurnPlayerFromPlayedOrFaceDownCells={blockTurnPlayerFromPlayedOrFaceDownCells}
140-
hoverCell={state.quizBoardHoverCell ?? null}
141-
canSyncBoardHover={canOpenCards}
142-
onBoardHoverCellChange={setQuizBoardHoverCell}
143-
/>
128+
<div className="grid min-h-0 flex-1 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
129+
<aside className="flex min-h-0 min-w-0 flex-col p-2">
130+
<ChatPanel className="min-h-0 w-full flex-1" />
131+
</aside>
132+
<main className="flex min-h-0 min-w-0 flex-col py-3">
133+
<div className="mx-auto h-full w-full max-w-7xl min-h-0 px-2">
134+
<QuizBoard
135+
board={2}
136+
themes={state.themes}
137+
questions={state.questions}
138+
onUpdateTheme={updateThemeName}
139+
onQuestionClick={handleQuestionClick}
140+
readonly={!canOpenCards}
141+
blockTurnPlayerFromPlayedOrFaceDownCells={blockTurnPlayerFromPlayedOrFaceDownCells}
142+
hoverCell={state.quizBoardHoverCell ?? null}
143+
canSyncBoardHover={canOpenCards}
144+
onBoardHoverCellChange={setQuizBoardHoverCell}
145+
/>
146+
</div>
144147
</main>
148+
<div className="min-h-0 min-w-0" aria-hidden="true" />
145149
</div>
146150

147-
<div className="flex-shrink-0 w-full">
148-
<Scoreboard
149-
players={state.players}
150-
onUpdateName={updatePlayerName}
151-
onUpdateScore={updatePlayerScore}
152-
onResetScores={resetScores}
153-
readonly={!isHost}
154-
currentTurnSeat={state.currentTurnSeat}
155-
/>
151+
<div className="grid shrink-0 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
152+
<div className="min-w-0" aria-hidden="true" />
153+
<div className="min-w-0">
154+
<Scoreboard
155+
players={state.players}
156+
onUpdateName={updatePlayerName}
157+
onUpdateScore={updatePlayerScore}
158+
onResetScores={resetScores}
159+
readonly={!isHost}
160+
currentTurnSeat={state.currentTurnSeat}
161+
/>
162+
</div>
163+
<div className="min-w-0" aria-hidden="true" />
156164
</div>
157165

158166
{openCard && (

‎artifacts/game-client/src/apps/adepts-game-3/pages/Home.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -125,34 +125,42 @@ export default function Home() {
125125
</div>
126126
</header>
127127

128-
<div className="flex flex-1 min-h-0">
129-
<ChatPanel className="w-[15%] flex-shrink-0 m-2" />
130-
131-
<main className="flex-1 min-h-0 py-3">
132-
<QuizBoard
133-
board={3}
134-
themes={state.themes}
135-
questions={state.questions}
136-
onUpdateTheme={updateThemeName}
137-
onQuestionClick={handleQuestionClick}
138-
readonly={!canOpenCards}
139-
blockTurnPlayerFromPlayedOrFaceDownCells={blockTurnPlayerFromPlayedOrFaceDownCells}
140-
hoverCell={state.quizBoardHoverCell ?? null}
141-
canSyncBoardHover={canOpenCards}
142-
onBoardHoverCellChange={setQuizBoardHoverCell}
143-
/>
128+
<div className="grid min-h-0 flex-1 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
129+
<aside className="flex min-h-0 min-w-0 flex-col p-2">
130+
<ChatPanel className="min-h-0 w-full flex-1" />
131+
</aside>
132+
<main className="flex min-h-0 min-w-0 flex-col py-3">
133+
<div className="mx-auto h-full w-full max-w-7xl min-h-0 px-2">
134+
<QuizBoard
135+
board={3}
136+
themes={state.themes}
137+
questions={state.questions}
138+
onUpdateTheme={updateThemeName}
139+
onQuestionClick={handleQuestionClick}
140+
readonly={!canOpenCards}
141+
blockTurnPlayerFromPlayedOrFaceDownCells={blockTurnPlayerFromPlayedOrFaceDownCells}
142+
hoverCell={state.quizBoardHoverCell ?? null}
143+
canSyncBoardHover={canOpenCards}
144+
onBoardHoverCellChange={setQuizBoardHoverCell}
145+
/>
146+
</div>
144147
</main>
148+
<div className="min-h-0 min-w-0" aria-hidden="true" />
145149
</div>
146150

147-
<div className="flex-shrink-0 w-full">
148-
<Scoreboard
149-
players={state.players}
150-
onUpdateName={updatePlayerName}
151-
onUpdateScore={updatePlayerScore}
152-
onResetScores={resetScores}
153-
readonly={!isHost}
154-
currentTurnSeat={state.currentTurnSeat}
155-
/>
151+
<div className="grid shrink-0 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
152+
<div className="min-w-0" aria-hidden="true" />
153+
<div className="min-w-0">
154+
<Scoreboard
155+
players={state.players}
156+
onUpdateName={updatePlayerName}
157+
onUpdateScore={updatePlayerScore}
158+
onResetScores={resetScores}
159+
readonly={!isHost}
160+
currentTurnSeat={state.currentTurnSeat}
161+
/>
162+
</div>
163+
<div className="min-w-0" aria-hidden="true" />
156164
</div>
157165

158166
{openCard && (

‎artifacts/game-client/src/apps/adepts-game/pages/Home.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -125,34 +125,42 @@ export default function Home() {
125125
</div>
126126
</header>
127127

128-
<div className="flex flex-1 min-h-0">
129-
<ChatPanel className="w-[15%] flex-shrink-0 m-2" />
130-
131-
<main className="flex-1 min-h-0 py-3">
132-
<QuizBoard
133-
board={1}
134-
themes={state.themes}
135-
questions={state.questions}
136-
onUpdateTheme={updateThemeName}
137-
onQuestionClick={handleQuestionClick}
138-
readonly={!canOpenCards}
139-
blockTurnPlayerFromPlayedOrFaceDownCells={blockTurnPlayerFromPlayedOrFaceDownCells}
140-
hoverCell={state.quizBoardHoverCell ?? null}
141-
canSyncBoardHover={canOpenCards}
142-
onBoardHoverCellChange={setQuizBoardHoverCell}
143-
/>
128+
<div className="grid min-h-0 flex-1 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
129+
<aside className="flex min-h-0 min-w-0 flex-col p-2">
130+
<ChatPanel className="min-h-0 w-full flex-1" />
131+
</aside>
132+
<main className="flex min-h-0 min-w-0 flex-col py-3">
133+
<div className="mx-auto h-full w-full max-w-7xl min-h-0 px-2">
134+
<QuizBoard
135+
board={1}
136+
themes={state.themes}
137+
questions={state.questions}
138+
onUpdateTheme={updateThemeName}
139+
onQuestionClick={handleQuestionClick}
140+
readonly={!canOpenCards}
141+
blockTurnPlayerFromPlayedOrFaceDownCells={blockTurnPlayerFromPlayedOrFaceDownCells}
142+
hoverCell={state.quizBoardHoverCell ?? null}
143+
canSyncBoardHover={canOpenCards}
144+
onBoardHoverCellChange={setQuizBoardHoverCell}
145+
/>
146+
</div>
144147
</main>
148+
<div className="min-h-0 min-w-0" aria-hidden="true" />
145149
</div>
146150

147-
<div className="flex-shrink-0 w-full">
148-
<Scoreboard
149-
players={state.players}
150-
onUpdateName={updatePlayerName}
151-
onUpdateScore={updatePlayerScore}
152-
onResetScores={resetScores}
153-
readonly={!isHost}
154-
currentTurnSeat={state.currentTurnSeat}
155-
/>
151+
<div className="grid shrink-0 grid-cols-[minmax(0,15%)_minmax(0,1fr)_minmax(0,15%)]">
152+
<div className="min-w-0" aria-hidden="true" />
153+
<div className="min-w-0">
154+
<Scoreboard
155+
players={state.players}
156+
onUpdateName={updatePlayerName}
157+
onUpdateScore={updatePlayerScore}
158+
onResetScores={resetScores}
159+
readonly={!isHost}
160+
currentTurnSeat={state.currentTurnSeat}
161+
/>
162+
</div>
163+
<div className="min-w-0" aria-hidden="true" />
156164
</div>
157165

158166
{openCard && (

‎artifacts/game-client/src/lib/adepts-scoreboard/Scoreboard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,8 +274,8 @@ export function Scoreboard({
274274
</div>
275275
)}
276276

277-
<div className="overflow-x-auto pb-0.5">
278-
<div className="mx-auto grid min-w-[528px] max-w-[1080px] grid-cols-5 gap-1.5 md:gap-2 lg:gap-2.5">
277+
<div className="flex justify-center overflow-x-auto pb-0.5">
278+
<div className="mx-auto grid w-full min-w-[528px] max-w-[1080px] grid-cols-5 gap-1.5 md:gap-2 lg:gap-2.5">
279279
{players.map((player, index) => {
280280
const theme = ADEPTS_SLOT_THEMES[index] ?? ADEPTS_SLOT_THEMES[0]!;
281281
const accent = theme.hsl;

0 commit comments

Comments
 (0)