Add logbook

This commit is contained in:
Kenwood 2025-07-03 15:07:31 -04:00
parent 46d0008b72
commit 2b9ca9ad31
3 changed files with 74 additions and 1 deletions

View File

@ -17,5 +17,12 @@
"settings": {
"tankTopOffset": 360,
"tankBottomOffset": 101
}
},
"logs": [
{ "date": 1746126240, "text": "Added 1% Coyote Cum." },
{ "date": 1751396678, "text": "CV'd Zae~" },
{ "date": 1751407200, "text": "Zae added 41% Kan'vi Cum" },
{ "date": 1751493600, "text": "Added 1% Coyote Cum." },
{ "date": 1751569534, "text": "Dumped 40% into Ky-Li" }
]
}

View File

@ -17,6 +17,7 @@
<meta name="twitter:image" content="/preview.png" />
<link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/timesago@1"></script>
</head>
<body>
@ -43,6 +44,9 @@
<input type="number" id="tankBottomOffset" value="40" min="0" max="800" />
</label>
</div>
<div class="logbook">
<ul id="logList"></ul>
</div>
</div>
<script>
@ -58,6 +62,7 @@
const response = await fetch("data.json");
tankData = await response.json();
updateTank();
updateLogbook();
} catch (error) {
console.error("Error loading tank data:", error);
}
@ -134,6 +139,24 @@
});
}
function updateLogbook() {
const logList = document.getElementById("logList");
logList.innerHTML = "";
if (tankData.logs) {
tankData.logs.forEach(log => {
const li = document.createElement("li");
// If log.date is a string, try to parse as epoch seconds
let epoch = typeof log.date === 'number' ? log.date : Date.parse(log.date) / 1000;
// timesago expects ms
li.textContent = `${window.timesago ? timesago(epoch * 1000) : log.date} — ${log.text}`;
logList.appendChild(li);
});
// Auto-scroll to bottom
const logbookDiv = document.querySelector('.logbook');
if (logbookDiv) logbookDiv.scrollTop = logbookDiv.scrollHeight;
}
}
// Update settings
function updateSettings() {
if (!tankData) return;
@ -143,6 +166,7 @@
tankBottomOffsetInput.value
);
updateTank();
updateLogbook();
}
// Event listeners

View File

@ -177,3 +177,45 @@ h1 {
.tiny-footer a:hover {
color: #fff;
}
.logbook {
position: absolute;
left: 24px;
top: 20px;
width: 260px;
height: 850px;
background: rgba(30, 30, 40, 0.95);
border: 4px solid #000;
box-sizing: border-box;
font-size: 0.85em;
color: #eee;
overflow-y: auto;
z-index: 10;
padding: 16px 10px 16px 16px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.logbook h2 {
font-size: 1em;
margin: 0 0 8px 0;
color: #fff;
text-align: left;
}
#logList {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.85em;
display: flex;
flex-direction: column;
gap: 4px;
}
#logList li {
color: #ccc;
font-size: 0.95em;
word-break: break-word;
}