mirror of
https://github.com/HexCardGames/HexDeck.git
synced 2025-09-04 02:48:39 +02:00
style: add svelte support to prettier and format svelte components
This commit is contained in:
@ -4,5 +4,7 @@
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 200,
|
||||
"bracketSpacing": true,
|
||||
"arrowParens": "always"
|
||||
"arrowParens": "always",
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
|
||||
12
frontend/package-lock.json
generated
12
frontend/package-lock.json
generated
@ -25,6 +25,7 @@
|
||||
"flowbite-svelte": "^0.48.4",
|
||||
"flowbite-svelte-icons": "^2.0.2",
|
||||
"prettier": "3.5.3",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"sass-embedded": "^1.85.1",
|
||||
"svelte": "^5.22.5",
|
||||
"svelte-check": "^4.1.4",
|
||||
@ -3600,6 +3601,17 @@
|
||||
"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": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"flowbite-svelte": "^0.48.4",
|
||||
"flowbite-svelte-icons": "^2.0.2",
|
||||
"prettier": "3.5.3",
|
||||
"prettier-plugin-svelte": "^3.3.3",
|
||||
"sass-embedded": "^1.85.1",
|
||||
"svelte": "^5.22.5",
|
||||
"svelte-check": "^4.1.4",
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<script context="module">
|
||||
import { Router, createRouter } from "@roxi/routify";
|
||||
import routes from "../.routify/routes.default.js";
|
||||
import MetaTitle from "./components/meta-title.svelte";
|
||||
import { Router, createRouter } from "@roxi/routify";
|
||||
import routes from "../.routify/routes.default.js";
|
||||
import MetaTitle from "./components/meta-title.svelte";
|
||||
|
||||
export const router = createRouter({ routes });
|
||||
export const router = createRouter({ routes });
|
||||
|
||||
router.ready().then(() => {
|
||||
console.log("Routify router is ready!");
|
||||
});
|
||||
router.ready().then(() => {
|
||||
console.log("Routify router is ready!");
|
||||
});
|
||||
</script>
|
||||
|
||||
<MetaTitle />
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
Button,
|
||||
Spinner,
|
||||
InputAddon,
|
||||
ButtonGroup,
|
||||
Helper,
|
||||
} from "flowbite-svelte";
|
||||
import { Button, Spinner, InputAddon, ButtonGroup, Helper } from "flowbite-svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { loading, join_error, create_error, rejoinRoomCode, rejoinRoomSessionData, requestJoinRoom, requestCreateRoom, joinSession, checkSessionData } from "../stores/roomStore";
|
||||
|
||||
@ -21,9 +15,7 @@
|
||||
rawValue = rawValue.slice(0, 6);
|
||||
}
|
||||
|
||||
let formattedValue = rawValue
|
||||
.replace(/(\d{3})(\d{0,3})/, "$1-$2")
|
||||
.trim();
|
||||
let formattedValue = rawValue.replace(/(\d{3})(\d{0,3})/, "$1-$2").trim();
|
||||
|
||||
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"
|
||||
size="lg"
|
||||
disabled={$loading && $loading != "create"}
|
||||
on:click={() =>
|
||||
joinSession(
|
||||
$rejoinRoomSessionData?.sessionToken,
|
||||
$rejoinRoomSessionData?.userId,
|
||||
)}
|
||||
on:click={() => joinSession($rejoinRoomSessionData?.sessionToken, $rejoinRoomSessionData?.userId)}
|
||||
>
|
||||
{#if $loading == "create"}
|
||||
<Spinner
|
||||
class="text-primary-350 dark:text-primary-200 me-3"
|
||||
size="4"
|
||||
/>
|
||||
<Spinner class="text-primary-350 dark:text-primary-200 me-3" size="4" />
|
||||
{/if}
|
||||
{$_("landing_page.connect_room.rejoin_last_room")}
|
||||
</Button>
|
||||
@ -102,10 +87,7 @@
|
||||
on:click={() => requestJoinRoom($rejoinRoomCode)}
|
||||
>
|
||||
{#if $loading == "create"}
|
||||
<Spinner
|
||||
class="text-primary-350 dark:text-primary-200 me-3"
|
||||
size="4"
|
||||
/>
|
||||
<Spinner class="text-primary-350 dark:text-primary-200 me-3" size="4" />
|
||||
{/if}
|
||||
{$_("landing_page.connect_room.join_last_room")}
|
||||
</Button>
|
||||
@ -115,7 +97,8 @@
|
||||
{$_(`error_messages.${$create_error}`, {
|
||||
default: $_("error_messages.error_message", {
|
||||
values: { error_message: $create_error },
|
||||
})})}
|
||||
}),
|
||||
})}
|
||||
</span>
|
||||
</Helper>
|
||||
{/if}
|
||||
@ -125,19 +108,11 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div class="mb-4">
|
||||
<ButtonGroup
|
||||
class="w-full overflow-hidden rounded-xl border-1 border-primary-800"
|
||||
size="sm"
|
||||
>
|
||||
<InputAddon
|
||||
class="w-10 text-center bg-primary-400 dark:bg-primary-800"
|
||||
>
|
||||
<ButtonGroup class="w-full overflow-hidden rounded-xl border-1 border-primary-800" size="sm">
|
||||
<InputAddon class="w-10 text-center bg-primary-400 dark:bg-primary-800">
|
||||
{#if $loading == "join"}
|
||||
<div class="w-full flex justify-center">
|
||||
<Spinner
|
||||
class="text-primary-350 dark:text-primary-200"
|
||||
size="4.2"
|
||||
/>
|
||||
<Spinner class="text-primary-350 dark:text-primary-200" size="4.2" />
|
||||
</div>
|
||||
{:else}
|
||||
<span class="w-full"> # </span>
|
||||
@ -161,8 +136,8 @@
|
||||
{$_(`error_messages.${$join_error}`, {
|
||||
default: $_("error_messages.error_message", {
|
||||
values: { error_message: $join_error },
|
||||
})}
|
||||
)}
|
||||
}),
|
||||
})}
|
||||
</span>
|
||||
</Helper>
|
||||
{/if}
|
||||
@ -178,10 +153,7 @@
|
||||
on:click={requestCreateRoom}
|
||||
>
|
||||
{#if $loading == "create"}
|
||||
<Spinner
|
||||
class="text-primary-350 dark:text-primary-200 me-3"
|
||||
size="4"
|
||||
/>
|
||||
<Spinner class="text-primary-350 dark:text-primary-200 me-3" size="4" />
|
||||
{/if}
|
||||
{$_("landing_page.connect_room.create_a_room")}
|
||||
</Button>
|
||||
@ -191,7 +163,8 @@
|
||||
{$_(`error_messages.${$create_error}`, {
|
||||
default: $_("error_messages.error_message", {
|
||||
values: { error_message: $create_error },
|
||||
})})}
|
||||
}),
|
||||
})}
|
||||
</span>
|
||||
</Helper>
|
||||
{/if}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<script>
|
||||
import { Banner, Button, Tooltip } from "flowbite-svelte";
|
||||
import { ArrowUpFromLine, Dot } from "lucide-svelte";
|
||||
import { slide } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { slide } from "svelte/transition";
|
||||
import { quintOut } from "svelte/easing";
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
let bannerStatus = true;
|
||||
@ -25,5 +25,5 @@
|
||||
<Button on:click={showFooter} class="!p-2 focus:ring-0 mt-2" color="none">
|
||||
<ArrowUpFromLine />
|
||||
</Button>
|
||||
<Tooltip type='auto'>{$_("landing_page.show_footer")}</Tooltip>
|
||||
<Tooltip type="auto">{$_("landing_page.show_footer")}</Tooltip>
|
||||
</div>
|
||||
|
||||
@ -1,33 +1,10 @@
|
||||
<script lang="ts">
|
||||
import RenamePlayer from "./../RenamePlayer.svelte";
|
||||
import {
|
||||
Table,
|
||||
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 { Table, 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 { GameState, sessionStore } from "../../stores/sessionStore";
|
||||
import { toggleLobbyOverlay } from '../../stores/gameStore';
|
||||
import { toggleLobbyOverlay } from "../../stores/gameStore";
|
||||
|
||||
let copied = false;
|
||||
let showLeaveModal = false;
|
||||
@ -41,9 +18,7 @@
|
||||
let showKickModal = false;
|
||||
|
||||
function filteredPlayers() {
|
||||
return players.filter((player) =>
|
||||
player.Username.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
return players.filter((player) => player.Username.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
}
|
||||
|
||||
function insert(str: string, index: number, value: string) {
|
||||
@ -51,23 +26,17 @@
|
||||
}
|
||||
|
||||
function copyGameCodeToClipboard() {
|
||||
navigator.clipboard
|
||||
.writeText(insert($sessionStore.joinCode || "000000", 3, "-"))
|
||||
.then(() => {
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 2000);
|
||||
});
|
||||
navigator.clipboard.writeText(insert($sessionStore.joinCode || "000000", 3, "-")).then(() => {
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function copyGameLinkToClipboard() {
|
||||
navigator.clipboard
|
||||
.writeText(
|
||||
`${window.location.origin}/Game?join=${$sessionStore.joinCode}`,
|
||||
)
|
||||
.then(() => {
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 2000);
|
||||
});
|
||||
navigator.clipboard.writeText(`${window.location.origin}/Game?join=${$sessionStore.joinCode}`).then(() => {
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function leaveRoom() {
|
||||
@ -77,71 +46,35 @@
|
||||
</script>
|
||||
|
||||
<!-- Modal: Confirm Leave Room -->
|
||||
<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
|
||||
>
|
||||
<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>
|
||||
<div class="text-center">
|
||||
<AlertCircle
|
||||
class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
|
||||
/>
|
||||
<AlertCircle 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">
|
||||
{$_("lobby.confirm_leave_message")}
|
||||
</h3>
|
||||
<Button
|
||||
on:click={() => (showLeaveModal = false)}
|
||||
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
|
||||
>
|
||||
<Button on:click={() => (showLeaveModal = false)} 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>
|
||||
</Modal>
|
||||
|
||||
<!-- Modal: Rename Player -->
|
||||
<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
|
||||
>
|
||||
<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>
|
||||
<div class="text-center">
|
||||
<TextCursorInput
|
||||
class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
|
||||
/>
|
||||
<TextCursorInput class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" />
|
||||
<RenamePlayer playerId={rename_player} />
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<!-- Modal: Confirm Kick Player -->
|
||||
<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
|
||||
>
|
||||
<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>
|
||||
<div class="text-center">
|
||||
<UserX
|
||||
class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"
|
||||
/>
|
||||
<UserX 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">
|
||||
{$_("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>
|
||||
<Button
|
||||
on:click={() => (showLeaveModal = false)}
|
||||
color="alternative"
|
||||
class="hover:text-dark hover:bg-gray-100"
|
||||
>{$_("lobby.cancel")}</Button
|
||||
>
|
||||
<Button on:click={() => (showLeaveModal = false)} color="alternative" class="hover:text-dark hover:bg-gray-100">{$_("lobby.cancel")}</Button>
|
||||
<Button
|
||||
on:click={() => {
|
||||
sessionStore.kickPlayer(kick_player);
|
||||
@ -166,26 +99,26 @@
|
||||
|
||||
<!-- Return to game Button -->
|
||||
{#if sessionStore.getState().gameState !== GameState.Lobby}
|
||||
<Button
|
||||
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"
|
||||
on:click={() => {
|
||||
toggleLobbyOverlay();
|
||||
}}
|
||||
>
|
||||
<span>{$_("lobby.return_to_game")}</span>
|
||||
<Gamepad2 class="ml-2" />
|
||||
</Button>
|
||||
<Button
|
||||
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"
|
||||
on:click={() => {
|
||||
toggleLobbyOverlay();
|
||||
}}
|
||||
>
|
||||
<span>{$_("lobby.return_to_game")}</span>
|
||||
<Gamepad2 class="ml-2" />
|
||||
</Button>
|
||||
{/if}
|
||||
|
||||
<!-- Game Status -->
|
||||
<div class="text-center p-6 w-full">
|
||||
<span>{$_("game_status.game_status")}
|
||||
<span
|
||||
>{$_("game_status.game_status")}
|
||||
<Badge color="dark">
|
||||
{$_(`game_status.${GameState[$sessionStore.gameState].toLowerCase()}`)}
|
||||
</Badge>
|
||||
</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- TODO Grid not fully responsive -->
|
||||
@ -196,61 +129,52 @@
|
||||
{/if}
|
||||
|
||||
<!-- 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}
|
||||
<Button
|
||||
id="b1"
|
||||
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"
|
||||
on:click={() => {
|
||||
copyGameCodeToClipboard();
|
||||
}}
|
||||
>
|
||||
<div class="grid justify-items-start">
|
||||
<span class="text-sm">{$_("lobby.room_join_code")}</span>
|
||||
<div class="relative">
|
||||
<span
|
||||
class="text-xl font-semibold tracking-widest select-none transition-opacity duration-300 opacity-0"
|
||||
class:opacity-100={!copied}
|
||||
>{insert($sessionStore.joinCode || "000000", 3, "-")}
|
||||
</span>
|
||||
<span
|
||||
class="absolute left-0 text-xl font-semibold tracking-widest select-none transition-opacity duration-300 opacity-0"
|
||||
class:opacity-100={copied}
|
||||
>
|
||||
{$_("lobby.copied")}
|
||||
</span>
|
||||
<Button
|
||||
id="b1"
|
||||
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"
|
||||
on:click={() => {
|
||||
copyGameCodeToClipboard();
|
||||
}}
|
||||
>
|
||||
<div class="grid justify-items-start">
|
||||
<span class="text-sm">{$_("lobby.room_join_code")}</span>
|
||||
<div class="relative">
|
||||
<span class="text-xl font-semibold tracking-widest select-none transition-opacity duration-300 opacity-0" class:opacity-100={!copied}
|
||||
>{insert($sessionStore.joinCode || "000000", 3, "-")}
|
||||
</span>
|
||||
<span class="absolute left-0 text-xl font-semibold tracking-widest select-none transition-opacity duration-300 opacity-0" class:opacity-100={copied}>
|
||||
{$_("lobby.copied")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Copy />
|
||||
</Button>
|
||||
<Popover
|
||||
class="text-sm max-w-screen font-light z-100"
|
||||
triggeredBy="#b1"
|
||||
placement="bottom"
|
||||
>
|
||||
<div class="grid gap-2">
|
||||
<Button
|
||||
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")}
|
||||
<Copy />
|
||||
</Button>
|
||||
<Popover class="text-sm max-w-screen font-light z-100" triggeredBy="#b1" placement="bottom">
|
||||
<div class="grid gap-2">
|
||||
<Button
|
||||
on:click={() => {
|
||||
copyGameCodeToClipboard();
|
||||
}}
|
||||
>
|
||||
{$_("lobby.copy_code")}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</Popover>
|
||||
<Button
|
||||
on:click={() => {
|
||||
copyGameLinkToClipboard();
|
||||
}}
|
||||
>
|
||||
{$_("lobby.copy_join_link")}
|
||||
</Button>
|
||||
{#if sessionStore.getPlayerPermissions().isHost}
|
||||
<Button on:click={() => {}}>
|
||||
{$_("lobby.regenerate_join_code")}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</Popover>
|
||||
{/if}
|
||||
|
||||
<!-- Start game button -->
|
||||
@ -263,10 +187,7 @@
|
||||
>
|
||||
<div class="grid justify-items-start">
|
||||
<div class="relative">
|
||||
<span
|
||||
class="text-xl font-semibold tracking-widest select-none transition-opacity duration-300"
|
||||
>{$_("lobby.start_game")}
|
||||
</span>
|
||||
<span class="text-xl font-semibold tracking-widest select-none transition-opacity duration-300">{$_("lobby.start_game")} </span>
|
||||
</div>
|
||||
</div>
|
||||
<Play />
|
||||
@ -276,10 +197,7 @@
|
||||
|
||||
{#if players.length > 5}
|
||||
<!-- Search Bar -->
|
||||
<TableSearch
|
||||
bind:inputValue={searchQuery}
|
||||
placeholder={$_("lobby.search_player")}
|
||||
/>
|
||||
<TableSearch bind:inputValue={searchQuery} placeholder={$_("lobby.search_player")} />
|
||||
{/if}
|
||||
|
||||
<!-- Players Table -->
|
||||
@ -297,25 +215,17 @@
|
||||
<TableBodyCell>
|
||||
{player.Username}
|
||||
{#if sessionStore.isCurrentPlayer(player.PlayerId)}
|
||||
<Badge color="purple" class="ml-1"
|
||||
>{$_("lobby.you")}</Badge
|
||||
>
|
||||
<Badge color="purple" class="ml-1">{$_("lobby.you")}</Badge>
|
||||
{/if}
|
||||
{#if sessionStore.getPlayerPermissions(player.PlayerId).isHost}
|
||||
<Badge color="blue" class="ml-1"
|
||||
>{$_("lobby.host")}</Badge
|
||||
>
|
||||
<Badge color="blue" class="ml-1">{$_("lobby.host")}</Badge>
|
||||
{/if}
|
||||
</TableBodyCell>
|
||||
<TableBodyCell>
|
||||
{#if player.IsConnected}
|
||||
<Badge color="green"
|
||||
>{$_(`player_status.connected`)}</Badge
|
||||
>
|
||||
<Badge color="green">{$_(`player_status.connected`)}</Badge>
|
||||
{:else}
|
||||
<Badge color="yellow"
|
||||
>{$_(`player_status.disconnected`)}</Badge
|
||||
>
|
||||
<Badge color="yellow">{$_(`player_status.disconnected`)}</Badge>
|
||||
{/if}
|
||||
</TableBodyCell>
|
||||
<!-- Can kick and rename player -->
|
||||
@ -348,9 +258,7 @@
|
||||
>
|
||||
<TextCursorInput class="w-7 h-7" />
|
||||
</Button>
|
||||
<Tooltip type="auto"
|
||||
>{$_("lobby.rename_player")}</Tooltip
|
||||
>
|
||||
<Tooltip type="auto">{$_("lobby.rename_player")}</Tooltip>
|
||||
</TableBodyCell>
|
||||
{/if}
|
||||
</TableBodyRow>
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
debounceTimer = setTimeout(() => {
|
||||
sessionStore.renamePlayer(playerId, newName);
|
||||
isLoading = false;
|
||||
unfocusInput()
|
||||
unfocusInput();
|
||||
}, 1800);
|
||||
}
|
||||
|
||||
@ -57,29 +57,25 @@
|
||||
role="button"
|
||||
tabindex="0"
|
||||
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">
|
||||
{#if playerId == sessionStore.getUserId()}
|
||||
<span class="text-sm">{$_("lobby.rename_yourself")}</span>
|
||||
<span class="text-sm">{$_("lobby.rename_yourself")}</span>
|
||||
{:else}
|
||||
<span class="text-sm">{$_("lobby.rename_player")}</span>
|
||||
<span class="text-sm">{$_("lobby.rename_player")}</span>
|
||||
{/if}
|
||||
|
||||
<!-- Rename Player -->
|
||||
<div class="w-full">
|
||||
<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}
|
||||
/>
|
||||
<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} />
|
||||
</div>
|
||||
</div>
|
||||
{#if isLoading}
|
||||
<div class="">
|
||||
<Spinner
|
||||
class="text-primary-350 w-8 h-8 dark:text-primary-200"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="">
|
||||
<Spinner class="text-primary-350 w-8 h-8 dark:text-primary-200" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -7,15 +7,15 @@
|
||||
online_player_count: null,
|
||||
current_game_rooms: null,
|
||||
games_played: null,
|
||||
}
|
||||
};
|
||||
|
||||
async function getStats() {
|
||||
try {
|
||||
const res = await fetch("/api/stats");
|
||||
const resJson = await res.json();
|
||||
stats.online_player_count = resJson?.OnlinePlayerCount
|
||||
stats.current_game_rooms = resJson?.RunningGames
|
||||
stats.games_played = resJson?.TotalGamesPlayed
|
||||
stats.online_player_count = resJson?.OnlinePlayerCount;
|
||||
stats.current_game_rooms = resJson?.RunningGames;
|
||||
stats.games_played = resJson?.TotalGamesPlayed;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
@ -25,11 +25,11 @@
|
||||
getStats();
|
||||
// Request stats update every 10s
|
||||
getStateInterval = setInterval(getStats, 10 * 60 * 1000);
|
||||
})
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
clearInterval(getStateInterval);
|
||||
})
|
||||
});
|
||||
</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">
|
||||
@ -41,4 +41,4 @@
|
||||
<span>{$_("landing_page.stats_container.current_game_rooms", { values: { count: stats.current_game_rooms ?? "..." } })}</span>
|
||||
<span>{$_("landing_page.stats_container.games_played", { values: { count: stats.games_played ?? "..." } })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,18 +6,13 @@
|
||||
import { sessionStore } from "../stores/sessionStore";
|
||||
|
||||
onMount(async () => {
|
||||
await sessionStore.leaveRoom()
|
||||
})
|
||||
await sessionStore.leaveRoom();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-6">
|
||||
<Card
|
||||
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"
|
||||
/>
|
||||
<Card 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" />
|
||||
<h1 class="text-2xl font-bold">{$_("leave.leaving_game")}</h1>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -2,12 +2,11 @@
|
||||
import { Button, Card } from "flowbite-svelte";
|
||||
import { MoveLeft } from "lucide-svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
import { url } from '@roxi/routify'
|
||||
import { url } from "@roxi/routify";
|
||||
|
||||
function goBack() {
|
||||
window.history.pushState({}, "", "/");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-6">
|
||||
@ -20,8 +19,8 @@
|
||||
<span>{$_("imprint.go_back")}</span>
|
||||
</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="">{$_("404.page_not_found", { values: { page: $url('$leaf') }})}</h1>
|
||||
<h1 class="">{$_("404.page_not_found", { values: { page: $url("$leaf") } })}</h1>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@ -20,11 +20,7 @@
|
||||
<div class="middle-header-group header-group"></div>
|
||||
<div class="right-header-group header-group gap-2">
|
||||
<!-- Theme btn -->
|
||||
<Button
|
||||
on:click={toggleTheme}
|
||||
class="!p-2 mt-2 rounded-full focus:bg-primary-700 hover:bg-primary-600 focus:ring-0"
|
||||
color="none"
|
||||
>
|
||||
<Button 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"}
|
||||
<Moon size="2rem" />
|
||||
{:else if $theme === "light"}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import Markdown from "svelte-exmarkdown";
|
||||
import { onMount } from "svelte";
|
||||
import { goto } from '@roxi/routify'
|
||||
import { goto } from "@roxi/routify";
|
||||
|
||||
// Reactive stores for better state management
|
||||
let md: string = "";
|
||||
|
||||
@ -30,14 +30,8 @@
|
||||
<div class="flex justify-center">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
<!-- Open source container -->
|
||||
<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"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 24 24"
|
||||
<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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"
|
||||
><path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
@ -51,12 +45,7 @@
|
||||
{$_("landing_page.open_source_container.title")}
|
||||
</h4>
|
||||
<span>{$_("landing_page.open_source_container.content")}</span>
|
||||
<GradientButton
|
||||
color="purpleToBlue"
|
||||
class="opacity-75 focus:opacity-100 focus:ring-0"
|
||||
href="https://github.com/HexCardGames/HexDeck"
|
||||
target="_blank"
|
||||
>
|
||||
<GradientButton 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")}
|
||||
</GradientButton>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user