score and mobile

assets/css/app.css

@@ -2,6 +2,16 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@layer utilities {
+  .text-shadow {
+    text-shadow: 2px 2px 4px #000;
+  }
+
+  .text-outline {
+    text-shadow: 2px 2px 2px #801B71, -2px 2px 2px #801B71, 2px -2px 2px #801B71, -2px -2px 2px #801B71; 
+  }
+}
+
 body {
   @apply overflow-hidden;
 }

assets/js/app.js

@@ -22,8 +22,18 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
+let Hooks = {}
+Hooks.ChickenEgg = {
+  mounted() {
+    this.el.addEventListener("touchstart", _e => {
+      this.pushEvent("boak", {})
+    })
+  }
+}
+
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})

lib/chicken_egg_web/live/index_live.ex

@@ -5,7 +5,17 @@ defmodule ChickenEggWeb.IndexLive do
 
   def render(assigns) do
     ~H"""
-    <div class="board relative bg-green-700 w-screen h-screen" phx-window-keyup="boak" phx-key=" ">
+    <div
+      class="board relative bg-green-700 w-screen h-screen select-none"
+      id="chicken-egg"
+      phx-window-keyup="boak"
+      phx-key=" "
+      phx-hook="ChickenEgg"
+    >
+      <div class="score absolute right-0 z-50 text-fuchsia-50 text-4xl font-semibold p-4 text-outline">
+        <%= @score %>
+      </div>
+
       <ChickenComponents.chicken x={@chicken.x} y={@chicken.y} />
 
       <div id="chicken-eggs" phx-update="stream">
@@ -18,25 +28,24 @@ defmodule ChickenEggWeb.IndexLive do
   end
 
   def mount(_params, _session, socket) do
-    eggs = []
-
     {:ok,
      socket
      |> assign(:chicken, %{x: 42, y: 47})
-     |> stream(:eggs, eggs)}
+     |> assign(:score, 0)
+     |> stream(:eggs, [])}
   end
 
   def handle_event("boak", _params, socket) do
+    score = socket.assigns.score
     %{x: cx, y: cy} = socket.assigns.chicken
-    new_chicken = %{x: Enum.random(1..100), y: Enum.random(1..100)}
 
-    new_egg =
-      %{id: "egg#{cx}#{cy}", x: cx, y: cy}
-      |> IO.inspect()
+    new_egg = %{id: "egg#{cx}#{cy}", x: cx, y: cy}
+    new_chicken = %{x: Enum.random(1..99), y: Enum.random(1..99)}
 
     {:noreply,
      socket
      |> assign(:chicken, new_chicken)
+     |> assign(:score, score + 1)
      |> stream_insert(:eggs, new_egg)}
   end
 end