wgge 0.0.1

package/game/save/SaveGameRenderer.js

@@ -0,0 +1,17 @@
+import DomRenderer from "../../core/renderer/dom/DomRenderer";
+
+export default class SaveGameRenderer extends DomRenderer {
+
+	/**
+	 * @type SaveGameModel
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model, dom);
+
+		this.model = model;
+
+	}
+
+}

package/game/save/editor/SaveGameEditorRenderer.js

@@ -0,0 +1,17 @@
+import DomRenderer from "../../../core/renderer/dom/DomRenderer";
+
+export default class SaveGameEditorRenderer extends DomRenderer {
+
+	/**
+	 * @type SaveGameModel
+	 */
+	model;
+
+	constructor(game, model, dom) {
+		super(game, model, dom);
+
+		this.model = model;
+
+	}
+
+}

package/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+        <title>Web GL Game Engine</title>
+		<link rel="preload" as="style" href="style.css" onload="this.onload=null;this.rel='stylesheet'">
+		<script defer src="index.bundle.js"></script>
+		<style>
+
+			html, body {
+				margin: 0;
+				padding: 0;
+				height: 100%;
+				background-color: #000;
+			}
+
+			#initial_loading {
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				color: #fff;
+				font-size: 2rem;
+				animation-name: loadanim;
+				animation-duration: 2s;
+				animation-direction: alternate;
+				animation-iteration-count: infinite;
+			}
+
+			@keyframes loadanim {
+				from {color: #0a0a0a;}
+				to {color: #f0f0f0;}
+			}
+
+		</style>
+    </head>
+    <body>
+		<div id="initial_loading"><div>Loading...</div></div>
+    </body>
+</html>

package/index.js

@@ -0,0 +1,73 @@
+import Stats from 'three/examples/jsm/libs/stats.module'
+import DOMHelper from "./core/helper/DOMHelper";
+
+export default class Wgge {
+
+	enabled = false;
+	lastTime = 0;
+
+	maxDelta;
+	debugModeEnabled;
+	showStats;
+
+	constructor(
+		controller,
+		renderer,
+		maxDelta = 100,
+		debugModeEnabled = true,
+		showStats = false
+	) {
+		this.controller = controller;
+		this.renderer = renderer;
+		this.maxDelta = maxDelta;
+		this.debugModeEnabled = debugModeEnabled;
+		this.showStats = showStats;
+		this.stats = null;
+
+		this.updateLoopHandler = () => this.updateLoop();
+	}
+
+	start() {
+		if (this.debugModeEnabled) {
+			window['wegge'] = this;
+		}
+		if (this.showStats) {
+			this.stats = new Stats();
+			document.body.appendChild(this.stats.dom);
+		}
+		this.enabled = true;
+		this.controller.activate();
+		this.renderer.activate();
+		this.lastTime = performance.now();
+		this.updateLoop();
+	}
+
+	stop() {
+		this.enabled = false;
+		this.controller.deactivate();
+		this.renderer.deactivate();
+		if (this.stats) {
+			DOMHelper.destroyElement(this.stats.dom);
+			this.stats = null;
+		}
+	}
+
+	updateLoop() {
+		if (!this.enabled) return;
+
+		const time = performance.now();
+		const delta = time - this.lastTime;
+		this.lastTime = time;
+
+		if (delta < this.maxDelta) {
+			this.controller.update(delta);
+			this.renderer.render();
+		}
+
+		if (this.showStats && this.stats) {
+			this.stats.update();
+		}
+
+		requestAnimationFrame(this.updateLoopHandler);
+	}
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "wgge",
+	"version": "0.0.1",
+	"description": "Web GL Game Engine",
+	"main": "index.js",
+	"dependencies": {
+		"localforage": "^1.10.0",
+		"three": "^0.139.2",
+		"@svgdotjs/svg.filter.js": "^3.0.7",
+		"@svgdotjs/svg.js": "^3.1.1"
+	},
+	"devDependencies": {
+		"concurrently": "^7.6.0",
+		"copy-webpack-plugin": "^9.0.1",
+		"express": "^4.18.2",
+		"cors": "^2.8.5",
+		"html-webpack-plugin": "^5.3.2",
+		"http-server": "^13.0.2",
+		"less": "^4.1.3",
+		"webpack": "^5.76.0",
+		"webpack-cli": "^4.8.0",
+		"webpack-dev-server": "^3.11.2",
+		"workbox-webpack-plugin": "^6.3.0"
+	},
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1",
+		"build-less": "lessc style/style.less build/style.css",
+		"build-webpack": "webpack",
+		"build": "npm run build-less && npm run build-webpack",
+		"debug-serve-webpack": "webpack serve --open",
+		"debug-watch-less": "less-watch-compiler style build style.less",
+		"debug": "concurrently \"npm:debug-*\""
+	},
+	"author": "Karel Zavadil"
+}

package/style/basic/editor.less

@@ -0,0 +1,290 @@
+.instant-editor {
+	display: block;
+	position: static;
+	padding: 1px;
+	margin: 1px;
+
+	input[type=text],
+	textarea {
+		display: block;
+		width: 100%;
+		margin: auto;
+	}
+}
+
+.table-lookup {
+	background-color: black;
+	color: gray;
+
+	.buttons {
+		input {
+			margin: 2px !important;
+		}
+
+		button {
+			background-color: gray !important;
+			color: black !important;
+			font-weight: normal !important;
+			box-shadow: none !important;
+			border-radius: 2px !important;
+			padding: 2px !important;
+			margin: 2px !important;
+		}
+	}
+
+	.scroll {
+		overflow-y: auto;
+		overflow-x: hidden;
+		max-height: 400px;
+	}
+
+	.row {
+		display: flex !important;
+	}
+
+	tr.active {
+		color: white;
+	}
+}
+
+.force-foreground {
+	position: fixed;
+	z-index: 9999999;
+	top: 20%;
+	left: 40%;
+}
+
+.editor-section {
+	background-color: black;
+	color: gray;
+
+	button {
+		background-color: gray !important;
+		color: black !important;
+		font-weight: normal !important;
+		box-shadow: none !important;
+		border-radius: 2px !important;
+		padding: 2px !important;
+		margin: 2px !important;
+	}
+}
+
+.editor-layer {
+	font-family: monospace;
+	position: absolute;
+	top: 0;
+	left: 0;
+	max-height: 100%;
+	overflow: hidden;
+	cursor: default;
+
+	.editor {
+		background-color: transparent;
+		font-size: 10pt;
+		position: fixed;
+
+		.bg {
+			background-color: black;
+			color: gray;
+		}
+
+		ul.menu {
+			padding: 0;
+			margin: 0;
+
+			a:hover {
+				color: lightblue;
+				cursor: pointer;
+			}
+
+			.active {
+				color: white;
+			}
+
+			li {
+				padding: 4px;
+				list-style: none;
+			}
+		}
+
+		.buttons {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+
+			& > div {
+				display: flex;
+				flex-direction: row;
+				justify-content: start;
+			}
+
+			input {
+				margin: @m-1;
+			}
+		}
+
+		button {
+			background-color: gray;
+			color: black;
+			border: 0;
+			border-radius: 5px;
+			cursor: pointer;
+			margin: @m-1;
+
+			&.active {
+				background-color: black;
+				color: white;
+				border: 1px white solid;
+				cursor: default;
+			}
+
+			&:hover {
+				background-color: lightblue;
+			}
+
+			&.special {
+				background-color: @light-brown;
+				color: @dark-brown;
+			}
+
+			&.red {
+				background-color: red;
+			}
+
+			&.blue {
+				background-color: lightblue;
+			}
+		}
+
+		.dock {
+			width: 100%;
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: space-between;
+		}
+
+		.table,
+		form,
+		.item-def {
+			border: 1px gray solid;
+			border-radius: 5px;
+			margin: 10px;
+			padding: 10px;
+		}
+
+		.grab-icon {
+			cursor: move;
+			opacity: 0.5;
+
+			&::after {
+				content: "■";
+			}
+		}
+
+		.table .scroll,
+		form .scroll {
+			display: block;
+			overflow-y: auto;
+			overflow-x: hidden;
+		}
+
+		.table .scroll {
+			max-height: 200px;
+			max-width: 700px;
+			overflow-x: auto;
+		}
+
+		form .scroll {
+			max-height: 563px;
+		}
+
+		table {
+			margin-right: 20px;
+		}
+
+		table td {
+			border-left: 1px gray solid;
+			white-space: nowrap;
+			max-height: 1em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		table td:last-of-type {
+			border-right: 1px gray solid;
+		}
+
+		table tr:hover > td {
+			color: lightblue;
+			cursor: pointer;
+		}
+
+		table tr.active > td {
+			color: white;
+		}
+
+		form .fields .row {
+			display: grid;
+			grid-template-columns: 1fr 4fr;
+			gap: 10px;
+			margin-bottom: @m-1;
+		}
+
+		form .fields .row .field {
+			display: flex;
+			align-content: stretch;
+			flex-direction: column;
+		}
+
+		form .fields .row .field.with-lookup {
+			flex-direction: row;
+			align-items: center;
+		}
+
+		form .fields .row .field.with-lookup .lookup-button {
+			margin: 0;
+		}
+
+		form .fields .row input {
+			display: block;
+			width: auto;
+			margin-right: 10px;
+		}
+
+		form .fields .row input[type=checkbox] {
+			align-self: start;
+		}
+
+		form .fields .row .vector {
+			flex-direction: row;
+		}
+
+		form .fields .row .vector input {
+			width: 100px;
+		}
+
+		.battle-menu {
+			position: fixed;
+			right: 20px;
+			top: 20px;
+			padding: @m-2;
+
+			input[type=text] {
+				width: 50px;
+			}
+
+			input[type=radio] {
+				margin: 0;
+				padding: @m-1;
+				display: inline-block;
+			}
+
+			label {
+				padding: @m-1;
+				display: inline-block;
+			}
+		}
+
+	}
+}

package/style/basic/game.less

@@ -0,0 +1,149 @@
+@dark-brown: #311a0a;
+@medium-brown: #885f32;
+@light-brown: #ad9475;
+
+@orange: sandybrown;
+@gold: #e0b050;
+@red: darkred;
+@white: #e0e0e0;
+@black: rgb(0, 0, 0);
+@transparent-black: rgba(0, 0, 0, 0.7);
+
+@font-size-extra-small: 10pt;
+@font-size-small: 16pt;
+@font-size-medium: 22pt;
+@font-size-large: 32pt;
+@font-size-extra-large: 65pt;
+
+html, body {
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	height: 100%;
+	min-height: 100%;
+	background-color: #000;
+}
+
+img {
+	-webkit-user-drag: none;
+	-khtml-user-drag: none;
+	-moz-user-drag: none;
+	-o-user-drag: none;
+	user-drag: none;
+}
+
+h1, h2, h3, h4 {
+	margin: 0;
+	padding: 0;
+}
+
+.no-text-select {
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+	-webkit-touch-callout: none;
+	-ms-user-select: none;
+}
+
+.normal-text {
+	.no-text-select();
+
+	font-family: "Droid Sans Mono Dotted", monospace;
+	font-size: @font-size-small;
+}
+
+.decor-text {
+	.normal-text();
+
+	font-size: @font-size-medium;
+}
+
+.small-text {
+	.normal-text();
+
+	font-size: @font-size-extra-small;
+}
+
+.default-cursor {
+	//cursor: uri('img/cursor/cursor.png'), default;
+}
+
+.info-float {
+	position: fixed;
+	right: @m-2;
+	top: @m-2;
+	background-color: @black;
+	color: @white;
+	padding: @m-2;
+}
+
+.loading {
+	.decor-text();
+
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 2000;
+	pointer-events: none;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center center;
+
+	color: @white;
+
+	div {
+		border-radius: @m-2;
+	}
+
+	.progress-wrapper {
+		border-width: 1px;
+		padding: 1px;
+		border-style: solid;
+		border-color: @white;
+
+		div {
+			height: @m-2;
+			background-color: @white;
+		}
+	}
+}
+
+.main-menu-layer {
+	.default-cursor();
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: @transparent-black;
+
+	.main-menu {
+		.decor-text();
+		border-radius: @m-2;
+		text-align: center;
+		color: @white;
+
+		.item {
+			&:hover {
+				color: @red;
+			}
+		}
+	}
+}
+
+.savegame-layer {
+	.default-cursor();
+	.normal-text();
+	color: @dark-brown;
+
+}