Skip to content

Instantly share code, notes, and snippets.

@maolion

maolion/github-green-blocks.js

Created June 15, 2017 14:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save maolion/5b5050b4424c5f41814a84225cd2a166 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save maolion/5b5050b4424c5f41814a84225cd2a166 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
github-green-blocks.js
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