DefaultInstanceSettings.vue

<script setup lang="ts">
import {
	ButtonStyled,
	defineMessages,
	injectNotificationManager,
	Slider,
	StyledInput,
	Toggle,
	useVIntl,
} from '@modrinth/ui'
import { ref, watch } from 'vue'

import useMemorySlider from '@/composables/useMemorySlider'
import { ensure_default_options_file, get, set } from '@/helpers/settings.ts'
import { openPath } from '@/helpers/utils.js'

const { handleError } = injectNotificationManager()
const { formatMessage } = useVIntl()

const defaultOptionsMessages = defineMessages({
	title: {
		id: 'app.settings.default-options.title',
		defaultMessage: 'Default options.txt',
	},
	description: {
		id: 'app.settings.default-options.description',
		defaultMessage:
			'This file is copied to every new instance. Edit it to set default keybinds and other options.',
	},
	openFileLocation: {
		id: 'app.settings.default-options.open-file-location',
		defaultMessage: 'Open file location',
	},
})

async function openDefaultOptionsLocation() {
	try {
		const path = await ensure_default_options_file()
		await openPath(path)
	} catch (e) {
		handleError(e)
	}
}

const fetchSettings = await get()
fetchSettings.launchArgs = fetchSettings.extra_launch_args.join(' ')
fetchSettings.envVars = fetchSettings.custom_env_vars.map((x) => x.join('=')).join(' ')

const settings = ref(fetchSettings)

const { maxMemory, snapPoints } = (await useMemorySlider().catch(handleError)) as unknown as {
	maxMemory: number
	snapPoints: number[]
}

watch(
	settings,
	async () => {
		const setSettings = JSON.parse(JSON.stringify(settings.value))

		setSettings.extra_launch_args = setSettings.launchArgs.trim().split(/\s+/).filter(Boolean)
		setSettings.custom_env_vars = setSettings.envVars
			.trim()
			.split(/\s+/)
			.filter(Boolean)
			.map((x) => x.split('=').filter(Boolean))

		if (!setSettings.hooks.pre_launch) {
			setSettings.hooks.pre_launch = null
		}
		if (!setSettings.hooks.wrapper) {
			setSettings.hooks.wrapper = null
		}
		if (!setSettings.hooks.post_exit) {
			setSettings.hooks.post_exit = null
		}

		if (!setSettings.custom_dir) {
			setSettings.custom_dir = null
		}

		await set(setSettings)
	},
	{ deep: true },
)
</script>

<template>
	<div>
		<h2 class="m-0 text-lg font-extrabold text-contrast">
			{{ formatMessage(defaultOptionsMessages.title) }}
		</h2>
		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
			{{ formatMessage(defaultOptionsMessages.description) }}
		</p>
		<div class="mt-2 flex flex-wrap gap-2">
			<ButtonStyled>
				<button type="button" @click="openDefaultOptionsLocation">
					{{ formatMessage(defaultOptionsMessages.openFileLocation) }}
				</button>
			</ButtonStyled>
		</div>

		<hr class="mt-4 bg-button-border border-none h-[1px]" />

		<h2 class="m-0 text-lg font-extrabold text-contrast">Window size</h2>

		<div class="flex items-center justify-between gap-4">
			<div>
				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Fullscreen</h3>
				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
					Overwrites the options.txt file to start in full screen when launched.
				</p>
			</div>

			<Toggle id="fullscreen" v-model="settings.force_fullscreen" />
		</div>

		<div class="flex items-center justify-between gap-4">
			<div>
				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Width</h3>
				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
					The width of the game window when launched.
				</p>
			</div>

			<StyledInput
				id="width"
				v-model="settings.game_resolution[0]"
				:disabled="settings.force_fullscreen"
				autocomplete="off"
				type="number"
				placeholder="Enter width..."
			/>
		</div>

		<div class="flex items-center justify-between gap-4">
			<div>
				<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Height</h3>
				<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
					The height of the game window when launched.
				</p>
			</div>

			<StyledInput
				id="height"
				v-model="settings.game_resolution[1]"
				:disabled="settings.force_fullscreen"
				autocomplete="off"
				type="number"
				placeholder="Enter height..."
			/>
		</div>

		<hr class="mt-4 bg-button-border border-none h-[1px]" />

		<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Memory allocated</h2>
		<p class="m-0 mt-1 leading-tight">The memory allocated to each instance when it is ran.</p>
		<Slider
			id="max-memory"
			v-model="settings.memory.maximum"
			:min="512"
			:max="maxMemory"
			:step="64"
			:snap-points="snapPoints"
			:snap-range="512"
			unit="MB"
		/>

		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Java arguments</h2>
		<StyledInput
			id="java-args"
			v-model="settings.launchArgs"
			autocomplete="off"
			type="text"
			placeholder="Enter java arguments..."
			wrapper-class="w-full"
		/>

		<h2 class="mt-4 mb-2 text-lg font-extrabold text-contrast">Environmental variables</h2>
		<StyledInput
			id="env-vars"
			v-model="settings.envVars"
			autocomplete="off"
			type="text"
			placeholder="Enter environmental variables..."
			wrapper-class="w-full"
		/>

		<hr class="mt-4 bg-button-border border-none h-[1px]" />

		<h2 class="mt-4 m-0 text-lg font-extrabold text-contrast">Hooks</h2>

		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Pre launch</h3>
		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran before the instance is launched.</p>
		<StyledInput
			id="pre-launch"
			v-model="settings.hooks.pre_launch"
			autocomplete="off"
			type="text"
			placeholder="Enter pre-launch command..."
			wrapper-class="w-full"
		/>

		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Wrapper</h3>
		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">
			Wrapper command for launching Minecraft.
		</p>
		<StyledInput
			id="wrapper"
			v-model="settings.hooks.wrapper"
			autocomplete="off"
			type="text"
			placeholder="Enter wrapper command..."
			wrapper-class="w-full"
		/>

		<h3 class="mt-2 m-0 text-base font-extrabold text-primary">Post exit</h3>
		<p class="m-0 mt-1 mb-2 leading-tight text-secondary">Ran after the game closes.</p>
		<StyledInput
			id="post-exit"
			v-model="settings.hooks.post_exit"
			autocomplete="off"
			type="text"
			placeholder="Enter post-exit command..."
			wrapper-class="w-full"
		/>
	</div>
</template>