Merge branch 'auto-save-replay'

gorisanson · Jun 18, 2020 · e6c7d0f · e6c7d0f
2 parents 3a26d1c + cdceceb
commit e6c7d0f
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 0 deletions.
diff --git a/src/en/index.html b/src/en/index.html
@@ -168,6 +168,15 @@ <h1>Pikachu Volleyball <span class="no-wrap">P2P Online</span></h1>
               messages.)</label
             >
           </div>
+          <div class="margin-top-a-little">
+            <input id="auto-save-replay-checkbox" type="checkbox" />
+            <label for="auto-save-replay-checkbox"
+              >Automatically save replay file when a connection with a peer
+              ends. (In Safari browser, this option malfunctions, so it is
+              recommended to be turned off. In Chrome and Firefox browser, this
+              option were checked to work properly.)</label
+            >
+          </div>
         </div>
         <div>
           <p class="margin-top">

diff --git a/src/ko/index.html b/src/ko/index.html
@@ -166,6 +166,15 @@ <h1>피카츄 배구 <span class="no-wrap">P2P 온라인</span></h1>
               "빠르게"로 변경됩니다.)</label
             >
           </div>
+          <div class="margin-top-a-little">
+            <input id="auto-save-replay-checkbox" type="checkbox" />
+            <label for="auto-save-replay-checkbox"
+              >리플레이 자동 저장 (상대방과의 연결을 마칠 때 리플레이 파일을
+              자동으로 저장합니다. 사파리 브라우저에서는 이 설정이 오류를
+              일으키므로 이 설정을 끄기를 권장합니다. 크롬, 파이어폭스
+              브라우저에서 정상 작동을 확인했습니다.)</label
+            >
+          </div>
         </div>
         <div>
           <p class="margin-top">

diff --git a/src/resources/js/ui_online.js b/src/resources/js/ui_online.js
@@ -67,6 +67,7 @@ const pendingOptions = {
 };
 
 let pikaVolleyOnline = null; // it is set after loading the game assets
+let willSaveReplayAutomatically = null;
 
 const chatOpenBtnAndChatDisablingBtnContainer = document.getElementById(
   'chat-open-btn-and-chat-disabling-btn-container'
@@ -183,6 +184,7 @@ export function setUpUI() {
     }
   });
 
+  // For auto-fast-speed-checkbox
   const autoFastSpeedCheckboxElem = document.getElementById(
     'auto-fast-speed-checkbox'
   );
@@ -214,6 +216,36 @@ export function setUpUI() {
     }
   });
 
+  // For auto-save-replay-checkbox
+  const autoSaveReplayCheckbox = document.getElementById(
+    'auto-save-replay-checkbox'
+  );
+  try {
+    willSaveReplayAutomatically =
+      'true' === window.localStorage.getItem('willSaveReplayAutomatically');
+  } catch (err) {
+    console.log(err);
+  }
+  if (willSaveReplayAutomatically !== null) {
+    // @ts-ignore
+    autoSaveReplayCheckbox.checked = willSaveReplayAutomatically;
+  } else {
+    // @ts-ignore
+    willSaveReplayAutomatically = autoSaveReplayCheckbox.checked;
+  }
+  autoSaveReplayCheckbox.addEventListener('change', () => {
+    // @ts-ignore
+    willSaveReplayAutomatically = autoSaveReplayCheckbox.checked;
+    try {
+      window.localStorage.setItem(
+        'willSaveReplayAutomatically',
+        String(willSaveReplayAutomatically)
+      );
+    } catch (err) {
+      console.log(err);
+    }
+  });
+
   let bgmSetting = null;
   try {
     bgmSetting = window.localStorage.getItem('bgm');
@@ -453,8 +485,12 @@ export function setUpUI() {
   window.addEventListener('unload', closeConnection);
 
   window.addEventListener('beforeunload', function (e) {
+    // This is for exiting the window by the browser exit button while being connected with quick match server
     cleanUpFirestoreRelevants();
     if (channel.isOpen) {
+      if (willSaveReplayAutomatically) {
+        replaySaver.saveAsFile();
+      }
       // Cancel the event
       e.preventDefault(); // If you prevent default behavior in Mozilla Firefox prompt will always be shown
       // Chrome requires returnValue to be set
@@ -890,6 +926,9 @@ export function askOptionsChangeReceivedFromPeer(options) {
 }
 
 export function noticeDisconnected() {
+  if (willSaveReplayAutomatically) {
+    replaySaver.saveAsFile();
+  }
   document.getElementById('notice-disconnected').classList.remove('hidden');
 }
 

diff --git a/src/resources/style.css b/src/resources/style.css
@@ -402,6 +402,9 @@ div.margin-top,
 p.margin-top {
   margin-top: calc(2.5 * var(--font-size));
 }
+div.margin-top-a-little {
+  margin-top: var(--font-size);
+}
 ul {
   margin-top: var(--font-size);
   margin-bottom: var(--font-size);