haxball position tracker

by LimitedWard

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="field">
    <div class="fieldContainer">
        <div class="player home"></div>
    </div>
    <div class="goalLeft"></div>
    <div class="goalRight"></div>
</div>
<div class="coords"></div>
<input disabled="disabled" type="number" id="hcoord"><br>
<input disabled="disabled" type="number" id="vcoord">

CSS

.field {
    position:relative;
    z-index:1;
    height:200px;
    width:458px;
    border:2px solid black;
    /* box-sizing:border-box; */
    margin:0 30px;
    background:#92D980;
}
.field:before{
    content:'';
    position:absolute;
    width:2px;
    height:100%;
    top:0;
    left:50%;
    margin-left:-1px;
    background:black;
}
.field:after {
    content:'';
    position:absolute;
    width:100px;
    height:100px;
    top:50%;
    left:50%;
    margin-left:-52px;
    margin-top:-52px;
    border-radius:50%;
    border:2px solid black;
    z-index:1;
}
.fieldContainer {
    height:100%;
    width:100%;
}
.goalRight {
    content:'';
    border:2px solid black;
    position:absolute;
    width:20px;
    height:100px;
    right:-20px;
    top:50%;
    margin-top:-50px;
    z-index:2;
    box-sizing:border-box;
    border-radius: 0 10px 10px 0;
}
.goalRight:before {
    content:'';
    height:10px;
    width:10px;
    border-radius:50%;
    border:2px solid black;
    position:absolute;
    background:lightblue;
    left:-7px;
    top:-7px;
}
.goalRight:after {
    content:'';
    height:10px;
    width:10px;
    border-radius:50%;
    border:2px solid black;
    position:absolute;
    background:lightblue;
    left:-7px;
    bottom:-7px;
}
.goalLeft {
    content:'';
    border:2px solid black;
    position:absolute;
    width:20px;
    height:100px;
    left:-20px;
    top:50%;
    margin-top:-50px;
    z-index:2;
    box-sizing:border-box;
    border-radius:10px 0 0 10px;
}
.goalLeft:before {
    content:'';
    height:10px;
    width:10px;
    border-radius:50%;
    border:2px solid black;
    position:absolute;
    background:red;
    right:-7px;
    top:-7px;
}
.goalLeft:after {
    content:'';
    height:10px;
    width:10px;
    border-radius:50%;
    border:2px solid black;
    position:absolute;
    background:red;
    right:-7px;
    bottom:-7px;
}
.player {
    height:15px;
    width:15px;
    border-radius:50%;
    border:2px solid...

JavaScript

$('.coords').text('X:'+$('.player').position().left+', Y:'+$('.player').position().top);
$('#hcoord').val($('.player').position().left);
$('#vcoord').val($('.player').position().top);

$('.player').draggable({
    containment: "parent",
    drag: function() {
        $('.coords').text('X:'+$('.player').position().left+', Y:'+$('.player').position().top);
        $('#hcoord').val($('.player').position().left);
        $('#vcoord').val($('.player').position().top);
    },
    stop: function() {
        $('.coords').text('X:'+$('.player').position().left+', Y:'+$('.player').position().top);
        $('#hcoord').val($('.player').position().left);
        $('#vcoord').val($('.player').position().top);
    }
});

/*$(".fieldContainer").click(function(e){
   var parentOffset = $(this).offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
    $(this).children().css({top: relY, left: relX});
     $('.coords').text('X:'+$('.player').position().left+', Y:'+$('.player').position().top);
});*/