Add initial data preload
This commit is contained in:
parent
0fa7a4e687
commit
2f50155ad7
209
extra/shell.html
209
extra/shell.html
|
@ -270,6 +270,16 @@
|
||||||
console.error("An error occured!")
|
console.error("An error occured!")
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function preloadList(jsonArray) {
|
||||||
|
jsonArray.forEach((f) => {
|
||||||
|
const url = mapping[f.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "")];
|
||||||
|
if (!url) return;
|
||||||
|
|
||||||
|
// Preload the asset
|
||||||
|
fetch('gameasync/' + url).then().catch();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
window.fileLoadedAsync = function(file) {
|
window.fileLoadedAsync = function(file) {
|
||||||
document.title = wTitle;
|
document.title = wTitle;
|
||||||
|
|
||||||
|
@ -281,13 +291,7 @@
|
||||||
})
|
})
|
||||||
.then(function(jsonResponse) {
|
.then(function(jsonResponse) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
jsonResponse.forEach((f) => {
|
preloadList(jsonResponse);
|
||||||
const url = mapping[f.toLowerCase().replace(new RegExp("\\.[^/.]+$"), "")];
|
|
||||||
if (!url) return;
|
|
||||||
|
|
||||||
// Preload the asset
|
|
||||||
fetch('gameasync/' + url).then().catch();
|
|
||||||
});
|
|
||||||
}, 200);
|
}, 200);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -343,9 +347,27 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
document.title = wTitle;
|
document.title = wTitle;
|
||||||
</script>
|
|
||||||
|
|
||||||
<script>
|
// Load important files
|
||||||
|
preloadList([
|
||||||
|
'rgss.rb',
|
||||||
|
'data/scripts',
|
||||||
|
'data/actors',
|
||||||
|
'data/classes',
|
||||||
|
'data/skills',
|
||||||
|
'data/items',
|
||||||
|
'data/weapons',
|
||||||
|
'data/armors',
|
||||||
|
'data/enemies',
|
||||||
|
'data/troops',
|
||||||
|
'data/states',
|
||||||
|
'data/animations',
|
||||||
|
'data/tilesets',
|
||||||
|
'data/commonevents',
|
||||||
|
'data/system',
|
||||||
|
'data/mapinfos',
|
||||||
|
]);
|
||||||
|
|
||||||
// Load wasm then initialize
|
// Load wasm then initialize
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
getLazyAsset('mkxp.wasm', 'Game engine', () => {
|
getLazyAsset('mkxp.wasm', 'Game engine', () => {
|
||||||
|
@ -353,108 +375,107 @@
|
||||||
s.setAttribute('src', 'mkxp.js');
|
s.setAttribute('src', 'mkxp.js');
|
||||||
document.body.appendChild(s);
|
document.body.appendChild(s);
|
||||||
});
|
});
|
||||||
}, 500);
|
}, 200);
|
||||||
|
|
||||||
function simulateKeyEvent(eventType, keyCode, charCode) {
|
function simulateKeyEvent(eventType, keyCode, charCode) {
|
||||||
var e = document.createEventObject ? document.createEventObject() : document.createEvent("Events");
|
var e = document.createEventObject ? document.createEventObject() : document.createEvent("Events");
|
||||||
if (e.initEvent) e.initEvent(eventType, true, true);
|
if (e.initEvent) e.initEvent(eventType, true, true);
|
||||||
|
|
||||||
e.keyCode = keyCode;
|
e.keyCode = keyCode;
|
||||||
e.which = keyCode;
|
e.which = keyCode;
|
||||||
e.charCode = charCode;
|
e.charCode = charCode;
|
||||||
|
|
||||||
// Dispatch directly to Emscripten's html5.h API (use this if page uses emscripten/html5.h event handling):
|
// Dispatch directly to Emscripten's html5.h API (use this if page uses emscripten/html5.h event handling):
|
||||||
if (typeof JSEvents !== 'undefined' && JSEvents.eventHandlers && JSEvents.eventHandlers.length > 0) {
|
if (typeof JSEvents !== 'undefined' && JSEvents.eventHandlers && JSEvents.eventHandlers.length > 0) {
|
||||||
for(var i = 0; i < JSEvents.eventHandlers.length; ++i) {
|
for(var i = 0; i < JSEvents.eventHandlers.length; ++i) {
|
||||||
if ((JSEvents.eventHandlers[i].target == Module['canvas'] || JSEvents.eventHandlers[i].target == window)
|
if ((JSEvents.eventHandlers[i].target == Module['canvas'] || JSEvents.eventHandlers[i].target == window)
|
||||||
&& JSEvents.eventHandlers[i].eventTypeString == eventType) {
|
&& JSEvents.eventHandlers[i].eventTypeString == eventType) {
|
||||||
JSEvents.eventHandlers[i].handlerFunc(e);
|
JSEvents.eventHandlers[i].handlerFunc(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
// Dispatch to browser for real (use this if page uses SDL or something else for event handling):
|
||||||
|
Module['canvas'].dispatchEvent ? Module['canvas'].dispatchEvent(e) : Module['canvas'].fireEvent("on" + eventType, e);
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
// Dispatch to browser for real (use this if page uses SDL or something else for event handling):
|
|
||||||
Module['canvas'].dispatchEvent ? Module['canvas'].dispatchEvent(e) : Module['canvas'].fireEvent("on" + eventType, e);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Mappings
|
// Mappings
|
||||||
const keyMap = {};
|
const keyMap = {};
|
||||||
const keysDown = {};
|
const keysDown = {};
|
||||||
|
|
||||||
/** Add virtual key binding */
|
/** Add virtual key binding */
|
||||||
function bindKey(elem, key) {
|
function bindKey(elem, key) {
|
||||||
keyMap[elem] = key;
|
keyMap[elem] = key;
|
||||||
const ne = document.getElementById(elem);
|
const ne = document.getElementById(elem);
|
||||||
|
|
||||||
ne.addEventListener('touchstart', function(e) {
|
ne.addEventListener('touchstart', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
simulateKeyEvent('keydown', key);
|
simulateKeyEvent('keydown', key);
|
||||||
keysDown[e.target.id] = elem;
|
keysDown[e.target.id] = elem;
|
||||||
});
|
});
|
||||||
ne.addEventListener('touchend', function(e) {
|
ne.addEventListener('touchend', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (keysDown[e.target.id] && keyMap[keysDown[e.target.id]]) {
|
if (keysDown[e.target.id] && keyMap[keysDown[e.target.id]]) {
|
||||||
simulateKeyEvent('keyup', keyMap[keysDown[e.target.id]]);
|
simulateKeyEvent('keyup', keyMap[keysDown[e.target.id]]);
|
||||||
}
|
|
||||||
keysDown[e.target.id] = 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
ne.addEventListener('touchmove', function(event) {
|
|
||||||
const myLocation = event.changedTouches[0];
|
|
||||||
const realTarget = document.elementFromPoint(myLocation.clientX, myLocation.clientY).id;
|
|
||||||
const origTarget = keysDown[myLocation.target.id];
|
|
||||||
|
|
||||||
if (origTarget !== realTarget) {
|
|
||||||
if (origTarget) {
|
|
||||||
simulateKeyEvent('keyup', keyMap[origTarget]);
|
|
||||||
keysDown[myLocation.target.id] = 0;
|
|
||||||
}
|
}
|
||||||
if (keyMap[realTarget]) {
|
keysDown[e.target.id] = 0;
|
||||||
simulateKeyEvent('keydown', keyMap[realTarget]);
|
});
|
||||||
keysDown[myLocation.target.id] = realTarget;
|
|
||||||
|
ne.addEventListener('touchmove', function(event) {
|
||||||
|
const myLocation = event.changedTouches[0];
|
||||||
|
const realTarget = document.elementFromPoint(myLocation.clientX, myLocation.clientY).id;
|
||||||
|
const origTarget = keysDown[myLocation.target.id];
|
||||||
|
|
||||||
|
if (origTarget !== realTarget) {
|
||||||
|
if (origTarget) {
|
||||||
|
simulateKeyEvent('keyup', keyMap[origTarget]);
|
||||||
|
keysDown[myLocation.target.id] = 0;
|
||||||
|
}
|
||||||
|
if (keyMap[realTarget]) {
|
||||||
|
simulateKeyEvent('keydown', keyMap[realTarget]);
|
||||||
|
keysDown[myLocation.target.id] = realTarget;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function is_touch_device() {
|
||||||
|
try {
|
||||||
|
document.createEvent("TouchEvent");
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function is_touch_device() {
|
|
||||||
try {
|
|
||||||
document.createEvent("TouchEvent");
|
|
||||||
return true;
|
|
||||||
} catch (e) {
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
if (!is_touch_device()) {
|
if (!is_touch_device()) {
|
||||||
document.getElementById('dpad').style.display = 'none';
|
document.getElementById('dpad').style.display = 'none';
|
||||||
document.getElementById('apad').style.display = 'none';
|
document.getElementById('apad').style.display = 'none';
|
||||||
}
|
|
||||||
|
|
||||||
// Add all bindings
|
|
||||||
bindKey('d-up', 38);
|
|
||||||
bindKey('d-right', 39);
|
|
||||||
bindKey('d-down', 40);
|
|
||||||
bindKey('d-left', 37);
|
|
||||||
bindKey('ap-c', 67);
|
|
||||||
bindKey('ap-b', 88);
|
|
||||||
bindKey('ap-a', 90);
|
|
||||||
bindKey('ap-ka', 65);
|
|
||||||
|
|
||||||
const resize = function() {
|
|
||||||
const el = document.getElementById('canvas');
|
|
||||||
if (window.innerHeight > window.innerWidth) {
|
|
||||||
el.style.height = 'unset';
|
|
||||||
el.style.width = '100%';
|
|
||||||
} else {
|
|
||||||
el.style.width = 'unset';
|
|
||||||
el.style.height = '100%';
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener('resize', resize);
|
// Add all bindings
|
||||||
resize();
|
bindKey('d-up', 38);
|
||||||
|
bindKey('d-right', 39);
|
||||||
|
bindKey('d-down', 40);
|
||||||
|
bindKey('d-left', 37);
|
||||||
|
bindKey('ap-c', 67);
|
||||||
|
bindKey('ap-b', 88);
|
||||||
|
bindKey('ap-a', 90);
|
||||||
|
bindKey('ap-ka', 65);
|
||||||
|
|
||||||
|
const resize = function() {
|
||||||
|
const el = document.getElementById('canvas');
|
||||||
|
if (window.innerHeight > window.innerWidth) {
|
||||||
|
el.style.height = 'unset';
|
||||||
|
el.style.width = '100%';
|
||||||
|
} else {
|
||||||
|
el.style.width = 'unset';
|
||||||
|
el.style.height = '100%';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', resize);
|
||||||
|
resize();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- {{{ SCRIPT }}} -->
|
<!-- {{{ SCRIPT }}} -->
|
||||||
|
|
Loading…
Reference in New Issue