feat: ending scene 1st part WIP #76

es-rene99 · Aug 6, 2021 · 1574bb1 · 1574bb1
1 parent 12f3eee
commit 1574bb1
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 8 deletions.
diff --git a/src/main.js b/src/main.js
@@ -935,7 +935,7 @@ function checkIfAnswerIsCorrect() {
     winAnswers += 1;
     if (winAnswers % ANSWERS_PER_LEVEL === 0) {
       level = Math.floor((winAnswers / ANSWERS_PER_LEVEL)) + 1;
-      if (level === 2) {
+      if (level === 3) {
         uiHandler.finalScene();
       }
       timer.levelupHandling();
@@ -1123,17 +1123,60 @@ function sceneControl() {
     playerMonster.style.display = 'block';
     textFrame.style.visibility = 'hidden';
     sceneDiv.style.display = 'block';
-    storyContent[0] = 'Good job little creature!';
+    storyContent[0] = 'Your final transformation caused destruction all around you.';
     storyContent[1] = 'You have learned and grown so much!';
-    storyContent[2] = 'Now we will help you escape the castle';
-    storyContent[3] = 'And live with us, ';
-    storyContent[4] = 'Your new family of calculationsters';
-    storyContent[5] = 'Just like you!';
+    storyContent[2] = "While you're getting used to your full power ";
+    storyContent[3] = 'you feel someone approaching...';
+    storyContent[4] = '';
+    storyContent[5] = '';
     resetText();
     typewriter();
     textFrame.style.visibility = 'visible';
     scene += 1;
   } else if (scene === 9) {
+    wizard.style.display = 'block';
+    storyContent[0] = '"That sound, my monster!"';
+    storyContent[1] = '"You have more power that I had imagined"';
+    storyContent[2] = '"Now come forth as my soldier';
+    storyContent[3] = 'you will allow me to conquer the world!"';
+    storyContent[4] = '...';
+    storyContent[5] = '...';
+    resetText();
+    typewriter();
+    textFrame.style.visibility = 'visible';
+    scene += 1;
+  } else if (scene === 10) {
+    wizard.style.display = 'block';
+    storyContent[0] = '"... Aren\'t you listening? Come towards me!"';
+    storyContent[1] = '"You will need to be disciplined!"';
+    storyContent[2] = '';
+    storyContent[3] = '';
+    storyContent[4] = '';
+    storyContent[5] = '';
+    resetText();
+    typewriter();
+    textFrame.style.visibility = 'visible';
+    wizard.style.animation = 'move-right 1s forwards';
+    scene += 1;
+  } else if (scene === 11) {
+    let calculationsterMagicAttack = document.createElement('div');
+    calculationsterMagicAttack.className = 'calculationster-magic-attack';
+    calculationsterMagicAttack.textContent = '2+2=4';
+    sceneDiv.appendChild(calculationsterMagicAttack);
+    calculationsterMagicAttack = document.querySelector('.calculationster-magic-attack');
+    storyContent[0] = '"AAAH-"';
+    storyContent[1] = 'You defeated the wizard easily';
+    storyContent[2] = 'and decided to finally escape from this castle.';
+    storyContent[3] = '';
+    storyContent[4] = '';
+    storyContent[5] = '';
+    resetText();
+    typewriter();
+    textFrame.style.visibility = 'visible';
+    calculationsterMagicAttack.style.animation = 'expand-magic 1.2s forwards';
+    wizard.style.animation = 'send-flying 4s forwards';
+    scene += 1;
+  } else if (scene === 19) {
     textFrame.style.visibility = 'hidden';
     storyContent[0] = `You escaped with ${timer.sec} seconds to spare!`;
     storyContent[1] = 'For each remaining second you get 5 bonus points';
@@ -1145,7 +1188,7 @@ function sceneControl() {
     typewriter();
     textFrame.style.visibility = 'visible';
     scene += 1;
-  } else if (scene === 10) {
+  } else if (scene === 99) {
     // * Refresh the game to title screen
     window.location.reload();
   }

diff --git a/src/style.css b/src/style.css
@@ -511,6 +511,24 @@ img.egg {
   box-shadow: 1px 1px 10px;
 }
 
+.calculationster-magic-attack {
+  display: block;
+  position: absolute;
+  font-size: 2rem;
+  color: #fb15fb;
+  text-shadow: -1px 1px 2px #23430c, 1px 1px 2px #23430c, 1px -1px 0 #23430c,
+    -1px -1px 0 #23430c;
+  -webkit-text-stroke: 1px #23430c;
+  border: 10px darkmagenta;
+  border-top-style: none;
+  border-right-style: none;
+  border-bottom-style: none;
+  border-left-style: none;
+  border-style: double;
+  bottom: 10%;
+  left: 41%;
+}
+
 @keyframes addedSeconds {
   0% {
     color: green;
@@ -545,11 +563,47 @@ img.egg {
     bottom: 5%;
   }
 }
+@keyframes move-right {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+  100% {
+    -webkit-transform: translateX(12.5rem);
+    transform: translateX(12.5rem);
+  }
+}
 
-@keyframes fade-in {
+@keyframes expand-magic {
+  0% {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: scale(5);
+    transform: scale(5);
+    opacity: 0;
+  }
+}
+@keyframes send-flying {
   0% {
+    -webkit-transform: translateX(0) translateY(0) rotate(0deg);
+    transform: translateX(0) translateY(0) rotate(0deg);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(-1000px) translateY(-3000px) rotate(-540deg);
+    transform: translateX(-1000px) translateY(-3000px) rotate(-540deg);
     opacity: 0;
   }
+}
+
+@keyframes fade-in {
+  0% {
+    /* TODO need to set as 0 added as testing */
+    opacity: 1;
+  }
   100% {
     opacity: 1;
   }