diff --git a/src/app.css b/src/app.css index ebdbacb..bc38585 100644 --- a/src/app.css +++ b/src/app.css @@ -6,13 +6,3 @@ body { @apply bg-platinum-900 dark:bg-rich_black-500; @apply text-rich_black-500 dark:text-platinum-900; } - -@layer components { - .global-container-bg { - @apply bg-platinum-600 dark:bg-glaucous-100; - } - - .global-subcontainer-bg { - @apply bg-platinum-800 dark:bg-glaucous-200; - } -} diff --git a/src/lib/components/Board/Board.svelte b/src/lib/components/Board/Board.svelte index 7aa806f..265a1cc 100644 --- a/src/lib/components/Board/Board.svelte +++ b/src/lib/components/Board/Board.svelte @@ -8,6 +8,7 @@ export let boardSize: BoardSize; export let playerCount: PlayerCount; export let boardHint: boolean; + export let focusColor: string; const words = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''); let boardData: HTMLInputElement[][] = Array.from(Array(boardSize), () => @@ -125,6 +126,7 @@ (focusedInputIndex = event.detail)} on:fieldUnfocus={() => setTimeout(() => (focusedInputIndex = null), 200)} on:keyPress={(event) => handleKeyPress(event.detail.event, event.detail.row, event.detail.column)} diff --git a/src/lib/components/Board/BoardView.svelte b/src/lib/components/Board/BoardView.svelte index c0d0366..1eb9601 100644 --- a/src/lib/components/Board/BoardView.svelte +++ b/src/lib/components/Board/BoardView.svelte @@ -1,6 +1,7 @@ -
+
{#each boardData as row, rowIndex}
{#each row as columnField, columnIndex} @@ -56,9 +57,13 @@ @apply text-center cursor-pointer caret-transparent; @apply text-xl large:text-2xl; - @apply rounded-md; + @apply rounded-md outline-none; color: var(--color); @apply focus-visible:bg-platinum-700 dark:focus-visible:bg-glaucous-200; } + + .input:focus { + outline-color: var(--focusColor); + } diff --git a/src/lib/components/Interaction/Interaction.svelte b/src/lib/components/Interaction/Interaction.svelte index b6a649a..c8b824b 100644 --- a/src/lib/components/Interaction/Interaction.svelte +++ b/src/lib/components/Interaction/Interaction.svelte @@ -1,17 +1,18 @@ @@ -19,7 +20,7 @@
{#each 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('') as value} - + {/each}
@@ -29,11 +30,10 @@ player={playersList[score.playerId]} myTurn={playersList[score.playerId] == currentPlayer} playerScore={score} - on:onPlayerClick={() => - dispatch('showPlayerScoreDetails', { - player: playersList[score.playerId], - score: score - })} + on:onPlayerClick={() => { + playerDetailsDialogData = { player: playersList[score.playerId], score: score }; + playerDetailsDialog.showModal(); + }} /> {/each}
@@ -54,6 +54,12 @@
+ + diff --git a/src/lib/components/PlayerScoreChip.svelte b/src/lib/components/Player/PlayerScoreChip.svelte similarity index 100% rename from src/lib/components/PlayerScoreChip.svelte rename to src/lib/components/Player/PlayerScoreChip.svelte diff --git a/src/lib/components/Preference/PreferenceDialog.svelte b/src/lib/components/Preference/PreferenceDialog.svelte index d745691..cef2d43 100644 --- a/src/lib/components/Preference/PreferenceDialog.svelte +++ b/src/lib/components/Preference/PreferenceDialog.svelte @@ -11,7 +11,7 @@
Preferences -
diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte new file mode 100644 index 0000000..4ee8dc2 --- /dev/null +++ b/src/lib/components/Spinner.svelte @@ -0,0 +1,23 @@ + + +
+ +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2e511e0..2972e4c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,5 +1,13 @@ - +{#if $navigating} +
+ +
+{:else} + +{/if} diff --git a/src/routes/game/+page.svelte b/src/routes/game/+page.svelte index 32c0bb8..c684696 100644 --- a/src/routes/game/+page.svelte +++ b/src/routes/game/+page.svelte @@ -82,6 +82,7 @@ {boardSize} {playerCount} {boardHint} + focusColor={currentPlayer.color} on:playerSubmit={handlePlayerSubmit} on:gameOver={handleGameOver} /> @@ -93,11 +94,9 @@ {}} on:preferenceClicked={() => preferenceDialog.showModal()} />
diff --git a/src/routes/game/+page.ts b/src/routes/game/+page.ts index 0e9b848..58e06e8 100644 --- a/src/routes/game/+page.ts +++ b/src/routes/game/+page.ts @@ -5,7 +5,7 @@ import type { PageLoad } from './$types'; export const load = (async ({ url }) => { return { board: (parseInt(url.searchParams.get('board')!) || 10) as BoardSize, - players: (parseInt(url.searchParams.get('players')!) || 4) as PlayerCount, + players: (parseInt(url.searchParams.get('players')!) || 4) as PlayerCount, //todoo limit err colors: url.searchParams.get('colors')?.split(','), names: url.searchParams.get('names')?.split(',') } satisfies GameParameter; diff --git a/tailwind.config.js b/tailwind.config.js index 870676b..44049e4 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -48,5 +48,35 @@ export default { } } }, - plugins: [] + plugins: [ + ({ addComponents, theme }) => { + addComponents({ + '.global-container-bg': { + backgroundColor: theme('colors.platinum.600'), + '@media (prefers-color-scheme: dark)': { + backgroundColor: theme('colors.glaucous.100') + } + }, + '.global-subcontainer-bg': { + backgroundColor: theme('colors.platinum.800'), + '@media (prefers-color-scheme: dark)': { + backgroundColor: theme('colors.glaucous.200') + } + }, + + '.global-field': { + '@apply global-subcontainer-bg': {}, + '@apply my-1': {} + }, + '.global-field:first-child': { + 'border-top-left-radius': '0.75rem', + 'border-top-right-radius': '0.75rem' + }, + '.global-field:last-child ': { + 'border-bottom-left-radius': ' 0.75rem', + 'border-bottom-right-radius': '0.75rem' + } + }); + } + ] };