1
0
Fork 0
forked from s3lph/matemat
matemat/touchkey.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>