homepage
parent
2f2398b523
commit
7e18ba2726
@ -0,0 +1,17 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: currentColor;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
.homepanel .socket {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socket .plug {
|
||||||
|
display: inline-block;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
cursor: alias;
|
||||||
|
position: relative;
|
||||||
|
z-index: 50;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plug.out {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.socket label {
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
border: 1px solid currentColor;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,140 @@
|
|||||||
|
// Great resource from https://stackoverflow.com/a/40700068
|
||||||
|
// Thank you ConnorFan
|
||||||
|
|
||||||
|
var strokeWidth = 10;
|
||||||
|
var bufferSize = 10;
|
||||||
|
|
||||||
|
var svgElement = document.getElementById("svgElement");
|
||||||
|
svgElement.setAttribute("viewBox", `0 0 ${svgElement.clientWidth} ${svgElement.clientHeight}`);
|
||||||
|
|
||||||
|
var rect = svgElement.getBoundingClientRect();
|
||||||
|
var path = null;
|
||||||
|
var strPath;
|
||||||
|
var buffer = []; // Contains the last positions of the mouse cursor
|
||||||
|
var cable;
|
||||||
|
|
||||||
|
class Cable {
|
||||||
|
start = "";
|
||||||
|
end = "";
|
||||||
|
path = "";
|
||||||
|
color = "";
|
||||||
|
|
||||||
|
constructor(start) {
|
||||||
|
this.start = start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("mousedown", function (e) {
|
||||||
|
let socket = e.target;
|
||||||
|
|
||||||
|
if (socket.matches(".plug.out")) {
|
||||||
|
path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
||||||
|
path.setAttribute("fill", "none");
|
||||||
|
|
||||||
|
let color = randomColor();
|
||||||
|
path.setAttribute("stroke", color);
|
||||||
|
path.setAttribute("stroke-width", strokeWidth);
|
||||||
|
path.setAttribute("stroke-linecap", "round");
|
||||||
|
buffer = [];
|
||||||
|
var pt = getMousePosition(e);
|
||||||
|
appendToBuffer(pt);
|
||||||
|
strPath = "M" + pt.x + " " + pt.y;
|
||||||
|
path.setAttribute("d", strPath);
|
||||||
|
svgElement.appendChild(path);
|
||||||
|
|
||||||
|
cable = new Cable(socket.nextElementSibling.innerHTML);
|
||||||
|
cable.color = color;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("mousemove", function (e) {
|
||||||
|
if (path) {
|
||||||
|
appendToBuffer(getMousePosition(e));
|
||||||
|
updateSvgPath();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener("mouseup", (e) => appendCable(e));
|
||||||
|
window.addEventListener("mouseleave", (e) => appendCable(e));
|
||||||
|
|
||||||
|
var appendCable = function (e) {
|
||||||
|
if (path) {
|
||||||
|
let socket = e.target;
|
||||||
|
if (socket.matches(".plug.in")) {
|
||||||
|
cable.end = socket.nextElementSibling.innerHTML;
|
||||||
|
cable.path = path.getAttribute("d");
|
||||||
|
}
|
||||||
|
path = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var getMousePosition = function (e) {
|
||||||
|
return {
|
||||||
|
x: e.pageX - rect.left,
|
||||||
|
y: e.pageY - rect.top,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
var appendToBuffer = function (pt) {
|
||||||
|
buffer.push(pt);
|
||||||
|
while (buffer.length > bufferSize) {
|
||||||
|
buffer.shift();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Calculate the average point, starting at offset in the buffer
|
||||||
|
var getAveragePoint = function (offset) {
|
||||||
|
var len = buffer.length;
|
||||||
|
if (len % 2 === 1 || len >= bufferSize) {
|
||||||
|
var totalX = 0;
|
||||||
|
var totalY = 0;
|
||||||
|
var pt, i;
|
||||||
|
var count = 0;
|
||||||
|
for (i = offset; i < len; i++) {
|
||||||
|
count++;
|
||||||
|
pt = buffer[i];
|
||||||
|
totalX += pt.x;
|
||||||
|
totalY += pt.y;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
x: totalX / count,
|
||||||
|
y: totalY / count,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// ok
|
||||||
|
var updateSvgPath = function () {
|
||||||
|
var pt = getAveragePoint(0);
|
||||||
|
|
||||||
|
if (pt) {
|
||||||
|
// Get the smoothed part of the path that will not change
|
||||||
|
strPath += " L" + pt.x + " " + pt.y;
|
||||||
|
|
||||||
|
// Get the last part of the path (close to the current mouse position)
|
||||||
|
// This part will change if the mouse moves again
|
||||||
|
var tmpPath = "";
|
||||||
|
for (var offset = 2; offset < buffer.length; offset += 2) {
|
||||||
|
pt = getAveragePoint(offset);
|
||||||
|
tmpPath += " L" + pt.x + " " + pt.y;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the complete current path coordinates
|
||||||
|
path.setAttribute("d", strPath + tmpPath);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ok
|
||||||
|
var randomColor = function () {
|
||||||
|
const hue = Math.floor(Math.random() * 360);
|
||||||
|
const saturation = Math.floor(50 + Math.random() * (50 + 1)) + "%";
|
||||||
|
const lightness = "75%";
|
||||||
|
return "hsl(" + hue + ", " + saturation + ", " + lightness + ")";
|
||||||
|
};
|
||||||
|
|
||||||
|
const enter = document.getElementById("enter");
|
||||||
|
enter.addEventListener("mouseup", (e) => {
|
||||||
|
console.log(cable);
|
||||||
|
window.location = cable.start.toLowerCase() + ".html";
|
||||||
|
});
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Test</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Test test test</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Sit ex laboris aliqua aliqua deserunt ex laboris pariatur labore laboris exercitation
|
||||||
|
proident qui. Anim culpa esse anim in ipsum magna qui ipsum sit sint culpa commodo
|
||||||
|
Lorem. Consectetur excepteur Lorem occaecat duis ut aliquip do qui esse id cillum qui in
|
||||||
|
sunt. Anim pariatur laboris culpa ex commodo enim id amet reprehenderit velit.
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue