Skip to content

Commit 3e9b50f

Browse files
budak7273budak7273
committed
feat: mod network disclosure edit. wrap mod edit sections in cards where relevant.
1 parent 9987255 commit 3e9b50f

File tree

8 files changed

+133
-52
lines changed

8 files changed

+133
-52
lines changed

‎src/gql/mods/edit_mod.graphql‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ mutation EditMod($modId: ModID!, $mod: UpdateMod!) {
3434
name
3535
description
3636
}
37-
toggle_network_use
3837
network_use_disclosure
3938
}
4039
}

‎src/gql/mods/mod.graphql‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,6 @@ query GetMod($mod: String!) {
9595
name
9696
description
9797
}
98-
toggle_network_use
9998
network_use_disclosure
10099
}
101100
}

‎src/lib/components/mods/ModForm.svelte‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
import ModCompatibility from '$lib/components/mods/compatibility/ModCompatibilityEdit.svelte';
1313
import { getTranslate } from '@tolgee/svelte';
1414
import { SlideToggle } from '@skeletonlabs/skeleton';
15+
import ModNetworkDisclosureEdit from './disclosure/ModNetworkDisclosureEdit.svelte';
1516
1617
export const { t } = getTranslate();
1718
@@ -173,8 +174,9 @@
173174
<span class="validation-message">{message || ''}</span>
174175
</ValidationMessage>
175176
</div>
177+
176178
{#if editing}
177-
<div>
179+
<div class="card p-4">
178180
<SlideToggle
179181
name="slider-label"
180182
bind:checked={editCompatibility}
@@ -183,42 +185,48 @@
183185
}}>
184186
{$t('compatibility-info.edit')}
185187
</SlideToggle>
188+
189+
{#if editCompatibility}
190+
<ModCompatibility bind:compatibilityInfo={$data.compatibility} />
191+
{/if}
186192
</div>
187193

188-
{#if editCompatibility}
189-
<ModCompatibility bind:compatibilityInfo={$data.compatibility} />
190-
{/if}
194+
<div class="card p-4">
195+
<ModNetworkDisclosureEdit bind:disclosure={$data.network_use_disclosure} />
196+
</div>
191197

192-
<div class="grid grid-flow-row gap-2">
193-
<div class="flex items-center">
194-
<h4 class="mr-4">{$t('authors')}</h4>
195-
<button class="variant-ghost-primary btn" type="button" on:click={addAuthor}>
196-
<span>{$t('add')}</span>
197-
</button>
198-
</div>
199-
{#each $data.authors as author, i}
200-
<div class="flex items-end">
201-
{#if $data.authors[i].user_id}
202-
<div class="p-2">
203-
<ModAuthor id={$data.authors[i].user_id} />
204-
</div>
205-
{/if}
206-
<label class="label">
207-
<span>User ID</span>
208-
<input
209-
type="text"
210-
bind:value={$data.authors[i].user_id}
211-
required
212-
class="input p-2"
213-
disabled={author.role === 'creator'} />
214-
</label>
215-
{#if author.role !== 'creator'}
216-
<button class="variant-ghost-primary btn" type="button" on:click={() => removeAuthor(i)}>
217-
<span>{$t('remove')}</span>
218-
</button>
219-
{/if}
198+
<div class="card p-4">
199+
<div class="grid grid-flow-row gap-2">
200+
<div class="flex items-center">
201+
<h4 class="mr-4">{$t('authors')}</h4>
202+
<button class="variant-ghost-primary btn" type="button" on:click={addAuthor}>
203+
<span>{$t('add')}</span>
204+
</button>
220205
</div>
221-
{/each}
206+
{#each $data.authors as author, i}
207+
<div class="flex items-end">
208+
{#if $data.authors[i].user_id}
209+
<div class="p-2">
210+
<ModAuthor id={$data.authors[i].user_id} />
211+
</div>
212+
{/if}
213+
<label class="label">
214+
<span>User ID</span>
215+
<input
216+
type="text"
217+
bind:value={$data.authors[i].user_id}
218+
required
219+
class="input p-2"
220+
disabled={author.role === 'creator'} />
221+
</label>
222+
{#if author.role !== 'creator'}
223+
<button class="variant-ghost-primary btn" type="button" on:click={() => removeAuthor(i)}>
224+
<span>{$t('remove')}</span>
225+
</button>
226+
{/if}
227+
</div>
228+
{/each}
229+
</div>
222230
</div>
223231
{/if}
224232

‎src/lib/components/mods/ModNetworkDisclosure.svelte‎ renamed to ‎src/lib/components/mods/disclosure/ModNetworkDisclosure.svelte‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
22
import type { Mod } from '$lib/generated';
33
import { markdown } from '$lib/utils/markdown';
4+
import { valueForNoUsageDisclosure, valueForUnspecifiedDisclosure } from '$lib/utils/mod';
45
import { getTranslate, T } from '@tolgee/svelte';
56
6-
export let mod!: Pick<Mod, 'toggle_network_use' | 'network_use_disclosure'>;
7+
export let mod!: Pick<Mod, 'network_use_disclosure'>;
78
89
export const { t } = getTranslate();
910
</script>
@@ -16,21 +17,18 @@
1617
title={$t('mod.network_disclosure.header.tooltip')}>
1718
<T keyName="mod.network_disclosure.header" />
1819
</h3>
19-
<!-- TODO should we keep the boolean? -->
20-
{#if mod?.toggle_network_use}
21-
<p class="italic"><T keyName="mod.network_disclosure.intro_message" /></p>
22-
{#if mod?.network_use_disclosure}
23-
<div>
24-
{#await markdown(mod.network_use_disclosure) then rendered}
25-
<!-- eslint-disable-next-line -->
26-
{@html rendered}
27-
{/await}
28-
</div>
29-
{:else}
30-
<p class="italic">ERROR CASE - bool is true but no message, ideally this should be impossible</p>
31-
{/if}
32-
{:else}
20+
{#if mod?.network_use_disclosure === valueForUnspecifiedDisclosure}
21+
<p><T keyName="mod.network_disclosure.legacy_none_specified" /></p>
22+
{:else if mod.network_use_disclosure === valueForNoUsageDisclosure}
3323
<p class="italic"><T keyName="mod.network_disclosure.no_network_usage" /></p>
24+
{:else}
25+
<p class="italic"><T keyName="mod.network_disclosure.intro_message" /></p>
26+
<div>
27+
{#await markdown(mod.network_use_disclosure) then rendered}
28+
<!-- eslint-disable-next-line -->
29+
{@html rendered}
30+
{/await}
31+
</div>
3432
{/if}
3533
</div>
3634
</section>

‎src/lib/components/mods/disclosure/ModNetworkDisclosureEdit.svelte‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<script lang="ts">
2+
import { valueForUnspecifiedDisclosure, valueForNoUsageDisclosure } from '$lib/utils/mod';
3+
import { getTolgee, getTranslate, T } from '@tolgee/svelte';
4+
5+
// eslint bug? https://stackoverflow.com/questions/63961803/eslint-says-all-enums-in-typescript-app-are-already-declared-in-the-upper-scope
6+
// eslint-disable-next-line no-shadow
7+
enum NetworkDisclosureState {
8+
Unspecified = 'Unspecified',
9+
NoNetworkUsage = 'Does not contact external networks',
10+
YesNetworkUsage = 'Contacts external networks'
11+
}
12+
13+
const networkDisclosureStateDescriptionKeys: Record<NetworkDisclosureState, string> = {
14+
Unspecified: 'mod.network_disclosure.state.unspecified.description',
15+
'Does not contact external networks': 'mod.network_disclosure.state.no_network_usage.description',
16+
'Contacts external networks': 'mod.network_disclosure.state.yes_network_usage.description'
17+
};
18+
19+
export let disclosure: string | null = null;
20+
21+
let disclosureState = NetworkDisclosureState.Unspecified;
22+
disclosureState =
23+
disclosure === null
24+
? NetworkDisclosureState.Unspecified
25+
: disclosure.length === 0
26+
? NetworkDisclosureState.NoNetworkUsage
27+
: NetworkDisclosureState.YesNetworkUsage;
28+
29+
let oldDisclosure: string | null = null;
30+
oldDisclosure = disclosure;
31+
32+
const onStatePickerChange = () => {
33+
if (disclosure?.length > 0) {
34+
// Hold onto the user's previously entered value if they explore other dropdown options.
35+
oldDisclosure = disclosure;
36+
}
37+
38+
disclosure = {
39+
[NetworkDisclosureState.Unspecified]: valueForUnspecifiedDisclosure,
40+
[NetworkDisclosureState.NoNetworkUsage]: valueForNoUsageDisclosure,
41+
[NetworkDisclosureState.YesNetworkUsage]: oldDisclosure
42+
}[disclosureState];
43+
};
44+
45+
export const { t } = getTranslate();
46+
export const tolgee = getTolgee().value;
47+
</script>
48+
49+
<label class="label">
50+
<span class="underline decoration-dotted" title={$t('mod.network_disclosure.header.tooltip')}
51+
><T keyName="mod.network_disclosure.header" /></span>
52+
<select class="select" style="margin-bottom: 10px" bind:value={disclosureState} on:change={onStatePickerChange}>
53+
{#each Object.values(NetworkDisclosureState) as state}
54+
<option value={state}>{state}</option>
55+
{/each}
56+
</select>
57+
<p
58+
class="compatibility-state-description pb-4 {disclosureState === NetworkDisclosureState.Unspecified
59+
? 'text-warning-500'
60+
: ''}">
61+
<T keyName={networkDisclosureStateDescriptionKeys[disclosureState]} />
62+
</p>
63+
</label>
64+
{#if disclosureState == NetworkDisclosureState.YesNetworkUsage}
65+
<label class="label">
66+
<span><T keyName="mod.network_disclosure.developer.description.header" /></span>
67+
<textarea
68+
class="textarea p-4"
69+
bind:value={disclosure}
70+
placeholder={$t('mod.network_disclosure.developer.description.placeholder')} />
71+
</label>
72+
{/if}

‎src/lib/models/mods.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export type ModData = {
2929
hidden: boolean;
3030
tagIDs?: string[];
3131
tags?: Tag[];
32+
network_use_disclosure?: string;
3233
};
3334

3435
export const modSchema = zod.object({
@@ -72,5 +73,6 @@ export const modSchema = zod.object({
7273
})
7374
),
7475
hidden: zod.boolean(),
75-
tagIDs: zod.optional(zod.string().array())
76+
tagIDs: zod.optional(zod.string().array()),
77+
network_use_disclosure: zod.ostring().nullable()
7678
});

‎src/lib/utils/mod.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import satisfies from 'semver/functions/satisfies.js';
22
import minVersion from 'semver/ranges/min-version.js';
33
import type { Maybe, Version } from '$lib/generated';
44

5+
export const valueForUnspecifiedDisclosure: null = null;
6+
export const valueForNoUsageDisclosure = '';
7+
58
export const modStatus = (latestVersions?: {
69
alpha?: Maybe<Pick<Version, 'game_version'>>;
710
beta?: Maybe<Pick<Version, 'game_version'>>;

‎src/routes/mod/[modId]/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
import EditCompatibilityModal from '$lib/modals/EditCompatibilityModal.svelte';
1919
import Page404 from '$lib/components/general/Page404.svelte';
2020
import { getTranslate } from '@tolgee/svelte';
21-
import ModNetworkDisclosure from '$lib/components/mods/ModNetworkDisclosure.svelte';
21+
import ModNetworkDisclosure from '$lib/components/mods/disclosure/ModNetworkDisclosure.svelte';
2222
2323
export let data: PageData;
2424

0 commit comments

Comments
 (0)