Add missing size/availability form fields

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
      */

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;

ui/src/pages/home/components/common/CustomSelect.tsx

@@ -14,7 +14,7 @@ export type ValueType<OptionType> = OptionType | OptionsType<OptionType> | null
 
 export interface CustomSelectOption {
     label: ReactNode;
-    value: string | undefined;
+    value: string | number | undefined;
 }
 
 interface CustomSelectProps extends FieldProps {

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;
         }
     }
 }

ui/src/pages/mypost/MyPost.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {Button} from "../../common/components/Button.tsx";
 import {Field, Form, FormikProps} from "formik";
 import {skills} from "../../common/models/skills.tsx";
-import CustomSelect from "../home/components/common/CustomSelect.tsx";
+import CustomSelect, {CustomSelectOption} from "../home/components/common/CustomSelect.tsx";
 import {languages} from "../../common/models/languages.ts";
 import {tools} from "../../common/models/engines.tsx";
 import {timezones} from "../../common/models/timezones.ts";
@@ -42,8 +42,11 @@ export const MyPost: React.FC<{
 
             <div className="c-form-block bg-black">
                 <FieldTimezones />
+                <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"
@@ -54,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>
     )
 }
@@ -158,4 +163,58 @@ const FieldTimezones: React.FC = () => {
             </span>
         </div>
     )
-}
+}
+
+const FieldTeamSize: React.FC = () => {
+
+    const teamSizes: CustomSelectOption[] = []
+    for (let i = 1; i <= 20; i++) {
+        teamSizes.push({label: i, value: i});
+    }
+
+    return (
+        <div>
+            <label htmlFor="size">How many people are in your team/group?</label>
+            <Field
+                name="size"
+                className="c-dropdown form-block__field"
+                options={teamSizes}
+                component={CustomSelect}
+                placeholder={"Select option(s)"}
+                isMulti={false}
+            />
+
+            <span className="text-xs">
+                (Including you!)
+            </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>
+    )
+}

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 = () => {

ui/vite.config.ts

@@ -4,7 +4,7 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig(() => {
   return {
-    envDir: "../",
+    // envDir: "../", // Uncomment this if you're running the UI outside of Dockerw
     server: {
       host: "0.0.0.0",
       port: 3000,