ccm/miti.sh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix indent

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2026-01-07 18:13:43 -08:00
parent da1bebe4f2
commit 3fa1e8f722
1 changed files with 871 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

324
html/images/space.svg
View File

@@ -185,84 +185,84 @@
</foreignObject>
<script type="text/javascript">//<![CDATA[
// entities
// const Ships = [{ entity_id: "ship_1" }];
// const Walls = [{ entity_id: "wall_1" }, { entity_id: "wall_2" }];
// entities
// const Ships = [{ entity_id: "ship_1" }];
// const Walls = [{ entity_id: "wall_1" }, { entity_id: "wall_2" }];
// systems
// Move.update = ({ entity_id }) => {
// systems
// Move.update = ({ entity_id }) => {
// reads Velocity[entity_id]
// sets Position[entity_id]
// };
// };
// components
// Velocity = { "ship_1": { x: 0, y: 0 }};
// Position = { "ship_1": { x: 0, y: 0 }};
// Points = {
// "wall_1": "0,0 2,0 1,1",
// "wall_2": "0,0 -1,1 -2,0",
// };
// components
// Velocity = { "ship_1": { x: 0, y: 0 }};
// Position = { "ship_1": { x: 0, y: 0 }};
// Points = {
// "wall_1": "0,0 2,0 1,1",
// "wall_2": "0,0 -1,1 -2,0",
// };
const namespaceURIsvg = 'http://www.w3.org/2000/svg';
const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
const regex = /(-?\d*\.{0,1}\d+)px/g;
const bullets = [];
const halfPi = Math.PI / 2;
const maxSpeed = 100;
const namespaceURIsvg = 'http://www.w3.org/2000/svg';
const degsRegex = /(-?\d*\.{0,1}\d+)deg/g;
const regex = /(-?\d*\.{0,1}\d+)px/g;
const bullets = [];
const halfPi = Math.PI / 2;
const maxSpeed = 100;
const drawCollisionLines = false;
const drawCollisionLines = false;
let previous, zero, frameCount = 0;
// let position = [0, 0]; // meters
// let velocity = [0, 0]; // meters per second
// let acceleration = [0, 0]; // meters per second per second
let position; // meters
let velocity; // meters per second
let acceleration; // meters per second per second
let rotate = 0;
let previous, zero, frameCount = 0;
// let position = [0, 0]; // meters
// let velocity = [0, 0]; // meters per second
// let acceleration = [0, 0]; // meters per second per second
let position; // meters
let velocity; // meters per second
let acceleration; // meters per second per second
let rotate = 0;
let mult = 10000;
let mult = 10000;
const ship = document.querySelector(".ship");
const s = { node: ship };
const ship = document.querySelector(".ship");
const s = { node: ship };
let friction = 0;
let rotationSpeed = 0.25;
let started = false;
let restart = false;
let isReadingKeys = true;
let friction = 0;
let rotationSpeed = 0.25;
let started = false;
let restart = false;
let isReadingKeys = true;
const svg = document.querySelector('svg');
const bg = svg.querySelector('#bg');
const fps = document.querySelector("#fps");
const time = document.querySelector("#time");
const debug = document.querySelector("#debug");
const gun = ship.querySelector('#cannon');
const shipBody = ship.querySelector("#body");
const shipRadius = +shipBody.getAttribute('r');
const svg = document.querySelector('svg');
const bg = svg.querySelector('#bg');
const fps = document.querySelector("#fps");
const time = document.querySelector("#time");
const debug = document.querySelector("#debug");
const gun = ship.querySelector('#cannon');
const shipBody = ship.querySelector("#body");
const shipRadius = +shipBody.getAttribute('r');
const legs = ship.querySelector("#legs");
const wallElements = document.querySelectorAll('.wall');
const bulletsContainer = document.querySelector("#bullets");
const triangleContainer = document.querySelector('#triangles');
const linesContainer = document.querySelector("#lines");
const edgeContainer = document.querySelector('#edges');
const velIndic = document.querySelector('#velocity-indicator');
const acclIndic = document.querySelector('#acceleration-indicator');
const legs = ship.querySelector("#legs");
const wallElements = document.querySelectorAll('.wall');
const bulletsContainer = document.querySelector("#bullets");
const triangleContainer = document.querySelector('#triangles');
const linesContainer = document.querySelector("#lines");
const edgeContainer = document.querySelector('#edges');
const velIndic = document.querySelector('#velocity-indicator');
const acclIndic = document.querySelector('#acceleration-indicator');
const bulletPt = svg.createSVGPoint();
const cornerPt = svg.createSVGPoint();
const bulletPt = svg.createSVGPoint();
const cornerPt = svg.createSVGPoint();
const allWallCorners = [...wallElements].map(wall => {
const allWallCorners = [...wallElements].map(wall => {
const cs = wall.getAttribute('points').split(' ').map(coords => {
const [x, y] = coords.split(',');
return [+x, +y];
});
return wall.classList.contains("inverse") ? cs.reverse() : cs;
});
});
const mapWalls = [...wallElements].map(node => {
const mapWalls = [...wallElements].map(node => {
const corners = node.getAttribute('points').split(' ').map(coords => {
const [x, y] = coords.split(',');
const pt = svg.createSVGPoint();
@@ -277,38 +277,34 @@
});
return { node, corners, edges };
});
});
const mapCorners = mapWalls.reduce(
const mapCorners = mapWalls.reduce(
(acc, wall) => [...acc, ...wall.corners.map(c => ({ corner: c, wall: wall }))],
[]
);
);
const mapEdges = mapWalls.reduce(
const mapEdges = mapWalls.reduce(
(acc, wall) => [...acc, ...wall.edges.map(e => ({ edge: e, wall: wall }))],
[]
);
);
console.log("walls on map", mapWalls);
console.log("corners on map", mapCorners);
console.log("edges on map", mapEdges);
console.log("walls on map", mapWalls);
console.log("corners on map", mapCorners);
console.log("edges on map", mapEdges);
const allEdgePts = allWallCorners.map(w =>
w.map((pt, i, arr) => [pt, arr[(i + 1) % arr.length]])
);
let allStartingEdges;
init();
let allStartingEdges;
init(allEdgePts);
function distance(x1, y1, x2, y2) {
function distance(x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}
}
function drawAllEdges(walls) {
function drawAllEdges(walls) {
walls.forEach(edges => drawEdges(edges));
}
}
function drawEdges(pts) {
function drawEdges(pts) {
let edges = pts.map(e => e.join(' '));
edges.forEach(e => {
@@ -323,9 +319,9 @@
el.setAttribute('y2', y2);
edgeContainer.appendChild(el)
});
}
}
function drawTriangles(container, walls, [positionX, positionY]) {
function drawTriangles(container, walls, [positionX, positionY]) {
walls.forEach(pts =>
pts.forEach(([[x1, y1], [x2, y2]]) => {
const el = document.createElementNS(namespaceURIsvg, 'polygon');
@@ -334,17 +330,17 @@
container.appendChild(el);
})
);
}
}
// Triangle has a clockwise orientation
function isClockwise([xa, ya], [xb, yb], [xc, yc]) {
// Triangle has a clockwise orientation
function isClockwise([xa, ya], [xb, yb], [xc, yc]) {
// https://en.wikipedia.org/wiki/Curve_orientation#Practical_considerations
// Determinant for a convex polygon
const det = (+xb - +xa) * (+yc - +ya) - (+xc - +xa) * (+yb - +ya);
return det < 0;
}
}
function isAcute([xa, ya], [xb, yb], [xc, yc]) {
function isAcute([xa, ya], [xb, yb], [xc, yc]) {
const da = distance(xa, ya, xc, yc);
const db = distance(xb, yb, xc, yc);
const dc = distance(xa, ya, xb, yb);
@@ -354,18 +350,18 @@
const alpha = Math.acos((db ** 2 + dc ** 2 - da ** 2) / (2 * db * dc));
const beta = Math.acos((da ** 2 + dc ** 2 - db ** 2) / (2 * da * dc));
return alpha < halfPi && beta < halfPi;
}
}
function findEdges(verts, [xc, yc]) {
function findEdges(verts, [xc, yc]) {
return verts.reduce((acc, [a, b]) => {
const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
// return isFound ? [...acc, `${xa},${ya} ${xb},${yb}`] : acc;
return isFound ? [...acc, `${a[0]},${a[1]} ${b[0]},${b[1]}`] : acc;
}, []);
}
}
// function findAllEdges(verts, [xc, yc] = [0, 0]) {
function findAllEdges(verts, [xc, yc]) {
// function findAllEdges(verts, [xc, yc] = [0, 0]) {
function findAllEdges(verts, [xc, yc]) {
return verts.reduce((acc, points) => {
points.forEach(([a, b]) => {
const isFound = [isClockwise, isAcute].every(c => c(a, b, [xc, yc]));
@@ -374,17 +370,17 @@
return acc;
}, []);
}
}
function getForwardEdges(edges, { x, y }) {
function getForwardEdges(edges, { x, y }) {
return edges.filter(({ edge }) => {
const { xa, ya, xb, yb } = edge;
const det = (xb - xa) * (y - ya) - (x - xa) * (yb - ya);
return det < 0;
});
}
}
function getForwardCorners(corners, position, velocity) {
function getForwardCorners(corners, position, velocity) {
const { x: x1, y: y1 } = position;
const { x: x2, y: y2 } = velocity;
@@ -443,14 +439,14 @@
const det = (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
return det > 0;
});
}
}
function updateTriangles([positionX, positionY]) {
function updateTriangles([positionX, positionY]) {
const delim = ' ';
const className = 'clockwise-orientation';
if (!triangleContainer.childElementCount)
drawTriangles(triangleContainer, allEdgePts, position);
// if (!triangleContainer.childElementCount)
// drawTriangles(triangleContainer, allEdgePts, position);
const triangles = triangleContainer.querySelectorAll('polygon');
@@ -471,9 +467,9 @@
t.classList[cw && !acute ? "add" : "remove"]("obtuse");
t.classList[!cw ? "add" : "remove"]("anti-clockwise");
});
}
}
function wrapPos(positionX, positionY) {
function wrapPos(positionX, positionY) {
let x, y;
if (positionY > 150) y = positionY - 300;
@@ -485,9 +481,9 @@
else x = positionX;
return [x, y];
}
}
function fireBullet(position, velocity) {
function fireBullet(position, velocity) {
const speed = 200; // meters per second
const degrees = getRotate(gun);
const radians = degrees * Math.PI / 180; // toFixed(15)?
@@ -512,14 +508,14 @@
}
bullets.push(bullet);
}
}
function getRotate(el) {
function getRotate(el) {
let [[, degrees] = ["0deg", "0"]] = [...el.style.transform.matchAll(degsRegex)];
return +degrees;
}
}
function updateBullets(elapsed) {
function updateBullets(elapsed) {
const deleteCount = 1;
[...bullets].forEach((bullet, index) => {
@@ -537,9 +533,9 @@
bullets.splice(index, deleteCount);
}
});
}
}
function perpIntxn(baseSlope, xa, ya, xc, yc) {
function perpIntxn(baseSlope, xa, ya, xc, yc) {
let isx, isy;
// base is vertical
@@ -556,9 +552,9 @@
}
return { x: isx, y: isy };
}
}
function drawLine(xa, ya, xb, yb, color = "black") {
function drawLine(xa, ya, xb, yb, color = "black") {
const el = document.createElementNS(namespaceURIsvg, 'line');
el.setAttribute('x1', xa);
el.setAttribute('y1', ya);
@@ -567,9 +563,9 @@
el.setAttribute('stroke', color);
svg.appendChild(el);
return el;
}
}
function drawCircle(cx, cy, color = "black", r = 1) {
function drawCircle(cx, cy, color = "black", r = 1) {
const el = document.createElementNS(namespaceURIsvg, 'circle');
el.setAttribute('cx', cx);
el.setAttribute('cy', cy);
@@ -577,18 +573,18 @@
el.setAttribute('fill', color);
svg.appendChild(el);
return el;
}
}
function slope({ xa, ya, xb, yb }) {
function slope({ xa, ya, xb, yb }) {
return (yb - ya) / (xb - xa);
}
}
function isLandable(edge) {
function isLandable(edge) {
// console.log("edge", edge, "slope", slope(edge));
return Object.is(slope(edge), +0);
}
}
function detectEdgeCollision([xc, yc], [x, y], radius) {
function detectEdgeCollision([xc, yc], [x, y], radius) {
return ({ edge, wall }) => {
if (xc === x && yc === y) return;
@@ -625,9 +621,9 @@
return roundedS >= 0 && roundedS <= 1 && roundedT >= 0 && roundedT <= 1;
};
}
}
function detectCornerCollision([xc, yc], [x, y], radius) {
function detectCornerCollision([xc, yc], [x, y], radius) {
return c => {
if (xc === x && yc === y) return;
@@ -664,9 +660,9 @@
return s >= 0 && roundedT <= 1;
};
}
}
function detectCollision(edges, corners, [xc, yc], [x, y], velocity, radius) {
function detectCollision(edges, corners, [xc, yc], [x, y], velocity, radius) {
// edges oriented clockwise with ship
const fwdEdges = getForwardEdges(edges, { x, y })
const edgeColl = fwdEdges.find(detectEdgeCollision([xc, yc], [x, y], radius));
@@ -679,9 +675,9 @@
const cornerColl = cornersInPath.find(detectCornerCollision([xc, yc], [x, y], radius));
if (cornerColl) return cornerColl;
}
}
function withinCollisionDistance({ x: x1, y: y1 }, { x: x2, y: y2 }, distance) {
function withinCollisionDistance({ x: x1, y: y1 }, { x: x2, y: y2 }, distance) {
const diffx = x2;
const diffy = y2;
const detv = x2 * y1 - y2 * x1;
@@ -695,9 +691,9 @@
const d = Math.sqrt(dy ** 2 + dx ** 2);
return d <= distance;
};
}
}
function cornerContactPosition(xc, yc, x, y, corner, cLength) {
function cornerContactPosition(xc, yc, x, y, corner, cLength) {
const positionSeg = { xa: xc, ya: yc, xb: x, yb: y };
const posNormIntxn = perpIntxn(slope(positionSeg), x, y, corner.x, corner.y);
@@ -713,9 +709,9 @@
intxnSeg.setAttribute('y2', y);
return intxnSeg.getPointAtLength(bLength);
}
}
function edgeContactPosition(xc, yc, x, y, edge, radius) {
function edgeContactPosition(xc, yc, x, y, edge, radius) {
const baseSlope = slope(edge);
// if (Object.is(baseSlope, 0)) s.isLanded = true;
let { xa, ya, xb, yb } = edge;
@@ -738,9 +734,9 @@
cl.setAttribute('y2', y);
return cl.getPointAtLength(h);
}
}
function lineIntxnPt({ x1, y1, x2, y2 }, { x1: x3, y1: y3, x2: x4, y2: y4 }) {
function lineIntxnPt({ x1, y1, x2, y2 }, { x1: x3, y1: y3, x2: x4, y2: y4 }) {
// https://en.wikipedia.org/wiki/Line%E2%80%93line_intersection#Given_two_points_on_each_line
const denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
const l1Det = x1 * y2 - y1 * x2;
@@ -749,9 +745,9 @@
const y = (l1Det * (y3 - y4) - (y1 - y2) * l2Det) / denominator;
return { x: x, y: y };
}
}
function updateShip(s, elapsed) {
function updateShip(s, elapsed) {
const degrees = getRotate(gun);
if (rotate > 0) gun.style.transform = `rotate(${(+degrees + rotationSpeed * elapsed) % 360}deg)`;
else if (rotate < 0) gun.style.transform = `rotate(${(+degrees - rotationSpeed * elapsed) % 360}deg)`;
@@ -811,10 +807,11 @@
s.position = { x: positionX, y: positionY }
s.node.style.transform = `translate(${positionX}px, ${positionY}px)`;
}
}
}
function updateEdges(position) {
const collisionEdges = findAllEdges(allEdgePts, position);
function updateEdges(position) {
// const collisionEdges = findAllEdges(allEdgePts, position);
const collisionEdges = [];
[...edgeContainer.children].forEach(l => {
const x1 = l.getAttribute('x1');
@@ -830,9 +827,9 @@
].some(c => c))
l.remove();
});
}
}
function updateLines(elapsed, walls, position, velocity) {
function updateLines(elapsed, walls, position, velocity) {
const edges = walls.reduce((acc, wall) => {
return [...acc, ...wall.edges];
}, []);
@@ -877,9 +874,9 @@
return g;
});
}
}
function init(edgePts) {
function init() {
started = false;
const mult = 10000;
@@ -902,16 +899,16 @@
wallElements.forEach(w => w.setAttribute('fill', 'black'));
// bg.style.fill = 'black';
time.innerText = "0";
}
}
function firstFrame(timestamp) {
function firstFrame(timestamp) {
zero = timestamp;
zeroForTimer = timestamp;
previous = timestamp;
animate(timestamp);
}
}
function animate(timestamp) {
function animate(timestamp) {
const elapsed = timestamp - previous;
const delta = timestamp - zero;
let degrees = getRotate(gun);
@@ -947,7 +944,7 @@
if (restart) {
started = false;
restart = false;
init(allEdgePts);
init();
time.innerText = 0;
}
@@ -959,19 +956,19 @@
// requestAnimationFrame(t => animate(t));
requestAnimationFrame(animate);
}
}
}
let force = 1;
let spacePressed = false;
let restartPressed = false;
let upPressed = false;
let downPressed = false;
let leftPressed = false;
let rightPressed = false;
let rotateCWPressed = false;
let rotateCCWPressed = false;
let force = 1;
let spacePressed = false;
let restartPressed = false;
let upPressed = false;
let downPressed = false;
let leftPressed = false;
let rightPressed = false;
let rotateCWPressed = false;
let rotateCCWPressed = false;
document.addEventListener("keydown", function(e) {
document.addEventListener("keydown", function(e) {
if (!isReadingKeys) return;
if (!started) {
@@ -1036,16 +1033,16 @@
s.gearDown = !s.gearDown;
break;
}
});
});
document.addEventListener("keyup", function(e) {
document.addEventListener("keyup", function(e) {
switch (e.code) {
case "Space":
spacePressed = false;
break;
case "KeyR":
isReadingKeys = true;
!started ? init(allEdgePts) : restart = true;
!started ? init() : restart = true;
break;
case "KeyW":
case "ArrowUp":
@@ -1090,14 +1087,14 @@
}
break;
}
});
});
const pointer = svg.querySelector('#pointer');
const xp = pointer.querySelector('.x');
const yp = pointer.querySelector('.y');
const pointerPt = svg.createSVGPoint();
const pointer = svg.querySelector('#pointer');
const xp = pointer.querySelector('.x');
const yp = pointer.querySelector('.y');
const pointerPt = svg.createSVGPoint();
svg.addEventListener("pointermove", function({ clientX, clientY }) {
svg.addEventListener("pointermove", function({ clientX, clientY }) {
pointerPt.x = clientX;
pointerPt.y = clientY;
// https://www.sitepoint.com/how-to-translate-from-dom-to-svg-coordinates-and-back-again/
@@ -1109,8 +1106,7 @@
xp.innerText = Math.trunc(svgP.x);
yp.innerText = Math.trunc(svgP.y);
}
});
});
//]]></script>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 34 KiB