expanded tile descript in DB

app.lua

@@ -24,6 +24,7 @@ end)
 
 app:get("/", function(self)
     self.text = say.hello()
+    self.isPopulated = mapFunc:mapExists(map)
   return {render = "index",
 
   }
@@ -35,6 +36,9 @@ app:match("/map/render", function(self)
             self.tiles[h] = {}
 			for i=1,10 do
 			    self.tiles[h][i] = map:find({x = h, y = i})
+			    -- The map database has floor_stone and wall_floor instead of simple ASCII characters
+			    -- So we run mapFunc:mapDecrypt to convert it back to the desired characters for visual display
+			    self.tiles[h][i].occupied_by_type = mapFunc:mapDecrypt(self.tiles[h][i].occupied_by_type)
 			end
     end
     return {render = "map", layout = false}

lua_scripts/map.lua

@@ -11,13 +11,27 @@ local map = {
         {"-", "-", "w", "-", "-", "-", "-", "w", "w", "-"},
         {"-", "-", "w", "-", "-", "-", "-", "-", "w", "-"}
     },
+    mapCrypt = function(self, tile)
+        if tile == "-" then
+            return "floor_stone"
+        elseif tile == "w" then
+            return "wall_stone"
+        end
+    end,
+    mapDecrypt = function(self, tile)
+        if tile == "floor_stone" then
+            return "-"
+        elseif tile == "wall_stone" then
+            return "w"
+        end
+    end,
 	populate = function(self, map)
-		for h=1,10 do 
+		for h=1,10 do
 			for i=1,10 do
 				local tile = map:create({
 					x = h,
 					y = i,
-					occupied_by_type = self.map_tiles[h][i],
+					occupied_by_type = self:mapCrypt(self.map_tiles[h][i]),
 					occupied_by_id = ""
 				})
 			end
@@ -48,3 +62,4 @@ return map
 
 
 
+

views/index.etlua

@@ -1,10 +1,15 @@
 <!-- views/index.etlua -->
 <script src="/static/htmx.min.js"></script>
+<% if not isPopulated then %>
 <div id="clickable">
     <button hx-post="/clickme" hx-target="#clickable">Start</button>
 </div>
+<% end %>
 
-<main style="width: 50%;" class="container" id="map" hx-get="/map/render" hx-trigger="every 5s,load">
+<article>
+    <p style="text-align: center;">Game</p>
+    <main style="width: 50%;" class="container" id="map" hx-get="/map/render" hx-trigger="every 1s,load">
+</article>
 
 </main>