Created
June 15, 2017 14:27
-
-
Save maolion/5b5050b4424c5f41814a84225cd2a166 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let characterSchemaMapping = { | |
'A': [ | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 1, 0, 1, 0, 0], | |
[0, 1, 0, 0, 0, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 1, 1, 1, 1, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1] | |
], | |
'B': [ | |
[1, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 1, 1, 1, 1, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 1, 1, 1, 1, 0] | |
], | |
'C': [ | |
[0, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 1, 1, 1, 1, 0] | |
], | |
'D': [ | |
[1, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 1, 1, 1, 1, 0] | |
], | |
'E': [ | |
[1, 1, 1, 1, 1, 1, 1], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 1, 1, 1, 1, 1, 1] | |
], | |
'F': [ | |
[1, 1, 1, 1, 1, 1, 1], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0] | |
], | |
'G': [ | |
[0, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 1, 1, 1, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 1, 1, 1, 1, 0] | |
], | |
'H': [ | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 1, 1, 1, 1, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1] | |
], | |
'I': [ | |
[0, 0, 1, 1, 1, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 1, 1, 1, 0, 0] | |
], | |
'J': [ | |
[0, 0, 0, 0, 0, 0, 1], | |
[0, 0, 0, 0, 0, 0, 1], | |
[0, 0, 0, 0, 0, 0, 1], | |
[0, 0, 0, 0, 0, 0, 1], | |
[0, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 1, 1, 1, 1, 0] | |
], | |
'k': [ | |
[1, 0, 0, 0, 0, 1, 0], | |
[1, 0, 0, 0, 1, 0, 0], | |
[1, 0, 0, 1, 0, 0, 0], | |
[1, 1, 1, 0, 0, 0, 0], | |
[1, 0, 0, 1, 0, 0, 0], | |
[1, 0, 0, 0, 1, 0, 0], | |
[1, 0, 0, 0, 0, 1, 0] | |
], | |
'L': [ | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 1, 1, 1, 1, 1, 1] | |
], | |
'M': [ | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 0, 0, 0, 1, 1], | |
[1, 0, 1, 0, 1, 0, 1], | |
[1, 0, 0, 1, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1] | |
], | |
'N': [ | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 0, 0, 0, 0, 1], | |
[1, 0, 1, 0, 0, 0, 1], | |
[1, 0, 0, 1, 0, 0, 1], | |
[1, 0, 0, 0, 1, 0, 1], | |
[1, 0, 0, 0, 0, 1, 1], | |
[1, 0, 0, 0, 0, 0, 1] | |
], | |
'O': [ | |
[1, 1, 1, 1, 1, 1, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 1, 1, 1, 1, 1] | |
], | |
'P': [ | |
[1, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0], | |
[1, 0, 0, 0, 0, 0, 0] | |
], | |
'Q': [ | |
[0, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 1, 0, 1], | |
[1, 0, 0, 0, 0, 1, 0], | |
[0, 1, 1, 1, 1, 0, 1] | |
], | |
'R': [ | |
[1, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 1, 0, 0], | |
[1, 0, 0, 0, 0, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1] | |
], | |
'S': [ | |
[0, 1, 1, 1, 1, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 0], | |
[0, 1, 1, 1, 1, 1, 0], | |
[0, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 1, 1, 1, 1, 0] | |
], | |
'T': [ | |
[1, 1, 1, 1, 1, 1, 1], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0] | |
], | |
'U': [ | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 1, 1, 1, 1, 0] | |
], | |
'V': [ | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 0, 0, 0, 1, 0], | |
[0, 0, 1, 0, 1, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0] | |
], | |
'W': [ | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[1, 0, 0, 1, 0, 0, 1], | |
[1, 0, 1, 0, 1, 0, 1], | |
[1, 1, 0, 0, 0, 1, 1], | |
[1, 0, 0, 0, 0, 0, 1] | |
], | |
'X': [ | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 0, 0, 0, 1, 0], | |
[0, 0, 1, 0, 1, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 1, 0, 1, 0, 0], | |
[0, 1, 0, 0, 0, 1, 0], | |
[1, 0, 0, 0, 0, 0, 1] | |
], | |
'Y': [ | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 0, 0, 0, 1, 0], | |
[0, 0, 1, 0, 1, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0] | |
], | |
'Z': [ | |
[1, 1, 1, 1, 1, 1, 1], | |
[0, 0, 0, 0, 0, 1, 0], | |
[0, 0, 0, 0, 1, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0], | |
[0, 0, 1, 0, 0, 0, 0], | |
[0, 1, 0, 0, 0, 0, 0], | |
[1, 1, 1, 1, 1, 1, 1] | |
], | |
'♥': [ | |
[0, 1, 0, 0, 0, 1, 0], | |
[1, 0, 1, 0, 1, 0, 1], | |
[1, 0, 0, 1, 0, 0, 1], | |
[1, 0, 0, 0, 0, 0, 1], | |
[0, 1, 0, 0, 0, 1, 0], | |
[0, 0, 1, 0, 1, 0, 0], | |
[0, 0, 0, 1, 0, 0, 0] | |
] | |
}; | |
let characterFlatSchemaMapping = {}; | |
for (let char of Object.keys(characterSchemaMapping)) { | |
let schema = characterSchemaMapping[char]; | |
let flatSchema = characterFlatSchemaMapping[char] = new Array(49); | |
for (let cI = 0, i = 0; cI < 7; cI++) { | |
for (let rI = 0; rI < 7; rI++) { | |
flatSchema[i++] = !!schema[rI][cI]; | |
} | |
} | |
} | |
let gEls = document.querySelectorAll('svg.js-calendar-graph-svg g > g'); | |
let lastGEl = gEls[gEls.length - 1]; | |
let lastGElRectEls = Array.prototype.slice.call(lastGEl.querySelectorAll('rect')); | |
let now = new Date(); | |
for (let i = lastGElRectEls.length; i < 7; i++) { | |
let rect = document.createElement('rect'); | |
rect.className = 'day'; | |
rect.setAttribute('width', 10); | |
rect.setAttribute('height', 10); | |
rect.setAttribute('x', lastGElRectEls[i-1].getAttribute('x')); | |
rect.setAttribute('y', i * 12); | |
rect.setAttribute('fill', '#ebedf0'); | |
rect.setAttribute('data-count', 0); | |
rect.setAttribute('data-date', now.getFullYear() + '-' + ('0' + (now.getMonth() + 1)).slice(-2) + '-' + ('0' + (now.getDate() + 1)).slice(-2)); | |
lastGEl.appendChild(rect) | |
lastGElRectEls.push(rect); | |
} | |
let rectEls = Array.prototype.slice.call(document.querySelectorAll('svg.js-calendar-graph-svg g > g > rect')); | |
clear(); | |
let subtitles = ['H', 'E', 'L', 'L', 'O', ' ', ' ', ' ', 'W', 'O', 'R', 'L', 'D', ' ', ' ', ' ', ' ', '♥', '♥', '♥']; | |
let drawEndPosition = rectEls.length; | |
let drawStartPosition = drawEndPosition; | |
let needWhiteSpace = false; | |
setTimeout(function() { | |
clear(); | |
let subtitleIndex = 0; | |
let lastCharacterDrawedCount = 0; | |
for (let n = drawStartPosition; n < drawEndPosition; ) { | |
if (needWhiteSpace) { | |
needWhiteSpace = false; | |
continue; | |
} | |
if (subtitles[subtitleIndex] === ' ') { | |
needWhiteSpace = true; | |
subtitleIndex++; | |
lastCharacterDrawedCount = 0; | |
n += 7; | |
continue; | |
} | |
let schema = characterFlatSchemaMapping[subtitles[subtitleIndex]]; | |
if (!schema) { | |
break; | |
} | |
let drawedCount = 0; | |
while (lastCharacterDrawedCount < 49) { | |
let i = lastCharacterDrawedCount; | |
if (n + i >= drawEndPosition) { | |
break; | |
} | |
let rect = rectEls[n + i]; | |
if (rect && schema[i]) { | |
rect.setAttribute('fill', '#196127'); | |
} | |
lastCharacterDrawedCount++; | |
drawedCount++; | |
} | |
n += drawedCount; | |
if (lastCharacterDrawedCount >= 49) { | |
lastCharacterDrawedCount = 0; | |
subtitleIndex++; | |
needWhiteSpace = true; | |
n += 7; | |
} | |
} | |
drawStartPosition -= 7; | |
setTimeout(arguments.callee, 54); | |
}, 54); | |
function clear() { | |
for (let rectEl of rectEls) { | |
rectEl.setAttribute('fill', '#ebedf0'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment