Only react when enter pressed

lib/flag_quiz_web/live/page_live.ex

@@ -9,6 +9,7 @@ defmodule FlagQuizWeb.PageLive do
      assign(socket,
        in_game?: false,
        tick_timer: nil,
+       fail_timer: nil,
        total: Application.get_env(:flag_quiz, :q_amount)
      )}
   end
@@ -26,14 +27,23 @@ defmodule FlagQuizWeb.PageLive do
       name = Map.get(params, "country-input", "") |> process_name()
       valid = name in socket.assigns.flag_names
 
-      if valid do
-        if not is_nil(socket.assigns.tick_timer),
-          do: Process.cancel_timer(socket.assigns.tick_timer)
+      if not is_nil(socket.assigns.fail_timer),
+        do: Process.cancel_timer(socket.assigns.fail_timer)
 
-        Process.send_after(self(), :next, 2_000)
-      end
+      socket =
+        if valid do
+          if not is_nil(socket.assigns.tick_timer),
+            do: Process.cancel_timer(socket.assigns.tick_timer)
 
-      {:noreply, assign(socket, valid?: valid)}
+          Process.send_after(self(), :next, 2_000)
+          socket
+        else
+          socket
+          |> push_event("clear-input", %{})
+          |> assign(fail_timer: Process.send_after(self(), :clear_failed, 1_000))
+        end
+
+      {:noreply, assign(socket, valid?: valid, failed?: not valid)}
     else
       {:noreply, socket}
     end
@@ -52,6 +62,10 @@ defmodule FlagQuizWeb.PageLive do
 
   def handle_info(:tick, %{assigns: %{time: time}} = socket) when time <= 1 do
     Process.send_after(self(), :reset, 2_000)
+
+    if not is_nil(socket.assigns.fail_timer),
+      do: Process.cancel_timer(socket.assigns.fail_timer)
+
     {:noreply, assign(socket, time: 0, failed?: true)}
   end
 
@@ -64,6 +78,10 @@ defmodule FlagQuizWeb.PageLive do
     {:noreply, assign(socket, in_game?: false)}
   end
 
+  def handle_info(:clear_failed, %{assigns: %{time: time}} = socket) when time > 0 do
+    {:noreply, assign(socket, failed?: false)}
+  end
+
   def handle_info(msg, socket) do
     Logger.debug("Got unknown msg: #{inspect(msg)}")
     {:noreply, socket}

lib/flag_quiz_web/live/page_live.html.leex

@@ -5,13 +5,13 @@
   <% not @in_game? -> %>
     <h1>Lippuvisa / Flag Quiz</h1>
     <p>
-      Lippuvisassa lippukone arpoo sinulle <%= Application.get_env(:flag_quiz, :q_amount) %> lippua, joista jokaisen kohdalla sinulla on <%= Application.get_env(:flag_quiz, :q_time) %> sekuntia aikaa kirjoittaa vastauskenttään kyseessä olevan valtion nimi. Oikeaa vastausta saat arvata niin monta kertaa kuin ehdit aikarajan puitteissa. Lippukone hyväksyy vastauksen sekä englannin että suomen kielellä. Kirjoita valtion nimi siinä muodossa, jota valtiosta yleisesti käytetään (esim. Suomi, ei Suomen tasavalta, tai Pohjois-Korea, ei Korean demokraattinen kansantasavalta). Isoilla ja pienillä alkukirjaimilla ei kuitenkaan ole väliä, kuten ei myöskään diakriittisillä merkeillä (esim. ã, í, ž jne), väliviivoilla, välilyönneillä ja ääkkösillä. Muita poikkeamia kirjoitusasussa lippukone ei salli. Oikea vastaus hyväksytään automaattisesti, mutta halutessa voi painaa myös enteriä. Mikäli aika loppuu, visa päättyy.
+      Lippuvisassa lippukone arpoo sinulle <%= Application.get_env(:flag_quiz, :q_amount) %> lippua, joista jokaisen kohdalla sinulla on <%= Application.get_env(:flag_quiz, :q_time) %> sekuntia aikaa kirjoittaa vastauskenttään kyseessä olevan valtion nimi. Oikeaa vastausta saat arvata niin monta kertaa kuin ehdit aikarajan puitteissa. Lippukone hyväksyy vastauksen sekä englannin että suomen kielellä. Kirjoita valtion nimi siinä muodossa, jota valtiosta yleisesti käytetään (esim. Suomi, ei Suomen tasavalta, tai Pohjois-Korea, ei Korean demokraattinen kansantasavalta). Isoilla ja pienillä alkukirjaimilla ei kuitenkaan ole väliä, kuten ei myöskään diakriittisillä merkeillä (esim. ã, í, ž jne), väliviivoilla, välilyönneillä ja ääkkösillä. Muita poikkeamia kirjoitusasussa lippukone ei salli. Paina enter-näppäintä kirjoitettuasi vastauksen. Mikäli aika loppuu, visa päättyy.
     </p>
 
     <p>Onnea matkaan!</p>
 
     <p>
-      In Flag Quiz the game will randomly select <%= Application.get_env(:flag_quiz, :q_amount) %> flags and you have <%= Application.get_env(:flag_quiz, :q_time) %> seconds of time to guess each one's country. You can attempt as many answers as you have time to. You can answer in English or Finnish. Prefer the colloquial name of a country to the official one, for example "North Korea" instead of "Democratic People's Republic of Korea". Characters outside a-z will be converted to a-z and other special characters and spaces are ignored. The correct answer will be automatically accepted, but you can also press enter. If the time ends, the game ends.
+      In Flag Quiz the game will randomly select <%= Application.get_env(:flag_quiz, :q_amount) %> flags and you have <%= Application.get_env(:flag_quiz, :q_time) %> seconds of time to guess each one's country. You can attempt as many answers as you have time to. You can answer in English or Finnish. Prefer the colloquial name of a country to the official one, for example "North Korea" instead of "Democratic People's Republic of Korea". Characters outside a-z will be converted to a-z and other special characters and spaces are ignored. Press enter to submit you answer. If the time ends, the game ends.
     </p>
 
     <p>Good luck!</p>
@@ -36,13 +36,12 @@
     <p id="timer">
       <%= if not @valid?, do: @time %>
     </p>
-    <form id="input-form" method="post" phx-change="flag-input" phx-submit="flag-input">
+    <form id="input-form" method="post" phx-submit="flag-input">
       <input
         id="country-input"
         name="country-input"
         type="text"
         placeholder="Mikä maa? / Which country?"
-        phx-debounce="500"
         <%= if @valid? or @time == 0, do: "disabled" %>
         phx-hook="CountryInput"
       />