<!doctype html>
<html>
<head>
<title>Golf Game - RJM Programming - August, 2017 ... Inspired by, thanks, Example: Animating Along a Curved Path - YUI Library at https://yuilibrary.com/yui/docs/anim/curve.html</title>
<style>

body {
background-color: #AFFC58;
}

.example {
position: relative;
padding: 0;
margin: 0;
width: 100%;
}

.example div, .example p, .example span{
padding: 0;
margin: 0;
}

#results {
margin-left: 85px;
}

table {
background-color: yellow;
}

#btn-animate {
font-size: 12px;
}

#mygraphiccontainer {
width: 650px;
height: 400px;
}

.example #demo {
position: absolute;
left: 92px;
top: 103px;
background-color: #ffffff;
text-align: center;
line-height: 1.5em;
border: solid 1px #cc0000;
border-radius: 25px;
-moz-box-shadow: 3px 3px 7px rgba(0,0,0,0.4);
-webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.4);
width: 10px;
height: 10px;
}

.dot {
position: absolute;
color: #396491;
font-size: 20px;
height: 0;
line-height: 12px;
opacity: 0.8;
width: 0;
cursor: move;
}

.dot .point {
background-color: #000;
position: absolute;
left: -3px;
top: -3px;
width: 6px;
height: 6px;
border-radius: 3px;
font-size: 0px;
}

.number-label {
position: absolute;
top: -1em;
left: -0.9em;
width: 1em;
height: 1em;
line-height: 1em;
}

/* Gives the points a larger target area to drag */
.dot .fat-finger {
position: absolute;
top: -30px; /* minus half the fat-finger height */
left: -30px;
width: 60px;
height: 60px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
background-color: #abc;
opacity: 0.3;
filter: alpha (opacity = 30);
}

#dot-0 .fat-finger {
top: -25px !important; /* minus half the fat-finger height */
left: -25px !important;
width: 50px !important;
height: 50px !important;
background-color: #f80;
opacity: 0.4;
}

#dot-3 .fat-finger {
background-color: #8DAA16;
opacity: 0.4;
top: -100px !important; /* minus half the fat-finger height */
left: -100px !important;
width: 200px !important;
height: 200px !important;
-moz-border-radius: 300px !important;
-webkit-border-radius: 300px !important;
border-radius: 300px !important;
}

#dot-0, #demo {
top: 103px;
left: 92px;
}

#dot-1 {
top: 317px;
left: 147px;
}

#dot-2 {
top: 139px;
left: 432px;
}

#dot-3 {
left: 508px;
top: 398px;
}

#info {
position: absolute;
width: 450px;
height: 15em;
right: 1em;
top: 1em;
}

code span {
color: #CC3300;
}

.point {
font-size: 24px;
left: 5px;
position: absolute;
top: -5px;
}

#blurb {
display:none;
}

</style>

<meta name="viewport" content="width=960" id="meta-viewport">
<script>

var shots = [ 0,0, 0,0, 0,0, 0,0 ];
var clicked = false;
var tablestr = "<table border=2><tbody><tr><th colspan=3 id='score'>Score: 0/0 Golf Holes</th><tr><th>At ...</th><th>Distance Hit ...</th><th>Par 3 <br>Golf Hole Score</th></tr><tr><th>Tee</th><th></th><th></th></tr><tr><th></th><th id='dist1'></th><th id='score1'></th></tr><tr><th>First Putt/<br>Fairway?</th><th></th><th></th></tr><tr><th></th><th id='dist2'></th><th id='score2'></th></tr><th>Last Putt/<br>Chip In?</th><th></th><th></th></tr><tr><th></th><th id='dist3'></th><th id='score3'></th></tr><tr><th>In Hole</th><th></th><th></th></tr></tbody></table>";
var score = 0.0, goes = 0;

if (screen.width < 768) {
document.getElementById('meta-viewport').setAttribute('content', 'width=768');
}
</script>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="https://yui-s.yahooapis.com/3.9.0/build/cssgrids/cssgrids-min.css">


<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="X-XRDS-Location" content="/xrds.xml">
<link rel="shortcut icon" type="image/png" href="/img/favicon.png">

<script>
var YUI_config={"filter":"min","maxURLLength":1024,"root":"3.18.1/","groups":{"site":{"combine":true,"comboBase":"/combo/js?","root":"","modules":{"hoverable":{"path":"hoverable-min.js","requires":["event-hover","node-base","node-event-delegate"]},"search":{"path":"search-min.js","requires":["autocomplete","autocomplete-highlighters","node-pluginhost"]},"api-filter":{"path":"apidocs/api-filter-min.js","requires":["autocomplete-base","autocomplete-highlighters","autocomplete-sources"]},"api-list":{"path":"apidocs/api-list-min.js","requires":["api-filter","api-search","event-key","node-focusmanager","tabview"]},"api-search":{"path":"apidocs/api-search-min.js","requires":["autocomplete-base","autocomplete-highlighters","autocomplete-sources","escape"]}}}}};
if (location.protocol.indexOf('https') > -1) {
YUI_config.comboBase = 'https://yui-s.yahooapis.com/combo?';
YUI_config.combine = true;
}
</script>

