Skip to content

Commit 33d1d28

Browse files
DecDuckDecDuck
authored
Fix options modal and launcher on Windows (#189)
* fix: proton paths fetch on windows * fix: fetch_proton_paths on windows * fix: native launcher
1 parent 48989f3 commit 33d1d28

4 files changed

Lines changed: 193 additions & 191 deletions

File tree

‎main/components/GameOptions/Launch.vue‎

Lines changed: 2 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -22,203 +22,17 @@
2222
>
2323
</p>
2424

25-
<Listbox
26-
v-if="props.protonEnabled"
27-
as="div"
28-
v-model="model.overrideProtonPath"
29-
class="mt-6"
30-
>
31-
<ListboxLabel class="block text-sm/6 font-medium text-white"
32-
>Proton override</ListboxLabel
33-
>
34-
<div class="relative mt-2">
35-
<ListboxButton
36-
class="grid w-full cursor-default grid-cols-1 rounded-md bg-white/5 py-1.5 pr-2 pl-3 text-left text-white outline-1 -outline-offset-1 outline-white/10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500 sm:text-sm/6"
37-
>
38-
<span
39-
v-if="currentProtonPath"
40-
class="col-start-1 row-start-1 truncate pr-6"
41-
>{{ currentProtonPath.name }} ({{ currentProtonPath.path }})</span
42-
>
43-
<span
44-
v-else
45-
class="col-start-1 row-start-1 truncate pr-6 italic text-zinc-400"
46-
>No override configured</span
47-
>
48-
<ChevronUpDownIcon
49-
class="col-start-1 row-start-1 size-5 self-center justify-self-end text-zinc-400 sm:size-4"
50-
aria-hidden="true"
51-
/>
52-
</ListboxButton>
53-
54-
<transition
55-
leave-active-class="transition ease-in duration-100"
56-
leave-from-class=""
57-
leave-to-class="opacity-0"
58-
>
59-
<ListboxOptions
60-
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-800 py-1 text-base outline-1 -outline-offset-1 outline-white/10 sm:text-sm"
61-
>
62-
<ListboxOption
63-
as="template"
64-
:value="undefined"
65-
v-slot="{ active, selected }"
66-
>
67-
<li
68-
:class="[
69-
active
70-
? 'bg-blue-500 text-white outline-hidden'
71-
: 'text-white',
72-
'relative cursor-default py-2 pr-9 pl-3 select-none',
73-
]"
74-
>
75-
<span
76-
:class="[
77-
selected ? 'font-semibold' : 'font-normal',
78-
'block truncate italic',
79-
]"
80-
>Use global default</span
81-
>
82-
83-
<span
84-
v-if="selected"
85-
:class="[
86-
active ? 'text-white' : 'text-blue-400',
87-
'absolute inset-y-0 right-0 flex items-center pr-4',
88-
]"
89-
>
90-
<CheckIcon class="size-5" aria-hidden="true" />
91-
</span>
92-
</li>
93-
</ListboxOption>
94-
<h1 class="text-white text-sm font-semibold bg-zinc-900 py-2 px-2">
95-
Auto-discovered
96-
</h1>
97-
<ListboxOption
98-
as="template"
99-
v-if="protonPaths.autodiscovered.length > 0"
100-
v-for="proton in protonPaths.autodiscovered"
101-
:key="proton.path"
102-
:value="proton.path"
103-
v-slot="{ active, selected }"
104-
>
105-
<li
106-
:class="[
107-
active
108-
? 'bg-blue-500 text-white outline-hidden'
109-
: 'text-white',
110-
'relative cursor-default py-2 pr-9 pl-3 select-none',
111-
]"
112-
>
113-
<span
114-
:class="[
115-
selected ? 'font-semibold' : 'font-normal',
116-
'block truncate',
117-
]"
118-
>{{ proton.name }} ({{ proton.path }})</span
119-
>
120-
121-
<span
122-
v-if="selected"
123-
:class="[
124-
active ? 'text-white' : 'text-blue-400',
125-
'absolute inset-y-0 right-0 flex items-center pr-4',
126-
]"
127-
>
128-
<CheckIcon class="size-5" aria-hidden="true" />
129-
</span>
130-
</li>
131-
</ListboxOption>
132-
<li v-else class="italic text-zinc-400 py-2 pr-9 pl-3">
133-
No auto-discovered layers.
134-
</li>
135-
<h1 class="text-white text-sm font-semibold bg-zinc-900 py-2 px-2">
136-
Manually added
137-
</h1>
138-
<ListboxOption
139-
as="template"
140-
v-if="protonPaths.custom.length > 0"
141-
v-for="proton in protonPaths.custom"
142-
:key="proton.path"
143-
:value="proton.path"
144-
v-slot="{ active, selected }"
145-
>
146-
<li
147-
:class="[
148-
active
149-
? 'bg-blue-500 text-white outline-hidden'
150-
: 'text-white',
151-
'relative cursor-default py-2 pr-9 pl-3 select-none',
152-
]"
153-
>
154-
<span
155-
:class="[
156-
selected ? 'font-semibold' : 'font-normal',
157-
'block truncate',
158-
]"
159-
>{{ proton.name }} ({{ proton.path }})</span
160-
>
161-
162-
<span
163-
v-if="selected"
164-
:class="[
165-
active ? 'text-white' : 'text-blue-400',
166-
'absolute inset-y-0 right-0 flex items-center pr-4',
167-
]"
168-
>
169-
<CheckIcon class="size-5" aria-hidden="true" />
170-
</span>
171-
</li>
172-
</ListboxOption>
173-
<li v-else class="italic text-zinc-400 py-2 pr-9 pl-3">
174-
No manually added layers.
175-
</li>
176-
</ListboxOptions>
177-
</transition>
178-
</div>
179-
<p class="mt-2 text-sm text-zinc-400" id="launch-description">
180-
Override the Proton layer used to launch this game. You can add or
181-
remove your custom Proton layer paths in
182-
<PageWidget to="/settings/compat">
183-
<WrenchIcon class="size-3" />
184-
Settings </PageWidget
185-
>.
186-
</p>
187-
</Listbox>
25+
<ProtonSelector v-model="model" v-if="$props.protonEnabled" />
18826
</div>
18927
</template>
19028

