treyzania
/
minihalf
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Finished core functionality, better colors, better layout.

master
Trey Del Bonis 4 years ago
parent
09e4e2810c
commit
933916a5a3
3 changed files with 176 additions and 19 deletions
Split View Show Diff Stats
  1. 5
    2
      www/index.html
  2. 132
    13
      www/main.js
  3. 39
    4
      www/style.css

+ 5
- 2
www/index.html View File

@@ -14,8 +14,11 @@
<body onload="init();">

<div id="content">
<h1>Bitcoin Block Halving Countdown!</h1>
<h2>Remaining: <span id="blocksleft">...</span></h2>
<div id="heading">
<h1>Bitcoin Block Halving Countdown!</h1>
<h2><span id="blocksleft">...</span> blocks left</h2>
<h2><span id="timeleft">... remaining</span></h2>
</div>

<div id="blocklist">
<span id="blocklistloading">Loading blocks...</span>

+ 132
- 13
www/main.js View File

@@ -107,6 +107,12 @@ function makeBlockElem(block, prevBlock) {
innerElem.classList.add("entryinner");
entry.appendChild(innerElem);

if (block.height % 2 == 0) {
innerElem.classList.add("blocklisteven");
} else {
innerElem.classList.add("blocklistodd");
}

/* ===== Top row data ===== */

let topElem = document.createElement("div");
@@ -225,14 +231,64 @@ function makeBlockElem(block, prevBlock) {
return entry;
}

var blocksleftElem = null;
var blocksLeftElem = null;
var timeLeftElem = null;

function updateCurrentTip(block) {
if (blocksleftElem == null) {
blocksleftElem = document.getElementById("blocksleft");
function updateRemainingCount(block) {
if (blocksLeftElem == null) {
blocksLeftElem = document.getElementById("blocksleft");
}

blocksleftElem.innerHTML = (nextHalvingHeight - curTipBlock.height).toString()
if (timeLeftElem == null) {
timeLeftElem = document.getElementById("timeleft");
}

let blocksLeft = nextHalvingHeight - curTipBlock.height;
blocksLeftElem.innerHTML = blocksLeft.toString()

if (blocksLeft < 1) {
timeLeftElem.innerHTML = "Halving imminent!";
} else {
let nowUnix = Date.now() / 1000; // wtf???

let sinceLastBlock = nowUnix - block.timestamp;
let secsLeft = ((blocksLeft * 10 * 60) - sinceLastBlock)|0;

console.log("Seconds until halving: " + secsLeft);

let secsPart = secsLeft % 60;
let minLeft = (secsLeft - secsPart) / 60;
let minPart = minLeft % 60;
let hrsLeft = (minLeft - minPart) / 60;

console.log(secsPart, minLeft, minPart, hrsLeft);

let acc = secsPart + "s";
if (minLeft > 0) {
acc = (minPart + "m ") + acc;
}
if (hrsLeft > 0) {
acc = (hrsLeft + "hr ") + acc;
}

timeLeftElem.innerHTML = "roughly " + acc + " remaining";
}
}

function addNewBlock(block) {

let prev = recentBlocks[0];
recentBlocks = [block].concat(recentBlocks);
let elem = makeBlockElem(block, prev);

elem.classList.add("newblock");
setTimeout(function() {
elem.classList.remove("newblock");
}, 2000);

let blocklist = document.getElementById("blocklist");
blocklist.prepend(elem);

}

function populateRecentBlocks(blocks) {
@@ -241,19 +297,80 @@ function populateRecentBlocks(blocks) {
let loadingElem = document.getElementById("blocklistloading");

curTipBlock = blocks[0];
updateCurrentTip(curTipBlock.height);
updateRemainingCount(curTipBlock.height);

for (let i = 0; i < blocks.length; i++) {
let block = blocks[i];
let prevBlock = null;
if (i < blocks.length - 1) {
let elem = makeBlockElem(blocks[i], blocks[i + 1]);
blocklist.appendChild(elem);
} else {
let elem = makeBlockElem(blocks[i], null);
blocklist.appendChild(elem);
prevBlock = blocks[i + 1];
}

let elem = makeBlockElem(block, prevBlock);

if (i == 0) {
// Adding the new block so we give it the class to make it colored,
// but set a timer so it goes away eventually.
elem.classList.add("newblock");
setTimeout(function() {
elem.classList.remove("newblock");
}, 2000);
}

blocklist.appendChild(elem);

}

loadingElem.style.display = "none";
updateRemainingCount(curTipBlock);
}

function getPollDelayAtHeight(height) {
let blocksUntilHalving = HALVING_PERIOD - (height % HALVING_PERIOD);
if (blocksUntilHalving == 1) {
return 1000;
} else if (blocksUntilHalving == 2) {
return 2500;
} else {
return 10000;
}
}

function checkNewBlocks() {
console.log("Polling for new blocks...");
doGetRecentBlocks(function(blocks) {
if (blocks == null) {
alert("Error polling for new bocks, please refresh the page.");
return;
}

// Find the index of the newest known block.
let knownHeight = recentBlocks[0].height;
let newestKnownIndex = -1;
for (let i = 0; i < blocks.length; i++) {
if (blocks[i].height == knownHeight) {
newestKnownIndex = i;
break;
}
}

// If there's no new blocks, exit.
if (newestKnownIndex == 0) {
console.log("No new blocks found.");
} else if (newestKnownIndex == -1) {
console.log("wtf");
}

// If there are new blocks, add them.
for (let i = newestKnownIndex - 1; i >= 0; i--) {
let newBlock = blocks[i];
console.log("Adding new block at height " + newBlock.height + " (" + newBlock.id + ")");
addNewBlock(newBlock);
}

// Set up to call this again.
setTimeout(checkNewBlocks, getPollDelayAtHeight(recentBlocks[0].height));
});
}

function init() {
@@ -273,7 +390,9 @@ function init() {
recentBlocks = blocks;

populateRecentBlocks(blocks);

// TODO Set up more stuff.
setTimeout(checkNewBlocks, 5000);
setInterval(function() {
updateRemainingCount(recentBlocks[0]);
}, 1000);
});
}

+ 39
- 4
www/style.css View File

@@ -1,5 +1,17 @@
body {
font-family: sans-serif;
font-family: Helvetica, Arial, sans-serif;
background-color: #F3CA40;
}

#heading {
width: 50%;
margin: auto;
text-align: center;
}

a {
text-decoration: none;
color: darkblue
}

#blocklist {
@@ -10,19 +22,28 @@ body {
width: 100%;
}

.blocklisteven {
background-color: #E29531;
}

.blocklistodd {
background-color: #F2A541;
}

.entryinner {
margin: 6pt;
border: 1px solid black;
border-radius: 3px 3px 3px 3px;
border-width: 2pt;
border-radius: 4px 4px 4px 4px;
padding: 12pt;
}

.blbselected .entryinner {
background-color: #eee;
/*background-color: #ddd;*/
}

.entryinner:hover {
background-color: lightgray;
background-color: #FF7F11;
}

.entrytop {
@@ -106,3 +127,17 @@ body {
width: 36pt;
vertical-align: middle;
}

.newblock .entryinner {
animation: 1s 1 newblockanim;
}

@keyframes newblockanim {
from {
background-color: #f11;
border-color: #ff5;
}
to {
/* just whatever it already is */
}
}

Write Preview
Loading…
Cancel
Save