From c351041a9b59c5b6252ce21b8cc7cff169572c47 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Thu, 11 Apr 2024 01:27:20 +0900
Subject: [PATCH] Fix realm cutoff

---
 src/lang/en.ts                    |  1 +
 src/lib/UI/Realm/RealmMain.svelte | 58 +++++++++++++++++++------------
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index bb58cff0..ac97df9c 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -570,4 +570,5 @@ export const languageEnglish = {
     addCharacter: "Add Character",
     importFromRealm: "Choose from RisuRealm",
     importFromRealmDesc: "Choose over 1000 characters in RisuRealm",
+    random: "Random",
 }
\ No newline at end of file
diff --git a/src/lib/UI/Realm/RealmMain.svelte b/src/lib/UI/Realm/RealmMain.svelte
index 783c13cd..cdef6833 100644
--- a/src/lib/UI/Realm/RealmMain.svelte
+++ b/src/lib/UI/Realm/RealmMain.svelte
@@ -8,6 +8,7 @@
     import { DataBase } from "src/ts/storage/database";
     import TextInput from "../GUI/TextInput.svelte";
     import RealmPopUp from "./RealmPopUp.svelte";
+  import { SizeStore } from "src/ts/stores";
 
     let openedData:null|hubType = null
 
@@ -35,7 +36,12 @@
 </script>
 <div class="w-full flex justify-center mt-4">
     <div class="flex w-2xl max-w-full items-center">
-        <TextInput size="xl" additionalClass="flex-grow" placeholder="Search" bind:value={search} />
+        {#if $SizeStore.w < 768}
+            <TextInput additionalClass="flex-grow min-w-0" placeholder="Search" bind:value={search} />
+        {:else}
+            <TextInput size="xl" additionalClass="flex-grow" placeholder="Search" bind:value={search} />
+
+        {/if}
         <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
             page = 0
             getHub()
@@ -49,12 +55,12 @@
         </button>
     </div>
 </div>
-<div class="w-full mt-2 flex justify-center mb-3 items-center">
+<div class="w-full p-1 flex mb-3 overflow-x-auto sm:justify-center">
     <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={nsfw} on:click={() => {
         nsfw = !nsfw
         getHub()
     }}>
-        {nsfw ? 'NSFW ON': 'NSFW OFF'}
+        NSFW
     </button>
     <div class="ml-2 mr-2 h-full border-r border-r-selected"></div>
     <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === ''} on:click={() => {
@@ -75,6 +81,12 @@
     }}>
         {language.downloads}
     </button>
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'random'} on:click={() => {
+        sort = 'random'
+        getHub()
+    }}>
+        {language.random}
+    </button>
 </div>
 <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
     {#key charas}
@@ -83,27 +95,29 @@
         {/each}
     {/key}
 </div>
-<div class="w-full flex justify-center">
-    <div class="flex">
-        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg flex justify-center items-center hover:ring transition-shadow" on:click={() => {
-            if(page > 0){
-                page -= 1
+{#if sort !== 'random'}
+    <div class="w-full flex justify-center">
+        <div class="flex">
+            <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+                if(page > 0){
+                    page -= 1
+                    getHub()
+                }
+            }}>
+                <ArrowLeft />
+            </button>
+            <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center transition-shadow">
+                <span>{page + 1}</span>
+            </button>
+            <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+                page += 1
                 getHub()
-            }
-        }}>
-            <ArrowLeft />
-        </button>
-        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center transition-shadow">
-            <span>{page + 1}</span>
-        </button>
-        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
-            page += 1
-            getHub()
-        }}>
-            <ArrowRight />
-        </button>
+            }}>
+                <ArrowRight />
+            </button>
+        </div>
     </div>
-</div>
+{/if}
 
 {#if openedData}
     <RealmPopUp bind:openedData={openedData} />