Skip to content

Commit d4f7cc5

Browse files
mczubmczub
committed
added overviews + fixed rotation for codcar aoes
1 parent 48f4375 commit d4f7cc5

File tree

7 files changed

+199
-51
lines changed

7 files changed

+199
-51
lines changed

‎wtfdig/src/routes/+layout.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616
type: 'alert',
1717
title: 'Changelog',
1818
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
19+
`1/1/2024: Added big overview image, rotated AOE spreads correctly for CODCAR
20+
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
2021
12/30/2024: Initial Release`,
2122
buttonTextCancel: 'Close',
2223
modalClasses: 'whitespace-pre-wrap'

‎wtfdig/src/routes/+page.svelte

+61-37
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import type { Alliance, Role, PlayerStrats, Alignment } from './+page';
2+
import type { Alliance, Role, PlayerStrats, Alignment, MechanicStrat } from './+page';
33
import { RadioGroup, RadioItem, SlideToggle } from '@skeletonlabs/skeleton';
44
55
export let data;
@@ -21,41 +21,64 @@
2121
if (!allianceRolePartyStrat) return `Couldn't find ${stratName} strat for Alliance ${alliance} ${role} ${party}`;
2222
return allianceRolePartyStrat;
2323
}
24+
25+
function getMask(step: MechanicStrat): string {
26+
if (spotlight) {
27+
if (step.alignmentMasks && step.alignmentMasks[alignment]) {
28+
return step.alignmentMasks[alignment];
29+
}
30+
return step.mask || '';
31+
}
32+
return '';
33+
}
2434
</script>
2535

