Javascript Cleanup/Button Centering
Moved javascript to it's own separate file, created custom.css file to center the button on the screen.
This commit is contained in:
BuildTools
parent
df481817e7
commit
63779cfdf1
3 changed files with 392 additions and 380 deletions
374
buttonInteractive.js
Normal file
374
buttonInteractive.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
11
custom.css
Normal file
11
custom.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
#buttonDiv {
|
||||
|
||||
}
|
||||
|
||||
canvas {
|
||||
padding: 10;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: block;
|
||||
width: 570
|
||||
}
|
||||
387
index.html
387
index.html
|
|
@ -2,384 +2,11 @@
|
|||
|
||||
<!--html encoding-->
|
||||
<HTML>
|
||||
<canvas id="gameCanvas" width="570" height = "170"></canvas>
|
||||
<script>
|
||||
|
||||
//Canvas Variables
|
||||
var canvas = document.getElementById('gameCanvas');
|
||||
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('gameCanvas');
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<HEAD>
|
||||
<LINK href="custom.css" rel="stylesheet" type="text/css">
|
||||
</HEAD>
|
||||
<div id="buttonDiv">
|
||||
<canvas id="buttonCanvas" width="570" height = "170"></canvas>
|
||||
<script src="buttonInteractive.js"></script>
|
||||
</div>
|
||||
</HTML>
|
||||
Loading…
Reference in a new issue