Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load HTML5 splashscreen dynamically from HTML file in metadata #160

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Load HTML5 splashscreen dynamically from HTML file in metadata #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d097a1
Load splashscreen from HTML file in metadata
kfischer-okarin Dec 12, 2024
406794b
Remove old unneeded variable
kfischer-okarin Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 18 additions & 66 deletions deploy_template/.dragonruby/stubs/html5/dragonruby-html5-loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,73 +542,25 @@ 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';
}
Comment on lines -559 to -572
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could not sanely reproduce this Javascript that dynamically sets the icon CSS depending on its actual width/height.

But I replaced it with static styles (fixed max-height max-height of 30%) that should hopefully have the same effects.....

I can try and take some comparison screenshots later with some extremely proportioned icons

const iconBase64 = base64Encode(FS.readFile(GDragonRubyIcon, {}));
const iconDataUrl = 'data:image/png;base64,' + iconBase64;

const splashscreenHtmlPath = '/metadata/html5-splashscreen.html';
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() {
Expand Down
9 changes: 9 additions & 0 deletions deploy_template/mygame/metadata/html5-splashscreen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<div style="width: 50%; height: 50%; background-color: rgb(40, 44, 52); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<img src="{{ICON_URL}}" style="display: block; max-width: 30%; max-height: 30%; margin: 0px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<h1 style="text-align: center; color: rgb(255, 255, 255); width: 100%; position: absolute; top: 10%; font-family: monospace;">
{{GAME_TITLE}} {{GAME_VERSION}} by {{DEV_TITLE}}
</h1>
<p style="font-family: monospace; font-size: 20px; text-align: center; background-color: rgb(40, 44, 52); color: rgb(255, 255, 255); width: 100%; position: absolute; top: 75%;">
Click or tap here to begin.
</p>
</div>