From 4d4fdadb5a16b449ede154b1f12d8ecff665ffb2 Mon Sep 17 00:00:00 2001
From: Liam Conway <11491642+liconway@users.noreply.github.com>
Date: Sat, 3 Feb 2024 15:55:11 -0700
Subject: [PATCH] Rotating placeholder

---
 src/routes/+page.svelte | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 87525f0..ad5fc99 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -371,13 +371,13 @@ onMount(() => {
       <div class="pre-bot" id="pre-r1">
         <p>{teams_red[0]}</p>
 	<object type="image/png" data="/robots/{teams_red[0]}.gif">
-          <img src="/robots/fallback.jpg">
+          <img class="rotating" src="/robots/fallback.jpg">
 	</object>
       </div>
       <div class="pre-bot" id="pre-r2">
         <p>{teams_red[1]}</p>
 	<object type="image/png" data="/robots/{teams_red[1]}.gif">
-          <img src="/robots/fallback.jpg">
+          <img class="rotating" src="/robots/fallback.jpg">
 	</object>
       </div>
       <div id="pre-mid">
@@ -388,13 +388,13 @@ onMount(() => {
       <div class="pre-bot" id="pre-b1">
         <p>{teams_blue[0]}</p>
 	<object type="image/png" data="/robots/{teams_blue[0]}.gif">
-          <img src="/robots/fallback.jpg">
+          <img class="rotating" src="/robots/fallback.jpg">
 	</object>
       </div>
       <div class="pre-bot" id="pre-b2">
         <p>{teams_blue[1]}</p>
         <object type="image/png" data="/robots/{teams_blue[1]}.gif">
-          <img src="/robots/fallback.jgp">
+          <img class="rotating" src="/robots/fallback.jgp">
 	</object>
       </div>
     </div>
@@ -730,4 +730,17 @@ div.score-grid {
   width: 1176px;
   height: 168px;
 }
+
+@-webkit-keyframes rotating {
+    from{
+        -webkit-transform: rotate(0deg);
+    }
+    to{
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+.rotating {
+    -webkit-animation: rotating 2s linear infinite;
+}
 </style>