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..24396fc
--- /dev/null
+++ b/custom.css
@@ -0,0 +1,21 @@
+body {
+ background-image: url("stoneBrick.png");
+ background-repeat: repeat;
+}
+canvas {
+ padding: 10;
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+ width: 570px;
+ height: 170px;
+ box-shadow: 10px 10px 5px #333333;
+}
+
+#buttonDiv {
+ width: 500px
+ height: 170px
+}
+
+
+
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
diff --git a/stoneBrick.png b/stoneBrick.png
new file mode 100644
index 0000000..44948f1
Binary files /dev/null and b/stoneBrick.png differ