JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
	<link href="http://fonts.googleapis.com/css?family=Oswald&subset=latin,latin-ext" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="video-frame">
    <div class="video"></div>
    <div class="video-overlay"></div>
    <canvas id="canvas"></canvas>
  </div>
  <div class="pool"></div>
  <div class="clear"></div>
  <input type="button" class="canvas-switch" status="1" value="Hide canvas" style="width:110px;float:left;">
  <input type="button" id="clear-canvas" value="Clear Canvas" style="width:110px;float:left;">
  <input type="button" id="clear-points" value="Clear Points" style="width:110px;float:left;">
  <input type="text" id="scope" style="width:80px;float:left;">
  <input type="text" id="cvalue" style="width:80px;float:left;">
<input type="text" id="arraydistances" value="[]" style="width:180px;float:left;">
<input type="text" id="arrayorder" style="width:80px;float:left;">

</body>

CSS

.video-frame {
  width: 400px;
  height: 240px;
  border: 1px solid black;
  background-color: #aeaeae;
  display: block;
  z-index: -2;
  float: left;
}

.video {
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
}

.video-overlay {
  width: 400px;
  height: 240px;
  position: relative;
  top: -240px;
  left: 0px;
  z-index: 0;
}

#canvas {
  background-color: #eeeeee;
  opacity: 0.5;
  position: relative;
  top: -480px;
  left: 0px;
  z-index: 1;
}

.pool {
  float: left;
  width: 60px;
  height: 240px;
  border: 1px solid black;
}

.clear {
  clear: both;
}

.point {
  width: 20px;
  height: 20px;
  border-radius: 15px;

  text-align: center;
  cursor: pointer;
  line-height: 20px;
  font-size: 14px;
  font-weight: bold;
  font-family: 'Oswald', 'Helvetica', 'Arial', sans-serif;
  color: #FFFFFF;
  text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  background: radial-gradient(60% 70%, #ff0000, #e30000, #000000);
}

JavaScript

$('.canvas-switch').click(function() {
  var status = $(this).attr('status');
  if (status == 1) {
    $('canvas#canvas').css('visibility', 'hidden');
    $(this).attr('status', '2');
    $(this).val('Display canvas');
  } else if (status == 2) {
    $('canvas#canvas').css('visibility', 'visible');
    $(this).attr('status', '1');
    $(this).val('Hide canvas');
  }
});

$('#clear-canvas').click(function() {
  $('input#scope').val('');
  $('input#cvalue').val('');
});

$('#clear-points').click(function() {
  $('div.video-overlay').html('');
  $('div.pool').html('');
  $('input#arraydistances').val('');
	$('input#arrayorder').val('');
});

$(document).on('dblclick', 'div.pool div.point', function() {
  //$('div.video-overlay').find('div.point').last().remove();
  //$('div.video-overlay').find('div.point').last().remove();
  var thisnumber = $(this).text();
  $('div.video-overlay').find('div.point').each(function() {
    if (Number($(this).text()) >= thisnumber) {
      $(this).remove();
    }
  });
  $('div.pool').find('.point').each(function() {
    if (Number($(this).text()) >= thisnumber) {
      $(this).remove();
    }
  });
	$('#arraydistances').val(JSON.stringify(autocalculatealldistances()));
	$('#arrayorder').val(orderpositions());
	var arraydistances = JSON.parse($('#arraydistances').val());
	if ($('div.video-overlay').find('div.point').length < 1) {
		//var arraydistances = [];
		$('#arraydistances').val('');
		$('#arrayorder').val('');
	}
});

function calculatedistance(x, y, number) {
	var arraydistances = JSON.parse($('#arraydistances').val());
  var thescope = Number($('input#scope').val());
  var thecvalue = Number($('input#cvalue').val());
  // ax + by + c = 0
  // b is always 1 because my formula is:
  // by = ax + c:
  // 1y = scope.x + c
  // y = scope.x + c
  var distance;

  if (thescope && thecvalue) {
    var b = 1;
    var distance = (Math.abs((thescope * x) - y + thecvalue)) / (Math.sqrt((Math.pow(thescope, 2) + 1)));
		
    var...