<script src="https://yui-s.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>



</head>
<body>
<div class="example">

<div id="mygraphiccontainer"></div> 
<div id="info">
<h1>Par 3 Golf Game</h1>
<h3>RJM Programming - August, 2017 ... thanks to <a target=_blank title='Great help, thanks' href='https://yuilibrary.com/yui/docs/anim/curve.html'>YUI Library: Animating Along a Curved Path</a></h3>
<h4>Drag adjust Bunker and/or Lake (and/or, perhaps, Tee and/or Green) positions to ...</h4>
<button onclick="clicked=true;" id="btn-animate" class='yui3-button'>Hit off the Tee so that Each Shot is Shorter than Previous (to maximize scoring)</button><br><br>
<div id="results"><table border=2><tbody><tr><th colspan=3 id='score'>Score: 0/0 Holes</th><tr><th>At ...</th><th>Distance Hit ...</th><th>Par 3 <br>Golf Hole Score</th></tr><tr><th>Tee</th><th></th><th></th></tr><tr><th></th><th id='dist1'></th><th id='score1'></th></tr><tr><th>First Putt/<br>Fairway?</th><th></th><th></th></tr><tr><th></th><th id='dist2'></th><th id='score2'></th></tr><th>Last Putt/<br>Chip In?</th><th></th><th></th></tr><tr><th></th><th id='dist3'></th><th id='score3'></th></tr><tr><th>In Hole</th><th></th><th></th></tr></tbody></table></div>
<div id="blurb">
<p>To see anim along a path, click the button above, or drag point 0, 1, 2, or 3.</p>
<p>The X and Y of point 0 is <code>[<span class="arr0">92,103</span>]</code></p>
<p>The X and Y of 1, 2, and 3, are the sub-arrays in array value of "curve:" in the anim.set()</p>
<p><code>anim.set('to', {curve: [
[<span class="arr1">147,317</span>],
[<span class="arr2">532,179</span>],
[<span class="arr3">538,288</span>] ]});</code></p>
</div>
</div>
<div id="dot-0" class="dot zero">
<div class="point"></div>
<div class="fat-finger" title="Drag to change start point"></div> 
<div class="number-label">Tee</div>
</div>
<div id="dot-1" class="dot one">
<div class="point"></div>
<div class="fat-finger" title="Drag to change path"></div>
<div class="number-label">Bunker</div>
</div>
<div id="dot-2" class="dot two">
<div class="point"></div>
<div class="fat-finger" title="Drag to change path"></div>
<div class="number-label">Lake</div>
</div>
<div id="dot-3" class="dot three">
<div class="point"></div>
<div class="fat-finger" title="Drag to change end point"></div>
<div class="number-label">Green</div>
</div>
<div id="demo"> </div>
</div>
<script>

