Old and unmaintained
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

184 lines
4.8 KiB

{{ define "line" }}
{{if gt (len .User) 0 }}
<time>{{ timeToUnix .Time }}</time> <{{ .User }}>: {{ .Message }}
{{ else }}
-
{{ end }}
{{ end }}
<!DOCTYPE html>
<html lang="en">
<head>
<title>MCLeiger coordinates</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
html, body, div {
margin: 0;
padding: 0;
}
div#map {
background: #eeeeee;
border: 3px solid #cccccc;
margin: 0 auto;
box-sizing: border-box;
}
div#map a {
display: block;
position: absolute;
width: 7px;
height: 7px;
border: 2px solid #ff0000;
border-radius: 10px;
box-sizing: border-box;
}
div#map a.spawn {
border-color: #000000;
box-shadow: 0px 0px 5px #000000;
}
div.info {
max-width: 600px;
margin: 0 auto;
}
footer, div.info.center {
text-align: center;
}
</style>
</head>
<body>
<div class="info">
<h1>MCLeiger coordinates map</h1>
<p>
This page lists all coordinates from the 'My coordinates are...' messages in my IRC log of #mcleiger.
The two lines before and after it are also displayed, to hopefully remind the person why the coordinates were special.
(When someone in-game types '/coords say' it says their coordinates.)
</p>
<form method="get">
Filter player name:
<input type="text" placeholder="(part of) player name" name="filter-name"{{ if .FilterName }} value="{{ .FilterName }}"{{ end }} />
<input type="submit" value="Filter" />
</form>
</div>
<div id="map">
&#160;
</div>
<div class="info center">
<p>
(Black in the center is spawn.)
</p>
</div>
{{ range .Locs }}
<p id="{{ .Coords.X }}:{{ .Coords.Z }}">
<h3>{{ .CoordsMsg.User }}: {{ .Coords.X }} {{ .Coords.Y }} {{ .Coords.Z }} {{.Coords.World }}</h3>
<time>{{ timeToUnix .CoordsMsg.Time }}</time>
<p>
{{ range .BeforeMsgs}}
<div>{{ template "line" . }}</div>
{{ end }}
<div><u>{{ template "line" .CoordsMsg }}</u></div>
{{ range .AfterMsgs}}
<div>{{ template "line" . }}</div>
{{ end }}
</p>
</p>
{{ end }}
<footer>
<a href="http://git.remi.im/remi/mcleiger-coordinates">Source code</a>
</footer>
<script>
// Replace unix time in <time> tags by a time string, hopefully in the user's timezone.
let times = document.querySelectorAll("time")
for (let i = 0; i < times.length; i++) {
let d = new Date(times[i].innerHTML*1000)
let str = d.getFullYear() + "-" + d.getMonth()+1 + "-" + d.getDate() + " "
+ pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds());
times[i].innerHTML = str
}
// Screen size.
// http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page-and-browser-window
let w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
let m = document.querySelector("div#map")
let mapSize = Math.min(x, y)
m.style.width = mapSize + "px"
m.style.height = mapSize + "px"
let worldDiameter = {{ .WorldDiameter }}
let blocksPerPixel = worldDiameter / mapSize
console.log(mapSize)
let center = [ {{ index .Spawn 0 }}, {{ index .Spawn 1 }} ]
let items = [
{{ range .Locs }}
{{ if eq .Coords.World "Overworld" }}
{{ if and (ge .Coords.X $.MinX) (le .Coords.X $.MaxX) }}
{{ if and (ge .Coords.Z $.MinZ) (le .Coords.Z $.MaxZ) }}
[ {{ .Coords.X }}, {{ .Coords.Z }}, "{{ .CoordsMsg.User }}" ],
{{ end }}
{{ end }}
{{ end }}
{{ end }}
]
for (let i = 0; i < items.length; i++) {
let el = mapPointer(items[i])
//el.style.opacity = Math.min(1 - (i / items.length) + 0.3, 100) + ""
el.setAttribute("href", "#" + items[i][0] + ":" + items[i][1])
m.appendChild(el)
}
let el = mapPointer(center)
el.classList.add("spawn")
m.appendChild(el)
function mapPointer(coords, time) {
let el = document.createElement("a")
el.style.marginLeft = mapSize/2 + (coords[0]-center[0])/blocksPerPixel - 7/2 + "px"
el.style.marginTop = mapSize/2 + (coords[1]-center[1])/blocksPerPixel - 7/2 + "px"
if (coords.length >= 3) {
el.style.borderColor = "#" + intToRGB(hashCode(coords[2]))
}
return el
}
function pad(value) {
if (value < 10) {
return '0' + value;
} else {
return value;
}
}
// http://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript
function hashCode(str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
return hash;
}
function intToRGB(i) {
i = i/2 + 1000000
let c = (i & 0x00FFFFFF)
.toString(16)
.toUpperCase();
return "00000".substring(0, 6 - c.length) + c;
}
</script>
</body>
</html>