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": { "settings": {
"tankTopOffset": 360, "tankTopOffset": 360,
"tankBottomOffset": 101 "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" /> <meta name="twitter:image" content="/preview.png" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<script src="https://cdn.jsdelivr.net/npm/timesago@1"></script>
</head> </head>
<body> <body>
@ -43,6 +44,9 @@
<input type="number" id="tankBottomOffset" value="40" min="0" max="800" /> <input type="number" id="tankBottomOffset" value="40" min="0" max="800" />
</label> </label>
</div> </div>
<div class="logbook">
<ul id="logList"></ul>
</div>
</div> </div>
<script> <script>
@ -58,6 +62,7 @@
const response = await fetch("data.json"); const response = await fetch("data.json");
tankData = await response.json(); tankData = await response.json();
updateTank(); updateTank();
updateLogbook();
} catch (error) { } catch (error) {
console.error("Error loading tank data:", 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 // Update settings
function updateSettings() { function updateSettings() {
if (!tankData) return; if (!tankData) return;
@ -143,6 +166,7 @@
tankBottomOffsetInput.value tankBottomOffsetInput.value
); );
updateTank(); updateTank();
updateLogbook();
} }
// Event listeners // Event listeners

View File

@ -177,3 +177,45 @@ h1 {
.tiny-footer a:hover { .tiny-footer a:hover {
color: #fff; 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;
}