From e9ce468d8dfaaf847ab7b1e64841ca7b521d4ff8 Mon Sep 17 00:00:00 2001
From: wackbyte <wackbyte@pm.me>
Date: Mon, 22 May 2023 14:11:58 -0400
Subject: [PATCH] break the cloud saves menu out of GameWindow

---
 src/components/GameSaves.svelte  | 210 +++++++++++++++++++++++++++++++
 src/components/GameWindow.svelte | 210 +------------------------------
 2 files changed, 216 insertions(+), 204 deletions(-)
 create mode 100644 src/components/GameSaves.svelte

diff --git a/src/components/GameSaves.svelte b/src/components/GameSaves.svelte
new file mode 100644
index 00000000..0825777b
--- /dev/null
+++ b/src/components/GameSaves.svelte
@@ -0,0 +1,210 @@
+<script lang="ts">
+	import type { IGame, IGameSave } from "../types";
+	import { alert, post, promptLogin } from "../libgalaxy";
+
+	export let game: IGame;
+	export let userId: number | null;
+
+	let loggedIn = userId !== null;
+
+	let showCreateSave = false;
+	let savesLoaded = false;
+	let loadedSaves: IGameSave[] = [];
+
+	function toggleCreateSave() {
+		showCreateSave = !showCreateSave;
+	}
+
+	export async function refreshSaves(skipLoad = false) {
+		if (skipLoad) savesLoaded = false;
+		let { saves } = await post(
+			"/api/gapi/saves/list",
+			{
+				game: game.id,
+			},
+			{ errorOnFailure: false }
+		);
+		if (saves) loadedSaves = saves;
+		savesLoaded = true;
+	}
+
+	function copySave(slot: number) {
+		let save = loadedSaves.find(s => s.slot === slot);
+		try {
+			navigator.clipboard.writeText(save.data);
+			alert.success("Copied save!");
+		} catch {
+			prompt(
+				"We could not copy your save automatically. You can find it in this box below:",
+				save.data
+			);
+		}
+	}
+
+	// Wrapper func for repetitive /saves/set usage
+	async function modifySave(slot: number, data: string, label: string) {
+		let res = await post("/api/gapi/saves/set", {
+			slot,
+			data,
+			label,
+			game: game.id,
+		});
+		refreshSaves(true);
+		return res;
+	}
+
+	let creatingSlot = "";
+	let creatingData = "";
+	let creatingLabel = "";
+	async function createSave() {
+		let res = await modifySave(
+			parseInt(creatingSlot),
+			creatingData,
+			creatingLabel
+		);
+
+		if (res._resCode === 200) {
+			alert.success("Save created!");
+			creatingSlot = "";
+			creatingData = "";
+			creatingLabel = "";
+		}
+	}
+
+	function validateSlot() {
+		setTimeout(() => {
+			if (creatingSlot === "") return;
+			let num = parseFloat(creatingSlot);
+			if (isNaN(num)) creatingSlot = "";
+			else if (num < 0) creatingSlot = "0";
+			else if (num > 10) creatingSlot = "10";
+			else creatingSlot = num.toString();
+		}, 0);
+	}
+
+	// TODO merge these 2 functions?
+	async function editSave(slot: number) {
+		let newContent = prompt("Enter the new content:");
+		if (newContent === null) return;
+		let res = await modifySave(
+			slot,
+			newContent,
+			loadedSaves.find(s => s.slot === slot).label
+		);
+		if (res._resCode === 200) alert.success("Save edited!");
+	}
+
+	async function renameSave(slot: number) {
+		let newLabel = prompt("Enter the new content:");
+		if (newLabel === null) return;
+		let res = await modifySave(
+			slot,
+			loadedSaves.find(s => s.slot === slot).data,
+			newLabel
+		);
+		if (res._resCode === 200) alert.success("Save renamed!");
+	}
+
+	async function deleteSave(slot: number) {
+		let res = await post("/api/gapi/saves/delete", {
+			slot,
+			game: game.id,
+		});
+		if (res._resCode === 200) alert.success("Save deleted!");
+		refreshSaves(true);
+	}
+</script>
+
+<div id="save-menu" class="container">
+	{#if loggedIn}
+		<h1>
+			cloud saves
+			<button on:click={toggleCreateSave}>create</button><button
+				on:click={() => refreshSaves()}>refresh</button
+			>
+		</h1>
+		{#if showCreateSave}
+			<div id="save-creator">
+				<p class="unimportant">
+					save data should only include exported game saves. we are
+					not responsible if your game stops working due to inputting
+					bad save data.
+				</p>
+
+				<div>
+					<input
+						type="text"
+						placeholder="(save slot)"
+						on:input={validateSlot}
+						bind:value={creatingSlot}
+					/>
+					<span class="unimportant">between 0 and 10</span>
+				</div>
+				<div>
+					<input
+						type="text"
+						placeholder="(save label)"
+						bind:value={creatingLabel}
+					/>
+					<span class="unimportant">optional</span>
+				</div>
+				<div>
+					<input
+						type="text"
+						placeholder="(paste save data here)"
+						bind:value={creatingData}
+					/>
+				</div>
+				<button on:click={createSave}>create save</button>
+			</div>
+		{/if}
+		{#if savesLoaded}
+			{#each loadedSaves as save}
+				<div class="save">
+					<hr />
+					<h3 class="nomargin">{save.label}</h3>
+					<p class="nomargin">
+						slot {save.slot}
+						<span class="unimportant">
+							{save.data.substring(0, 25)}
+						</span>
+					</p>
+					<button on:click={() => copySave(save.slot)}> copy </button>
+					<button on:click={() => editSave(save.slot)}>
+						overwrite
+					</button>
+					<button on:click={() => renameSave(save.slot)}>
+						rename
+					</button>
+					<button on:click={() => deleteSave(save.slot)}>
+						delete
+					</button>
+				</div>
+			{:else}
+				<p class="unimportant">
+					you have no cloud saves for {game.name}
+				</p>
+			{/each}
+		{:else}
+			<p>loading saves...</p>
+		{/if}
+	{:else}
+		<div style="text-align: center">
+			<p>you need to have an account to cloud save using galaxy.</p>
+			<button on:click={promptLogin}>log in</button>
+			<a class="button" href="/signup">sign up</a>
+		</div>
+	{/if}
+</div>
+
+<style>
+	#save-menu {
+		max-width: min(800px, 80vw);
+		margin: 10px;
+	}
+
+	#save-creator > div {
+		display: block;
+		margin-bottom: 3px;
+	}
+</style>
diff --git a/src/components/GameWindow.svelte b/src/components/GameWindow.svelte
index f90ab1b6..97034acf 100644
--- a/src/components/GameWindow.svelte
+++ b/src/components/GameWindow.svelte
@@ -3,21 +3,21 @@
 	import type { IGame, IGameSave } from "../types";
 	import { alert, post, promptLogin } from "../libgalaxy";
 	import Chat from "./Chat.svelte";
+	import GameSaves from "./GameSaves.svelte";
 
 	export let game: IGame;
 	export let userId: number | null;
 
 	let loggedIn = userId !== null;
 
+	let showSaves = false;
+	let saves: GameSaves;
+
 	let chatEverOpened = false;
 	let height = "75vh";
 	let width = "100%";
 	let frame: HTMLIFrameElement;
 	let chatChannel = `game-${game.id}`;
-	let showSaves = false;
-	let savesLoaded = false;
-	let showCreateSave = false;
-	let loadedSaves: IGameSave[] = [];
 	let lastInteraction = Date.now();
 	//                   ms   * sc * mn * hrs
 	const TWELVE_HOURS = 1000 * 60 * 60 * 12;
@@ -43,7 +43,7 @@
 
 	function toggleSaves() {
 		showSaves = !showSaves;
-		if (showSaves) refreshSaves();
+		if (showSaves) saves.refreshSaves();
 	}
 
 	function toggleChat() {
@@ -335,110 +335,6 @@ Data: ${e.data}`
 	};
 	const NO_ACCOUNT_LIST = { ...LIST_ERROR, message: "no_account" };
 	const SERVER_ERROR_LIST = { ...LIST_ERROR, message: "server_error" };
-
-	function toggleCreateSave() {
-		showCreateSave = !showCreateSave;
-	}
-
-	async function refreshSaves(skipLoad = false) {
-		if (skipLoad) savesLoaded = false;
-		let { saves } = await post(
-			"/api/gapi/saves/list",
-			{
-				game: game.id,
-			},
-			{ errorOnFailure: false }
-		);
-		if (saves) loadedSaves = saves;
-		savesLoaded = true;
-	}
-
-	function copySave(slot: number) {
-		let save = loadedSaves.find(s => s.slot === slot);
-		try {
-			navigator.clipboard.writeText(save.data);
-			alert.success("Copied save!");
-		} catch {
-			prompt(
-				"We could not copy your save automatically. You can find it in this box below:",
-				save.data
-			);
-		}
-	}
-
-	// Wrapper func for repetitive /saves/set usage
-	async function modifySave(slot: number, data: string, label: string) {
-		let res = await post("/api/gapi/saves/set", {
-			slot,
-			data,
-			label,
-			game: game.id,
-		});
-		refreshSaves(true);
-		return res;
-	}
-
-	let creatingSlot = "";
-	let creatingData = "";
-	let creatingLabel = "";
-	async function createSave() {
-		let res = await modifySave(
-			parseInt(creatingSlot),
-			creatingData,
-			creatingLabel
-		);
-
-		if (res._resCode === 200) {
-			alert.success("Save created!");
-			creatingSlot = "";
-			creatingData = "";
-			creatingLabel = "";
-			showCreateSave = false;
-		}
-	}
-
-	function validateSlot() {
-		setTimeout(() => {
-			if (creatingSlot === "") return;
-			let num = parseFloat(creatingSlot);
-			if (isNaN(num)) creatingSlot = "";
-			else if (num < 0) creatingSlot = "0";
-			else if (num > 10) creatingSlot = "10";
-			else creatingSlot = num.toString();
-		}, 0);
-	}
-
-	// TODO merge these 2 functions?
-	async function editSave(slot: number) {
-		let newContent = prompt("Enter the new content:");
-		if (newContent === null) return;
-		let res = await modifySave(
-			slot,
-			newContent,
-			loadedSaves.find(s => s.slot === slot).label
-		);
-		if (res._resCode === 200) alert.success("Save edited!");
-	}
-
-	async function renameSave(slot: number) {
-		let newLabel = prompt("Enter the new content:");
-		if (newLabel === null) return;
-		let res = await modifySave(
-			slot,
-			loadedSaves.find(s => s.slot === slot).data,
-			newLabel
-		);
-		if (res._resCode === 200) alert.success("Save renamed!");
-	}
-
-	async function deleteSave(slot: number) {
-		let res = await post("/api/gapi/saves/delete", {
-			slot,
-			game: game.id,
-		});
-		if (res._resCode === 200) alert.success("Save deleted!");
-		refreshSaves(true);
-	}
 </script>
 
 <div id="game-view">
@@ -483,91 +379,7 @@ Data: ${e.data}`
 </div>
 {#if showSaves}
 	<div class="flex-centerhoriz">
-		<div id="save-menu" class="container">
-			{#if loggedIn}
-				<h1>
-					cloud saves
-					<button on:click={toggleCreateSave}>create</button><button
-						on:click={() => refreshSaves()}>refresh</button
-					>
-				</h1>
-				{#if showCreateSave}
-					<div id="save-creator">
-						<p class="unimportant">
-							save data should only include exported game saves.
-							we are not responsible if your game stops working
-							due to inputting bad save data.
-						</p>
-
-						<div>
-							<input
-								type="text"
-								placeholder="(save slot)"
-								on:input={validateSlot}
-								bind:value={creatingSlot}
-							/>
-							<span class="unimportant">between 0 and 10</span>
-						</div>
-						<div>
-							<input
-								type="text"
-								placeholder="(save label)"
-								bind:value={creatingLabel}
-							/>
-							<span class="unimportant">optional</span>
-						</div>
-						<div>
-							<input
-								type="text"
-								placeholder="(paste save data here)"
-								bind:value={creatingData}
-							/>
-						</div>
-						<button on:click={createSave}>create save</button>
-					</div>
-				{/if}
-				{#if savesLoaded}
-					{#each loadedSaves as save}
-						<div class="save">
-							<hr />
-							<h3 class="nomargin">{save.label}</h3>
-							<p class="nomargin">
-								slot {save.slot}
-								<span class="unimportant">
-									{save.data.substring(0, 25)}
-								</span>
-							</p>
-							<button on:click={() => copySave(save.slot)}>
-								copy
-							</button>
-							<button on:click={() => editSave(save.slot)}>
-								overwrite
-							</button>
-							<button on:click={() => renameSave(save.slot)}>
-								rename
-							</button>
-							<button on:click={() => deleteSave(save.slot)}>
-								delete
-							</button>
-						</div>
-					{:else}
-						<p class="unimportant">
-							you have no cloud saves for {game.name}
-						</p>
-					{/each}
-				{:else}
-					<p>loading saves...</p>
-				{/if}
-			{:else}
-				<div style="text-align: center">
-					<p>
-						you need to have an account to cloud save using galaxy.
-					</p>
-					<button on:click={promptLogin}>log in</button>
-					<a class="button" href="/signup">sign up</a>
-				</div>
-			{/if}
-		</div>
+		<GameSaves {game} {userId} bind:this={saves} />
 	</div>
 {/if}
 
@@ -605,16 +417,6 @@ Data: ${e.data}`
 		display: none !important;
 	}
 
-	#save-menu {
-		max-width: min(800px, 80vw);
-		margin: 10px;
-	}
-
-	#save-creator > div {
-		display: block;
-		margin-bottom: 3px;
-	}
-
 	@media screen and (max-width: 720px) {
 		#grid-buttons {
 			grid-template-columns: repeat(2, 1fr);
-- 
GitLab