Preparations for stand alone export: game and common folders are now separate chunks, and a new game.html file is created.

Author: luizzeroxis

src/index-game.js

@@ -0,0 +1,48 @@
+// Entry point for the standalone game build
+
+import ProjectSerializer from "./common/ProjectSerializer.js";
+import Game from "./game/Game.js";
+
+async function main() {
+	if (window.location.protocol == "file:") {
+		document.body.innerHTML += "<p>Opening the game from your local system is not supported. Please create a local server instead.</p>";
+	}
+
+	let response;
+	let projectZip;
+
+	try {
+		response = await fetch("project.zip");
+		projectZip = await response.blob();
+	} catch (e) {
+		console.error(e);
+	}
+
+	if (!response?.ok) {
+		document.body.innerHTML += "<p>Error: Cannot load project.zip!</p>";
+		return;
+	}
+
+	const project = await ProjectSerializer.unserializeZIP(projectZip);
+
+	const canvas = document.createElement("canvas");
+	canvas.width = 640;
+	canvas.height = 480;
+	canvas.tabIndex = 0;
+	document.body.append(canvas);
+
+	canvas.focus({preventScroll: true});
+
+	const game = new Game({
+		project: project,
+		canvas: canvas,
+		input: canvas,
+		menuManager: null,
+	});
+
+	game.start();
+
+	window.game = game;
+}
+
+main();

webpack.common.js

@@ -11,7 +11,10 @@ const webpack = require("webpack");
 const gitRevisionPlugin = new GitRevisionPlugin();
 
 module.exports = {
-	entry: "./src/index.js",
+	entry: {
+		"main": "./src/index.js",
+		"main-game": "./src/index-game.js",
+	},
 	output: {
 		path: path.resolve(__dirname, "dist"),
 		filename: "[name].bundle.js",
@@ -43,21 +46,28 @@ module.exports = {
 	optimization: {
 		runtimeChunk: "single",
 		splitChunks: {
+			chunks: "all", // insurance
 			cacheGroups: {
-				vendor: {
+				vendors: {
 					test: /[\\/]node_modules[\\/]/,
 					name: "vendors",
-					chunks: "all",
 				},
-				image: {
+				images: {
 					test(module) {
 						return (
 							module.resource
 							&& module.resource.endsWith(".png")
 						);
 					},
 					name: "images",
-					chunks: "all",
+				},
+				game: {
+					test: /[\\/]src[\\/]game[\\/]/,
+					name: "game",
+				},
+				common: { // technically, this could be in 'game', but it's probably good to be separate
+					test: /[\\/]src[\\/]common[\\/]/,
+					name: "common",
 				},
 			},
 		},
@@ -69,12 +79,18 @@ module.exports = {
 				"LASTCOMMITDATETIME": JSON.stringify(gitRevisionPlugin.lastcommitdatetime()),
 			},
 		}),
+		new ESLintPlugin({
+			files: path.resolve(__dirname, "."),
+		}),
 		new HtmlWebpackPlugin({
 			title: "webgm",
+			excludeChunks: ["main-game"],
 		}),
-		new MiniCssExtractPlugin(),
-		new ESLintPlugin({
-			files: path.resolve(__dirname, "."),
+		new HtmlWebpackPlugin({
+			filename: "game.html",
+			title: "webgm game",
+			chunks: ["main-game"],
 		}),
+		new MiniCssExtractPlugin(),
 	],
 };

webpack.prod.js

@@ -21,7 +21,8 @@ module.exports = mergeWithRules({
 			{
 				test: /\.[s]css$/,
 				use: [
-					MiniCssExtractPlugin.loader,
+					// MiniCssExtractPlugin.loader,
+					"style-loader", // temporarily using this for standalone reasons
 				],
 			},
 		],