Prettier layout with gaps; Removed fetch call; Use local storage to persist the fatch that the user has clicked

author: Raymaekers Luca <luca@spacehb.net> 2025-10-31 14:25:57 +0100
committer: Raymaekers Luca <luca@spacehb.net> 2025-10-31 14:25:57 +0100
commit: 36b2721e9fd604270e372995681314265192d66c (patch)
tree: 3b8caa0e7c33b546feaa8b5166b1202a6c100e08
parent: 932445fc76b386d62a95dcd9c05660ae1807f351 (diff)
2 files changed, 160 insertions, 91 deletions
diff --git a/index.tmpl.html b/index.tmpl.html
index 78bb347..43e51c4 100644
--- a/index.tmpl.html
+++ b/index.tmpl.html
@@ -16,15 +16,18 @@ h1 {
  display: flex;
  justify-content: center;
 }
+
 button {
  font-size: 1em;
- margin-left: 1em;
- margin-right: 1em;
 }
+
 #buttons {
- display: flex;
- justify-content: center;
- align-items: center;
+  margin: 1.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1em;
 }
 
 body {
@@ -33,72 +36,114 @@ body {
  align-items: center;
  height: 50vh;
 }
+
+span#name {
+ color: blue;
+}
+
+
     </style>
     <script>
 let people =
-[{{ range . }}
+[{{ range .People }}
  {"name": "{{.Name}}", "other": {{.Other}}}, {{ end }}
 ];
 
-function clickButton(button) {
- let name = button.innerText;
- let person = null;
- let person_index = 0;
- for(; person_index < people.length; person_index += 1)
- {
-  if(people[person_index].name === name)
-  {
-   person = people[person_index];
-   break;
-  }
- }
-
- fetch('/person/', {
-  method: 'POST',
-  headers:
-  {
-   'Content-Type': 'application/x-www-form-urlencoded'
-  },
-  body: "name=" + person.name
- })
- .then(function(response) {
-  response.text().
-   then(function(text_response) {
-    if(text_response === 'ok') {
-     window.location.reload();
-    }
-   })
-  })
- .catch(error => console.error('Error:', error));
+let page1_html = `
+<div>
+ <h1>Qui es-tu?</h1>
+ <div id="buttons">
+ {{ range .People }}
+ <button>{{ .Name }}</button>
+ {{ end }}
+ </div>
+</div>
+`;
 
- let other_person = people[person.other];
- document.body.innerHTML = "<h1>Tu as: " + other_person.name + "</h1>";
-}
+let local_storage_key = "clicked_{{.Seed}}";
 
-window.onload = function() {
+function setPage1() {
+ document.body.innerHTML = page1_html;
  let buttons = document.querySelectorAll("button");
-
  for(let index = 0; index < buttons.length; index += 1)
  {
   let button = buttons[index];
   button.addEventListener("click", function(event) {
    event.preventDefault();
-   clickButton(button);
-  });
+
+   let name = button.innerText;
+   let person = null;
+   for(let person_index = 0; person_index < people.length; person_index += 1)
+   {
+    if(people[person_index].name === name)
+    {
+     person = people[person_index];
+     break;
+    }
+   }
+
+   {{ if false }}
+   fetch('/person/', {
+    method: 'POST',
+    headers:
+    {
+     'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    body: "name=" + person.name
+   })
+   .then(function(response) {
+    response.text().
+     then(function(text_response) {
+      if(text_response !== 'ok') {
+       console.log("Error");
+      }
+     })
+    })
+   .catch(error => console.error('Error:', error));
+   {{ end }}
+
+   document.body.innerHTML = `
+    <h1>Tu es bien ${person.name}?</h1>
+    <div id="buttons">
+     <button id="yes">Oui</button>
+     <button id="no">Non</button>
+    </div>`;
+
+   let yes_button = document.getElementById("yes");
+   let no_button = document.getElementById("no");
+
+   yes_button.addEventListener("click", function(event) {
+    event.preventDefault();
+    let other_person = people[person.other];
+    document.body.innerHTML = `<h1>Tu as&nbsp;<span id="name">${other_person.name}</span>.</h1>`;
+    localStorage.setItem(local_storage_key, other_person.name);
+   });
+
+   no_button.addEventListener("click", function(event) {
+    event.preventDefault();
+    setPage1();
+   });
+
+  }); // button click even listener
  }
+}
 
+window.onload = function() {
+ let clicked = localStorage.getItem(local_storage_key);
+ if(!clicked)
+ {
+  setPage1();
+ }
+ else
+ {
+  document.body.innerHTML = `<h1>Tu as déjà choisi.</h1>`;
+ }
 };
+
     </script>
 
    </head>
    <body>
-    <div>
-     <h1>Qui es-tu?</h1>
-     <div id="buttons">
-     {{ range . }}
-     <button>{{ .Name }}</button>
-     {{ end }}
-     </div>
-    </div>
    </body>
+
   </html>
diff --git a/main.go b/main.go
index c948780..8c81329 100644
--- a/main.go
+++ b/main.go
@@ -8,12 +8,19 @@ import "html/template"
 import "strings"
 import _ "embed"
 
-//- Types
+// - Types
 type Person struct {
-	Name   string
-	Other  int
+	Name  string
+	Other int
 }
 
+type PageData struct {
+ People []Person
+ Seed int64
+}
+
+var DEBUG = true
+
 //- Globals
 
 //go:embed index.tmpl.html
@@ -33,37 +40,52 @@ var people = []Person{
 }
 var people_count = len(people)
 
-//- Main
+func TemplateToString(page_html string, people []Person, seed int64) string {
+			var buf strings.Builder
+			template_response, err := template.New("roulette").Parse(page_html)
+			if err != nil {
+				fmt.Println(err)
+			}
+   err = template_response.ExecuteTemplate(&buf, "roulette", PageData{people, seed})
+   if err != nil {
+    fmt.Println(err)
+   }
+			response := buf.String()
+
+   return response
+}
+
+// - Main
 func main() {
- var seed int64
- seed = rand.Int63()
- seed = 5642410750512497522
- fmt.Println("seed:", seed)
+	var seed int64
+	seed = rand.Int63()
+	seed = 1924480304604450476
+	fmt.Println("seed:", seed)
 
- src := rand.NewSource(seed)
- r := rand.New(src)
+	src := rand.NewSource(seed)
+	r := rand.New(src)
 	rand.Seed(seed)
 
- var list []int
- correct := false
- for !correct {
-  list = r.Perm(people_count)
-
-  correct = true
-  for i, v := range list {
-   if(v == i) {
-    fmt.Println("incorrect, need to reshuffle")
-    correct = false
-    break
-   }
-  }
- }
+	var list []int
+	correct := false
+	for !correct {
+		list = r.Perm(people_count)
+
+		correct = true
+		for i, v := range list {
+			if v == i {
+				fmt.Println("incorrect, need to reshuffle")
+				correct = false
+				break
+			}
+		}
+	}
+
+	for i, v := range list {
+		people[i].Other = v
+	}
 
- for i, v := range list {
-  people[i].Other = v
- }
- 
- http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("./assets"))))
+	http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("./assets"))))
 
 	http.HandleFunc("/person/", func(writer http.ResponseWriter, request *http.Request) {
 		name := request.FormValue("name")
@@ -82,23 +104,25 @@ func main() {
 		}
 	})
 
