From 8119e6e9fa5f690826e7eccc22f27988705c5102 Mon Sep 17 00:00:00 2001
From: Jennifer Creighton <jenncreighton@Jennifers-MacBook-Pro.local>
Date: Sat, 16 Jun 2018 21:24:09 -0400
Subject: [PATCH] ccccchanges

---
 Animation.js                |   8 ----
 Egg.js                      |  61 ++++++++++++-------------
 Game.js                     |  24 ++++++++++
 Tamagotchi.js               |  88 ++++++++++++++++++++++++++++++++++++
 images/TamagotchiSprite.png | Bin 0 -> 5498 bytes
 index.html                  |   4 +-
 styles.css                  |   4 +-
 7 files changed, 148 insertions(+), 41 deletions(-)
 create mode 100644 Game.js
 create mode 100644 Tamagotchi.js
 create mode 100644 images/TamagotchiSprite.png

diff --git a/Animation.js b/Animation.js
index 5aac49f..0654bb4 100644
--- a/Animation.js
+++ b/Animation.js
@@ -1,8 +1,4 @@
 class Animation {
-  constructor() {
-
-  }
-
   animate(draw) {
     return new Promise((resolve, reject) => {
       var animation = () => {
@@ -17,8 +13,4 @@ class Animation {
       requestAnimationFrame(animation);
     });
   }
-
-  clear() {
-    /* noop */
-  }
 }
diff --git a/Egg.js b/Egg.js
index 7c8aeb5..657b75a 100644
--- a/Egg.js
+++ b/Egg.js
@@ -6,35 +6,47 @@ class Egg {
     this.sprite.height = 120;
     this.sprite.width = 900;
     this.sprite.frameCount = 5;
+    this.sprite.frameHeight = 120;
     this.sprite.frameWidth = this.sprite.width / this.sprite.frameCount;
     this.sprite.startFrame = 2;
-    this.currentFrame = 2;
-    this.increment = 1;
 
+    this.clear = this.clear.bind(this);
     this.bounce = this.bounce.bind(this);
+    this.hatch = this.hatch.bind(this);
+  }
+
+  clear() {
+    const {
+      frameWidth,
+      frameHeight,
+    } = this.sprite;
+
+    context.clearRect(0, 0, frameWidth, frameHeight);
   }
 
   bounce(maxBounce) {
     const {
       frameCount,
       frameWidth,
-      height,
+      frameHeight,
       image,
       startFrame,
     } = this.sprite;
 
     var bounce = 0;
+    var increment = 1;
+    var currentFrame = 2
 
     return (resolve) => {
-      context.clearRect(0, 0, frameWidth, height);
-      context.drawImage(image, this.currentFrame * frameWidth, 0, frameWidth, height, 0, 0, frameWidth, height);
+      this.clear();
+      context.drawImage(image, currentFrame * frameWidth, 0, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
 
-      if (this.currentFrame === frameCount - 1) {
-        this.increment = -1;
+      if (currentFrame === frameCount - 1) {
+        increment = -1;
       }
 
-      if (this.currentFrame === startFrame) {
-        this.increment = 1;
+      if (currentFrame === startFrame) {
+        increment = 1;
         bounce++;
       }
 
@@ -43,44 +55,31 @@ class Egg {
         return true;
       }
 
-      this.currentFrame += this.increment;
+      currentFrame += increment;
     };
   }
 
-  hatch(resolve) {
+  hatch() {
     const {
       frameCount,
       frameWidth,
-      height,
+      frameHeight,
       image,
       startFrame,
     } = this.sprite;
 
+    var currentFrame = 2
+
     return (resolve) => {
-      context.clearRect(0, 0, frameWidth, height);
-      context.drawImage(image, this.currentFrame * frameWidth, 0, frameWidth, height, 0, 0, frameWidth, height);
+      this.clear();
+      context.drawImage(image, currentFrame * frameWidth, 0, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
 
-      if (this.currentFrame === 0) {
+      if (currentFrame === 0) {
         resolve();
         return true;
       }
 
-      this.currentFrame--;
+      currentFrame--;
     };
   }
 }
-
-var { animate } = new Animation();
-var egg = new Egg();
-// Get canvas
-var canvas = document.querySelector('.animation');
-canvas.width = 180;
-canvas.height = 120;
-var context = canvas.getContext('2d');
-var chooseButton = document.querySelector('.choose');
-
-chooseButton.addEventListener('click', () => {
-  animate(egg.bounce(3)).then(() => {
-    animate(egg.hatch())
-  });
-});
diff --git a/Game.js b/Game.js
new file mode 100644
index 0000000..04e93ec
--- /dev/null
+++ b/Game.js
@@ -0,0 +1,24 @@
+var { animate } = new Animation();
+var egg = new Egg();
+var tamagotchi = new Tamagotchi();
+// Get canvas
+var canvas = document.querySelector('.animation');
+canvas.width = 180;
+canvas.height = 120;
+var context = canvas.getContext('2d');
+var chooseButton = document.querySelector('.choose');
+
+chooseButton.addEventListener('click', () => {
+  animate(egg.bounce(3))
+    .then(() => {
+      console.log('Bouncing complete!');
+      console.log('Time to hatch!');
+      return animate(egg.hatch());
+    }).then(() => {
+      egg.clear();
+      canvas.width = tamagotchi.sprite.frameHeight;
+      canvas.height = tamagotchi.sprite.frameWidth;
+      console.log('BABY TAMAGOTCHI!')
+      animate(tamagotchi.bounce());
+    });
+});
\ No newline at end of file
diff --git a/Tamagotchi.js b/Tamagotchi.js
new file mode 100644
index 0000000..b42c8e0
--- /dev/null
+++ b/Tamagotchi.js
@@ -0,0 +1,88 @@
+class Tamagotchi {
+  constructor() {
+    this.sprite = {};
+    this.sprite.image = new Image();
+    this.sprite.image.src = 'images/TamagotchiSprite.png';
+    this.sprite.height = 480;
+    this.sprite.width = 360;
+    this.sprite.rows = 4;
+    this.sprite.columns = 3;
+    this.sprite.frameCount = 3;
+    this.sprite.frameWidth = this.sprite.width / this.sprite.columns;
+    this.sprite.frameHeight = this.sprite.height / this.sprite.rows;
+
+    this.sprite.dislike = 0;
+    this.sprite.jump = 1;
+    this.sprite.eat = 2;
+    this.sprite.chill = 3;
+
+    this.eat = 0;
+    this.maxEat = 10;
+  }
+
+  clear() {
+    const {
+      frameWidth,
+      frameHeight,
+    } = this.sprite;
+
+    context.clearRect(0, 0, frameWidth, frameHeight);
+  }
+
+  dislike() {
+
+  }
+
+  jump() {
+
+  }
+
+  eat() {
+
+  }
+
+  bounce() {
+    const {
+      chill,
+      image,
+      frameCount,
+      frameHeight,
+      frameWidth,
+    } = this.sprite;
+
+    var bounce = 0;
+    var maxBounce = 2;
+    var increment = 1;
+    var currentFrame = 0;
+
+    return (resolve) => {
+      this.clear();
+      context.drawImage(image, currentFrame * frameWidth, chill * frameHeight, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
+
+      if (currentFrame === frameCount - 1) {
+        increment = -1;
+      }
+
+      if (currentFrame === 0) {
+        increment = 1;
+        bounce++;
+      }
+
+      if (bounce == maxBounce) {
+        resolve();
+        return true;
+      }
+
+      currentFrame += increment;
+    };
+
+
+    // return (resolve) => {
+      // goes up & down
+      // moves left
+      // goes up & down
+      // moves right
+      // repeat
+    // };
+  }
+}
\ No newline at end of file
diff --git a/images/TamagotchiSprite.png b/images/TamagotchiSprite.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8e0225e5191340cdbb9f9b681d758fbb1c928ae
GIT binary patch
literal 5498
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
QKc-Ubwrsa9+suvs2lx-QI{*Lx

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 9babbe1..7341de1 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,9 @@
       <canvas class="animation"></canvas>
     </div>
   </div>
+  <script src="Animation.js"></script>
+  <script src="Tamagotchi.js"></script>
   <script src="Egg.js"></script>
-  <!-- <script src="sprite-animation-demo.js"></script> -->
+  <script src="Game.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index c025db7..ec6c728 100644
--- a/styles.css
+++ b/styles.css
@@ -46,6 +46,8 @@
 }
 
 .animation {
+  left: 0;
+  right: 0;
   bottom: 4%;
-  left: 20%;
+  margin: 0 auto;
 }