Add visual debugging information

- Restore some deleted css
- Restyle a bit
- Add Morpheus

Author: mbuffa

assets/css/app.scss

@@ -1,2 +1,92 @@
+/* This file is for your main application css. */
+@import "./phoenix.css";
 @import "./tile_map.scss";
 @import "../node_modules/nprogress/nprogress.css";
+
+/* LiveView specific classes for your customizations */
+.phx-no-feedback.invalid-feedback,
+.phx-no-feedback .invalid-feedback {
+  display: none;
+}
+
+.phx-click-loading {
+  opacity: 0.5;
+  transition: opacity 1s ease-out;
+}
+
+.phx-disconnected{
+  cursor: wait;
+}
+.phx-disconnected *{
+  pointer-events: none;
+}
+
+.phx-modal {
+  opacity: 1!important;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.phx-modal-content {
+  background-color: #fefefe;
+  margin: 15% auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+.phx-modal-close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.phx-modal-close:hover,
+.phx-modal-close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* Alerts and form errors */
+.alert {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.alert-info {
+  color: #31708f;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+.alert-warning {
+  color: #8a6d3b;
+  background-color: #fcf8e3;
+  border-color: #faebcc;
+}
+.alert-danger {
+  color: #a94442;
+  background-color: #f2dede;
+  border-color: #ebccd1;
+}
+.alert p {
+  margin-bottom: 0;
+}
+.alert:empty {
+  display: none;
+}
+.invalid-feedback {
+  color: #a94442;
+  display: block;
+  margin: -1rem 0 2rem;
+}

assets/css/tile_map.scss

@@ -1,16 +1,21 @@
+body {
+  font-family: sans-serif;
+}
+
 * {
   margin: 0;
   padding: 0;
 }
 
+h1 {
+  margin: 1em;
+  text-align: center;
+}
+
 div.tilemap-container {
   display: flex;
-
-  & div.tile_map {
-  }
-
-  & div.toolbar {
-  }
+  flex-flow: row nowrap;
+  width: 100%;
 }
 
 div.tile_map {
@@ -28,7 +33,8 @@ div.tile_map {
     height: 64px;
     display: table-cell;
 
-    border: 1px solid lightgrey;
+    outline: 1px solid lightgrey;
+    outline-offset: -1px;
     border-collapse: collapse;
 
     img, div {
@@ -42,11 +48,11 @@ div.tile_map {
       color: white;
 
       // FIXME
-      display: none;
+      // display: none;
     }
 
     &.tile-clear {
-      background-color: #c2b280;
+      background-color: white;
       cursor: pointer;
     }
 
@@ -55,7 +61,7 @@ div.tile_map {
       cursor: not-allowed;
     }
 
-    div.entity, div.target {
+    div.entity, div.target, div.open_list {
       width: 64px;
       height: 64px;
       // display: inline-block;
@@ -70,5 +76,61 @@ div.tile_map {
 
       }
     }
+
+    div.open_list {
+      background-color: lightblue;
+    }
+
+    div.closed_list {
+      background-color: orange;
+    }
+
+    div.info-container {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-evenly;
+
+      span.span-g {
+        width: 50%;
+        text-align: left;
+      }
+
+      span.span-h {
+        width: 50%;
+        text-align: right;
+      }
+
+      span.span-f {
+        font-size: 1.4em;
+      }
+    }
+  }
+}
+
+div.toolbar {
+  flex: auto;
+
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: space-around;
+
+  button {
+    padding: 1em;
+    font-size: 1.4em;
+    cursor: pointer;
+  }
+
+  img.morpheus {
+    max-width: 300px;
+    margin: auto;
   }
-}
+}
+
+ul.entities-list {
+  background-color: black;
+  color: white;
+  font-family: monospace;
+  font-size: 1.4em;
+  padding: 1em;
+  list-style-type: none;
+}

assets/static/images/morpheus.jpg

@@ -19,15 +19,51 @@ defmodule MoveYourCedric.Models.Player do
     {:ok, state}
   end
 
-  def handle_call(:get_status, _from, state) do
-    {:reply, state.status, state}
+  def update_path(tiles) do
+    GenServer.cast(__MODULE__, {:update_path, tiles})
+  end
+
+  def walk_path() do
+    GenServer.cast(__MODULE__, :walk_path)
+  end
+
+  def get_path() do
+    GenServer.call(__MODULE__, :get_path)
+  end
+
+  def get_position() do
+    GenServer.call(__MODULE__, :get_position)
+  end
+
+  def get_status() do
+    GenServer.call(__MODULE__, :get_status)
+  end
+
+  def get_target() do
+    GenServer.call(__MODULE__, :get_target)
+  end
+
+  def set_position(position) do
+    GenServer.cast(__MODULE__, {:set_position, position})
+  end
+
+  def pick_target(position) do
+    GenServer.cast(__MODULE__, {:pick_target, position})
+  end
+
+  def handle_call(:get_path, _from, state) do
+    {:reply, state.path, state}
   end
 
   def handle_call(:get_position, _from, state) do
     {:reply, state.position, state}
   end
 
-    def handle_call(:get_target, _from, state) do
+  def handle_call(:get_status, _from, state) do
+    {:reply, state.status, state}
+  end
+
+  def handle_call(:get_target, _from, state) do
     {:reply, state.target, state}
   end
 
@@ -174,11 +210,8 @@ defmodule MoveYourCedric.Models.Player do
   def handle_cast(:walk_path, %{path: %{final_path: []}} = state) do
     Logger.debug("[PLAYER] Reached destination.")
 
-    new_path =
-      %{state.path | final_path: nil}
-
     state =
-      %{state | path: new_path,
+      %{state | path: nil,
                 position: state.target,
                 status: :idle,
                 target: nil}
@@ -200,34 +233,6 @@ defmodule MoveYourCedric.Models.Player do
     {:noreply, state}
   end
 
-  def update_path(tiles) do
-    GenServer.cast(__MODULE__, {:update_path, tiles})
-  end
-
-  def walk_path() do
-    GenServer.cast(__MODULE__, :walk_path)
-  end
-
-  def get_status() do
-    GenServer.call(__MODULE__, :get_status)
-  end
-
-  def get_position() do
-    GenServer.call(__MODULE__, :get_position)
-  end
-
-  def set_position(position) do
-    GenServer.cast(__MODULE__, {:set_position, position})
-  end
-
-  def get_target() do
-    GenServer.call(__MODULE__, :get_target)
-  end
-
-  def pick_target(position) do
-    GenServer.cast(__MODULE__, {:pick_target, position})
-  end
-
   defp pick_target([tx, ty] = target, %{position: [tx, ty]} = state) do
     %{state | status: :idle, target: target, path: nil}
   end