Merge pull request #19 from lu2000luk/main

Login wall & Refining UIs

.gitignore

@@ -9,3 +9,4 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 pnpm-lock.yaml
+/.idea

package.json

@@ -32,6 +32,7 @@
     "crypto-js": "^4.2.0",
     "gsap": "^3.12.5",
     "lucide-svelte": "^0.363.0",
+    "svelte-canvas-confetti": "^0.6.0",
     "svelte-persisted-store": "^0.9.4",
     "unzipit": "^1.4.3"
   }

src/lib/components/beta.svelte

@@ -0,0 +1,22 @@
+<script>
+    import { FallingConfetti } from 'svelte-canvas-confetti';
+	import {tick} from 'svelte';
+
+    import { particle_count } from '$lib/settings';
+
+    let fallingConfetti = false;
+
+    const makeFallingConfetti = async () => {
+		fallingConfetti = false;
+		await tick();
+		fallingConfetti = true;
+	}
+</script>
+
+{#if fallingConfetti}
+	<FallingConfetti particleCount={$particle_count} />
+{/if}
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<span class="beta_icon bg-gradient-to-r from-violet-600 to-indigo-600 px-2 py-1 cursor-pointer rounded-full select-none" on:click={makeFallingConfetti}>Beta</span>

src/lib/components/modcard.svelte

@@ -154,7 +154,7 @@
 </script>
 
 <div class="modcard flex h-30 w-50 bg-background-alt shadow-sm hover:shadow-md rounded-md p-2 m-2 max-w-full" ui-debug={$uidev}>
-    <Img src={cover} alt="Mod" />
+    <Img src={cover ? cover : "../../../../no_image.png"} alt="Mod" />
     <div class="details pl-2 pt-2 w-full flex justify-between">
         <div class="data">
             <h2 class="text-2xl inter f600">{name}</h2>

src/lib/settings.ts

@@ -5,4 +5,6 @@ export const steamPath = persisted("steamPath", "")
 
 export const uidev = persisted("ui_debug", false)
 
-export const banana = persisted("banana", false)
+export const banana = persisted("banana", false)
+
+export const particle_count = persisted("particle_count", 150)

src/routes/+layout.svelte

@@ -8,6 +8,9 @@
   import Rocket from "lucide-svelte/icons/rocket";
   import Settings from "lucide-svelte/icons/settings"
   import Banana from "lucide-svelte/icons/banana"
+  import Wrench from "lucide-svelte/icons/wrench"
+  import Package from "lucide-svelte/icons/package"
+
   import CloudUpload from "lucide-svelte/icons/cloud-upload";
   import { Tooltip, Dialog, Separator, Label, Button as BitsButton } from "bits-ui";
   import { goto } from "$app/navigation";
@@ -32,10 +35,6 @@
 
   import NXMCard from "$lib/components/nxmcard.svelte";
 
-  if (!$NexusConfig.apiKey) {
-    nexusConnect()
-  }
-
   const application_slug = "etbrocket"
 
   function nexusConnect() {
@@ -71,6 +70,7 @@
         if (response.data.hasOwnProperty('api_key')) {
             console.log("API Key Received: " + response.data.api_key);
             NexusConfig.set({...$NexusConfig, apiKey: response.data.api_key})
+            is_nexus_popup_required = false;
         }
       } else {
         alert("Error while logging in!")
@@ -102,6 +102,12 @@
   });
 
   let nxm_data_d;
+
+  let is_nexus_popup_required = false;
+
+  if (!$NexusConfig.apiKey) {
+    is_nexus_popup_required = true;
+  }
 </script>
 
 <div class="bananaCursor fixed pointer-events-none cursor-none" hidden={!$banana} bind:this={bananaCursor}>
@@ -123,6 +129,7 @@
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
+
         <Tooltip.Root>
           <Tooltip.Trigger>
             <SideIcon click={() => {goto("../../../../mods")}}><Mod /></SideIcon>
@@ -133,6 +140,7 @@
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
+
         <Tooltip.Root>
           <Tooltip.Trigger>
             <SideIcon click={() => {goto("../../../../loaders")}}><Loaders /></SideIcon>
@@ -143,8 +151,33 @@
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
+
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <SideIcon click={() => {goto("../../../../packages")}}><Package /></SideIcon>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">
+            <div class="bg-secondary rounded-md ml-1 transition-all p-2">
+              Packages
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
       </div>
+
+
+
       <div class="bottomitems flex flex-col" ui-debug={$uidev}>
+        <Tooltip.Root>
+          <Tooltip.Trigger>
+            <SideIcon click={() => {goto("../../../../creators/coming_soon")}}><Wrench /></SideIcon>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="right">
+            <div class="bg-secondary rounded-md ml-1 transition-all p-2">
+              Tools
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+
         <Tooltip.Root>
           <Tooltip.Trigger>
             <SideIcon click={() => {goto("../../../../creators")}}><CloudUpload /></SideIcon>
@@ -155,6 +188,7 @@
             </div>
           </Tooltip.Content>
         </Tooltip.Root>
