Skip to content

Commit

Permalink
chore: webgl build
Browse files Browse the repository at this point in the history
  • Loading branch information
andrew-yangy committed Oct 9, 2024
1 parent 6517534 commit a8643ed
Show file tree
Hide file tree
Showing 23 changed files with 594 additions and 1 deletion.
2 changes: 1 addition & 1 deletion .github/workflows/linter.yml
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ jobs:
VALIDATE_ALL_CODEBASE: true
DEFAULT_BRANCH: main
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
FILTER_REGEX_EXCLUDE: (.*src/Packages/Passport/Runtime/ThirdParty/.*|.*src/Packages/Passport/Runtime/Resources/.*|.*Plugins/.*|.*src/Packages/Passport/Runtime/Assets/ImmutableAndroid.androidlib/.*|.*src/Packages/Orderbook|.*sample/Assets/WebGLTemplates)
FILTER_REGEX_EXCLUDE: (.*src/Packages/Passport/Runtime/ThirdParty/.*|.*src/Packages/Passport/Runtime/Resources/.*|.*Plugins/.*|.*src/Packages/Passport/Runtime/Assets/ImmutableAndroid.androidlib/.*|.*src/Packages/Orderbook|.*sample)
VALIDATE_MARKDOWN: false
VALIDATE_GITLEAKS: false
VALIDATE_JSCPD: false
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ crashlytics-build.properties

sample-passport-unity-game/
sample/iosBuild
!/sample/webgl/Build/

# Android
src/Packages/Passport/Runtime/Assets/ImmutableAndroid.androidlib/**/*.meta
Expand Down
Binary file added sample/webgl/Build/webgl.data
Binary file not shown.
5 changes: 5 additions & 0 deletions sample/webgl/Build/webgl.framework.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions sample/webgl/Build/webgl.loader.js

Large diffs are not rendered by default.

Binary file added sample/webgl/Build/webgl.wasm
Binary file not shown.
351 changes: 351 additions & 0 deletions sample/webgl/Passport/index.html

Large diffs are not rendered by default.

Binary file added sample/webgl/TemplateData/MemoryProfiler.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sample/webgl/TemplateData/favicon.ico
Binary file not shown.
Binary file added sample/webgl/TemplateData/fullscreen-button.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions sample/webgl/TemplateData/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
Binary file added sample/webgl/TemplateData/unity-logo-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sample/webgl/TemplateData/webgl-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added sample/webgl/TemplateData/webmemd-icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions sample/webgl/callback.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Immutable SDK Sample App</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="unity-webview.js"></script>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<div id="unity-build-title">Logging in</div>
</div>
<script>
window.opener.postMessage({
type: 'callback',
url: window.location.href,
});
window.close();
</script>
</body>
</html>
99 changes: 99 additions & 0 deletions sample/webgl/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Immutable SDK Sample App</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="unity-webview.js"></script>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<canvas id="unity-canvas"></canvas>
<div id="unity-loading-bar">
<div id="unity-logo"></div>
<div id="unity-progress-bar-empty">
<div id="unity-progress-bar-full"></div>
</div>
</div>
<div id="unity-footer">
<div id="unity-webgl-logo"></div>
<div id="unity-fullscreen-button"></div>
<div id="unity-build-title">Immutable SDK Sample App</div>
</div>
</div>
<script>
var buildUrl = "Build";
var loaderUrl = buildUrl + "/webgl.loader.js";
var config = {
dataUrl: buildUrl + "/webgl.data",
frameworkUrl: buildUrl + "/webgl.framework.js",
codeUrl: buildUrl + "/webgl.wasm",
streamingAssetsUrl: "StreamingAssets",
companyName: "Immutable",
productName: "Immutable SDK Sample App",
productVersion: "0.1.0",
};

