<!doctype html>
<html>
<head>
<title>Tracing Square Line Drawing - RJM Programming - December, 2018 ... Thanks to https://medium.com/@dear_trudence/how-to-draw-vertical-and-diagonal-lines-with-html-and-css-9e8d7d9c59b2 and https://stackoverflow.com/questions/45693587/only-part-of-border-changes-the-color and https://stackoverflow.com/questions/16795548/rotate-and-translate and https://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs</title>
<style>
td.square {
width: 100px;
height: 100px;
}
hr {
height: 4px;
border: 2px solid black;
background: linear-gradient(to right, yellow 80%, rgba(255,0,0,1) 20%);
}
hr.diagonal {
transform: rotate(45deg);
width: 144px;
}
hr.vertical {
transform: rotate(90deg) translateY(50px) translateX(50px) ;
width: 100px;
z-index: 1;
}
div.vertical {
width: 4px;
height: 100px;
z-index: 12;
border: 2px solid black;
background: linear-gradient(to left, yellow 80%, rgba(255,0,0,1) 20%);
}
hr.vertex {
height: 4px;
width: 4px;
color: purple;
background-color: purple;
background: linear-gradient(to right, purple 80%, purple 20%);
z-index: 25;
}
</style>
<script type='text/javascript'>
var tprefix='data-';
if (document.URL.indexOf('debug=') != -1) { tprefix=''; }
var isIE = (navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1));
var vertices_in_a_row=0, viar_left=[0.0,0.0], viar_top=[0.0,0.0];
var squares=[], lines=[], vertices=[];
var thisrect, hrcnt=0;
var lastdel=null, hro, v1=null, v2=null, onld=true;
function hrclick(inhro) {
//alert(inhro.id);
hro=document.getElementById(inhro.id.replace('dr','hr'));
var topdiff=0.0, leftdiff=0.0;
//alert(hro.id);
if (eval(('' + hro.style.width).replace('px','')) > 9 || inhro.outerHTML.indexOf('<div') != -1 || inhro.id != inhro.id.replace('dr','hr')) {
lastdel=hro;
//alert(hro.id + ' vs ' + inhro.id);
//inhro.style.width='0px';
//inhro.style.height='0px';
hro.style.display='none'; //visibility='hidden';
hro.style.visibility='hidden'; //visibility='hidden';
vertices_in_a_row=0;
} else if (vertices_in_a_row == 0) {
v1=inhro;
viar_left[0]=eval(('' + hro.style.left).replace('px',''));
viar_top[0]=eval(('' + hro.style.top).replace('px',''));
vertices_in_a_row=1;
} else if (vertices_in_a_row == 1) {
v2=inhro;
viar_left[1]=eval(('' + hro.style.left).replace('px',''));
leftdiff=Math.abs(viar_left[1] - viar_left[0]);
viar_top[1]=eval(('' + hro.style.top).replace('px',''));
topdiff=Math.abs(viar_top[1] - viar_top[0]);
var thiswidth=Math.sqrt(eval(topdiff * topdiff) + eval(leftdiff * leftdiff));
if (!isIE) {
//alert(document.getElementById('hr' + fhr).outerHTML + ' to ' + document.getElementById('hr' + eval(1 + eval('' + fhr))).outerHTML + ' is ' + connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical '));
document.getElementById('hrs').innerHTML+=connect(v1, v2).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical ');
hrcnt++;
} else if (Math.abs(topdiff) < 3.0 && Math.abs(leftdiff) > 3.0) {
if (viar_left[1] > viar_left[0]) {
//alert(0);
document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;position:absolute;top:' + viar_top[0] + 'px;left:' + viar_left[0] + 'px;"></hr>';
hrcnt++;
} else {
//alert(100);
document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;position:absolute;top:' + viar_top[1] + 'px;left:' + viar_left[1] + 'px;"></hr>';
hrcnt++;
}
} else if (Math.abs(topdiff) > 3.0 && Math.abs(leftdiff) < 3.0) {
if (viar_top[1] > viar_top[0]) {
document.getElementById('hrs').innerHTML+='<hr class=vertical onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(90deg) translateY(' + Math.floor(eval(('' + thiswidth - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + thiswidth - 0) / 2)) + 'px) ;position:absolute;top:' + viar_top[0] + 'px;left:' + viar_left[0] + 'px;"></hr>';
hrcnt++;
} else {
document.getElementById('hrs').innerHTML+='<hr class=vertical onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(90deg) translateY(' + Math.floor(eval(('' + thiswidth - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + thiswidth - 0) / 2)) + 'px) ;position:absolute;top:' + viar_top[1] + 'px;left:' + viar_left[1] + 'px;"></hr>';
hrcnt++;
}
} else if (Math.abs(topdiff - leftdiff) < 3.0) {
if (viar_top[1] > viar_top[0] && viar_left[1] > viar_left[0]) {
//alert(45);
document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(45deg) translateY(' + Math.floor(eval(('' + topdiff - 10) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 10) / 2)) + 'px) ;position:absolute;top:' + viar_top[0] + 'px;left:' + viar_left[0] + 'px;"></hr>';
hrcnt++;
} else if (viar_top[1] < viar_top[0] && viar_left[1] > viar_left[0]) {
//alert(-135);
document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(135deg) translateY(' + Math.floor(eval(('' + topdiff - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 0) / 2)) + 'px) ; transform-origin(' + eval(viar_left[1] - leftdiff / 2) + 'px ' + eval(viar_top[1] + topdiff / 2) + 'px);position:absolute;top:' + eval(viar_top[1] + topdiff / 2) + 'px;left:' + eval(viar_left[1] - leftdiff / 2) + 'px;"></hr>';
} else if (viar_top[1] > viar_top[0] && viar_left[1] < viar_left[0]) {
//alert(135);
document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(135deg) translateY(' + Math.floor(eval(('' + topdiff - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 0) / 2)) + 'px) ; transform-origin(' + eval(viar_left[0] - leftdiff / 2) + 'px ' + eval(viar_top[0] + topdiff / 2) + 'px);position:absolute;top:' + eval(viar_top[0] + topdiff / 2) + 'px;left:' + eval(viar_left[0] - leftdiff / 2) + 'px;"></hr>';
hrcnt++;
} else if (viar_top[1] < viar_top[0] && viar_left[1] < viar_left[0]) {
//alert(-45);
document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(45deg) translateY(' + Math.floor(eval(('' + topdiff - 10) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 10) / 2)) + 'px) ;position:absolute;top:' + viar_top[1] + 'px;left:' + viar_left[1] + 'px;"></hr>';
// getting there below
//document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(45deg) translateX(' + Math.floor(eval(('' + leftdiff - 0) / 2)) + 'px) translateY(' + Math.floor(eval(('' + topdiff - 0) / 2)) + 'px) ; transform-origin(' + eval(viar_left[1] + leftdiff / 2) + 'px ' + eval(viar_top[1] + topdiff / 2) + 'px);position:absolute;top:' + eval(viar_top[1] + topdiff / 2) + 'px;left:' + eval(viar_left[1] + leftdiff / 2) + 'px;"></hr>';
//document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="width:' + thiswidth + 'px;transform: rotate(45deg) translateY(' + Math.floor(eval(('' + topdiff - 0) / 2)) + 'px) translateX(' + Math.floor(eval(('' + leftdiff - 0) / 2)) + 'px) ; transform-origin(' + eval(viar_left[1] + leftdiff / 2) + 'px ' + eval(viar_top[0] + topdiff / 2) + 'px);position:absolute;top:' + eval(viar_top[1] + topdiff / 2) + 'px;left:' + eval(viar_left[1] + leftdiff / 2) + 'px;"></hr>';
hrcnt++;
}
//document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 1) + 'px;"></hr>';
//hrcnt++;
} else {
alert('Sorry, cannot draw this one.');
if (lastdel != null) {
lastdel.style.display='block';
}
}
//alert(leftdiff + ' ' + topdiff);
vertices_in_a_row=0;
}
//document.title='' + vertices_in_a_row;
}
function draw_hrs() {
var tds=document.getElementsByTagName('td');
var dval='', fhr=0;
for (var itds=0; itds<tds.length; itds++) {
thisrect=tds[itds].getBoundingClientRect();
squares.push(('' + thisrect.left).replace('px','') + "," + ('' + thisrect.top).replace('px','') + ";" + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))));
//alert(('' + thisrect.left) + ' ' + ('' + thisrect.top) + ' ' + ('' + thisrect.width) + ' ' + ('' + thisrect.height) + ' ' + squares[0]);
fhr=hrcnt;
vertices.push(('' + thisrect.left).replace('px','') + "," + ('' + thisrect.top).replace('px',''));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + thisrect.top + 'px;left:' + thisrect.left + 'px;"></hr>';
hrcnt++;
vertices.push(('' + thisrect.left).replace('px','') + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))) + 'px;left:' + thisrect.left + 'px;"></hr>';
hrcnt++;
vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + 'px;"></hr>';
hrcnt++;
vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + "," + ('' + thisrect.top).replace('px',''));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + thisrect.top + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + 'px;"></hr>';
hrcnt++;
//
vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + 'px;"></hr>';
hrcnt++;
vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 1) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 1) + 'px;"></hr>';
hrcnt++;
vertices.push(('' + thisrect.left).replace('px','') + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 2) + 'px;left:' + thisrect.left + 'px;"></hr>';
hrcnt++;
vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + "," + ('' + thisrect.top).replace('px',''));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + thisrect.top + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + 'px;"></hr>';
hrcnt++;
vertices.push(eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + "," + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 1));
document.getElementById('hrs').innerHTML+='<hr class=vertex onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px','')) / 1) + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px','')) / 2) + 'px;"></hr>';
hrcnt++;
if (eval(itds % 5) == 0) {
dval='';
//document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical style="' + dval + 'position:absolute;top:' + thisrect.top + 'px;left:' + thisrect.left + 'px;"></hr>';
if (!isIE) {
//alert(document.getElementById('hr' + fhr).outerHTML + ' to ' + document.getElementById('hr' + eval(1 + eval('' + fhr))).outerHTML + ' is ' + connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical '));
document.getElementById('hrs').innerHTML+=connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical ');
} else {
document.getElementById('hrs').innerHTML+='<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical style="' + dval + 'position:absolute;top:' + eval(6 + eval('' + thisrect.top)) + 'px;left:' + eval(-2 + eval('' + thisrect.left)) + 'px;"></div>';
}
hrcnt++;
}
if (itds < 5) {
dval='';
document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + dval + 'width:100px;position:absolute;top:' + thisrect.top + 'px;left:' + thisrect.left + 'px;"></hr>';
hrcnt++;
}
//document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical style="' + dval + 'position:absolute;top:' + thisrect.top + 'px;left:' + eval(eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + 'px;"></hr>';
dval='';
if (!isIE) {
//alert(document.getElementById('hr' + fhr).outerHTML + ' to ' + document.getElementById('hr' + eval(1 + eval('' + fhr))).outerHTML + ' is ' + connect(document.getElementById('hr' + fhr), document.getElementById('hr' + eval(1 + eval('' + fhr)))).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical '));
document.getElementById('hrs').innerHTML+=connect(document.getElementById('hr' + eval(3 + eval('' + fhr))), document.getElementById('hr' + eval(2 + eval('' + fhr)))).replace('<div ','<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical ');
} else {
document.getElementById('hrs').innerHTML+='<div onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' class=vertical style="' + dval + 'position:absolute;top:' + eval(6 + eval('' + thisrect.top)) + 'px;left:' + eval(-2 + eval(('' + thisrect.left).replace('px','')) + eval(('' + thisrect.width).replace('px',''))) + 'px;"></div>';
}
hrcnt++;
dval='';
document.getElementById('hrs').innerHTML+='<hr onclick="hrclick(this);" ' + tprefix + 'title=hr' + hrcnt + ' id=hr' + hrcnt + ' style="' + dval + 'width:100px;position:absolute;top:' + eval(eval(('' + thisrect.top).replace('px','')) + eval(('' + thisrect.height).replace('px',''))) + 'px;left:' + thisrect.left + 'px;"></hr>';
hrcnt++;
dval='';
}
onld=false;
}
function getOffset(el) { // thanks to https://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs
var rect = el.getBoundingClientRect();
return {
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
width: rect.width || el.offsetWidth,
height: rect.height || el.offsetHeight
};
}
function connect(div1, div2) { //, color, thickness) { // draw a line connecting elements
var thickness = 0;
var ioff=-4;
if (!onld && 4 == 5) { ioff=0; }
var off1 = getOffset(div1);
var off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
var htmlLine = "<div style='padding:0px; margin:0px; height:4px; position:absolute; left:" + eval(ioff + cx) + "px; top:" + eval(ioff + cy) + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
//
// alert(htmlLine);
return htmlLine; //document.body.innerHTML += htmlLine;
}
</script>
</head>
<body onload=' draw_hrs(); '>
<h1>Tracing Square Line Drawing or <a style=font-size:8px;text-decoration:underline;cursor:pointer; onclick="location.href=document.URL.split('#')[0].split('?')[0].replace('.html','.htm');">Chinese Brain Twisters</a></h1>
<h3>RJM Programming - December, 2018</h3>
<h4>Hint: Click/touch a match then click/touch two vertices to reposition that match</h4>
<table>
<tbody>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
<tr><td class=square></td><td class=square></td><td class=square></td><td class=square></td><td class=square></td></tr>
</tbody>
</table>
<div id=hrs></div>
</body>
</html>