Add availability field

GameMakersToolkit · Jan 23, 2024 · d2d4bd1 · d2d4bd1
1 parent a61e454
commit d2d4bd1
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 5 deletions.
diff --git a/api/src/main/kotlin/com/gmtkgamejam/models/posts/Availability.kt b/api/src/main/kotlin/com/gmtkgamejam/models/posts/Availability.kt
@@ -2,6 +2,11 @@ package com.gmtkgamejam.models.posts
 
 enum class Availability {
 
+    /**
+     * Haven't decided/don't know yet
+     */
+    UNSURE,
+
     /**
      * A few hours over the whole jam
      */

diff --git a/ui/src/base.css b/ui/src/base.css
@@ -3,6 +3,14 @@
         @apply bg-gray-300 border-2 border-gray-300 rounded-xl placeholder-gray-600 text-gray-900;
     }
 
+    input[type="radio"] {
+        appearance: none;
+        /* For iOS < 15 to remove gradient background */
+        background-color: #fff;
+        /* Not removed via appearance */
+        margin: 0;
+    }
+
     main {
         @apply container mx-auto p-1 px-4 pb-6;
         padding-bottom: 96px;

diff --git a/ui/src/pages/mypost/MyPost.css b/ui/src/pages/mypost/MyPost.css
@@ -1,7 +1,7 @@
 @layer components {
     .c-form-block {
-        .form-block__input {
-
+        .form-block__availability {
+            @apply block sm:inline-block rounded-lg p-2 m-0 mb-2 mr-2 border border-white text-white;
         }
     }
 }
diff --git a/ui/src/pages/mypost/MyPost.tsx b/ui/src/pages/mypost/MyPost.tsx
@@ -45,6 +45,8 @@ export const MyPost: React.FC<{
                 <FieldTeamSize />
             </div>
 
+            <FieldAvailability currentAvailability={values.availability} />
+
             <Button
                 className="mt-4 bg-theme-d-7 rounded-xl w-full sm:w-full md:w-auto md:float-right"
                 type="button"
@@ -55,6 +57,8 @@ export const MyPost: React.FC<{
             >
                 {isSubmitting ? "Please wait..." : `${hasPost ? "Update" : "Create"} Post`}
             </Button>
+            {/* Quick workaround to stop Create Post button falling off bottom of form, until we replace float-right */}
+            <div className="clear-both">&nbsp;</div>
         </Form>
     )
 }
@@ -185,4 +189,32 @@ const FieldTeamSize: React.FC = () => {
             </span>
         </div>
     )
-}
+}
+
+const FieldAvailability: React.FC<{currentAvailability: string}> = ({currentAvailability}) => {
+
+    const availabilityOptions: CustomSelectOption[] = [
+        {label: "Not sure/haven't decided", value: "UNSURE"},
+        {label: "A few hours over the whole jam", value: "MINIMAL"},
+        {label: "Less than 4 hours per day", value: "PART_TIME"},
+        {label: "4-8 hours per day", value: "FULL_TIME"},
+        {label: "As much time as I can", value: "OVERTIME"}
+    ];
+
+    return (
+        <div className="c-form-block bg-black w-full grid-cols-1">
+            <div id="availability-radio-group">Availability</div>
+            <div role="group" aria-labelledby="availability-radio-group">
+                {availabilityOptions.map(option => (
+                    <label
+                        key={option.value}
+                        className={`form-block__availability ${option.value == currentAvailability ? "bg-theme" : "bg-theme-d-4 hover:bg-theme-d-7"}`}
+                    >
+                        <Field type="radio" name="availability" value={option.value} />
+                        {option.label}
+                    </label>
+                ))}
+            </div>
+        </div>
+    )
+}
diff --git a/ui/src/pages/mypost/MyPostWrapper.tsx b/ui/src/pages/mypost/MyPostWrapper.tsx
@@ -16,8 +16,8 @@ const defaultFormValues: Post = {
     skillsSought: [],
     languages: ["en"],
     preferredTools: [],
-    availability: "MINIMAL", //allAvailabilities[0],
-    timezoneOffsets: ["1"] // ["UTC+0"] as TimezoneOffset[],
+    availability: "UNSURE",
+    timezoneOffsets: ["1"],
 }
 
 export const MyPostWrapper: React.FC = () => {