var container = document.querySelector("#unity-container");
var canvas = document.querySelector("#unity-canvas");
var loadingBar = document.querySelector("#unity-loading-bar");
var progressBarFull = document.querySelector("#unity-progress-bar-full");
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
var width0 = "960px";
var height0 = "600px";

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
container.className = "unity-mobile";
config.devicePixelRatio = 1;
} else {
canvas.style.width = "960px";
canvas.style.height = "600px";
}
loadingBar.style.display = "block";

document.addEventListener(
'fullscreenchange',
function() {
var p = document.getElementById('unity-container');
var c = document.getElementById('unity-canvas');
if (document.fullscreenElement) {
width0 = c.style.width;
height0 = c.style.height;
setTimeout(
function() {
c.style.width = getComputedStyle(p).width;
c.style.height = getComputedStyle(p).height;
},
250);
} else {
c.style.width = width0;
c.style.height = height0;
}
});
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
progressBarFull.style.width = 100 * progress + "%";
}).then((unityInstance) => {
window.unityInstance = unityInstance;
loadingBar.style.display = "none";
fullscreenButton.onclick = () => {
var p = document.getElementById('unity-container');
var c = document.getElementById('unity-canvas');
c.requestFullscreen = () => {
p.requestFullscreen();
};
unityInstance.SetFullscreen(1);
};
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
</script>
</body>
</html>
24 changes: 24 additions & 0 deletions sample/webgl/logout.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Immutable SDK Sample App</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="unity-webview.js"></script>
</head>
<body>
<div id="unity-container" class="unity-desktop">
<div id="unity-build-title">Logging out</div>
</div>
<script>
window.opener.postMessage({
type: 'logout',
url: window.location.href,
});
window.close();
</script>
</body>
</html>
72 changes: 72 additions & 0 deletions sample/webgl/unity-webview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
var unityWebView =
{
loaded: [],

init: function(name) {
$containers = $('.webviewContainer');
if ($containers.length === 0) {
$('<div style="position: absolute; left: 0px; width: 100%; height: 100%; top: 0px; pointer-events: none;"><div class="webviewContainer" style="overflow: hidden; position: relative; width: 100%; height: 100%; z-index: 1;"></div></div>')
.appendTo($('#unity-container'));
}
var $last = $('.webviewContainer:last');
var clonedTop = parseInt($last.css('top')) - 100;
var $clone = $last.clone().insertAfter($last).css('top', clonedTop + '%');
var $iframe =
$('<iframe style="position:relative; width:100%; height100%; border-style:none; display:none; pointer-events:auto;"></iframe>')
.attr('id', 'webview_' + name)
.appendTo($last)
$iframe.on('load', function () {
$(this).attr('loaded', 'true');

var js = `window.Unity = {
call:function(msg) {
parent.unityWebView.sendMessage('${name}', msg);
}
};`;

this.contentWindow.eval(js);

window.addEventListener('message', function(event) {
if ((event.data.type === 'callback' || event.data.type === 'logout') && event.isTrusted) {
unityInstance.SendMessage(name, 'CallOnAuth', event.data.url);
}
}, false);
});
return $iframe;
},

sendMessage: function (name, message) {
unityInstance.SendMessage(name, "CallFromJS", message);
},

loadURL: function(name, url) {
var baseUrl = window.location.origin + window.location.pathname.replace(/\/[^\/]*$/, "");
console.log(url, window.location.origin, window.location.pathname);
console.log(baseUrl);
const host = window.location.origin.includes('localhost') ? window.location.origin : baseUrl;
this.iframe(name).attr('loaded', 'false')[0].contentWindow.location.replace(host + url);
},

evaluateJS: function (name, js) {
$iframe = this.iframe(name);
if ($iframe.attr('loaded') === 'true') {
$iframe[0].contentWindow.eval(js);
} else {
$iframe.on('load', function(){
$(this)[0].contentWindow.eval(js);
});
}
},

destroy: function (name) {
this.iframe(name).parent().parent().remove();
},

iframe: function (name) {
return $('#webview_' + name);
},

launchAuthURL: function(name, url) {
window.open(url, '_blank', 'width=460,height=660');
},
};

0 comments on commit a8643ed

Please sign in to comment.