diff --git a/README.md b/README.md
index cc3e06bc..6a0bc39d 100644
--- a/README.md
+++ b/README.md
@@ -81,7 +81,7 @@ This project is based on ES5. Some ES2015 features are used but most of them are
8. In `translations/base-en.yaml` add it to two sections: `buildings.[my_building].XXX` (See other buildings) and also `keybindings.mappings.[my_building]`. Be sure to do it the same way as other buildings do!
9. Create a icon (128x128, [prefab](https://github.com/tobspr/shapez.io-artwork/blob/master/ui/toolbar-icons.psd)) for your building and save it in `res/ui/buildings_icons` with the id of your building
10. Create a tutorial image (600x600) for your building and save it in `res/ui/building_tutorials`
-11. In `src/css/icons.scss` add your building to `$buildings` as well as `$buildingAndVariants`
+11. In `src/css/resources.scss` add your building to `$buildings` as well as `$buildingAndVariants`
12. Done! Optional: Add a new reward for unlocking your building at some point.
#### Adding a new game system
diff --git a/gulp/css.js b/gulp/css.js
index 6734f1ae..35f1a2b5 100644
--- a/gulp/css.js
+++ b/gulp/css.js
@@ -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,
+};
diff --git a/gulp/html.js b/gulp/html.js
index b49fc1b2..4351209a 100644
--- a/gulp/html.js
+++ b/gulp/html.js
@@ -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 = `
- _
-
-
-
${hasLocalFiles ? "Loading" : "Downloading"} Game Files
-
_
+
+
+
${hasLocalFiles ? "Loading" : "Downloading"} Game Files
+
And wait until you unlock wires - then it gets really useful!
reward_cutter_quad:
- title: Quad Cutting
+ title: Quad Cutter
desc: You have unlocked a variant of the cutter - It allows you to cut shapes in four parts instead of just two!
reward_painter_double: