Add logbook
This commit is contained in:
parent
46d0008b72
commit
2b9ca9ad31
|
|
@ -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" }
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue