mark offline after 110sec, dynamic <details> background for dark themes
This commit is contained in:
parent
735b7ff3b9
commit
e75df5b2df
|
@ -32,7 +32,7 @@ def new_state_and_log():
|
|||
with open(log_path+'current-state.json', 'r') as fin:
|
||||
prev = loads(fin.read())
|
||||
|
||||
if cur['time'] - prev['period'][1] > 90:
|
||||
if cur['time'] - prev['period'][1] > 110:
|
||||
log(prev)
|
||||
log({'period': [prev['period'][1], cur['time']], 'status': 'monitor-offline' })
|
||||
return {'period': [cur['time'],cur['time']], 'status': cur['status'], 'players': cur['players']}
|
||||
|
|
|
@ -6,12 +6,12 @@
|
|||
<title>xkcraftia status</title>
|
||||
<link rel='stylesheet' href='css/style.css'>
|
||||
<link rel='icon' href='img/favicon.png'>
|
||||
<script src='js/load-map.js' charset='utf-8'></script>
|
||||
<script src='js/main.js' charset='utf-8'></script>
|
||||
</head>
|
||||
<body>
|
||||
<details open>
|
||||
<summary>
|
||||
<h2>Server status</h1>
|
||||
<h2>Server status</h2>
|
||||
<a href='logs/' target='_blank'><img src='img/feather-external-link.svg' alt='open' title='open all logs'></a>
|
||||
</summary>
|
||||
show <a href='logs/hour.html' target='f'>last hour</a>, <a href='logs/day.html' target='f'>24 hours</a>, <a href='logs/month.html' target='f'>1 month</a>, <a href='logs/4months.html' target='f'>4 months</a>, <a href='logs/18months.html' target='f'>18 months</a>:
|
||||
|
@ -19,7 +19,7 @@
|
|||
</details>
|
||||
<details>
|
||||
<summary>
|
||||
<h2>Map</h1>
|
||||
<h2>Map</h2>
|
||||
<a href='map/' target='_blank'><img src='img/feather-external-link.svg' alt='open' title='open map viewer'></a>
|
||||
</summary>
|
||||
<noscript>The map viewer requires javascript.</noscript>
|
||||
|
|
|
@ -1,12 +0,0 @@
|
|||
// only load the map viewer when it's visible (and javascript is enabled)
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
const setMap = () => { document.querySelector('#map').src = 'map/' }
|
||||
const details = document.querySelector('details:last-child')
|
||||
|
||||
// if <details> is not supported (looking at you, Edge), the frame will be
|
||||
// visible by default, so just set the target immediately
|
||||
if ('open' in details)
|
||||
details.addEventListener('toggle', setMap, { once: true })
|
||||
else
|
||||
setMap()
|
||||
})
|
|
@ -0,0 +1,26 @@
|
|||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
// Only load the map viewer when it's visible (and javascript is enabled).
|
||||
const setMap = () => { document.querySelector('#map').src = 'map/' }
|
||||
const details = document.querySelector('details:last-child')
|
||||
|
||||
// If <details> is not supported (looking at you, Edge), the frame will be
|
||||
// visible by default, so just set the target immediately.
|
||||
if ('open' in details)
|
||||
details.addEventListener('toggle', setMap, { once: true })
|
||||
else
|
||||
setMap()
|
||||
|
||||
|
||||
// For custom (dark) CSS themes, set the <details> background to the inverse of
|
||||
// the text colour.
|
||||
const parseColour = (str) => str.match(/([0-9.]+)/g).map(parseFloat)
|
||||
const dumpColour = (col) => `rgba(${col.join(',')})`
|
||||
const textColour = parseColour(window.getComputedStyle(document.body).getPropertyValue('color'))
|
||||
const invertedColour = [255-textColour[0], 255-textColour[1], 255-textColour[2], 0.8]
|
||||
const sheet = document.styleSheets[0]
|
||||
sheet.insertRule(`
|
||||
details {
|
||||
background-color: ${dumpColour(invertedColour)} !important;
|
||||
}`
|
||||
)
|
||||
})
|
Loading…
Reference in New Issue