you can change colorrrsrsss

frontend/public/scripts/main.js

@@ -1,16 +1,16 @@
-const badgeGray = document.getElementById("badgeGray");
+const siteBadge = document.getElementById("siteBadge");
-const badgeGreen = document.getElementById("badgeGreen");
-const badgeOrange = document.getElementById("badgeOrange");
-const badgePurple = document.getElementById("badgePurple");
 
 // generate a number between 1 and 3, also generate a random bool (true/false), if the number is 3 AND false, purple
 const maxCol = 3
 const minCol = 1
-const randomCol = Math.floor(Math.random() * (maxCol - minCol + 1)) + minCol;
 const is_root = location.pathname === "/";
 
 const badgeAmount = 20
 
+function randomCol() {
+  return Math.floor(Math.random() * (maxCol - minCol + 1)) + minCol
+}
+
 // loads all the functions to be loaded on load, pretty simple, it loads shit on load.
 function onLoad() {
   jsEnabled();
@@ -192,6 +192,13 @@ function getbadges() {
 const headTag = document.getElementsByTagName("head")[0];
 const styleTag = document.createElement("style");
 
+function manualButtonChange() {
+  sessionStorage.removeItem("themeGreen")
+  sessionStorage.removeItem("themeOrange")
+  sessionStorage.removeItem("themePurple")
+  getTheme();
+}
+
 function checkThemeStorage() {
   if (sessionStorage.getItem("themeGreen")) {
     setGreen();
@@ -202,20 +209,14 @@ function checkThemeStorage() {
   if (sessionStorage.getItem("themePurple")) {
     setPurple();
   }
-  if (
+  else {
-    !sessionStorage.getItem("themeOrange") &&
+    randomCol();
-    !sessionStorage.getItem("themeGreen") &&
-    !sessionStorage.getItem("themePurple")
-  ) {
     getTheme();
   }
 }
 
 function setGreen() {
-  badgeGreen.style.display = "initial";
+  siteBadge.src="/assets/images/badges/mine/nelleobserver-green.gif";
-  badgeOrange.style.display = "none";
-  badgeGray.style.display = "none";
-  badgePurple.style.display = "none";
 
   styleTag.innerHTML = `
 :root {
@@ -317,10 +318,7 @@ function setGreen() {
 }
 
 function setOrange() {
-  badgeOrange.style.display = "initial";
+  siteBadge.src="/assets/images/badges/mine/nelleobserver-orange.gif";
-  badgeGreen.style.display = "none";
-  badgeGray.style.display = "none";
-  badgePurple.style.display = "none";
 
   styleTag.innerHTML = `
 :root {
@@ -421,10 +419,7 @@ function setOrange() {
 }
 
 function setPurple() {
-  badgeOrange.style.display = "none";
+  siteBadge.src="/assets/images/badges/mine/nelleobserver-purple.gif";
-  badgeGreen.style.display = "none";
-  badgeGray.style.display = "none";
-  badgePurple.style.display = "initial";
 
   styleTag.innerHTML = `
 :root {
@@ -525,7 +520,7 @@ function setPurple() {
 }
 
 function getTheme() {
-  switch(randomCol) {
+  switch(randomCol()) {
     case 1:
       setGreen();
       break;

frontend/src/components/footer/mybuttons.astro

@@ -1,10 +1,7 @@
 <p>buttons i created</p>
 <div style="display: flex; flex-wrap: nowrap; justify-content: center;">
     <div class="badgeContainer">
-        <a id="badgeGray" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-gray.gif" alt="animation of a bunch of twinkling stars (but grayscale)" loading="lazy"/></a>
+        <img id="siteBadge" onclick="manualButtonChange()" class="badge" style="cursor: pointer;" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-gray.gif" alt="animation of a bunch of twinkling stars (but grayscale)" loading="lazy"/>
-        <a id="badgeOrange" style="display: none;" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-orange.gif" alt="animation of a bunch of twinkling stars (but amber)" loading="lazy"/></a>
-        <a id="badgeGreen" style="display: none;" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-green.gif" alt="animation of a bunch of twinkling stars (but green)" loading="lazy"/></a>
-        <a id="badgePurple" style="display: none;" href="https://nelle.observer/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/nelleobserver-purple.gif" alt="animation of a bunch of twinkling stars (but purple)" loading="lazy"/></a>
         <a href="https://ouroboros.gay/"><img class="badge" width="88" height="31" src="/assets/images/badges/mine/ouroboros.gay.png" loading="lazy"></a>
         <img class="badge" src="/assets/images/badges/mine/missing-texture.png" alt="magenta and black checker pattern" loading="lazy">
         <img id="sgaButton" style="cursor: pointer; display: none;" width="88" height="31" style="cursor:pointer;" onclick="toggleTheme()" src="/assets/images/badges/mine/standard-galactic-alphabet.png" alt="animation of a bunch of twinkling stars" loading="lazy">