AstralRinth/apps/app-frontend/src/components/ui/instance_settings/WindowSettings.vue

<script setup lang="ts">
import { Checkbox, injectNotificationManager, Toggle } from '@modrinth/ui'
import { defineMessages, useVIntl } from '@vintl/vintl'
import { computed, type Ref, ref, watch } from 'vue'

import { edit } from '@/helpers/profile'
import { get } from '@/helpers/settings.ts'

import type { AppSettings, InstanceSettingsTabProps } from '../../../helpers/types'

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

const props = defineProps<InstanceSettingsTabProps>()

const globalSettings = (await get().catch(handleError)) as AppSettings

const overrideWindowSettings = ref(
	!!props.instance.game_resolution || !!props.instance.force_fullscreen,
)
const resolution: Ref<[number, number]> = ref(
	props.instance.game_resolution ?? (globalSettings.game_resolution.slice() as [number, number]),
)
const fullscreenSetting: Ref<boolean> = ref(
	props.instance.force_fullscreen ?? globalSettings.force_fullscreen,
)

const editProfileObject = computed(() => {
	const editProfile: {
		force_fullscreen?: boolean
		game_resolution?: [number, number]
	} = {}

	if (overrideWindowSettings.value) {
		editProfile.force_fullscreen = fullscreenSetting.value

		if (!fullscreenSetting.value) {
			editProfile.game_resolution = resolution.value
		}
	}

	return editProfile
})

watch(
	[overrideWindowSettings, resolution, fullscreenSetting],
	async () => {
		await edit(props.instance.path, editProfileObject.value)
	},
	{ deep: true },
)

const messages = defineMessages({
	customWindowSettings: {
		id: 'instance.settings.tabs.window.custom-window-settings',
		defaultMessage: 'Custom window settings',
	},
	fullscreen: {
		id: 'instance.settings.tabs.window.fullscreen',
		defaultMessage: 'Fullscreen',
	},
	fullscreenDescription: {
		id: 'instance.settings.tabs.window.fullscreen.description',
		defaultMessage: 'Make the game start in full screen when launched (using options.txt).',
	},
	width: {
		id: 'instance.settings.tabs.window.width',
		defaultMessage: 'Width',
	},
	widthDescription: {
		id: 'instance.settings.tabs.window.width.description',
		defaultMessage: 'The width of the game window when launched.',
	},
	enterWidth: {
		id: 'instance.settings.tabs.window.width.enter',
		defaultMessage: 'Enter width...',
	},
	height: {
		id: 'instance.settings.tabs.window.height',
		defaultMessage: 'Height',
	},
	heightDescription: {
		id: 'instance.settings.tabs.window.height.description',
		defaultMessage: 'The height of the game window when launched.',
	},
	enterHeight: {
		id: 'instance.settings.tabs.window.height.enter',
		defaultMessage: 'Enter height...',
	},
})
</script>

<template>
	<div>
		<Checkbox
			v-model="overrideWindowSettings"
			:label="formatMessage(messages.customWindowSettings)"
			@update:model-value="
				(value) => {
					if (!value) {
						resolution = globalSettings.game_resolution
						fullscreenSetting = globalSettings.force_fullscreen
					}
				}
			"
		/>
		<div class="mt-2 flex items-center gap-4 justify-between">
			<div>
				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
					{{ formatMessage(messages.fullscreen) }}
				</h2>
				<p class="m-0">
					{{ formatMessage(messages.fullscreenDescription) }}
				</p>
			</div>
			<Toggle
				id="fullscreen"
				:model-value="overrideWindowSettings ? fullscreenSetting : globalSettings.force_fullscreen"
				:disabled="!overrideWindowSettings"
				@update:model-value="
					(e) => {
						fullscreenSetting = e
					}
				"
			/>
		</div>

		<div class="mt-4 flex items-center gap-4 justify-between">
			<div>
				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
					{{ formatMessage(messages.width) }}
				</h2>
				<p class="m-0">
					{{ formatMessage(messages.widthDescription) }}
				</p>
			</div>
			<input
				id="width"
				v-model="resolution[0]"
				autocomplete="off"
				:disabled="!overrideWindowSettings || fullscreenSetting"
				type="number"
				:placeholder="formatMessage(messages.enterWidth)"
			/>
		</div>

		<div class="mt-4 flex items-center gap-4 justify-between">
			<div>
				<h2 class="m-0 mb-1 text-lg font-extrabold text-contrast">
					{{ formatMessage(messages.height) }}
				</h2>
				<p class="m-0">
					{{ formatMessage(messages.heightDescription) }}
				</p>
			</div>
			<input
				id="height"
				v-model="resolution[1]"
				autocomplete="off"
				:disabled="!overrideWindowSettings || fullscreenSetting"
				type="number"
				:placeholder="formatMessage(messages.enterHeight)"
			/>
		</div>
	</div>
</template>