@ -1,99 +1,135 @@
|
||||
const path = require("path");
|
||||
const buildUtils = require("./buildutils");
|
||||
|
||||
function gulptasksCSS($, gulp, buildFolder, browserSync) {
|
||||
// The assets plugin copies the files
|
||||
const commitHash = buildUtils.getRevision();
|
||||
const postcssAssetsPlugin = cachebust =>
|
||||
$.postcssAssets({
|
||||
loadPaths: [path.join(buildFolder, "res", "ui")],
|
||||
basePath: buildFolder,
|
||||
baseUrl: ".",
|
||||
cachebuster: cachebust
|
||||
? (filePath, urlPathname) => ({
|
||||
pathname: buildUtils.cachebust(urlPathname, commitHash),
|
||||
})
|
||||
: "",
|
||||
});
|
||||
|
||||
// Postcss configuration
|
||||
const postcssPlugins = (prod, { cachebust = false }) => {
|
||||
const plugins = [postcssAssetsPlugin(cachebust)];
|
||||
if (prod) {
|
||||
plugins.unshift(
|
||||
$.postcssUnprefix(),
|
||||
$.postcssPresetEnv({
|
||||
browsers: ["> 0.1%"],
|
||||
})
|
||||
);
|
||||
|
||||
plugins.push(
|
||||
$.cssMqpacker({
|
||||
sort: true,
|
||||
}),
|
||||
$.cssnano({
|
||||
preset: [
|
||||
"advanced",
|
||||
{
|
||||
cssDeclarationSorter: false,
|
||||
discardUnused: true,
|
||||
mergeIdents: false,
|
||||
reduceIdents: true,
|
||||
zindex: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
$.postcssRoundSubpixels()
|
||||
);
|
||||
}
|
||||
return plugins;
|
||||
};
|
||||
|
||||
// Performs linting on css
|
||||
gulp.task("css.lint", () => {
|
||||
return gulp
|
||||
.src(["../src/css/**/*.scss"])
|
||||
.pipe($.sassLint({ configFile: ".sasslint.yml" }))
|
||||
.pipe($.sassLint.format())
|
||||
.pipe($.sassLint.failOnError());
|
||||
});
|
||||
|
||||
// Builds the css in dev mode
|
||||
gulp.task("css.dev", () => {
|
||||
return gulp
|
||||
.src(["../src/css/main.scss"])
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync().on("error", $.sass.logError))
|
||||
.pipe($.postcss(postcssPlugins(false, {})))
|
||||
.pipe(gulp.dest(buildFolder))
|
||||
.pipe(browserSync.stream());
|
||||
});
|
||||
|
||||
// Builds the css in production mode (=minified)
|
||||
gulp.task("css.prod", () => {
|
||||
return (
|
||||
gulp
|
||||
.src("../src/css/main.scss", { cwd: __dirname })
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync({ outputStyle: "compressed" }).on("error", $.sass.logError))
|
||||
.pipe($.postcss(postcssPlugins(true, { cachebust: true })))
|
||||
.pipe(gulp.dest(buildFolder))
|
||||
);
|
||||
});
|
||||
|
||||
// Builds the css in production mode (=minified), without cachebusting
|
||||
gulp.task("css.prod-standalone", () => {
|
||||
return (
|
||||
gulp
|
||||
.src("../src/css/main.scss", { cwd: __dirname })
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync({ outputStyle: "compressed" }).on("error", $.sass.logError))
|
||||
.pipe($.postcss(postcssPlugins(true, { cachebust: false })))
|
||||
.pipe(gulp.dest(buildFolder))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
gulptasksCSS,
|
||||
};
|
||||
const path = require("path");
|
||||
const buildUtils = require("./buildutils");
|
||||
|
||||
function gulptasksCSS($, gulp, buildFolder, browserSync) {
|
||||
// The assets plugin copies the files
|
||||
const commitHash = buildUtils.getRevision();
|
||||
const postcssAssetsPlugin = cachebust =>
|
||||
$.postcssAssets({
|
||||
loadPaths: [path.join(buildFolder, "res", "ui")],
|
||||
basePath: buildFolder,
|
||||
baseUrl: ".",
|
||||
cachebuster: cachebust
|
||||
? (filePath, urlPathname) => ({
|
||||
pathname: buildUtils.cachebust(urlPathname, commitHash),
|
||||
})
|
||||
: "",
|
||||
});
|
||||
|
||||
// Postcss configuration
|
||||
const postcssPlugins = (prod, { cachebust = false }) => {
|
||||
const plugins = [postcssAssetsPlugin(cachebust)];
|
||||
if (prod) {
|
||||
plugins.unshift(
|
||||
$.postcssUnprefix(),
|
||||
$.postcssPresetEnv({
|
||||
browsers: ["> 0.1%"],
|
||||
})
|
||||
);
|
||||
|
||||
plugins.push(
|
||||
$.cssMqpacker({
|
||||
sort: true,
|
||||
}),
|
||||
$.cssnano({
|
||||
preset: [
|
||||
"advanced",
|
||||
{
|
||||
cssDeclarationSorter: false,
|
||||
discardUnused: true,
|
||||
mergeIdents: false,
|
||||
reduceIdents: true,
|
||||
zindex: true,
|
||||
},
|
||||
],
|
||||
}),
|
||||
$.postcssRoundSubpixels()
|
||||
);
|
||||
}
|
||||
return plugins;
|
||||
};
|
||||
|
||||
// Performs linting on css
|
||||
gulp.task("css.lint", () => {
|
||||
return gulp
|
||||
.src(["../src/css/**/*.scss"])
|
||||
.pipe($.sassLint({ configFile: ".sasslint.yml" }))
|
||||
.pipe($.sassLint.format())
|
||||
.pipe($.sassLint.failOnError());
|
||||
});
|
||||
|
||||
function resourcesTask({ cachebust, isProd }) {
|
||||
return gulp
|
||||
.src("../src/css/main.scss", { cwd: __dirname })
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync().on("error", $.sass.logError))
|
||||
.pipe(
|
||||
$.postcss([
|
||||
$.postcssCriticalSplit({
|
||||
blockTag: "@load-async",
|
||||
}),
|
||||
])
|
||||
)
|
||||
.pipe($.rename("async-resources.css"))
|
||||
.pipe($.postcss(postcssPlugins(isProd, { cachebust })))
|
||||
.pipe(gulp.dest(buildFolder));
|
||||
}
|
||||
|
||||
// Builds the css resources
|
||||
gulp.task("css.resources.dev", () => {
|
||||
return resourcesTask({ cachebust: false, isProd: false });
|
||||
});
|
||||
|
||||
// Builds the css resources in prod (=minified)
|
||||
gulp.task("css.resources.prod", () => {
|
||||
return resourcesTask({ cachebust: true, isProd: true });
|
||||
});
|
||||
|
||||
// Builds the css resources in prod (=minified), without cachebusting
|
||||
gulp.task("css.resources.prod-standalone", () => {
|
||||
return resourcesTask({ cachebust: false, isProd: true });
|
||||
});
|
||||
|
||||
function mainTask({ cachebust, isProd }) {
|
||||
return gulp
|
||||
.src("../src/css/main.scss", { cwd: __dirname })
|
||||
.pipe($.plumber())
|
||||
.pipe($.sass.sync().on("error", $.sass.logError))
|
||||
.pipe(
|
||||
$.postcss([
|
||||
$.postcssCriticalSplit({
|
||||
blockTag: "@load-async",
|
||||
output: "rest",
|
||||
}),
|
||||
])
|
||||
)
|
||||
.pipe($.postcss(postcssPlugins(isProd, { cachebust })))
|
||||
.pipe(gulp.dest(buildFolder));
|
||||
}
|
||||
|
||||
// Builds the css main
|
||||
gulp.task("css.main.dev", () => {
|
||||
return mainTask({ cachebust: false, isProd: false });
|
||||
});
|
||||
|
||||
// Builds the css main in prod (=minified)
|
||||
gulp.task("css.main.prod", () => {
|
||||
return mainTask({ cachebust: true, isProd: true });
|
||||
});
|
||||
|
||||
// Builds the css main in prod (=minified), without cachebusting
|
||||
gulp.task("css.main.prod-standalone", () => {
|
||||
return mainTask({ cachebust: false, isProd: true });
|
||||
});
|
||||
|
||||
gulp.task("css.dev", gulp.parallel("css.main.dev", "css.resources.dev"));
|
||||
gulp.task("css.prod", gulp.parallel("css.main.prod", "css.resources.prod"));
|
||||
gulp.task(
|
||||
"css.prod-standalone",
|
||||
gulp.parallel("css.main.prod-standalone", "css.resources.prod-standalone")
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
gulptasksCSS,
|
||||
};
|
||||
|
@ -1,283 +1,301 @@
|
||||
const buildUtils = require("./buildutils");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const crypto = require("crypto");
|
||||
|
||||
function computeIntegrityHash(fullPath, algorithm = "sha256") {
|
||||
const file = fs.readFileSync(fullPath);
|
||||
const hash = crypto.createHash(algorithm).update(file).digest("base64");
|
||||
return algorithm + "-" + hash;
|
||||
}
|
||||
|
||||
function gulptasksHTML($, gulp, buildFolder) {
|
||||
const commitHash = buildUtils.getRevision();
|
||||
async function buildHtml(
|
||||
apiUrl,
|
||||
{ analytics = false, standalone = false, app = false, integrity = true, enableCachebust = true }
|
||||
) {
|
||||
function cachebust(url) {
|
||||
if (enableCachebust) {
|
||||
return buildUtils.cachebust(url, commitHash);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
const hasLocalFiles = standalone || app;
|
||||
|
||||
return gulp
|
||||
.src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
|
||||
.pipe(
|
||||
$.dom(/** @this {Document} **/ function () {
|
||||
const document = this;
|
||||
|
||||
// Preconnect to api
|
||||
const prefetchLink = document.createElement("link");
|
||||
prefetchLink.rel = "preconnect";
|
||||
prefetchLink.href = apiUrl;
|
||||
prefetchLink.setAttribute("crossorigin", "anonymous");
|
||||
document.head.appendChild(prefetchLink);
|
||||
|
||||
// Append css
|
||||
const css = document.createElement("link");
|
||||
css.rel = "stylesheet";
|
||||
css.type = "text/css";
|
||||
css.media = "none";
|
||||
css.setAttribute("onload", "this.media='all'");
|
||||
css.href = cachebust("main.css");
|
||||
if (integrity) {
|
||||
css.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "main.css"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(css);
|
||||
|
||||
if (app) {
|
||||
// Append cordova link
|
||||
const cdv = document.createElement("script");
|
||||
cdv.src = "cordova.js";
|
||||
cdv.type = "text/javascript";
|
||||
document.head.appendChild(cdv);
|
||||
}
|
||||
|
||||
// Google analytics
|
||||
if (analytics) {
|
||||
const tagManagerScript = document.createElement("script");
|
||||
tagManagerScript.src = "https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
|
||||
tagManagerScript.setAttribute("async", "");
|
||||
document.head.appendChild(tagManagerScript);
|
||||
|
||||
const initScript = document.createElement("script");
|
||||
initScript.textContent = `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-165342524-1', { anonymize_ip: true });
|
||||
`;
|
||||
document.head.appendChild(initScript);
|
||||
|
||||
const abTestingScript = document.createElement("script");
|
||||
abTestingScript.setAttribute(
|
||||
"src",
|
||||
"https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"
|
||||
);
|
||||
abTestingScript.setAttribute("async", "");
|
||||
document.head.appendChild(abTestingScript);
|
||||
}
|
||||
|
||||
// Do not need to preload in app or standalone
|
||||
if (!hasLocalFiles) {
|
||||
// Preload essentials
|
||||
const preloads = ["fonts/GameFont.woff2"];
|
||||
|
||||
preloads.forEach(src => {
|
||||
const preloadLink = document.createElement("link");
|
||||
preloadLink.rel = "preload";
|
||||
preloadLink.href = cachebust("res/" + src);
|
||||
if (src.endsWith(".woff2")) {
|
||||
preloadLink.setAttribute("crossorigin", "anonymous");
|
||||
preloadLink.setAttribute("as", "font");
|
||||
} else {
|
||||
preloadLink.setAttribute("as", "image");
|
||||
}
|
||||
document.head.appendChild(preloadLink);
|
||||
});
|
||||
}
|
||||
|
||||
const loadingSvg = `background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46YXV0bztiYWNrZ3JvdW5kOjAgMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgZGlzcGxheT0iYmxvY2siPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM5Mzc0NyIgc3Ryb2tlLXdpZHRoPSIzIiByPSI0MiIgc3Ryb2tlLWRhc2hhcnJheT0iMTk3LjkyMDMzNzE3NjE1Njk4IDY3Ljk3MzQ0NTcyNTM4NTY2IiB0cmFuc2Zvcm09InJvdGF0ZSg0OC4yNjUgNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iNS41NTU1NTU1NTU1NTU1NTVzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+PC9jaXJjbGU+PC9zdmc+")`;
|
||||
|
||||
const loadingCss = `
|
||||
@font-face {
|
||||
font-family: 'GameFont';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url('${cachebust("res/fonts/GameFont.woff2")}') format('woff2');
|
||||
}
|
||||
|
||||
#ll_fp {
|
||||
font-family: GameFont;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
#ll_p {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
justify-content:
|
||||
center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#ll_p > div {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 40px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
color: #393747;
|
||||
font-family: 'GameFont', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#ll_p > span {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: inline-flex;
|
||||
background: center center / contain no-repeat;
|
||||
${loadingSvg};
|
||||
}
|
||||
`;
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.setAttribute("type", "text/css");
|
||||
style.textContent = loadingCss;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Append loader, but not in standalone (directly include bundle there)
|
||||
if (standalone) {
|
||||
const bundleScript = document.createElement("script");
|
||||
bundleScript.type = "text/javascript";
|
||||
bundleScript.src = "bundle.js";
|
||||
if (integrity) {
|
||||
bundleScript.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle.js"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(bundleScript);
|
||||
} else {
|
||||
const loadJs = document.createElement("script");
|
||||
loadJs.type = "text/javascript";
|
||||
let scriptContent = "";
|
||||
scriptContent += `var bundleSrc = '${cachebust("bundle.js")}';\n`;
|
||||
scriptContent += `var bundleSrcTranspiled = '${cachebust(
|
||||
"bundle-transpiled.js"
|
||||
)}';\n`;
|
||||
|
||||
if (integrity) {
|
||||
scriptContent +=
|
||||
"var bundleIntegrity = '" +
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle.js")) +
|
||||
"';\n";
|
||||
scriptContent +=
|
||||
"var bundleIntegrityTranspiled = '" +
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle-transpiled.js")) +
|
||||
"';\n";
|
||||
} else {
|
||||
scriptContent += "var bundleIntegrity = null;\n";
|
||||
scriptContent += "var bundleIntegrityTranspiled = null;\n";
|
||||
}
|
||||
|
||||
scriptContent += fs.readFileSync("./bundle-loader.js").toString();
|
||||
loadJs.textContent = scriptContent;
|
||||
document.head.appendChild(loadJs);
|
||||
}
|
||||
|
||||
const bodyContent = `
|
||||
<div id="ll_fp">_</div>
|
||||
<div id="ll_p">
|
||||
<span></span>
|
||||
<div>${hasLocalFiles ? "Loading" : "Downloading"} Game Files</div >
|
||||
</div >
|
||||
`;
|
||||
|
||||
document.body.innerHTML = bodyContent;
|
||||
})
|
||||
)
|
||||
.pipe(
|
||||
$.htmlmin({
|
||||
caseSensitive: true,
|
||||
collapseBooleanAttributes: true,
|
||||
collapseInlineTagWhitespace: true,
|
||||
collapseWhitespace: true,
|
||||
preserveLineBreaks: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
quoteCharacter: '"',
|
||||
useShortDoctype: true,
|
||||
})
|
||||
)
|
||||
.pipe($.htmlBeautify())
|
||||
.pipe($.rename("index.html"))
|
||||
.pipe(gulp.dest(buildFolder));
|
||||
}
|
||||
|
||||
gulp.task("html.dev", () => {
|
||||
return buildHtml("http://localhost:5005", {
|
||||
analytics: false,
|
||||
integrity: false,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.staging", () => {
|
||||
return buildHtml("https://api-staging.shapez.io", {
|
||||
analytics: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.prod", () => {
|
||||
return buildHtml("https://analytics.shapez.io", {
|
||||
analytics: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-dev", () => {
|
||||
return buildHtml("https://localhost:5005", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
integrity: false,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-beta", () => {
|
||||
return buildHtml("https://api-staging.shapez.io", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-prod", () => {
|
||||
return buildHtml("https://analytics.shapez.io", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
gulptasksHTML,
|
||||
};
|
||||
const buildUtils = require("./buildutils");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
const crypto = require("crypto");
|
||||
|
||||
function computeIntegrityHash(fullPath, algorithm = "sha256") {
|
||||
const file = fs.readFileSync(fullPath);
|
||||
const hash = crypto.createHash(algorithm).update(file).digest("base64");
|
||||
return algorithm + "-" + hash;
|
||||
}
|
||||
|
||||
function gulptasksHTML($, gulp, buildFolder) {
|
||||
const commitHash = buildUtils.getRevision();
|
||||
async function buildHtml(
|
||||
apiUrl,
|
||||
{ analytics = false, standalone = false, app = false, integrity = true, enableCachebust = true }
|
||||
) {
|
||||
function cachebust(url) {
|
||||
if (enableCachebust) {
|
||||
return buildUtils.cachebust(url, commitHash);
|
||||
}
|
||||
return url;
|
||||
}
|
||||
|
||||
const hasLocalFiles = standalone || app;
|
||||
|
||||
return gulp
|
||||
.src("../src/html/" + (standalone ? "index.standalone.html" : "index.html"))
|
||||
.pipe(
|
||||
$.dom(
|
||||
/** @this {Document} **/ function () {
|
||||
const document = this;
|
||||
|
||||
// Preconnect to api
|
||||
const prefetchLink = document.createElement("link");
|
||||
prefetchLink.rel = "preconnect";
|
||||
prefetchLink.href = apiUrl;
|
||||
prefetchLink.setAttribute("crossorigin", "anonymous");
|
||||
document.head.appendChild(prefetchLink);
|
||||
|
||||
// Append css
|
||||
const css = document.createElement("link");
|
||||
css.rel = "stylesheet";
|
||||
css.type = "text/css";
|
||||
css.media = "none";
|
||||
css.setAttribute("onload", "this.media='all'");
|
||||
css.href = cachebust("main.css");
|
||||
if (integrity) {
|
||||
css.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "main.css"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(css);
|
||||
|
||||
// Append async css
|
||||
const asyncCss = document.createElement("link");
|
||||
asyncCss.rel = "stylesheet";
|
||||
asyncCss.type = "text/css";
|
||||
asyncCss.media = "none";
|
||||
asyncCss.setAttribute("onload", "this.media='all'");
|
||||
asyncCss.href = cachebust("async-resources.css");
|
||||
if (integrity) {
|
||||
asyncCss.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "async-resources.css"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(asyncCss);
|
||||
|
||||
if (app) {
|
||||
// Append cordova link
|
||||
const cdv = document.createElement("script");
|
||||
cdv.src = "cordova.js";
|
||||
cdv.type = "text/javascript";
|
||||
document.head.appendChild(cdv);
|
||||
}
|
||||
|
||||
// Google analytics
|
||||
if (analytics) {
|
||||
const tagManagerScript = document.createElement("script");
|
||||
tagManagerScript.src =
|
||||
"https://www.googletagmanager.com/gtag/js?id=UA-165342524-1";
|
||||
tagManagerScript.setAttribute("async", "");
|
||||
document.head.appendChild(tagManagerScript);
|
||||
|
||||
const initScript = document.createElement("script");
|
||||
initScript.textContent = `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-165342524-1', { anonymize_ip: true });
|
||||
`;
|
||||
document.head.appendChild(initScript);
|
||||
|
||||
const abTestingScript = document.createElement("script");
|
||||
abTestingScript.setAttribute(
|
||||
"src",
|
||||
"https://www.googleoptimize.com/optimize.js?id=OPT-M5NHCV7"
|
||||
);
|
||||
abTestingScript.setAttribute("async", "");
|
||||
document.head.appendChild(abTestingScript);
|
||||
}
|
||||
|
||||
// Do not need to preload in app or standalone
|
||||
if (!hasLocalFiles) {
|
||||
// Preload essentials
|
||||
const preloads = ["fonts/GameFont.woff2"];
|
||||
|
||||
preloads.forEach(src => {
|
||||
const preloadLink = document.createElement("link");
|
||||
preloadLink.rel = "preload";
|
||||
preloadLink.href = cachebust("res/" + src);
|
||||
if (src.endsWith(".woff2")) {
|
||||
preloadLink.setAttribute("crossorigin", "anonymous");
|
||||
preloadLink.setAttribute("as", "font");
|
||||
} else {
|
||||
preloadLink.setAttribute("as", "image");
|
||||
}
|
||||
document.head.appendChild(preloadLink);
|
||||
});
|
||||
}
|
||||
|
||||
const loadingSvg = `background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46YXV0bztiYWNrZ3JvdW5kOjAgMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgZGlzcGxheT0iYmxvY2siPjxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzM5Mzc0NyIgc3Ryb2tlLXdpZHRoPSIzIiByPSI0MiIgc3Ryb2tlLWRhc2hhcnJheT0iMTk3LjkyMDMzNzE3NjE1Njk4IDY3Ljk3MzQ0NTcyNTM4NTY2IiB0cmFuc2Zvcm09InJvdGF0ZSg0OC4yNjUgNTAgNTApIj48YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGR1cj0iNS41NTU1NTU1NTU1NTU1NTVzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIi8+PC9jaXJjbGU+PC9zdmc+")`;
|
||||
|
||||
const loadingCss = `
|
||||
@font-face {
|
||||
font-family: 'GameFont';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url('${cachebust("res/fonts/GameFont.woff2")}') format('woff2');
|
||||
}
|
||||
|
||||
#ll_fp {
|
||||
font-family: GameFont;
|
||||
font-size: 14px;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
#ll_p {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
justify-content:
|
||||
center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#ll_p > div {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
bottom: 40px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
color: #393747;
|
||||
font-family: 'GameFont', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#ll_p > span {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: inline-flex;
|
||||
background: center center / contain no-repeat;
|
||||
${loadingSvg};
|
||||
}
|
||||
`;
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.setAttribute("type", "text/css");
|
||||
style.textContent = loadingCss;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Append loader, but not in standalone (directly include bundle there)
|
||||
if (standalone) {
|
||||
const bundleScript = document.createElement("script");
|
||||
bundleScript.type = "text/javascript";
|
||||
bundleScript.src = "bundle.js";
|
||||
if (integrity) {
|
||||
bundleScript.setAttribute(
|
||||
"integrity",
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle.js"))
|
||||
);
|
||||
}
|
||||
document.head.appendChild(bundleScript);
|
||||
} else {
|
||||
const loadJs = document.createElement("script");
|
||||
loadJs.type = "text/javascript";
|
||||
let scriptContent = "";
|
||||
scriptContent += `var bundleSrc = '${cachebust("bundle.js")}';\n`;
|
||||
scriptContent += `var bundleSrcTranspiled = '${cachebust(
|
||||
"bundle-transpiled.js"
|
||||
)}';\n`;
|
||||
|
||||
if (integrity) {
|
||||
scriptContent +=
|
||||
"var bundleIntegrity = '" +
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle.js")) +
|
||||
"';\n";
|
||||
scriptContent +=
|
||||
"var bundleIntegrityTranspiled = '" +
|
||||
computeIntegrityHash(path.join(buildFolder, "bundle-transpiled.js")) +
|
||||
"';\n";
|
||||
} else {
|
||||
scriptContent += "var bundleIntegrity = null;\n";
|
||||
scriptContent += "var bundleIntegrityTranspiled = null;\n";
|
||||
}
|
||||
|
||||
scriptContent += fs.readFileSync("./bundle-loader.js").toString();
|
||||
loadJs.textContent = scriptContent;
|
||||
document.head.appendChild(loadJs);
|
||||
}
|
||||
|
||||
const bodyContent = `
|
||||
<div id="ll_fp">_</div>
|
||||
<div id="ll_p">
|
||||
<span></span>
|
||||
<div>${hasLocalFiles ? "Loading" : "Downloading"} Game Files</div >
|
||||
</div >
|
||||
`;
|
||||
|
||||
document.body.innerHTML = bodyContent;
|
||||
}
|
||||
)
|
||||
)
|
||||
.pipe(
|
||||
$.htmlmin({
|
||||
caseSensitive: true,
|
||||
collapseBooleanAttributes: true,
|
||||
collapseInlineTagWhitespace: true,
|
||||
collapseWhitespace: true,
|
||||
preserveLineBreaks: true,
|
||||
minifyJS: true,
|
||||
minifyCSS: true,
|
||||
quoteCharacter: '"',
|
||||
useShortDoctype: true,
|
||||
})
|
||||
)
|
||||
.pipe($.htmlBeautify())
|
||||
.pipe($.rename("index.html"))
|
||||
.pipe(gulp.dest(buildFolder));
|
||||
}
|
||||
|
||||
gulp.task("html.dev", () => {
|
||||
return buildHtml("http://localhost:5005", {
|
||||
analytics: false,
|
||||
integrity: false,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.staging", () => {
|
||||
return buildHtml("https://api-staging.shapez.io", {
|
||||
analytics: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.prod", () => {
|
||||
return buildHtml("https://analytics.shapez.io", {
|
||||
analytics: true,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-dev", () => {
|
||||
return buildHtml("https://localhost:5005", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
integrity: false,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-beta", () => {
|
||||
return buildHtml("https://api-staging.shapez.io", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
|
||||
gulp.task("html.standalone-prod", () => {
|
||||
return buildHtml("https://analytics.shapez.io", {
|
||||
analytics: false,
|
||||
standalone: true,
|
||||
enableCachebust: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
gulptasksHTML,
|
||||
};
|
||||
|
@ -1,110 +1,111 @@
|
||||
{
|
||||
"name": "builder",
|
||||
"version": "1.0.0",
|
||||
"description": "builder",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"gulp": "gulp"
|
||||
},
|
||||
"author": "tobspr",
|
||||
"license": "private",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-transform-block-scoping": "^7.4.4",
|
||||
"@babel/plugin-transform-classes": "^7.5.5",
|
||||
"@babel/preset-env": "^7.5.4",
|
||||
"@types/cordova": "^0.0.34",
|
||||
"@types/filesystem": "^0.0.29",
|
||||
"@types/node": "^12.7.5",
|
||||
"ajv": "^6.10.2",
|
||||
"audiosprite": "^0.7.2",
|
||||
"babel-loader": "^8.1.0",
|
||||
"browser-sync": "^2.26.10",
|
||||
"circular-dependency-plugin": "^5.0.2",
|
||||
"circular-json": "^0.5.9",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"colors": "^1.3.3",
|
||||
"core-js": "3",
|
||||
"crypto": "^1.0.1",
|
||||
"cssnano-preset-advanced": "^4.0.7",
|
||||
"delete-empty": "^3.0.0",
|
||||
"email-validator": "^2.0.4",
|
||||
"eslint": "^5.9.0",
|
||||
"fastdom": "^1.0.9",
|
||||
"flatted": "^2.0.1",
|
||||
"fs-extra": "^8.1.0",
|
||||
"gulp-audiosprite": "^1.1.0",
|
||||
"howler": "^2.1.2",
|
||||
"html-loader": "^0.5.5",
|
||||
"ignore-loader": "^0.1.2",
|
||||
"lz-string": "^1.4.4",
|
||||
"markdown-loader": "^5.1.0",
|
||||
"node-sri": "^1.1.1",
|
||||
"phonegap-plugin-mobile-accessibility": "^1.0.5",
|
||||
"promise-polyfill": "^8.1.0",
|
||||
"query-string": "^6.8.1",
|
||||
"rusha": "^0.8.13",
|
||||
"serialize-error": "^3.0.0",
|
||||
"strictdom": "^1.0.1",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"terser-webpack-plugin": "^1.1.0",
|
||||
"through2": "^3.0.1",
|
||||
"uglify-template-string-loader": "^1.1.0",
|
||||
"unused-files-webpack-plugin": "^3.4.0",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-deep-scope-plugin": "^1.6.0",
|
||||
"webpack-plugin-replace": "^1.1.1",
|
||||
"webpack-strip-block": "^0.2.0",
|
||||
"whatwg-fetch": "^3.0.0",
|
||||
"worker-loader": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.4.3",
|
||||
"babel-plugin-closure-elimination": "^1.3.0",
|
||||
"babel-plugin-console-source": "^2.0.2",
|
||||
"babel-plugin-danger-remove-unused-import": "^1.1.2",
|
||||
"css-mqpacker": "^7.0.0",
|
||||
"cssnano": "^4.1.10",
|
||||
"electron-packager": "^14.0.6",
|
||||
"faster.js": "^1.1.0",
|
||||
"glob": "^7.1.3",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-cache": "^1.1.3",
|
||||
"gulp-cached": "^1.1.1",
|
||||
"gulp-clean": "^0.4.0",
|
||||
"gulp-dom": "^1.0.0",
|
||||
"gulp-flatten": "^0.4.0",
|
||||
"gulp-fluent-ffmpeg": "^2.0.0",
|
||||
"gulp-html-beautify": "^1.0.1",
|
||||
"gulp-htmlmin": "^5.0.1",
|
||||
"gulp-if": "^3.0.0",
|
||||
"gulp-imagemin": "^7.1.0",
|
||||
"gulp-load-plugins": "^2.0.3",
|
||||
"gulp-phonegap-build": "^0.1.5",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-pngquant": "^1.0.13",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"gulp-sass-lint": "^1.4.0",
|
||||
"gulp-sftp": "git+https://git@github.com/webksde/gulp-sftp",
|
||||
"gulp-terser": "^1.2.0",
|
||||
"gulp-webserver": "^0.9.1",
|
||||
"gulp-yaml": "^2.0.4",
|
||||
"imagemin-gifsicle": "^7.0.0",
|
||||
"imagemin-jpegtran": "^7.0.0",
|
||||
"imagemin-pngquant": "^9.0.0",
|
||||
"jimp": "^0.6.1",
|
||||
"js-yaml": "^3.13.1",
|
||||
"postcss-assets": "^5.0.0",
|
||||
"postcss-preset-env": "^6.5.0",
|
||||
"postcss-round-subpixels": "^1.2.0",
|
||||
"postcss-unprefix": "^2.1.3",
|
||||
"sass-unused": "^0.3.0",
|
||||
"strip-json-comments": "^3.0.1",
|
||||
"trim": "^0.0.1",
|
||||
"webpack-stream": "^5.2.1",
|
||||
"yaml-loader": "^0.6.0"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "builder",
|
||||
"version": "1.0.0",
|
||||
"description": "builder",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"gulp": "gulp"
|
||||
},
|
||||
"author": "tobspr",
|
||||
"license": "private",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.9.0",
|
||||
"@babel/plugin-transform-block-scoping": "^7.4.4",
|
||||
"@babel/plugin-transform-classes": "^7.5.5",
|
||||
"@babel/preset-env": "^7.5.4",
|
||||
"@types/cordova": "^0.0.34",
|
||||
"@types/filesystem": "^0.0.29",
|
||||
"@types/node": "^12.7.5",
|
||||
"ajv": "^6.10.2",
|
||||
"audiosprite": "^0.7.2",
|
||||
"babel-loader": "^8.1.0",
|
||||
"browser-sync": "^2.26.10",
|
||||
"circular-dependency-plugin": "^5.0.2",
|
||||
"circular-json": "^0.5.9",
|
||||
"clipboard-copy": "^3.1.0",
|
||||
"colors": "^1.3.3",
|
||||
"core-js": "3",
|
||||
"crypto": "^1.0.1",
|
||||
"cssnano-preset-advanced": "^4.0.7",
|
||||
"delete-empty": "^3.0.0",
|
||||
"email-validator": "^2.0.4",
|
||||
"eslint": "^5.9.0",
|
||||
"fastdom": "^1.0.9",
|
||||
"flatted": "^2.0.1",
|
||||
"fs-extra": "^8.1.0",
|
||||
"gulp-audiosprite": "^1.1.0",
|
||||
"howler": "^2.1.2",
|
||||
"html-loader": "^0.5.5",
|
||||
"ignore-loader": "^0.1.2",
|
||||
"lz-string": "^1.4.4",
|
||||
"markdown-loader": "^5.1.0",
|
||||
"node-sri": "^1.1.1",
|
||||
"phonegap-plugin-mobile-accessibility": "^1.0.5",
|
||||
"promise-polyfill": "^8.1.0",
|
||||
"query-string": "^6.8.1",
|
||||
"rusha": "^0.8.13",
|
||||
"serialize-error": "^3.0.0",
|
||||
"strictdom": "^1.0.1",
|
||||
"string-replace-webpack-plugin": "^0.1.3",
|
||||
"terser-webpack-plugin": "^1.1.0",
|
||||
"through2": "^3.0.1",
|
||||
"uglify-template-string-loader": "^1.1.0",
|
||||
"unused-files-webpack-plugin": "^3.4.0",
|
||||
"webpack": "^4.43.0",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-deep-scope-plugin": "^1.6.0",
|
||||
"webpack-plugin-replace": "^1.1.1",
|
||||
"webpack-strip-block": "^0.2.0",
|
||||
"whatwg-fetch": "^3.0.0",
|
||||
"worker-loader": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.4.3",
|
||||
"babel-plugin-closure-elimination": "^1.3.0",
|
||||
"babel-plugin-console-source": "^2.0.2",
|
||||
"babel-plugin-danger-remove-unused-import": "^1.1.2",
|
||||
"css-mqpacker": "^7.0.0",
|
||||
"cssnano": "^4.1.10",
|
||||
"postcss-critical-split": "^2.5.3",
|
||||
"electron-packager": "^14.0.6",
|
||||
"faster.js": "^1.1.0",
|
||||
"glob": "^7.1.3",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-cache": "^1.1.3",
|
||||
"gulp-cached": "^1.1.1",
|
||||
"gulp-clean": "^0.4.0",
|
||||
"gulp-dom": "^1.0.0",
|
||||
"gulp-flatten": "^0.4.0",
|
||||
"gulp-fluent-ffmpeg": "^2.0.0",
|
||||
"gulp-html-beautify": "^1.0.1",
|
||||
"gulp-htmlmin": "^5.0.1",
|
||||
"gulp-if": "^3.0.0",
|
||||
"gulp-imagemin": "^7.1.0",
|
||||
"gulp-load-plugins": "^2.0.3",
|
||||
"gulp-phonegap-build": "^0.1.5",
|
||||
"gulp-plumber": "^1.2.1",
|
||||
"gulp-pngquant": "^1.0.13",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-sass": "^4.1.0",
|
||||
"gulp-sass-lint": "^1.4.0",
|
||||
"gulp-sftp": "git+https://git@github.com/webksde/gulp-sftp",
|
||||
"gulp-terser": "^1.2.0",
|
||||
"gulp-webserver": "^0.9.1",
|
||||
"gulp-yaml": "^2.0.4",
|
||||
"imagemin-gifsicle": "^7.0.0",
|
||||
"imagemin-jpegtran": "^7.0.0",
|
||||
"imagemin-pngquant": "^9.0.0",
|
||||
"jimp": "^0.6.1",
|
||||
"js-yaml": "^3.13.1",
|
||||
"postcss-assets": "^5.0.0",
|
||||
"postcss-preset-env": "^6.5.0",
|
||||
"postcss-round-subpixels": "^1.2.0",
|
||||
"postcss-unprefix": "^2.1.3",
|
||||
"sass-unused": "^0.3.0",
|
||||
"strip-json-comments": "^3.0.1",
|
||||
"trim": "^0.0.1",
|
||||
"webpack-stream": "^5.2.1",
|
||||
"yaml-loader": "^0.6.0"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
Before Width: | Height: | Size: 281 KiB After Width: | Height: | Size: 278 KiB |
Before Width: | Height: | Size: 700 KiB After Width: | Height: | Size: 698 KiB |
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 19 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 14 KiB |
@ -1,117 +1,120 @@
|
||||
#ingame_HUD_TutorialHints {
|
||||
position: absolute;
|
||||
@include S(left, 10px);
|
||||
@include S(bottom, 10px);
|
||||
|
||||
@include StyleBelowWidth(1430px) {
|
||||
@include S(bottom, 50px);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(50, 60, 70, 0);
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
pointer-events: all;
|
||||
|
||||
transition-property: background-color, transform, bottom, left;
|
||||
|
||||
@include S(padding, 5px);
|
||||
video {
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: opacity, width;
|
||||
@include S(width, 0px);
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: #333438;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@include S(grid-gap, 2px);
|
||||
grid-template-columns: 1fr;
|
||||
@include S(margin-bottom, 3px);
|
||||
z-index: 11;
|
||||
position: relative;
|
||||
|
||||
> span {
|
||||
@include DarkThemeInvert;
|
||||
|
||||
display: flex;
|
||||
@include SuperSmallText;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
&::before {
|
||||
@include S(margin-right, 4px);
|
||||
content: " ";
|
||||
@include S(width, 12px);
|
||||
@include S(height, 12px);
|
||||
display: inline-block;
|
||||
background: uiResource("icons/help.png") center center / 95% no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
button.toggleHint {
|
||||
@include PlainText;
|
||||
@include IncreasedClickArea(0px);
|
||||
}
|
||||
}
|
||||
|
||||
button.toggleHint {
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.enlarged {
|
||||
background: $ingameHudBg;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
|
||||
&::before {
|
||||
pointer-events: all;
|
||||
content: " ";
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
right: -1000px;
|
||||
bottom: -1000px;
|
||||
z-index: 0;
|
||||
|
||||
background: rgba($ingameHudBg, 0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-template-columns: 1fr auto;
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
button.toggleHint {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
@include InlineAnimation(0.2s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@include S(width, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
@include S(width, 500px);
|
||||
}
|
||||
button.toggleHint {
|
||||
.hide {
|
||||
display: block;
|
||||
}
|
||||
.show {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#ingame_HUD_TutorialHints {
|
||||
position: absolute;
|
||||
@include S(left, 10px);
|
||||
@include S(bottom, 10px);
|
||||
|
||||
@include StyleBelowWidth(1430px) {
|
||||
@include S(bottom, 50px);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(50, 60, 70, 0);
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
pointer-events: all;
|
||||
|
||||
transition-property: background-color, transform, bottom, left;
|
||||
|
||||
@include S(padding, 5px);
|
||||
video {
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: opacity, width;
|
||||
@include S(width, 0px);
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
color: #333438;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
@include S(grid-gap, 2px);
|
||||
grid-template-columns: 1fr;
|
||||
@include S(margin-bottom, 3px);
|
||||
z-index: 11;
|
||||
position: relative;
|
||||
|
||||
> span {
|
||||
@include DarkThemeInvert;
|
||||
|
||||
display: flex;
|
||||
@include SuperSmallText;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
&::before {
|
||||
@include S(margin-right, 4px);
|
||||
content: " ";
|
||||
@include S(width, 12px);
|
||||
@include S(height, 12px);
|
||||
display: inline-block;
|
||||
& {
|
||||
/* @load-async */
|
||||
background: uiResource("icons/help.png") center center / 95% no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.toggleHint {
|
||||
@include PlainText;
|
||||
@include IncreasedClickArea(0px);
|
||||
}
|
||||
}
|
||||
|
||||
button.toggleHint {
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.enlarged {
|
||||
background: $ingameHudBg;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
|
||||
&::before {
|
||||
pointer-events: all;
|
||||
content: " ";
|
||||
position: fixed;
|
||||
top: -1000px;
|
||||
left: -1000px;
|
||||
right: -1000px;
|
||||
bottom: -1000px;
|
||||
z-index: 0;
|
||||
|
||||
background: rgba($ingameHudBg, 0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
grid-template-columns: 1fr auto;
|
||||
> span {
|
||||
display: none;
|
||||
}
|
||||
button.toggleHint {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
@include InlineAnimation(0.2s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@include S(width, 0px);
|
||||
}
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
@include S(width, 500px);
|
||||
}
|
||||
button.toggleHint {
|
||||
.hide {
|
||||
display: block;
|
||||
}
|
||||
.show {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,177 +1,181 @@
|
||||
#ingame_HUD_UnlockNotification {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: all;
|
||||
|
||||
@include InlineAnimation(0.1s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
// background: rgba(#222428, 0.5);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 30px);
|
||||
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
.title,
|
||||
.subTitle {
|
||||
@include SuperHeading;
|
||||
text-transform: uppercase;
|
||||
@include S(font-size, 40px);
|
||||
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateY(-50vh);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(5vh);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-2vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include PlainText;
|
||||
display: inline-block;
|
||||
@include S(margin, 5px, 0, 20px);
|
||||
color: $colorGreenBright;
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateY(-60vh);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(6vh);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-3vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
@include S(width, 400px);
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateX(-100vw);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5vw);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(-2vw);
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(grid-gap, 10px);
|
||||
|
||||
.rewardName {
|
||||
grid-column: 1 / 3;
|
||||
display: none;
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateX(200vw);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-10vw);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(4vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewardDesc {
|
||||
grid-column: 1 / 3;
|
||||
@include PlainText;
|
||||
@include S(margin-bottom, 15px);
|
||||
color: #aaacaf;
|
||||
@include S(width, 400px);
|
||||
text-align: left;
|
||||
strong {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.images {
|
||||
display: flex;
|
||||
.buildingExplanation {
|
||||
@include S(width, 200px);
|
||||
@include S(height, 200px);
|
||||
display: inline-block;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.close {
|
||||
border: 0;
|
||||
position: relative;
|
||||
@include S(margin-top, 30px);
|
||||
|
||||
&:not(.unlocked) {
|
||||
pointer-events: none;
|
||||
opacity: 0.8;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.unlocked {
|
||||
&::after {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 10, 20, 0.8);
|
||||
|
||||
@include InlineAnimation(5s linear) {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#ingame_HUD_UnlockNotification {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
pointer-events: all;
|
||||
|
||||
& {
|
||||
/* @load-async */
|
||||
background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
|
||||
}
|
||||
|
||||
@include InlineAnimation(0.1s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog {
|
||||
// background: rgba(#222428, 0.5);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 30px);
|
||||
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
max-height: 100vh;
|
||||
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
.title,
|
||||
.subTitle {
|
||||
@include SuperHeading;
|
||||
text-transform: uppercase;
|
||||
@include S(font-size, 40px);
|
||||
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateY(-50vh);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(5vh);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-2vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include PlainText;
|
||||
display: inline-block;
|
||||
@include S(margin, 5px, 0, 20px);
|
||||
color: $colorGreenBright;
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateY(-60vh);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(6vh);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-3vh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
@include S(width, 400px);
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateX(-100vw);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5vw);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(-2vw);
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(grid-gap, 10px);
|
||||
|
||||
.rewardName {
|
||||
grid-column: 1 / 3;
|
||||
display: none;
|
||||
@include InlineAnimation(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: translateX(200vw);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-10vw);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(4vw);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewardDesc {
|
||||
grid-column: 1 / 3;
|
||||
@include PlainText;
|
||||
@include S(margin-bottom, 15px);
|
||||
color: #aaacaf;
|
||||
@include S(width, 400px);
|
||||
text-align: left;
|
||||
strong {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.images {
|
||||
display: flex;
|
||||
.buildingExplanation {
|
||||
@include S(width, 200px);
|
||||
@include S(height, 200px);
|
||||
display: inline-block;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.close {
|
||||
border: 0;
|
||||
position: relative;
|
||||
@include S(margin-top, 30px);
|
||||
|
||||
&:not(.unlocked) {
|
||||
pointer-events: none;
|
||||
opacity: 0.8;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.unlocked {
|
||||
&::after {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 10, 20, 0.8);
|
||||
|
||||
@include InlineAnimation(5s linear) {
|
||||
0% {
|
||||
left: 0;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,18 +1,22 @@
|
||||
#ingame_HUD_Watermark {
|
||||
position: absolute;
|
||||
background: uiResource("get_on_steam.png") center center / contain no-repeat;
|
||||
@include S(width, 110px);
|
||||
@include S(height, 40px);
|
||||
@include S(top, 10px);
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include S(left, 160px);
|
||||
|
||||
transition: all 0.12s ease-in;
|
||||
transition-property: opacity, transform;
|
||||
transform: skewX(-0.5deg);
|
||||
&:hover {
|
||||
transform: skewX(-1deg) scale(1.02);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
#ingame_HUD_Watermark {
|
||||
position: absolute;
|
||||
& {
|
||||
/* @load-async */
|
||||
background: uiResource("get_on_steam.png") center center / contain no-repeat;
|
||||
}
|
||||
|
||||
@include S(width, 110px);
|
||||
@include S(height, 40px);
|
||||
@include S(top, 10px);
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include S(left, 160px);
|
||||
|
||||
transition: all 0.12s ease-in;
|
||||
transition-property: opacity, transform;
|
||||
transform: skewX(-0.5deg);
|
||||
&:hover {
|
||||
transform: skewX(-1deg) scale(1.02);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
@ -1,363 +1,316 @@
|
||||
// ----------------------------------------
|
||||
/* Forces an element to get rendered on its own layer, increasing
|
||||
the performance when animated. Use only transform and opacity in animations! */
|
||||
@mixin FastAnimation {
|
||||
will-change: transform, opacity, filter;
|
||||
// transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
// Helper which includes the translateZ webkit fix, use together with Fast animation
|
||||
// $hardwareAcc: translateZ(0);
|
||||
$hardwareAcc: null;
|
||||
|
||||
// ----------------------------------------
|
||||
/** Increased click area for this element, helpful on mobile */
|
||||
@mixin IncreasedClickArea($size) {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: #{D(-$size)};
|
||||
bottom: #{D(-$size)};
|
||||
left: #{D(-$size)};
|
||||
right: #{D(-$size)};
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
button,
|
||||
.increasedClickArea {
|
||||
position: relative;
|
||||
@include IncreasedClickArea(15px);
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
|
||||
animation. This can be used to replay the animation by toggling between the classes, because
|
||||
it is not possible to restart a css animation */
|
||||
@mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") {
|
||||
$animName: autogen_anim_#{unique-id()};
|
||||
|
||||
@at-root {
|
||||
@keyframes #{$animName}_even {
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes #{$animName}_odd {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$classPrefix}Even #{$childSelector} {
|
||||
animation: #{$animName}_even $duration;
|
||||
}
|
||||
|
||||
&.#{$classPrefix}Odd #{$childSelector} {
|
||||
animation: #{$animName}_odd $duration;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Allows to use and define an animation without specifying its name */
|
||||
@mixin InlineAnimation($duration) {
|
||||
$animName: autogen_anim_#{unique-id()};
|
||||
|
||||
@at-root {
|
||||
@keyframes #{$animName} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
animation: $animName $duration !important;
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Animation prefab for a double bounce pop-in animation, useful for dialogs */
|
||||
@mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) {
|
||||
@include InlineAnimation($duration) {
|
||||
0% {
|
||||
opacity: $initialOpacity;
|
||||
transform: scale(0) $hardwareAcc;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1 + $amount) $hardwareAcc;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1 - $amount * 0.5) $hardwareAcc;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1 + $amount * 0.25) $hardwareAcc;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) $hardwareAcc;
|
||||
}
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied in horizontal mode */
|
||||
@mixin HorizontalStyle {
|
||||
@include AppendGlobal(".h") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied in vertical mode */
|
||||
@mixin VerticalStyle {
|
||||
@include AppendGlobal(".v") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only while the hardware keyboard is open */
|
||||
@mixin AndroidHwKeyboardOpen {
|
||||
@include AppendGlobal(".kb") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Automatically transforms the game state if a hardware keyboard is open */
|
||||
@mixin TransformToMatchKeyboard {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
@include AndroidHwKeyboardOpen {
|
||||
@include VerticalStyle {
|
||||
transform: translateY(#{D(-125px)}) $hardwareAcc;
|
||||
}
|
||||
@include HorizontalStyle {
|
||||
transform: translateY(#{D(-100px)}) $hardwareAcc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport is at least X pixels wide */
|
||||
@mixin StyleAtWidth($minW) {
|
||||
@media (min-width: #{$minW}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport is at least X pixels height */
|
||||
@mixin StyleAtHeight($minH) {
|
||||
@media (min-height: #{$minH}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport has at least the given dimensions */
|
||||
@mixin StyleAtDims($minW, $minH) {
|
||||
@media (min-height: #{$minH}) and (min-width: #{$minW}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport has at maximum the given dimensions */
|
||||
@mixin StyleBelowDims($maxW, $maxH) {
|
||||
@media (max-height: #{$maxH}) and (max-width: #{$maxW}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport has at maximum the given height */
|
||||
@mixin StyleBelowHeight($maxH) {
|
||||
@media (max-height: #{$maxH}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport has at maximum the given width */
|
||||
@mixin StyleBelowWidth($maxW) {
|
||||
@media (max-width: #{$maxW}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
// Dynamic graphics quality styles
|
||||
|
||||
@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) {
|
||||
background-color: $bgColor;
|
||||
|
||||
$borderSize: 1.5px;
|
||||
$borderColor: rgb(18, 20, 24);
|
||||
|
||||
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
|
||||
// 0 D($size) 0 D($borderSize) $borderColor;
|
||||
|
||||
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 D($borderSize) $borderColor,
|
||||
// D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1);
|
||||
|
||||
// transition: box-shadow 0.1s ease-in-out;
|
||||
|
||||
// @if $pressEffect {
|
||||
// &.pressed {
|
||||
// transform: none !important;
|
||||
// $pSize: max(0, $size - 1.5px);
|
||||
// transition: none !important;
|
||||
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
|
||||
// 0 D($pSize) 0 D($borderSize) $borderColor;
|
||||
// top: D($size - $pSize);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") {
|
||||
@include S(border-radius, $v1, $v2, $v3, $v4);
|
||||
}
|
||||
|
||||
@mixin BoxShadow($x, $y, $blur, $offset, $color) {
|
||||
box-shadow: D($x) D($y) D($blur) D($offset) $color;
|
||||
}
|
||||
|
||||
@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) {
|
||||
@include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
|
||||
}
|
||||
|
||||
@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) {
|
||||
text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount);
|
||||
}
|
||||
|
||||
@mixin Button3D($bgColor, $pressEffect: true) {
|
||||
@include BoxShadow3D($bgColor, 2px, $pressEffect);
|
||||
}
|
||||
|
||||
@mixin ButtonDisabled3D($bgColor) {
|
||||
@include BoxShadow3D($bgColor, 0.5px, false);
|
||||
}
|
||||
|
||||
@mixin BoxShadowInset($bgColor, $size: 3px) {
|
||||
background-color: $bgColor;
|
||||
|
||||
$borderSize: 1px;
|
||||
$borderColor: rgb(15, 19, 24);
|
||||
box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 rgba(#fff, 0.07);
|
||||
border-top: D($size) solid rgba(#000, 0.1);
|
||||
|
||||
//, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
|
||||
// 0 D($size + $borderSize) 0 0 $borderColor;
|
||||
}
|
||||
|
||||
@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Shine animation prefab, useful for buttons etc. Adds a bright shine which moves over
|
||||
the button like a reflection. Performance heavy. */
|
||||
@mixin ShineAnimation($duration, $bgColor, $w: 200px, $shineAlpha: 0.25, $lightenAmount: 7, $bgAnim: true) {
|
||||
$bgBase: darken($bgColor, 5);
|
||||
background-color: $bgBase;
|
||||
|
||||
@include HighQualityOrMore {
|
||||
position: relative;
|
||||
// overflow: hidden;
|
||||
// overflow: visible;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: uiResource("misc/shine_bg.png") 0px center / 100% 100% no-repeat;
|
||||
|
||||
@include InlineAnimation($duration ease-in-out infinite) {
|
||||
0% {
|
||||
background-position-x: #{D(-$w)};
|
||||
}
|
||||
100% {
|
||||
background-position-x: #{D($w)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if ($bgAnim) {
|
||||
@include InlineAnimation($duration ease-in-out infinite) {
|
||||
0% {
|
||||
background-color: $bgBase;
|
||||
}
|
||||
50% {
|
||||
background-color: lighten($bgBase, $lightenAmount);
|
||||
}
|
||||
100% {
|
||||
background-color: $bgBase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* String replacement */
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace +
|
||||
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
|
||||
@include InlineAnimation($duration) {
|
||||
0% {
|
||||
transform: translateY(#{D(-100px * $mul)}) scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@mixin BreakText {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-all;
|
||||
}
|
||||
|
||||
@mixin SupportsAndroidNotchQuery {
|
||||
@supports (color: constant(--notch-inset-left)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin SupportsiOsNotchQuery {
|
||||
@supports (color: env(safe-area-inset-left, 0px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin DarkThemeOverride {
|
||||
@at-root html[data-theme="dark"] &,
|
||||
&[data-theme="dark"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin DarkThemeInvert {
|
||||
@include DarkThemeOverride {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
// ----------------------------------------
|
||||
/* Forces an element to get rendered on its own layer, increasing
|
||||
the performance when animated. Use only transform and opacity in animations! */
|
||||
@mixin FastAnimation {
|
||||
will-change: transform, opacity, filter;
|
||||
// transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
// Helper which includes the translateZ webkit fix, use together with Fast animation
|
||||
// $hardwareAcc: translateZ(0);
|
||||
$hardwareAcc: null;
|
||||
|
||||
// ----------------------------------------
|
||||
/** Increased click area for this element, helpful on mobile */
|
||||
@mixin IncreasedClickArea($size) {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: #{D(-$size)};
|
||||
bottom: #{D(-$size)};
|
||||
left: #{D(-$size)};
|
||||
right: #{D(-$size)};
|
||||
// background: rgba(255, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
button,
|
||||
.increasedClickArea {
|
||||
position: relative;
|
||||
@include IncreasedClickArea(15px);
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
|
||||
animation. This can be used to replay the animation by toggling between the classes, because
|
||||
it is not possible to restart a css animation */
|
||||
@mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") {
|
||||
$animName: autogen_anim_#{unique-id()};
|
||||
|
||||
@at-root {
|
||||
@keyframes #{$animName}_even {
|
||||
@content;
|
||||
}
|
||||
|
||||
@keyframes #{$animName}_odd {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$classPrefix}Even #{$childSelector} {
|
||||
animation: #{$animName}_even $duration;
|
||||
}
|
||||
|
||||
&.#{$classPrefix}Odd #{$childSelector} {
|
||||
animation: #{$animName}_odd $duration;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Allows to use and define an animation without specifying its name */
|
||||
@mixin InlineAnimation($duration) {
|
||||
$animName: autogen_anim_#{unique-id()};
|
||||
|
||||
@at-root {
|
||||
@keyframes #{$animName} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
animation: $animName $duration !important;
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Animation prefab for a double bounce pop-in animation, useful for dialogs */
|
||||
@mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) {
|
||||
@include InlineAnimation($duration) {
|
||||
0% {
|
||||
opacity: $initialOpacity;
|
||||
transform: scale(0) $hardwareAcc;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1 + $amount) $hardwareAcc;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1 - $amount * 0.5) $hardwareAcc;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1 + $amount * 0.25) $hardwareAcc;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) $hardwareAcc;
|
||||
}
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied in horizontal mode */
|
||||
@mixin HorizontalStyle {
|
||||
@include AppendGlobal(".h") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied in vertical mode */
|
||||
@mixin VerticalStyle {
|
||||
@include AppendGlobal(".v") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only while the hardware keyboard is open */
|
||||
@mixin AndroidHwKeyboardOpen {
|
||||
@include AppendGlobal(".kb") {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Automatically transforms the game state if a hardware keyboard is open */
|
||||
@mixin TransformToMatchKeyboard {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
@include AndroidHwKeyboardOpen {
|
||||
@include VerticalStyle {
|
||||
transform: translateY(#{D(-125px)}) $hardwareAcc;
|
||||
}
|
||||
@include HorizontalStyle {
|
||||
transform: translateY(#{D(-100px)}) $hardwareAcc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport is at least X pixels wide */
|
||||
@mixin StyleAtWidth($minW) {
|
||||
@media (min-width: #{$minW}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport is at least X pixels height */
|
||||
@mixin StyleAtHeight($minH) {
|
||||
@media (min-height: #{$minH}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport has at least the given dimensions */
|
||||
@mixin StyleAtDims($minW, $minH) {
|
||||
@media (min-height: #{$minH}) and (min-width: #{$minW}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport has at maximum the given dimensions */
|
||||
@mixin StyleBelowDims($maxW, $maxH) {
|
||||
@media (max-height: #{$maxH}) and (max-width: #{$maxW}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport has at maximum the given height */
|
||||
@mixin StyleBelowHeight($maxH) {
|
||||
@media (max-height: #{$maxH}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
// ----------------------------------------
|
||||
/* Define a style which is only applied when the viewport has at maximum the given width */
|
||||
@mixin StyleBelowWidth($maxW) {
|
||||
@media (max-width: #{$maxW}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
// Dynamic graphics quality styles
|
||||
|
||||
@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) {
|
||||
background-color: $bgColor;
|
||||
|
||||
$borderSize: 1.5px;
|
||||
$borderColor: rgb(18, 20, 24);
|
||||
|
||||
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
|
||||
// 0 D($size) 0 D($borderSize) $borderColor;
|
||||
|
||||
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 D($borderSize) $borderColor,
|
||||
// D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1);
|
||||
|
||||
// transition: box-shadow 0.1s ease-in-out;
|
||||
|
||||
// @if $pressEffect {
|
||||
// &.pressed {
|
||||
// transform: none !important;
|
||||
// $pSize: max(0, $size - 1.5px);
|
||||
// transition: none !important;
|
||||
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
|
||||
// 0 D($pSize) 0 D($borderSize) $borderColor;
|
||||
// top: D($size - $pSize);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") {
|
||||
@include S(border-radius, $v1, $v2, $v3, $v4);
|
||||
}
|
||||
|
||||
@mixin BoxShadow($x, $y, $blur, $offset, $color) {
|
||||
box-shadow: D($x) D($y) D($blur) D($offset) $color;
|
||||
}
|
||||
|
||||
@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) {
|
||||
@include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
|
||||
}
|
||||
|
||||
@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) {
|
||||
text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount);
|
||||
}
|
||||
|
||||
@mixin Button3D($bgColor, $pressEffect: true) {
|
||||
@include BoxShadow3D($bgColor, 2px, $pressEffect);
|
||||
}
|
||||
|
||||
@mixin ButtonDisabled3D($bgColor) {
|
||||
@include BoxShadow3D($bgColor, 0.5px, false);
|
||||
}
|
||||
|
||||
@mixin BoxShadowInset($bgColor, $size: 3px) {
|
||||
background-color: $bgColor;
|
||||
|
||||
$borderSize: 1px;
|
||||
$borderColor: rgb(15, 19, 24);
|
||||
box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 rgba(#fff, 0.07);
|
||||
border-top: D($size) solid rgba(#000, 0.1);
|
||||
|
||||
//, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
|
||||
// 0 D($size + $borderSize) 0 0 $borderColor;
|
||||
}
|
||||
|
||||
@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
// ----------------------------------------
|
||||
/* String replacement */
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace +
|
||||
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
|
||||
@include InlineAnimation($duration) {
|
||||
0% {
|
||||
transform: translateY(#{D(-100px * $mul)}) scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@mixin BreakText {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow-wrap: break-all;
|
||||
}
|
||||
|
||||
@mixin SupportsAndroidNotchQuery {
|
||||
@supports (color: constant(--notch-inset-left)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin SupportsiOsNotchQuery {
|
||||
@supports (color: env(safe-area-inset-left, 0px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin DarkThemeOverride {
|
||||
@at-root html[data-theme="dark"] &,
|
||||
&[data-theme="dark"] {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin DarkThemeInvert {
|
||||
@include DarkThemeOverride {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
@ -1,48 +1,51 @@
|
||||
#state_MobileWarningState {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #333438 !important;
|
||||
@include S(padding, 20px);
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.logo {
|
||||
width: 80%;
|
||||
max-width: 200px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #aaacaf;
|
||||
display: block;
|
||||
margin-bottom: 13px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
max-width: 300px;
|
||||
text-align: left;
|
||||
a {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
}
|
||||
|
||||
.standaloneLink {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
min-height: 40px;
|
||||
background: uiResource("get_on_steam.png") center center / contain no-repeat;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-indent: -999em;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
pointer-events: all;
|
||||
transition: all 0.12s ease-in;
|
||||
transition-property: opacity, transform;
|
||||
transform: skewX(-0.5deg);
|
||||
&:hover {
|
||||
transform: skewX(-1deg) scale(1.02);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
#state_MobileWarningState {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #333438 !important;
|
||||
@include S(padding, 20px);
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.logo {
|
||||
width: 80%;
|
||||
max-width: 200px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #aaacaf;
|
||||
display: block;
|
||||
margin-bottom: 13px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
max-width: 300px;
|
||||
text-align: left;
|
||||
a {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
}
|
||||
|
||||
.standaloneLink {
|
||||
width: 200px;
|
||||
height: 80px;
|
||||
min-height: 40px;
|
||||
& {
|
||||
/* @load-async */
|
||||
background: uiResource("get_on_steam.png") center center / contain no-repeat;
|
||||
}
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-indent: -999em;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
pointer-events: all;
|
||||
transition: all 0.12s ease-in;
|
||||
transition-property: opacity, transform;
|
||||
transform: skewX(-0.5deg);
|
||||
&:hover {
|
||||
transform: skewX(-1deg) scale(1.02);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,266 +1,268 @@
|
||||
import { Loader } from "../../core/loader";
|
||||
import { enumDirection, Vector, enumAngleToDirection, enumDirectionToVector } from "../../core/vector";
|
||||
import { ItemAcceptorComponent } from "../components/item_acceptor";
|
||||
import { ItemEjectorComponent } from "../components/item_ejector";
|
||||
import { enumUndergroundBeltMode, UndergroundBeltComponent } from "../components/underground_belt";
|
||||
import { Entity } from "../entity";
|
||||
import { MetaBuilding, defaultBuildingVariant } from "../meta_building";
|
||||
import { GameRoot } from "../root";
|
||||
import { globalConfig } from "../../core/config";
|
||||
import { enumHubGoalRewards } from "../tutorial_goals";
|
||||
import { formatItemsPerSecond, generateMatrixRotations } from "../../core/utils";
|
||||
import { T } from "../../translations";
|
||||
|
||||
/** @enum {string} */
|
||||
export const arrayUndergroundRotationVariantToMode = [
|
||||
enumUndergroundBeltMode.sender,
|
||||
enumUndergroundBeltMode.receiver,
|
||||
];
|
||||
|
||||
/** @enum {string} */
|
||||
export const enumUndergroundBeltVariants = { tier2: "tier2" };
|
||||
|
||||
export const enumUndergroundBeltVariantToTier = {
|
||||
[defaultBuildingVariant]: 0,
|
||||
[enumUndergroundBeltVariants.tier2]: 1,
|
||||
};
|
||||
|
||||
const overlayMatrices = [
|
||||
// Sender
|
||||
generateMatrixRotations([1, 1, 1, 0, 1, 0, 0, 1, 0]),
|
||||
|
||||
// Receiver
|
||||
generateMatrixRotations([0, 1, 0, 0, 1, 0, 1, 1, 1]),
|
||||
];
|
||||
|
||||
export class MetaUndergroundBeltBuilding extends MetaBuilding {
|
||||
constructor() {
|
||||
super("underground_belt");
|
||||
}
|
||||
|
||||
getSilhouetteColor() {
|
||||
return "#222";
|
||||
}
|
||||
|
||||
getFlipOrientationAfterPlacement() {
|
||||
return true;
|
||||
}
|
||||
|
||||
getStayInPlacementMode() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} rotation
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
* @param {Entity} entity
|
||||
*/
|
||||
getSpecialOverlayRenderMatrix(rotation, rotationVariant, variant, entity) {
|
||||
return overlayMatrices[rotationVariant][rotation];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {GameRoot} root
|
||||
* @param {string} variant
|
||||
* @returns {Array<[string, string]>}
|
||||
*/
|
||||
getAdditionalStatistics(root, variant) {
|
||||
const rangeTiles =
|
||||
globalConfig.undergroundBeltMaxTilesByTier[enumUndergroundBeltVariantToTier[variant]];
|
||||
|
||||
const beltSpeed = root.hubGoals.getUndergroundBeltBaseSpeed();
|
||||
return [
|
||||
[
|
||||
T.ingame.buildingPlacement.infoTexts.range,
|
||||
T.ingame.buildingPlacement.infoTexts.tiles.replace("<x>", "" + rangeTiles),
|
||||
],
|
||||
[T.ingame.buildingPlacement.infoTexts.speed, formatItemsPerSecond(beltSpeed)],
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
getAvailableVariants(root) {
|
||||
if (root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_underground_belt_tier_2)) {
|
||||
return [defaultBuildingVariant, enumUndergroundBeltVariants.tier2];
|
||||
}
|
||||
return super.getAvailableVariants(root);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
getPreviewSprite(rotationVariant, variant) {
|
||||
let suffix = "";
|
||||
if (variant !== defaultBuildingVariant) {
|
||||
suffix = "-" + variant;
|
||||
}
|
||||
|
||||
switch (arrayUndergroundRotationVariantToMode[rotationVariant]) {
|
||||
case enumUndergroundBeltMode.sender:
|
||||
return Loader.getSprite("sprites/buildings/underground_belt_entry" + suffix + ".png");
|
||||
case enumUndergroundBeltMode.receiver:
|
||||
return Loader.getSprite("sprites/buildings/underground_belt_exit" + suffix + ".png");
|
||||
default:
|
||||
assertAlways(false, "Invalid rotation variant");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
getBlueprintSprite(rotationVariant, variant) {
|
||||
let suffix = "";
|
||||
if (variant !== defaultBuildingVariant) {
|
||||
suffix = "-" + variant;
|
||||
}
|
||||
|
||||
switch (arrayUndergroundRotationVariantToMode[rotationVariant]) {
|
||||
case enumUndergroundBeltMode.sender:
|
||||
return Loader.getSprite("sprites/blueprints/underground_belt_entry" + suffix + ".png");
|
||||
case enumUndergroundBeltMode.receiver:
|
||||
return Loader.getSprite("sprites/blueprints/underground_belt_exit" + suffix + ".png");
|
||||
default:
|
||||
assertAlways(false, "Invalid rotation variant");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
getSprite(rotationVariant, variant) {
|
||||
return this.getPreviewSprite(rotationVariant, variant);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
getIsUnlocked(root) {
|
||||
return root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_tunnel);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the entity at the given location
|
||||
* @param {Entity} entity
|
||||
*/
|
||||
setupEntityComponents(entity) {
|
||||
// Required, since the item processor needs this.
|
||||
entity.addComponent(
|
||||
new ItemEjectorComponent({
|
||||
slots: [],
|
||||
})
|
||||
);
|
||||
|
||||
entity.addComponent(new UndergroundBeltComponent({}));
|
||||
entity.addComponent(
|
||||
new ItemAcceptorComponent({
|
||||
slots: [],
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Should compute the optimal rotation variant on the given tile
|
||||
* @param {object} param0
|
||||
* @param {GameRoot} param0.root
|
||||
* @param {Vector} param0.tile
|
||||
* @param {number} param0.rotation
|
||||
* @param {string} param0.variant
|
||||
* @param {Layer} param0.layer
|
||||
* @return {{ rotation: number, rotationVariant: number, connectedEntities?: Array<Entity> }}
|
||||
*/
|
||||
computeOptimalDirectionAndRotationVariantAtTile({ root, tile, rotation, variant, layer }) {
|
||||
const searchDirection = enumAngleToDirection[rotation];
|
||||
const searchVector = enumDirectionToVector[searchDirection];
|
||||
const tier = enumUndergroundBeltVariantToTier[variant];
|
||||
|
||||
const targetRotation = (rotation + 180) % 360;
|
||||
const targetSenderRotation = rotation;
|
||||
|
||||
for (
|
||||
let searchOffset = 1;
|
||||
searchOffset <= globalConfig.undergroundBeltMaxTilesByTier[tier];
|
||||
++searchOffset
|
||||
) {
|
||||
tile = tile.addScalars(searchVector.x, searchVector.y);
|
||||
|
||||
/* WIRES: FIXME */
|
||||
const contents = root.map.getTileContent(tile, "regular");
|
||||
if (contents) {
|
||||
const undergroundComp = contents.components.UndergroundBelt;
|
||||
if (undergroundComp && undergroundComp.tier === tier) {
|
||||
const staticComp = contents.components.StaticMapEntity;
|
||||
if (staticComp.rotation === targetRotation) {
|
||||
if (undergroundComp.mode !== enumUndergroundBeltMode.sender) {
|
||||
// If we encounter an underground receiver on our way which is also faced in our direction, we don't accept that
|
||||
break;
|
||||
}
|
||||
return {
|
||||
rotation: targetRotation,
|
||||
rotationVariant: 1,
|
||||
connectedEntities: [contents],
|
||||
};
|
||||
} else if (staticComp.rotation === targetSenderRotation) {
|
||||
// Draw connections to receivers
|
||||
if (undergroundComp.mode === enumUndergroundBeltMode.receiver) {
|
||||
return {
|
||||
rotation: rotation,
|
||||
rotationVariant: 0,
|
||||
connectedEntities: [contents],
|
||||
};
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
rotation,
|
||||
rotationVariant: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Entity} entity
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
updateVariants(entity, rotationVariant, variant) {
|
||||
entity.components.UndergroundBelt.tier = enumUndergroundBeltVariantToTier[variant];
|
||||
|
||||
switch (arrayUndergroundRotationVariantToMode[rotationVariant]) {
|
||||
case enumUndergroundBeltMode.sender: {
|
||||
entity.components.UndergroundBelt.mode = enumUndergroundBeltMode.sender;
|
||||
entity.components.ItemEjector.setSlots([]);
|
||||
entity.components.ItemAcceptor.setSlots([
|
||||
{
|
||||
pos: new Vector(0, 0),
|
||||
directions: [enumDirection.bottom],
|
||||
},
|
||||
]);
|
||||
return;
|
||||
}
|
||||
case enumUndergroundBeltMode.receiver: {
|
||||
entity.components.UndergroundBelt.mode = enumUndergroundBeltMode.receiver;
|
||||
entity.components.ItemAcceptor.setSlots([]);
|
||||
entity.components.ItemEjector.setSlots([
|
||||
{
|
||||
pos: new Vector(0, 0),
|
||||
direction: enumDirection.top,
|
||||
},
|
||||
]);
|
||||
return;
|
||||
}
|
||||
default:
|
||||
assertAlways(false, "Invalid rotation variant");
|
||||
}
|
||||
}
|
||||
}
|
||||
import { Loader } from "../../core/loader";
|
||||
import { enumDirection, Vector, enumAngleToDirection, enumDirectionToVector } from "../../core/vector";
|
||||
import { ItemAcceptorComponent } from "../components/item_acceptor";
|
||||
import { ItemEjectorComponent } from "../components/item_ejector";
|
||||
import { enumUndergroundBeltMode, UndergroundBeltComponent } from "../components/underground_belt";
|
||||
import { Entity } from "../entity";
|
||||
import { MetaBuilding, defaultBuildingVariant } from "../meta_building";
|
||||
import { GameRoot } from "../root";
|
||||
import { globalConfig } from "../../core/config";
|
||||
import { enumHubGoalRewards } from "../tutorial_goals";
|
||||
import { formatItemsPerSecond, generateMatrixRotations } from "../../core/utils";
|
||||
import { T } from "../../translations";
|
||||
|
||||
/** @enum {string} */
|
||||
export const arrayUndergroundRotationVariantToMode = [
|
||||
enumUndergroundBeltMode.sender,
|
||||
enumUndergroundBeltMode.receiver,
|
||||
];
|
||||
|
||||
/** @enum {string} */
|
||||
export const enumUndergroundBeltVariants = { tier2: "tier2" };
|
||||
|
||||
export const enumUndergroundBeltVariantToTier = {
|
||||
[defaultBuildingVariant]: 0,
|
||||
[enumUndergroundBeltVariants.tier2]: 1,
|
||||
};
|
||||
|
||||
const colorsByRotationVariant = ["#6d9dff", "#51d723"];
|
||||
|
||||
const overlayMatrices = [
|
||||
// Sender
|
||||
generateMatrixRotations([1, 1, 1, 0, 1, 0, 0, 1, 0]),
|
||||
|
||||
// Receiver
|
||||
generateMatrixRotations([0, 1, 0, 0, 1, 0, 1, 1, 1]),
|
||||
];
|
||||
|
||||
export class MetaUndergroundBeltBuilding extends MetaBuilding {
|
||||
constructor() {
|
||||
super("underground_belt");
|
||||
}
|
||||
|
||||
getSilhouetteColor(variant, rotationVariant) {
|
||||
return colorsByRotationVariant[rotationVariant];
|
||||
}
|
||||
|
||||
getFlipOrientationAfterPlacement() {
|
||||
return true;
|
||||
}
|
||||
|
||||
getStayInPlacementMode() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} rotation
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
* @param {Entity} entity
|
||||
*/
|
||||
getSpecialOverlayRenderMatrix(rotation, rotationVariant, variant, entity) {
|
||||
return overlayMatrices[rotationVariant][rotation];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {GameRoot} root
|
||||
* @param {string} variant
|
||||
* @returns {Array<[string, string]>}
|
||||
*/
|
||||
getAdditionalStatistics(root, variant) {
|
||||
const rangeTiles =
|
||||
globalConfig.undergroundBeltMaxTilesByTier[enumUndergroundBeltVariantToTier[variant]];
|
||||
|
||||
const beltSpeed = root.hubGoals.getUndergroundBeltBaseSpeed();
|
||||
return [
|
||||
[
|
||||
T.ingame.buildingPlacement.infoTexts.range,
|
||||
T.ingame.buildingPlacement.infoTexts.tiles.replace("<x>", "" + rangeTiles),
|
||||
],
|
||||
[T.ingame.buildingPlacement.infoTexts.speed, formatItemsPerSecond(beltSpeed)],
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
getAvailableVariants(root) {
|
||||
if (root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_underground_belt_tier_2)) {
|
||||
return [defaultBuildingVariant, enumUndergroundBeltVariants.tier2];
|
||||
}
|
||||
return super.getAvailableVariants(root);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
getPreviewSprite(rotationVariant, variant) {
|
||||
let suffix = "";
|
||||
if (variant !== defaultBuildingVariant) {
|
||||
suffix = "-" + variant;
|
||||
}
|
||||
|
||||
switch (arrayUndergroundRotationVariantToMode[rotationVariant]) {
|
||||
case enumUndergroundBeltMode.sender:
|
||||
return Loader.getSprite("sprites/buildings/underground_belt_entry" + suffix + ".png");
|
||||
case enumUndergroundBeltMode.receiver:
|
||||
return Loader.getSprite("sprites/buildings/underground_belt_exit" + suffix + ".png");
|
||||
default:
|
||||
assertAlways(false, "Invalid rotation variant");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
getBlueprintSprite(rotationVariant, variant) {
|
||||
let suffix = "";
|
||||
if (variant !== defaultBuildingVariant) {
|
||||
suffix = "-" + variant;
|
||||
}
|
||||
|
||||
switch (arrayUndergroundRotationVariantToMode[rotationVariant]) {
|
||||
case enumUndergroundBeltMode.sender:
|
||||
return Loader.getSprite("sprites/blueprints/underground_belt_entry" + suffix + ".png");
|
||||
case enumUndergroundBeltMode.receiver:
|
||||
return Loader.getSprite("sprites/blueprints/underground_belt_exit" + suffix + ".png");
|
||||
default:
|
||||
assertAlways(false, "Invalid rotation variant");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
getSprite(rotationVariant, variant) {
|
||||
return this.getPreviewSprite(rotationVariant, variant);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
getIsUnlocked(root) {
|
||||
return root.hubGoals.isRewardUnlocked(enumHubGoalRewards.reward_tunnel);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the entity at the given location
|
||||
* @param {Entity} entity
|
||||
*/
|
||||
setupEntityComponents(entity) {
|
||||
// Required, since the item processor needs this.
|
||||
entity.addComponent(
|
||||
new ItemEjectorComponent({
|
||||
slots: [],
|
||||
})
|
||||
);
|
||||
|
||||
entity.addComponent(new UndergroundBeltComponent({}));
|
||||
entity.addComponent(
|
||||
new ItemAcceptorComponent({
|
||||
slots: [],
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Should compute the optimal rotation variant on the given tile
|
||||
* @param {object} param0
|
||||
* @param {GameRoot} param0.root
|
||||
* @param {Vector} param0.tile
|
||||
* @param {number} param0.rotation
|
||||
* @param {string} param0.variant
|
||||
* @param {Layer} param0.layer
|
||||
* @return {{ rotation: number, rotationVariant: number, connectedEntities?: Array<Entity> }}
|
||||
*/
|
||||
computeOptimalDirectionAndRotationVariantAtTile({ root, tile, rotation, variant, layer }) {
|
||||
const searchDirection = enumAngleToDirection[rotation];
|
||||
const searchVector = enumDirectionToVector[searchDirection];
|
||||
const tier = enumUndergroundBeltVariantToTier[variant];
|
||||
|
||||
const targetRotation = (rotation + 180) % 360;
|
||||
const targetSenderRotation = rotation;
|
||||
|
||||
for (
|
||||
let searchOffset = 1;
|
||||
searchOffset <= globalConfig.undergroundBeltMaxTilesByTier[tier];
|
||||
++searchOffset
|
||||
) {
|
||||
tile = tile.addScalars(searchVector.x, searchVector.y);
|
||||
|
||||
/* WIRES: FIXME */
|
||||
const contents = root.map.getTileContent(tile, "regular");
|
||||
if (contents) {
|
||||
const undergroundComp = contents.components.UndergroundBelt;
|
||||
if (undergroundComp && undergroundComp.tier === tier) {
|
||||
const staticComp = contents.components.StaticMapEntity;
|
||||
if (staticComp.rotation === targetRotation) {
|
||||
if (undergroundComp.mode !== enumUndergroundBeltMode.sender) {
|
||||
// If we encounter an underground receiver on our way which is also faced in our direction, we don't accept that
|
||||
break;
|
||||
}
|
||||
return {
|
||||
rotation: targetRotation,
|
||||
rotationVariant: 1,
|
||||
connectedEntities: [contents],
|
||||
};
|
||||
} else if (staticComp.rotation === targetSenderRotation) {
|
||||
// Draw connections to receivers
|
||||
if (undergroundComp.mode === enumUndergroundBeltMode.receiver) {
|
||||
return {
|
||||
rotation: rotation,
|
||||
rotationVariant: 0,
|
||||
connectedEntities: [contents],
|
||||
};
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
rotation,
|
||||
rotationVariant: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Entity} entity
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
updateVariants(entity, rotationVariant, variant) {
|
||||
entity.components.UndergroundBelt.tier = enumUndergroundBeltVariantToTier[variant];
|
||||
|
||||
switch (arrayUndergroundRotationVariantToMode[rotationVariant]) {
|
||||
case enumUndergroundBeltMode.sender: {
|
||||
entity.components.UndergroundBelt.mode = enumUndergroundBeltMode.sender;
|
||||
entity.components.ItemEjector.setSlots([]);
|
||||
entity.components.ItemAcceptor.setSlots([
|
||||
{
|
||||
pos: new Vector(0, 0),
|
||||
directions: [enumDirection.bottom],
|
||||
},
|
||||
]);
|
||||
return;
|
||||
}
|
||||
case enumUndergroundBeltMode.receiver: {
|
||||
entity.components.UndergroundBelt.mode = enumUndergroundBeltMode.receiver;
|
||||
entity.components.ItemAcceptor.setSlots([]);
|
||||
entity.components.ItemEjector.setSlots([
|
||||
{
|
||||
pos: new Vector(0, 0),
|
||||
direction: enumDirection.top,
|
||||
},
|
||||
]);
|
||||
return;
|
||||
}
|
||||
default:
|
||||
assertAlways(false, "Invalid rotation variant");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,273 +1,275 @@
|
||||
import { Loader } from "../core/loader";
|
||||
import { AtlasSprite } from "../core/sprites";
|
||||
import { Vector } from "../core/vector";
|
||||
import { SOUNDS } from "../platform/sound";
|
||||
import { StaticMapEntityComponent } from "./components/static_map_entity";
|
||||
import { Entity } from "./entity";
|
||||
import { GameRoot } from "./root";
|
||||
import { getCodeFromBuildingData } from "./building_codes";
|
||||
|
||||
export const defaultBuildingVariant = "default";
|
||||
|
||||
export class MetaBuilding {
|
||||
/**
|
||||
*
|
||||
* @param {string} id Building id
|
||||
*/
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the id of this building
|
||||
*/
|
||||
getId() {
|
||||
return this.id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the edit layer of the building
|
||||
* @returns {Layer}
|
||||
*/
|
||||
getLayer() {
|
||||
return "regular";
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return the dimensions of the building
|
||||
*/
|
||||
getDimensions(variant = defaultBuildingVariant) {
|
||||
return new Vector(1, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether the building has the direction lock switch available
|
||||
*/
|
||||
getHasDirectionLockAvailable() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to stay in placement mode after having placed a building
|
||||
*/
|
||||
getStayInPlacementMode() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Can return a special interlaved 9 elements overlay matrix for rendering
|
||||
* @param {number} rotation
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
* @param {Entity} entity
|
||||
* @returns {Array<number>|null}
|
||||
*/
|
||||
getSpecialOverlayRenderMatrix(rotation, rotationVariant, variant, entity) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return additional statistics about this building
|
||||
* @param {GameRoot} root
|
||||
* @param {string} variant
|
||||
* @returns {Array<[string, string]>}
|
||||
*/
|
||||
getAdditionalStatistics(root, variant) {
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this building can get replaced
|
||||
*/
|
||||
getIsReplaceable() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to flip the orientation after a building has been placed - useful
|
||||
* for tunnels.
|
||||
*/
|
||||
getFlipOrientationAfterPlacement() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to show a preview of the wires layer when placing the building
|
||||
*/
|
||||
getShowWiresLayerPreview() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to rotate automatically in the dragging direction while placing
|
||||
* @param {string} variant
|
||||
*/
|
||||
getRotateAutomaticallyWhilePlacing(variant) {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this building is removable
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getIsRemovable() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the placement sound
|
||||
* @returns {string}
|
||||
*/
|
||||
getPlacementSound() {
|
||||
return SOUNDS.placeBuilding;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
getAvailableVariants(root) {
|
||||
return [defaultBuildingVariant];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a preview sprite
|
||||
* @returns {AtlasSprite}
|
||||
*/
|
||||
getPreviewSprite(rotationVariant = 0, variant = defaultBuildingVariant) {
|
||||
return Loader.getSprite(
|
||||
"sprites/buildings/" +
|
||||
this.id +
|
||||
(variant === defaultBuildingVariant ? "" : "-" + variant) +
|
||||
".png"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a sprite for blueprints
|
||||
* @returns {AtlasSprite}
|
||||
*/
|
||||
getBlueprintSprite(rotationVariant = 0, variant = defaultBuildingVariant) {
|
||||
return Loader.getSprite(
|
||||
"sprites/blueprints/" +
|
||||
this.id +
|
||||
(variant === defaultBuildingVariant ? "" : "-" + variant) +
|
||||
".png"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this building is rotateable
|
||||
* @param {string} variant
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getIsRotateable(variant) {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this building is unlocked for the given game
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
getIsUnlocked(root) {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return a silhouette color for the map overview or null if not set
|
||||
*/
|
||||
getSilhouetteColor() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return false if the pins are already included in the sprite of the building
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getRenderPins() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the entity without placing it
|
||||
* @param {object} param0
|
||||
* @param {GameRoot} param0.root
|
||||
* @param {Vector} param0.origin Origin tile
|
||||
* @param {number=} param0.rotation Rotation
|
||||
* @param {number} param0.originalRotation Original Rotation
|
||||
* @param {number} param0.rotationVariant Rotation variant
|
||||
* @param {string} param0.variant
|
||||
*/
|
||||
createEntity({ root, origin, rotation, originalRotation, rotationVariant, variant }) {
|
||||
const entity = new Entity(root);
|
||||
entity.layer = this.getLayer();
|
||||
entity.addComponent(
|
||||
new StaticMapEntityComponent({
|
||||
origin: new Vector(origin.x, origin.y),
|
||||
rotation,
|
||||
originalRotation,
|
||||
tileSize: this.getDimensions(variant).copy(),
|
||||
code: getCodeFromBuildingData(this, variant, rotationVariant),
|
||||
})
|
||||
);
|
||||
this.setupEntityComponents(entity, root);
|
||||
this.updateVariants(entity, rotationVariant, variant);
|
||||
return entity;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the sprite for a given variant
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
* @returns {AtlasSprite}
|
||||
*/
|
||||
getSprite(rotationVariant, variant) {
|
||||
return Loader.getSprite(
|
||||
"sprites/buildings/" +
|
||||
this.id +
|
||||
(variant === defaultBuildingVariant ? "" : "-" + variant) +
|
||||
".png"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Should compute the optimal rotation variant on the given tile
|
||||
* @param {object} param0
|
||||
* @param {GameRoot} param0.root
|
||||
* @param {Vector} param0.tile
|
||||
* @param {number} param0.rotation
|
||||
* @param {string} param0.variant
|
||||
* @param {Layer} param0.layer
|
||||
* @return {{ rotation: number, rotationVariant: number, connectedEntities?: Array<Entity> }}
|
||||
*/
|
||||
computeOptimalDirectionAndRotationVariantAtTile({ root, tile, rotation, variant, layer }) {
|
||||
if (!this.getIsRotateable(variant)) {
|
||||
return {
|
||||
rotation: 0,
|
||||
rotationVariant: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rotation,
|
||||
rotationVariant: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Should update the entity to match the given variants
|
||||
* @param {Entity} entity
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
updateVariants(entity, rotationVariant, variant) {}
|
||||
|
||||
// PRIVATE INTERFACE
|
||||
|
||||
/**
|
||||
* Should setup the entity components
|
||||
* @param {Entity} entity
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
setupEntityComponents(entity, root) {
|
||||
abstract;
|
||||
}
|
||||
}
|
||||
import { Loader } from "../core/loader";
|
||||
import { AtlasSprite } from "../core/sprites";
|
||||
import { Vector } from "../core/vector";
|
||||
import { SOUNDS } from "../platform/sound";
|
||||
import { StaticMapEntityComponent } from "./components/static_map_entity";
|
||||
import { Entity } from "./entity";
|
||||
import { GameRoot } from "./root";
|
||||
import { getCodeFromBuildingData } from "./building_codes";
|
||||
|
||||
export const defaultBuildingVariant = "default";
|
||||
|
||||
export class MetaBuilding {
|
||||
/**
|
||||
*
|
||||
* @param {string} id Building id
|
||||
*/
|
||||
constructor(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the id of this building
|
||||
*/
|
||||
getId() {
|
||||
return this.id;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the edit layer of the building
|
||||
* @returns {Layer}
|
||||
*/
|
||||
getLayer() {
|
||||
return "regular";
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return the dimensions of the building
|
||||
*/
|
||||
getDimensions(variant = defaultBuildingVariant) {
|
||||
return new Vector(1, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether the building has the direction lock switch available
|
||||
*/
|
||||
getHasDirectionLockAvailable() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to stay in placement mode after having placed a building
|
||||
*/
|
||||
getStayInPlacementMode() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Can return a special interlaved 9 elements overlay matrix for rendering
|
||||
* @param {number} rotation
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
* @param {Entity} entity
|
||||
* @returns {Array<number>|null}
|
||||
*/
|
||||
getSpecialOverlayRenderMatrix(rotation, rotationVariant, variant, entity) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return additional statistics about this building
|
||||
* @param {GameRoot} root
|
||||
* @param {string} variant
|
||||
* @returns {Array<[string, string]>}
|
||||
*/
|
||||
getAdditionalStatistics(root, variant) {
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this building can get replaced
|
||||
*/
|
||||
getIsReplaceable() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to flip the orientation after a building has been placed - useful
|
||||
* for tunnels.
|
||||
*/
|
||||
getFlipOrientationAfterPlacement() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to show a preview of the wires layer when placing the building
|
||||
*/
|
||||
getShowWiresLayerPreview() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether to rotate automatically in the dragging direction while placing
|
||||
* @param {string} variant
|
||||
*/
|
||||
getRotateAutomaticallyWhilePlacing(variant) {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this building is removable
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getIsRemovable() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the placement sound
|
||||
* @returns {string}
|
||||
*/
|
||||
getPlacementSound() {
|
||||
return SOUNDS.placeBuilding;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
getAvailableVariants(root) {
|
||||
return [defaultBuildingVariant];
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a preview sprite
|
||||
* @returns {AtlasSprite}
|
||||
*/
|
||||
getPreviewSprite(rotationVariant = 0, variant = defaultBuildingVariant) {
|
||||
return Loader.getSprite(
|
||||
"sprites/buildings/" +
|
||||
this.id +
|
||||
(variant === defaultBuildingVariant ? "" : "-" + variant) +
|
||||
".png"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a sprite for blueprints
|
||||
* @returns {AtlasSprite}
|
||||
*/
|
||||
getBlueprintSprite(rotationVariant = 0, variant = defaultBuildingVariant) {
|
||||
return Loader.getSprite(
|
||||
"sprites/blueprints/" +
|
||||
this.id +
|
||||
(variant === defaultBuildingVariant ? "" : "-" + variant) +
|
||||
".png"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this building is rotateable
|
||||
* @param {string} variant
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getIsRotateable(variant) {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this building is unlocked for the given game
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
getIsUnlocked(root) {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return a silhouette color for the map overview or null if not set
|
||||
* @param {string} variant
|
||||
* @param {number} rotationVariant
|
||||
*/
|
||||
getSilhouetteColor(variant, rotationVariant) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return false if the pins are already included in the sprite of the building
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getRenderPins() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the entity without placing it
|
||||
* @param {object} param0
|
||||
* @param {GameRoot} param0.root
|
||||
* @param {Vector} param0.origin Origin tile
|
||||
* @param {number=} param0.rotation Rotation
|
||||
* @param {number} param0.originalRotation Original Rotation
|
||||
* @param {number} param0.rotationVariant Rotation variant
|
||||
* @param {string} param0.variant
|
||||
*/
|
||||
createEntity({ root, origin, rotation, originalRotation, rotationVariant, variant }) {
|
||||
const entity = new Entity(root);
|
||||
entity.layer = this.getLayer();
|
||||
entity.addComponent(
|
||||
new StaticMapEntityComponent({
|
||||
origin: new Vector(origin.x, origin.y),
|
||||
rotation,
|
||||
originalRotation,
|
||||
tileSize: this.getDimensions(variant).copy(),
|
||||
code: getCodeFromBuildingData(this, variant, rotationVariant),
|
||||
})
|
||||
);
|
||||
this.setupEntityComponents(entity, root);
|
||||
this.updateVariants(entity, rotationVariant, variant);
|
||||
return entity;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the sprite for a given variant
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
* @returns {AtlasSprite}
|
||||
*/
|
||||
getSprite(rotationVariant, variant) {
|
||||
return Loader.getSprite(
|
||||
"sprites/buildings/" +
|
||||
this.id +
|
||||
(variant === defaultBuildingVariant ? "" : "-" + variant) +
|
||||
".png"
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Should compute the optimal rotation variant on the given tile
|
||||
* @param {object} param0
|
||||
* @param {GameRoot} param0.root
|
||||
* @param {Vector} param0.tile
|
||||
* @param {number} param0.rotation
|
||||
* @param {string} param0.variant
|
||||
* @param {Layer} param0.layer
|
||||
* @return {{ rotation: number, rotationVariant: number, connectedEntities?: Array<Entity> }}
|
||||
*/
|
||||
computeOptimalDirectionAndRotationVariantAtTile({ root, tile, rotation, variant, layer }) {
|
||||
if (!this.getIsRotateable(variant)) {
|
||||
return {
|
||||
rotation: 0,
|
||||
rotationVariant: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rotation,
|
||||
rotationVariant: 0,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Should update the entity to match the given variants
|
||||
* @param {Entity} entity
|
||||
* @param {number} rotationVariant
|
||||
* @param {string} variant
|
||||
*/
|
||||
updateVariants(entity, rotationVariant, variant) {}
|
||||
|
||||
// PRIVATE INTERFACE
|
||||
|
||||
/**
|
||||
* Should setup the entity components
|
||||
* @param {Entity} entity
|
||||
* @param {GameRoot} root
|
||||
*/
|
||||
setupEntityComponents(entity, root) {
|
||||
abstract;
|
||||
}
|
||||
}
|
||||
|