dxsmith244 · Djtheman1 · Nov 26, 2024
diff --git a/css/styles.css b/css/styles.css
@@ -341,4 +341,5 @@ input:active {
         position: absolute;
         background-color: white;
         border: 1px solid #ccc;
-    }
+    }
+
diff --git a/index.html b/index.html
@@ -12,6 +12,43 @@
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <title>Weather App</title>
 </head>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Rive Animation as Background</title>
+    <style>
+      body {
+        margin: 200;
+        overflow: hidden;
+        height: 100vh;
+        /* Set the Rive canvas as the background */
+        background-color: #000000; /* Fallback color */
+      }
+      #riveCanvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 140%;
+        z-index: -1; /* Make sure it's in the background */
+      }
+      /* Add content styles here */
+      .content {
+        position: relative;
+        z-index: 1;
+        padding: 20px;
+        color: white;
+        font-size: 2rem;
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="https://unpkg.com/@rive-app/canvas@2.20.0"></script>
+  </body>
+</html>
 
 <body>
     <main>
@@ -89,7 +126,9 @@ <h2>7-Day Forecast</h2>
             </div>
         </div>
     </main>
+
     <script src="scripts/script.js" type="module"></script>
+
 </body>
 
 </html>
diff --git a/let_it_snow_let_it_snow.riv b/let_it_snow_let_it_snow.riv
diff --git a/scripts/script.js b/scripts/script.js
@@ -57,6 +57,22 @@ async function fetchWeather(city) {
     if (!response.ok) throw new Error("Failed to fetch weather data.");
 
     const data = await response.json();
+    console.log(data);
+
+    const weatherText = data.current.condition.text;
+
+    switch (true) {
+      case weatherText.includes("rain", "Overcast"):
+          changeRivBg("sky_rain.riv");
+          break;
+      case weatherText.includes("snow"):
+          changeRivBg("let_it_snow_let_it_snow.riv");
+          break;
+      default:
+          changeRivBg("sky_sun_cloud.riv");
+          break;
+  }
+
     updateWeatherUI(data);
     updateForecastUI(data.forecast.forecastday);
   } catch (error) {
@@ -194,5 +210,34 @@ searchInput.addEventListener("input", () => {
   updateRecentSearches("");  // Refresh recent searches in the dropdown when input is clicked
 });
 
+// Global variable to track the current canvas
+let currentCanvas = null;
+
+function changeRivBg(background) {
+  // If there's an existing canvas, clear it before creating a new one
+  if (currentCanvas) {
+    const context = currentCanvas.getContext("2d");
+    context.clearRect(0, 0, currentCanvas.width, currentCanvas.height); // Clear the canvas
+    document.body.removeChild(currentCanvas); // Optionally remove it from the DOM
+  }
+
+  const r = new rive.Rive({
+    src: background, // Your Rive animation
+    canvas: document.createElement("canvas"), // Create a new canvas element
+    autoplay: true,
+    stateMachines: "State Machine 1",
+    onLoad: () => {
+      const canvas = r.canvas;
+      canvas.id = "riveCanvas";
+
+      // Track the new canvas globally
+      currentCanvas = canvas;
+
+      document.body.appendChild(canvas); // Append the canvas to body
+      r.resizeDrawingSurfaceToCanvas(); // Ensure the canvas resizes to match the viewport
+    },
+  });
+}
+
 // Render recent searches on page load
 document.addEventListener("DOMContentLoaded", () => updateRecentSearches(""));
diff --git a/sky_rain.riv b/sky_rain.riv
diff --git a/sky_sun_cloud.riv b/sky_sun_cloud.riv