feat: 곡의 해당 지점에서 게임을 끝내는 end trigger 추가

HyeokjinKang · Apr 10, 2024 · 7c3dea4 · 7c3dea4
1 parent 7b02b15
commit 7c3dea4
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 60 deletions.
diff --git a/public/js/editor.js b/public/js/editor.js
@@ -1164,6 +1164,8 @@ const cntRender = () => {
           cntCtx.textBaseline = renderTriggers[i].valign;
           cntCtx.fillText(renderTriggers[i].text, tw * (renderTriggers[i].x + 100), th * (renderTriggers[i].y + 100));
         }
+      } else if (renderTriggers[i].value == 6) {
+        song.stop();
       }
     }
 

diff --git a/public/js/play.js b/public/js/play.js
@@ -230,8 +230,6 @@ const initialize = (isFirstCalled) => {
           autoplay: false,
           loop: false,
           onend: () => {
-            isResultShowing = true;
-            menuAllowed = false;
             calculateResult();
           },
           onload: () => {
@@ -893,6 +891,8 @@ const cntRender = () => {
           ctx.textBaseline = renderTriggers[i].valign;
           ctx.fillText(renderTriggers[i].text, (canvas.width / 200) * (renderTriggers[i].x + 100), (canvas.height / 200) * (renderTriggers[i].y + 100));
         }
+      } else if (renderTriggers[i].value == 6) {
+        calculateResult();
       }
     }
     ctx.globalAlpha = globalAlpha;
