admin.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hmyziště - admin</title>
<meta name="viewport" content="width=1000px" />
<meta name="author" content="Drahoslav Bednář, Draho.cz" />
<meta name="application-name" content="Hmyziště" />
<link rel="icon" href="/img/favicon.png" />
<style>
@import url('https://fonts.googleapis.com/css?family=Titan+One&subset=latin-ext');
body, html {
  margin: 0;
  display: flex;
  overflow: hidden;
  justify-content: center;
  height: 100%;
  width: 100%;
}
body {
  position: relative;
  background: #111 url(img/noise.png);
  transition: background .5s ease-in-out;
}
body.dark {
  background-color: rgba(128, 128, 128, 0.94);
}
img {
  object-fit: cover;
  position: absolute;
  top: -25%;
  z-index: 1;
  height: 150%;
  width: 150%;
}
section {
  border-radius: 12px;
  background: hsla(0, 0%, 90%, 0.666);
  width: 1000px;
  margin: 3em auto;
  padding: 1em 2em;
  font-family: 'Arial';
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}
a {
  color: #4b99bf;
}

h1, h2, h3 {
  font-family: 'Titan one';
  font-weight: normal;
}
code {
  font-size: 125%;
}

table {
  width: 100%;
}

thead {
  font-weight: bold;
}

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(152, 152, 152, .5);;
}

#stats {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
}
.middle {
  flex-grow: 1;
  overflow-y: auto;
  max-height: calc(100% - 5em);
}
.footer {
  width: 100%;
  margin: 0.5em 0;
}
.header, .footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.offline {
  color: hsl(0, 82%, 35%);;
}
.semionline {
  color: hsl(40, 82%, 35%);
}
.online {
  color: hsl(120, 82%, 35%);;
}

.header a {
  color: black;
}
a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0 3px 0 5px;
}

#stats[v-cloak] {
  display: none;
}

</style>
</head>
<body>
<img src="/img/background.png" />
<section>
  <div id="stats" v-cloak>
    <div class="header">
      <h1>Hmyziště</h1>
      <h2><a href="/" target="_blank">Game</a></h2>
    </div>
    <div class="middle">
      <table>
        <thead>
          <tr>
            <td>Date</td>
            <td>Time</td>
            <td>Room</td>
            <td>Creator</td>
            <td>Opponent</td>
            <td>Acts/Rest</td>
          </tr>
        </thead>
        <tr v-for="room in rooms">
          <td>
            <small>{{ room.startTime | formatDate }}</small>
          </td>
          <td>
            <small>
              {{ room.startTime | formatTime }}
              –
              {{ room.lastTime | formatTime }}
            </small>
          </td>
          <td><code>{{ room.hash }}</code></td>
          <template v-for="user in (([a, b]) => [a, b])(room.users || [])">
            <td v-if="user">
              <small>{{ user.online ? '🔵' : '⚫'}}</small>
              {{ user.nick || '???' }} <sup>{{ user.gender | gender }}</sup>
              <sup v-if="user.secret === localStorage.user_secret">ᵐᵉ</sup>
            </td>
          <td v-else> × </td>
          </template>
          <td>{{ room.actions.length }} / {{ room.restarts || 0 }}</td>
        </tr>
      </table>
    </div>
    <div class="footer">
      <div>
        Status:
        <b :class="{online: connected, offline: !connected}">
          {{ connected ? 'ONLINE' : 'OFFLINE' }}
        </b>
      </div>
      <div>
        Uptime: <b>{{ uptime | formatDuration }}
        {{ !connected ? '???' : ''}}</b>
      </div>
    </div>
  </div>
</section>
<script src="lib/vue.js"></script>
<script src="lib/socket.io.js"></script>
<script>

const formatDate = (time) =>
  time ? new Date(time).toLocaleDateString() : '???'

const formatTime = (time) =>
  time ? new Date(time).toLocaleTimeString() : '???'

const formatDateTime = (time) =>
  time ? new Date(time).toLocaleString() : '???'

const gender = (gender) => ({
  M: '♂️',
  F: '♀️'
}[gender] || '⚬')

const formatDuration = (duration) => {
  duration -= duration % 1
  const s = duration % 60
  duration -= s
  duration /= 60
  const m = duration % 60
  duration -= m
  duration /= 60
  const h = duration % 24
  duration -= h
  duration /= 24
  const d = duration
  return `${d}d ${h}h ${m}m ${s}s`
}

const model = new Vue({
  el: '#stats',
  data: {
    rooms: {},
    uptime: 0,
    connected: false,
  },
  filters: {
    formatDuration,
    formatDate,
    formatTime,
    formatDateTime,
    gender,
  },
})

const BACKEND = window.location.origin.includes('localhost')
  ? 'http://localhost:3003'
  : 'https://gamsoc.draho.cz'

const socket = io(`${BACKEND}/admin`, {
  query: {
    pass: window.localStorage['ADMIN_PASS'] ||
      (window.localStorage['ADMIN_PASS'] = window.prompt('', 'PASS')),
  }
})

socket.on('stats', (stats) => {
  console.log('stats', stats)
  model.rooms = Object.entries(stats.rooms).map(([hash, room]) => ({
    hash,
    ...room,
  })).reverse()
  model.uptime = stats.uptime
})

let ticker

socket.on('connect', () => {
  model.connected = true
  ticker = setInterval(() => {
    model.uptime++
  }, 1000)
})
socket.on('disconnect', () => {
  model.connected = false
  clearInterval(ticker)
})

</script>
</body>
</html>