Skip to content

Commit 65b97a5

Browse files
mczubmczub
committedJan 1, 2025·
add wild charges to codcar, add changelog, fix responsivity
1 parent 7fb0070 commit 65b97a5

9 files changed

+185
-81
lines changed
 

‎wtfdig/src/app.html

+2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
66
<meta name="viewport" content="width=device-width" />
7+
<title>WTFDIG? (Chaotic)</title>
78
%sveltekit.head%
9+
810
</head>
911
<body data-sveltekit-preload-data="hover" data-theme="skeleton">
1012
<div style="display: contents">%sveltekit.body%</div>

‎wtfdig/src/routes/+layout.svelte

+36-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,46 @@
11
<script lang="ts">
22
import '../app.postcss';
3+
import { initializeStores, Modal, type ModalSettings, getModalStore } from '@skeletonlabs/skeleton';
4+
5+
initializeStores();
6+
7+
const faqModal: ModalSettings = {
8+
type: 'alert',
9+
title: 'FAQ',
10+
body: 'FAQ goes here',
11+
buttonTextCancel: 'Close',
12+
modalClasses: 'whitespace-pre'
13+
}
14+
15+
const changelogModal: ModalSettings = {
16+
type: 'alert',
17+
title: 'Changelog',
18+
body:
19+
`12/31/2024: Added Alignment buttons (Original, True North, Add Relative) for CODCAR, added Wild Charges to CODCAR tile players, some improvements to responsive sizing
20+
12/30/2024: Initial Release`,
21+
buttonTextCancel: 'Close',
22+
modalClasses: 'whitespace-pre-wrap'
23+
}
24+
const modalStore = getModalStore();
325
</script>
426

27+
<Modal />
28+
<header class="container h-full mx-auto px-4 mx-auto md:my-12 my-4">
29+
<div class="flex flex-wrap justify-between items-center">
30+
<div class="text-2xl font-semibold">where the f do i go???? (Chaotic)</div>
31+
<div class="my-4 md:my-0">
32+
<button type="button" on:click="{() => modalStore.trigger(changelogModal)}"class="btn variant-ghost">Changelog</button>
33+
</div>
34+
</div>
35+
36+
</header>
37+
38+
539
<slot />
640

7-
<footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
41+
<footer class="md:fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
842
<div class="flex w-full max-w-screen-xl mx-auto justify-between">
943
<span class="text-sm text-gray-500 dark:text-gray-400">Comments? Questions? Something incorrect? <a target="_blank" rel="noopener noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline" href="https://docs.google.com/forms/d/e/1FAIpQLScJEJ43FKjSRJ2MyLuGXznce-P_SQNyPLWga_Xme_CJKPiQIQ/viewform?usp=header">Let me know.</a></span>
10-
<span class="text-sm text-gray-500 dark:text-gray-400">Made by Mara Kaminagi @ Adamantoise</span>
44+
<span class="text-sm text-gray-500 dark:text-gray-400 text-end">Made by Mara Kaminagi @ Adamantoise</span>
1145
</div>
1246
</footer>

‎wtfdig/src/routes/+layout.ts

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
21
export const prerender = true;

‎wtfdig/src/routes/+page.svelte

+75-78
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
21
<script lang="ts">
3-
import type { PageData } from './$types';
42
import type { Alliance, Role, PlayerStrats, Alignment } from './+page';
53
import { RadioGroup, RadioItem, SlideToggle } from '@skeletonlabs/skeleton';
64
@@ -25,85 +23,84 @@
2523
}
2624
</script>
2725

