DestinyNightfallClock/index.html at master · pixilation/DestinyNightfallClock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Destiny Nightfall Clock</title>

	<style>

	</style>


</head>
<body>

	<h1>Destiny Nightfall Clock</h1>

	<canvas id="clock" height="400" width="400"></canvas>
	<div>Time Remaining: <span id="time-remaining"></span></div>
	<div id="controls">
		<button data-time="0">Void</button>
		<button data-time="30">Arc</button>
		<button data-time="60">Solar</button>
	</div>

	<script>

		var canvas = document.querySelector("#clock");
		var ctx = canvas.getContext("2d");

		function drawClock (x, y, r, seconds) {
			var angleOffset = -Math.PI / 2;
			var angle = Math.PI * 2 / 3;

			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawCircleSegment(x, y, r, 0, "#a582c7");
			drawCircleSegment(x, y, r, 1, "#9ec3ec");
			drawCircleSegment(x, y, r, 2, "#d37626");
			drawHand(x, y, seconds, r);
		}

		function drawCircleSegment(x, y, r, segmentNumber, color) {
			ctx.strokeStyle = "white";
			ctx.lineWidth = 0;
			ctx.fillStyle = color;
			ctx.beginPath();
			ctx.moveTo(x, y);
			var startAngle = segmentNumber * (Math.PI * 2 / 3) - (Math.PI / 2);
			var endAngle = (segmentNumber + 1) * (Math.PI * 2 / 3) - (Math.PI / 2);
			ctx.arc(x, y, r, startAngle, endAngle);
			ctx.fill();
			// ctx.stroke();
		}

		function drawHand(x, y, seconds, length) {
			var angle = (seconds / 90) * (Math.PI * 2);
			ctx.lineCap = "round";
			ctx.strokeStyle = "black";
			ctx.lineWidth = 2;
			ctx.translate(x, y);
			ctx.rotate(-Math.PI / 2);
			ctx.rotate(angle);
			ctx.beginPath();
			ctx.moveTo(0, 0);
			ctx.lineTo(length, 0);
			ctx.stroke();
			ctx.setTransform(1, 0, 0, 1, 0, 0);
		}

		var startTime = Date.now();

		document.querySelector("#controls").addEventListener("click", function(e) {
			var offset = parseInt(e.target.dataset.time) * 1000;
			startTime = Date.now() - offset;
		}, false);

		var clockX = canvas.width / 2;
		var clockY = canvas.height / 2;
		var clockRadius = 0.95 * (canvas.width / 2)

		drawClock(clockX, clockY, clockRadius, 0);
		setInterval(function() {
			var elapsed = (Date.now() - startTime) / 1000;
			var timeRemaining = 30 - (elapsed % 30);
			document.querySelector("#time-remaining").innerText = timeRemaining.toFixed(1);
			drawClock(clockX, clockY, clockRadius, elapsed);
		}, 50)


	</script>

</body>
</html>