YUI().use('anim', 'dd-drag', 'graphics', 'cssbutton', function(Y){

var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"}),
origin = Y.one('.example'), // The XY values for the animation are based on the upper-left corner of this element
demoA = Y.one('#demo'), // The animated element
dotList = Y.all('.dot');
// Draggable points
dot0 = Y.one('#dot-0'), dot1 = Y.one('#dot-1'), dot2 = Y.one('#dot-2'), dot3 = Y.one('#dot-3'),

// Array of XY arrays of draggable points
arrDot = [
[parseInt(dotList.item(0).getStyle('left'), 10), parseInt(dotList.item(0).getStyle('top'), 10)],
[parseInt(dotList.item(1).getStyle('left'), 10), parseInt(dotList.item(1).getStyle('top'), 10)],
[parseInt(dotList.item(2).getStyle('left'), 10), parseInt(dotList.item(2).getStyle('top'), 10)],
[parseInt(dotList.item(3).getStyle('left'), 10), parseInt(dotList.item(3).getStyle('top'), 10)]
],

// Make points draggable
dd0 = new Y.DD.Drag({
node: '#dot-0'
}),
dd1 = new Y.DD.Drag({
node: '#dot-1'
}),
dd2 = new Y.DD.Drag({
node: '#dot-2'
}),
dd3 = new Y.DD.Drag({
node: '#dot-3'
});

// Puts current XY values of points into displayed code snippet
var updateCodeSnippetValues = function(){
Y.one('.arr0').setHTML(arrDot[0][0] + ',' + arrDot[0][1]); // Start
Y.one('.arr1').setHTML(arrDot[1][0] + ',' + arrDot[1][1]); // Control point 1
Y.one('.arr2').setHTML(arrDot[2][0] + ',' + arrDot[2][1]); // Control point 2
Y.one('.arr3').setHTML(arrDot[3][0] + ',' + arrDot[3][1]); // End
}

/**
* Stops the animation
* Updates the array of point XY values
* Updates the curve preview
* Updates displayed XY point values in code snippet
*/
var dotDragHandler = function(dot){
Y.Anim.stop();
arrDot[dotList.indexOf(dot)] = [parseInt(dot.getStyle('left'), 10), parseInt(dot.getStyle('top'), 10)];
drawCurve();
updateCodeSnippetValues();
}

dd0.on('drag:drag', function(e){
dotDragHandler(this.get('dragNode'));
});
dd1.on('drag:drag', function(e){
dotDragHandler(this.get('dragNode'));
});
dd2.on('drag:drag', function(e){
dotDragHandler(this.get('dragNode'));
});
dd3.on('drag:drag', function(e){
dotDragHandler(this.get('dragNode'));
});

// button handler
Y.one('#btn-animate').on('click', function(){
Y.Anim.stop();
setTimeout(startAnim, 500);
});

Y.all('.dot').on('mouseup', function(e){
setTimeout(startAnim, 500);
});

// Create the animation instance
var anim = new Y.Anim({
node: demoA,
duration: 1.5,
easing: Y.Easing.easeOut
});

/**
* Sets the anim curve values with the XY values from the arrDot array
* Adds the origin offset values because anim works off page coordinates
*/
var startAnim = function(e){
var oX = origin.getX();
var oY = origin.getY();
var scores = [], dists = [], ii, jj, last_dist = -9.0;

// Reset the animated element to the start position.
// This is needed for running the animation multiple times
demoA.setStyles({'left':arrDot[0][0], 'top':arrDot[0][1]});

shots = [ (arrDot[0][0] + oX), (arrDot[0][1]) + oY, (arrDot[1][0] + oX), (arrDot[1][1] + oY), (arrDot[2][0] + oX), (arrDot[2][1] + oY), (arrDot[3][0] + oX), (arrDot[3][1] + oY) ];
if (clicked) {
for (ii=0; ii<3; ii++) {
jj = eval(1 + ii);
dists.push(eval(0.2 * Math.pow(((shots[ii * 2 + 0] - shots[jj * 2 + 0]) * (shots[ii * 2 + 0] - shots[jj * 2 + 0])) + ((shots[ii * 2 + 1] - shots[jj * 2 + 1]) * (shots[ii * 2 + 1] - shots[jj * 2 + 1])), 0.5)));
if (dists[eval(-1 + dists.length)] < last_dist || last_dist < 0.0) {
scores.push(dists[eval(-1 + dists.length)]);
last_dist = dists[eval(-1 + dists.length)];
score+=Math.floor(dists[eval(-1 + dists.length)]);
} else {
scores.push(0.0);
last_dist = dists[eval(-1 + dists.length)];
}
}
goes++;
document.getElementById('results').innerHTML = "<table border=2><tbody><tr><th colspan=3 id='score'>Score: " + score + "/" + goes + " Golf Holes</th><tr><th>At ...</th><th>Distance Hit ...</th><th>Par 3 <br>Golf Hole Score</th></tr><tr><th>Tee</th><th></th><th></th></tr><tr><th></th><th id='dist1'>" + dists[0] + "</th><th id='score1'>" + scores[0] + "</th></tr><tr><th>First Putt/<br>Fairway?</th><th></th><th></th></tr><tr><th></th><th id='dist2'>" + dists[1] + "</th><th id='score2'>" + scores[1] + "</th></tr><th>Last Putt/<br>Chip In?</th><th></th><th></th></tr><tr><th></th><th id='dist3'>" + dists[2] + "</th><th id='score3'>" + scores[2] + "</th></tr><tr><th>In Hole</th><th></th><th></th></tr></tbody></table>";
clicked = false;
} else {
document.getElementById('results').innerHTML = tablestr.replace('0/0','' + score + '/' + goes);
}

anim.set('to', {
curve: [ [(arrDot[1][0] + oX), (arrDot[1][1] + oY)], [ (arrDot[2][0] + oX), (arrDot[2][1] + oY) ], [ (arrDot[3][0] + oX), (arrDot[3][1] + oY) ] ]
});
anim.run();
};

// Adds a YUI Graphics path shape to the Graphics instance mygraphic
var animPath = mygraphic.addShape({
type: "path",
stroke: {
weight: 4,
color: "#aabbcc"
}
});

// Draw a preview curve with the Graphics animPath shape to match the Anim curve
var drawCurve = function(){
animPath.clear();
animPath.moveTo(arrDot[0][0],arrDot[0][1]);
animPath.curveTo(arrDot[1][0],arrDot[1][1], arrDot[2][0],arrDot[2][1], arrDot[3][0],arrDot[3][1]);
animPath.end();
}

drawCurve(); // Initial drawing of the preview curve
updateCodeSnippetValues(); // Initial setting of code snippet XY values

});

</script>

</body>
</html>