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