feat: init repo
This commit is contained in:
Halyul
148
template/build/runner.js
Normal file
148
template/build/runner.js
Normal file
@@ -0,0 +1,148 @@
|
||||
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.")
|
||||
8231
template/build/spine-widget.js
Normal file
8231
template/build/spine-widget.js
Normal file
File diff suppressed because it is too large
Load Diff
117
template/build/style.css
Normal file
117
template/build/style.css
Normal file
@@ -0,0 +1,117 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user