- // Execute the template before-hand since the contents won't change.
- var buf strings.Builder
- template_response, err := template.New("roulette").Parse(page_html)
- if err != nil {
-  fmt.Println(err)
- }
- template_response.ExecuteTemplate(&buf, "roulette", people)
- response := buf.String()
+	// Execute the template before-hand since the contents won't change.
+
+	response := TemplateToString(page_html, people, seed);
 
 	http.HandleFunc("/", func(writer http.ResponseWriter, request *http.Request) {
+		if DEBUG {
+   response = TemplateToString(page_html, people, seed);
+		}
   fmt.Fprint(writer, response)
 	})
 
-	address := "localhost:15118"
+	var address string
+	if DEBUG {
+		address = "0.0.0.0:15118"
+	} else {
+		address = "localhost:15118"
+	}
 	fmt.Printf("Listening on http://%s\n", address)
-	err = http.ListenAndServe(address, nil)
-	if err != nil {
+ if err := http.ListenAndServe(address, nil); err != nil {
 		panic(err)
 	}
author	Raymaekers Luca <luca@spacehb.net>	2025-10-31 14:25:57 +0100
committer	Raymaekers Luca <luca@spacehb.net>	2025-10-31 14:25:57 +0100
commit	36b2721e9fd604270e372995681314265192d66c (patch)
tree	3b8caa0e7c33b546feaa8b5166b1202a6c100e08
parent	932445fc76b386d62a95dcd9c05660ae1807f351 (diff)