Adapt for webview

Author: Desdaemon

badges.js

@@ -1191,7 +1191,7 @@ function updateBadges(callback) {
     .then(badges => {
       for (const { badgeId, newUnlock } of badges)
         if (newUnlock) { 
-          newUnlockBadges.add(newUnlock);
+          newUnlockBadges.add(badgeId);
           showBadgeToastMessage('badgeUnlocked', 'info', badgeId);
         }
       badgeCache = badges;

gamecanvas.js

@@ -45,7 +45,7 @@ document.getElementById('controls-fullscreen').addEventListener('click', () => {
 
 {
   const layout = document.getElementById('layout');
-  if (!(layout.requestFullscreen || layout.webkitRequestFullscreen)) {
+  if (!(layout.requestFullscreen || layout.webkitRequestFullscreen) || inWebview) {
     document.getElementById('controls-fullscreen').classList.add('hidden');
   }
 }

init.js

@@ -43,6 +43,10 @@ const tippyConfig = {
   touch: /** @type {['hold', number]} */(['hold', 400]),
 };
 
+const inWebview = '__webview__' in window;
+if (inWebview)
+  document.documentElement.setAttribute('webview', '');
+
 Object.defineProperty(Object.prototype, 'hasTitle', {
   enumerable: false,
   value() {
@@ -73,7 +77,9 @@ let initBlocker = Promise.resolve();
 async function injectScripts() {
   const supportsSimd = await wasmFeatureDetect.simd();
 
-  let scripts = [ 'chat.js', 'playerlist.js', 'friends.js', 'parties.js', 'system.js', 'preloads.js', 'locations.js', 'schedules.js', 'report.js', 'notifications.js', '2kki.js', 'play.js', 'gamecanvas.js', `ynoengine${supportsSimd ? '-simd' : ''}.js` ];
+  let scripts = [ 'chat.js', 'playerlist.js', 'friends.js', 'parties.js', 'system.js', 'preloads.js', 'locations.js', 'schedules.js', 'report.js', 'notifications.js', '2kki.js', 'play.js', 'gamecanvas.js' ];
+  if (!inWebview)
+    scripts.push(`ynoengine${supportsSimd ? '-simd' : ''}.js`);
 
   dependencyFiles['play.css'] = null;
 
@@ -98,12 +104,18 @@ async function injectScripts() {
         if (gameId === '2kki') {
           gameVersion = document.querySelector('meta[name="2kkiVersion"]')?.content?.replace(' Patch ', 'p');
         }
+
+        if (inWebview && !getCookie(sessionIdKey)) { 
+          setCookie(sessionIdKey, await webviewSessionToken());
+        }
 
         easyrpgPlayerLoadFuncs.push(() => {
-          easyrpgPlayer.initialized = true;
-          easyrpgPlayer.api.setNametagMode(config.nametagMode);
-          easyrpgPlayer.api.setSoundVolume(globalConfig.soundVolume);
-          easyrpgPlayer.api.setMusicVolume(globalConfig.musicVolume);
+          if (!inWebview) {
+            easyrpgPlayer.initialized = true;
+            easyrpgPlayer.api.setNametagMode(config.nametagMode);
+            easyrpgPlayer.api.setSoundVolume(globalConfig.soundVolume);
+            easyrpgPlayer.api.setMusicVolume(globalConfig.musicVolume);
+          }
           const loadingOverlay = document.getElementById('loadingOverlay');
           removeLoader(loadingOverlay);
           checkShowVersionUpdate().then(() => loadingOverlay.classList.add('loaded'));
@@ -114,14 +126,19 @@ async function injectScripts() {
             setInterval(checkDependenciesModified, 300000);
           }, 10000);
           window.onbeforeunload = function () {
-            return localizedMessages.leavePage;
+            if (!inWebview)
+              return localizedMessages.leavePage;
           };
         });
         if (typeof onResize !== 'undefined')
           easyrpgPlayerLoadFuncs.push(onResize);
 
         await initBlocker;
 
+        if (inWebview)
+          for (let loadFunc of easyrpgPlayerLoadFuncs)
+            loadFunc();
+        else
         createEasyRpgPlayer(easyrpgPlayer)
           .then(function(Module) {
             // Module is ready
@@ -816,7 +833,7 @@ function loadOrInitConfig(configObj, global, configName) {
                   case 'rulesReviewed':
                     break;
                 }
-              } else {
+              } else { // !global
                 switch (key) {
                   case 'privateMode':
                     if (value)

play.css

@@ -775,6 +775,10 @@ body.fullBg #background {
   margin: 0 -8px;
 }
 
+html[webview] #bottom {
+  display: none;
+}
+
 #header, #layout {
   display: flex;
   margin: 0 auto;
@@ -937,6 +941,10 @@ body.fullBg #background {
   z-index: 2;
 }
 
+html[webview] #mainContainer {
+  min-height: 28px;
+}
+
 /* Fix for a fullscreen bug that shifts the game canvas when focus is changed */
 #layout:fullscreen #mainContainer {
   padding-top: 0px;
@@ -1032,6 +1040,10 @@ body.fullBg #background {
   height: 100%;
 }
 
+html[webview] #canvasContainer {
+  display: none;
+}
+
 #canvas {
   display: block;
   top: 0;
@@ -3332,17 +3344,31 @@ form .uiTheme {
     border-inline-start: 24px solid transparent;
   }
 
+  html[webview] #chatboxContainer {
+    height: calc(100vh - 370px);
+    max-height: unset;
+  }
+
   #chatbox {
     height: calc(100vh - 590px);
     min-height: 200px;
     max-height: 340px;
   }
 
+  html[webview] #chatbox {
+    height: calc(100vh - 362px);
+    max-height: unset;
+  }
+
   #content.downscale #chatboxContainer {
     width: 100%;
     height: calc(100vh - 474px);
   }
 
+  html[webview] #content.downscale #chatboxContainer {
+    height: unset;
+  }
+
   #content.loggedIn.downscale #layout.explorer:not(:fullscreen) #chatboxContainer {
     height: calc(100vh - (464px - max(min(100vh - 512px, 284px), 150px)));
     max-height: 640px;
@@ -3362,7 +3388,7 @@ form .uiTheme {
     height: unset;
   }
 
-  #content.downscale #chatbox {
+  html:not[webview] #content.downscale #chatbox {
     height: calc(100vh - 470px);
   }
 

play.js

@@ -210,7 +210,8 @@ function fetchAndUpdatePlayerInfo() {
   const isLogout = !cookieSessionId && loginToken && cookieSessionId !== loginToken;
   if (isLogin || isLogout) {
     loginToken = isLogin ? cookieSessionId : null;
-    easyrpgPlayer.api.setSessionToken(isLogin ? loginToken : '');
+    if (!inWebview)
+      easyrpgPlayer.api.setSessionToken(isLogin ? loginToken : '');
     playerTooltipCache.clear();
   }
   navigator.serviceWorker?.getRegistration('/').then(registration => {
@@ -533,6 +534,8 @@ function syncLocationChange() {
   const locationNames = cachedLocations ? cachedLocations.map(l => get2kkiWikiLocationName(l)) : [];
 
   sendSessionCommand('l', locationNames);
+  if (window.webviewSetLocation)
+    window.webviewSetLocation(locationNames.join(' | '));
 }
 
 // EXTERNAL

session.js

@@ -7,6 +7,10 @@ let sessionCommandCallbackQueue = {};
 let hasConnected;
 
 function initSessionWs(attempt) {
+  if (inWebview) {
+    postInitSession();
+    return Promise.resolve();
+  }
   return new Promise(resolve => {
     if (sessionWs)
       closeSessionWs();
@@ -33,34 +37,46 @@ function initSessionWs(attempt) {
         setTimeout(() => initSessionWs(1), 5000);
       };
       easyrpgPlayer.api.sessionReady();
-      if (config.privateMode)
-        sendSessionCommand('pr', [ 1 ]);
-      if (config.hideLocation)
-        sendSessionCommand('hl', [ 1 ]);
-      if (!hasConnected) {
-        syncChatHistory()
-          .catch(err => console.error(err))
-          .finally(addChatTip);
-        hasConnected = true;
-      } else
-        syncChatHistory()
-          .catch(err => console.error(err));
+      postInitSession();
       resolve();
     };
     sessionWs.onmessage = event => {
       const args = event.data.split(wsDelim);
       const command = args[0];
-      if (command in sessionCommandHandlers) {
-        const params = args.slice(1);
-        if (sessionCommandHandlers[command])
-          sessionCommandHandlers[command](params);
-        while (sessionCommandCallbackQueue[command].length)
-          sessionCommandCallbackQueue[command].shift()(params);
-      }
+      receiveSessionMessage(command, args);
     };
   });
 }
 
+function postInitSession() {
+  if (config.privateMode)
+    sendSessionCommand('pr', [ 1 ]);
+  if (config.hideLocation)
+    sendSessionCommand('hl', [ 1 ]);
+  if (!hasConnected) {
+    syncChatHistory()
+      .catch(err => console.error(err))
+      .finally(addChatTip);
+    hasConnected = true;
+  } else
+    syncChatHistory()
+      .catch(err => console.error(err));
+}
+
+function receiveSessionMessage(command, args) {
+  if (command in sessionCommandHandlers) {
+    let params;
+    if (!Array.isArray(args))
+      params = args.split(wsDelim);
+    else
+      params = args.slice(1);
+    if (sessionCommandHandlers[command])
+      sessionCommandHandlers[command](params);
+    while (sessionCommandCallbackQueue[command].length)
+      sessionCommandCallbackQueue[command].shift()(params);
+  }
+}
+
 function closeSessionWs() {
   if (!sessionWs)
     return;
@@ -75,7 +91,7 @@ function addSessionCommandHandler(command, handler) {
 }
 
 function sendSessionCommand(command, commandParams, callbackFunc, callbackCommand) {
-  if (!sessionWs)
+  if (!sessionWs && !inWebview)
     return;
 
   let args = [ command ];
@@ -88,6 +104,8 @@ function sendSessionCommand(command, commandParams, callbackFunc, callbackComman
     if (sessionCommandCallbackQueue.hasOwnProperty(callbackCommand))
       sessionCommandCallbackQueue[callbackCommand].push(callbackFunc);
   }
-
-  sessionWs.send(args.join(wsDelim));
+  if (inWebview)
+    webviewSendSession(args.join(wsDelim));
+  else
+    sessionWs.send(args.join(wsDelim));
 }

types.d.ts

@@ -37,4 +37,8 @@ declare class FastdomPromised {
     mutate<T extends () => void>(task: T, context?: any): Promise<Awaited<ReturnType<T>>>;
 }
 
-declare const fastdom: FastdomPromised;
+declare const fastdom: FastdomPromised;
+
+/** only available with `isWebview` */
+declare function webviewSendSession(data: string): void;
+declare function webviewSessionToken(): Promise<string>;

vendor/fastdom.js

@@ -25,12 +25,14 @@ var debug = 0 ? console.log.bind(console, '[fastdom]') : function() {};
  *
  * @type {Function}
  */
-var raf = win.requestAnimationFrame
+var rafBase = win.requestAnimationFrame
   || win.webkitRequestAnimationFrame
   || win.mozRequestAnimationFrame
   || win.msRequestAnimationFrame
   || function(cb) { return setTimeout(cb, 16); };
 
+const raf = task => document.hidden ? setTimeout(task, 16) : rafBase(task);
+
 /**
  * Initialize a `FastDom`.
  *
@@ -57,7 +59,9 @@ FastDom.prototype = {
    */
   runTasks: function(tasks) {
     debug('run tasks');
-    var task; while (task = tasks.shift()) task();
+    for (let i = 0; i < tasks.length; ++i)
+      tasks[i]();
+    tasks.length = 0;
   },
 
   /**