Display A* stats on player tile with semi-transparency

Author: mbuffa

assets/css/tile_map.css

@@ -1,28 +1,38 @@
 body {
   font-family: sans-serif;
 }
+
 * {
   margin: 0;
   padding: 0;
 }
+
 h3 {
   margin: 1em;
   text-align: center;
 }
+
+.semi-transparent {
+  opacity: 0.5;
+}
+
 div.tilemap-container {
   display: flex;
   flex-flow: column wrap;
   justify-content: baseline;
 }
+
 div.tile_map {
   background-color: black;
   display: table;
   table-layout: fixed;
   width: min-content;
 }
+
 div.tile_map div.row {
   display: table-row;
 }
+
 div.tile_map div.tile {
   width: 64px;
   height: 64px;
@@ -33,14 +43,18 @@ div.tile_map div.tile {
   border-bottom: none;
   text-align: center;
 }
-div.tile_map div.tile img, div.tile_map div.tile div {
+
+div.tile_map div.tile img,
+div.tile_map div.tile div {
   height: 64px;
   width: 64px;
   position: absolute;
 }
+
 div.tile_map div.tile img {
   position: static;
 }
+
 div.tile_map div.tile .tile-position {
   background-color: black;
   color: white;
@@ -52,75 +66,97 @@ div.tile_map div.tile .tile-position {
   font-size: 8px;
   text-align: center;
 }
+
 div.tile_map div.tile.tile-clear {
   background-color: sandybrown;
   cursor: pointer;
 }
+
 div.tile_map div.tile div.tile-wall {
   background-color: saddlebrown;
   cursor: not-allowed;
 }
-div.tile_map div.tile div.entity, div.tile_map div.tile div.target, div.tile_map div.tile div.open_list {
+
+div.tile_map div.tile div.entity,
+div.tile_map div.tile div.target,
+div.tile_map div.tile div.open_list {
   width: 64px;
   height: 64px;
 }
+
 div.tile_map div.tile div.entity-player {
   display: flex;
   justify-content: space-around;
 }
+
 div.tile_map div.tile div.entity-player span {
   margin: auto;
 }
+
 div.tile_map div.tile div.target {
   display: flex;
   justify-content: space-around;
 }
+
 div.tile_map div.tile div.target span {
   margin: auto;
 }
+
 div.tile_map div.tile div.path {
+  background-color: white;
   display: flex;
   justify-content: space-around;
 }
+
 div.tile_map div.tile div.path span {
   margin: auto;
 }
+
 div.tile_map div.tile div.open_list {
   background-color: lightblue;
 }
+
 div.tile_map div.tile div.closed_list {
   background-color: orange;
 }
+
 div.tile_map div.tile div.info-container {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;
 }
+
 div.tile_map div.tile div.info-container span.span-g {
   width: 50%;
   text-align: left;
 }
+
 div.tile_map div.tile div.info-container span.span-h {
   width: 50%;
   text-align: right;
 }
+
 div.tile_map div.tile div.info-container span.span-f {
   font-size: 1.4em;
 }
+
 div.toolbar {
   flex: auto;
   display: flex;
   flex-flow: row nowrap;
   justify-content: left;
 }
+
 div.toolbar button {
   cursor: pointer;
 }
+
 div.toolbar * {
   margin: 0.5rem;
   padding: 0.5rem;
   font-size: 1.4em;
 }
+
 ul.entities-list {
   background-color: black;
   color: white;

lib/path_demo_web/live/map_live.ex

@@ -20,12 +20,14 @@ defmodule PathDemoWeb.MapLive do
 
     map_type = Map.get(params, "map", "small")
 
-    tile_map = case map_type do
-      "small" ->
-        SmallMapGenerator.build(12, 12)
-      "complex" ->
-        ComplexMapGenerator.build()
-    end
+    tile_map =
+      case map_type do
+        "small" ->
+          SmallMapGenerator.build(12, 12)
+
+        "complex" ->
+          ComplexMapGenerator.build()
+      end
 
     player = tile_map.entities |> Enum.find(fn entity -> entity.type == "player" end)
     Pathfinder.set_position(worker_name, player.position)
@@ -74,14 +76,6 @@ defmodule PathDemoWeb.MapLive do
                   <%= display_tile_position(tile.position) %>
                 </span>
                 <%= cond do %>
-                  <% tile_has_player?(@player_position, tile.position) -> %>
-                    <div class="entity entity-player">
-                      <span>🤖</span>
-                    </div>
-                  <% tile_is_target?(@player_target, tile.position) -> %>
-                    <div class="target">
-                      <span>👀</span>
-                    </div>
                   <% tile_in_final_path?(@path, tile.position) -> %>
                     <div class="path">
                       <span>🦶</span>
@@ -101,7 +95,14 @@ defmodule PathDemoWeb.MapLive do
                       </div>
                     </div>
                   <% tile_in_closed_list?(@path, tile.position) -> %>
-                    <div class="closed_list">
+                    <%= cond do %>
+                        <% tile_has_player?(@player_position, tile.position) -> %>
+                          <div class="closed_list entity entity-player">
+                            <span>🤖</span>
+                        <% true -> %>
+                          <div class="closed_list">
+                      <% end %>
+
                       <div class="info-container">
                         <span class="span-g">
                           <%= get_tile_node(@path.closed_list, tile.position).g %>
@@ -116,6 +117,14 @@ defmodule PathDemoWeb.MapLive do
                     </div>
                   <% Atom.to_string(tile.type) == "wall" -> %>
                     <div class="tile-wall">&nbsp;</div>
+                    <% tile_has_player?(@player_position, tile.position) -> %>
+                    <div class="entity entity-player">
+                      <span>🤖</span>
+                    </div>
+                  <% tile_is_target?(@player_target, tile.position) -> %>
+                    <div class="target">
+                      <span>👀</span>
+                    </div>
                   <% true -> %>
                 <% end %>
               </div>
@@ -214,20 +223,23 @@ defmodule PathDemoWeb.MapLive do
   def tile_in_final_path?(nil, _), do: false
   def tile_in_final_path?(%{final_path: nil}, _), do: false
   def tile_in_final_path?(%{final_path: []}, _), do: false
+
   def tile_in_final_path?(%{final_path: final_path}, position) do
     final_path |> Enum.any?(fn node -> node.position == position end)
   end
 
   def tile_in_open_list?(nil, _), do: false
   def tile_in_open_list?(%{open_list: nil}, _), do: false
   def tile_in_open_list?(%{open_list: []}, _), do: false
+
   def tile_in_open_list?(%{open_list: open_list}, position) do
     open_list |> Enum.any?(fn node -> node.position == position end)
   end
 
   def tile_in_closed_list?(nil, _), do: false
   def tile_in_closed_list?(%{closed_list: nil}, _), do: false
   def tile_in_closed_list?(%{closed_list: []}, _), do: false
+
   def tile_in_closed_list?(%{closed_list: closed_list}, position) do
     closed_list |> Enum.any?(fn node -> node.position == position end)
   end
@@ -239,6 +251,7 @@ defmodule PathDemoWeb.MapLive do
       ""
     end
   end
+
   defp update_disable(%{player_target: nil}), do: "disabled"
   defp update_disable(_), do: ""