add: canvas size preset

m1m0zzz · Nov 7, 2023 · 09c5f3d · 09c5f3d
1 parent 0a1a558
commit 09c5f3d
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 14 deletions.
diff --git a/src/lib/i18n/locales/en.json b/src/lib/i18n/locales/en.json
@@ -12,6 +12,8 @@
   "do_not_pixelation": " no",
   "upload_audio": "Upload audio file.",
   "parameters_setting": "⚙️ Setting",
+  "parameters_window_size": "window size: ",
+  "parameters_custom": "custom",
   "parameters_width": "width: ",
   "parameters_height": "height: ",
   "parameters_note": "NOTE: The value should be n times the number of pixels in the image to display it nicely",

diff --git a/src/lib/i18n/locales/ja.json b/src/lib/i18n/locales/ja.json
@@ -12,6 +12,8 @@
   "do_not_pixelation": "しない",
   "upload_audio": "音声をアップロード",
   "parameters_setting": "⚙️ 設定",
+  "parameters_window_size": "画面サイズ: ",
+  "parameters_custom": "カスタム",
   "parameters_width": "幅: ",
   "parameters_height": "高さ: ",
   "parameters_note": "※ ドット絵のピクセル数×n倍の値にすると、きれいに表示できます",

diff --git a/src/routes/main/index.svelte b/src/routes/main/index.svelte
@@ -7,6 +7,7 @@
   import AudioUploader from './audioUploader.svelte';
 	import PlayerCanvas from './playerCanvas.svelte';
 	import PlayerMenu from './playerMenu.svelte';
+  import SizeInput from "./sizeInput.svelte";
 
   let imageLoaded = false;
   let imageData: ImageData;
@@ -82,20 +83,14 @@
       <p>{$_("parameters_setting")}</p>
       <!-- https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas -->
       <div style:display="flex" style:flex-wrap="wrap">
-        <label style:padding-right="20px">{$_("parameters_width")}
-          <input
-            type="number" min="1" max="16384"
-            bind:value={playerWidth}
-            on:change={e => playerWidth = clamp(Number(e.currentTarget.value), 1, 16384)} />
-            <span>px</span>
-        </label>
-        <label style:padding-right="20px">{$_("parameters_height")}
-          <input
-            type="number" min="1" max="16384"
-            bind:value={playerHeight}
-            on:change={e => playerHeight = clamp(Number(e.currentTarget.value), 1, 16384)} />
-            <span>px</span>
-        </label>
+        <SizeInput
+          playerWidth={playerWidth}
+          playerHeight={playerHeight}
+          on:message={(event) => {
+            if (event.detail.playerWidth) playerWidth = event.detail.playerWidth;
+            if (event.detail.playerHeight) playerHeight = event.detail.playerHeight;
+          }}
+        />
       </div>
       <p class="note">{$_("parameters_note")}</p>
       <label>{$_("parameters_background")}

diff --git a/src/routes/main/sizeInput.svelte b/src/routes/main/sizeInput.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { clamp } from "$lib";
+	import { createEventDispatcher } from "svelte";
+	import { _ } from "svelte-i18n";
+
+	const dispatch = createEventDispatcher();
+
+  export let playerWidth: number;
+  export let playerHeight: number;
+
+  const DISPLAY_SIZES: {[key: string]: number[] | undefined} = {
+    "144p (256×144)": [256, 144],
+    "240p (427×240)": [427, 240],
+    "360p (640×360)": [640, 360],
+    "480p (720×480)": [720, 480],
+    "720p (1280×720)": [1280, 720],
+    "1080p (1920×1080)": [1920, 1080],
+    "custom": undefined
+  }
+
+  let customInput = false;
+</script>
+
+<div>
+  <label for="size">{$_("parameters_window_size")}</label>
+  <select name="size" on:change={e => {
+    const value = e.currentTarget.value
+    customInput = (value == "custom");
+    if (value != "custom") {
+      const m = value.match(/(\d+),(\d+)/);
+      if (!m) throw new Error("canvas size is not match!");
+      playerWidth = Number(m[1]);
+      playerHeight = Number(m[2]);
+      dispatch("message", {
+        playerWidth: playerWidth,
+        playerHeight: playerHeight
+      })
+    }
+  }}>
+    {#each Object.entries(DISPLAY_SIZES) as [key, size] (key)}
+      <option value={size || "custom"}>{key == "custom" ? $_("parameters_custom") : key}</option>
+    {/each}
+  </select>
+  {#if customInput}
+  <br>
+  <label style:padding-right="20px">{$_("parameters_width")}
+    <input
+      type="number" min="1" max="16384"
+      bind:value={playerWidth}
+      on:change={e => {
+        playerWidth = clamp(Number(e.currentTarget.value), 1, 16384);
+        dispatch("message", {playerWidth: playerWidth})
+      }}
+    />
+      <span>px</span>
+  </label>
+    <label style:padding-right="20px">{$_("parameters_height")}
+      <input
+        type="number" min="1" max="16384"
+        bind:value={playerHeight}
+        on:change={e => {
+          playerHeight = clamp(Number(e.currentTarget.value), 1, 16384);
+          dispatch("message", {playerHeight: playerHeight})
+        }}
+      />
+        <span>px</span>
+    </label>
+  {/if}
+</div>