From 63779cfdf184fb6b56073ec6f44d1b25c6d9f961 Mon Sep 17 00:00:00 2001 From: BuildTools Date: Tue, 31 May 2016 06:43:38 -0400 Subject: [PATCH 1/2] Javascript Cleanup/Button Centering Moved javascript to it's own separate file, created custom.css file to center the button on the screen. --- buttonInteractive.js | 374 +++++++++++++++++++++++++++++++++++++++++ custom.css | 11 ++ index.html | 387 +------------------------------------------ 3 files changed, 392 insertions(+), 380 deletions(-) create mode 100644 buttonInteractive.js create mode 100644 custom.css diff --git a/buttonInteractive.js b/buttonInteractive.js new file mode 100644 index 0000000..0c127c1 --- /dev/null +++ b/buttonInteractive.js @@ -0,0 +1,374 @@ +//Canvas Variables +var canvas = document.getElementById('buttonCanvas'); +var canvasContext = canvas.getBoundingClientRect(); +var diamondImage = new Image(); +diamondImage.src = "diamond.png"; +var grayDiamondImage = new Image(); +grayDiamondImage.src = "grayDiamond.png"; + +//From Server Variables +var minimumTime = 55; +var diamondIsAvailable = true; +var participants = 0; +var fullPresserProbabilities; +var todaysAggregatePresserProbabilities = []; +var preseserProbabilitiesAdjusted + +//Time Control Variables +var fps = 30; +var dateObject = new Date(); +var defaultTime = dateObject.getTime(); +var buttonAdjustment = 0; +var buttonTime = 0; +var buttonTimeCountingDown = 60000 - buttonTime; +var buttonHasBeenReset = false; + +//Button Press Variables +var buttonPress = false; +var mouseIsHeld = false; +var outerRingRedEffect = 234; +var outerRingGeneralEffect = 234; +var currentSecond = 60; +var presserMillisecondRandomness = 0; + +//Mouse Position Calculator +function calculateMousePos(evt){ + var rect = canvas.getBoundingClientRect(); + var root = document.documentElement; + var mouseX = evt.clientX - rect.left - root.scrollLeft; + var mouseY = evt.clientY - rect.top - root.scrollTop; + return { + x:mouseX, + y:mouseY + } +} + + +//Main Loop +window.onload = function(){ + + + //Canvas Initialization + canvas = document.getElementById('buttonCanvas'); + canvasContext = canvas.getContext('2d'); + canvasContext.fillStyle = "black"; + + //Inner Main Loop + setInterval(function() { + main(); + },1000/fps); + + //Button Event Listener - MouseDown + canvas.addEventListener("mousedown",function(evt){ + var mousePos = calculateMousePos(evt); + mouseIsHeld = true; + if (mousePos.x > 45 && mousePos.y > 75 && mousePos.x < 170+45 && mousePos.y < 40+75) { + buttonPress = true; + } + + }); + + //Button Event Listener - MouseUp + canvas.addEventListener("mouseup", function(evt){ + + //Mouse Position On Button? + var mousePos = calculateMousePos(evt); + if (mousePos.x > 45 && mousePos.y > 75 && mousePos.x < 170+45 && mousePos.y < 40+75 && buttonPress == true) { + //Button Is Pressed + pressNumber = buttonTimeCountingDown + resetButton(); + + } + //Reset Button Reaction + mouseIsHeld = false; + buttonPress = false; + }); + + //Button Event Listener - Mouse Off Screen + canvas.addEventListener("mouseleave",function(evt){ + + //Handles bug where button remains pressed + //if mouse holds button and leaves element + buttonPress = false; + buttonHold = false; + }); +} + +//Does Everything +function main(){ + + //Draws Non-timed Elements + drawBackground(); + drawTitle(); + drawParticipants(); + + //Time Control Methods + setButtonTimes(); + presserSimulator(); + minimumTimeHandler(); + + + //Draws Timed Elements + drawCounter(); //Counter is seen + drawButton(); //Button is pressed + drawPieChart(); //Pie chart is updated + + + //Draws Remaining Non-timed Elements + drawDiamond(); + +} +function presserSimulator(args) { + + if (buttonTimeCountingDown <= (currentSecond+presserMillisecondRandomness)*1000) { + currentSecond--; + console.log("PING", currentSecond); + if(Math.random() <= 20.0/100.0) { + console.log("PRESS!"); + resetButton(); + } + presserMillisecondRandomness = Math.random()*.9; + } +} +//Sets Button Times +function setButtonTimes() { + var nowTimeObject = new Date; + buttonTime = nowTimeObject.getTime() - defaultTime - buttonAdjustment; + buttonTimeCountingDown = 60000 - buttonTime; +} + + +//Resets Button if it reaches the Minimum Time Value +function minimumTimeHandler(a) { + if(buttonTimeCountingDown < (minimumTime*1000)){ + resetButton(); + } +} + + +//Draws Background +function drawBackground(){ + canvasContext.fillStyle = "#FAFAFA"; + canvasContext.fillRect(0,0,canvas.width, canvas.height); +} + + +//Draws "the button" to the left +function drawTitle(){ + + //Adjustment for text + var Xadj = -1; + var Yadj = 20; + + //Draws Text + canvasContext.fillStyle = "black"; + canvasContext.font = "25px georgia"; + canvasContext.fillText("the button",25+Xadj,25+Yadj); + +} + + +//Draws the Pressable Button +function drawButton(){ + + //Outer Button + + canvasContext.fillStyle = "rgb(234,234,234)"; + fillRoundRect(canvasContext,35,65,190,60,3); + + //Press Detector + var buttonDepth = 2; + if (buttonPress == true) { + buttonDepth = 0; + }else if(buttonPress == false){ + buttonDepth = 2; + }else{ + console.log("DRAWBUTTON ERROR: buttonPress is not True or False"); + } + + //Inner Button + canvasContext.fillStyle = "#1A7FB5"; + fillRoundRect(canvasContext,35+10,65+10,190-20,60-20,3); + canvasContext.fillStyle = "#2DAAEB"; + fillRoundRect(canvasContext,35+10,65+10-buttonDepth,190-20,60-20-buttonDepth,3); + +} + + +//Draws the Pie Chart Timer that ticks down +function drawPieChart(){ + + //Center coordinate = 295,100 + //Outer Circle Radius = 50 + + if (diamondIsAvailable) { + + //Creates Cyan Flash Effect + if (outerRingRedEffect > 234) { + outerRingRedEffect = 234; + }else if (outerRingRedEffect < 234) { + outerRingRedEffect += 10; + } + canvasContext.fillStyle = "rgb("+outerRingRedEffect+",234,234)"; + + }else{ + if (outerRingGeneralEffect > 234) { + outerRingGeneralEffect = 234 + }else if (outerRingGeneralEffect < 234) { + outerRingGeneralEffect += 5; + } + canvasContext.fillStyle = "rgb("+outerRingGeneralEffect+","+outerRingGeneralEffect+","+outerRingGeneralEffect+")"; + } + + + canvasContext.beginPath(); + canvasContext.arc(292.5,100-2,50,0,Math.PI*2,true); + canvasContext.fill(); + + //Inner Circle Colouring + if (diamondIsAvailable) { + canvasContext.fillStyle = "#FFFFFF"; + }else if (diamondIsAvailable == false) { + canvasContext.fillStyle = "#C8C8C8"; + } + + //Inner Circle Radius = 35 + canvasContext.beginPath(); + canvasContext.arc(292.5,100-2,35,0,Math.PI*2,true); + canvasContext.fill(); + + //Pie Countdown Colouring + if (diamondIsAvailable) { + canvasContext.fillStyle = "#00EEEE"; + }else if (diamondIsAvailable == false) { + canvasContext.fillStyle = "#6A6A6A"; + } + + //Pie Drawing + canvasContext.beginPath(); + canvasContext.moveTo(292.5,100-2); + canvasContext.lineTo(292.5,65-2); + canvasContext.arc(292.5,100-2,35, 3*Math.PI/2, 3/2*Math.PI + 2*Math.PI*((buttonTime)/60000),true); + canvasContext.lineTo(292.5,100-2); + canvasContext.fill(); +} + +//Draws the text based counter to the right of the circle +function drawCounter(){ + + //Outer Box + canvasContext.fillStyle = "#EAEAEA"; + fillRoundRect(canvasContext,360,65,190,60,3); + + //Inner Boxes with numbers + canvasContext.font = ("bold 24px Verdana"); + canvasContext.fillStyle = "black"; + + //X and Y adjustment for text + var Xadj = 1.5; + var Yadj = 29.5; + + //Time Setting + var tenSecondDigit = Math.floor(buttonTimeCountingDown/10000); + var oneSecondDigit = Math.floor((buttonTimeCountingDown%10000)/1000); + var tenthSecondDigit = Math.floor((buttonTimeCountingDown%1000)/100); + var hundrethSecondDigit = Math.floor((buttonTimeCountingDown%100)/10); + + //10 second display + canvasContext.fillStyle = "white"; + fillRoundRect(canvasContext,410,75,20,40,3); + canvasContext.fillStyle = "black"; + canvasContext.fillText(tenSecondDigit.toString(),410+Xadj,75+Yadj); + + //1 second display + canvasContext.fillStyle = "white"; + fillRoundRect(canvasContext,435,75,20,40,3); + canvasContext.fillStyle = "black"; + canvasContext.fillText(oneSecondDigit.toString(),435+Xadj,75+Yadj); + + //0.1 second display + canvasContext.fillStyle = "white"; + fillRoundRect(canvasContext,460,75,20,40,3); + canvasContext.fillStyle = "grey"; + canvasContext.fillText(tenthSecondDigit.toString(),460+Xadj,75+Yadj); + + //0.01 second display + canvasContext.fillStyle = "white"; + fillRoundRect(canvasContext,485,75,20,40,3); + canvasContext.fillStyle = "grey"; + canvasContext.fillText(hundrethSecondDigit.toString(),485+Xadj,75+Yadj); +} + + +//Draws the Participants count to the right +function drawParticipants(){ + + //Participants + canvasContext.fillStyle = "black" + canvasContext.font = "13px Georgia"; + canvasContext.textAlign = "right"; + canvasContext.fillText(buttonTime + " participants", 435+110,35+15); + canvasContext.textAlign = "left"; + +} + + + +//Draws the diamond in the center of the screen +function drawDiamond() { + + //Gray diamond slot, or diamond itself? + if (diamondIsAvailable) { + canvasContext.drawImage(diamondImage, 292.5-17.5,100-21); + }else if (diamondIsAvailable == false) { + canvasContext.drawImage(grayDiamondImage, 292.5-17.5,100-21); + }else{ + console.log("DRAW DIAMOND ERROR: Impossible"); + } + +} + + + +//Function made to round corners of rectangles +function fillRoundRect(ctx, x, y, width, height, radius) { + if (typeof radius === 'undefined') { + radius = 5; + } + if (typeof radius === 'number') { + radius = {tl: radius, tr: radius, br: radius, bl: radius}; + } else { + var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0}; + for (var side in defaultRadius) { + radius[side] = radius[side] || defaultRadius[side]; + } + } + ctx.beginPath(); + ctx.moveTo(x + radius.tl, y); + ctx.lineTo(x + width - radius.tr, y); + ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr); + ctx.lineTo(x + width, y + height - radius.br); + ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height); + ctx.lineTo(x + radius.bl, y + height);9 + ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl); + ctx.lineTo(x, y + radius.tl); + ctx.quadraticCurveTo(x, y, x + radius.tl, y); + ctx.closePath(); + + ctx.fill(); + +} + + +//Resets the Button +function resetButton() { + buttonAdjustment += buttonTime; + currentSecond = 60; + buttonHasBeenReset = true; + if (diamondIsAvailable) { + outerRingRedEffect = 0; + }else{ + outerRingGeneralEffect = 150; + } + +} diff --git a/custom.css b/custom.css new file mode 100644 index 0000000..eac6c61 --- /dev/null +++ b/custom.css @@ -0,0 +1,11 @@ +#buttonDiv { + +} + +canvas { + padding: 10; + margin-left: auto; + margin-right: auto; + display: block; + width: 570 +} \ No newline at end of file diff --git a/index.html b/index.html index 321f88b..d82ce17 100644 --- a/index.html +++ b/index.html @@ -2,384 +2,11 @@ - - - + + + +
+ + +
\ No newline at end of file -- 2.30.2 From 533b4a91098946e733df1e473ed8bfac0adc41eb Mon Sep 17 00:00:00 2001 From: AliLaptop Date: Wed, 1 Jun 2016 19:12:45 -0400 Subject: [PATCH 2/2] Background adjustment Implemented dropshadow, changed the background to stone --- custom.css | 20 +++++++++++++++----- stoneBrick.png | Bin 0 -> 4784 bytes 2 files changed, 15 insertions(+), 5 deletions(-) create mode 100644 stoneBrick.png diff --git a/custom.css b/custom.css index eac6c61..24396fc 100644 --- a/custom.css +++ b/custom.css @@ -1,11 +1,21 @@ -#buttonDiv { - +body { + background-image: url("stoneBrick.png"); + background-repeat: repeat; } - canvas { padding: 10; margin-left: auto; margin-right: auto; display: block; - width: 570 -} \ No newline at end of file + width: 570px; + height: 170px; + box-shadow: 10px 10px 5px #333333; +} + +#buttonDiv { + width: 500px + height: 170px +} + + + diff --git a/stoneBrick.png b/stoneBrick.png new file mode 100644 index 0000000000000000000000000000000000000000..44948f10ca007cd345c150c1336a84eaf97bb937 GIT binary patch literal 4784 zcmb7Hc|4T+_kUCPO7?dUZ(hL$BLK(7^B}3UKYAj_*MY$ouV3-JvB}`;ry4O~+ zjiu~MzPYGuF}J!|>!QW?8Fl;K??1oq>-Roqp65L0oacPbXE~qGGdmMIGXTh*y#WS;SeK;5eGyT zfC@r51R*<}fH;^W2RqyU0LlS_aDpb`|5mddb|wJ?2Lym3IgnugW>jNlK&7*;mEW@p z$l%KAwZZIq(uAhpQ`LtLK?5qL4}g(8Vw<1)kj3c)ADY<(VWwFQ*#{Gr<5=TftwXc! z$aB-uPLU^CqpFQhx1a9qfUby_8t}Vm+#C&KjD|HE9HJOJNb_WEwE>dhB%Pe5q2r6M z{LW&w(!-XG&W(f?6PlwRbMm!`m%c>pP1H5U2{>sUKt7aIBZk2i?Z%jP1&$FS$d+2K zT`HRn(O$SCPgyVrTmu|)`pT66;9TK0*B6Pd=hLSHdjVm0qrlMi7u+sVftN!kt=L|X zns0m0ft>-d(fryRyg}kF%OQ1C(S6u)JTcQwq(Y=Zcr6eBcq+ta_4y3;sfGp9f@un# zMOoykip2@<;h_9;;YSC;j}Epvp5$OeR-qyno}l_c)pDWcO#_K;{uw|xWNdcviOk~2 z`xLZUQG7P==?>p1KFz68ZsMkNX(br|o zGpJO3y%8HseP9wnp=hU-}XkO#&~27*h@4Y)x&t(&G>Y6omtcm1aEONDG+?4=l}-E=(& z@N%-OK2&6izNx<*(+MdjSSFt03!bvQmw`z3O4Oj;8|@?e7O<(eQbb)u{r=mi9L$B{ z834!^wLt-pSC^gx;s+N1fUmM_m`lCU%43=Z4kXx1065(K2OtpkDusRt0G7eI%MDRr zL8byU>kySkRZsRl2ZcKydWjO{()?Bod!_MPmqabH`5*_Q>!KfrRrIMt?=Yn`8WgQT zqq@&hjsbd?5x=dpGy;5^c8#`#uZk(>O7MRbYDQLZZhv`|mpE86*{d4~&H~Si2}#{h zr`p53XbQTs6z2i>Jqz-!LTklK>+u{z$!I4)!6XH)!~!pW-P^`_$j*U1Lw8aE;6ULD za0Dzfc_aYgfI-2s0{J_jLMRA_G!`ic!x_oSXd0gc>kbZ9BZLz=dpfPWr|WbYrB0EU z0$wn~=SO8VcM*@#PEQ4KezfZd6{B7GP!q?D`F1NAqy3E$cl}f7=`QCTpp`$@vDWcW z#2+^0leDtsC(7g3><$vvpn?oSGKN4PuIUDj6bb$=D7HGc101!96Ohymob4cvC@al& zsZtKQcI}f5B9u2W7HpKd|9ZLLm2~mi=j&7#U5jn`{d@85tn(ubi?O2w$``66{_5)d zv*T<$>vFWyG$fdUyj1J}{o`GRH{`+_9}F!7ug>>S7wf=w=IR#hKo~PA6{)F# zv&=Z5+aLt?x_qV4SdJefR9;on_SUQ!r2p0R(tJxWh4%hI%K=}rr;E3RgoMy4s}J1! zW1^pbaM3LaOHHk>WyT4p2C@evH8qX?qJY`txH0c1;_IgJDks3J(sJnQ+;X#ec*k-x zs`T3OwT{6oTu`RL5k3~mhace=uFWPg}o8+!4xqm=kU)AR9eh~TK01lafI2J0W6vYT5 zeDt;1xafHQ3+3>4ycicKxpXPCx9ROwE3;Ztti6qNCmp|%nkOIE%^5m`mvIL$lav_?(jz-=Kq%m^rwdm5`aQr z?B)1(3;+j_#u}Z3A~ih(Wo&<}MXn>z?%ZSZwMitgZo||VnJWgMI6P1~m~EdcMoSP& z+6XVD7USX_hht+g@gv<=By4lL(`CG6;3oLI6H7Csp2YPu^pb6lZ4VFJLjuzD*1~uyM0^| zsT7P+kNfI{Y~e{FHO8jsC-j5kp~$W+C>K~G?n zM`Sv}ZC!+dD>QK1Z|LNUeFjQZJbI33v9G}c+6`}lEK}su%B3bg^jtn%`;z)zYX{)= z!C!Bk9UuH~CFC(>V+SzpVmdv^de6MKa)tD(s3^+c1w?RgM}MjE{hCK}-BAttM~{16 zlF6wF$eGGO2nGL{MAWw+sVjUnO3U>3Y8tf{Cm;GlEsvkY>Ph*6W=Y|`i?O7k&!{FlapSCYIFz75^6ybX(!EI>=SACyd)nbkE6`g zt~9)%yvc0e|8@uPuXRrn3cXRUBZ_DR-y3vt-VQ@~&CSitCi5l6Kgke^?id=~r7=dX zBx}h`UoYhLl49()ID)>8LoQEodd_L+HSCCL@6>sUg{;cO#R7E1Ru^=) z9MLA^m^781j&BnaV2WY)z1lrJJv|nAW-W6v^)!NA7M?uw^yuyZLxXxxPcXjxAZTh* zS3|K#3@Hf{a<%rBmUY;J&a7?26b5UxKH^@!XTr?!VY66q14P~}G0$DzHEwsSX0FeE z#$~{A;nkhycc%lcCs)(z)^u9T;%mA(4)PiA$~?0Vsb0Oe9Q32eWb*mw3li>fehWWc z2`>f>apVhHFTlY{(k!N*2_AA&jqb+w(y#NxL_TAk{YaN@Pa6h>4b5=;(f3ngrJwdE z-*jR>vNMWlV+t5XTbze`TdJr=+uVA|<)B%R$0JWU{eWhGUU(#0>YGvOn|JI$+uN%K zdtp<$`;0awoQld$f9D6H8YT-MizsG_pX{x@z4b2~W$88X7xzCiESH?RRqsW(ZrvzW z%e!^LESjo2PcNTXwGc|Ajk}qh3j13O(IFVv?6HqZ57bO(>s1u{ zvuoEZ+;Y7HeDSXW?ajlifWB69Xl`%{B@e^+o{xHyw&)09qFpoBM1cegY3btL<-x( zVOaKy*bV?#1AsO-0Bw_Gr)P>^fgk`5gdCu|#zX*S_;n^i8iMd-0;x>IJOU3nfzRh; zCu0w`0s&SL*ftop!w6Uh+kt#f5B$9I#z5?Eg3okpJ^E`0k<1J`Dgk*FXLv2ttt3GC13Ul~t^C1s?~Mz2+V3B9X4!Dar?PWS<+=9zgS&(=!>bEcVn)IwvfjK(IC$aU1+@mpoPlcz zFSg}e=)bS0|ZlY;V2v;Ip zhPhoXfFDZ*&o}lV_c7jKu@p3QkZ1#Es0*FEoX{wv{F6$;pm0-Q;3jQAudIo@1Mv6! zqS4x=+-$voGJSC1m_l`-+*#ihg;idE)2FW8lR6{y$-h0EeBE_b;{4QcC+iltYo~MQ zoYkRtb93|K?DR~0w^77ldP~g6hC)i=+r-a{V-pekNUYE0L9e4ytI_S+XBFa`rt=gU z2GmI6Y+X?jNp@D-TOpCUFdmgelJ?1b8l%)^8_9qWU|#d-V(UZIS2u|t3)AUm~!dAGG_b<-BqW_lqOy+TgUYVUR}%%AY8n9C;{wDxA{_R zgpRKDN7U8q&Q}U+eO?a7Q8Bgf7!w&`w%sz~BNF+;Cev&pgN!$oT}Fjn8Tk6CzU3Cz zjJSZI$$6^es;1=i`zZ+rXBUJyAx0-PRMl^o$%d>Rxz7Z1ki~g>r%=b`iVOz{J_jBcoiqE-*s*oef4pdPD(W|dySd~@P9N} zMn@cyYTTk6IBcIqX&q^!8+kP?lIqkbxSY>lQyEv!Q7M$GWnG0MqX8SwkRVMcr=vtyap+6~fI#H&~ zPctunhL_gK54 zDIzFc@9PbPjo`kOae9X{SFu?q6Ikdr`M)bL92e8Xl4&GF)8xdc`@s^*k;%|QMn z|9^3Ie-ty3zj9>1jnKf#YyOqjJRuxHGLc!L<2-ik4{@EF=P{Fpx1I+$EH-B5mOdrY zZ`{5+=hK*4H<=R~CY!QQ>^pGvZj^zX3XnKF|6A+_cZDk&$VD5+K9@!jz?{T3HQoX~-2U(?=SPduzH zOmDM-{a~tcqOh&3hXQQf(o{FOW{SUN3RbIy=jyzERXkz3{}ulV=o;l9Z+WYe_Od$R f&|~|IQ%{HZwsle6;I7uEvT!c;t0YhP&hP&QzdrR- literal 0 HcmV?d00001 -- 2.30.2