From 1d097a1f2fded2433508a35cfc14643832650f3d Mon Sep 17 00:00:00 2001 From: Kevin Fischer Date: Thu, 12 Dec 2024 17:17:50 +0900 Subject: [PATCH 1/2] Load splashscreen from HTML file in metadata --- .../stubs/html5/dragonruby-html5-loader.js | 85 +++++-------------- .../mygame/metadata/html5-splashscreen.html | 9 ++ 2 files changed, 28 insertions(+), 66 deletions(-) create mode 100644 deploy_template/mygame/metadata/html5-splashscreen.html diff --git a/deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js b/deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js index bb4ef56e..cbe5aa78 100644 --- a/deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js +++ b/deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js @@ -542,73 +542,26 @@ var Module = { startGame(); // go go go! }, startClickToPlay: function() { - var base64 = base64Encode(FS.readFile(GDragonRubyIcon, {})); - var div = document.createElement('div'); - var leftPx = ((window.innerWidth - 640) / 2); - var leftPerc = Math.floor((leftPx / window.innerWidth) * 100); - div.id = 'clicktoplaydiv'; - div.style.width = '50%'; - div.style.height = '50%'; - div.style.backgroundColor = 'rgb(40, 44, 52)'; - div.style.position = 'absolute'; - div.style.top = '50%'; - div.style.left = '50%'; - div.style.transform = 'translate(-50%, -50%)'; - - var img = new Image(); - img.onload = function() { // once we know its size, scale it, keeping aspect ratio. - var pct = 30; - var w = img.naturalWidth; - var h = img.naturalHeight; - if (!w || !h || (w == h)) { - img.style.width = '' + pct + '%'; - img.style.height = '' + pct + '%'; - } else if (w > h) { - img.style.width = '' + pct + '%'; - } else { - img.style.height = '' + pct + '%'; - } - img.style.display = 'block'; - } + const iconBase64 = base64Encode(FS.readFile(GDragonRubyIcon, {})); + const iconDataUrl = 'data:image/png;base64,' + iconBase64; + + const splashscreenHtmlPath = '/metadata/html5-splashscreen.html'; + const splashscreenJsPath = '/metadata/html5-splashscreen.js'; + const decoder = new TextDecoder('utf-8'); + + let splashscreenHtml = decoder.decode(FS.readFile(splashscreenHtmlPath, {})); + + splashscreenHtml = splashscreenHtml.replace('{{ICON_URL}}', iconDataUrl); + splashscreenHtml = splashscreenHtml.replace('{{GAME_TITLE}}', GDragonRubyGameTitle); + splashscreenHtml = splashscreenHtml.replace('{{GAME_VERSION}}', GDragonRubyGameVersion); + splashscreenHtml = splashscreenHtml.replace('{{DEV_TITLE}}', GDragonRubyDevTitle); + + const splashscreen = document.createElement('div'); + splashscreen.innerHTML = splashscreenHtml; + splashscreen.id = 'clicktoplaydiv'; + splashscreen.addEventListener('click', Module.clickToPlayListener); - img.style.display = 'none'; - img.style.width = 'auto'; - img.style.height = 'auto'; - img.style.margin = 0; - img.style.position = 'absolute'; - img.style.top = '50%'; - img.style.left = '50%'; - img.style.transform = 'translate(-50%, -50%)'; - img.src = 'data:image/png;base64,' + base64; - div.appendChild(img); - - - var p; - - p = document.createElement('h1'); - p.textContent = GDragonRubyGameTitle + " " + GDragonRubyGameVersion + " by " + GDragonRubyDevTitle; - p.style.textAlign = 'center'; - p.style.color = '#FFFFFF'; - p.style.width = '100%'; - p.style.position = 'absolute'; - p.style.top = '10%'; - p.style['font-family'] = "monospace"; - div.appendChild(p); - - p = document.createElement('p'); - p.innerHTML = 'Click or tap here to begin.'; - p.style['font-family'] = "monospace"; - p.style['font-size'] = "20px"; - p.style.textAlign = 'center'; - p.style.backgroundColor = 'rgb(40, 44, 52)'; - p.style.color = '#FFFFFF'; - p.style.width = '100%'; - p.style.position = 'absolute'; - p.style.top = '75%'; - div.appendChild(p); - - document.body.appendChild(div); - div.addEventListener('click', Module.clickToPlayListener); + document.body.appendChild(splashscreen); window.gtk.play = Module.clickToPlayListener; }, preRun: function() { diff --git a/deploy_template/mygame/metadata/html5-splashscreen.html b/deploy_template/mygame/metadata/html5-splashscreen.html new file mode 100644 index 00000000..a131b737 --- /dev/null +++ b/deploy_template/mygame/metadata/html5-splashscreen.html @@ -0,0 +1,9 @@ +
+ +

+ {{GAME_TITLE}} {{GAME_VERSION}} by {{DEV_TITLE}} +

+

+ Click or tap here to begin. +

+
From 406794b25b52ea09d2ed1457174edba01a42d07d Mon Sep 17 00:00:00 2001 From: Kevin Fischer Date: Thu, 12 Dec 2024 17:29:06 +0900 Subject: [PATCH 2/2] Remove old unneeded variable --- .../.dragonruby/stubs/html5/dragonruby-html5-loader.js | 1 - 1 file changed, 1 deletion(-) diff --git a/deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js b/deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js index cbe5aa78..4ecec306 100644 --- a/deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js +++ b/deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js @@ -546,7 +546,6 @@ var Module = { const iconDataUrl = 'data:image/png;base64,' + iconBase64; const splashscreenHtmlPath = '/metadata/html5-splashscreen.html'; - const splashscreenJsPath = '/metadata/html5-splashscreen.js'; const decoder = new TextDecoder('utf-8'); let splashscreenHtml = decoder.decode(FS.readFile(splashscreenHtmlPath, {}));