feat(background): add other in-game backgrouds (1/2)

Co-authored-by: yueqiaocertik <yueqiaocertik@users.noreply.github.com>

config.yaml

@@ -1,6 +1,7 @@
 folder: 
   operator: ./operator/
   release: ./release/
+  background: background
   directory: _assets
 operators:
   chen: !include config/chen.yaml

libs/alpha_composite.js

@@ -2,15 +2,6 @@ import sharp from "sharp";
 import path from "path";
 
 export default class AlphaComposite {
-  #config
-  #operatorName
-  #operatorSourceFolder
-
-  constructor(config, operatorName, rootDir) {
-    this.#config = config
-    this.#operatorName = operatorName
-    this.#operatorSourceFolder = path.join(rootDir, this.#config.folder.operator, this.#operatorName)
-  }
 
   async process(filename, extractedDir) {
     const image = sharp(path.join(extractedDir, filename))

libs/append.js

@@ -1,7 +1,7 @@
 import path from 'path'
 import { appendSync, readSync } from './file.js'
 
-export function append(config, operatorName, rootDir) {
+export function appendReadme(config, operatorName, rootDir) {
     const operatorConfig = config.operators[operatorName]
     const projectJson = JSON.parse(readSync(path.join(rootDir, config.folder.operator, operatorName, 'project.json')))
     appendSync(
@@ -9,3 +9,10 @@ export function append(config, operatorName, rootDir) {
         path.join(rootDir, 'README.md')
     )
 }
+
+export function appendMainConfig(operatorName, rootDir) {
+    appendSync(
+        `\n  ${operatorName}: !include config/${operatorName}.yaml`,
+        path.join(rootDir, 'config.yaml')
+    )
+}

libs/assets_processor.js

@@ -35,7 +35,6 @@ export default class AssetsProcessor {
         const fallbackFilename = `${this.#config.operators[this.#operatorName].fallback_name}.png`
         const fallbackBuffer = await this.#alphaCompositer.process(fallbackFilename, extractedDir)
         await write(fallbackBuffer, path.join(this.#operatorSourceFolder, this.#operatorName, fallbackFilename))
-        await copy(path.join(this.#operatorSourceFolder, this.#operatorName, fallbackFilename), path.join(publicAssetsDir, fallbackFilename))
         return {
             dimensions,
             assetsJson

libs/background.js

@@ -0,0 +1,63 @@
+import path from 'path';
+import fs from 'fs';
+import sharp from "sharp";
+
+export default class Background {
+  #config
+  #rootDir
+  #backgroundFolder
+  #extractFolder
+  #files
+
+  constructor(config, rootDir) {
+    this.#config = config;
+    this.#rootDir = rootDir;
+    this.#backgroundFolder = path.join(rootDir, config.folder.operator, '_share', config.folder.background);
+    this.#extractFolder = path.join(this.#backgroundFolder, 'extracted');
+  }
+
+  async process() {
+    this.#files = fs.readdirSync(this.#extractFolder).filter((f) => {
+      return f.endsWith('.png') && f.includes('_left');
+    })
+    if (this.#files.length + 2 !== fs.readdirSync(this.#backgroundFolder).length) {
+      await Promise.all(this.#files.map(async (f) => {
+        const filenamePrefix = path.parse(f).name.replace('_left', '');
+        await this.#composite(filenamePrefix, '.png');
+      }))
+    } else {
+      console.log('Background images already exist, skip generation.')
+    }
+  }
+
+  async #composite(filenamePrefix, fileExt) {
+    const image = sharp(path.join(this.#extractFolder, `${filenamePrefix}_left${fileExt}`))
+    const metadata = await image.metadata()
+
+    image
+      .resize(2 * metadata.width, metadata.height, {
+        kernel: sharp.kernel.nearest,
+        fit: 'contain',
+        position: 'left top',
+        background: { r: 255, g: 255, b: 255, alpha: 0 }
+      })
+      .composite([
+        {
+          input: path.join(this.#extractFolder, `${filenamePrefix}_right${fileExt}`),
+          top: 0,
+          left: metadata.width,
+        },
+      ])
+      .toFile(path.join(this.#backgroundFolder, `${filenamePrefix}${fileExt}`));
+  }
+
+  getFilesToCopy(publicAssetsDir) {
+    return this.#files.map((f) => {
+      return {
+        filename: f.replace('_left', ''),
+        source: path.join(this.#backgroundFolder),
+        target: path.join(publicAssetsDir, this.#config.folder.background)
+      };
+    })
+  }
+}

libs/exec.js

@@ -19,10 +19,8 @@ export function runDev(rootDir) {
     })()
 }
 
-export function runBuild(rootDir) {
+export async function runBuild(rootDir) {
-    ; (async () => {
     await build({
         root: rootDir,
     })
-    })()
 }

libs/initializer.js

@@ -1,7 +1,9 @@
 import path from 'path'
 import { mkdir, copy } from './file.js'
+import { appendMainConfig } from './append.js'
 
 export default function init(operatorName, __dirname, extractedDir) {
     mkdir(extractedDir)
     copy(path.join(__dirname, 'config', '_template.yaml'), path.join(__dirname, 'config', `${operatorName}.yaml`))
+    appendMainConfig(operatorName, __dirname)
 }

libs/project_json.js

@@ -38,6 +38,7 @@ export default class ProjectJson {
     if (matcher.match() !== null) {
       this.#json.description = matcher.process()
     }
+    // TODO: move the template generation to here
     this.#json = {
       ...this.#json,
       description: this.#json.description,

runner.js

@@ -9,20 +9,25 @@ import AssetsProcessor from './libs/assets_processor.js'
 import init from './libs/initializer.js'
 import directory from './libs/directory.js'
 import { buildAll, runDev, runBuild } from './libs/exec.js'
-import { append } from './libs/readme.js'
+import { appendReadme } from './libs/append.js'
+import Background from './libs/background.js'
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
+async function main() {
-const config = getConfig(__dirname)
+    const __dirname = path.dirname(fileURLToPath(import.meta.url))
+    const config = getConfig(__dirname)
 
-const op = process.argv[2]
+    const op = process.argv[2]
-const OPERATOR_NAME = process.argv[3];
+    const OPERATOR_NAME = process.argv[3];
 
-/**
+    const background = new Background(config, __dirname)
+    await background.process()
+
+    /**
      * Skip all, no need for OPERATOR_NAME
- * --build-all: build all assets
+     * build-all: build all assets
- * --directory: build directory.json
+     * directory: build directory.json
      */
-switch (op) {
+    switch (op) {
         case 'build-all':
             buildAll(config)
             process.exit(0)
@@ -31,50 +36,52 @@ switch (op) {
             process.exit(0)
         default:
             break
-}
+    }
 
-assert(OPERATOR_NAME !== undefined, 'Please set the environment variable O to the operator name.')
+    assert(OPERATOR_NAME !== undefined, 'Please set the operator name.')
 
-const OPERATOR_SOURCE_FOLDER = path.join(__dirname, config.folder.operator)
+    const OPERATOR_SOURCE_FOLDER = path.join(__dirname, config.folder.operator)
-const OPERATOR_RELEASE_FOLDER = path.join(__dirname, config.folder.release, OPERATOR_NAME)
+    const OPERATOR_RELEASE_FOLDER = path.join(__dirname, config.folder.release, OPERATOR_NAME)
-const SHOWCASE_PUBLIC_FOLDER = path.join(__dirname, "public")
+    const SHOWCASE_PUBLIC_FOLDER = path.join(__dirname, "public")
-const SHOWCASE_PUBLIC_ASSSETS_FOLDER = path.join(SHOWCASE_PUBLIC_FOLDER, "assets")
+    const SHOWCASE_PUBLIC_ASSSETS_FOLDER = path.join(SHOWCASE_PUBLIC_FOLDER, "assets")
-const EXTRACTED_FOLDER = path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, 'extracted')
+    const EXTRACTED_FOLDER = path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, 'extracted')
-const OPERATOR_SHARE_FOLDER = path.join(OPERATOR_SOURCE_FOLDER, '_share')
+    const OPERATOR_SHARE_FOLDER = path.join(OPERATOR_SOURCE_FOLDER, '_share')
-rmdir(SHOWCASE_PUBLIC_FOLDER)
 
-/**
+    /**
      * Skip assets generation part
- * --init: init folder and config for an operator
+     * init: init folder and config for an operator
+     * readme: append a new line to README.md
      */
-switch (op) {
+    switch (op) {
         case 'init':
             init(OPERATOR_NAME, __dirname, EXTRACTED_FOLDER)
             process.exit(0)
         case 'readme':
-        append(config, OPERATOR_NAME, __dirname)
+            appendReadme(config, OPERATOR_NAME, __dirname)
             process.exit(0)
         default:
             break
-}
+    }
 
-rmdir(OPERATOR_RELEASE_FOLDER)
+    rmdir(OPERATOR_RELEASE_FOLDER)
 
-const projectJson = new ProjectJson(config, OPERATOR_NAME, __dirname, OPERATOR_SHARE_FOLDER)
+    const projectJson = new ProjectJson(config, OPERATOR_NAME, __dirname, OPERATOR_SHARE_FOLDER)
-projectJson.load().then((content) => {
+    projectJson.load().then((content) => {
         write(JSON.stringify(content, null, 2), path.join(OPERATOR_RELEASE_FOLDER, 'project.json'))
-})
+    })
 
-const assetsProcessor = new AssetsProcessor(config, OPERATOR_NAME, __dirname)
+    const assetsProcessor = new AssetsProcessor(config, OPERATOR_NAME, __dirname)
-assetsProcessor.process(SHOWCASE_PUBLIC_ASSSETS_FOLDER, EXTRACTED_FOLDER).then((content) => {
+    assetsProcessor.process(SHOWCASE_PUBLIC_ASSSETS_FOLDER, EXTRACTED_FOLDER).then((content) => {
         write(JSON.stringify(content.assetsJson, null), path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, `${config.operators[OPERATOR_NAME].filename}.json`))
-})
+    })
 
-const envGenerator = new EnvGenerator(config, OPERATOR_NAME, __dirname)
+    const envGenerator = new EnvGenerator(config, OPERATOR_NAME, __dirname)
-envGenerator.generate().then((content) => {
+    envGenerator.generate().then((content) => {
         write(content, path.join(__dirname, '.env'))
-})
+    })
-const filesToCopy = [
+
+    const filesToCopy = [
+        ...background.getFilesToCopy(SHOWCASE_PUBLIC_ASSSETS_FOLDER),
         {
             filename: 'preview.jpg',
             source: path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME),
@@ -82,7 +89,7 @@ const filesToCopy = [
         },
         {
             filename: 'operator_bg.png',
-        source: OPERATOR_SHARE_FOLDER,
+            source: path.join(OPERATOR_SOURCE_FOLDER, config.folder.background),
             target: path.join(SHOWCASE_PUBLIC_FOLDER)
         },
         {
@@ -95,19 +102,26 @@ const filesToCopy = [
             source: path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME),
             target: path.join(SHOWCASE_PUBLIC_ASSSETS_FOLDER)
         },
-]
+    ]
-filesToCopy.forEach((file) => {
+    filesToCopy.forEach(async (file) => {
-    copy(path.join(file.source, file.filename), path.join(file.target, file.filename))
+        await copy(path.join(file.source, file.filename), path.join(file.target, file.filename))
-})
+    })
 
-switch (op) {
+    /**
+     * dev: run dev server
+     * build: build assets
+     */
+    switch (op) {
         case 'dev':
             runDev(__dirname)
             break
         case 'build':
-        runBuild(__dirname)
+            await runBuild(__dirname)
-        break
         case 'generate':
         default:
+            rmdir(SHOWCASE_PUBLIC_FOLDER)
             break
+    }
 }
+
+main();