caseydierking#14 Fixed the weather cursor icon for IE

kaashan · Oct 28, 2018 · d1fcaf8 · d1fcaf8
1 parent c1a7c2d
commit d1fcaf8
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -201,6 +201,25 @@ header h1:after {
   left: 24px;
 }
 
+#weather-icons div {
+  outline: none;
+  opacity: 0.7;
+  padding: 8px;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  background-color: #ddd;
+}
+#weather-icons div:hover {
+  opacity: 1;
+}
+#weather-icons div.active {
+  opacity: 1;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5)
+}
+.dark-mode .icon-bar div.active {
+  opacity: 1;
+  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7)
+}
 .icon-bar button {
   outline: none;
   opacity: 0.7;

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,7 @@ <h1 data-shadow='Winning'>Winning</h1>
                 <h1 data-shadow='Colors'>Colors</h1>
                 <h1 data-shadow='Splish'>Splish</h1>
                 <h1 data-shadow='Splash'>Splash</h1>
+			</header>
         </div>
         <div class="flex items-center justify-center my-1">
             <a href="http://www.hacktoberfest.com/">
@@ -37,9 +38,9 @@ <h1 data-shadow='Splash'>Splash</h1>
         </div>     
         <div id="left-icon-bar-div" class="icon-bar icon-bar-left">
             <div id="weather-icons">
-                <button><img src="images/sun.svg" alt="Sun" id="sun" class="weather"/></button>
-                <button><img src="images/snow.svg" alt="Snow" id="snow" class="weather"/></button>
-                <button><img src="images/rain.svg" alt="Rain" id="rain" class="weather"/></button>
+                <div><img src="images/sun.svg" alt="Sun" id="sun" class="weather"/></div>
+                <div><img src="images/snow.svg" alt="Snow" id="snow" class="weather"/></div>
+                <div><img src="images/rain.svg" alt="Rain" id="rain" class="weather"/></div>
             </div>
             <div class="game-bar">
                 <button type="button" id="play-game-button" onclick="playGame()"> Play game.</button>
@@ -111,9 +112,8 @@ <h1 data-shadow='Splash'>Splash</h1>
             <button class="dark-mode-btn"><img src="images/light-on.svg" alt="Toggle light"></button>
         </div>
     </div>
-    </div>
 
-    <audio >
+    <audio autoplay="true" muted="muted">
         <!-- <source src="audio/bliss.mp3" type="audio/mpeg"> -->
     </audio>
 

diff --git a/public/scripts/game.js b/public/scripts/game.js
@@ -158,13 +158,11 @@ function component(width, height, color, x, y, type, cropx, cropy, cropwidth, cr
         this.y += this.speedY;
 
         // if horse close to the apple, remove apple from appleArr
-        appleArr.forEach(
-            (apple, index, object) => {
+        appleArr.forEach(function (apple, index, object){
                 if (Math.abs(this.x - apple.x) < 100 && Math.abs(this.y - apple.y) < 100) {
                     object.splice(index, 1);
                 }
-            }
-        )
+            });
     }
 }
 
@@ -185,11 +183,9 @@ function updateGameArea() {
         movedown();
     }
 
-    appleArr.forEach(
-        (appleObj) => {
+    appleArr.forEach(function (appleObj) {
             appleObj.apple.update();
-        }
-    )
+    });
     myGamePiece.newPos();
     myGamePiece.update();
 

diff --git a/public/scripts/main.js b/public/scripts/main.js
@@ -1,22 +1,22 @@
 "use strict";
 // List of edible items
 var FOOD_LIST = ['apple','carrot','hay','pumpkin'];
-const weatherList = document.querySelectorAll('.weather');
+let weatherList = document.querySelectorAll('.weather');
 const audio = document.querySelector('audio');
 let currentWeather ='sun';
 let currentCursor = 'text-center';
 
-window.onload = () => {
+window.addEventListener("load", function () {
     makePoo();
     loadWeather();
-};
+});
 
 document.addEventListener("DOMContentLoaded", function (event) {
     setUpAudio();
     checkIfNightTime();
 });
 
-const setUpAudio = () => {
+const setUpAudio = function() {
     var song = ['audio/Horse-and-carriage-passing-by.mp3', 'audio/Horse-hooves-sound.mp3', 'audio/Horse-sound-effect.mp3'];
     var songRandom = song[Math.floor(Math.random() * song.length)];
     audio.volume = 0.05;
@@ -27,7 +27,8 @@ const setUpAudio = () => {
         audio.src = 'audio/bliss.mp3';
     });
     document.onmouseover = function () {
-        audio.play();
+		audio.muted = false;
+		audio.play();
     };
 }
 
@@ -83,7 +84,7 @@ document.querySelector('.dark-mode-btn').addEventListener('click', function () {
     document.querySelector('body').classList.toggle('dark-mode');
 });
 
-const makePoo = () => {
+const makePoo = function() {
     let rand = Math.round(Math.random() * (10000) + 20000);
     setTimeout(function() {
         makePoo();
@@ -93,33 +94,35 @@ const makePoo = () => {
     }, rand);
 };
 
-const cleanUpPoo = (poop) => {
+const cleanUpPoo = function(poop) {
     const cursorType = document.getElementsByClassName('horse')[0].className;
     if (cursorType === 'horse snow pitchfork' || 'horse sun pitchfork' || 'horse rain pitchfork') {
         poop.style.display = 'none';
     }
 };
 
-const loadWeather = () => {
-    for(let weather of weatherList){
-        weather.addEventListener('click', () => {
+const loadWeather = function() {
+    weatherList = Array.prototype.slice.call(weatherList);
+	weatherList.forEach(function(weather) {
+        weather.addEventListener("click", function() {
             currentWeather = weather.id;
             playWeatherMusic();
             updateBackground();
-        }
-    )}
-}
+        });
+	});
+};
 
-const playWeatherMusic = () => {
+const playWeatherMusic = function() {
     let music = currentWeather === 'sun' ? 'bliss' : currentWeather;
-    audio.src = `audio/${music}.mp3`;
-
+    //audio.src = `audio/${music}.mp3`; 
+	audio.src = 'audio/' + music + '.mp3';
     audio.loop = "true";
     audio.load();
     audio.play();
 }
 
-const updateBackground = () => {
+const updateBackground = function() {
     let background = document.querySelector('#horse-div');
-    background.className = `horse ${currentWeather} ${currentCursor}`
+    //background.className = `horse ${currentWeather} ${currentCursor}`
+	background.className = 'horse ' + currentWeather + ' ' + currentCursor;
 }