feat: add map and moving dot

tongxuanbao · Jan 27, 2024 · 6cb38df · 6cb38df
1 parent 69f5164
commit 6cb38df
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 63 deletions.
diff --git a/TODO.md b/TODO.md
@@ -1,6 +1,7 @@
 ## Todo
-- [ ] draw a 4x4 square, and a dot move to each square every 3 seconds
-
+- [ ] Create the map
+- Monitoring
 
 ## Done
-- [x] Create front end -> where is the front end
+- [x] Create front end -> where is the fro b5nt end
+- [x] draw a 4x4 square, and a dot move to each square every 3 seconds
diff --git a/simulator/main.go b/simulator/main.go
@@ -10,45 +10,58 @@ import (
 	"time"
 )
 
+type Position struct {
+	x, y int
+}
+
+func getPositionMap() map[Position]Position{
+	m := make(map[Position]Position)
+
+	m[Position{160, 427}] = Position{200, 370}
+	m[Position{200, 370}] = Position{155, 300}
+	m[Position{155, 300}] = Position{216, 207}
+	m[Position{216, 207}] = Position{270, 270}
+	m[Position{270, 270}] = Position{199, 365}
+	m[Position{199, 365}] = Position{160, 427}
+
+	return m
+}
+
+func getNextPosition(pos Position) Position {
+	m := getPositionMap()
+	if nextPosition, ok := m[pos]; ok {
+		log.Printf("x: %q", nextPosition)
+		return nextPosition
+	}
+
+	return Position{160, 427}
+}
+
 func main() {
 	http.HandleFunc("/ping", func(w http.ResponseWriter, r *http.Request) {
 		fmt.Fprintf(w, "pong\n")
 	})
 
-	http.HandleFunc("/clicked", func(w http.ResponseWriter, r *http.Request) {
-		fmt.Fprintf(w, "<button>Clicked</button>")
-	})
+	http.HandleFunc("/square", func(w http.ResponseWriter, r *http.Request) {
+		var x, y int
 
-	http.HandleFunc("/colors", func(w http.ResponseWriter, r *http.Request) {
-		color := r.URL.Query().Get("color")
-		if color == "" || color == "green" {
-			color = "red"
-		} else if color == "red" {
-			color = "blue"
-		} else {
-			color = "green"
+		if _, err := fmt.Sscanf(r.URL.Query().Get("x"), "%d", &x); err != nil {
+			http.Error(w, "Invalid parameter (x)", http.StatusBadRequest)
+			return
 		}
-		fmt.Fprintf(w, `<div id="color-demo" class="smooth" style="color:%[1]s" hx-get="/colors?color=%[1]s" hx-swap="outerHTML" hx-trigger="every 1s"> <h1>Hello World :D</h1> </div>`, color)
-	})
-
-	http.HandleFunc("/square", func(w http.ResponseWriter, r *http.Request) {
-		x := r.URL.Query().Get("x")
-		y := r.URL.Query().Get("y")
-
-		if x == "50" && y == "50" {
-			y = "150"
-		} else if x == "50" && y == "150" {
-			x = "150"
-		} else if x == "150" && y == "150" {
-			y = "50"
-		} else { 
-			x = "50"
+		if _, err := fmt.Sscanf(r.URL.Query().Get("y"), "%d", &y); err != nil {
+			http.Error(w, "Invalid paramete", http.StatusBadRequest)
+			return
 		}
-
+
+		log.Printf("x: %d, y: %d", x, y)
+
+		nextPosition := getNextPosition(Position{x, y})
+
 		fmt.Fprintf(w, `
-			<div id="dot-demo" class="dot smooth" style="top:%[1]spx;left:%[2]spx;"
-            hx-get="/square?x=%[1]s&y=%[2]s" hx-swap="outerHTML" hx-trigger="every 2s"></div>
-		`, x, y)
+			<div id="dot-demo" class="dot smooth" style="top:%[1n]dpx;left:%[2]dpx;"
+            hx-get="/square?x=%[1]d&y=%[2]d" hx-swap="outerHTML" hx-trigger="every 2s"></div>
+		`, nextPosition.x, nextPosition.y)
 	})
 
 	dir := http.Dir("./static")

diff --git a/simulator/static/index.html b/simulator/static/index.html
@@ -6,30 +6,12 @@
         transition: all 1s ease-in-out;
     }
     .square {
-        width: 200px;
-        height: 200px;
-        background-color: red;
+        width: 1000px;
+        height: 1000px;
+        background-image: url('./map.png');
+        background-size: 100%;
         position: relative;
     }
-    .square::before, .square::after {
-        content: '';
-        position: absolute;
-        background-color: white;
-    }
-    .square::before {
-        left: 50%;
-        top: 0;
-        bottom: 0;
-        width: 3px;
-        transform: translateX(-50%);
-    }
-    .square::after {
-        top: 50%;
-        left: 0;
-        right: 0;
-        height: 3px;
-        transform: translateY(-50%);
-   }
    .dot {
        width: 20px;
        height: 20px;
@@ -42,15 +24,9 @@
 </head>
 <body>
     <script src="https://unpkg.com/htmx.org@1.9.10"></script>
-    <button hx-post="/clicked" hx-swap="outerHTML">
-        Click Me
-    </button>
-    <div id="color-demo" class="smooth" style="color:red">
-        <h1>Hello World :D</h1>
-    </div>
     <div class="square">
-        <div id="dot-demo" class="dot smooth" style="left:50px;top:50px;" 
-            hx-get="/square?x=50&y=50" hx-swap="outerHTML" hx-trigger="every 2s"></div>
+        <div id="dot-demo" class="dot smooth" style="top:160px;left:427px;" 
+            hx-get="/square?x=160&y=427" hx-swap="outerHTML" hx-trigger="every 2s"></div>
     </div>
 </body>
 </html>