235 lines
7.4 KiB
HTML
235 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
<title>G102-sequence</title>
|
||
|
||
<!-- Standardised web app manifest -->
|
||
<link rel="manifest" href="appmanifest.json" />
|
||
|
||
<!-- Allow fullscreen mode on iOS devices. (These are Apple specific meta tags.) -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||
<link rel="apple-touch-icon" sizes="256x256" href="icon-256.png" />
|
||
<meta name="HandheldFriendly" content="true" />
|
||
|
||
<!-- Chrome for Android web app tags -->
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<link rel="shortcut icon" sizes="256x256" href="icon-256.png" />
|
||
|
||
<!-- All margins and padding must be zero for the canvas to fill the screen. -->
|
||
<style type="text/css">
|
||
* {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
html, body {
|
||
color: #fff;
|
||
overflow: hidden;
|
||
touch-action: none;
|
||
-ms-touch-action: none;
|
||
}
|
||
canvas {
|
||
touch-action-delay: none;
|
||
touch-action: none;
|
||
-ms-touch-action: none;
|
||
}
|
||
</style>
|
||
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div id="fb-root"></div>
|
||
<div style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;">
|
||
<!--<img src = "./bg.jpg" style="width:100%; height: 100%; object-fit: cover;"/> -->
|
||
<video autoplay="" loop="" muted="" style="width : 100%; height: 100%;object-fit: cover;" src="bg.mp4">
|
||
</video>
|
||
</div>
|
||
<script>
|
||
// Issue a warning if trying to preview an exported project on disk.
|
||
(function(){
|
||
// Check for running exported on file protocol
|
||
if (window.location.protocol.substr(0, 4) === "file")
|
||
{
|
||
alert("Exported games won't work until you upload them. (When running on the file:/// protocol, browsers block many features from working for security reasons.)");
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<!-- The canvas must be inside a div called c2canvasdiv -->
|
||
<div id="c2canvasdiv">
|
||
|
||
<!-- The canvas the project will render to. If you change its ID, don't forget to change the
|
||
ID the runtime looks for in the jQuery events above (ready() and cr_sizeCanvas()). -->
|
||
<canvas id="c2canvas" width="1200" height="1200">
|
||
<!-- This text is displayed if the visitor's browser does not support HTML5.
|
||
You can change it, but it is a good idea to link to a description of a browser
|
||
and provide some links to download some popular HTML5-compatible browsers. -->
|
||
<h1>Your browser does not appear to support HTML5. Try upgrading your browser to the latest version. <a href="http://www.whatbrowser.org">What is a browser?</a>
|
||
<br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
|
||
<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
|
||
<a href="http://www.google.com/chrome/">Google Chrome</a><br/>
|
||
<a href="http://www.apple.com/safari/download/">Apple Safari</a></h1>
|
||
</canvas>
|
||
|
||
</div>
|
||
|
||
<!-- Pages load faster with scripts at the bottom -->
|
||
|
||
<!-- Construct 2 exported games require jQuery. -->
|
||
<script src="jquery-3.4.1.min.js"></script>
|
||
<script src="tdv_sdk.js"></script>
|
||
|
||
|
||
<!-- The runtime script. You can rename it, but don't forget to rename the reference here as well.
|
||
This file will have been minified and obfuscated if you enabled "Minify script" during export. -->
|
||
<script src="c2runtime.js"></script>
|
||
|
||
<script>
|
||
// Start the Construct 2 project running on window load.
|
||
jQuery(document).ready(function ()
|
||
{
|
||
// Create new runtime using the c2canvas
|
||
cr_createRuntime("c2canvas");
|
||
});
|
||
|
||
// Pause and resume on page becoming visible/invisible
|
||
function onVisibilityChanged() {
|
||
if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)
|
||
cr_setSuspended(true);
|
||
else
|
||
cr_setSuspended(false);
|
||
};
|
||
|
||
document.addEventListener("visibilitychange", onVisibilityChanged, false);
|
||
document.addEventListener("mozvisibilitychange", onVisibilityChanged, false);
|
||
document.addEventListener("webkitvisibilitychange", onVisibilityChanged, false);
|
||
document.addEventListener("msvisibilitychange", onVisibilityChanged, false);
|
||
|
||
function OnRegisterSWError(e)
|
||
{
|
||
console.warn("Failed to register service worker: ", e);
|
||
};
|
||
|
||
// Runtime calls this global method when ready to start caching (i.e. after startup).
|
||
// This registers the service worker which caches resources for offline support.
|
||
window.C2_RegisterSW = function C2_RegisterSW()
|
||
{
|
||
if (!navigator.serviceWorker)
|
||
return; // no SW support, ignore call
|
||
|
||
try {
|
||
navigator.serviceWorker.register("sw.js", { scope: "./" })
|
||
.then(function (reg)
|
||
{
|
||
console.log("Registered service worker on " + reg.scope);
|
||
})
|
||
.catch(OnRegisterSWError);
|
||
}
|
||
catch (e)
|
||
{
|
||
OnRegisterSWError(e);
|
||
}
|
||
};
|
||
</script>
|
||
<script src="./sdk/package/dist/sena-game-sdk.js"></script>
|
||
|
||
<script>
|
||
/**
|
||
* ==============================
|
||
* SDK BRIDGE – G120 (SEQUENCE)
|
||
* ==============================
|
||
* - Chỉ làm cầu nối
|
||
* - Không xử lý game logic
|
||
* - Không chấm điểm
|
||
*/
|
||
|
||
window.SDK_BRIDGE = {
|
||
sdk: null,
|
||
gameData: [],
|
||
currentIndex: 0,
|
||
gameCode: "G120",
|
||
mode: "preview"
|
||
};
|
||
|
||
// ===== INIT SDK =====
|
||
function initSDKBridge() {
|
||
var urlParams = new URLSearchParams(window.location.search);
|
||
SDK_BRIDGE.mode = urlParams.get("mode") || "preview";
|
||
|
||
SDK_BRIDGE.sdk = new SenaGameSDK({
|
||
iframePath: "./sdk/package/dist/sdk-iframe/index.html",
|
||
gameCode: SDK_BRIDGE.gameCode,
|
||
mode: SDK_BRIDGE.mode,
|
||
debug: true,
|
||
|
||
onReady: function (sdk) {
|
||
console.log("✅ [SDK BRIDGE] SDK Ready");
|
||
},
|
||
|
||
onDataReady: function (data) {
|
||
console.log("📥 [SDK BRIDGE] Data Ready:", data);
|
||
|
||
SDK_BRIDGE.gameData = data.items || [];
|
||
SDK_BRIDGE.currentIndex = 0;
|
||
|
||
// Đẩy data cho Construct 2
|
||
if (window.tdv_sdk) {
|
||
window.tdv_sdk.gameData = SDK_BRIDGE.gameData;
|
||
window.tdv_sdk.currentQuestionIndex = 0;
|
||
window.tdv_sdk.loadQuestions();
|
||
}
|
||
|
||
if (window.c2_callFunction) {
|
||
window.c2_callFunction("OnSDKDataReady", []);
|
||
}
|
||
},
|
||
|
||
onAnswerResult: function (result) {
|
||
console.log("📝 [SDK BRIDGE] Answer Result:", result);
|
||
window.answerResult = result.correct ? 1 : 0;
|
||
|
||
if (window.TDVTriger) {
|
||
window.TDVTriger.runtime.trigger(
|
||
cr.plugins_.TDVplugin.prototype.cnds.OnAnswerChecked,
|
||
window.TDVTriger
|
||
);
|
||
}
|
||
},
|
||
|
||
onGameComplete: function (result) {
|
||
console.log("🏁 [SDK BRIDGE] Game Complete:", result);
|
||
},
|
||
|
||
onError: function (err) {
|
||
console.error("❌ [SDK BRIDGE] SDK Error:", err);
|
||
}
|
||
});
|
||
}
|
||
|
||
// ===== HELPERS CHO CONSTRUCT 2 =====
|
||
function submitSequenceAnswer(sequenceArray) {
|
||
if (!SDK_BRIDGE.sdk) return;
|
||
SDK_BRIDGE.sdk.submitAnswer({
|
||
selectedAnswer: sequenceArray
|
||
});
|
||
}
|
||
|
||
function nextQuestion() {
|
||
SDK_BRIDGE.currentIndex++;
|
||
if (window.tdv_sdk) {
|
||
window.tdv_sdk.currentQuestionIndex = SDK_BRIDGE.currentIndex;
|
||
window.tdv_sdk.loadQuestions();
|
||
}
|
||
}
|
||
|
||
// Auto init
|
||
window.addEventListener("load", initSDKBridge);
|
||
</script>
|
||
|
||
|
||
</body>
|
||
</html> |