Added Screenshots and Enter to login

src-tauri/Cargo.toml

@@ -1,10 +1,10 @@
 [package]
-name = "app"
-version = "0.1.0"
-description = "A Tauri App"
-authors = ["you"]
-license = ""
-repository = ""
+name = "MTLauncher"
+version = "0.0.4"
+description = "Alternative Minetest Launcher"
+authors = ["recluse4615"]
+license = "GNU LGPL"
+repository = "https://github.com/minetest-world/mtlauncher.git"
 default-run = "app"
 edition = "2021"
 rust-version = "1.57"

src/lib/components/element/form/TextBox.svelte

@@ -9,9 +9,9 @@
 
 <div class={`${clazz || ''} bg-slate-600 py-1 px-2 flex items-center`}>
 	{#if isPassword}
-		<input type="password" class="bg-transparent appearance-none border-0 outline-none w-full" bind:value placeholder={placeholder} />
+		<input type="password" class="bg-transparent appearance-none border-0 outline-none w-full" bind:value placeholder={placeholder} on:keypress />
 	{:else}
-		<input type="text" class="bg-transparent appearance-none border-0 outline-none w-full" bind:value placeholder={placeholder} />
+		<input type="text" class="bg-transparent appearance-none border-0 outline-none w-full" bind:value placeholder={placeholder} on:keypress />
 	{/if}
 
 </div>

src/lib/components/image/LocalImage.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { convertFileSrc } from '@tauri-apps/api/tauri';
+
+	export let src, alt;
+</script>
+
+<img src={convertFileSrc(src)} alt={alt} />

src/lib/screenshots.js

@@ -0,0 +1,26 @@
+import { BaseDirectory, readDir, createDir } from "@tauri-apps/api/fs";
+import { getInstalledVersions } from '$lib/api/versions';
+
+export async function getScreenshots(version=null) {
+    let screenshots = [];
+    if(version != null) {
+        try {
+            screenshots = await readDir(`versions/${version}/screenshots`, {
+                dir: BaseDirectory.App,
+                recursive: false
+            });
+        }
+        catch {
+            await createDir(`versions/${version}/screenshots`, {
+                dir: BaseDirectory.App,
+                recursive: false
+            });
+            return [];
+        }
+    } else {
+        let versions = await getInstalledVersions();
+        for (let i in versions) 
+            screenshots = screenshots.concat(await getScreenshots(versions[i]));
+    }
+    return screenshots.sort((a,b) => a.lastModified - b.lastModified);
+} 

src/routes/+layout.svelte

@@ -111,6 +111,10 @@
 		}
 	}
 
+	async function checkKeyInput(event){
+		if (event.keyCode == 13 && tempPass) login();
+	}
+
     async function doOpenServer(server, username, password, saveIdentity, version) {
         console.log(version);
         if (saveIdentity) {
@@ -130,6 +134,7 @@
 		<Navbar>
 			<NavbarItem href="/news" label="News" />
 			<NavbarItem href="/games" label="Games" />
+			<NavbarItem href="/screenshots" label="Screenshots" />
 			<NavbarItem href="/servers" label="Play Online" />
 		</Navbar>
 		<div class="w-full h-full">
@@ -206,7 +211,7 @@
 			</span>
 			<div class="w-64">
 				<div class="pb-4">
-					<TextBox bind:value={tempPass} isPassword placeholder="Password" />
+					<TextBox bind:value={tempPass} isPassword placeholder="Password" on:keypress={checkKeyInput}  />
 				</div>
 				<div class="flex w-full justify-end">
 					{#if tempPass}

src/routes/screenshots/+page.svelte

@@ -0,0 +1,56 @@
+<script>
+	import { getScreenshots } from '$lib/screenshots';
+
+    import { onMount } from 'svelte';
+
+    import { selectedVersion } from '$lib/stores';
+
+    import FullLoader from '$lib/components/FullLoader.svelte';
+	import LocalImage from '$lib/components/image/LocalImage.svelte';
+
+    let screenshots = [], 
+	allscreenshots = [];
+    onMount(async() => {
+		selectedVersion.subscribe(async (val) => {
+            if (!val.installed) {
+                screenshots = [];
+                return;
+			}
+
+			screenshots = await getScreenshots(val.name);
+        });
+		allscreenshots = await getScreenshots();
+    });
+</script>
+<div class="pt-8">
+	{#if screenshots}
+		<div class="px-64">
+			<div class="pb-16">
+				<h1 class="text-2xl font-bold pb-4">Screenshots for selected version</h1>
+				{#if screenshots.length}
+					<div class="grid grid-cols-2 gap-4">
+						{#each screenshots as screenshot}
+							<LocalImage src={screenshot.path} alt={screenshot.name}/>
+						{/each}
+					</div>
+				{:else}
+					<span>No screenshots</span>
+				{/if}
+			</div>
+			<div class="pb-16">
+				<h1 class="text-2xl font-bold pb-4">All Screenshots</h1>
+				{#if allscreenshots.length}
+					<div class="grid grid-cols-2 gap-4">
+						{#each allscreenshots as screenshot}
+							<LocalImage src={screenshot.path} alt={screenshot.name}/>
+						{/each}
+					</div>
+				{:else}
+					<span>No screenshots</span>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<FullLoader />
+	{/if}
+</div>