From ca7292354781fd20577b27072459d7e93dda8ad2 Mon Sep 17 00:00:00 2001
From: swz-git <contact@swz.works>
Date: Fri, 13 Feb 2026 00:21:13 +0100
Subject: [PATCH] add donate button

---
 frontend/src/assets/heart.svg        |   4 +
 frontend/src/pages/RocketHost.svelte | 191 +++++++++++++++------------
 2 files changed, 108 insertions(+), 87 deletions(-)
 create mode 100644 frontend/src/assets/heart.svg

diff --git a/frontend/src/assets/heart.svg b/frontend/src/assets/heart.svg
new file mode 100644
index 0000000..248c6a6
--- /dev/null
+++ b/frontend/src/assets/heart.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg fill="red" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.24264 8.24264L8 15L14.7574 8.24264C15.553 7.44699 16 6.36786 16 5.24264V5.05234C16 2.8143 14.1857 1 11.9477 1C10.7166 1 9.55233 1.55959 8.78331 2.52086L8 3.5L7.21669 2.52086C6.44767 1.55959 5.28338 1 4.05234 1C1.8143 1 0 2.8143 0 5.05234V5.24264C0 6.36786 0.44699 7.44699 1.24264 8.24264Z"/>
+</svg>
diff --git a/frontend/src/pages/RocketHost.svelte b/frontend/src/pages/RocketHost.svelte
index 2f71511..fb3800c 100644
--- a/frontend/src/pages/RocketHost.svelte
+++ b/frontend/src/pages/RocketHost.svelte
@@ -3,10 +3,12 @@ import toast from "svelte-5-french-toast";
 import { App, RHostBot, RHostServer } from "../../bindings/gui/index.js";
 import { MAPS_STANDARD } from "../arena-names";
 import closeIcon from "../assets/close.svg";
+import heartIcon from "../assets/heart.svg";
 import Plus from "../assets/plus.svg.svelte";
 import LauncherSelector from "../components/LauncherSelector.svelte";
 import { mapStore } from "../settings";
 import Modal from "../components/Modal.svelte";
+import { Browser } from "@wailsio/runtime";
 
 let waiting = $state(false);
 
@@ -73,18 +75,12 @@ let orangeBots: string[] = $state([]);
 let launcherOptionsVisible = $state(false);
 </script>
 
