From ae5f802aaac2104a57bb71ab6bde8ccdddb0a5c2 Mon Sep 17 00:00:00 2001
From: MA Beaudet <ma@beaudet.xyz>
Date: Fri, 5 Nov 2021 15:45:59 +0100
Subject: [PATCH] feat(web): add warning handling for faillible wasm functions

---
 static/index.html |  1 +
 static/index.js   | 21 ++++++++++++++++-----
 static/styles.css |  5 +++++
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/static/index.html b/static/index.html
index 107ab1a..3d33e65 100644
--- a/static/index.html
+++ b/static/index.html
@@ -22,6 +22,7 @@
     <input class="input" id="eval-input" placeholder="2s 3d Td Kc 2d" type="text" />
     <button class="input" id="eval-button" type="submit">Evaluate</button>
     <div id="result">Score:<br />Hand value:</div>
+    <div id="warning"></div>
     <p>Based on Kevin L. Suffecool <a href="http://suffe.cool/poker/evaluator.html">poker hand evaluator</a>.</p>
     <footer>Code available on my <a href="https://git.beaudet.xyz/?p=poker-eval.git">git repository</a></footer>
     <script src="index.js" type="module" defer></script>
diff --git a/static/index.js b/static/index.js
index 4f6d712..c2510e0 100644
--- a/static/index.js
+++ b/static/index.js
@@ -8,11 +8,22 @@ const evalButton = document.getElementById("eval-button");
 evalButton.addEventListener("click", _ => {
   const inputText = document.getElementById("eval-input").value;
   const resultDiv = document.getElementById("result");
+  const warningDiv = document.getElementById('warning');
 
-  const result = eval_from_str(inputText);
-  const rank = hand_rank(result);
-  resultDiv.innerHTML = "Score: " + result + "<br />";
-  resultDiv.innerHTML += "Hand value: " + VALUE_STR[rank];
+  try {
+    const cards = parse_cards(inputText);
+    const result = eval_hand(cards);
+    const rank = hand_rank(result);
+    resultDiv.innerHTML = "Score: " + result + "<br />";
+    resultDiv.innerHTML += "Hand value: " + VALUE_STR[rank] + "<br />";
+    warningDiv.style.visibility = 'hidden';
+    warningDiv.innerHTML = "";
+
+  } catch (e) {
+    warningDiv.innerHTML = "😵 Wrong cards provided. Try something like this:<br />2s 3s 4s 5s 6s";
+    warningDiv.style.visibility = 'visible';
+    console.error(e);
+  }
 });
 
 const VALUE_STR = [
@@ -21,7 +32,7 @@ const VALUE_STR = [
   "Four of a Kind",
   "Full House",
   "Flush",
-  "Staight",
+  "Straight",
   "Three of a Kind",
   "Two Pair",
   "One Pair",
diff --git a/static/styles.css b/static/styles.css
index d2abf41..e9535a8 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -73,3 +73,8 @@ label {
     );
   outline: 3px solid transparent;
 }
+
+#warning {
+  visibility: hidden;
+  color: red;
+}
-- 
2.20.1