@@ -1155,7 +1155,10 @@ const trackMousePos = (e) => {
 };
 
 const calculateResult = () => {
-  resultEffect.play();
+  if (isResultShowing) return;
+  isResultShowing = true;
+  menuAllowed = false;
+  if (!song.playing) resultEffect.play();
   document.getElementById("perfectResult").textContent = perfect;
   document.getElementById("greatResult").textContent = great;
   document.getElementById("goodResult").textContent = good;
@@ -1183,21 +1186,33 @@ const calculateResult = () => {
   }
   rankImg.src = `/images/parts/elements/${rank}.webp`;
   document.getElementById("scoreInfoRank").style.setProperty("--background", `url('/images/parts/elements/${rank}back.webp')`);
-  setTimeout(() => {
-    canvasContainer.style.opacity = "0";
-  }, 500);
-  setTimeout(() => {
-    floatingArrowContainer.style.display = "flex";
-    floatingArrowContainer.classList.toggle("arrowFade");
-  }, 1000);
-  setTimeout(() => {
-    floatingResultContainer.style.display = "flex";
-    floatingResultContainer.classList.toggle("resultFade");
-  }, 1300);
-  setTimeout(() => {
-    scoreContainer.style.opacity = "1";
-    scoreContainer.style.pointerEvents = "all";
-  }, 2000);
+  setTimeout(
+    () => {
+      canvasContainer.style.opacity = "0";
+    },
+    song.playing ? 0 : 500
+  );
+  setTimeout(
+    () => {
+      floatingArrowContainer.style.display = "flex";
+      floatingArrowContainer.classList.toggle("arrowFade");
+    },
+    song.playing ? 0 : 1000
+  );
+  setTimeout(
+    () => {
+      floatingResultContainer.style.display = "flex";
+      floatingResultContainer.classList.toggle("resultFade");
+    },
+    song.playing ? 300 : 1300
+  );
+  setTimeout(
+    () => {
+      scoreContainer.style.opacity = "1";
+      scoreContainer.style.pointerEvents = "all";
+    },
+    song.playing ? 1000 : 2000
+  );
   missCtx.beginPath();
   missCtx.fillStyle = "#FFF";
   missCtx.strokeStyle = "#FFF";

diff --git a/public/js/test.js b/public/js/test.js
@@ -212,8 +212,6 @@ const initialize = (isFirstCalled) => {
       autoplay: false,
       loop: false,
       onend: () => {
-        isResultShowing = true;
-        menuAllowed = false;
         calculateResult();
       },
       onload: () => {
@@ -869,6 +867,8 @@ const cntRender = () => {
           ctx.textBaseline = renderTriggers[i].valign;
           ctx.fillText(renderTriggers[i].text, (canvas.width / 200) * (renderTriggers[i].x + 100), (canvas.height / 200) * (renderTriggers[i].y + 100));
         }
+      } else if (renderTriggers[i].value == 6) {
+        calculateResult();
       }
     }
     ctx.globalAlpha = globalAlpha;
@@ -1101,7 +1101,10 @@ const trackMousePos = (e) => {
 };
 
 const calculateResult = () => {
-  resultEffect.play();
+  if (isResultShowing) return;
+  isResultShowing = true;
+  menuAllowed = false;
+  if (!song.playing) resultEffect.play();
   document.getElementById("perfectResult").textContent = perfect;
   document.getElementById("greatResult").textContent = great;
   document.getElementById("goodResult").textContent = good;
@@ -1129,21 +1132,33 @@ const calculateResult = () => {
   }
   rankImg.src = `/images/parts/elements/${rank}.webp`;
   document.getElementById("scoreInfoRank").style.setProperty("--background", `url('/images/parts/elements/${rank}back.webp')`);
-  setTimeout(() => {
-    canvasContainer.style.opacity = "0";
-  }, 500);
-  setTimeout(() => {
-    floatingArrowContainer.style.display = "flex";
-    floatingArrowContainer.classList.toggle("arrowFade");
-  }, 1000);
-  setTimeout(() => {
-    floatingResultContainer.style.display = "flex";
-    floatingResultContainer.classList.toggle("resultFade");
-  }, 1300);
-  setTimeout(() => {
-    scoreContainer.style.opacity = "1";
-    scoreContainer.style.pointerEvents = "all";
-  }, 2000);
+  setTimeout(
+    () => {
+      canvasContainer.style.opacity = "0";
+    },
+    song.playing ? 0 : 500
+  );
+  setTimeout(
+    () => {
+      floatingArrowContainer.style.display = "flex";
+      floatingArrowContainer.classList.toggle("arrowFade");
+    },
+    song.playing ? 0 : 1000
+  );
+  setTimeout(
+    () => {
+      floatingResultContainer.style.display = "flex";
+      floatingResultContainer.classList.toggle("resultFade");
+    },
+    song.playing ? 300 : 1300
+  );
+  setTimeout(
+    () => {
+      scoreContainer.style.opacity = "1";
+      scoreContainer.style.pointerEvents = "all";
+    },
+    song.playing ? 1000 : 2000
+  );
   missCtx.beginPath();
   missCtx.fillStyle = "#FFF";
   missCtx.strokeStyle = "#FFF";

diff --git a/public/js/tutorial.js b/public/js/tutorial.js
@@ -198,8 +198,6 @@ const initialize = (isFirstCalled) => {
       autoplay: false,
       loop: false,
       onend: () => {
-        isResultShowing = true;
-        menuAllowed = false;
         calculateResult();
       },
       onload: () => {
@@ -855,6 +853,8 @@ const cntRender = () => {
           ctx.textBaseline = renderTriggers[i].valign;
           ctx.fillText(renderTriggers[i].text, (canvas.width / 200) * (renderTriggers[i].x + 100), (canvas.height / 200) * (renderTriggers[i].y + 100));
         }
+      } else if (renderTriggers[i].value == 6) {
+        calculateResult();
       }
     }
     ctx.globalAlpha = globalAlpha;
@@ -1087,7 +1087,10 @@ const trackMousePos = (e) => {
 };
 
 const calculateResult = () => {
-  resultEffect.play();
+  if (isResultShowing) return;
+  isResultShowing = true;
+  menuAllowed = false;
+  if (!song.playing) resultEffect.play();
   document.getElementById("perfectResult").textContent = perfect;
   document.getElementById("greatResult").textContent = great;
   document.getElementById("goodResult").textContent = good;
@@ -1115,21 +1118,33 @@ const calculateResult = () => {
   }
   rankImg.src = `/images/parts/elements/${rank}.webp`;
   document.getElementById("scoreInfoRank").style.setProperty("--background", `url('/images/parts/elements/${rank}back.webp')`);
-  setTimeout(() => {
-    canvasContainer.style.opacity = "0";
-  }, 500);
-  setTimeout(() => {
-    floatingArrowContainer.style.display = "flex";
-    floatingArrowContainer.classList.toggle("arrowFade");
-  }, 1000);
-  setTimeout(() => {
-    floatingResultContainer.style.display = "flex";
-    floatingResultContainer.classList.toggle("resultFade");
-  }, 1300);
-  setTimeout(() => {
-    scoreContainer.style.opacity = "1";
-    scoreContainer.style.pointerEvents = "all";
-  }, 2000);
+  setTimeout(
+    () => {
+      canvasContainer.style.opacity = "0";
+    },
+    song.playing ? 0 : 500
+  );
+  setTimeout(
+    () => {
+      floatingArrowContainer.style.display = "flex";
+      floatingArrowContainer.classList.toggle("arrowFade");
+    },
+    song.playing ? 0 : 1000
+  );
+  setTimeout(
+    () => {
+      floatingResultContainer.style.display = "flex";
+      floatingResultContainer.classList.toggle("resultFade");
+    },
+    song.playing ? 300 : 1300
+  );
+  setTimeout(
+    () => {
+      scoreContainer.style.opacity = "1";
+      scoreContainer.style.pointerEvents = "all";
+    },
+    song.playing ? 1000 : 2000
+  );
   missCtx.beginPath();
   missCtx.fillStyle = "#FFF";
   missCtx.strokeStyle = "#FFF";

diff --git a/views/editor.ejs b/views/editor.ejs
@@ -265,7 +265,7 @@
                       <option>Opacity</option>
                       <option>Speed</option>
                       <option>Text</option>
-                      <!-- <option>Seek</option> -->
+                      <option>End</option>
                     </select>
                   </div>
                 </div>
@@ -282,7 +282,7 @@
                       <option>Opacity</option>
                       <option>Speed</option>
                       <option>Text</option>
-                      <!-- <option>Seek</option> -->
+                      <option>End</option>
                     </select>
                   </div>
                 </div>
@@ -384,10 +384,6 @@
                     <span class="settingsPropertiesTitle">TIMING</span>
                     <input type="text" class="settingsPropertiesTextbox metropolis" onfocus="textFocused()" onblur="textBlurred()" onkeyup="settingsInput('Timing', this)" />
                   </div>
-                  <div class="settingsPropertiesIndividual">
-                    <span class="settingsPropertiesTitle">SEEK TO</span>
-                    <input type="text" class="settingsPropertiesTextbox metropolis" onfocus="textFocused()" onblur="textBlurred()" onkeyup="triggersInput('seek', this)" />
-                  </div>
                 </div>
                 <div class="settingsPropertiesContainer">
                   <p class="settingsSemiTitle">ACTION</p>