feat(server): finish server part (1/2)

This commit is contained in:
Halyul
2021-05-31 19:53:11 -04:00
parent 7d7e10035e
commit bec0564f20
29 changed files with 515 additions and 590100 deletions

89
template/assets/runner.js Normal file
View File

@@ -0,0 +1,89 @@
const params = new URLSearchParams(window.location.search);
const RATIO = 0.618;
var fps = 60;
if (params.has("fps")) {
var tmp = parseInt(params.get("fps"));
if (!isNaN(tmp)) {
fps = tmp;
}
}
function supportsWebGL() {
try {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
return ctx != null;
} catch (e) {
return false;
}
}
function calculateScale(width, height) {
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let scaleX = windowWidth / width;
let scaleY = windowHeight / height;
return { x: scaleX, y: scaleY };
};
if (!supportsWebGL()) {
alert('WebGL is unavailable. Fallback image will be used.');
var e = document.getElementById("container");
e.classList.add("fallback");
e.parentElement.classList.add("widget-wrapper");
function fallback() {
const scale = calculateScale(window.settings.fallbackImage.width, window.settings.fallbackImage.height);
if (scale.x > scale.y) {
e.style.width = window.settings.fallbackImage.width * scale.y + "px";
e.style.height = window.settings.fallbackImage.height * scale.y + "px";
} else if (scale.x < scale.y) {
e.style.width = window.settings.fallbackImage.width * scale.x + "px";
e.style.height = window.settings.fallbackImage.height * scale.x + "px";
}
}
window.addEventListener('resize', fallback, true);
fallback();
} else {
var e = document.getElementById("container");
var resetTime = window.performance.now();
var spinePlayer = new spine.SpinePlayer(e, {
jsonUrl: window.settings.jsonUrl,
atlasUrl: window.settings.atlasUrl,
animation: window.settings.animation,
rawDataURIs: window.operator,
premultipliedAlpha: true,
alpha: true,
backgroundColor: "#00000000",
fps: fps,
viewport: window.settings.viewport,
showControls: false,
defaultMix: window.settings.defaultMix,
success: window.settings.success,
});
}
function resizeLogo() {
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
}
window.addEventListener('resize', resizeLogo, true);
resizeLogo()
window.addEventListener("contextmenu", e => e.preventDefault());
document.addEventListener("gesturestart", e => e.preventDefault());
// wallpaper engine
window.wallpaperPropertyListener = {
applyGeneralProperties: function (properties) {
if (properties.fps) {
spinePlayer.setFps(properties.fps);
}
},
};
console.log("All resources are extracted from Arknights.")

View File

