Merge pull request #113 from curiosdevcookie/final_project_branch

Modify bee anmiamtions to run only once and on different routes.

Author: curiosdevcookie

week_11__final-project/spelling_bee/README.md

@@ -41,21 +41,21 @@ pip install -r requirements.txt
 
 ### Set up the database
 
-To install the database, you need to run the following commands in your terminal:
+To install the database, you need to run the following command in your terminal:
 
 ```bash
 wget "https://dl.dropboxusercontent.com/s/ooctnlclt9bdmeu/dictionary.db" -O dictionary.db
 ```
 
 ### Configuration
 
-Set the variable `is_local` to `True`.
+In your `app.py` file, set the `is_local` variable to `True`:
 
 ```python
 is_local = True
 ```
 
-This is important for app to choose the correct path to the database.
+This is important for the app to choose the correct path to the database.
 
 ### Run the app
 

week_11__final-project/spelling_bee/app.py

@@ -7,7 +7,7 @@
 
 
 # Check if the application should run locally or in docker, to run locally set is_local to True:
-is_local = False
+is_local = True
 
 # Set the environment variable based on the mode:
 if is_local:

week_11__final-project/spelling_bee/fly.toml

@@ -1,4 +1,4 @@
-# fly.toml app configuration file generated for urban-spelling-bee on 2023-06-19T16:33:30+02:00
+# fly.toml app configuration file generated for urban-spelling-bee on 2023-06-19T21:06:31+02:00
 #
 # See https://fly.io/docs/reference/configuration/ for information about how to use this file.
 #

week_11__final-project/spelling_bee/static/css/index.css

@@ -95,7 +95,7 @@ main {
   }
 
   footer {
-    margin-top: -0.5rem;
+    margin-top: -1rem;
   }
 
   main {
@@ -136,8 +136,14 @@ main {
     align-self: self-start;
     display: none;
   }
-}
 
+ #beeOne {
+    position: absolute;
+    top: 63%;
+    left: 72%;
+    animation: jiggle 1s infinite;
+  }
+}
 
 #comb {
   grid-area: comb;
@@ -186,18 +192,15 @@ h6 {
   margin: 0;
 }
 
-
 /* Bee */
 
 #beeOne {
-  width: calc(5rem + 10vw);
   position: absolute;
-  top: -30%;
-  right: -10%;
-  animation: fly 13s, jiggle 1s infinite;
+  top: 10%;
+  right: 68%;
+  animation: jiggle 1s infinite;
 }
 
-
 /* Comb */
 
 #comb {
@@ -373,38 +376,6 @@ dialog {
 
 /* Animations */
 
-@keyframes fly {
-  0% {
-    top: 30%;
-    right: -20%;
-  }
-
-  20% {
-    top: 20%;
-    right: 5%;
-  }
-
-  40% {
-    top: 15%;
-    right: 10%;
-  }
-
-  60% {
-    top: 30%;
-    right: 35%;
-  }
-
-  80% {
-    top: 60%;
-    right: 60%;
-  }
-
-  100% {
-    top: 30%;
-    right: 100%;
-  }
-}
-
 @keyframes jiggle {
   0% {
     transform: rotate(0deg);
@@ -465,7 +436,6 @@ dialog {
   }
 }
 
-
 @keyframes fade-in-out {
   0% {
     opacity: 0;
@@ -477,3 +447,68 @@ dialog {
     opacity: 0;
   }
 }
+
+@keyframes fly-small-screens {
+  0% {
+    top: 30%;
+    left: -20%;
+  }
+
+  20% {
+    top: 20%;
+    left: 5%;
+  }
+
+  40% {
+    top: 30%;
+    left: 10%;
+  }
+
+  60% {
+    top: 60%;
+    left: 35%;
+  }
+
+  80% {
+    top: 70%;
+    left: 50%;
+  }
+
+  100% {
+    top: 10%;
+    left: 72%;
+  }
+}
+
+
+@keyframes fly-large-screens {
+  0% {
+    top: 30%;
+    right: -20%;
+  }
+
+  20% {
+    top: 20%;
+    right: 5%;
+  }
+
+  40% {
+    top: 30%;
+    right: 10%;
+  }
+
+  60% {
+    top: 50%;
+    right: 35%;
+  }
+
+  80% {
+    top: 60%;
+    right: 60%;
+  }
+
+  100% {
+    top: 10%;
+    right: 68%;
+  }
+}

week_11__final-project/spelling_bee/static/js/index.js

@@ -24,9 +24,16 @@ function deleteLetter() {
   input.value = input.value.slice(0, -1);
 }
 
-window.onload = function () {
+window.addEventListener('DOMContentLoaded', function () {
 
   showInstructionsDialog();
+
+  setupButton('buttonCopyOrShareResult', eitherCopyOrShareResult);
+
+  showPangramPoints();
+
+  animateBeeOncePerScreensize();
+
   function showInstructionsDialog() {
     const dialog = document.getElementById('dialog-instructions');
     const closeButton = document.getElementById('close-dialog');
@@ -49,6 +56,7 @@ window.onload = function () {
   }
 
 
+
   const scoreArea = document.getElementById('score-area');
   const score = scoreArea.innerText;
   const sectionResults = document.getElementById('results');
@@ -119,9 +127,8 @@ window.onload = function () {
     img.src = URL.createObjectURL(svgBlob);
 
   }
-  setupButton('buttonCopyOrShareResult', eitherCopyOrShareResult);
-
 
+  // Show the pangram bonus points:
   function showPangramPoints() {
     const pElement = document.querySelector('dialog p');
     if (pElement && pElement.textContent.includes('🐝')) {
@@ -130,5 +137,26 @@ window.onload = function () {
     }
   }
 
-  showPangramPoints();
-}
+
+  // Show the bee animation only once per session:
+  function animateBeeOncePerScreensize() {
+    const bee = document.getElementById('beeOne');
+    const beeInnerWrapper = document.getElementById('beeOneInnerWrapper');
+    if (!sessionStorage.getItem('beeShown')) {
+      if (window.innerWidth <= 768) {
+        // Add class for smaller screens and set animation duration
+        bee.style.animation = 'fly-small-screens 3s, jiggle 1s infinite';
+        bee.style.top = '10%';
+        bee.style.left = '72%';
+        beeInnerWrapper.setAttribute('transform', 'rotate(90 50 50)');
+
+      } else {
+        // Add class for larger screens and set animation duration
+        bee.style.animation = 'fly-large-screens 13s, jiggle 1s infinite';
+        bee.style.top = '10%';
+        bee.style.right = '68%';
+      }
+      sessionStorage.setItem('beeShown', 'true');
+    }
+  }
+});