19129
<script setup lang="ts">
192-
import { invoke } from "@tauri-apps/api/core";
193-
import type { ProtonPath } from "~/composables/game";
194-
import {
195-
Listbox,
196-
ListboxButton,
197-
ListboxLabel,
198-
ListboxOption,
199-
ListboxOptions,
200-
} from "@headlessui/vue";
201-
import { ChevronUpDownIcon } from "@heroicons/vue/16/solid";
202-
import { CheckIcon } from "@heroicons/vue/20/solid";
203-
import { WrenchIcon } from "@heroicons/vue/24/solid";
20430
import type { GameVersion } from "~/types";
31+
import ProtonSelector from "./ProtonSelector.vue";
20532
20633
const model = defineModel<GameVersion["userConfiguration"]>({ required: true });
20734
20835
const props = defineProps<{
20936
protonEnabled: boolean;
21037
}>();
211-
212-
const protonPaths = await invoke<{
213-
autodiscovered: ProtonPath[];
214-
custom: ProtonPath[];
215-
default?: string;
216-
}>("fetch_proton_paths");
217-
const currentProtonPath = computed(
218-
() =>
219-
protonPaths.autodiscovered.find(
220-
(v) => v.path == model.value.overrideProtonPath,
221-
) ??
222-
protonPaths.custom.find((v) => v.path == model.value.overrideProtonPath),
223-
);
22438
</script>