@@ -2089,11 +2089,15 @@ var spine;
this.errors = {};
this.toLoad = 0;
this.loaded = 0;
this.rawDataUris = {};
this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix;
}
AssetManager.downloadText = function (url, success, error) {
AssetManager.prototype.downloadText = function (url, success, error) {
var request = new XMLHttpRequest();
request.overrideMimeType("text/html");
if (this.rawDataUris[url])
url = this.rawDataUris[url];
request.open("GET", url, true);
request.onload = function () {
if (request.status == 200) {
@@ -2108,8 +2112,10 @@ var spine;
};
request.send();
};
AssetManager.downloadBinary = function (url, success, error) {
AssetManager.prototype.downloadBinary = function (url, success, error) {
var request = new XMLHttpRequest();
if (this.rawDataUris[url])
url = this.rawDataUris[url];
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function () {
@@ -2125,13 +2131,16 @@ var spine;
};
request.send();
};
AssetManager.prototype.setRawDataURI = function (path, data) {
this.rawDataUris[this.pathPrefix + path] = data;
};
AssetManager.prototype.loadText = function (path, success, error) {
var _this = this;
if (success === void 0) { success = null; }
if (error === void 0) { error = null; }
path = this.pathPrefix + path;
this.toLoad++;
AssetManager.downloadText(path, function (data) {
this.downloadText(path, function (data) {
_this.assets[path] = data;
if (success)
success(path, data);
@@ -2150,12 +2159,13 @@ var spine;
if (success === void 0) { success = null; }
if (error === void 0) { error = null; }
path = this.pathPrefix + path;
var storagePath = path;
this.toLoad++;
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function (ev) {
var texture = _this.textureLoader(img);
_this.assets[path] = texture;
_this.assets[storagePath] = texture;
_this.toLoad--;
_this.loaded++;
if (success)
@@ -2168,6 +2178,8 @@ var spine;
if (error)
error(path, "Couldn't load image " + path);
};
if (this.rawDataUris[path])
path = this.rawDataUris[path];
img.src = path;
};
AssetManager.prototype.loadTextureData = function (path, data, success, error) {
@@ -2201,7 +2213,7 @@ var spine;
var parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
path = this.pathPrefix + path;
this.toLoad++;
AssetManager.downloadText(path, function (atlasData) {
this.downloadText(path, function (atlasData) {
var pagesLoaded = { count: 0 };
var atlasPages = new Array();
try {
@@ -9726,6 +9738,12 @@ var spine;
return dom;
}
this.assetManager = new spine.webgl.AssetManager(this.context);
if (config.rawDataURIs) {
for (var path in config.rawDataURIs) {
var data = config.rawDataURIs[path];
this.assetManager.setRawDataURI(path, data);
}
}
this.assetManager.loadText(config.jsonUrl);
this.assetManager.loadTextureAtlas(config.atlasUrl);
if (config.backgroundImage && config.backgroundImage.url)

43
template/assets/style.css Normal file
View File

@@ -0,0 +1,43 @@
html {
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../operator/operator_bg.png");
height: 100%;
width: 100%;
}
.logo {
position: fixed;
left: 0;
top: 0;
filter: invert(1);
opacity: 0.3;
z-index: -1;
}
.widget-wrapper {
display: flex;
align-items: center;
}
.fallback {
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../operator/fallback.png");
width: 100%;
height: 100%;
}

View File

@@ -1,148 +0,0 @@
const params = new URLSearchParams(window.location.search);
const RATIO = 0.618;
var fps = 60;
if (params.has("fps")) {
var tmp = parseInt(params.get("fps"));
if (!isNaN(tmp)) {
fps = tmp;
}
}
function supportsWebGL() {
try {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
return ctx != null;
} catch (e) {
return false;
}
}
function calculateScale(width, height) {
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let scaleX = windowWidth / width;
let scaleY = windowHeight / height;
return { x: scaleX, y: scaleY };
};
if (!supportsWebGL()) {
alert('WebGL is unavailable. Fallback image will be used.');
var e = document.getElementById("spine-widget");
e.classList.add("fallback");
e.parentElement.classList.add("widget-wrapper");
document.getElementById("loader").style.display = "none";
function fallback() {
const scale = calculateScale(window.operator.fallbackImage.width, window.operator.fallbackImage.height);
if (scale.x > scale.y) {
e.style.width = window.operator.fallbackImage.width * scale.y;
e.style.height = window.operator.fallbackImage.height * scale.y;
} else if (scale.x < scale.y) {
e.style.width = window.operator.fallbackImage.width * scale.x;
e.style.height = window.operator.fallbackImage.height * scale.x;
}
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
}
window.addEventListener('resize', fallback, true);
fallback();
} else {
var resetTime = window.performance.now();
var e = document.getElementById("spine-widget");
var spineWidget;
window.isLoaded = false;
function render() {
let isPlayingInteract = false;
var scale = calculateScale(window.operator.spineSize.width, window.operator.spineSize.height);
spineWidget = new spine.SpineWidget(e, {
atlasContent: atob(window.operator.atlasContent),
jsonContent: window.operator.jsonContent,
atlasPages: window.operator.atlasPages,
atlasPagesContent: window.operator.atlasPagesContent,
animation: "Idle",
backgroundColor: "#00000000",
loop: true,
skin: "default",
fps: fps,
scale: Math.min(scale.x, scale.y),
x: window.innerWidth / 2,
y: calculateCenterY(scale.x, scale.y),
fitToCanvas: false,
premultipliedAlpha: true,
success: function (widget) {
widget.state.addListener({
end: (e) => {
if (e.animation.name == "Interact") {
isPlayingInteract = false;
}
},
complete: (e) => {
if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
resetTime = window.performance.now();
let entry = widget.state.setAnimation(0, "Special", true, 0);
entry.mixDuration = 0.2;
widget.state.addAnimation(0, "Idle", true, 0);
}
},
});
widget.canvas.onclick = function () {
if (isPlayingInteract) {
return;
}
isPlayingInteract = true;
let entry = widget.state.setAnimation(0, "Interact", true, 0);
entry.mixDuration = 0.2;
widget.state.addAnimation(0, "Idle", true, 0);
}
document.getElementById("loader").style.display = "none";
window.isLoaded = true;
}
});
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
}
function calculateCenterY(scaleX, scaleY) {
var height = window.innerHeight;
var offset = Math.min(window.operator.spineSize.offset, height / window.operator.spineSize.correctionFactor);
if (scaleX < scaleY) {
// constrained by width
var scaledSpineHeight = window.operator.spineSize.height * scaleX;
return (height - scaledSpineHeight) / 2 + offset;
}
return offset;
}
render();
optimizedResize.add(function() {
if (window.isLoaded) {
window.isLoaded = false;
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
document.getElementById("loader").style.display = "inherit";
var scale = calculateScale(window.operator.spineSize.width, window.operator.spineSize.height);
spineWidget.reRender({
x: window.innerWidth / 2,
y: calculateCenterY(scale.x, scale.y),
scale: Math.min(scale.x, scale.y),
});
}
});
}
window.addEventListener("contextmenu", e => e.preventDefault());
document.addEventListener("gesturestart", e => e.preventDefault());
// wallpaper engine
window.wallpaperPropertyListener = {
applyGeneralProperties: function (properties) {
if (properties.fps) {
spineWidget.setFps(properties.fps);
}
},
};
console.log("All resources are extracted from Arknights.")

File diff suppressed because it is too large Load Diff

View File

@@ -1,117 +0,0 @@
html {
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../assets/operator_bg.png");
height: 100%;
width: 100%;
}
.logo {
position: fixed;
left: 0;
top: 0;
filter: invert(1);
opacity: 0.3;
z-index: -1;
}
.widget-wrapper {
display: flex;
align-items: center;
height: 100%;
width: 100%;
}
.fallback {
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../assets/fallback.png");
width: 100%;
height: 100%;
}
.loader,
.loader:before,
.loader:after {
background: #546e7a;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: #546e7a;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
position: fixed;
right: 88px;
top: 0;
z-index: 100;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}

View File

@@ -1,4 +1,5 @@
<html lang="en">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
@@ -6,19 +7,21 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="renderer" content="webkit">
<title>Skadi the Corrupting Heart</title>
<link rel="stylesheet" type="text/css" href="./build/style.css?v1.6.1">
<link rel="stylesheet" href="./assets/style.css">
<link rel="stylesheet" href="./assets/spine-player.css">
</head>
<body>
<div id="dev" style="position: fixed;left: 0;left: 0;background-color: white;"></div>
<div class="loader" id="loader">Loading...</div>
<image src="./assets/operator_logo.png" class="logo" id="logo" alt="operator logo" />
<div id="widget-wrapper">
<div id="spine-widget"></div>
<image src="./operator/operator_logo.png" class="logo" id="logo" alt="operator logo" />
<div id="widget-wrapper" style="width: 100%; height: 100%;">
<div id="container" style="width: 100%; height: 100%;"></div>
</div>
</body>
<script type="text/javascript" src="./build/operator.js?v1.6.1"></script>
<script type="text/javascript" src="./build/spine-widget.js?v1.6.1"></script>
<script type="text/javascript" src="./build/runner.js?v1.6.1"></script>
<script src="./assets/spine-player.js"></script>
<script type="text/javascript" src="./operator/operator.js"></script>
<script type="text/javascript" src="./operator/settings.js"></script>
<script type="text/javascript" src="./assets/runner.js"></script>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

File diff suppressed because one or more lines are too long

View File

@@ -1,148 +0,0 @@
const params = new URLSearchParams(window.location.search);
const RATIO = 0.618;
var fps = 60;
if (params.has("fps")) {
var tmp = parseInt(params.get("fps"));
if (!isNaN(tmp)) {
fps = tmp;
}
}
function supportsWebGL() {
try {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
return ctx != null;
} catch (e) {
return false;
}
}
function calculateScale(width, height) {
let windowWidth = window.innerWidth;
let windowHeight = window.innerHeight;
let scaleX = windowWidth / width;
let scaleY = windowHeight / height;
return { x: scaleX, y: scaleY };
};
if (!supportsWebGL()) {
alert('WebGL is unavailable. Fallback image will be used.');
var e = document.getElementById("spine-widget");
e.classList.add("fallback");
e.parentElement.classList.add("widget-wrapper");
document.getElementById("loader").style.display = "none";
function fallback() {
const scale = calculateScale(window.operator.fallbackImage.width, window.operator.fallbackImage.height);
if (scale.x > scale.y) {
e.style.width = window.operator.fallbackImage.width * scale.y;
e.style.height = window.operator.fallbackImage.height * scale.y;
} else if (scale.x < scale.y) {
e.style.width = window.operator.fallbackImage.width * scale.x;
e.style.height = window.operator.fallbackImage.height * scale.x;
}
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
}
window.addEventListener('resize', fallback, true);
fallback();
} else {
var resetTime = window.performance.now();
var e = document.getElementById("spine-widget");
var spineWidget;
window.isLoaded = false;
function render() {
let isPlayingInteract = false;
var scale = calculateScale(window.operator.spineSize.width, window.operator.spineSize.height);
spineWidget = new spine.SpineWidget(e, {
atlasContent: atob(window.operator.atlasContent),
json: "./assets/dyn_illust_char_1012_skadi2.json",
atlasPages: window.operator.atlasPages,
atlasPagesContent: window.operator.atlasPagesContent,
animation: "Idle",
backgroundColor: "#00000000",
loop: true,
skin: "default",
fps: fps,
scale: Math.min(scale.x, scale.y),
x: window.innerWidth / 2,
y: calculateCenterY(scale.x, scale.y),
fitToCanvas: false,
premultipliedAlpha: true,
success: function (widget) {
widget.state.addListener({
end: (e) => {
if (e.animation.name == "Interact") {
isPlayingInteract = false;
}
},
complete: (e) => {
if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
resetTime = window.performance.now();
let entry = widget.state.setAnimation(0, "Special", true, 0);
entry.mixDuration = 0.2;
widget.state.addAnimation(0, "Idle", true, 0);
}
},
});
widget.canvas.onclick = function () {
if (isPlayingInteract) {
return;
}
isPlayingInteract = true;
let entry = widget.state.setAnimation(0, "Interact", true, 0);
entry.mixDuration = 0.2;
widget.state.addAnimation(0, "Idle", true, 0);
}
document.getElementById("loader").style.display = "none";
window.isLoaded = true;
}
});
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
}
function calculateCenterY(scaleX, scaleY) {
var height = window.innerHeight;
var offset = Math.min(window.operator.spineSize.offset, height / window.operator.spineSize.correctionFactor);
if (scaleX < scaleY) {
// constrained by width
var scaledSpineHeight = window.operator.spineSize.height * scaleX;
return (height - scaledSpineHeight) / 2 + offset;
}
return offset;
}
render();
optimizedResize.add(function() {
if (window.isLoaded) {
window.isLoaded = false;
document.getElementById("logo").width = window.innerWidth / 2 * RATIO
document.getElementById("loader").style.display = "inherit";
var scale = calculateScale(window.operator.spineSize.width, window.operator.spineSize.height);
spineWidget.reRender({
x: window.innerWidth / 2,
y: calculateCenterY(scale.x, scale.y),
scale: Math.min(scale.x, scale.y),
});
}
});
}
window.addEventListener("contextmenu", e => e.preventDefault());
document.addEventListener("gesturestart", e => e.preventDefault());
// wallpaper engine
window.wallpaperPropertyListener = {
applyGeneralProperties: function (properties) {
if (properties.fps) {
spineWidget.setFps(properties.fps);
}
},
};
console.log("All resources are extracted from Arknights.")

View File

@@ -1,117 +0,0 @@
html {
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../assets/operator_bg.png");
height: 100%;
width: 100%;
}
.logo {
position: fixed;
left: 0;
top: 0;
filter: invert(1);
opacity: 0.3;
z-index: -1;
}
.widget-wrapper {
display: flex;
align-items: center;
height: 100%;
width: 100%;
}
.fallback {
margin: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("../assets/fallback.png");
width: 100%;
height: 100%;
}
.loader,
.loader:before,
.loader:after {
background: #546e7a;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader {
color: #546e7a;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
position: fixed;
right: 88px;
top: 0;
z-index: 100;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}

View File

@@ -1,77 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="./build/spine-player.js"></script>
<link rel="stylesheet" href="./build/style.css">
<link rel="stylesheet" href="./build/spine-player.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="dev" style="position: fixed;left: 0;left: 0;background-color: white;"></div>
<div id="container" style="width: 100%; height: 100%;"></div>
</body>
<script>
const params = new URLSearchParams(window.location.search);
var fps = 60;
if (params.has("fps")) {
var tmp = parseInt(params.get("fps"));
if (!isNaN(tmp)) {
fps = tmp;
}
}
var resetTime = window.performance.now();
let isPlayingInteract = false;
new spine.SpinePlayer("container", {
jsonUrl: "assets/dyn_illust_char_1012_skadi2.json",
atlasUrl: "assets/dyn_illust_char_1012_skadi2.atlas",
animation: "Idle",
premultipliedAlpha: true,
alpha: true,
backgroundColor: "#00000000",
fps: fps,
viewport: {
debugRender: false,
padLeft: "-5%",
padRight: "-10%",
padTop: "0%",
padBottom: "-12%",
x: 0,
y: 0,
},
showControls: false,
success: function (widget) {
widget.animationState.addListener({
end: (e) => {
if (e.animation.name == "Interact") {
isPlayingInteract = false;
}
},
complete: (e) => {
if (window.performance.now() - resetTime >= 8 * 1000 && Math.random() < 0.3) {
resetTime = window.performance.now();
let entry = widget.animationState.setAnimation(0, "Special", true, 0);
entry.mixDuration = 0.2;
widget.animationState.addAnimation(0, "Idle", true, 0);
}
},
});
widget.canvas.onclick = function () {
if (isPlayingInteract) {
return;
}
isPlayingInteract = true;
let entry = widget.animationState.setAnimation(0, "Interact", true, 0);
entry.mixDuration = 0.2;
widget.animationState.addAnimation(0, "Idle", true, 0);
}
}
});
</script>
</body>
</html>