PopcornMachine's GameFlows - Boston Celtics @ Miami Heat (2023)

'; document.write(div);// set colspan in case of extra periodsdocument.getElementById('ctd').colSpan = numPeriods;var canvas = document.getElementById('gfc'); canvas.addEventListener('click', handleClick, false);var cttdiv = document.getElementById('cttdiv'); cttdiv.addEventListener('click', cttClick, false);//// canvas.addEventListener('mousemove', handleMoveEvent, false);// functions ///////////////////////////////////////////////////////function handleClick(evt) {if (window.getSelection) { if (window.getSelection().empty) { // Chrome window.getSelection().empty(); } else if (window.getSelection().removeAllRanges) { // Firefox window.getSelection().removeAllRanges(); }} else if (document.selection) { // IE? document.selection.empty();}//window.getSelection().removeAllRanges();var overlay = document.getElementById('gfcovly');var ctx=overlay.getContext("2d");var cttdiv = document.getElementById('cttdiv');var mousePos = getMousePos(canvas, evt);var segment = getSegmentAtClick(mousePos.x);var msg = "";if (evt.shiftKey) {//alert("shift key pressed " + segment.start_sc +" "+ prevSeg.start_sc);if(cttdiv.style.visibility == 'visible') {if (segment.start_sc != -1) {if ((segment.start_sc < prevSeg.start_sc) && (segment.end_sc <= prevSeg.start_sc)) {segment.end_sc = prevSeg.end_sc;//alert("move back:: "+segment.start_sc+" "+segment.end_sc);}else if ((segment.start_sc >= prevSeg.end_sc) && (segment.end_sc > prevSeg.end_sc)) {segment._sc = prevSeg.start_sc;segment.start_sc = prevSeg.start_sc;//alert("move forward:: "+segment.start_sc+" "+segment.end_sc);}else if ((segment.start_sc >= prevSeg.start_sc) && (segment.end_sc <= prevSeg.end_sc)) {//alert("move forward:: "+segment.start_sc+" "+segment.end_sc);}else {alert("this should not happen");}}}}var segInfo = getSegmentInfo(segment.start_sc,segment.end_sc);var startx = segInfo.sx;var endx = segInfo.ex;var startTime = periodTime(segInfo.sts);var endTime = periodTime(segInfo.ets);var eventsMsg = "";if (startTime == "00:00") {startTime = "12:00";}/// draw gray box on click//console.log("gray box: %2.2f %2.2f",startx,endx);//console.log("hostname: %s",location.hostname);ctx.clearRect(0,0,cWidth,cHeight);ctx.fillStyle="#666666";ctx.fillRect(startx,0,(endx-startx),cHeight);/// add loop to create event list for tipText with
var curScore = new Object();curScore[visitors] = segInfo.vsScore;curScore[homeTeam] = segInfo.hsScore;var opacity = new Object();var tt = new Object();tt[visitors] = {missFT:0, miss2:0, miss3:0, TO:0, MakeFT:0, Make2:0, Make3:0, Assist:0, DefReb:0, OffReb:0, Block:0, Steal:0, Flag:0, PF:0};tt[homeTeam] = {missFT:0, miss2:0, miss3:0, TO:0, MakeFT:0, Make2:0, Make3:0, Assist:0, DefReb:0, OffReb:0, Block:0, Steal:0, Flag:0, PF:0};var eventsMsg = "';////console.log("team totals object: %o", tt);var ttper = new Object();ttper[visitors] = {FGmake:0, FGattempt:0, FGper:0, FG3make:0, FG3attempt:0, FG3per:0, FTmake:0, FTattempt:0, FTper:0};ttper[homeTeam] = {FGmake:0, FGattempt:0, FGper:0, FG3make:0, FG3attempt:0, FG3per:0, FTmake:0, FTattempt:0, FTper:0};for (var ttperteam in ttper) {////console.log("in loop at: %s",ttperteam);ttper[ttperteam].FGmake = tt[ttperteam].Make2+tt[ttperteam].Make3;ttper[ttperteam].FGattempt = tt[ttperteam].Make2+tt[ttperteam].Make3+tt[ttperteam].miss2+tt[ttperteam].miss3;if (ttper[ttperteam].FGattempt == 0) {ttper[ttperteam].FGper = "";}else {ttper[ttperteam].FGper = (ttper[ttperteam].FGmake/ttper[ttperteam].FGattempt);ttper[ttperteam].FGper = ''+Math.round(ttper[ttperteam].FGper*100)+'%';}ttper[ttperteam].FG3make = tt[ttperteam].Make3;ttper[ttperteam].FG3attempt = tt[ttperteam].Make3+tt[ttperteam].miss3;if (ttper[ttperteam].FG3attempt == 0) {ttper[ttperteam].FG3per = "";}else {ttper[ttperteam].FG3per = (ttper[ttperteam].FG3make/ttper[ttperteam].FG3attempt);ttper[ttperteam].FG3per = ''+Math.round(ttper[ttperteam].FG3per*100)+'%';}ttper[ttperteam].FTmake = tt[ttperteam].MakeFT;ttper[ttperteam].FTattempt = tt[ttperteam].MakeFT+tt[ttperteam].missFT;if (ttper[ttperteam].FTattempt == 0) {ttper[ttperteam].FTper = "";}else {ttper[ttperteam].FTper = (ttper[ttperteam].FTmake/ttper[ttperteam].FTattempt);ttper[ttperteam].FTper = ''+Math.round(ttper[ttperteam].FTper*100)+'%';}}////console.log("team totals object: %o", tt);////console.log("team totals object: %o", ttper);////////if (endTime == "00:00") {segInfo.endp = segInfo.endp - 1;}var totalsMsg = '