28-
<div class="container h-full mx-auto my-12 flex">
29-
<div class="space-y-5">
30-
<div class="text-2xl">where the f do i go???? (Chaotic)</div>
31-
<div>
32-
<h2>Which strat are you using?</h2>
33-
<RadioGroup>
34-
<RadioItem bind:group={stratName} name="stratName" value={'raidplan'}>Raidplan</RadioItem>
35-
<RadioItem bind:group={stratName} name="stratName" value={'codcar'}>CODCAR</RadioItem>
36-
</RadioGroup>
37-
</div>
38-
<div>
39-
<h2>Which alliance are you in?</h2>
40-
<RadioGroup>
41-
<RadioItem bind:group={alliance} name="alliance" value={'A'}>A</RadioItem>
42-
<RadioItem bind:group={alliance} name="alliance" value={'B'}>B</RadioItem>
43-
<RadioItem bind:group={alliance} name="alliance" value={'C'}>C</RadioItem>
44-
</RadioGroup>
45-
</div>
46-
<div>
47-
<h2>Which role are you?</h2>
48-
<RadioGroup>
49-
<RadioItem bind:group={role} name="role" value={'Tank'}>Tank</RadioItem>
50-
<RadioItem bind:group={role} name="role" value={'Healer'}>Healer</RadioItem>
51-
<RadioItem bind:group={role} name="role" value={'Melee'}>Melee</RadioItem>
52-
<RadioItem bind:group={role} name="role" value={'Ranged'}>Ranged</RadioItem>
53-
</RadioGroup>
54-
</div>
55-
<div>
56-
<h2>Which party are you?</h2>
57-
<RadioGroup>
58-
<RadioItem bind:group={party} name="party" value={1}>1</RadioItem>
59-
<RadioItem bind:group={party} name="party" value={2}>2</RadioItem>
60-
</RadioGroup>
26+
<div class="container h-full min-h-screen px-4 mx-auto my-12 flex">
27+
<div class="space-y-5 v-full">
28+
<div>
29+
<h2>Which strat are you using?</h2>
30+
<RadioGroup>
31+
<RadioItem bind:group={stratName} name="stratName" value={'raidplan'}>Raidplan</RadioItem>
32+
<RadioItem bind:group={stratName} name="stratName" value={'codcar'}>CODCAR</RadioItem>
33+
</RadioGroup>
34+
</div>
35+
<div>
36+
<h2>Which alliance are you in?</h2>
37+
<RadioGroup>
38+
<RadioItem bind:group={alliance} name="alliance" value={'A'}>A</RadioItem>
39+
<RadioItem bind:group={alliance} name="alliance" value={'B'}>B</RadioItem>
40+
<RadioItem bind:group={alliance} name="alliance" value={'C'}>C</RadioItem>
41+
</RadioGroup>
42+
</div>
43+
<div>
44+
<h2>Which role are you?</h2>
45+
<RadioGroup>
46+
<RadioItem bind:group={role} name="role" value={'Tank'}>Tank</RadioItem>
47+
<RadioItem bind:group={role} name="role" value={'Healer'}>Healer</RadioItem>
48+
<RadioItem bind:group={role} name="role" value={'Melee'}>Melee</RadioItem>
49+
<RadioItem bind:group={role} name="role" value={'Ranged'}>Ranged</RadioItem>
50+
</RadioGroup>
51+
</div>
52+
<div>
53+
<h2>Which party are you?</h2>
54+
<RadioGroup>
55+
<RadioItem bind:group={party} name="party" value={1}>1</RadioItem>
56+
<RadioItem bind:group={party} name="party" value={2}>2</RadioItem>
57+
</RadioGroup>
58+
</div>
59+
{#if typeof strat === 'string'}
60+
<slot>
61+
{strat}
62+
</slot>
63+
{:else if typeof strat === 'undefined'}
64+
<div></div>
65+
{:else}
66+
<div class="flex flex-wrap items-center gap-2">
67+
<div class="content-center">
68+
{#if stratPackage?.stratUrl}
69+
<a class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer" href={stratPackage.stratUrl}>{stratPackage.description}
70+
<svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
71+
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
72+
</svg>
73+
</a>
74+
{/if}
75+
</div>
76+
<div class="grow"></div>
77+
<div class="content-center">
78+
<SlideToggle name="spotlight-toggle" bind:checked={spotlight}>Highlight my spots</SlideToggle>
79+
</div>
6180
</div>
62-
{#if typeof strat === 'string'}
63-
<slot>
64-
{strat}
65-
</slot>
66-
{:else if typeof strat === 'undefined'}
67-
<div></div>
68-
{:else}
69-
<div class="flex flex-wrap items-center gap-4">
81+
<div class="flex items-center justify-between">
82+
<div class="text-xl">{strat.notes}</div>
83+
{#if strat.strats.some(strat => strat.alignmentTransforms)}
7084
<div class="content-center">
71-
{#if stratPackage?.stratUrl}
72-
<a class="inline-flex items-center font-medium text-blue-600 dark:text-blue-500 hover:underline" target="_blank" rel="noopener noreferrer" href={stratPackage.stratUrl}>{stratPackage.description}
73-
<svg class="w-4 h-4 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
74-
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
75-
</svg>
76-
</a>
77-
{/if}
85+
<RadioGroup>
86+
<RadioItem bind:group={alignment} name="alignment" value={"original"}>Original</RadioItem>
87+
<RadioItem bind:group={alignment} name="alignment" value={"truenorth"}>True North</RadioItem>
88+
<RadioItem bind:group={alignment} name="alignment" value={"addrelative"}>Add Relative</RadioItem>
89+
</RadioGroup>
7890
</div>
79-
<div class="grow"></div>
80-
<div class="content-center">
81-
<SlideToggle name="spotlight-toggle" bind:checked={spotlight}>Highlight my spots</SlideToggle>
91+
{/if}
92+
</div>
93+
94+
<div class="grid xl:grid-cols-6 md:grid-cols-3 grid-cols-2 gap-2">
95+
{#each strat.strats as step}
96+
<div class="space-y-4">
97+
<div class="uppercase text-xl">{step.mechanic}</div>
98+
<div class="whitespace-pre text-l">{step.description}</div>
99+
<img src={step.imageUrl} style:mask-image={spotlight ? step.mask : ''} style:transform={step.alignmentTransforms ? step.alignmentTransforms[alignment] : step.transform} />
82100
</div>
83-
</div>
84-
<div class="flex items-center justify-between">
85-
<div class="text-xl">{strat.notes}</div>
86-
{#if strat.strats.some(strat => strat.alignmentTransforms)}
87-
<div class="content-center">
88-
<RadioGroup>
89-
<RadioItem bind:group={alignment} name="alignment" value={"original"}>Original</RadioItem>
90-
<RadioItem bind:group={alignment} name="alignment" value={"truenorth"}>True North</RadioItem>
91-
<RadioItem bind:group={alignment} name="alignment" value={"addrelative"}>Add Relative</RadioItem>
92-
</RadioGroup>
93-
</div>
94-
{/if}
95-
</div>
96-
97-
<div class="grid grid-cols-6 gap-4">
98-
{#each strat.strats as step}
99-
<div class="space-y-4">
100-
<div class="uppercase text-xl">{step.mechanic}</div>
101-
<div class="whitespace-pre text-l">{step.description}</div>
102-
<img src={step.imageUrl} style:mask-image={spotlight ? step.mask : ''} style:transform={step.alignmentTransforms ? step.alignmentTransforms[alignment] : step.transform} />
103-
</div>
104-
105-
{/each}
106-
</div>
107-
{/if}
101+
102+
{/each}
103+
</div>
104+
{/if}
108105
</div>
109106
</div>

‎wtfdig/src/routes/+page.ts

+72
Original file line numberDiff line numberDiff line change
@@ -1423,6 +1423,12 @@ const codcarStrat: Strat = {
14231423
imageUrl: './strats/codcar/tiles-northwest-idle.png',
14241424
mask: 'radial-gradient(circle at 81% 50%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
14251425
},
1426+
{
1427+
mechanic: 'wild charge',
1428+
description: 'NW East inner tile',
1429+
imageUrl: './strats/codcar/tiles-northwest-wc.png',
1430+
mask: 'radial-gradient(circle at 71% 51%, black 18%, rgba(0, 0, 0, 0.4) 18%)'
1431+
},
14261432
{
14271433
mechanic: 'swap',
14281434
description: 'NW East inner tile',
@@ -1444,6 +1450,12 @@ const codcarStrat: Strat = {
14441450
imageUrl: './strats/codcar/tiles-southwest-idle.png',
14451451
mask: 'radial-gradient(circle at 82% 51%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
14461452
},
1453+
{
1454+
mechanic: 'wild charge',
1455+
description: 'SW East inner tile',
1456+
imageUrl: './strats/codcar/tiles-southwest-wc.png',
1457+
mask: 'radial-gradient(circle at 76% 38%, black 18%, rgba(0, 0, 0, 0.4) 18%)'
1458+
},
14471459
{
14481460
mechanic: 'swap',
14491461
description: 'SW East inner tile',
@@ -1465,6 +1477,12 @@ const codcarStrat: Strat = {
14651477
imageUrl: './strats/codcar/tiles-northwest-idle.png',
14661478
mask: 'radial-gradient(circle at 17% 50%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
14671479
},
1480+
{
1481+
mechanic: 'wild charge',
1482+
description: 'NW central tile',
1483+
imageUrl: './strats/codcar/tiles-northwest-wc.png',
1484+
mask: 'radial-gradient(circle at 56% 39%, black 16%, rgba(0, 0, 0, 0.4) 16%)'
1485+
},
14681486
{
14691487
mechanic: 'swap',
14701488
description: 'NW South inner tile',
@@ -1486,6 +1504,12 @@ const codcarStrat: Strat = {
14861504
imageUrl: './strats/codcar/tiles-southwest-idle.png',
14871505
mask: 'radial-gradient(circle at 17% 50%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
14881506
},
1507+
{
1508+
mechanic: 'wild charge',
1509+
description: 'SW central tile',
1510+
imageUrl: './strats/codcar/tiles-southwest-wc.png',
1511+
mask: 'radial-gradient(circle at 59% 50%, black 16%, rgba(0, 0, 0, 0.4) 16%)'
1512+
},
14891513
{
14901514
mechanic: 'swap',
14911515
description: 'SW North inner tile',
@@ -1507,6 +1531,12 @@ const codcarStrat: Strat = {
15071531
imageUrl: './strats/codcar/tiles-northwest-idle.png',
15081532
mask: 'radial-gradient(circle at 49% 19%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
15091533
},
1534+
{
1535+
mechanic: 'wild charge',
1536+
description: 'NW North cubby',
1537+
imageUrl: './strats/codcar/tiles-northwest-wc.png',
1538+
mask: 'radial-gradient(circle at 45% 27%, black 16%, rgba(0, 0, 0, 0.4) 16%)'
1539+
},
15101540
{
15111541
mechanic: 'swap',
15121542
description: 'NW central tile',
@@ -1528,6 +1558,12 @@ const codcarStrat: Strat = {
15281558
imageUrl: './strats/codcar/tiles-southwest-idle.png',
15291559
mask: 'radial-gradient(circle at 49% 82%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
15301560
},
1561+
{
1562+
mechanic: 'wild charge',
1563+
description: 'SW South cubby',
1564+
imageUrl: './strats/codcar/tiles-southwest-wc.png',
1565+
mask: 'radial-gradient(circle at 49% 67%, black 16%, rgba(0, 0, 0, 0.4) 16%)'
1566+
},
15311567
{
15321568
mechanic: 'swap',
15331569
description: 'SW central tile',
@@ -1689,6 +1725,12 @@ const codcarStrat: Strat = {
16891725
imageUrl: './strats/codcar/tiles-northeast-idle.png',
16901726
mask: 'radial-gradient(circle at 21% 50%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
16911727
},
1728+
{
1729+
mechanic: 'wild charge',
1730+
description: 'NE West inner tile',
1731+
imageUrl: './strats/codcar/tiles-northeast-wc.png',
1732+
mask: 'radial-gradient(circle at 31% 52%, black 18%, rgba(0, 0, 0, 0.4) 18%)'
1733+
},
16921734
{
16931735
mechanic: 'swap',
16941736
description: 'NE West inner tile',
@@ -1710,6 +1752,12 @@ const codcarStrat: Strat = {
17101752
imageUrl: './strats/codcar/tiles-southeast-idle.png',
17111753
mask: 'radial-gradient(circle at 20% 51%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
17121754
},
1755+
{
1756+
mechanic: 'wild charge',
1757+
description: 'SE West inner tile',
1758+
imageUrl: './strats/codcar/tiles-southeast-wc.png',
1759+
mask: 'radial-gradient(circle at 26% 39%, black 18%, rgba(0, 0, 0, 0.4) 18%)'
1760+
},
17131761
{
17141762
mechanic: 'swap',
17151763
description: 'SE West inner tile',
@@ -1731,6 +1779,12 @@ const codcarStrat: Strat = {
17311779
imageUrl: './strats/codcar/tiles-northeast-idle.png',
17321780
mask: 'radial-gradient(circle at 83% 50%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
17331781
},
1782+
{
1783+
mechanic: 'wild charge',
1784+
description: 'NE central tile',
1785+
imageUrl: './strats/codcar/tiles-northeast-wc.png',
1786+
mask: 'radial-gradient(circle at 45% 41%, black 18%, rgba(0, 0, 0, 0.4) 18%)'
1787+
},
17341788
{
17351789
mechanic: 'swap',
17361790
description: 'NE South inner tile',
@@ -1752,6 +1806,12 @@ const codcarStrat: Strat = {
17521806
imageUrl: './strats/codcar/tiles-southeast-idle.png',
17531807
mask: 'radial-gradient(circle at 82% 50%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
17541808
},
1809+
{
1810+
mechanic: 'wild charge',
1811+
description: 'SE central tile',
1812+
imageUrl: './strats/codcar/tiles-southeast-wc.png',
1813+
mask: 'radial-gradient(circle at 44% 51%, black 18%, rgba(0, 0, 0, 0.4) 18%)'
1814+
},
17551815
{
17561816
mechanic: 'swap',
17571817
description: 'SE North inner tile',
@@ -1773,6 +1833,12 @@ const codcarStrat: Strat = {
17731833
imageUrl: './strats/codcar/tiles-northeast-idle.png',
17741834
mask: 'radial-gradient(circle at 49% 19%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
17751835
},
1836+
{
1837+
mechanic: 'wild charge',
1838+
description: 'NE North cubby',
1839+
imageUrl: './strats/codcar/tiles-northeast-wc.png',
1840+
mask: 'radial-gradient(circle at 56% 27%, black 16%, rgba(0, 0, 0, 0.4) 16%)'
1841+
},
17761842
{
17771843
mechanic: 'swap',
17781844
description: 'NE central tile',
@@ -1794,6 +1860,12 @@ const codcarStrat: Strat = {
17941860
imageUrl: './strats/codcar/tiles-southeast-idle.png',
17951861
mask: 'radial-gradient(circle at 49% 82%, black 22%, rgba(0, 0, 0, 0.4) 22%)'
17961862
},
1863+
{
1864+
mechanic: 'wild charge',
1865+
description: 'SE South cubby',
1866+
imageUrl: './strats/codcar/tiles-southeast-wc.png',
1867+
mask: 'radial-gradient(circle at 55% 68%, black 16%, rgba(0, 0, 0, 0.4) 16%)'
1868+
},
17971869
{
17981870
mechanic: 'swap',
17991871
description: 'SE central tile',

‎wtfdig/static/strats/codcar/tiles-northeast-wc.png

55.4 KB
Loading

‎wtfdig/static/strats/codcar/tiles-northwest-wc.png

52.8 KB
Loading

‎wtfdig/static/strats/codcar/tiles-southeast-wc.png

58.7 KB
Loading

‎wtfdig/static/strats/codcar/tiles-southwest-wc.png

56.2 KB
Loading

0 commit comments

Comments
 (0)
Please sign in to comment.