Skip to content

Commit dcca5bd

Browse files
author
David Allemang
committed
Initial commit
0 parents  commit dcca5bd

7 files changed

+252
-0
lines changed

‎.idea/crossclock.iml

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/encodings.xml

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/jsLibraryMappings.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/misc.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎clock.js

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
// function stuff() {
2+
// let now = new Date();
3+
//
4+
// let sec = now.getSeconds();
5+
//
6+
// return [[
7+
// [2, false],
8+
// [1, false],
9+
// [0, false],
10+
// [1, Math.floor(sec / 10) === 1],
11+
// [2, Math.floor(sec / 10) === 2],
12+
// [3, Math.floor(sec / 10) === 3],
13+
// [4, Math.floor(sec / 10) === 4],
14+
// [5, Math.floor(sec / 10) === 5],
15+
// [6, false],
16+
// [7, false],
17+
// [8, false],
18+
// [9, false],
19+
// ], [
20+
// [2, false],
21+
// [1, false],
22+
// [0, sec % 10 === 0],
23+
// [1, sec % 10 === 1],
24+
// [2, sec % 10 === 2],
25+
// [3, sec % 10 === 3],
26+
// [4, sec % 10 === 4],
27+
// [5, sec % 10 === 5],
28+
// [6, sec % 10 === 6],
29+
// [7, sec % 10 === 7],
30+
// [8, sec % 10 === 8],
31+
// [9, sec % 10 === 9],
32+
// ]];
33+
// }
34+
//
35+
//
36+
// function tags() {
37+
// return stuff().map(row =>
38+
// $('<div>').html(
39+
// row.map(data => {
40+
// let [word, shift] = data;
41+
// return $('<span>')
42+
// .text(word)
43+
// .addClass(shift ? 'shift' : '');
44+
// }
45+
// )
46+
// )
47+
// );
48+
// }
49+
50+
function $$(y, x) {
51+
return $(`._${y} ._${x}`);
52+
}
53+
54+
function update() {
55+
$('.shift').removeClass('shift');
56+
57+
let now = new Date();
58+
let sec = now.getSeconds();
59+
let mins = now.getMinutes();
60+
let hour = now.getHours();
61+
62+
let words = {
63+
'ITS': $$(0, 0),
64+
'A': $$(0, 2),
65+
'HALF': $$(0, 3),
66+
'TEN1': $$(0, 4),
67+
68+
'QUARTER': $$(1, 0),
69+
'TWENTY': $$(1, 1),
70+
71+
'FIVE1': $$(2, 0),
72+
'TILL': $$(2, 2),
73+
'PAST': $$(2, 3),
74+
75+
'ONE': $$(3, 0),
76+
'TWO': $$(3, 1),
77+
'SIX': $$(3, 2),
78+
'NINE': $$(3, 3),
79+
80+
'THREE': $$(4, 0),
81+
'FOUR': $$(4, 1),
82+
'FIVE2': $$(4, 2),
83+
84+
'SEVEN': $$(5, 0),
85+
'EIGHT': $$(5, 1),
86+
'TEN2': $$(5, 2),
87+
88+
'ELEVEN': $$(6, 0),
89+
'TWELVE': $$(6, 2),
90+
91+
'O': $$(7, 1),
92+
'CLOCK': $$(7, 3),
93+
};
94+
95+
let OF = 'PAST';
96+
if (now.getMinutes() > 30) {
97+
mins = 60 - mins;
98+
hour += 1;
99+
if (hour === 0) hour = 12;
100+
OF = 'TILL';
101+
}
102+
hour %= 12;
103+
104+
let five = Math.floor((mins + sec / 60) / 5 + .5);
105+
console.log(five);
106+
107+
let HOUR = [
108+
'TWELVE', 'ONE', 'TWO', 'THREE', 'FOUR', 'FIVE2', 'SIX', 'SEVEN', 'EIGHT', 'NINE', 'TEN2', 'ELEVEN'
109+
][hour];
110+
111+
let choices = {
112+
0: ['ITS', HOUR, 'O', 'CLOCK'],
113+
1: ['ITS', 'FIVE1', OF, HOUR],
114+
2: ['ITS', 'TEN1', OF, HOUR],
115+
3: ['ITS', 'A', 'QUARTER', OF, HOUR],
116+
4: ['ITS', 'TWENTY', OF, HOUR],
117+
5: ['ITS', 'TWENTY', 'FIVE1', OF, HOUR],
118+
6: ['ITS', 'HALF', OF, HOUR]
119+
};
120+
121+
for(let w in choices[five]){
122+
words[choices[five][w]].addClass('shift');
123+
}
124+
125+
setTimeout(update, 10000);
126+
}
127+
128+
function tags() {
129+
let grid = [
130+
["IT'S", "J", "A", "HALF", "TEN"],
131+
["QUARTER", "TWENTY"],
132+
["FIVE", "X", "TILL", "PAST"],
133+
["ONE", "TWO", "SIX", "NINE"],
134+
["THREE", "FOUR", "FIVE"],
135+
["SEVEN", "EIGHT", "TEN"],
136+
["ELEVEN", "V", "TWELVE"],
137+
["ESA", "O'CLOCK", "KNS"],
138+
];
139+
140+
return grid.map((row, i) =>
141+
$('<div>')
142+
.addClass(`_${i}`)
143+
.html(
144+
row.map((n, j) =>
145+
$('<span>')
146+
.addClass(`_${j}`)
147+
.text(n))
148+
));
149+
}
150+
151+
function init() {
152+
$('#left').html(tags());
153+
$('#right').html(tags());
154+
155+
update();
156+
}

‎index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Cross-View Clock</title>
6+
7+
<style>
8+
body {
9+
font-family: monospace;
10+
letter-spacing: 5px;
11+
}
12+
13+
.block {
14+
display: inline-block;
15+
border: 1px solid black;
16+
padding: 6px 5px 7px 9px;
17+
margin: 0 3em;
18+
}
19+
20+
#wrapper {
21+
margin: auto;
22+
}
23+
24+
#left .shift {
25+
margin: 0 2px 0 -2px;
26+
text-shadow: 2px 1px 6px #00000044;
27+
}
28+
29+
#right .shift {
30+
margin: 0 -2px 0 2px;
31+
text-shadow: -2px 1px 6px #00000044;
32+
}
33+
34+
.block * {
35+
-webkit-transition: margin .5s, text-shadow .5s;
36+
transition: margin .5s, text-shadow .5s;
37+
38+
text-shadow: 0 0 3px #00000044;
39+
margin: 0 0;
40+
}
41+
</style>
42+
43+
</head>
44+
<body onload="init()">
45+
46+
<div id="wrapper">
47+
<!--todo move these to css-->
48+
<div id="left" class="block"></div>
49+
<div id="right" class="block"></div>
50+
</div>
51+
52+
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
53+
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
54+
crossorigin="anonymous"></script>
55+
56+
<script src="clock.js"></script>
57+
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)