minie4/HexDeck
1
0
Fork 0
mirror of https://github.com/HexCardGames/HexDeck.git synced 2025-09-05 11:18:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: add svelte support to prettier and format svelte components

Browse Source
This commit is contained in:
minie4
2025-03-07 11:17:12 +01:00
parent 540c70216c
commit 5f1404c7d7
14 changed files with 157 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/.prettierrc.json
View File

@ -4,5 +4,7 @@
"trailingComma": "es5", "trailingComma": "es5",
"printWidth": 200, "printWidth": 200,
"bracketSpacing": true, "bracketSpacing": true,
"arrowParens": "always" "arrowParens": "always",
"plugins": ["prettier-plugin-svelte"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
} }

12
frontend/package-lock.json generated
View File

@ -25,6 +25,7 @@
"flowbite-svelte": "^0.48.4", "flowbite-svelte": "^0.48.4",
"flowbite-svelte-icons": "^2.0.2", "flowbite-svelte-icons": "^2.0.2",
"prettier": "3.5.3", "prettier": "3.5.3",
"prettier-plugin-svelte": "^3.3.3",
"sass-embedded": "^1.85.1", "sass-embedded": "^1.85.1",
"svelte": "^5.22.5", "svelte": "^5.22.5",
"svelte-check": "^4.1.4", "svelte-check": "^4.1.4",
@ -3600,6 +3601,17 @@
"url": "https://github.com/prettier/prettier?sponsor=1" "url": "https://github.com/prettier/prettier?sponsor=1"
} }
}, },
"node_modules/prettier-plugin-svelte": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.3.3.tgz",
"integrity": "sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"prettier": "^3.0.0",
"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
}
},
"node_modules/prompts": { "node_modules/prompts": {
"version": "2.4.2", "version": "2.4.2",
"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz", "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",

1
frontend/package.json
View File

@ -18,6 +18,7 @@
"flowbite-svelte": "^0.48.4", "flowbite-svelte": "^0.48.4",
"flowbite-svelte-icons": "^2.0.2", "flowbite-svelte-icons": "^2.0.2",
"prettier": "3.5.3", "prettier": "3.5.3",
"prettier-plugin-svelte": "^3.3.3",
"sass-embedded": "^1.85.1", "sass-embedded": "^1.85.1",
"svelte": "^5.22.5", "svelte": "^5.22.5",
"svelte-check": "^4.1.4", "svelte-check": "^4.1.4",

14
frontend/src/App.svelte
View File

@ -1,13 +1,13 @@
<script context="module"> <script context="module">
import { Router, createRouter } from "@roxi/routify"; import { Router, createRouter } from "@roxi/routify";
import routes from "../.routify/routes.default.js"; import routes from "../.routify/routes.default.js";
import MetaTitle from "./components/meta-title.svelte"; import MetaTitle from "./components/meta-title.svelte";
export const router = createRouter({ routes }); export const router = createRouter({ routes });
router.ready().then(() => { router.ready().then(() => {
console.log("Routify router is ready!"); console.log("Routify router is ready!");
}); });
</script> </script>
<MetaTitle /> <MetaTitle />

57
frontend/src/components/ConnectRoom.svelte
View File

@ -1,12 +1,6 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { import { Button, Spinner, InputAddon, ButtonGroup, Helper } from "flowbite-svelte";
Button,
Spinner,
InputAddon,
ButtonGroup,
Helper,
} from "flowbite-svelte";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { loading, join_error, create_error, rejoinRoomCode, rejoinRoomSessionData, requestJoinRoom, requestCreateRoom, joinSession, checkSessionData } from "../stores/roomStore"; import { loading, join_error, create_error, rejoinRoomCode, rejoinRoomSessionData, requestJoinRoom, requestCreateRoom, joinSession, checkSessionData } from "../stores/roomStore";
@ -21,9 +15,7 @@
rawValue = rawValue.slice(0, 6); rawValue = rawValue.slice(0, 6);
} }
let formattedValue = rawValue let formattedValue = rawValue.replace(/(\d{3})(\d{0,3})/, "$1-$2").trim();
.replace(/(\d{3})(\d{0,3})/, "$1-$2")
.trim();
joinRoomId = formattedValue; joinRoomId = formattedValue;
@ -63,17 +55,10 @@
class="bg-primary-400 focus:bg-primary-100 dark:bg-primary-800 focus:dark:bg-primary-700 focus:ring-0 text-dark w-full overflow-hidden rounded-xl border-1 border-primary-800" class="bg-primary-400 focus:bg-primary-100 dark:bg-primary-800 focus:dark:bg-primary-700 focus:ring-0 text-dark w-full overflow-hidden rounded-xl border-1 border-primary-800"
size="lg" size="lg"
disabled={$loading && $loading != "create"} disabled={$loading && $loading != "create"}
on:click={() => on:click={() => joinSession($rejoinRoomSessionData?.sessionToken, $rejoinRoomSessionData?.userId)}
joinSession(
$rejoinRoomSessionData?.sessionToken,
$rejoinRoomSessionData?.userId,
)}
> >
{#if $loading == "create"} {#if $loading == "create"}
<Spinner <Spinner class="text-primary-350 dark:text-primary-200 me-3" size="4" />
class="text-primary-350 dark:text-primary-200 me-3"
size="4"
/>
{/if} {/if}
{$_("landing_page.connect_room.rejoin_last_room")} {$_("landing_page.connect_room.rejoin_last_room")}
</Button> </Button>
@ -102,10 +87,7 @@
on:click={() => requestJoinRoom($rejoinRoomCode)} on:click={() => requestJoinRoom($rejoinRoomCode)}
> >
{#if $loading == "create"} {#if $loading == "create"}
<Spinner <Spinner class="text-primary-350 dark:text-primary-200 me-3" size="4" />
class="text-primary-350 dark:text-primary-200 me-3"
size="4"
/>
{/if} {/if}
{$_("landing_page.connect_room.join_last_room")} {$_("landing_page.connect_room.join_last_room")}
</Button> </Button>
@ -115,7 +97,8 @@
{$_(`error_messages.${$create_error}`, { {$_(`error_messages.${$create_error}`, {
default: $_("error_messages.error_message", { default: $_("error_messages.error_message", {
values: { error_message: $create_error }, values: { error_message: $create_error },
})})} }),
})}
</span> </span>
</Helper> </Helper>
{/if} {/if}
@ -125,19 +108,11 @@
</div> </div>
{/if} {/if}
<div class="mb-4"> <div class="mb-4">
<ButtonGroup <ButtonGroup class="w-full overflow-hidden rounded-xl border-1 border-primary-800" size="sm">
class="w-full overflow-hidden rounded-xl border-1 border-primary-800" <InputAddon class="w-10 text-center bg-primary-400 dark:bg-primary-800">
size="sm"
>
<InputAddon
class="w-10 text-center bg-primary-400 dark:bg-primary-800"
>
{#if $loading == "join"} {#if $loading == "join"}
<div class="w-full flex justify-center"> <div class="w-full flex justify-center">
<Spinner <Spinner class="text-primary-350 dark:text-primary-200" size="4.2" />
class="text-primary-350 dark:text-primary-200"
size="4.2"
/>
</div> </div>
{:else} {:else}
<span class="w-full"> # </span> <span class="w-full"> # </span>
@ -161,8 +136,8 @@
{$_(`error_messages.${$join_error}`, { {$_(`error_messages.${$join_error}`, {
default: $_("error_messages.error_message", { default: $_("error_messages.error_message", {
values: { error_message: $join_error }, values: { error_message: $join_error },
})} }),
)} })}
</span> </span>
</Helper> </Helper>
{/if} {/if}
@ -178,10 +153,7 @@
on:click={requestCreateRoom} on:click={requestCreateRoom}
> >
{#if $loading == "create"} {#if $loading == "create"}
<Spinner <Spinner class="text-primary-350 dark:text-primary-200 me-3" size="4" />
class="text-primary-350 dark:text-primary-200 me-3"
size="4"
/>
{/if} {/if}
{$_("landing_page.connect_room.create_a_room")} {$_("landing_page.connect_room.create_a_room")}
</Button> </Button>
@ -191,7 +163,8 @@
{$_(`error_messages.${$create_error}`, { {$_(`error_messages.${$create_error}`, {
default: $_("error_messages.error_message", { default: $_("error_messages.error_message", {
values: { error_message: $create_error }, values: { error_message: $create_error },
})})} }),
})}
</span> </span>
</Helper> </Helper>
{/if} {/if}

6
frontend/src/components/Footer.svelte
View File

@ -1,8 +1,8 @@
<script> <script>
import { Banner, Button, Tooltip } from "flowbite-svelte"; import { Banner, Button, Tooltip } from "flowbite-svelte";
import { ArrowUpFromLine, Dot } from "lucide-svelte"; import { ArrowUpFromLine, Dot } from "lucide-svelte";
import { slide } from 'svelte/transition'; import { slide } from "svelte/transition";
import { quintOut } from 'svelte/easing'; import { quintOut } from "svelte/easing";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
let bannerStatus = true; let bannerStatus = true;
@ -25,5 +25,5 @@
<Button on:click={showFooter} class="!p-2 focus:ring-0 mt-2" color="none"> <Button on:click={showFooter} class="!p-2 focus:ring-0 mt-2" color="none">
<ArrowUpFromLine /> <ArrowUpFromLine />
</Button> </Button>
<Tooltip type='auto'>{$_("landing_page.show_footer")}</Tooltip> <Tooltip type="auto">{$_("landing_page.show_footer")}</Tooltip>
</div> </div>

262
frontend/src/components/Game/Lobby.svelte
View File

@ -1,33 +1,10 @@
<script lang="ts"> <script lang="ts">
import RenamePlayer from "./../RenamePlayer.svelte"; import RenamePlayer from "./../RenamePlayer.svelte";
import { import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, TableSearch, Badge, Button, Modal, Popover, Tooltip } from "flowbite-svelte";
Table, import { CircleArrowOutUpLeft, Copy, AlertCircle, UserX, Play, TextCursorInput, Gamepad2 } from "lucide-svelte";
TableBody,
TableBodyCell,
TableBodyRow,
TableHead,
TableHeadCell,
TableSearch,
Badge,
Button,
Modal,
Popover,
Tooltip,
} from "flowbite-svelte";
import {
CircleArrowOutUpLeft,
Copy,
AlertCircle,
UserX,
Play,
TextCursorInput,
Gamepad2
} from "lucide-svelte";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { GameState, sessionStore } from "../../stores/sessionStore"; import { GameState, sessionStore } from "../../stores/sessionStore";
import { toggleLobbyOverlay } from '../../stores/gameStore'; import { toggleLobbyOverlay } from "../../stores/gameStore";
let copied = false; let copied = false;
let showLeaveModal = false; let showLeaveModal = false;
@ -41,9 +18,7 @@
let showKickModal = false; let showKickModal = false;
function filteredPlayers() { function filteredPlayers() {
return players.filter((player) => return players.filter((player) => player.Username.toLowerCase().includes(searchQuery.toLowerCase()));
player.Username.toLowerCase().includes(searchQuery.toLowerCase()),
);
} }
function insert(str: string, index: number, value: string) { function insert(str: string, index: number, value: string) {
@ -51,23 +26,17 @@
} }
function copyGameCodeToClipboard() { function copyGameCodeToClipboard() {
navigator.clipboard navigator.clipboard.writeText(insert($sessionStore.joinCode || "000000", 3, "-")).then(() => {
.writeText(insert($sessionStore.joinCode || "000000", 3, "-")) copied = true;
.then(() => { setTimeout(() => (copied = false), 2000);
copied = true; });
setTimeout(() => (copied = false), 2000);
});
} }
function copyGameLinkToClipboard() { function copyGameLinkToClipboard() {
navigator.clipboard navigator.clipboard.writeText(`${window.location.origin}/Game?join=${$sessionStore.joinCode}`).then(() => {
.writeText( copied = true;
`${window.location.origin}/Game?join=${$sessionStore.joinCode}`, setTimeout(() => (copied = false), 2000);
) });
.then(() => {
copied = true;
setTimeout(() => (copied = false), 2000);
});
} }
function leaveRoom() { function leaveRoom() {
@ -77,71 +46,35 @@
</script> </script>
<!-- Modal: Confirm Leave Room --> <!-- Modal: Confirm Leave Room -->
<Modal <Modal bind:open={showLeaveModal} size="md" backdropClass="fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80 backdrop-opacity-50" autoclose outsideclose>
bind:open={showLeaveModal}
size="md"
backdropClass="fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80 backdrop-opacity-50"
autoclose
outsideclose
>
<div class="text-center"> <div class="text-center">
<AlertCircle <AlertCircle class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
/>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400"> <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
{$_("lobby.confirm_leave_message")} {$_("lobby.confirm_leave_message")}
</h3> </h3>
<Button <Button on:click={() => (showLeaveModal = false)} color="alternative" class="hover:text-dark hover:bg-gray-100">{$_("lobby.cancel")}</Button>
on:click={() => (showLeaveModal = false)} <Button on:click={leaveRoom} color="red" class="me-2">{$_("lobby.confirm_leave")}</Button>
color="alternative"
class="hover:text-dark hover:bg-gray-100"
>{$_("lobby.cancel")}</Button
>
<Button on:click={leaveRoom} color="red" class="me-2"
>{$_("lobby.confirm_leave")}</Button
>
</div> </div>
</Modal> </Modal>
<!-- Modal: Rename Player --> <!-- Modal: Rename Player -->
<Modal <Modal bind:open={showRenameModal} size="md" backdropClass="fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80 backdrop-opacity-50" autoclose outsideclose>
bind:open={showRenameModal}
size="md"
backdropClass="fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80 backdrop-opacity-50"
autoclose
outsideclose
>
<div class="text-center"> <div class="text-center">
<TextCursorInput <TextCursorInput class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
/>
<RenamePlayer playerId={rename_player} /> <RenamePlayer playerId={rename_player} />
</div> </div>
</Modal> </Modal>
<!-- Modal: Confirm Kick Player --> <!-- Modal: Confirm Kick Player -->
<Modal <Modal bind:open={showKickModal} size="md" backdropClass="fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80 backdrop-opacity-50" autoclose outsideclose>
bind:open={showKickModal}
size="md"
backdropClass="fixed inset-0 z-40 bg-gray-900 bg-black/50 dark:bg-black/80 backdrop-opacity-50"
autoclose
outsideclose
>
<div class="text-center"> <div class="text-center">
<UserX <UserX class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
/>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400"> <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
{$_("lobby.confirm_kick_player_message", { {$_("lobby.confirm_kick_player_message", {
values: { player_name: sessionStore.getUser(kick_player)?.Username || 'Name not found' }, values: { player_name: sessionStore.getUser(kick_player)?.Username || "Name not found" },
})} })}
</h3> </h3>
<Button <Button on:click={() => (showLeaveModal = false)} color="alternative" class="hover:text-dark hover:bg-gray-100">{$_("lobby.cancel")}</Button>
on:click={() => (showLeaveModal = false)}
color="alternative"
class="hover:text-dark hover:bg-gray-100"
>{$_("lobby.cancel")}</Button
>
<Button <Button
on:click={() => { on:click={() => {
sessionStore.kickPlayer(kick_player); sessionStore.kickPlayer(kick_player);
@ -166,26 +99,26 @@
<!-- Return to game Button --> <!-- Return to game Button -->
{#if sessionStore.getState().gameState !== GameState.Lobby} {#if sessionStore.getState().gameState !== GameState.Lobby}
<Button <Button
color="none" color="none"
class="sm:absolute m-2 right-0 border-2 border-gray-500 dark:border-gray-300 hover:bg-gray-500 dark:hover:bg-gray-300 hover:text-white dark:hover:text-black rounded-full text-gray-500 dark:text-gray-300" class="sm:absolute m-2 right-0 border-2 border-gray-500 dark:border-gray-300 hover:bg-gray-500 dark:hover:bg-gray-300 hover:text-white dark:hover:text-black rounded-full text-gray-500 dark:text-gray-300"
on:click={() => { on:click={() => {
toggleLobbyOverlay(); toggleLobbyOverlay();
}} }}
> >
<span>{$_("lobby.return_to_game")}</span> <span>{$_("lobby.return_to_game")}</span>
<Gamepad2 class="ml-2" /> <Gamepad2 class="ml-2" />
</Button> </Button>
{/if} {/if}
<!-- Game Status --> <!-- Game Status -->
<div class="text-center p-6 w-full"> <div class="text-center p-6 w-full">
<span>{$_("game_status.game_status")} <span
>{$_("game_status.game_status")}
<Badge color="dark"> <Badge color="dark">
{$_(`game_status.${GameState[$sessionStore.gameState].toLowerCase()}`)} {$_(`game_status.${GameState[$sessionStore.gameState].toLowerCase()}`)}
</Badge> </Badge>
</span </span>
>
</div> </div>
<!-- TODO Grid not fully responsive --> <!-- TODO Grid not fully responsive -->
@ -196,61 +129,52 @@
{/if} {/if}
<!-- Copy Join Code Button --> <!-- Copy Join Code Button -->
<!-- TODO add Streamer mode (hide room code) here --> <!-- TODO add Streamer mode (hide room code) here -->
{#if sessionStore.getState().gameState === GameState.Lobby} {#if sessionStore.getState().gameState === GameState.Lobby}
<Button <Button
id="b1" id="b1"
type="button" type="button"
class="w-xs mx-auto text-dark bg-primary-200 dark:bg-primary-900 hover:bg-primary-200 dark:hover:bg-primary-900 backdrop-blur-lg border border-black/20 dark:border-white/20 shadow-lg p-4 rounded-2xl flex items-center justify-between transition-all cursor-pointer" class="w-xs mx-auto text-dark bg-primary-200 dark:bg-primary-900 hover:bg-primary-200 dark:hover:bg-primary-900 backdrop-blur-lg border border-black/20 dark:border-white/20 shadow-lg p-4 rounded-2xl flex items-center justify-between transition-all cursor-pointer"
on:click={() => { on:click={() => {
copyGameCodeToClipboard(); copyGameCodeToClipboard();
}} }}
> >
<div class="grid justify-items-start"> <div class="grid justify-items-start">
<span class="text-sm">{$_("lobby.room_join_code")}</span> <span class="text-sm">{$_("lobby.room_join_code")}</span>
<div class="relative"> <div class="relative">
<span <span class="text-xl font-semibold tracking-widest select-none transition-opacity duration-300 opacity-0" class:opacity-100={!copied}
class="text-xl font-semibold tracking-widest select-none transition-opacity duration-300 opacity-0" >{insert($sessionStore.joinCode || "000000", 3, "-")}
class:opacity-100={!copied} </span>
>{insert($sessionStore.joinCode || "000000", 3, "-")} <span class="absolute left-0 text-xl font-semibold tracking-widest select-none transition-opacity duration-300 opacity-0" class:opacity-100={copied}>
</span> {$_("lobby.copied")}
<span </span>
class="absolute left-0 text-xl font-semibold tracking-widest select-none transition-opacity duration-300 opacity-0" </div>
class:opacity-100={copied}
>
{$_("lobby.copied")}
</span>
</div> </div>
</div> <Copy />
<Copy /> </Button>
</Button> <Popover class="text-sm max-w-screen font-light z-100" triggeredBy="#b1" placement="bottom">
<Popover <div class="grid gap-2">
class="text-sm max-w-screen font-light z-100" <Button
triggeredBy="#b1" on:click={() => {
placement="bottom" copyGameCodeToClipboard();
> }}
<div class="grid gap-2"> >
<Button {$_("lobby.copy_code")}
on:click={() => {
copyGameCodeToClipboard();
}}
>
{$_("lobby.copy_code")}
</Button>
<Button
on:click={() => {
copyGameLinkToClipboard();
}}
>
{$_("lobby.copy_join_link")}
</Button>
{#if sessionStore.getPlayerPermissions().isHost}
<Button on:click={() => {}}>
{$_("lobby.regenerate_join_code")}
</Button> </Button>
{/if} <Button
</div> on:click={() => {
</Popover> copyGameLinkToClipboard();
}}
>
{$_("lobby.copy_join_link")}
</Button>
{#if sessionStore.getPlayerPermissions().isHost}
<Button on:click={() => {}}>
{$_("lobby.regenerate_join_code")}
</Button>
{/if}
</div>
</Popover>
{/if} {/if}
<!-- Start game button --> <!-- Start game button -->
@ -263,10 +187,7 @@
> >
<div class="grid justify-items-start"> <div class="grid justify-items-start">
<div class="relative"> <div class="relative">
<span <span class="text-xl font-semibold tracking-widest select-none transition-opacity duration-300">{$_("lobby.start_game")} </span>
class="text-xl font-semibold tracking-widest select-none transition-opacity duration-300"
>{$_("lobby.start_game")}
</span>
</div> </div>
</div> </div>
<Play /> <Play />
@ -276,10 +197,7 @@
{#if players.length > 5} {#if players.length > 5}
<!-- Search Bar --> <!-- Search Bar -->
<TableSearch <TableSearch bind:inputValue={searchQuery} placeholder={$_("lobby.search_player")} />
bind:inputValue={searchQuery}
placeholder={$_("lobby.search_player")}
/>
{/if} {/if}
<!-- Players Table --> <!-- Players Table -->
@ -297,25 +215,17 @@
<TableBodyCell> <TableBodyCell>
{player.Username} {player.Username}
{#if sessionStore.isCurrentPlayer(player.PlayerId)} {#if sessionStore.isCurrentPlayer(player.PlayerId)}
<Badge color="purple" class="ml-1" <Badge color="purple" class="ml-1">{$_("lobby.you")}</Badge>
>{$_("lobby.you")}</Badge
>
{/if} {/if}
{#if sessionStore.getPlayerPermissions(player.PlayerId).isHost} {#if sessionStore.getPlayerPermissions(player.PlayerId).isHost}
<Badge color="blue" class="ml-1" <Badge color="blue" class="ml-1">{$_("lobby.host")}</Badge>
>{$_("lobby.host")}</Badge
>
{/if} {/if}
</TableBodyCell> </TableBodyCell>
<TableBodyCell> <TableBodyCell>
{#if player.IsConnected} {#if player.IsConnected}
<Badge color="green" <Badge color="green">{$_(`player_status.connected`)}</Badge>
>{$_(`player_status.connected`)}</Badge
>
{:else} {:else}
<Badge color="yellow" <Badge color="yellow">{$_(`player_status.disconnected`)}</Badge>
>{$_(`player_status.disconnected`)}</Badge
>
{/if} {/if}
</TableBodyCell> </TableBodyCell>
<!-- Can kick and rename player --> <!-- Can kick and rename player -->
@ -348,9 +258,7 @@
> >
<TextCursorInput class="w-7 h-7" /> <TextCursorInput class="w-7 h-7" />
</Button> </Button>
<Tooltip type="auto" <Tooltip type="auto">{$_("lobby.rename_player")}</Tooltip>
>{$_("lobby.rename_player")}</Tooltip
>
</TableBodyCell> </TableBodyCell>
{/if} {/if}
</TableBodyRow> </TableBodyRow>

28
frontend/src/components/RenamePlayer.svelte
View File

@ -32,7 +32,7 @@
debounceTimer = setTimeout(() => { debounceTimer = setTimeout(() => {
sessionStore.renamePlayer(playerId, newName); sessionStore.renamePlayer(playerId, newName);
isLoading = false; isLoading = false;
unfocusInput() unfocusInput();
}, 1800); }, 1800);
} }
@ -57,29 +57,25 @@
role="button" role="button"
tabindex="0" tabindex="0"
on:click={focusInput} on:click={focusInput}
on:keydown={(event) => { if (event.key === 'Enter' || event.key === ' ') focusInput(); }}> on:keydown={(event) => {
if (event.key === "Enter" || event.key === " ") focusInput();
}}
>
<div class="grid justify-items-start w-full"> <div class="grid justify-items-start w-full">
{#if playerId == sessionStore.getUserId()} {#if playerId == sessionStore.getUserId()}
<span class="text-sm">{$_("lobby.rename_yourself")}</span> <span class="text-sm">{$_("lobby.rename_yourself")}</span>
{:else} {:else}
<span class="text-sm">{$_("lobby.rename_player")}</span> <span class="text-sm">{$_("lobby.rename_player")}</span>
{/if} {/if}
<!-- Rename Player --> <!-- Rename Player -->
<div class="w-full"> <div class="w-full">
<input <input class="text-black w-full dark:text-white mr-md w-full border-0 focus:outline-none focus:ring-0 h-8 bg-transparent" bind:value={playerName} on:input={onInput} bind:this={inputRef} />
class="text-black w-full dark:text-white mr-md w-full border-0 focus:outline-none focus:ring-0 h-8 bg-transparent"
bind:value={playerName}
on:input={onInput}
bind:this={inputRef}
/>
</div> </div>
</div> </div>
{#if isLoading} {#if isLoading}
<div class=""> <div class="">
<Spinner <Spinner class="text-primary-350 w-8 h-8 dark:text-primary-200" />
class="text-primary-350 w-8 h-8 dark:text-primary-200" </div>
/> {/if}
</div>
{/if}
</div> </div>

12
frontend/src/components/StatsContainer.svelte
View File

@ -7,15 +7,15 @@
online_player_count: null, online_player_count: null,
current_game_rooms: null, current_game_rooms: null,
games_played: null, games_played: null,
} };
async function getStats() { async function getStats() {
try { try {
const res = await fetch("/api/stats"); const res = await fetch("/api/stats");
const resJson = await res.json(); const resJson = await res.json();
stats.online_player_count = resJson?.OnlinePlayerCount stats.online_player_count = resJson?.OnlinePlayerCount;
stats.current_game_rooms = resJson?.RunningGames stats.current_game_rooms = resJson?.RunningGames;
stats.games_played = resJson?.TotalGamesPlayed stats.games_played = resJson?.TotalGamesPlayed;
} catch {} } catch {}
} }
@ -25,11 +25,11 @@
getStats(); getStats();
// Request stats update every 10s // Request stats update every 10s
getStateInterval = setInterval(getStats, 10 * 60 * 1000); getStateInterval = setInterval(getStats, 10 * 60 * 1000);
}) });
onDestroy(() => { onDestroy(() => {
clearInterval(getStateInterval); clearInterval(getStateInterval);
}) });
</script> </script>
<div class="p-4 bg-primary-50 dark:bg-primary-950 rounded-xl grid content-start justify-items-center w-3xs text-center space-y-2 border-1 border-primary-200 dark:border-primary-800"> <div class="p-4 bg-primary-50 dark:bg-primary-950 rounded-xl grid content-start justify-items-center w-3xs text-center space-y-2 border-1 border-primary-200 dark:border-primary-800">

13
frontend/src/routes/Leave.svelte
View File

@ -6,18 +6,13 @@
import { sessionStore } from "../stores/sessionStore"; import { sessionStore } from "../stores/sessionStore";
onMount(async () => { onMount(async () => {
await sessionStore.leaveRoom() await sessionStore.leaveRoom();
}) });
</script> </script>
<div class="container mx-auto p-6"> <div class="container mx-auto p-6">
<Card <Card class="max-w-lg mx-auto dark:text-gray-200 rounded-xl text-center space-y-2 flex">
class="max-w-lg mx-auto dark:text-gray-200 rounded-xl text-center space-y-2 flex" <Spinner class="text-primary-350 dark:text-primary-200 w-12" size="4.2" />
>
<Spinner
class="text-primary-350 dark:text-primary-200 w-12"
size="4.2"
/>
<h1 class="text-2xl font-bold">{$_("leave.leaving_game")}</h1> <h1 class="text-2xl font-bold">{$_("leave.leaving_game")}</h1>
</Card> </Card>
</div> </div>

7
frontend/src/routes/[...404].svelte
View File

@ -2,12 +2,11 @@
import { Button, Card } from "flowbite-svelte"; import { Button, Card } from "flowbite-svelte";
import { MoveLeft } from "lucide-svelte"; import { MoveLeft } from "lucide-svelte";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { url } from '@roxi/routify' import { url } from "@roxi/routify";
function goBack() { function goBack() {
window.history.pushState({}, "", "/"); window.history.pushState({}, "", "/");
} }
</script> </script>
<div class="container mx-auto p-6"> <div class="container mx-auto p-6">
@ -20,8 +19,8 @@
<span>{$_("imprint.go_back")}</span> <span>{$_("imprint.go_back")}</span>
</Button> </Button>
<Card class="max-w-lg mx-auto dark:text-gray-200 rounded-xl text-center space-y-2"> <Card class="max-w-lg mx-auto dark:text-gray-200 rounded-xl text-center space-y-2">
<h1 class="text-2xl font-bold">{$_("404.404_page_not_found")}</h1> <h1 class="text-2xl font-bold">{$_("404.404_page_not_found")}</h1>
<h1 class="">{$_("404.page_not_found", { values: { page: $url('$leaf') }})}</h1> <h1 class="">{$_("404.page_not_found", { values: { page: $url("$leaf") } })}</h1>
</Card> </Card>
</div> </div>

6
frontend/src/routes/_module.svelte
View File

@ -20,11 +20,7 @@
<div class="middle-header-group header-group"></div> <div class="middle-header-group header-group"></div>
<div class="right-header-group header-group gap-2"> <div class="right-header-group header-group gap-2">
<!-- Theme btn --> <!-- Theme btn -->
<Button <Button on:click={toggleTheme} class="!p-2 mt-2 rounded-full focus:bg-primary-700 hover:bg-primary-600 focus:ring-0" color="none">
on:click={toggleTheme}
class="!p-2 mt-2 rounded-full focus:bg-primary-700 hover:bg-primary-600 focus:ring-0"
color="none"
>
{#if $theme === "dark"} {#if $theme === "dark"}
<Moon size="2rem" /> <Moon size="2rem" />
{:else if $theme === "light"} {:else if $theme === "light"}

2
frontend/src/routes/imprint.svelte
View File

@ -4,7 +4,7 @@
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import Markdown from "svelte-exmarkdown"; import Markdown from "svelte-exmarkdown";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { goto } from '@roxi/routify' import { goto } from "@roxi/routify";
// Reactive stores for better state management // Reactive stores for better state management
let md: string = ""; let md: string = "";

17
frontend/src/routes/index.svelte
View File

@ -30,14 +30,8 @@
<div class="flex justify-center"> <div class="flex justify-center">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
<!-- Open source container --> <!-- Open source container -->
<div <div class="p-4 bg-primary-50 dark:bg-primary-950 rounded-xl grid content-start justify-items-center w-3xs text-center space-y-2 border-1 border-primary-200 dark:border-primary-800">
class="p-4 bg-primary-50 dark:bg-primary-950 rounded-xl grid content-start justify-items-center w-3xs text-center space-y-2 border-1 border-primary-200 dark:border-primary-800" <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 24 24"
><path ><path
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
@ -51,12 +45,7 @@
{$_("landing_page.open_source_container.title")} {$_("landing_page.open_source_container.title")}
</h4> </h4>
<span>{$_("landing_page.open_source_container.content")}</span> <span>{$_("landing_page.open_source_container.content")}</span>
<GradientButton <GradientButton color="purpleToBlue" class="opacity-75 focus:opacity-100 focus:ring-0" href="https://github.com/HexCardGames/HexDeck" target="_blank">
color="purpleToBlue"
class="opacity-75 focus:opacity-100 focus:ring-0"
href="https://github.com/HexCardGames/HexDeck"
target="_blank"
>
{$_("landing_page.open_source_container.github")} {$_("landing_page.open_source_container.github")}
</GradientButton> </GradientButton>
</div> </div>