Skip to content

Commit 69b351f

Browse files
budak7273budak7273
committed
WIP modals for smm2->smm3 user migration, first time user
1 parent f73b0ac commit 69b351f

File tree

6 files changed

+290
-2
lines changed

6 files changed

+290
-2
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Mod manager for [Satisfactory](https://www.satisfactorygame.com/).
44
Handles all the steps of installing mods for you.
55

6-
Implemented in [Wails](https://wails.io/).
6+
Implemented in [Wails](https://wails.io/) using [Svelte](https://svelte.dev/) and [Skeleton](https://www.skeleton.dev/).
77

88
## Installation and Usage
99

‎frontend/src/App.svelte‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
import ErrorDetails from '$lib/components/modals/ErrorDetails.svelte';
1414
import ErrorModal from '$lib/components/modals/ErrorModal.svelte';
1515
import ExternalInstallMod from '$lib/components/modals/ExternalInstallMod.svelte';
16+
import MigrationModal from '$lib/components/modals/MigrationModal.svelte';
1617
import { supportedProgressTypes } from '$lib/components/modals/ProgressModal.svelte';
18+
import FirstTimeSetupModal from '$lib/components/modals/first-time-setup/FirstTimeSetupModal.svelte';
1719
import { modalRegistry } from '$lib/components/modals/modalsRegistry';
1820
import ImportProfile from '$lib/components/modals/profiles/ImportProfile.svelte';
1921
import { isUpdateOnStart } from '$lib/components/modals/smmUpdate/smmUpdate';
@@ -163,6 +165,34 @@
163165
$error = null;
164166
}
165167
168+
const displayMigrationModal = true; // TODO testing the migrate popup, what should the real condition be?
169+
170+
$: if (displayMigrationModal) {
171+
modalStore.trigger({
172+
type: 'component',
173+
component: {
174+
ref: MigrationModal,
175+
},
176+
meta: {
177+
persistent: true,
178+
},
179+
});
180+
}
181+
182+
const firstTimeSetupModal = true; // TODO testing the first time setup popup, what should the real condition be?
183+
184+
$: if (firstTimeSetupModal) {
185+
modalStore.trigger({
186+
type: 'component',
187+
component: {
188+
ref: FirstTimeSetupModal,
189+
},
190+
meta: {
191+
persistent: true,
192+
},
193+
});
194+
}
195+
166196
EventsOn('externalInstallMod', (modReference: string, version: string) => {
167197
if (!modReference) return;
168198
modalStore.trigger({

‎frontend/src/lib/components/left-bar/LeftBar.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -364,7 +364,9 @@
364364
</button>
365365
</div>
366366
<div class="flex flex-col gap-2">
367-
<span class="pl-4 sticky top-0 z-[1] bg-surface-50-900-token">Links</span>
367+
<span class="pl-4 sticky top-0 z-[1] bg-surface-50-900-token">
368+
<T defaultValue="Links" keyName="left-bar.links"/>
369+
</span>
368370
<button
369371
class="btn w-full bg-surface-200-700-token px-4 h-8 text-sm"
370372
on:click={() => BrowserOpenURL($siteURL)}>

‎frontend/src/lib/components/modals/MigrationModal.svelte‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script lang="ts">
2+
import { T } from '@tolgee/svelte';
3+
4+
import { BrowserOpenURL } from '$wailsjs/runtime/runtime';
5+
6+
export let parent: { onClose: () => void };
7+
8+
const OpenWelcomeGuide = () => {
9+
BrowserOpenURL('https://docs.ficsit.app/satisfactory-modding/latest/ForUsers/Welcome.html');
10+
};
11+
</script>
12+
13+
<div
14+
style="max-height: calc(100vh - 3rem); max-width: calc(100vw - 3rem);"
15+
class="w-[48rem] card flex flex-col gap-6"
16+
>
17+
<header class="card-header font-bold text-2xl text-center">
18+
<T defaultValue="Welcome to Satisfactory Mod Manager Version 3!" keyName="smm2_migration.title" />
19+
</header>
20+
<section class="px-4">
21+
<p class="text-base text-center">
22+
<T
23+
defaultValue="We've made a lot of improvements in this version. Here are some of the highlights:"
24+
keyName="smm2_migration.intro"
25+
/>
26+
</p>
27+
</section>
28+
<section class="px-4 overflow-y-auto">
29+
<dl class="list-dl">
30+
<div>
31+
<span class="badge bg-primary-800 text-lg">+</span>
32+
<span class="flex-auto">
33+
<dt class="text-lg"><T defaultValue="Dedicated server management" keyName="smm2_migration.feature.servers" /></dt>
34+
</span>
35+
</div>
36+
<div>
37+
<span class="badge bg-primary-800 text-lg">+</span>
38+
<span class="flex-auto">
39+
<dt class="text-lg"><T defaultValue="User interface refresh" keyName="smm2_migration.feature.ui" /></dt>
40+
</span>
41+
</div>
42+
<div>
43+
<span class="badge bg-primary-800 text-lg">+</span>
44+
<span class="flex-auto">
45+
<dt class="text-lg"><T defaultValue="Translation support" keyName="smm2_migration.feature.translation" /></dt>
46+
</span>
47+
</div>
48+
<div>
49+
<span class="badge bg-primary-800 text-lg">+</span>
50+
<span class="flex-auto">
51+
<dt class="text-lg"><T defaultValue="Action queueing" keyName="smm2_migration.feature.queue" /></dt>
52+
</span>
53+
</div>
54+
<div>
55+
<span class="badge bg-primary-800 text-lg">+</span>
56+
<span class="flex-auto">
57+
<dt class="text-lg"><T defaultValue="Native Linux + Mac support" keyName="smm2_migration.feature.platform_support" /></dt>
58+
</span>
59+
</div>
60+
<div>
61+
<span class="badge bg-tertiary-800 text-lg">+</span>
62+
<span class="flex-auto">
63+
<dt class="text-lg"><T defaultValue="Improved performance" keyName="smm2_migration.feature.performance" /></dt>
64+
</span>
65+
</div>
66+
<div>
67+
<span class="badge bg-warning-800 text-lg">⚠</span>
68+
<span class="flex-auto">
69+
<dt class="text-lg"><T defaultValue="New profile format" keyName="smm2_migration.feature.profile_format" /></dt>
70+
</span>
71+
</div>
72+
</dl>
73+
</section>
74+
<section class="px-4">
75+
<p class="text-base text-center">
76+
<button
77+
class="btn text-primary-600 variant-ringed"
78+
on:click={OpenWelcomeGuide}
79+
>
80+
<T
81+
defaultValue="Open the SMM2 -> SMM3 Migration Guide"
82+
keyName="smm2_migration.open_guide"
83+
/>
84+
</button>
85+
</p>
86+
</section>
87+
<footer class="card-footer">
88+
<button class="btn" on:click={parent.onClose}>
89+
<T defaultValue="Close" keyName="common.close" />
90+
</button>
91+
</footer>
92+
</div>

‎frontend/src/lib/components/modals/first-time-setup/FirstTimeSetupModal.svelte‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<script lang="ts">
2+
import { mdiTimerSandFull, mdiWeb } from '@mdi/js';
3+
import { SlideToggle } from '@skeletonlabs/skeleton';
4+
import { T } from '@tolgee/svelte';
5+
6+
import LanguageSelector from './LanguageSelector.svelte';
7+
8+
import SvgIcon from '$lib/components/SVGIcon.svelte';
9+
import { queueAutoStart } from '$lib/store/settingsStore';
10+
import { BrowserOpenURL } from '$wailsjs/runtime/runtime';
11+
12+
export let parent: { onClose: () => void };
13+
14+
const OpenWelcomeGuide = () => {
15+
BrowserOpenURL('https://docs.ficsit.app/satisfactory-modding/latest/ForUsers/Welcome.html');
16+
};
17+
</script>
18+
19+
<div
20+
style="max-height: calc(100vh - 3rem); max-width: calc(100vw - 3rem);"
21+
class="w-[48rem] card flex flex-col gap-6"
22+
>
23+
<header class="card-header font-bold text-2xl text-center">
24+
<T defaultValue="Welcome to the Satisfactory Mod Manager!" keyName="first_time_setup.title" />
25+
</header>
26+
<section class="px-4">
27+
<p class="text-base text-center">
28+
<T
29+
defaultValue="Select your preferences to get started."
30+
keyName="first_time_setup.intro"
31+
/>
32+
</p>
33+
</section>
34+
<section class="px-4 overflow-y-auto">
35+
<dl class="list-dl">
36+
<div>
37+
<span class="badge bg-tertiary-500">
38+
<SvgIcon
39+
class="h-5 w-5"
40+
icon={mdiTimerSandFull}
41+
/>
42+
</span>
43+
<span class="flex-auto">
44+
<dt class="text-lg"><T defaultValue="When I add or remove a mod, or switch profiles..." keyName="first_time_setup.option.queue-auto-start.title" /></dt>
45+
<dd class="text-base">
46+
<span class="flex-auto">
47+
<SlideToggle
48+
name="slider-queue"
49+
active="bg-primary-600"
50+
bind:checked={$queueAutoStart}>
51+
<span>
52+
{#if $queueAutoStart}
53+
<T
54+
defaultValue="Apply the change immediately."
55+
keyName="first_time_setup.option.queue-auto-start.enabled"
56+
/>
57+
{:else}
58+
<T
59+
defaultValue='Wait for me to press "Apply" to apply the change.'
60+
keyName="first_time_setup.option.queue-auto-start.enabled"
61+
/>
62+
{/if}
63+
</span>
64+
</SlideToggle>
65+
</span>
66+
</span>
67+
</div>
68+
<div>
69+
<span class="badge bg-tertiary-500 text-lg">
70+
<SvgIcon
71+
class="h-5 w-5"
72+
icon={mdiWeb}
73+
/>
74+
</span>
75+
<span class="flex-auto">
76+
<dt class="text-lg"><T defaultValue="Use this language where available:" keyName="first_time_setup.option.language.title" /></dt>
77+
<dd class="text-base">
78+
<LanguageSelector />
79+
</span>
80+
</div>
81+
</dl>
82+
</section>
83+
<section class="px-4">
84+
<p class="text-base text-center">
85+
<T
86+
defaultValue='Change these settings at any time in the "Mod Manager Settings" menu.'
87+
keyName="first_time_setup.change_later_hint"
88+
/>
89+
</p>
90+
</section>
91+
<section class="px-4">
92+
<p class="text-base text-center">
93+
<button
94+
class="btn text-primary-600 variant-ringed"
95+
on:click={OpenWelcomeGuide}
96+
>
97+
<T
98+
defaultValue="Open the Welcome Guide"
99+
keyName="first_time_setup.open_welcome_guide"
100+
/>
101+
</button>
102+
</p>
103+
</section>
104+
<footer class="card-footer">
105+
<button class="btn" on:click={parent.onClose}>
106+
<T defaultValue="Close" keyName="common.close" />
107+
</button>
108+
</footer>
109+
</div>

‎frontend/src/lib/components/modals/first-time-setup/LanguageSelector.svelte‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<script lang="ts">
2+
import Select from '$lib/components/Select.svelte';
3+
import { i18n } from '$lib/generated';
4+
import { language } from '$lib/store/settingsStore';
5+
6+
let languages: string[] = Object.keys(i18n);
7+
8+
type DropdownItem = {
9+
value: string;
10+
label: string;
11+
};
12+
13+
function prepLocale(locale: string) {
14+
return {
15+
value: locale,
16+
label: localeName(locale),
17+
};
18+
}
19+
20+
let dropdownItemData = languages.map(prepLocale);
21+
22+
function localeName(locale: string) {
23+
if (!locale) return 'N/A';
24+
return new Intl.DisplayNames([locale], { type: 'language' }).of(locale) ?? `Error:${locale}`;
25+
}
26+
27+
async function languageSelectChanged(selection: CustomEvent<DropdownItem>) {
28+
$language = selection.detail.value;
29+
}
30+
</script>
31+
32+
<!-- TODO the formatting on this is totally botched, isn't going vertical, is starting open? -->
33+
<Select
34+
name="languageCombobox"
35+
class="w-full h-15"
36+
buttonClass="bg-surface-200-700-token px-4 text-sm"
37+
itemActiveClass="!bg-surface-300/20"
38+
itemClass="bg-surface-50-900-token"
39+
items={dropdownItemData}
40+
menuClass="bg-surface-50-900-token"
41+
42+
value={prepLocale($language) ?? 'UNSET'}
43+
on:change={languageSelectChanged}
44+
>
45+
<svelte:fragment slot="item" let:item>
46+
<span>{item.label}</span>
47+
</svelte:fragment>
48+
<!-- TODO: dynamic flags
49+
<svelte:fragment slot="itemTrail" let:item>
50+
<span slot="lead" class="h-5 w-5 block">
51+
{localeFlag(item.value)}
52+
</span>
53+
</svelte:fragment>
54+
-->
55+
</Select>

0 commit comments

Comments
 (0)