Period ' + (segInfo.startp+1) + ' ' + startTime + ' → Period ' + (segInfo.endp+1) + ' ' + endTime + '

' + '

'+''+nn[visitors]+' '+(segInfo.veScore-segInfo.vsScore)+''+'
('+segInfo.vsScore+'→'+segInfo.veScore+')'+'
FG: '+ttper[visitors].FGmake+'-'+ttper[visitors].FGattempt+ttper[visitors].FGper+'
FG3: '+ttper[visitors].FG3make+'-'+ttper[visitors].FG3attempt+ttper[visitors].FG3per+'
FT: '+ttper[visitors].FTmake+'-'+ttper[visitors].FTattempt+ttper[visitors].FTper+'
Reb: '+(tt[visitors].DefReb+tt[visitors].OffReb)+' Off: '+tt[visitors].OffReb+'
Ast: '+tt[visitors].Assist+' TO: '+tt[visitors].TO+'
Stl: '+tt[visitors].Steal+' Blk: '+tt[visitors].Block+' PF: '+tt[visitors].PF+'

'+''+nn[homeTeam]+' '+(segInfo.heScore-segInfo.hsScore)+''+'
('+segInfo.hsScore+'→'+segInfo.heScore+')'+'
FG: '+ttper[homeTeam].FGmake+'-'+ttper[homeTeam].FGattempt+ttper[homeTeam].FGper+'
FG3: '+ttper[homeTeam].FG3make+'-'+ttper[homeTeam].FG3attempt+ttper[homeTeam].FG3per+'
FT: '+ttper[homeTeam].FTmake+'-'+ttper[homeTeam].FTattempt+ttper[homeTeam].FTper+'
Reb: '+(tt[homeTeam].DefReb+tt[homeTeam].OffReb)+' Off: '+tt[homeTeam].OffReb+'
Ast: '+tt[homeTeam].Assist+' TO: '+tt[homeTeam].TO+'
Stl: '+tt[homeTeam].Steal+' Blk: '+tt[homeTeam].Block+' PF: '+tt[homeTeam].PF+'

';cttdiv.style.left = mousePos.x+100;cttdiv.style.top = mousePos.y+100;var tipText = '

