begin moving to js based timer countdown

Author: goncalotomas

assets/js/app.js

@@ -18,15 +18,74 @@
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
 import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from "phoenix"
-import {LiveSocket} from "phoenix_live_view"
+import { Socket } from "phoenix"
+import { LiveSocket } from "phoenix_live_view"
 import topbar from "../vendor/topbar"
 
+// if the duration is zero, return "done"
+// if the duration is less than a minute, return "{seconds}s"
+// if the duration is less than an hour, return "{minutes}m {seconds}s"
+// if the duration is less than a day, return "{hours}h {minutes}m {seconds}s"
+// if the duration is less than a year, return "{days}d {hours}h {minutes}m {seconds}s"
+function formatDuration(seconds) {
+    if (seconds === 0) {
+        return "done"
+    }
+
+    let minutes = Math.floor(seconds / 60)
+    let hours = Math.floor(minutes / 60)
+    let days = Math.floor(hours / 24)
+    let years = Math.floor(days / 365)
+
+    if (years > 0) {
+        return `${years}y ${days % 365}d ${hours % 24}h ${minutes % 60}m ${seconds % 60}s`
+    } else if (days > 0) {
+        return `${days}d ${hours % 24}h ${minutes % 60}m ${seconds % 60}s`
+    } else if (hours > 0) {
+        return `${hours}h ${minutes % 60}m ${seconds % 60}s`
+    } else if (minutes > 0) {
+        return `${minutes}m ${seconds % 60}s`
+    } else {
+        return `${seconds}s`
+    }
+
+}
+
+let Hooks = {}
+
+Hooks.Countdown = {
+    tick() {
+        let seconds = Math.floor((this.target - new Date()) / 1000)
+        if (seconds <= 0) {
+            this.el.innerHTML = "done"
+            pushEvent("update_timers", this.el, {})
+            return
+        } else {
+            this.el.innerHTML = formatDuration(seconds)
+            this.timeout = setTimeout(() => this.tick(), 1000)
+        }
+    },
+    mounted() {
+        this.target = new Date(this.el.dataset.target)
+        this.tick()
+    },
+    destroyed() {
+        clearTimeout(this.timeout)
+    },
+    updated() {
+        clearTimeout(this.timeout)
+        this.mounted()
+    }
+}
+
 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, {
+    params: { _csrf_token: csrfToken },
+    hooks: Hooks
+})
 
 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
 window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
 

lib/galaxies/planets.ex

@@ -63,7 +63,7 @@ defmodule Galaxies.Planets do
           add_resources(planet_id, -cost_metal, -cost_crystal, -cost_deuterium)
 
           # TODO: replace with a real formula
-          construction_duration_seconds = level + 1
+          construction_duration_seconds = :math.pow(level, 2) |> trunc()
 
           event_id = Ecto.UUID.generate()
           now = DateTime.utc_now(:second)
@@ -336,6 +336,7 @@ defmodule Galaxies.Planets do
         else
           Repo.all(from pb in PlanetBuilding, where: pb.planet_id == ^planet.id)
         end
+
       check_prerequisites(prereqs, player_researches, planet_buildings)
     end
   end

lib/galaxies_web/live/resources_live.ex

@@ -11,14 +11,11 @@ defmodule GalaxiesWeb.ResourcesLive do
     _ = Planets.process_planet_events(socket.assigns.current_planet.id)
     build_queue = Planets.get_building_queue(socket.assigns.current_planet.id)
     planet_buildings = Accounts.get_planet_resource_buildings(socket.assigns.current_planet)
-    building_timers = timers_from_build_queue(build_queue)
-    schedule_next_timer_update()
 
     {:ok,
      socket
      |> assign(:build_queue, build_queue)
-     |> assign(:planet_buildings, planet_buildings)
-     |> assign(:building_timers, building_timers)}
+     |> assign(:planet_buildings, planet_buildings)}
   end
 
   defp timers_from_build_queue([]), do: %{}
@@ -80,7 +77,13 @@ defmodule GalaxiesWeb.ResourcesLive do
                       {hd(@build_queue).level}
                     </td>
                     <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-                      {format_timer(@building_timers[hd(@build_queue).building_id])}
+                      <span
+                        id="build-queue-countdown"
+                        phx-hook="Countdown"
+                        data-target={hd(@build_queue).completed_at}
+                      >
+                        {hd(@build_queue).completed_at}
+                      </span>
                     </td>
                     <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 lg:pr-8">
                       <a href="#" class="text-indigo-600 hover:text-indigo-900">
