From f06b3c759ef537255928f64899410849ba8ed8c3 Mon Sep 17 00:00:00 2001
From: EDRipper <euan@hackclub.com>
Date: Sun, 14 Dec 2025 23:58:31 -0500
Subject: [PATCH] add link to event

---
 backend/api/stickers.rb          |  6 +++--
 backend/models/sticker.rb        |  8 +++++-
 src/routes/archive/+page.svelte  | 43 +++++++++++++++++++++++++++++---
 src/routes/stickers/+page.svelte | 43 +++++++++++++++++++++++++++++---
 4 files changed, 89 insertions(+), 11 deletions(-)

diff --git a/backend/api/stickers.rb b/backend/api/stickers.rb
index aba2711..0bfeeec 100644
--- a/backend/api/stickers.rb
+++ b/backend/api/stickers.rb
@@ -16,6 +16,7 @@ class Stickers < Base
           image: record["CDN_URL"],
           artist: record["Artist"],
           event: record["Event"],
+          event_URL: record["event_URL"],
           owned_by: owned_by,
           owned: user_id && owners.include?(user_id) 
         }
@@ -30,9 +31,10 @@ class Stickers < Base
         {
           id: record.id,
           name: record["Sticker Name"],
-          image: record["CDNURL"],
+          image: record["CDN_URL"],
           artist: record["Artist"],
-          event: record["Event"]
+          event: record["Event"],
+          event_URL: record["event_URL"]
         }
       end
     end
diff --git a/backend/models/sticker.rb b/backend/models/sticker.rb
index 0d19dc2..83e028a 100644
--- a/backend/models/sticker.rb
+++ b/backend/models/sticker.rb
@@ -5,11 +5,17 @@ class Sticker < ApplicationRecord
   field :active, "active"
   field :autonumber, "id"
   field :image_attachment, "image"
+  field :event_URL, "event_URL"
 
   scope :only_active, -> { where(active: true) }
 
   def as_json(options = nil)
-    { id: autonumber, name: name, image: }
+    { id: autonumber, name: name, image: image, event_URL: event_url }
+  end
+
+  def event_url
+    url = event_URL
+    url.is_a?(String) ? url : url&.dig("url")
   end
 
   def image = image_attachment&.dig(0, "url")
diff --git a/src/routes/archive/+page.svelte b/src/routes/archive/+page.svelte
index 79da2ed..5a47477 100644
--- a/src/routes/archive/+page.svelte
+++ b/src/routes/archive/+page.svelte
@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
   import LazyImage from "$lib/components/LazyImage.svelte";
 
-  /** @typedef {{ id: string, name: string, image: string, owned?: boolean, tags?: string[] }} Sticker */
+  /** @typedef {{ id: string, name: string, image: string, owned?: boolean, tags?: string[], event_URL?: string }} Sticker */
 
   let selectedFilter = $state("all");
   let searchQuery = $state("");
@@ -120,10 +120,15 @@
         <LazyImage src={selectedSticker.image} alt={selectedSticker.name} />
       </div>
       <div class="modal-footer">
-        <h2>{selectedSticker.name}</h2>
+        <div class="modal-header-row">
+          {#if selectedSticker.event_URL}
+            <a href={selectedSticker.event_URL.startsWith('http') ? selectedSticker.event_URL : `https://${selectedSticker.event_URL}`} target="_blank" rel="noopener noreferrer" class="event-btn">Go To Event</a>
+          {/if}
+          <h2>{selectedSticker.name}</h2>
+        </div>
         <div class="modal-info">
           {#each Object.entries(selectedSticker) as [key, value]}
-            {#if key !== "image" && key !== "owned_by" && key !== "owned" && key !== "id"}
+            {#if key !== "image" && key !== "owned_by" && key !== "owned" && key !== "id" && key !== "event_URL" && key !== "name"}
               <div class="info-row">
                 <span class="info-key">{key}:</span>
                 <span class="info-value"
@@ -474,14 +479,44 @@
   .modal-footer {
     padding: 1.5rem;
     border-top: 2px solid #333;
+    text-align: left;
+  }
+
+  .modal-header-row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
   }
 
   .modal-footer h2 {
-    margin: 0 0 1rem 0;
+    margin: 0;
     font-size: 1.75rem;
     font-family: 'Departure Mono', monospace;
   }
 
+  .modal-info {
+    margin-top: 1rem;
+  }
+
+  .event-btn {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: #ec3750;
+    color: white;
+    text-decoration: none;
+    border-radius: 0.5rem;
+    font-family: 'Departure Mono', monospace;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    border: 2px solid #c42d42;
+  }
+
+  .event-btn:hover {
+    background: #c42d42;
+  }
+
   .modal-info {
     display: flex;
     flex-direction: column;
diff --git a/src/routes/stickers/+page.svelte b/src/routes/stickers/+page.svelte
index 77c36e7..060df24 100644
--- a/src/routes/stickers/+page.svelte
+++ b/src/routes/stickers/+page.svelte
@@ -2,7 +2,7 @@
   import { onMount } from "svelte";
   import LazyImage from "$lib/components/LazyImage.svelte";
 
-  /** @typedef {{ id: string, name: string, image: string, owned?: boolean, tags?: string[] }} Sticker */
+  /** @typedef {{ id: string, name: string, image: string, owned?: boolean, tags?: string[], event_URL?: string }} Sticker */
 
   let selectedFilter = $state("all");
   let searchQuery = $state("");
@@ -122,10 +122,15 @@
         <LazyImage src={selectedSticker.image} alt={selectedSticker.name} />
       </div>
       <div class="modal-footer">
-        <h2>{selectedSticker.name}</h2>
+        <div class="modal-header-row">
+          {#if selectedSticker.event_URL}
+            <a href={selectedSticker.event_URL.startsWith('http') ? selectedSticker.event_URL : `https://${selectedSticker.event_URL}`} target="_blank" rel="noopener noreferrer" class="event-btn">Go To Event</a>
+          {/if}
+          <h2>{selectedSticker.name}</h2>
+        </div>
         <div class="modal-info">
           {#each Object.entries(selectedSticker) as [key, value]}
-            {#if key !== "image" && key !== "owned_by" && key !== "owned" && key !== "id"}
+            {#if key !== "image" && key !== "owned_by" && key !== "owned" && key !== "id" && key !== "event_URL" && key !== "name"}
               <div class="info-row">
                 <span class="info-key">{key}:</span>
                 <span class="info-value"
@@ -475,14 +480,44 @@
   .modal-footer {
     padding: 1.5rem;
     border-top: 2px solid #333;
+    text-align: left;
+  }
+
+  .modal-header-row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
   }
 
   .modal-footer h2 {
-    margin: 0 0 1rem 0;
+    margin: 0;
     font-size: 1.75rem;
     font-family: 'Departure Mono', monospace;
   }
 
+  .modal-info {
+    margin-top: 1rem;
+  }
+
+  .event-btn {
+    display: inline-block;
+    padding: 0.5rem 1rem;
+    background: #ec3750;
+    color: white;
+    text-decoration: none;
+    border-radius: 0.5rem;
+    font-family: 'Departure Mono', monospace;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    border: 2px solid #c42d42;
+  }
+
+  .event-btn:hover {
+    background: #c42d42;
+  }
+
   .modal-info {
     display: flex;
     flex-direction: column;