2636
<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>
37+
<div class="container">
38+
<div class="flex flex-wrap min-w-full justify-between mb-8">
39+
<div class="space-y-5 v-full">
40+
<div>
41+
<h2>Which strat are you using?</h2>
42+
<RadioGroup>
43+
<RadioItem bind:group={stratName} name="stratName" value={'raidplan'}>Raidplan (Aurelia)</RadioItem>
44+
<RadioItem bind:group={stratName} name="stratName" value={'codcar'}>CODCAR</RadioItem>
45+
</RadioGroup>
46+
</div>
47+
<div>
48+
<h2>Which alliance are you in?</h2>
49+
<RadioGroup>
50+
<RadioItem bind:group={alliance} name="alliance" value={'A'}>A</RadioItem>
51+
<RadioItem bind:group={alliance} name="alliance" value={'B'}>B</RadioItem>
52+
<RadioItem bind:group={alliance} name="alliance" value={'C'}>C</RadioItem>
53+
</RadioGroup>
54+
</div>
55+
<div>
56+
<h2>Which role are you?</h2>
57+
<RadioGroup>
58+
<RadioItem bind:group={role} name="role" value={'Tank'}>Tank</RadioItem>
59+
<RadioItem bind:group={role} name="role" value={'Healer'}>Healer</RadioItem>
60+
<RadioItem bind:group={role} name="role" value={'Melee'}>Melee</RadioItem>
61+
<RadioItem bind:group={role} name="role" value={'Ranged'}>Ranged</RadioItem>
62+
</RadioGroup>
63+
</div>
64+
<div>
65+
<h2>Which party are you?</h2>
66+
<RadioGroup>
67+
<RadioItem bind:group={party} name="party" value={1}>1</RadioItem>
68+
<RadioItem bind:group={party} name="party" value={2}>2</RadioItem>
69+
</RadioGroup>
70+
</div>
71+
</div>
72+
<div class="grow"></div>
73+
<div class="my-4 xl:my-0">
74+
{#if stratPackage?.stratName === 'raidplan'}
75+
<img style:max-height={'400px'} src={'./strats/raidplan/overall.png'} />
76+
{:else if stratPackage?.stratName === 'codcar'}
77+
<img style:max-height={'400px'} src={'./strats/codcar/overall.png'} />
78+
{/if}
79+
</div>
5880
</div>
81+
5982
{#if typeof strat === 'string'}
6083
<slot>
6184
{strat}
@@ -78,7 +101,7 @@
78101
<SlideToggle name="spotlight-toggle" bind:checked={spotlight}>Highlight my spots</SlideToggle>
79102
</div>
80103
</div>
81-
<div class="flex items-center justify-between">
104+
<div class="flex items-center justify-between my-4">
82105
<div class="text-xl">{strat.notes}</div>
83106
{#if strat.strats.some(strat => strat.alignmentTransforms)}
84107
<div class="content-center">
@@ -91,14 +114,15 @@
91114
{/if}
92115
</div>
93116

94-
<div class="grid xl:grid-cols-6 md:grid-cols-3 grid-cols-2 gap-2">
117+
<div class="grid xl:grid-cols-7 md:grid-cols-4 grid-cols-2 gap-2">
95118
{#each strat.strats as step}
96-
<div class="space-y-4">
119+
{#key alignment}
120+
<div class="space-y-4" class:col-span-2={step.alignmentImages && step.alignmentImages[alignment]}>
97121
<div class="uppercase text-xl">{step.mechanic}</div>
98122
<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} />
123+
<img src={(step.alignmentImages && step.alignmentImages[alignment]) ? step.alignmentImages[alignment] : step.imageUrl} style:mask-image={getMask(step)} style:transform={step.alignmentTransforms ? step.alignmentTransforms[alignment] : step.transform} />
100124
</div>
101-
125+
{/key}
102126
{/each}
103127
</div>
104128
{/if}

‎wtfdig/src/routes/+page.ts

+136-13
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@ export type StartingArea = 'Tiles' | 'Platform';
1212
export type Alignment = 'original' | 'truenorth' | 'addrelative';
1313
export type Alliance = 'A' | 'B' | 'C';
1414

15-
interface MechanicStrat {
15+
export interface MechanicStrat {
1616
mechanic: string;
1717
description: string;
1818
imageUrl: string;
19+
imageRotated?: string;
1920
mask?: string;
2021
transform?: string;
2122
alignmentTransforms?: Record<Alignment, string>;
23+
alignmentImages?: Record<Alignment, string>;
24+
alignmentMasks?: Record<Alignment, string>;
2225
}
2326

2427
export interface PlayerStrats {
@@ -901,7 +904,17 @@ const codcarStrat: Strat = {
901904
mechanic: 'aoes',
902905
description: 'Platform Inside\nRelative Left\nTrue South',
903906
imageUrl: './strats/codcar/platform-west-aoe-spread.png',
904-
mask: 'radial-gradient(circle at 66% 59%, black 12%, rgba(0, 0, 0, 0.4) 12%)'
907+
mask: 'radial-gradient(circle at 66% 59%, black 12%, rgba(0, 0, 0, 0.4) 12%)',
908+
alignmentImages: {
909+
'original': '',
910+
'truenorth': '',
911+
'addrelative': './strats/codcar/platform-west-aoe-spread-rotated.png',
912+
},
913+
alignmentMasks: {
914+
'original': '',
915+
'truenorth': '',
916+
'addrelative': 'radial-gradient(circle at 41% 67%, black 12%, rgba(0, 0, 0, 0.4) 12%)',
917+
},
905918
},
906919
{
907920
mechanic: 'swap',
@@ -972,7 +985,17 @@ const codcarStrat: Strat = {
972985
mechanic: 'aoes',
973986
description: 'Platform Inside\nRelative Right\nTrue South',
974987
imageUrl: './strats/codcar/platform-east-aoe-spread.png',
975-
mask: 'radial-gradient(circle at 35% 60%, black 10%, rgba(0, 0, 0, 0.4) 10%)'
988+
mask: 'radial-gradient(circle at 35% 60%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
989+
alignmentImages: {
990+
'original': '',
991+
'truenorth': '',
992+
'addrelative': './strats/codcar/platform-east-aoe-spread-rotated.png',
993+
},
994+
alignmentMasks: {
995+
'original': '',
996+
'truenorth': '',
997+
'addrelative': 'radial-gradient(circle at 60% 65%, black 12%, rgba(0, 0, 0, 0.4) 12%)',
998+
},
976999
},
9771000
{
9781001
mechanic: 'swap',
@@ -1042,7 +1065,17 @@ const codcarStrat: Strat = {
10421065
mechanic: 'aoes',
10431066
description: 'Platform Outside\nRelative Left\nTrue South',
10441067
imageUrl: './strats/codcar/platform-west-aoe-spread.png',
1045-
mask: 'radial-gradient(circle at 15% 62%, black 10%, rgba(0, 0, 0, 0.4) 10%)'
1068+
mask: 'radial-gradient(circle at 15% 62%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1069+
alignmentImages: {
1070+
'original': '',
1071+
'truenorth': '',
1072+
'addrelative': './strats/codcar/platform-west-aoe-spread-rotated.png',
1073+
},
1074+
alignmentMasks: {
1075+
'original': '',
1076+
'truenorth': '',
1077+
'addrelative': 'radial-gradient(circle at 37% 14%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1078+
},
10461079
},
10471080
{
10481081
mechanic: 'swap',
@@ -1113,7 +1146,17 @@ const codcarStrat: Strat = {
11131146
mechanic: 'aoes',
11141147
description: 'Platform Outside\nRelative Left\nTrue North',
11151148
imageUrl: './strats/codcar/platform-east-aoe-spread.png',
1116-
mask: 'radial-gradient(circle at 81% 39%, black 10%, rgba(0, 0, 0, 0.4) 10%)'
1149+
mask: 'radial-gradient(circle at 81% 39%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1150+
alignmentImages: {
1151+
'original': '',
1152+
'truenorth': '',
1153+
'addrelative': './strats/codcar/platform-east-aoe-spread-rotated.png',
1154+
},
1155+
alignmentMasks: {
1156+
'original': '',
1157+
'truenorth': '',
1158+
'addrelative': 'radial-gradient(circle at 40% 19%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1159+
},
11171160
},
11181161
{
11191162
mechanic: 'swap',
@@ -1183,7 +1226,17 @@ const codcarStrat: Strat = {
11831226
mechanic: 'aoes',
11841227
description: 'Platform Inside\nRelative Right\nTrue North',
11851228
imageUrl: './strats/codcar/platform-west-aoe-spread.png',
1186-
mask: 'radial-gradient(circle at 73% 41%, black 10%, rgba(0, 0, 0, 0.4) 10%)'
1229+
mask: 'radial-gradient(circle at 73% 41%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1230+
alignmentImages: {
1231+
'original': '',
1232+
'truenorth': '',
1233+
'addrelative': './strats/codcar/platform-west-aoe-spread-rotated.png',
1234+
},
1235+
alignmentMasks: {
1236+
'original': '',
1237+
'truenorth': '',
1238+
'addrelative': 'radial-gradient(circle at 59% 73%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1239+
},
11871240
},
11881241
{
11891242
mechanic: 'swap',
@@ -1254,7 +1307,17 @@ const codcarStrat: Strat = {
12541307
mechanic: 'aoes',
12551308
description: 'Platform Inside\nRelative Left\nTrue North',
12561309
imageUrl: './strats/codcar/platform-east-aoe-spread.png',
1257-
mask: 'radial-gradient(circle at 32% 41%, black 10%, rgba(0, 0, 0, 0.4) 10%)'
1310+
mask: 'radial-gradient(circle at 32% 41%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1311+
alignmentImages: {
1312+
'original': '',
1313+
'truenorth': '',
1314+
'addrelative': './strats/codcar/platform-east-aoe-spread-rotated.png',
1315+
},
1316+
alignmentMasks: {
1317+
'original': '',
1318+
'truenorth': '',
1319+
'addrelative': 'radial-gradient(circle at 40% 68%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1320+
},
12581321
},
12591322
{
12601323
mechanic: 'swap',
@@ -1324,7 +1387,17 @@ const codcarStrat: Strat = {
13241387
mechanic: 'aoes',
13251388
description: 'Platform Outside\nRelative Right\nTrue North',
13261389
imageUrl: './strats/codcar/platform-west-aoe-spread.png',
1327-
mask: 'radial-gradient(circle at 21% 38%, black 10%, rgba(0, 0, 0, 0.4) 10%)'
1390+
mask: 'radial-gradient(circle at 21% 38%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1391+
alignmentImages: {
1392+
'original': '',
1393+
'truenorth': '',
1394+
'addrelative': './strats/codcar/platform-west-aoe-spread-rotated.png',
1395+
},
1396+
alignmentMasks: {
1397+
'original': '',
1398+
'truenorth': '',
1399+
'addrelative': 'radial-gradient(circle at 62% 21%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1400+
},
13281401
},
13291402
{
13301403
mechanic: 'swap',
@@ -1395,7 +1468,17 @@ const codcarStrat: Strat = {
13951468
mechanic: 'aoes',
13961469
description: 'Platform Outside\nRelative Right\nTrue South',
13971470
imageUrl: './strats/codcar/platform-east-aoe-spread.png',
1398-
mask: 'radial-gradient(circle at 87% 63%, black 10%, rgba(0, 0, 0, 0.4) 10%)'
1471+
mask: 'radial-gradient(circle at 87% 63%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1472+
alignmentImages: {
1473+
'original': '',
1474+
'truenorth': '',
1475+
'addrelative': './strats/codcar/platform-east-aoe-spread-rotated.png',
1476+
},
1477+
alignmentMasks: {
1478+
'original': '',
1479+
'truenorth': '',
1480+
'addrelative': 'radial-gradient(circle at 64% 13%, black 10%, rgba(0, 0, 0, 0.4) 10%)',
1481+
},
13991482
},
14001483
{
14011484
mechanic: 'swap',
@@ -1627,7 +1710,17 @@ const codcarStrat: Strat = {
16271710
mechanic: 'aoes',
16281711
description: 'Ring Outside\nRelative Right\nTrue North',
16291712
imageUrl: './strats/codcar/platform-west-aoe-spread.png',
1630-
mask: 'radial-gradient(circle at 30% 14%, black 8%, rgba(0, 0, 0, 0.4) 8%)'
1713+
mask: 'radial-gradient(circle at 30% 14%, black 8%, rgba(0, 0, 0, 0.4) 8%)',
1714+
alignmentImages: {
1715+
'original': '',
1716+
'truenorth': '',
1717+
'addrelative': './strats/codcar/platform-west-aoe-spread-rotated.png',
1718+
},
1719+
alignmentMasks: {
1720+
'original': '',
1721+
'truenorth': '',
1722+
'addrelative': 'radial-gradient(circle at 86% 30%, black 8%, rgba(0, 0, 0, 0.4) 8%)',
1723+
},
16311724
},
16321725
{
16331726
mechanic: 'swap',
@@ -1697,7 +1790,17 @@ const codcarStrat: Strat = {
16971790
mechanic: 'aoes',
16981791
description: 'Ring Outside\nRelative Left\nTrue South',
16991792
imageUrl: './strats/codcar/platform-west-aoe-spread.png',
1700-
mask: 'radial-gradient(circle at 32% 84%, black 8%, rgba(0, 0, 0, 0.4) 8%)'
1793+
mask: 'radial-gradient(circle at 32% 84%, black 8%, rgba(0, 0, 0, 0.4) 8%)',
1794+
alignmentImages: {
1795+
'original': '',
1796+
'truenorth': '',
1797+
'addrelative': './strats/codcar/platform-west-aoe-spread-rotated.png',
1798+
},
1799+
alignmentMasks: {
1800+
'original': '',
1801+
'truenorth': '',
1802+
'addrelative': 'radial-gradient(circle at 16% 32%, black 8%, rgba(0, 0, 0, 0.4) 8%)',
1803+
},
17011804
},
17021805
{
17031806
mechanic: 'swap',
@@ -1930,7 +2033,17 @@ const codcarStrat: Strat = {
19302033
mechanic: 'aoes',
19312034
description: 'Ring Outside\nRelative Right\nTrue South',
19322035
imageUrl: './strats/codcar/platform-east-aoe-spread.png',
1933-
mask: 'radial-gradient(circle at 73% 85%, black 8%, rgba(0, 0, 0, 0.4) 8%)'
2036+
mask: 'radial-gradient(circle at 73% 85%, black 8%, rgba(0, 0, 0, 0.4) 8%)',
2037+
alignmentImages: {
2038+
'original': '',
2039+
'truenorth': '',
2040+
'addrelative': './strats/codcar/platform-east-aoe-spread-rotated.png',
2041+
},
2042+
alignmentMasks: {
2043+
'original': '',
2044+
'truenorth': '',
2045+
'addrelative': 'radial-gradient(circle at 85% 27%, black 8%, rgba(0, 0, 0, 0.4) 8%)',
2046+
},
19342047
},
19352048
{
19362049
mechanic: 'swap',
@@ -2001,7 +2114,17 @@ const codcarStrat: Strat = {
20012114
mechanic: 'aoes',
20022115
description: 'Ring Outside\nRelative Left\nTrue North',
20032116
imageUrl: './strats/codcar/platform-east-aoe-spread.png',
2004-
mask: 'radial-gradient(circle at 72% 13%, black 8%, rgba(0, 0, 0, 0.4) 8%)'
2117+
mask: 'radial-gradient(circle at 72% 13%, black 8%, rgba(0, 0, 0, 0.4) 8%)',
2118+
alignmentImages: {
2119+
'original': '',
2120+
'truenorth': '',
2121+
'addrelative': './strats/codcar/platform-east-aoe-spread-rotated.png',
2122+
},
2123+
alignmentMasks: {
2124+
'original': '',
2125+
'truenorth': '',
2126+
'addrelative': 'radial-gradient(circle at 13% 27%, black 8%, rgba(0, 0, 0, 0.4) 8%)',
2127+
},
20052128
},
20062129
{
20072130
mechanic: 'swap',

‎wtfdig/static/strats/codcar/overall.png

205 KB
Loading

‎wtfdig/static/strats/codcar/platform-east-aoe-spread-rotated.png

200 KB
Loading

‎wtfdig/static/strats/codcar/platform-west-aoe-spread-rotated.png

196 KB
Loading

‎wtfdig/static/strats/raidplan/overall.png

187 KB
Loading

0 commit comments

Comments
 (0)