From dd4bdae44beedb77cbb4bd7b4db42a633f146bc2 Mon Sep 17 00:00:00 2001
From: Robin Krens <robin@robinkrens.nl>
Date: Tue, 23 Jan 2024 12:52:01 +0100
Subject: [PATCH] init: setup parcel and planck
---
.eslintrc.js | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
package.json | 21 +++++++++++++++++++
src/app.js | 45 +++++++++++++++++++++++++++++++++++++++++
src/index.html | 12 +++++++++++
src/styles.css | 11 ++++++++++
5 files changed, 153 insertions(+)
create mode 100644 .eslintrc.js
create mode 100644 package.json
create mode 100644 src/app.js
create mode 100644 src/index.html
create mode 100644 src/styles.css
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..fb66cc6
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,64 @@
+module.exports = {
+ "env": {
+ "browser": true,
+ "es2021": true
+ },
+ "extends": "eslint:recommended",
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "sourceType": "module"
+ },
+ "rules": {
+ "indent": [
+ "error",
+ "tab"
+ ],
+ "linebreak-style": [
+ "error",
+ "unix"
+ ],
+ "quotes": [
+ "error",
+ "double"
+ ],
+ "semi": [
+ "error",
+ "always"
+ ],
+ "block-spacing": [
+ "error",
+ "never"
+ ],
+ "array-bracket-newline": [
+ "error",
+ "never"
+ ],
+ "array-element-newline": [
+ "error",
+ "never"
+ ],
+ "space-in-parens": [
+ "error",
+ "never"
+ ],
+ "array-bracket-spacing": [
+ "error",
+ "never"
+ ],
+ "object-curly-spacing": [
+ "error",
+ "never"
+ ],
+ "newline-per-chained-call": [
+ "error",
+ {"ignoreChainWithDepth": 1}
+ ],
+ "no-multi-spaces": [
+ "error"
+ ],
+ "dot-location": [
+ "error",
+ "object"
+ ]
+ }
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..af4002f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "pid",
+ "version": "1.0.0",
+ "description": "",
+ "source": "src/index.html",
+ "scripts": {
+ "start": "parcel serve --no-cache",
+ "build": "parcel build",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": [],
+ "author": "Robin Krens",
+ "license": "ISC",
+ "dependencies": {
+ "planck": "^1.0.0"
+ },
+ "devDependencies": {
+ "eslint": "^8.56.0",
+ "parcel": "^2.11.0"
+ }
+}
diff --git a/src/app.js b/src/app.js
new file mode 100644
index 0000000..628b3af
--- /dev/null
+++ b/src/app.js
@@ -0,0 +1,45 @@
+import {Vec2, Box, World} from "planck";
+
+// Get the canvas element
+const canvas = document.getElementById("area");
+const ctx = canvas.getContext("2d");
+
+// Create a <link>Planck.js</link> world
+const world = World(Vec2(0, 0));
+
+// Define the box properties
+const boxWidth = 50;
+const boxHeight = 50;
+
+// Create a dynamic body for the box
+const box = world.createDynamicBody(Vec2(200, 100));
+box.createFixture({
+ shape: Box(boxWidth / 2, boxHeight / 2),
+ density: 1.0,
+});
+
+// Render the box on the canvas
+function render() {
+ const position = box.getPosition();
+ const angle = box.getAngle();
+
+ // Clear the canvas
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Draw the box
+ ctx.save();
+ ctx.translate(position.x, position.y);
+ ctx.rotate(angle);
+ ctx.fillStyle = "#0095DD";
+ ctx.fillRect(-boxWidth / 2, -boxHeight / 2, boxWidth, boxHeight);
+ ctx.restore();
+}
+
+// Animation loop
+function animate() {
+ world.step(1 / 60);
+ render();
+ requestAnimationFrame(animate);
+}
+
+animate();
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..36bc581
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8"/>
+ <title>robinkrens.nl - Simple JS PID</title>
+ <link rel="stylesheet" href="styles.css" />
+ <script type="module" src="app.js"></script>
+ </head>
+ <body>
+ <canvas id="area"></canvas>
+ </body>
+</html>
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..59169e3
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,11 @@
+#area {
+ margin: auto;
+ padding: 0;
+ display: block;
+ background: #ccc;
+}
+
+h1 {
+ color: blue;
+ font-family: cursive;
+}
--
2.7.4