Fix form

GammaSpace · Nov 7, 2023 · f3caae5 · f3caae5
1 parent 0e93291
commit f3caae5
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 17 deletions.
diff --git a/css/main.css b/css/main.css
@@ -218,6 +218,10 @@ tw-story {
   border-color: black transparent transparent transparent;
 }
 
+button {
+  @apply cursor-pointer rounded-full bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
+}
+
 /* Show the tooltip text when you hover over the tooltip container */
 .tooltip-container:hover .tooltip-text {
   visibility: visible;

diff --git a/twine_src/css/output.css b/twine_src/css/output.css
@@ -1520,11 +1520,6 @@ select{
   line-height: 1.5rem;
 }
 
-.text-gray-500{
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .text-gray-900{
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1540,6 +1535,11 @@ select{
   color: rgb(229 229 229 / var(--tw-text-opacity));
 }
 
+.text-neutral-50{
+  --tw-text-opacity: 1;
+  color: rgb(250 250 250 / var(--tw-text-opacity));
+}
+
 .text-neutral-900{
   --tw-text-opacity: 1;
   color: rgb(23 23 23 / var(--tw-text-opacity));
@@ -1897,6 +1897,37 @@ tw-story {
   border-color: black transparent transparent transparent;
 }
 
+button{
+  cursor: pointer;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+button:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
+}
+
+button:focus-visible{
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: #4f46e5;
+}
+
 /* Show the tooltip text when you hover over the tooltip container */
 
 .tooltip-container:hover .tooltip-text {
@@ -2018,6 +2049,10 @@ tw-story {
   opacity: 0.75;
 }
 
+.disabled\:opacity-25:disabled{
+  opacity: 0.25;
+}
+
 @media (prefers-color-scheme: dark){
   .dark\:bg-neutral-500{
     --tw-bg-opacity: 1;

diff --git a/twine_src/main.twee b/twine_src/main.twee
@@ -18,35 +18,35 @@ Jammy Jam
 
 
         <div>
-            <label for="email" class="block text-sm font-medium leading-6 text-gray-900">What's your name?</label>
+            <label for="playerName" class="block text-sm font-medium leading-6 text-gray-900">What's your name?</label>
             <div class="mt-2">
                 <input id="playerName" name="playerName" type="text" value="" oninput="setup.checkInputs()" class="customization-text-input">
             </div>
         </div>
         <div>
-            <label for="email" class="block text-sm font-medium leading-6 text-gray-900">What's your planet's name?</label>
+            <label for="planetName" class="block text-sm font-medium leading-6 text-gray-900">What's your planet's name?</label>
             <div class="mt-2">
                 <input id="planetName" name="planetName" type="text" value="" oninput="setup.checkInputs()" class="customization-text-input">
             </div>
         </div>
         <div>
-            <label for="comment" class="block text-sm font-medium leading-6 text-gray-900">Tell us more about your planet.</label>
+            <label for="planetDescription" class="block text-sm font-medium leading-6 text-gray-900">Tell us more about your planet.</label>
             <div class="mt-2">
-            <textarea rows="4" name="planetDescription" id="planetDescription" class="customization-textarea" oninput="setup.checkInputs()" />
+            <textarea rows="4" name="planetDescription" id="planetDescription" class="customization-textarea" oninput="setup.checkInputs()"></textarea>
             </div>
         </div>
 
         <div>
-        <label class="text-base font-semibold text-gray-900">Home Planet</label>
-        <p class="text-sm text-gray-500">Pick a planet body:</p>
-        <fieldset class="mt-4">
+        <p for="planetImg" class="text-base font-semibold text-neutral-50">Home Planet</p>
+        <p class="text-sm text-neutral-200">Pick a planet body:</p>
+        <fieldset class="mt-4" id="planetImg">
             <div class="space-y-4">
                 <% 
                 ["saturn", "banana", "blorb", "earth", "macaroni"].map(function(imgName, index) {
                     var imgPath = "img/player-planet-" + imgName + ".png";
                 %>
                     <div class="flex items-center">
-                    <input id="planetImg<%= index %>" value="<%= imgPath %>" name="planetImage" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" <%= index === 0 ? "checked" : "" %>>
+                    <input oninput="setup.checkInputs()" id="planetImg<%= index %>" value="<%= imgPath %>" name="planetImage" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" <%= index === 0 ? "checked" : "" %>>
                     <label for="planetImg<%= index %>" class="ml-3 h-12 w-12 block text-sm font-medium leading-6 text-gray-900"><img src="<%= imgPath %>" alt="Planet Image <%= index + 1 %>"></label>
                     </div>
                 <% 
@@ -57,7 +57,7 @@ Jammy Jam
         </div>
 
 
-        <button id="nextButton" onclick="setup.savePlayerInfo()" class="enabled:hover:border-gray-400 disabled:opacity-75" disabled>Next</button>
+        <button id="nextButton" onclick="setup.savePlayerInfo()" class="disabled:opacity-25" disabled>Next</button>
 
 
         <% if (story.state.playerName && story.state.planetName) { %>

diff --git a/twine_src/scripts/init.js b/twine_src/scripts/init.js
@@ -148,12 +148,28 @@ setup.savePlayerInfo = function () {
 };
 
 setup.checkInputs = function () {
-  var playerName = document.getElementById("playerName").value;
-  var planetName = document.getElementById("planetName").value;
+  var playerName = document.getElementById("playerName").value.trim();
+  var planetName = document.getElementById("planetName").value.trim();
+  var planetDescription = document
+    .getElementById("planetDescription")
+    .value.trim();
+
+  // Access the checked radio button by name
+  var planetImage = document.querySelector(
+    'input[name="planetImage"]:checked'
+  )?.value;
+
   var nextButton = document.getElementById("nextButton");
 
-  nextButton.disabled = !(playerName && planetName);
+  // Enable the button only if all fields have values
+  nextButton.disabled = !(
+    playerName &&
+    planetName &&
+    planetDescription &&
+    planetImage
+  );
 };
+
 story.state.setHe = function () {
   story.state.pronouns = ["he", "him", "his", "his", "he's"];
   story.state.cPronouns = ["He", "Him", "His", "His", "He's"];