‎main/components/GameOptions/ProtonSelector.vue‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<template>
2+
<Listbox
3+
as="div"
4+
v-model="model.overrideProtonPath"
5+
class="mt-6"
6+
>
7+
<ListboxLabel class="block text-sm/6 font-medium text-white"
8+
>Proton override</ListboxLabel
9+
>
10+
<div class="relative mt-2">
11+
<ListboxButton
12+
class="grid w-full cursor-default grid-cols-1 rounded-md bg-white/5 py-1.5 pr-2 pl-3 text-left text-white outline-1 -outline-offset-1 outline-white/10 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500 sm:text-sm/6"
13+
>
14+
<span
15+
v-if="currentProtonPath"
16+
class="col-start-1 row-start-1 truncate pr-6"
17+
>{{ currentProtonPath.name }} ({{ currentProtonPath.path }})</span
18+
>
19+
<span
20+
v-else
21+
class="col-start-1 row-start-1 truncate pr-6 italic text-zinc-400"
22+
>No override configured</span
23+
>
24+
<ChevronUpDownIcon
25+
class="col-start-1 row-start-1 size-5 self-center justify-self-end text-zinc-400 sm:size-4"
26+
aria-hidden="true"
27+
/>
28+
</ListboxButton>
29+
30+
<transition
31+
leave-active-class="transition ease-in duration-100"
32+
leave-from-class=""
33+
leave-to-class="opacity-0"
34+
>
35+
<ListboxOptions
36+
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-800 py-1 text-base outline-1 -outline-offset-1 outline-white/10 sm:text-sm"
37+
>
38+
<ListboxOption
39+
as="template"
40+
:value="undefined"
41+
v-slot="{ active, selected }"
42+
>
43+
<li
44+
:class="[
45+
active ? 'bg-blue-500 text-white outline-hidden' : 'text-white',
46+
'relative cursor-default py-2 pr-9 pl-3 select-none',
47+
]"
48+
>
49+
<span
50+
:class="[
51+
selected ? 'font-semibold' : 'font-normal',
52+
'block truncate italic',
53+
]"
54+
>Use global default</span
55+
>
56+
57+
<span
58+
v-if="selected"
59+
:class="[
60+
active ? 'text-white' : 'text-blue-400',
61+
'absolute inset-y-0 right-0 flex items-center pr-4',
62+
]"
63+
>
64+
<CheckIcon class="size-5" aria-hidden="true" />
65+
</span>
66+
</li>
67+
</ListboxOption>
68+
<h1 class="text-white text-sm font-semibold bg-zinc-900 py-2 px-2">
69+
Auto-discovered
70+
</h1>
71+
<ListboxOption
72+
as="template"
73+
v-if="protonPaths.autodiscovered.length > 0"
74+
v-for="proton in protonPaths.autodiscovered"
75+
:key="proton.path"
76+
:value="proton.path"
77+
v-slot="{ active, selected }"
78+
>
79+
<li
80+
:class="[
81+
active ? 'bg-blue-500 text-white outline-hidden' : 'text-white',
82+
'relative cursor-default py-2 pr-9 pl-3 select-none',
83+
]"
84+
>
85+
<span
86+
:class="[
87+
selected ? 'font-semibold' : 'font-normal',
88+
'block truncate',
89+
]"
90+
>{{ proton.name }} ({{ proton.path }})</span
91+
>
92+
93+
<span
94+
v-if="selected"
95+
:class="[
96+
active ? 'text-white' : 'text-blue-400',
97+
'absolute inset-y-0 right-0 flex items-center pr-4',
98+
]"
99+
>
100+
<CheckIcon class="size-5" aria-hidden="true" />
101+
</span>
102+
</li>
103+
</ListboxOption>
104+
<li v-else class="italic text-zinc-400 py-2 pr-9 pl-3">
105+
No auto-discovered layers.
106+
</li>
107+
<h1 class="text-white text-sm font-semibold bg-zinc-900 py-2 px-2">
108+
Manually added
109+
</h1>
110+
<ListboxOption
111+
as="template"
112+
v-if="protonPaths.custom.length > 0"
113+
v-for="proton in protonPaths.custom"
114+
:key="proton.path"
115+
:value="proton.path"
116+
v-slot="{ active, selected }"
117+
>
118+
<li
119+
:class="[
120+
active ? 'bg-blue-500 text-white outline-hidden' : 'text-white',
121+
'relative cursor-default py-2 pr-9 pl-3 select-none',
122+
]"
123+
>
124+
<span
125+
:class="[
126+
selected ? 'font-semibold' : 'font-normal',
127+
'block truncate',
128+
]"
129+
>{{ proton.name }} ({{ proton.path }})</span
130+
>
131+
132+
<span
133+
v-if="selected"
134+
:class="[
135+
active ? 'text-white' : 'text-blue-400',
136+
'absolute inset-y-0 right-0 flex items-center pr-4',
137+
]"
138+
>
139+
<CheckIcon class="size-5" aria-hidden="true" />
140+
</span>
141+
</li>
142+
</ListboxOption>
143+
<li v-else class="italic text-zinc-400 py-2 pr-9 pl-3">
144+
No manually added layers.
145+
</li>
146+
</ListboxOptions>
147+
</transition>
148+
</div>
149+
<p class="mt-2 text-sm text-zinc-400" id="launch-description">
150+
Override the Proton layer used to launch this game. You can add or remove
151+
your custom Proton layer paths in
152+
<PageWidget to="/settings/compat">
153+
<WrenchIcon class="size-3" />
154+
Settings </PageWidget
155+
>.
156+
</p>
157+
</Listbox>
158+
</template>
159+
160+
<script setup lang="ts">
161+
import { invoke } from "@tauri-apps/api/core";
162+
import type { ProtonPath } from "~/composables/game";
163+
import {
164+
Listbox,
165+
ListboxButton,
166+
ListboxLabel,
167+
ListboxOption,
168+
ListboxOptions,
169+
} from "@headlessui/vue";
170+
import { ChevronUpDownIcon } from "@heroicons/vue/16/solid";
171+
import { CheckIcon } from "@heroicons/vue/20/solid";
172+
import { WrenchIcon } from "@heroicons/vue/24/solid";
173+
import type { GameVersion } from "~/types";
174+
175+
const model = defineModel<GameVersion["userConfiguration"]>({ required: true });
176+
177+
const protonPaths = await invoke<{
178+
autodiscovered: ProtonPath[];
179+
custom: ProtonPath[];
180+
default?: string;
181+
}>("fetch_proton_paths");
182+
const currentProtonPath = computed(
183+
() =>
184+
protonPaths.autodiscovered.find(
185+
(v) => v.path == model.value.overrideProtonPath,
186+
) ??
187+
protonPaths.custom.find((v) => v.path == model.value.overrideProtonPath),
188+
);
189+
</script>

0 commit comments

Comments
 (0)