147 lines
6.4 KiB
HTML
147 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
svg {
|
|
width: 600px;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Welcome, {{username}}</h1>
|
|
|
|
<svg id="svg" width="400" height="400">
|
|
<circle class="c" id="0" cx="12.5%" cy="12.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="1" cx="37.5%" cy="12.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="2" cx="62.5%" cy="12.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="3" cx="87.5%" cy="12.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
|
|
<circle class="c" id="4" cx="12.5%" cy="37.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="5" cx="37.5%" cy="37.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="6" cx="62.5%" cy="37.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="7" cx="87.5%" cy="37.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
|
|
<circle class="c" id="8" cx="12.5%" cy="62.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="9" cx="37.5%" cy="62.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="a" cx="62.5%" cy="62.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="b" cx="87.5%" cy="62.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
|
|
<circle class="c" id="c" cx="12.5%" cy="87.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="d" cx="37.5%" cy="87.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="e" cx="62.5%" cy="87.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
<circle class="c" id="f" cx="87.5%" cy="87.5%" r="10%" stroke="grey" stroke-width="2%" fill="white" />
|
|
</svg>
|
|
|
|
<script>
|
|
|
|
HTMLCollection.prototype.forEach = Array.prototype.forEach;
|
|
HTMLCollection.prototype.slice = Array.prototype.slice;
|
|
|
|
mouseDown = false;
|
|
currentStroke = null;
|
|
strokeId = 0;
|
|
doneMap = {};
|
|
enteredKey = '';
|
|
|
|
svg = document.getElementById('svg');
|
|
|
|
drawLine = (fromX, fromY, toX, toY) => {
|
|
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
var id = 'l-' + (strokeId++);
|
|
var idAttr = document.createAttribute('id');
|
|
var classAttr = document.createAttribute('class');
|
|
var x1attr = document.createAttribute('x1');
|
|
var y1attr = document.createAttribute('y1');
|
|
var x2attr = document.createAttribute('x2');
|
|
var y2attr = document.createAttribute('y2');
|
|
var styleAttr = document.createAttribute('style');
|
|
idAttr.value = id;
|
|
classAttr.value = 'l';
|
|
x1attr.value = fromX;
|
|
y1attr.value = fromY;
|
|
x2attr.value = toX;
|
|
y2attr.value = toY;
|
|
styleAttr.value = 'stroke: grey; stroke-width: 5%; stroke-linecap: round';
|
|
line.setAttributeNode(idAttr);
|
|
line.setAttributeNode(classAttr);
|
|
line.setAttributeNode(x1attr);
|
|
line.setAttributeNode(y1attr);
|
|
line.setAttributeNode(x2attr);
|
|
line.setAttributeNode(y2attr);
|
|
line.setAttributeNode(styleAttr);
|
|
svg.appendChild(line);
|
|
return id;
|
|
};
|
|
|
|
svg.onmousedown = (ev) => {
|
|
var svgrect = svg.getBoundingClientRect();
|
|
var minId = '';
|
|
var minDist = Infinity;
|
|
var minx = 0;
|
|
var miny = 0;
|
|
doneMap = {};
|
|
document.getElementsByClassName('c').forEach((circle) => {
|
|
var x = parseFloat(circle.getAttribute('cx'))/100.0 * svgrect.width;
|
|
var y = parseFloat(circle.getAttribute('cy'))/100.0 * svgrect.height;
|
|
var dist = Math.pow(ev.offsetX - x, 2) + Math.pow(ev.offsetY - y, 2);
|
|
if (dist < minDist) {
|
|
minDist = dist;
|
|
minId = circle.id;
|
|
minx = x;
|
|
miny = y;
|
|
}
|
|
});
|
|
var minNode = svg.getElementById(minId);
|
|
currentStroke = drawLine(minx, miny, ev.offsetX, ev.offsetY);
|
|
doneMap[minId] = 1;
|
|
enteredKey += minId;
|
|
};
|
|
|
|
svg.onmouseup = (ev) => {
|
|
currentStroke = null;
|
|
doneMap = {};
|
|
console.log(enteredKey);
|
|
enteredKey = '';
|
|
svg.getElementsByClassName('l').slice().reverse().forEach((line) => {
|
|
svg.removeChild(line);
|
|
});
|
|
};
|
|
|
|
svg.onmousemove = (ev) => {
|
|
if (currentStroke != null) {
|
|
var svgrect = svg.getBoundingClientRect();
|
|
var minId = '';
|
|
var minDist = Infinity;
|
|
var minx = 0;
|
|
var miny = 0;
|
|
document.getElementsByClassName('c').forEach((circle) => {
|
|
var x = parseFloat(circle.getAttribute('cx'))/100.0 * svgrect.width;
|
|
var y = parseFloat(circle.getAttribute('cy'))/100.0 * svgrect.height;
|
|
var dist = Math.pow(ev.offsetX - x, 2) + Math.pow(ev.offsetY - y, 2);
|
|
if (dist < minDist) {
|
|
minDist = dist;
|
|
minId = circle.id;
|
|
minx = x;
|
|
miny = y;
|
|
}
|
|
});
|
|
if (minDist < 2000 && !(minId in doneMap)) {
|
|
var line = svg.getElementById(currentStroke);
|
|
line.setAttribute('x2', minx);
|
|
line.setAttribute('y2', miny);
|
|
currentStroke = drawLine(minx, miny, ev.offsetX, ev.offsetY);
|
|
doneMap[minId] = 1;
|
|
enteredKey += minId;
|
|
}
|
|
var line = svg.getElementById(currentStroke);
|
|
line.setAttribute('x2', ev.offsetX);
|
|
line.setAttribute('y2', ev.offsetY);
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|