From 2d400e5acf5dbe5f7300831cc879e62b82f4ed48 Mon Sep 17 00:00:00 2001
From: Kevin Huang <kev.y.huang@gmail.com>
Date: Sun, 20 Feb 2022 20:40:23 -0500
Subject: [PATCH] integrate "continuous" range for intervals

---
 .../predictions/predictions-game.js           |  7 +++++--
 .../predictions/questions/interval-choice.js  | 19 +++++++++++--------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/web/src/components/predictions/predictions-game.js b/web/src/components/predictions/predictions-game.js
index f33f3149..66f766c0 100644
--- a/web/src/components/predictions/predictions-game.js
+++ b/web/src/components/predictions/predictions-game.js
@@ -57,7 +57,7 @@ const PredictionsGame = ({ user }) => {
   }
 
   // render appropriate component for each question
-  function renderQuestion(question, date_expired, answer, disabled) {
+  function renderQuestion(question, date_expired, answer, disabled, step=1) {
     const qid = question.key;
     const prediction = snapshot.child(qid).val();
     const choices = question.child("choices").val();
@@ -110,6 +110,7 @@ const PredictionsGame = ({ user }) => {
             answer={answer}
             lower={choices[0]}
             upper={choices[1]}
+            step={step}
             date_expired={date_expired}
             prediction={prediction}
             explanation={question.child("explanation").val()}
@@ -134,12 +135,14 @@ const PredictionsGame = ({ user }) => {
   questions.forEach((question) => {
     const date_expired = question.child("date_expired").val();
     let answer = question.child("answer").val();
+    let step = question.child("step").val() === 'continuous' ? 0.1 : 1;
+
     if (answer !== null) {
       answer = parseInt(answer);
     }
 
     if (new Date(date_expired).getTime() > new Date().getTime()) {
-      liveQuestions.push(renderQuestion(question, date_expired, answer, false));
+      liveQuestions.push(renderQuestion(question, date_expired, answer, false, step));
     } else if (
       new Date(date_expired).getTime() < new Date().getTime() &&
       answer == null
diff --git a/web/src/components/predictions/questions/interval-choice.js b/web/src/components/predictions/questions/interval-choice.js
index 36e38d2d..f5818e6b 100644
--- a/web/src/components/predictions/questions/interval-choice.js
+++ b/web/src/components/predictions/questions/interval-choice.js
@@ -42,7 +42,7 @@ function IntervalChoice(props) {
 
   const validateLower = (e) => {
     const bound = Math.min(values[1], upper);
-    let value = parseInt(e.target.value);
+    let value = parseFloat(e.target.value);
     if (value < lower || e.target.value === "") {
       value = lower;
     } else if (value > bound) {
@@ -54,7 +54,7 @@ function IntervalChoice(props) {
 
   const validateUpper = (e) => {
     const bound = Math.max(values[0], lower);
-    let value = parseInt(e.target.value);
+    let value = parseFloat(e.target.value);
     if (value > upper || e.target.value === "") {
       value = upper;
     } else if (value < bound) {
@@ -95,6 +95,13 @@ function IntervalChoice(props) {
     }
   }
 
+  function update(value, values, step) {
+    if (step === 1) {
+      setValues([value && parseInt(value), values[1]])
+    }
+    setValues([value && parseFloat(value), values[1]]);
+  }
+
   return (
     <form onSubmit={(event) => afterSubmission(event)}>
       <Grid mt={1} mx={3} gap={0} columns={[2, "3fr 5fr"]}>
@@ -152,9 +159,7 @@ function IntervalChoice(props) {
             max={upper}
             value={values[0]}
             disabled={props.disabled}
-            onChange={(e) =>
-              setValues([e.target.value && parseInt(e.target.value), values[1]])
-            }
+            onChange={(e) => update(e.target.value, values, props.step)}
             onBlur={validateLower}
             onKeyDown={(e) => {
               if (e.key === "Enter") e.target.blur();
@@ -172,9 +177,7 @@ function IntervalChoice(props) {
             max={upper}
             value={values[1]}
             disabled={props.disabled}
-            onChange={(e) =>
-              setValues([values[0], e.target.value && parseInt(e.target.value)])
-            }
+            onChange={(e) => update(e.target.value, values, props.step)}
             onBlur={validateUpper}
             onKeyDown={(e) => {
               if (e.key === "Enter") e.target.blur();