Redesign wedding invitation for Amoria

Author: getChan

wedding-invitation/assets/amoria-background-v2.jpg

@@ -1,25 +1,28 @@
 // 초대장 정보는 이 객체만 수정하면 전체 화면에 반영됩니다.
 const WEDDING = {
-  groom: "신랑",
-  bride: "신부",
-  heroName: "오늘의 주인공",
-  introDate: "2026. 10. 10 · SAT · 1:00 PM",
-  dateText: "2026년 10월 10일 토요일 오후 1시",
-  place: "웨딩빌리지 대성당 · 1층 그랜드홀",
+  groom: "남궁찬",
+  bride: "차은서",
+  heroName: "남궁찬",
+  introDate: "2027. 05. 08 · SATURDAY",
+  dateText: "2027년 5월 8일 토요일",
+  place: "인천 웨스턴팰리스",
   message:
     "서로의 가장 좋은 친구로,\n오래오래 같은 방향을 바라보며 걷겠습니다.\n귀한 걸음으로 첫 페이지를 축복해 주세요.",
-  calendarStart: "20261010T040000Z",
-  calendarEnd: "20261010T060000Z",
+  calendarStart: "20270508",
+  calendarEnd: "20270509",
+  calendarAllDay: true,
 };
 
+const AMORIA_BGM_ID = "hCdooZxzISo";
+
 const QUESTS = [
   {
     x: 430,
     icon: "💗",
     npc: "헤라 & 사랑의 증표 수집가",
     label: "사랑의 증표",
     title: "네 개의 마음을 모아 주세요",
-    story: "안내자 헤라를 따라 웨딩빌리지에 도착했어요. 약혼반지를 만들려면 네 마을에서 받은 사랑의 증표가 필요합니다. 함께 웃고, 믿고, 기다리고, 아껴 온 네 가지 마음을 꺼내 보세요.",
+    story: "안내자 헤라를 따라 아모리아(웨딩빌리지)에 도착했어요. 약혼반지를 만들려면 네 마을에서 받은 사랑의 증표가 필요합니다. 함께 웃고, 믿고, 기다리고, 아껴 온 네 가지 마음을 꺼내 보세요.",
     task: "헤라의 안내로 입장해 추억 · 믿음 · 기다림 · 다정함의 증표 4개 모으기",
     action: "웨딩빌리지 입장 & 증표 건네기",
     toast: "사랑의 증표 4개를 모았습니다!",
@@ -135,6 +138,7 @@ const dom = {
   calendarButton: document.querySelector("#calendar-button"),
   finalShareButton: document.querySelector("#final-share-button"),
   confetti: document.querySelector("#confetti"),
+  bgmPlayer: document.querySelector("#bgm-player"),
 };
 
 const state = {
@@ -152,6 +156,7 @@ const state = {
   keys: { left: false, right: false },
   soundOn: false,
   audio: null,
+  bgmFrame: null,
   toastTimer: null,
 };
 
@@ -443,15 +448,21 @@ async function shareInvitation() {
 
 function saveCalendar() {
   const safeTitle = `${WEDDING.groom} ♥ ${WEDDING.bride} 결혼식`;
+  const startLine = WEDDING.calendarAllDay
+    ? `DTSTART;VALUE=DATE:${WEDDING.calendarStart}`
+    : `DTSTART:${WEDDING.calendarStart}`;
+  const endLine = WEDDING.calendarAllDay
+    ? `DTEND;VALUE=DATE:${WEDDING.calendarEnd}`
+    : `DTEND:${WEDDING.calendarEnd}`;
   const body = [
     "BEGIN:VCALENDAR",
     "VERSION:2.0",
     "PRODID:-//Wedding Quest//KR",
     "BEGIN:VEVENT",
     `UID:wedding-quest-${WEDDING.calendarStart}@invitation`,
     `DTSTAMP:${new Date().toISOString().replace(/[-:]/g, "").replace(/\.\d{3}/, "")}`,
-    `DTSTART:${WEDDING.calendarStart}`,
-    `DTEND:${WEDDING.calendarEnd}`,
+    startLine,
+    endLine,
     `SUMMARY:${safeTitle}`,
     `LOCATION:${WEDDING.place}`,
     `DESCRIPTION:${WEDDING.message.replaceAll("\n", "\\n")}`,
@@ -481,42 +492,53 @@ function resetGame() {
   showToast("첫 번째 퀘스트부터 다시 시작합니다!");
 }
 
-function createMusic() {
+function createAudioEngine() {
   const AudioContext = window.AudioContext || window.webkitAudioContext;
   if (!AudioContext) return null;
   const context = new AudioContext();
   const gain = context.createGain();
   gain.gain.value = 0.035;
   gain.connect(context.destination);
+  return { context, gain };
+}
+
+function sendBgmCommand(command) {
+  state.bgmFrame?.contentWindow?.postMessage(
+    JSON.stringify({ event: "command", func: command, args: [] }),
+    "*",
+  );
+}
+
+function startAmoriaBgm() {
+  if (state.bgmFrame) {
+    sendBgmCommand("playVideo");
+    return;
+  }
 
-  const notes = [261.63, 329.63, 392, 523.25, 440, 392, 329.63, 293.66];
-  let step = 0;
-  const timer = setInterval(() => {
-    if (!state.soundOn || context.state !== "running") return;
-    const oscillator = context.createOscillator();
-    const noteGain = context.createGain();
-    oscillator.type = step % 4 === 3 ? "triangle" : "sine";
-    oscillator.frequency.value = notes[step % notes.length];
-    noteGain.gain.setValueAtTime(0, context.currentTime);
-    noteGain.gain.linearRampToValueAtTime(0.7, context.currentTime + 0.02);
-    noteGain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + 0.42);
-    oscillator.connect(noteGain);
-    noteGain.connect(gain);
-    oscillator.start();
-    oscillator.stop(context.currentTime + 0.44);
-    step += 1;
-  }, 380);
-
-  return { context, gain, timer };
+  const frame = document.createElement("iframe");
+  const origin = encodeURIComponent(window.location.origin);
+  frame.title = "MapleStory Amoria BGM";
+  frame.allow = "autoplay; encrypted-media";
+  frame.referrerPolicy = "strict-origin-when-cross-origin";
+  frame.src = `https://www.youtube-nocookie.com/embed/${AMORIA_BGM_ID}?autoplay=1&loop=1&playlist=${AMORIA_BGM_ID}&controls=0&disablekb=1&fs=0&playsinline=1&enablejsapi=1&origin=${origin}`;
+  frame.addEventListener("load", () => {
+    if (state.soundOn) sendBgmCommand("playVideo");
+  });
+  dom.bgmPlayer.appendChild(frame);
+  state.bgmFrame = frame;
 }
 
 function toggleSound(forceOn) {
   const next = typeof forceOn === "boolean" ? forceOn : !state.soundOn;
-  if (!state.audio) state.audio = createMusic();
-  if (!state.audio) return;
+  if (!state.audio) state.audio = createAudioEngine();
   state.soundOn = next;
-  if (next) state.audio.context.resume();
-  else state.audio.context.suspend();
+  if (next) {
+    state.audio?.context.resume();
+    startAmoriaBgm();
+  } else {
+    state.audio?.context.suspend();
+    sendBgmCommand("pauseVideo");
+  }
   dom.soundButton.classList.toggle("is-on", state.soundOn);
   dom.soundButton.textContent = state.soundOn ? "♫" : "♪";
   dom.soundButton.setAttribute("aria-label", state.soundOn ? "배경음 끄기" : "배경음 켜기");
@@ -545,10 +567,11 @@ function playSuccessSound() {
 
 function bindControls() {
   window.addEventListener("keydown", (event) => {
-    if (["ArrowLeft", "ArrowRight", "ArrowUp", "Alt"].includes(event.key)) event.preventDefault();
+    const isJumpKey = ["Space", "KeyZ", "AltLeft", "AltRight"].includes(event.code);
+    if (["ArrowLeft", "ArrowRight", "ArrowUp"].includes(event.key) || isJumpKey) event.preventDefault();
     if (event.key === "ArrowLeft") state.keys.left = true;
     if (event.key === "ArrowRight") state.keys.right = true;
-    if (event.key === "Alt" && !event.repeat) jump();
+    if (isJumpKey && !event.repeat) jump();
     if (event.key === "ArrowUp" && !event.repeat) interact();
   });
 
@@ -619,7 +642,7 @@ function init() {
     new Promise((resolve) => {
       const image = new Image();
       image.onload = image.onerror = resolve;
-      image.src = "assets/wedding-village-panorama.jpg";
+      image.src = "assets/amoria-background-v2.jpg";
     }),
     new Promise((resolve) => {
       const image = new Image();

wedding-invitation/game.js

@@ -3,52 +3,52 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-    <meta name="theme-color" content="#72d9ef" />
+    <meta name="theme-color" content="#078ce5" />
     <meta
       name="description"
-      content="웨딩빌리지를 모험하며 만나는 모바일 게임형 결혼식 초대장"
+      content="아모리아를 모험하며 만나는 남궁찬과 차은서의 모바일 게임형 결혼식 초대장"
     />
-    <meta property="og:title" content="우리의 웨딩 퀘스트에 초대합니다" />
-    <meta property="og:description" content="방향키로 걷고, 점프하고, 포탈을 타고 결혼식에 놀러오세요!" />
-    <meta property="og:image" content="assets/wedding-village-panorama.jpg" />
-    <title>Wedding Quest · 모바일 청첩장</title>
-    <link rel="preload" href="assets/wedding-village-panorama.jpg" as="image" />
+    <meta property="og:title" content="남궁찬 ♥ 차은서의 웨딩 퀘스트" />
+    <meta property="og:description" content="2027년 5월 8일, 인천 웨스턴팰리스에서 만나요!" />
+    <meta property="og:image" content="assets/amoria-background-v2.jpg" />
+    <title>남궁찬 ♥ 차은서 · Wedding Quest</title>
+    <link rel="preload" href="assets/amoria-background-v2.jpg" as="image" />
     <link rel="preload" href="assets/groom-sprite.png" as="image" />
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
     <div id="preloader" class="preloader" aria-live="polite">
       <div class="preloader__leaf">🍁</div>
-      <p>웨딩빌리지로 이동 중...</p>
+      <p>아모리아로 이동 중...</p>
       <div class="preloader__bar"><span></span></div>
     </div>
 
     <section id="intro" class="intro" aria-labelledby="intro-title">
       <div class="intro__sparkles" aria-hidden="true"></div>
       <div class="intro__content">
-        <div class="intro__badge"><span>NEW QUEST</span> WEDDING VILLAGE</div>
+        <div class="intro__badge"><span>CH. 1</span> AMORIA · WEDDING QUEST</div>
         <p class="intro__eyebrow">우리의 가장 설레는 모험</p>
-        <h1 id="intro-title"><span id="intro-groom">신랑</span><i>♥</i><span id="intro-bride">신부</span></h1>
+        <h1 id="intro-title"><span id="intro-groom">남궁찬</span><i>♥</i><span id="intro-bride">차은서</span></h1>
         <p class="intro__copy">두 사람이 평생 파티를 맺습니다.<br />소중한 당신을 웨딩 퀘스트에 초대해요.</p>
-        <div class="intro__date" id="intro-date">2026. 10. 10 · SAT · 1:00 PM</div>
+        <div class="intro__date" id="intro-date">2027. 05. 08 · SATURDAY</div>
         <button id="start-button" class="maple-button maple-button--primary" type="button">
           <span>🍁</span> 게임 시작
         </button>
         <div class="intro__controls">
           <span><kbd>←</kbd><kbd>→</kbd> 이동</span>
-          <span><kbd>Alt</kbd> 점프</span>
+          <span><kbd>SPACE</kbd> 점프</span>
           <span><kbd>↑</kbd> 포탈</span>
         </div>
         <p class="intro__mobile-note">모바일에서는 화면 아래 버튼을 이용해 주세요</p>
       </div>
       <div class="intro__character" aria-hidden="true">
         <div class="sprite sprite--celebrate"></div>
       </div>
-      <p class="intro__credit">Wedding Quest Invitation</p>
+      <p class="intro__credit">MAPLE WEDDING · AMORIA</p>
     </section>
 
     <main id="game-shell" class="game-shell is-hidden">
-      <section id="game-viewport" class="game-viewport" aria-label="웨딩빌리지 횡스크롤 게임">
+      <section id="game-viewport" class="game-viewport" aria-label="아모리아 횡스크롤 게임">
         <div class="sky-glow" aria-hidden="true"></div>
         <div id="world" class="world" aria-hidden="true">
           <div class="world__mist world__mist--one"></div>
@@ -57,14 +57,15 @@ <h1 id="intro-title"><span id="intro-groom">신랑</span><i>♥</i><span id="int
           <div id="player-shadow" class="player-shadow"></div>
           <div id="player" class="player">
             <div id="hero-sprite" class="sprite sprite--idle"></div>
-            <div class="player__name" id="player-name">오늘의 주인공</div>
+            <div class="player__name" id="player-name">남궁찬</div>
           </div>
         </div>
 
         <header class="hud">
           <div class="hud__quest">
+            <div class="hud__channel"><span>AMORIA</span><b>CH.1</b></div>
             <div class="hud__topline">
-              <span id="location-label">웨딩빌리지 입구</span>
+              <span id="location-label">아모리아 입구</span>
               <strong><span id="progress-count">0</span>/7</strong>
             </div>
             <p id="quest-label">첫 번째 포탈을 찾아가세요</p>
@@ -82,6 +83,17 @@ <h1 id="intro-title"><span id="intro-groom">신랑</span><i>♥</i><span id="int
           <kbd>↑</kbd><span>포탈 타기</span>
         </div>
 
+        <div class="maple-statusbar" aria-hidden="true">
+          <div class="maple-statusbar__portrait"><div class="sprite sprite--idle"></div></div>
+          <div class="maple-statusbar__info">
+            <div class="maple-statusbar__name"><b>Lv. 10</b><strong>남궁찬</strong></div>
+            <div class="maple-meter maple-meter--hp"><span></span><em>HP 999 / 999</em></div>
+            <div class="maple-meter maple-meter--mp"><span></span><em>MP 999 / 999</em></div>
+            <div class="maple-meter maple-meter--exp"><span></span><em>EXP 05.08%</em></div>
+          </div>
+          <div class="maple-statusbar__menu"><span>SHOP</span><span>ITEM</span><span>MENU</span></div>
+        </div>
+
         <div class="touch-controls" aria-label="모바일 게임 조작 버튼">
           <div class="touch-controls__move">
             <button class="control-button control-button--left" data-control="left" type="button" aria-label="왼쪽으로 이동">‹</button>
@@ -92,7 +104,7 @@ <h1 id="intro-title"><span id="intro-groom">신랑</span><i>♥</i><span id="int
               <span>↑</span><small>PORTAL</small>
             </button>
             <button class="control-button control-button--jump" data-control="jump" type="button">
-              <span>ALT</span><small>JUMP</small>
+              <span>SPACE</span><small>JUMP</small>
             </button>
           </div>
         </div>
@@ -123,7 +135,7 @@ <h2 id="quest-title">웨딩빌리지에 어서 오세요!</h2>
         <h2>웨딩 퀘스트 안내</h2>
         <div class="guide-grid">
           <div><b>← →</b><span>좌우로 이동</span></div>
-          <div><b>ALT</b><span>가볍게 점프</span></div>
+          <div><b>SPACE / Z</b><span>가볍게 점프</span></div>
           <div><b>↑</b><span>빛나는 포탈 이용</span></div>
         </div>
         <p class="guide-card__tip">빛나는 포탈 가까이에서 위쪽 방향키를 누르면 이야기가 이어져요. 모바일에서는 아래 조작 버튼을 눌러주세요.</p>
@@ -137,21 +149,22 @@ <h2>웨딩 퀘스트 안내</h2>
         <div class="invitation-card__ribbon">QUEST COMPLETE</div>
         <div class="invitation-card__rings">💍</div>
         <p class="sheet-kicker">TOGETHER FOREVER</p>
-        <h2><span id="invite-groom">신랑</span><i>♥</i><span id="invite-bride">신부</span></h2>
+        <h2><span id="invite-groom">남궁찬</span><i>♥</i><span id="invite-bride">차은서</span></h2>
         <p id="invite-message" class="invitation-card__message"></p>
         <div class="invitation-card__details">
-          <div><small>DATE</small><strong id="invite-date">2026년 10월 10일 토요일 오후 1시</strong></div>
-          <div><small>PLACE</small><strong id="invite-place">웨딩빌리지 대성당 · 1층 그랜드홀</strong></div>
+          <div><small>DATE</small><strong id="invite-date">2027년 5월 8일 토요일</strong></div>
+          <div><small>PLACE</small><strong id="invite-place">인천 웨스턴팰리스</strong></div>
         </div>
         <div class="invitation-card__actions">
           <button id="calendar-button" class="maple-button maple-button--subtle" type="button">일정 저장</button>
           <button id="final-share-button" class="maple-button maple-button--primary" type="button">초대장 공유</button>
         </div>
-        <button id="replay-button" class="text-button" type="button">웨딩빌리지 다시 걷기 ↺</button>
+        <button id="replay-button" class="text-button" type="button">아모리아 다시 걷기 ↺</button>
       </article>
     </dialog>
 
     <div id="confetti" class="confetti" aria-hidden="true"></div>
+    <div id="bgm-player" class="bgm-player" aria-hidden="true"></div>
     <script src="game.js"></script>
   </body>
 </html>