-<div class="page">
-  <!-- <header>
-    <button onclick={onBack}>
-      <img src={arrow_left} alt="<-" class="leftArrowImage" />
-    </button>
-  </header> -->
-
+<div class="page blurred">
   <div class="availableBots">
     <h2>Available bots</h2>
     <div class="availableBotsList">
       {#each Object.keys(botFamilies) as family, i}
-        <div class="botEntry">
+        <div class="botEntry blurred">
           {#if botFamilies[family].length == 1}
             <p>{botFamilies[family][0]}</p>
             <div class="expandMe"></div>
@@ -138,7 +134,7 @@ let launcherOptionsVisible = $state(false);
       <h2>Blue</h2>
       <div class="botList">
         {#each blueBots as bot, i}
-          <div class="bot">
+          <div class="bot blurred">
             <p>{bot}</p>
             <button class="close" onclick={()=>{blueBots.splice(i, 1)}}>
               <img src={closeIcon} alt="X" />
@@ -152,7 +148,7 @@ let launcherOptionsVisible = $state(false);
       <h2>Orange</h2>
       <div class="botList">
         {#each orangeBots as bot, i}
-          <div class="bot">
+          <div class="bot blurred">
             <p>{bot}</p>
             <button class="close" onclick={()=>{orangeBots.splice(i, 1)}}>
               <img src={closeIcon} alt="X" />
@@ -164,72 +160,77 @@ let launcherOptionsVisible = $state(false);
     </div>
   </div>
 
-  <footer>
-    <div class="options">
-      <div>
-        <label for="serverselect">Server</label>
-        <select name="serverselect" id="serverselect" bind:value={serverAddr}>
-          {#each servers as value, i}
-            <option value={`${value.ip}:${value.port}`}>{value.location}</option>
-          {/each}
-        </select>
-      </div>
-      <div>
-        <label for="mapselect">Map</label>
-        <select name="mapselect" id="mapselect" bind:value={$mapStore}>
-          {#each Object.entries(MAPS_STANDARD) as map, i}
-            <option value={map[1]}>{map[0]}</option>
-          {/each}
-        </select>
-      </div>
-      <div>
-        <label for="mapselect">Launcher</label>
-        <button onclick={() => { launcherOptionsVisible = true }}>Launcher Options</button>
-      </div>
+  <div class="options">
+    <div>
+      <label for="serverselect">Server</label>
+      <select name="serverselect" id="serverselect" bind:value={serverAddr}>
+        {#each servers as value, i}
+          <option value={`${value.ip}:${value.port}`}>{value.location}</option>
+        {/each}
+      </select>
+    </div>
+    <div>
+      <label for="mapselect">Map</label>
+      <select name="mapselect" id="mapselect" bind:value={$mapStore}>
+        {#each Object.entries(MAPS_STANDARD) as map, i}
+          <option value={map[1]}>{map[0]}</option>
+        {/each}
+      </select>
+    </div>
+    <div>
+      <label for="mapselect">Launcher</label>
+      <button onclick={() => { launcherOptionsVisible = true }}>Launcher Options</button>
     </div>
+    <button class="start" disabled={waiting} onclick={()=>{
+      let launcher = localStorage.getItem("MS_LAUNCHER");
+      if (!launcher) {
+        toast.error("Please select a launcher first", {
+          position: "top-center",
+          duration: 5000,
+        });
 
-    <div class="buttons">
-      <button class="start" disabled={waiting} onclick={()=>{
-        let launcher = localStorage.getItem("MS_LAUNCHER");
-        if (!launcher) {
-          toast.error("Please select a launcher first", {
-            position: "top-center",
-            duration: 5000,
-          });
+        launcherOptionsVisible = true;
+        return;
+      }
 
-          launcherOptionsVisible = true;
-          return;
-        }
+      waiting = true;
+      let id = toast.loading("Starting rocket host game...", {
+        position: "top-center"
+      })
+      App.StartRHostMatch({
+        server: serverAddr,
+        map: $mapStore,
+        blueBots,
+        orangeBots,
+        launcher,
+        launcherArg: localStorage.getItem("MS_LAUNCHER_ARG") || ''
+      }).then((addr)=>{
+        waiting = false;
+        toast.success(
+          `Started game with address ${addr}`,
+          {position: "top-center", duration: 10000, id}
+        )
+      }).catch((e)=>{
+        waiting = false;
+        toast.error(
+          "Failed to start Rocket Host game\n" + e,
+          {position: "top-center", duration: 8000, id}
+        )
+      })
+    }}>
+      Start
+    </button>
+  </div>
 
-        waiting = true;
-        let id = toast.loading("Starting rocket host game...", {
-          position: "top-center"
-        })
-        App.StartRHostMatch({
-          server: serverAddr,
-          map: $mapStore,
-          blueBots,
-          orangeBots,
-          launcher,
-          launcherArg: localStorage.getItem("MS_LAUNCHER_ARG") || ''
-        }).then((addr)=>{
-          waiting = false;
-          toast.success(
-            `Started game with address ${addr}`,
-            {position: "top-center", duration: 10000, id}
-          )
-        }).catch((e)=>{
-          waiting = false;
-          toast.error(
-            "Failed to start Rocket Host game\n" + e,
-            {position: "top-center", duration: 8000, id}
-          )
-        })
-      }}>
-        Start
-      </button>
+  <div class="donateBar" style="--icon-url: url({heartIcon});">
+    <div>
+      <h3>Please consider donating</h3>
+      <p>RocketHost is reliant on donations; any amount will help expanding server capacity</p>
     </div>
-  </footer>
+    <button
+      onclick={() => Browser.OpenURL("https://www.patreon.com/WcW")}
+    >Donate</button>
+  </div>
 </div>
 
 <Modal title="Select a launcher" bind:visible={launcherOptionsVisible}>
@@ -242,24 +243,23 @@ let launcherOptionsVisible = $state(false);
     height: fit-content;
     min-width: min(80vh, 100vw);
     background-color: var(--background);
-    padding: 2rem;
+    padding-top: 2rem;
     border-radius: 1rem;
     margin-top: 3rem;
     flex-direction: column;
     align-items: center;
     gap: 1.5rem;
   }
+  .page > * {
+    padding: 0 2rem;
+  }
   h2 {
     margin-bottom: 0.5rem;
   }
-  footer {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-  }
   .options {
     display: flex;
     gap: 1rem;
+    width: 100%
   }
   .options > div {
     display: flex;
@@ -269,18 +269,12 @@ let launcherOptionsVisible = $state(false);
     font-size: 1.0rem;
     padding: 0.25rem;
   }
-  .buttons {
-    height: 100%;
-    display: flex;
-    align-items: end;
-    gap: 0.5rem;
-  }
-  .buttons button {
-    font-size: 1.2rem;
-    height: fit-content;
-  }
   button.start {
     background-color: #15680e;
+    font-size: 1.2rem;
+    height: fit-content;
+    margin-top: auto;
+    margin-left: auto;
   }
   .availableBots {
     display: flex;
@@ -372,4 +366,27 @@ let launcherOptionsVisible = $state(false);
     height: 28px;
     width: 28px;
   }
+  .donateBar {
+    display: flex;
+    width: 100%;
+    padding: 1rem 2rem;
+    margin-top: 0.5rem;
+    border-radius: 0px 0px 1rem 1rem;
+    justify-content: space-between;
+    background-color: #e8a0ac;
+    color: #1c0004;
+  }
+  .donateBar button {
+    display: flex;
+    align-items: center;
+    background-color: white;
+    color: #1c0004;
+    font-weight: 600;
+  }
+  .donateBar button::after {
+    content: var(--icon-url);
+    height: 1.5rem;
+    width: 1.5rem;
+    margin-left: 0.5rem;
+  }
 </style>