79 |
89 |
81 |
84 |
85 |
88 | 
33 |
34 |
35 | [youtu.be/D_S4OmYOKJA](https://youtu.be/D_S4OmYOKJA)
36 |
37 | ---
38 |
39 | ## Copyright
40 | Copyright © 2024 AC Scripts (
62 |
66 |
67 | {/if}
68 |
69 |
29 |
30 |
31 |
35 |
36 |
37 |
42 |
43 |
44 |
49 | {/if}
50 |
--------------------------------------------------------------------------------
/web/src/components/groups.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | {#if $data.groups}
10 |
38 |
41 | {hasCopied ? $locales.server_id_copied : $locales.copy_server_id}
40 |
45 |
48 |
11 |
39 | {/if}
40 |
--------------------------------------------------------------------------------
/web/src/components/lib/sheet/index.ts:
--------------------------------------------------------------------------------
1 | import { Dialog as SheetPrimitive } from 'bits-ui';
2 | import { type VariantProps, tv } from 'tailwind-variants';
3 | import Portal from './sheet-portal.svelte';
4 | import Overlay from './sheet-overlay.svelte';
5 | import Content from './sheet-content.svelte';
6 |
7 | const Root = SheetPrimitive.Root;
8 |
9 | export {
10 | Root,
11 | Content,
12 | //
13 | Portal as SheetPortal,
14 | Overlay as SheetOverlay,
15 | };
16 |
17 | export const sheetVariants = tv({
18 | base: 'fixed z-50 gap-4 bg-slate-900 p-6 shadow-lg',
19 | variants: {
20 | side: {
21 | left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
22 | right: 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
23 | },
24 | },
25 | defaultVariants: {
26 | side: 'right',
27 | },
28 | });
29 |
30 | export const sheetTransitions = {
31 | left: {
32 | in: {
33 | x: '-100%',
34 | duration: 500,
35 | opacity: 1,
36 | },
37 | out: {
38 | x: '-100%',
39 | duration: 300,
40 | opacity: 1,
41 | },
42 | },
43 | right: {
44 | in: {
45 | x: '100%',
46 | duration: 500,
47 | opacity: 1,
48 | },
49 | out: {
50 | x: '100%',
51 | duration: 300,
52 | opacity: 1,
53 | },
54 | },
55 | };
56 |
57 | export type Side = VariantProps{$locales.groups}
12 |
13 |
14 | {#each $data.groups as group (group)}
15 |
38 |
21 |
36 | {/each}
37 |
22 | {#if group.icon}
23 |
27 | {#if group.count !== undefined}
28 | {group.count}
34 | {/if}
35 |
12 |
14 |
10 |
29 | {/if}
30 |
--------------------------------------------------------------------------------
/web/src/components/status-indicators.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 | {#if $data.statusIndicators}
9 | {$locales.players}
11 |
12 |
13 | {#each $data.players as player (player)}
14 |
28 |
21 | {player.name ?? $locales.anonymous_player}
22 | {#if player.id !== undefined}
23 | {player.id}
24 | {/if}
25 |
26 | {/each}
27 |
10 | {#each $data.statusIndicators as item}
11 |
12 |
13 |
15 |
16 |
18 |
19 | {/each}
20 |
21 | {/if}
22 |
--------------------------------------------------------------------------------
/web/src/components/title.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | {item.label}
17 |
10 | {#if $config.title.logo !== false}
11 | 
18 | {/if}
19 | {#if $config.title.text !== false}
20 |
23 |
--------------------------------------------------------------------------------
/web/src/index.pcss:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 217 33% 17%;
8 | --foreground: 210 40% 98%;
9 |
10 | --muted: 217.2 32.6% 17.5%;
11 | --muted-foreground: 215 20.2% 65.1%;
12 |
13 | --popover: 222.2 84% 4.9%;
14 | --popover-foreground: 210 40% 98%;
15 |
16 | --card: 222.2 84% 4.9%;
17 | --card-foreground: 210 40% 98%;
18 |
19 | --border: 217.2 32.6% 17.5%;
20 | --input: 217.2 32.6% 17.5%;
21 |
22 | --primary: 210 40% 98%;
23 | --primary-foreground: 222.2 47.4% 11.2%;
24 |
25 | --secondary: 217.2 32.6% 17.5%;
26 | --secondary-foreground: 210 40% 98%;
27 |
28 | --accent: 217.2 32.6% 17.5%;
29 | --accent-foreground: 210 40% 98%;
30 |
31 | --destructive: 0 62.8% 30.6%;
32 | --destructive-foreground: 210 40% 98%;
33 |
34 | --ring: hsl(212.7, 26.8%, 83.9);
35 |
36 | --radius: 0.5rem;
37 | }
38 | }
39 |
40 | @layer base {
41 | * {
42 | @apply border-border focus:outline-none;
43 | }
44 |
45 | body {
46 | @apply bg-transparent text-foreground;
47 | }
48 | }
49 |
50 | #app {
51 | @apply h-screen w-screen;
52 | }
53 |
54 | /* rem unit scaling */
55 | /*
56 | @media screen and (min-width: 1920px) {
57 | :root {
58 | font-size: 16px;
59 | }
60 | }
61 |
62 | @media screen and (min-width: 2560px) {
63 | :root {
64 | font-size: 19px;
65 | }
66 | }
67 | */
68 |
69 | /* scrollbar style */
70 | ::-webkit-scrollbar {
71 | width: 0px;
72 | }
73 |
74 | ::-webkit-scrollbar-track {
75 | @apply bg-slate-700;
76 | }
77 |
78 | ::-webkit-scrollbar-thumb {
79 | @apply bg-slate-500;
80 | }
81 |
82 | ::-webkit-scrollbar-thumb:hover {
83 | @apply bg-slate-400;
84 | }
85 |
--------------------------------------------------------------------------------
/web/src/main.ts:
--------------------------------------------------------------------------------
1 | import { mount } from 'svelte';
2 | import './index.pcss';
3 | import App from './App.svelte';
4 | import { isEnvBrowser } from '$utils/misc';
5 |
6 | const app = mount(App, {
7 | target: document.getElementById('app')!,
8 | });
9 |
10 | if (isEnvBrowser()) {
11 | const root = document.getElementById('app');
12 |
13 | root!.style.backgroundImage = 'url("https://i.ibb.co/B6vJKtS/image.png")';
14 | root!.style.backgroundSize = 'cover';
15 | root!.style.backgroundRepeat = 'no-repeat';
16 | root!.style.backgroundPosition = 'center';
17 | }
18 |
19 | export default app;
20 |
--------------------------------------------------------------------------------
/web/src/providers/VisibilityProvider.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 | {#if isVisible}
13 | {$config.title.text ?? 'AC Scoreboard'}
21 | {/if} 22 |(events: DebugEvent
[], timer = 1000): void => {
16 | if (isEnvBrowser()) {
17 | for (const event of events) {
18 | setTimeout(() => {
19 | window.dispatchEvent(
20 | new MessageEvent('message', {
21 | data: {
22 | action: event.action,
23 | data: event.data,
24 | },
25 | })
26 | );
27 | }, timer);
28 | }
29 | }
30 | };
31 |
--------------------------------------------------------------------------------
/web/src/utils/fetchNui.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @param eventName - The endpoint eventname to target
3 | * @param data - Data you wish to send in the NUI Callback
4 | *
5 | * @return returnData - A promise for the data sent back by the NuiCallbacks CB argument
6 | */
7 |
8 | export async function fetchNui