' +totalsMsg + eventsMsg + '

';cttdiv.innerHTML = '

' + tipText + '

';cttdiv.style.visibility = "visible";prevSeg = segment; }///////////////////////////////////////////////////function cttClick(evt) {var overlay = document.getElementById('gfcovly');var ctx=overlay.getContext("2d");ctx.clearRect(0,0,cWidth,cHeight)document.getElementById("cttdiv").innerHTML = "";document.getElementById("cttdiv").style.visibility = "hidden"; }/////////////////////////////////////////////////// function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.visibility == 'visible') e.style.visibility = 'hidden'; else e.style.visibility = 'visible'; }///////////////////////////////////////////////////function getSegmentAtClick (xpos) {var ts = (xpos/cWidth) * endTime;for (i=1; i<=sc.length-1; i++) {if ((ts > sc[i-1].ts) && (ts <= sc[i].ts)) {break;} }return {start_sc: (i-1),end_sc: i,} }///////////////////////////////////////////////////function getSegmentInfo (start_sc, end_sc) {var startPeriod = 0;var endPeriod = 0;if (sc[start_sc].ts <= 48) {startPeriod = Math.floor(sc[start_sc].ts/12);}else {startPeriod = 4 + Math.floor((sc[start_sc].ts-48)/5) ;}if (sc[end_sc].ts <= 48) {endPeriod = Math.floor(sc[end_sc].ts/12);}else {endPeriod = 4 + Math.floor((sc[end_sc].ts-48)/5) ;}return {sx: (sc[start_sc].ts/endTime)*cWidth,ex: (sc[end_sc].ts/endTime)*cWidth,sts: sc[start_sc].ts,ets: sc[end_sc].ts,vsScore: sc[start_sc].vscore,hsScore: sc[start_sc].hscore,veScore: sc[end_sc].vscore,heScore: sc[end_sc].hscore,startp: startPeriod,endp : endPeriod,}; }function periodTime(ts) {var min = 0;var sec = 0;var p = 0;if (ts <= 48) {p = Math.ceil(ts/12);min = Math.floor((p * 12) - ts);sec = Math.round(((p * 12) - ts - min) * 60);}else {ts = ts - 48;p = Math.ceil(ts/5);min = Math.floor((p * 5) - ts);sec = Math.round(((p * 5) - ts - min) * 60);}return ('0' + min).slice(-2)+':'+('0' + sec).slice(-2);}//////////// function handleMoveEvent(evt) { var ctx = canvas.getContext('2d'); var mousePos = getMousePos(canvas, evt); var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; writeMessage(canvas, message); } function writeMessage(canvas, message) { var context = canvas.getContext('2d'); context.clearRect(0, 0, 150, 25); context.fillStyle = 'blue'; context.font = '12px Arial'; context.fillText(message, 5, 15); }//////////// function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: Math.floor(evt.clientX - rect.left), y: Math.floor(evt.clientY - rect.top) }; }// end functions /////////////////////////////////////////////////// //// create canvas grid var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.lineWidth=1;// mid bar ctx.moveTo(0,cHeight/2); ctx.lineTo(canvas.width,cHeight/2);// period seperaters for (i=1; i<=(numPeriods-1); i++) { if (i <= 4) { ctx.moveTo(qWidth*i,0); ctx.lineTo(qWidth*i,cHeight); } else { ctx.moveTo((qWidth*4)+(epWidth*(i-4)),0); ctx.lineTo((qWidth*4)+(epWidth*(i-4)),cHeight); } }// draw grid ctx.stroke(); //// draw flow line ctx.beginPath(); ctx.lineWidth=2; ctx.moveTo(0,cHeight/2); var x = 0; var y = 0; for (i=1; i<=sc.length-1; i++) { x = (sc[i].ts/12) * qWidth; y = (cHeight/2) + ((sc[i].hscore-sc[i].vscore) * ((cHeight/2)/biggestLead)); sc[i].x = x; ctx.lineTo(x,y); } ctx.stroke();