UI touches and javascript stuff

This commit is contained in:
Aaron Fischer 2021-03-23 15:18:23 +01:00
parent 1a5fc52bc2
commit 8f331b3ff1
7 changed files with 77 additions and 20 deletions

View file

@ -102,6 +102,8 @@ func New(size int, numWastelands int, numMountains int, numRuins int, seed strin
Seed: seed,
}
// TODO: Return error wenn kein Platz mehr da ist
// All empty for start
for i := 0; i < w.Size*w.Size; i++ {
w.World = append(w.World, Tile{Territory: EmptyTerritory})

View file

@ -21,6 +21,7 @@ func Start(address string, port int) {
http.Handle("/static/", http.FileServer(http.FS(staticFiles)))
http.HandleFunc("/", indexHandler)
http.HandleFunc("/map.svg", mapHandler)
http.HandleFunc("/print", printHandler)
addr := address + ":" + strconv.Itoa(port)
@ -32,7 +33,7 @@ func Start(address string, port int) {
}
}
func mapHandler(w http.ResponseWriter, req *http.Request) {
func worldFromRequest(req *http.Request) generator.World {
size, err := strconv.Atoi(req.URL.Query().Get("s"))
if err != nil {
size = 11
@ -54,21 +55,35 @@ func mapHandler(w http.ResponseWriter, req *http.Request) {
ruins = 6
}
world := generator.New(size, wastelands, mountains, ruins, seed)
return generator.New(size, wastelands, mountains, ruins, seed)
}
func mapHandler(w http.ResponseWriter, req *http.Request) {
world := worldFromRequest(req)
log.Printf("GET /map.svg?%v (%v)", req.URL.Query().Encode(), req.RemoteAddr)
w.Header().Set("Content-Type", "image/svg+xml")
w.Header().Set("Content-Length", strconv.Itoa(len(world.SVG())))
io.WriteString(w, world.SVG())
}
func indexHandler(w http.ResponseWriter, req *http.Request) {
seed := generator.RandomSeed()
world := generator.New(11, 7, 5, 6, seed)
func printHandler(w http.ResponseWriter, req *http.Request) {
world := worldFromRequest(req)
log.Printf("GET /print?%v (%v)", req.URL.Query().Encode(), req.RemoteAddr)
tpl, err := template.ParseFS(templateFiles, "templates/print.tpl.html")
if err != nil {
log.Fatal(err)
}
tpl.Execute(w, world)
}
func indexHandler(w http.ResponseWriter, req *http.Request) {
seed := generator.RandomSeed()
world := generator.New(11, 7, 5, 6, seed)
log.Printf("GET / (%v) Seed: %v", req.RemoteAddr, seed)
tpl, err := template.ParseFS(templateFiles, "templates/index.tpl.html")
log.Printf("GET / (%v) Seed: %v", req.RemoteAddr, seed)
tpl, err := template.ParseFS(templateFiles, "templates/index.tpl.html")
if err != nil {
log.Fatal(err)
}

View file

@ -16,6 +16,14 @@ document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#map-link').setAttribute('href', newMapUrl);
};
let actionButtons = document.querySelectorAll('button[class="action"]');
Array.prototype.forEach.call(actionButtons, function(action, i) {
action.addEventListener('click', function(e) {
console.log("adsf");
document.location.href = e.target.getAttribute('data-target');
});
});
let buttons = document.querySelectorAll('input[type="button"]')
Array.prototype.forEach.call(buttons, function(button, i) {
button.addEventListener('click', function(e) {

9
pkg/web/static/print.css Normal file
View file

@ -0,0 +1,9 @@
img {
margin: 10px;
width: 420px;
}
p {
font-family: Courier new;
font-size: 18px;
}

View file

@ -31,6 +31,14 @@ input[type="text"] {
input[name="seed"] {
width: 250px;
}
input[name="refresh"] {
margin-right: 8px;
float: left;
}
a.action {
display: inline-block;
margin: 5px 8px;
}
fieldset {
width: 370px;

View file

@ -3,23 +3,20 @@
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Map Generator für "Der Kartograph"</title>
<meta name="description" content="">
<title>Der Kartograph -- Map Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/styles.css" rel="stylesheet" type="text/css" media="all">
<script src="/static/generator.js"></script>
</head>
<body>
<h1>Map Generator für "Der Kartograph"</h1>
<h1>Der Kartograph — Map Generator</h1>
<a id="map-link" href="/map.svg?seed={{ .Seed }}&s={{ .Size }}&w={{ .Wastelands }}&r={{ .Ruins }}&m={{ .Mountains }}"><img src="/map.svg?seed={{ .Seed }}&s={{ .Size }}&w={{ .Wastelands }}&r={{ .Ruins }}&m={{ .Mountains }}" class="map"></a>
<p><img src="/static/images/logo.jpg">
Wem der beigelegte Block zu eintönig wird oder schon leergespielt hat, kann sich
entweder die Mini-Erweiterung kaufen, in dem ein weiterer Block enthalten ist,
oder aber diesen Generator nutzen, um sich zufällige Maps generieren zu lassen.
Die generierten Karten entsprechen den erweiterten Regeln, können aber für etwas
mehr Spaß angepasst werden.</p>
{{ with . }}
Wem der beigelegte Spielblock des Spiels <a href="https://pegasusshop.de/sortiment/spiele/kennerspiele/9791/der-kartograph-nominiert-kennerspiel-des-jahres-2020">Der Kartograph</a>
des <a href="https://pegasus.de/">PEGASUS SPIELE Verlags</a> zu eintönig wird oder ihn schon leergespielt hat,
hat hier die Möglichkeit, neue Karten zu generieren. Die Standardwerte
sind der <a href="https://pegasusshop.de/media/pdf/e4/06/e0/Kartograph_Minivariante_Tabula_Rasa.pdf">Minivariante
"Tabula Rasa"</a> entnommen.
<form>
<fieldset>
<legend>Seed</legend>
@ -50,8 +47,11 @@
</fieldset>
<input type="button" name="refresh" value="Neu generieren">
<input type="button" name="print" value="Drucken">
</form>
{{ end }}
<button class="action" data-target="/print?seed={{ .Seed }}&s={{ .Size }}&w={{ .Wastelands }}&r={{ .Ruins }}&m={{ .Mountains }}">Drucken</button>
<button class="action" data-target="/map.svg?seed={{ .Seed }}&s={{ .Size }}&w={{ .Wastelands }}&r={{ .Ruins }}&m={{ .Mountains }}">Direktlink</button>
<p>2011 <a href="https://aaron-fischer.net/">Aaron Fischer</a></p>
</body>
</html>

View file

@ -0,0 +1,15 @@
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Der Kartograph -- Map Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/static/print.css" rel="stylesheet" type="text/css" media="all">
</head>
<body onload="window.print();">
<p>{{ .Seed }}</p>
<img src="/map.svg?seed={{ .Seed }}&s={{ .Size }}&w={{ .Wastelands }}&r={{ .Ruins }}&m={{ .Mountains }}" class="map">
<img src="/map.svg?seed={{ .Seed }}&s={{ .Size }}&w={{ .Wastelands }}&r={{ .Ruins }}&m={{ .Mountains }}" class="map">
</body>
</html>