From ff5649ded6eee39ff2410e46867f7ebde0a29829 Mon Sep 17 00:00:00 2001
From: Jack O'Connor <Jack.OConnor1@ibm.com>
Date: Sun, 15 Oct 2023 18:06:59 +0100
Subject: [PATCH] class 1 on sonic running class

---
 classes/sonic-speed/index.html |  4 +++-
 classes/sonic-speed/script.js  | 14 +++++++++-----
 classes/sonic-speed/style.css  |  7 ++++++-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/classes/sonic-speed/index.html b/classes/sonic-speed/index.html
index 5938cd4..7aae5be 100644
--- a/classes/sonic-speed/index.html
+++ b/classes/sonic-speed/index.html
@@ -12,7 +12,9 @@
   <h1>Press an arrow key to move Sonic</h1>
   <img id="sonic-running" src="./assets/sonic-running.gif">
 
-  <script src="./script.js"></script>
+  <!-- <script src="./script.js"></script> -->
+  <script src="./script2.js"></script>
 </body>
 
 </html>
+
diff --git a/classes/sonic-speed/script.js b/classes/sonic-speed/script.js
index aa1dab8..a1c0bb8 100644
--- a/classes/sonic-speed/script.js
+++ b/classes/sonic-speed/script.js
@@ -1,22 +1,26 @@
 // Select sonicGif in DOM so we can do things to it with javascript
-const stepSize = 100;
+const stepSize = 200;
 const sonicGif = document.getElementById('sonic-running');
 
 // Create functions which move Sonic around page using margins
 function moveSonicDown() {
-  sonicGif.style.marginTop = (parseInt(window.getComputedStyle(sonicGif).marginTop) + stepSize) + 'px';
+  const currentMarginTop = parseInt(window.getComputedStyle(sonicGif).marginTop);
+  sonicGif.style.marginTop = (currentMarginTop + stepSize) + 'px';
 }
 
 function moveSonicUp() {
-  sonicGif.style.marginTop = (parseInt(window.getComputedStyle(sonicGif).marginTop) - stepSize) + 'px';
+  const currentMarginTop = parseInt(window.getComputedStyle(sonicGif).marginTop);
+  sonicGif.style.marginTop = (currentMarginTop - stepSize) + 'px';
 }
 
 function moveSonicRight() {
-  sonicGif.style.marginLeft = (parseInt(window.getComputedStyle(sonicGif).marginLeft) + stepSize) + 'px';
+  const currentMarginLeft = parseInt(window.getComputedStyle(sonicGif).marginLeft);
+  sonicGif.style.marginLeft = (currentMarginLeft + stepSize) + 'px';
 }
 
 function moveSonicLeft() {
-  sonicGif.style.marginLeft = (parseInt(window.getComputedStyle(sonicGif).marginLeft) - stepSize) + 'px';
+  const currentMarginLeft = parseInt(window.getComputedStyle(sonicGif).marginLeft);
+  sonicGif.style.marginLeft = (currentMarginLeft - stepSize) + 'px';
 }
 
 // Add key press event listener. Only do things for arrow keys
diff --git a/classes/sonic-speed/style.css b/classes/sonic-speed/style.css
index c7ccba6..868a5b3 100644
--- a/classes/sonic-speed/style.css
+++ b/classes/sonic-speed/style.css
@@ -1,4 +1,9 @@
 #sonic-running {
-  height: 100px;
+  height: 200px;
   aspect-ratio: auto;
 }
+
+html {
+  /* come back to this */
+  background-image: url('https://stock.adobe.com/search?k=racetrack+cartoon');
+}