New frontend

.dockerignore

@@ -0,0 +1,6 @@
+*node_modules*
+**/target
+.git
+.idea
+*.iml
+test-output

.github/workflows/maven.yml

@@ -20,6 +20,10 @@ jobs:
       with:
         java-version: 22
         distribution: temurin
+    - name: Set up Node.js
+      uses: actions/setup-node@v6
+      with:
+        node-version: 22
 
     # Use preinstalled PostgreSQL
     - name: Start PostgreSQL on Ubuntu

.slugignore

@@ -0,0 +1,5 @@
+webapp/frontend/node_modules
+webapp/frontend/.svelte-kit
+webapp/frontend/README.md
+webapp/frontend/components.json
+webapp/frontend/eslint.config.json

Dockerfile

@@ -2,6 +2,8 @@ FROM eclipse-temurin:22
 
 WORKDIR /srv
 
+ARG SKIP_FRONTEND=false
+
 RUN apt update && apt -y install maven
 
 COPY pom.xml pom.xml
@@ -17,13 +19,13 @@ RUN mvn dependency:go-offline
 
 COPY . .
 
-ENV SPRING_DATASOURCE_URL jdbc:postgresql://mindcode-db/mindcode_development
+ENV SPRING_DATASOURCE_URL jdbc:postgresql://mindcode-db:5432/mindcode_development
 ENV SPRING_DATASOURCE_USERNAME postgres
 ENV SPRING_DATASOURCE_PASSWORD pg_password
 
 # Skip tests because postgres is only available at runtime
-RUN mvn install -Dmaven.test.skip
+RUN mvn clean package -Dmaven.test.skip -DskipFrontend=${SKIP_FRONTEND}
 
 EXPOSE 8080
 
-CMD java -classpath `find webapp -type f -name '*.jar' | tr '\n' ':'` info.teksol.mindcode.webapp.WebappApplication
+CMD java -jar webapp/target/mindcode-webapp.jar

Procfile

@@ -1 +1 @@
-web: java -Dserver.port=${PORT} -classpath $( find webapp -type f -name '*.jar' | tr '\n' ':' ) info.teksol.mindcode.webapp.WebappApplication
+web: java -Dserver.port=${PORT} -jar webapp/target/mindcode-webapp.jar

docker-compose.yaml

@@ -1,5 +1,4 @@
 services:
-
   mindcode-db:
     image: postgres:17
     restart: on-failure
@@ -11,16 +10,26 @@ services:
       - mindcode-postgres-data:/var/lib/postgresql/data
     ports:
       - "5432:5432"
+    networks:
+      - mindcode-net
 
   mindcode-web:
     build:
       context: .
+      args:
+        SKIP_FRONTEND: ${SKIP_FRONTEND:-false}
 
     depends_on:
       - mindcode-db
     ports:
       - "127.0.0.1:8080:8080"
+    networks:
+      - mindcode-net
 
 volumes:
   mindcode-postgres-data:
     driver: local
+
+networks:
+  mindcode-net:
+    driver: bridge

samples/README.md

@@ -0,0 +1,5 @@
+Contains the samples used by the webapp.
+
+The json files contain additional information about the samples, such as
+whether they should be executed by default and the order in which they should
+appear to the user.

samples/src/main/java/info/teksol/mindcode/samples/Samples.java

@@ -18,6 +18,7 @@ public static Map<String, Sample> loadMindcodeSamples() {
                 "relaxed:many-thorium",
                 "heal-damaged-building",
                 "mining-drone",
+                "item-transport",
                 "upgrade-conveyors",
                 "run:sum-of-primes"
         );

samples/src/main/resources/samples/mindcode.json

