JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sylvester/0.1.3/sylvester.js"></script>
<div id="stage">
    <div id="A" class="dot"></div>
    <div id="B" class="dot"></div>
    <div id="C" class="dot"></div>
    
    <div id="P" class="dot"></div>
</div>

<ul>
    <li><a id="label1" href="#" class="label">Label 1</a></li>
    <li><a id="label2" href="#" class="label">Label 2</a></li>
    <li><a id="label3" href="#" class="label">Label 3</a></li>
    <li><a id="label4" href="#" class="label">Label 4</a></li>
</ul>
<div class="content">
    <p id="label1-content">Some content about Label 1</p>
    <p id="label2-content">Some content about Label 2</p>
    <p id="label3-content">Some content about Label 3</p>
    <p id="label4-content">Some content about Label 4</p>
</div>

CSS

* {
    margin:0;
    padding:0;
}
#stage {
    background:black;
    width:200px;
    height:200px;
    position:relative;
}

.dot {
    position:absolute;
    background:red;
    width:10px;
    height:10px;
    border-radius:10px;
}

#A {
    top:50px;
    left:100px;
}

#B {
    top:158px;
    left:30px
}

#C {
    top:132px;
    left:140px;
}

#P {
    background:blue;
    top:120px;
    left:80px;
}

ul {
    list-style:none;
    float:left;
    width:200px;
}

li {
    height:50px;
    background:grey;
}

li a{
    display:block;
    text-align:center;
    line-height:50px;
}

li a:hover{
    background:white;
}

.content {
    float:left;
}

.content p{
    background:red;
    padding:50px;
    display:none;
}

JavaScript

var vectorArr= [];

$('.dot').each(function(){
    var obj = {}; 
    obj.x = parseFloat($(this).css('left'));
    obj.y = parseFloat($(this).css('top'));
    obj.id = $(this).attr('id');
    obj.vector = $V([obj.x,obj.y,1]);
    vectorArr.push(obj);
});

console.log(vectorArr);

/*var A = _.where(vectorArr,{"id":"A"})[0];
var B = _.where(vectorArr,{"id":"B"})[0];
var C = _.where(vectorArr,{"id":"C"})[0];
var P = _.where(vectorArr,{"id":"P"})[0];*/


function sameSide(p1,p2,a,b){
    var BA = b.subtract(a);
    
    var PA = p1.subtract(a);
    
    var CA = p2.subtract(a);
    
    var C1 = BA.cross(PA);
    var C2 = BA.cross(CA);
    
    if(C1.dot(C2) >0){
        return true;
    } else {
        return false;
    }
    
    delete BA;
    delete PA;
    delete CA;
    delete C1;
    delete C2;
}

/*if(sameSide(P.vector,C.vector,A.vector,B.vector) && sameSide(P.vector,A.vector,B.vector,C.vector) && sameSide(P.vector,B.vector,C.vector,A.vector)){
   console.log("Yes It is inside");
} else {
    console.log('Not inside');
}*/

function io(p,c,b,a){
  if(sameSide(p,c,a,b) && sameSide(p,a,b,c) && sameSide(p,b,c,a)){
       return true;
    } else {
       return false;
    }
}

var lock = false;
var vecArr =[];
var A,B,C,P;
var strContent;

$('ul a').mousemove(function(e){
    var str = $(this).attr('id');
    
    if(!lock){
        $('.content p').css('display','none');
        $('#'+str+'-content').css('display','block');
        strContent = $('#'+str+'-content')[0];
        $('#'+str+'-content').bind('mouseleave',function(){
            $(this).css('display','none');
            delete strContent;
            delete A;
            delete B;
            delete C;
            delete P;
            $(this).unbind('mouseleave');
        });
    }

    if(A == null){
        C = $V([e.pageX,e.pageY,1]);
        A = $V([strContent.offsetLeft,strContent.offsetTop,1]);
        B = $V([strContent.offsetLeft,strContent.offsetTop+strContent.offsetHeight,1]);
    } else...