Add a fullscreen button and the keyboard lock API (#266)

Closes #249

client/web/src/utilities/fullscreen.ts

@@ -0,0 +1,37 @@
+import { reactive, readonly } from "vue";
+
+const state = reactive({
+	windowFullscreen: false,
+	keyboardLocked: false,
+});
+
+export function fullscreenModeChanged() {
+	state.windowFullscreen = Boolean(document.fullscreenElement);
+	if (!state.windowFullscreen) state.keyboardLocked = false;
+}
+
+export function keyboardLockApiSupported(): boolean {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	return "keyboard" in navigator && "lock" in (navigator as any).keyboard;
+}
+
+export async function enterFullscreen() {
+	await document.documentElement.requestFullscreen();
+
+	if (keyboardLockApiSupported()) {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		await (navigator as any).keyboard.lock(["ControlLeft", "ControlRight"]);
+		state.keyboardLocked = true;
+	}
+}
+
+export async function exitFullscreen() {
+	await document.exitFullscreen();
+}
+
+export async function toggleFullscreen() {
+	if (state.windowFullscreen) await exitFullscreen();
+	else await enterFullscreen();
+}
+
+export default readonly(state);