Create a UI for the structures application

Dockerfile

@@ -1,3 +1,13 @@
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /frontend
+
+COPY structures/frontend/package*.json ./
+RUN npm ci
+
+COPY structures/frontend/ ./
+RUN npm run build
+
 FROM python:3.12-slim
 
 WORKDIR /app
@@ -10,6 +20,9 @@ RUN poetry install --no-interaction --no-ansi --no-dev
 COPY structures/ ./structures/
 RUN find ./structures -type d \( -name tests -o -name __pycache__ \) -exec rm -rf {} +
 
+# Copy the built Svelte app into the static directory
+COPY --from=frontend-builder /frontend/build/ ./structures/server/static/
+
 COPY geom2d/ ./geom2d/
 RUN find ./geom2d -type d \( -name tests -o -name __pycache__ \) -exec rm -rf {} +
 

Makefile

@@ -1,5 +1,11 @@
 struct.serve:
-	poetry run python -m structures.server.main
+	DEV_MODE=true poetry run python -m structures.server.main
+
+fe.serve:
+	cd structures/frontend && npm run dev
+
+fe.build:
+	cd structures/frontend && npm run build
 
 docker.build:
-	docker build -t hardcore-2dstructures:latest .
+	docker build -t asolaor/hardcore-2dstructures:0.2 .

pyproject.toml

@@ -22,7 +22,7 @@ python = "^3.12"
 tornado = "^6.4.2"
 
 [tool.poetry.group.dev.dependencies]
-ruff = "^0.0.287"
+ruff = "^0.11.4"
 
 [tool.ruff]
 line-length = 88

structures/README.md

@@ -2,15 +2,14 @@
 
 The _structures_ package defines the modeling and resolution of truss structures.
 
-![](../img/truss_structure.svg "Truss structure")
+![](../img/truss_structure.svg 'Truss structure')
 
 Once resolved, the solution generation diagram looks like the following:
 
 ![](../img/plane_truss_result.svg)
 
 The _structures_ package is split into sub-packages:
 
-
 - [_model_](#model)
 - [_solution_](#solution)
 - [_parse_](#parse)
@@ -28,7 +27,6 @@ A node is the point where one or more bars meet.
 
 A `Node` can be instantiated using an id an a position:
 
-
 ```python
 from geom2d import Point
 from structures.model.node import StrNode
@@ -53,8 +51,8 @@ from geom2d import Point, Vector
 from structures.model.node import StrNode
 
 node = StrNode(
-    _id=1, 
-    position=Point(10, 35), 
+    _id=1,
+    position=Point(10, 35),
     loads=[Vector(0, -50), Vector(100, 0)],
     dx_constrained=True,
     dy_constrained=True
@@ -75,8 +73,8 @@ from structures.model.bar import StrBar
 node_one = StrNode(1, Point(10, 35))
 node_two = StrNode(2, Point(150, 400))
 bar = StrBar(
-    _id=1, 
-    start_node=node_one, 
+    _id=1,
+    start_node=node_one,
     end_node=node_two,
     cross_section=25,
     young_mod=20000000
@@ -178,10 +176,10 @@ from geom2d import Vector
 from structures.generation.gen_baltimore import generate_baltimore_structure
 
 generate_baltimore_structure(
-    spans=6, 
-    span=250, 
-    height=300, 
-    cross_sec=45, 
+    spans=6,
+    span=250,
+    height=300,
+    cross_sec=45,
     young=20000000,
     node_load=Vector(1000, -2000)
 )
@@ -250,3 +248,11 @@ with open('result.svg', 'w') as file:
 The result of this code would be an SVG like the following:
 
 ![](../img/plane_truss_result.svg)
+
+## Server
+
+Run locally in DEV mode:
+
+```bash
+$ DEV_MODE=true python -m structures.server.main
+```

structures/frontend/.gitignore

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

structures/frontend/.npmrc

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

structures/frontend/.prettierignore

@@ -0,0 +1,6 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb

structures/frontend/.prettierrc

@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"semi": false,
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

structures/frontend/README.md

@@ -0,0 +1,8 @@
+# TODO
+
+- General CSS improvements
+- Scaling problem
+- Adjust units if they are m or ft
+- (nice) Hiding the editor
+- (nice) Tree view of the solution
+- (nice) Generate warren truss

structures/frontend/eslint.config.js

@@ -0,0 +1,34 @@
+import prettier from 'eslint-config-prettier'
+import js from '@eslint/js'
+import { includeIgnoreFile } from '@eslint/compat'
+import svelte from 'eslint-plugin-svelte'
+import globals from 'globals'
+import { fileURLToPath } from 'node:url'
+import svelteConfig from './svelte.config.js'
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url))
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.js'],
+
+		languageOptions: {
+			parserOptions: {
+				svelteConfig
+			}
+		}
+	}
+]

structures/frontend/jsconfig.json

@@ -0,0 +1,12 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"module": "NodeNext",
+		"moduleResolution": "NodeNext"
+	}
+}