JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

<div class="triangle-container">
    <div class="dev"></div>
    <div class="triangle">
        <div class="triangle-corner triangle-corner-top"></div>
        <div class="triangle-corner triangle-corner-left"></div>
        <div class="triangle-corner triangle-corner-right"></div>
    </div>
    <div class="pin-container">
        <div class="pin"></div>
    </div>
</div>

SCSS

.triangle-container {
   width: 340px;
   height: 230px;
   position: relative;
   overflow: hidden;
   margin-left: 10px;
   margin-top: 10px;
}
.triangle {
   content: "";
   position: absolute;
   width: 320px;
   height: 320px;
   background: #bbb;
   transform: rotate(45deg) skew(10deg, 10deg);
   top: 48%;
   left: 0;
   overflow: hidden;
}
.triangle-corner{
    width: 260px;
    height: 260px;
    border-radius: 130px;
    position: absolute;
    transform: skew(50deg,-50deg);
}
.triangle-corner-top{
    top: 0;
    left: 0;
    background: linear-gradient(184deg, rgba(255,0,0,1) 0%,rgba(255,255,255,0) 55%);
}
.triangle-corner-left{
    top: 0;
    right: 0;
    background: linear-gradient(-45deg, rgba(0,255,0,1) 0%,rgba(255,255,255,0) 70%);
}
.triangle-corner-right{
    bottom: 0;
    left: 0;
    background: linear-gradient(45deg, rgba(0,0,255,1) 0%,rgba(255,255,255,0) 70%);
}
.pin-container{
    width: 90%;
    height: 100%;
    margin-left: 5%;
    margin-top: 0%;
    position: relative;
}
.pin{
    background-color: white;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    left: 47%;
    top: 50%;
    margin-left: -10px;
}
.dev{
position: absolute;
}

CoffeeScript

$( ".pin" ).draggable
    drag: (e, ui) -> trianglePosition(@, ui.position)

$('.triangle-container').click (e) ->
    pinElem = $(".pin")
    parentContainer = $(@).offset()
    newPosition =
        top: (e.clientY - parentContainer.top) - 10
        left: (e.clientX - parentContainer.left) - 20

    pinElem.css trianglePosition(pinElem, newPosition)

trianglePosition = (elem, position) ->
    
    width = $('.pin-container').width()
    height = $('.pin-container').height()
    
    x = position.left + $(elem).width() / 2
    y = position.top + $(elem).height() / 2
    
    elteres = Math.abs( x - width / 2 )
    min_y = height * ( elteres / (width / 2) )
    if y < min_y then y = min_y

    if x < 0 then x = 0
    if y < 0 then y = 0
    if x > width then x = width
    if y > height then y = height
    
    position.top = y - $(elem).height() / 2
    position.left = x - $(elem).width() / 2
    
    _perc = (max, current, reverse) ->
        perc = Math.floor((100 / max) * current)
        if reverse
            perc = 100 - perc
        
            
        return perc
    
    reflex = _perc(height, y, true, false)
    strategy = _perc(width, x, true, reflex)
    puzzle = _perc(width, x, false, reflex)
    if reflex > 50
        strategy -= (reflex - 50)
        puzzle -= (reflex - 50)
    if reflex > 66
        strategy -= (reflex + puzzle) - 100
        puzzle -= (reflex + strategy) - 100
    if strategy > 50
        puzzle -= (reflex - 50) + (strategy - 50)
    else if puzzle > 50
        strategy -= (reflex - 50) + (puzzle - 50)
        
    reflex = 0 if reflex < 0
    strategy = 0 if strategy < 0
    puzzle = 0 if puzzle < 0
    
    $('.dev').html "Reflex: #{reflex}%<br />Strategy: #{strategy}%<br />Puzzle: #{puzzle}%"
    return position