@@ -0,0 +1,42 @@
+[
+  {
+    "filename": "control-multiple-units.mnd",
+    "title": "Controlling units",
+    "runnable": false
+  },
+  {
+    "filename": "one-thorium.mnd",
+    "title": "Controlling a block",
+    "runnable": false
+  },
+  {
+    "filename": "many-thorium.mnd",
+    "title": "Controlling many blocks",
+    "runnable": false
+  },
+  {
+    "filename": "heal-damaged-building.mnd",
+    "title": "Healing buildings",
+    "runnable": false
+  },
+  {
+    "filename": "mining-drone.mnd",
+    "title": "Mining drone",
+    "runnable": false
+  },
+  {
+    "filename": "item-transport.mnd",
+    "title": "Item Transport",
+    "runnable": false
+  },
+  {
+    "filename": "upgrade-conveyors.mnd",
+    "title": "Upgrade conveyors",
+    "runnable": false
+  },
+  {
+    "filename": "sum-of-primes.mnd",
+    "title": "Sum of primes",
+    "runnable": true
+  }
+]

samples/src/main/resources/samples/schematics.json

@@ -0,0 +1,52 @@
+[
+  {
+    "filename": "detector.sdf",
+    "title": "Property Detector",
+    "runnable": false
+  },
+  {
+    "filename": "healing-center.sdf",
+    "title": "Healing Center",
+    "runnable": false
+  },
+  {
+    "filename": "on-off-switch.sdf",
+    "title": "On/Off Switch",
+    "runnable": false
+  },
+  {
+    "filename": "regulator.sdf",
+    "title": "Regulator",
+    "runnable": false
+  },
+  {
+    "filename": "overdrive-dome-supply.sdf",
+    "title": "Overdrive Dome Supply",
+    "runnable": false
+  },
+  {
+    "filename": "worker-recall-station.sdf",
+    "title": "Unit Recall Station",
+    "runnable": false
+  },
+  {
+    "filename": "scrap-to-metaglass-2.sdf",
+    "title": "Scrap to Metaglass",
+    "runnable": false
+  },
+  {
+    "filename": "item-transport.sdf",
+    "title": "Item Transport",
+    "runnable": false
+  },
+  {
+    "filename": "payload-hub.sdf",
+    "title": "Payload Hub",
+    "runnable": false
+  },
+  {
+    "filename": "mandelbrot-generator.sdf",
+    "title": "Mandelbrot Generator",
+    "runnable": false
+  }
+]

webapp/.gitignore

@@ -31,3 +31,5 @@ build/
 
 ### VS Code ###
 .vscode/
+
+src/main/resources/static

webapp/README.md

@@ -0,0 +1,34 @@
+# Mindcode webapp
+
+The frontend for mindcode is built using [svelte kit](https://svelte.dev/docs/kit/introduction).
+
+## Development (backend)
+
+Look at the [contribution guide](../CONTRIBUTING.markdown).
+
+As you will see in [deployment](#deployment), building the backend will also build the frontend, so you don't need to setup node if you only want to edit backend code.
+
+To prevent the frontend from being built unecessarily, you may use `-DskipFrontend=true` on the maven command, or set the `SKIP_FRONTEND` environment variable when running the backend through docker.
+
+## Development (frontend)
+
+If you need to make changes to the frontend, run
+
+```sh
+cd webapp/frontend
+npm run dev
+```
+
+This will open a development server on `http://localhost:5173`, which provides hot reload for the pages, and proxies request to `/api/**` to `http://localhost:8080/api/**` (the url where the mindcode webapp server runs during development, the mindcode server needs to be run separatedly).
+
+## Deployment
+
+When building the webapp, [`frontend-maven-plugin`](https://github.com/eirslett/frontend-maven-plugin) will be invoked to build the frontend.
+
+`webapp/frontend/svelte.config.js` contains the frontend configuration, it is configured so that:
+- The frontend is built as a collection of html pages with client-side routing
+- The build output is placed on `webapp/src/main/resources/static`
+
+> [!WARNING]
+> If the `HEROKU` environment variable is present, most folders and files in the project will be deleted,
+> preserving only `webapp/target/mindcode-webapp.jar` and a few configuration files.

webapp/frontend/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

webapp/frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

webapp/frontend/.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

webapp/frontend/.prettierrc

@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	],
+	"tailwindStylesheet": "./src/routes/layout.css"
+}

webapp/frontend/components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src\\routes\\layout.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}

webapp/frontend/eslint.config.js

@@ -0,0 +1,41 @@
+import prettier from 'eslint-config-prettier';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default defineConfig(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: { globals: { ...globals.browser, ...globals.node } },
+
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);