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

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 34 KiB