@@ -159,43 +162,54 @@ defmodule GalaxiesWeb.ResourcesLive do
     """
   end
 
-  def handle_info(:update_timers, socket) do
-    num_timers = Enum.count(socket.assigns.building_timers)
-
-    building_timers =
-      socket.assigns.building_timers
-      |> Enum.reduce(%{}, fn
-        {_building_id, secs}, acc when secs <= 1 ->
-          acc
-
-        {building_id, seconds}, acc ->
-          Map.put(acc, building_id, seconds - 1)
-      end)
-
-    socket =
-      if Enum.count(building_timers) != num_timers do
-        # building timer reached zero, meaning some building was upgraded
-        # re-fetch planet_buildings building queue and update building timers
-        current_planet = socket.assigns.current_planet
-        _ = Planets.process_planet_events(current_planet.id)
-        build_queue = Planets.get_building_queue(current_planet.id)
-        planet_buildings = Accounts.get_planet_resource_buildings(current_planet)
-
-        building_timers = timers_from_build_queue(build_queue)
-
-        socket
-        |> assign(:build_queue, build_queue)
-        |> assign(:building_timers, building_timers)
-        |> assign(:planet_buildings, planet_buildings)
-      else
-        socket
-        |> assign(:building_timers, building_timers)
-      end
-
-    # no need for periodic ticks if the current building timers Map is empty
-    unless Enum.empty?(socket.assigns.building_timers) do
-      schedule_next_timer_update()
-    end
+  def handle_info(event, socket) when event in [:update_timers, "update_timers"] do
+    dbg(:ping)
+
+    # building timer reached zero, meaning some building was upgraded
+    # re-fetch planet_buildings building queue and update building timers
+    current_planet = socket.assigns.current_planet
+    _ = Planets.process_planet_events(current_planet.id)
+    build_queue = Planets.get_building_queue(current_planet.id)
+
+    socket
+    |> assign(:build_queue, build_queue)
+
+    # num_timers = Enum.count(socket.assigns.building_timers)
+
+    # building_timers =
+    #   socket.assigns.building_timers
+    #   |> Enum.reduce(%{}, fn
+    #     {_building_id, secs}, acc when secs <= 1 ->
+    #       acc
+
+    #     {building_id, seconds}, acc ->
+    #       Map.put(acc, building_id, seconds - 1)
+    #   end)
+
+    # socket =
+    #   if Enum.count(building_timers) != num_timers do
+    #     # building timer reached zero, meaning some building was upgraded
+    #     # re-fetch planet_buildings building queue and update building timers
+    #     current_planet = socket.assigns.current_planet
+    #     _ = Planets.process_planet_events(current_planet.id)
+    #     build_queue = Planets.get_building_queue(current_planet.id)
+    #     planet_buildings = Accounts.get_planet_resource_buildings(current_planet)
+
+    #     building_timers = timers_from_build_queue(build_queue)
+
+    #     socket
+    #     |> assign(:build_queue, build_queue)
+    #     |> assign(:building_timers, building_timers)
+    #     |> assign(:planet_buildings, planet_buildings)
+    #   else
+    #     socket
+    #     |> assign(:building_timers, building_timers)
+    #   end
+
+    # # no need for periodic ticks if the current building timers Map is empty
+    # unless Enum.empty?(socket.assigns.building_timers) do
+    #   schedule_next_timer_update()
+    # end
 
     {:noreply, socket}
   end
@@ -222,16 +236,16 @@ defmodule GalaxiesWeb.ResourcesLive do
 
         building_timers = timers_from_build_queue(build_queue)
 
-        if Enum.empty?(socket.assigns.building_timers) do
-          # building timers was previously empty so we need to restart the periodic timer update
-          schedule_next_timer_update()
-        end
+        # if Enum.empty?(socket.assigns.building_timers) do
+        #   # building timers was previously empty so we need to restart the periodic timer update
+        #   # schedule_next_timer_update()
+        # end
 
         {:noreply,
          socket
          |> assign(:build_queue, build_queue)
          |> assign(:current_planet, current_planet)
-         |> assign(:building_timers, building_timers)
+         #  |> assign(:building_timers, building_timers)
          |> assign(:planet_buildings, planet_buildings)}
 
       {:error, error} ->
@@ -240,7 +254,7 @@ defmodule GalaxiesWeb.ResourcesLive do
   end
 
   defp schedule_next_timer_update() do
-    :erlang.send_after(@timer_update_interval, self(), :update_timers)
+    # :erlang.send_after(@timer_update_interval, self(), :update_timers)
   end
 
   # defp list_replace(list, to_replace, acc \\ [])