+
         <Tooltip.Root>
           <Tooltip.Trigger>
             <SideIcon click={() => {goto("../../../../settings")}}><Settings /></SideIcon>
@@ -192,4 +226,29 @@
       </Dialog.Description>
     </Dialog.Content>
   </Dialog.Portal>
+</Dialog.Root>
+
+<Dialog.Root open={is_nexus_popup_required} onOutsideClick={(e) => e.preventDefault()} class="rounded">
+    <Dialog.Portal>
+      <Dialog.Overlay
+        transition={fade}
+        transitionConfig={{ duration: 150 }}
+        class="fixed inset-0 z-50 bg-black/80" />
+      <Dialog.Content class="fixed left-[50%] top-[50%] z-50 w-full max-w-[75%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none md:w-full">
+        <Dialog.Title class="flex w-full items-center justify-center text-2xl font-semibold tracking-tight">
+          Nexus Login Required
+        </Dialog.Title>
+        <Dialog.Description class="text-sm text-foreground-alt flex flex-col items-center justify-center">
+          <p class="flex justify-center text-xl items-center">
+            Your NexusMods account needs to be connected to <span class="flex items-center p-2 mx-2 rounded-md select-none bg-gradient-to-r from-violet-600 to-indigo-600 transition-all hover:2shadow-xl ">ETB <Rocket class="mx-1" /></span>
+          </p>
+          <i class="flex justify-center font-italic">
+            Click the button below to open a browser page to authorize us.
+          </i>
+                 <div class="flex justify-center mt-4">
+                <Button click={nexusConnect} bg="secondary" classes="p-2 text-lg">Connect to NexusMods</Button>
+            </div>
+        </Dialog.Description>
+      </Dialog.Content>
+    </Dialog.Portal>
 </Dialog.Root>

src/routes/creators/+page.svelte

@@ -23,5 +23,5 @@
 </div>
 <br />
 <div class="flex justify-center flex-wrap" ui-debug={$uidev}>
-    <h3 class="text-l">Disclamer: Your mods must follow the rules on the ETBModding Discord. The author of ETB Rocket is not responsible for any mod uploaded.</h3>
+    <h3 class="text-l">Disclaimer: Your mods must follow the rules on the ETBModding Discord. The author of ETB Rocket is not responsible for any mod uploaded.</h3>
 </div>

src/routes/creators/coming_soon/+page.svelte

@@ -1,3 +1,3 @@
-<h1>
-    Coming soon...
+<h1 class="flex justify-center w-full h-full flex-col items-center text-3xl">
+    <span class="p-6 rounded-lg bg-gradient-to-r from-violet-900 to-red-600">Coming soon...</span>
 </h1>

src/routes/mods/+page.svelte

@@ -131,13 +131,17 @@
     }
 </script>
 
+<p class="text-xl">Best ETB Rocket mods:</p>
 {#each Mods as mod}
     <ModCard {...mod} />
 {/each}
 
 {#await NexusGetOthers()}
     Loading more... [{loadingModsPhase}/5]
-{:then nlmods} 
+    <br />
+    Warning: ETB Rocket is using the Nexus API to get the latest mods and download them. This mean that if this section is not loading it is because the Nexus API is down or you reached your API rate limit. In that case you might need to wait up to a day.
+{:then nlmods}
+    <p class="text-xl">Best Nexus Mods:</p>
     {#each nlmods as mod}
         <ModCard {...mod} />
     {/each}

src/routes/packages/+page.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Beta from '$lib/components/beta.svelte';
+</script>
+
+<div class="flex justify-center mt-8">
+    <p class="text-3xl mb-2">
+        ETB Rocket <span class="py-1 text-4xl select-none bg-gradient-to-r from-green-600 to-yellow-600 cursor-pointer flex items-center justify-center bg-black bg-opacity-35 rounded-lg">&pi;</span>
+    </p>
+</div>
+
+<div class="flex justify-center mt-2">
+    <p>
+        With the ETBR-PI system. With this new <Beta /> system your huge mods (over 1gb) will be download at blazingly fast speeds!
+    </p>
+</div>
+
+<div class="flex justify-center mt-5">
+    <i>
+        *I know you where expecting a big start now button or something but this thing has not been developed yet*
+    </i>
+</div>

src/routes/settings/+page.svelte

@@ -4,7 +4,7 @@
     import Button from "$lib/ui/button.svelte"
 
     import { dialogOpened } from "$lib/nexus"
-    import { steamPath, uidev, banana } from "$lib/settings";
+    import { steamPath, uidev, banana, particle_count } from "$lib/settings";
 
     import { getClient, ResponseType } from '@tauri-apps/api/http';
     import { NexusConfig } from "$lib/nexus";
@@ -45,5 +45,10 @@
             />
           </Switch.Root>
         </div>
+        <br />
+        <p class="text-2xl" id="steampath">Max Particle Count</p>
+        <input type="number" class="h-input w-full border-none bg-background-alt rounded focus:outline-none p-2" placeholder="150" min={5} max={10000} bind:value={$particle_count}>
+        <br />
+        <br />
 </div>