food-site/src/mainPage.tsx

import { Component, createRef } from "preact";
import { AdvancedFoodItem, FoodItem, FoodItemsContainer } from "./foodItems";
import { FoodTypeToggles } from "./foodTypeToggles";
import { FoodExcludeTypes } from "./types";

const FONT_TYPES = [
  ["default", "Default (Comic Sans, Comic Neue or Default)"],
  ["system", "System Sans Font (as picked by Bootstrap Defaults)"],
  ["comicneue", "Comic Neue"],
  ["opendyslexic", "Open Dyslexic"]
];

export class SettingsBlock extends Component {
  constructor() {
    super()
  }

  fontSettingSelectRef = createRef<HTMLSelectElement>()

  componentDidMount() {
    document.body.setAttribute("data-font", "default");
  }

  onFontChange() {
    if (!this.fontSettingSelectRef.current) return;
    let newFont = this.fontSettingSelectRef.current.value;

    for (let font of FONT_TYPES) {
      document.body.removeAttribute(`data-font-${font[1]}`)
    }

    document.body.setAttribute("data-font", newFont);
  }


  render() {
    return <div>
      <h2>Settings</h2>
      <div class="form-group">
        <label for="fontSettingSelect">Font</label>
        <select ref={this.fontSettingSelectRef} class="form-control" id="fontSettingSelect" onChange={() => this.onFontChange()}>
          {...FONT_TYPES.map((font: string[]) => {
            return <option value={font[0]}>{font[1]}</option>;
          })}
        </select>
      </div>
    </div>
  }
}

export class MainPage extends Component<unknown, { toggles: FoodExcludeTypes }> {
  constructor() {
    super()
  }


  render() {
    return <>
      <h1 class="mt-5">chaos's Food Likes/Dislikes</h1>
      <p class="lead">a hopefully helpful guide on what food i like?</p>

      <br />

      <SettingsBlock />

      <br />

      <FoodTypeToggles onChange={(toggles) => {
        this.setState({ toggles });
      }} />

      <br />

      <FoodItemsContainer title="Drinks">
        <FoodItem title="Chocolate Flavor Soy/Coconut Drink" />
        <FoodItem title="Mango Juice" />
        <FoodItem title="Lingonberry Juice" />
        <FoodItem title="Pineapple Juice" />
        <FoodItem title="Yogurt-like drinks" contents={{ containsMilk: true }} exclude={this.state.toggles} />
        <FoodItem title="Lactose Free Chocolate Milk" contents={{ containsMilk: true }} exclude={this.state.toggles} />
        <AdvancedFoodItem title="Caffeinated Energy Drinks" extra={"Brands such as Monster Energy & Red Bull"} />
        <AdvancedFoodItem
          title="Squash/Cordial/Fruit Juice Concentrate"
          extra={"Flavors such as \"Apple&Blackcurrent\", \"Blackcurrent\", \"Orange\" "}
        />
        <AdvancedFoodItem
          title="Fruity Alcoholic Ciders"
          extra="Has to be quite sugary and not at all bitter"
          contents={{ containsAlcohol: true }} exclude={this.state.toggles}
        />
        <AdvancedFoodItem
          title="Vodka-based Cocktails"
          extra="Good when sweet and fruity; do not like when too bitter"
          contents={{ containsAlcohol: true }} exclude={this.state.toggles}
        />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title="Snacks">
        <AdvancedFoodItem title="Chips" extra={"Also known as crisps; Flavors such as salted & sweet chilli are recommended"} />
        <AdvancedFoodItem title="Pringles" extra={"Salted; Sour Cream & Onion or also any other brand of Hyperbolic Paraboloid shaped potato snacks"} />
        <FoodItem title="Beef/Pork Jerky" contents={{ containsMeat: true }} exclude={this.state.toggles} />
        <AdvancedFoodItem title="Hummus" extra="For dipping of carrots and chips" />
        <AdvancedFoodItem title="Wheat/Starch-Coated Chilli Peanuts" extra="Not a fan of peanuts on own; but ok when coated" />
        <FoodItem title="Whole or Sliced Firm Cucumber" />
        <FoodItem title="Sliced or Sticks of Carrots" />
        <FoodItem title="Sweetcorn" />
        <FoodItem title="Firm Pickles" />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title="Treats">
        <AdvancedFoodItem title="Sugary Sweets" extra={"Preferably ones not too acidic"} />
        <AdvancedFoodItem title="Doughnuts" extra={"Circle shape with hole in middle; glazed good but not too much of it; NOT jam filled ones"} />
        <AdvancedFoodItem title="Yum-Yums" extra={"A kind of twisted doughnut dough covered in sugary glaze"} />
        <AdvancedFoodItem title="Chocolate" extra={"Light chocolate only; Can't be too bitter"} />
        <FoodItem title="Skittles" />
        <FoodItem title="Stroopwafels" contents={{ containsMilk: true }} exclude={this.state.toggles} />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title="Breakfast" extra="don't often have breakfast, but this is what i would have">
        <FoodItem title="Marmite Toast" />
        <FoodItem title="Bagels" />
        <AdvancedFoodItem title="Jam Toast" extra={"light thin layer of jam, not chunky jam; jams like cloudberry, strawberry, raspberry, orange"} />
        <AdvancedFoodItem title="Corn Flakes" extra={"Either dry or with oat milk"} />
        <AdvancedFoodItem title="Bran Flakes" extra={"Usually dry"} />
        <FoodItem title="Scrambled Egg" contents={{ containsEggs: true }} exclude={this.state.toggles} />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title="Smaller Foods">
        <FoodItem title="Chicken Nuggets" contents={{ containsMeat: true }} exclude={this.state.toggles} />
        <FoodItem title="Turkey Dinos" contents={{ containsMeat: true }} exclude={this.state.toggles} />
        <FoodItem title="Smile or Waffle shaped formed potato" />
        <FoodItem title="Fish Fingers" contents={{ containsFish: true }} exclude={this.state.toggles} />
        <FoodItem title="Yorkshire Puddings" contents={{ containsEggs: true, containsMilk: true }} exclude={this.state.toggles} />
        <AdvancedFoodItem title="Veggie Dippers" extra="As long as don't contain sensory bads; McDonalds kind are good" />
        <AdvancedFoodItem title="Falafel Wraps" extra={"Great with hummus&cucumber"} />
        <FoodItem title="Scrambled Eggs" contents={{ containsEggs: true }} exclude={this.state.toggles} />
        <FoodItem title="French Fries" />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title="Larger Foods">
        <AdvancedFoodItem title="Garlic Bread" extra={"So good,,,"} />
        <FoodItem title="Pizza" contents={{ containsMilk: true }} exclude={this.state.toggles} />
        <FoodItem title="Pasta" />
        <FoodItem title="Spongy Fried Battered Tofu" />
        <FoodItem title={"Tofu Vegetable Katsu-Style Curry"} />
        <FoodItem title="Rice or Cooked Grains" />
        <FoodItem title="Roast Potatos" />
        <FoodItem title="Baked Potatos" />
        <FoodItem title={"Fried Egg & French Fries"} contents={{ containsEggs: true }} exclude={this.state.toggles} />
        <FoodItem title="Carbonara" contents={{ containsEggs: true, containsMilk: true, containsMeat: true }} exclude={this.state.toggles} />
        <FoodItem title="Omlette" contents={{ containsEggs: true }} exclude={this.state.toggles} />
        <FoodItem title={"Cooked Potato with Spinach & Turmeric (Saag Aloo?)"} />
        <FoodItem title={"Pasta & Meatballs"} contents={{ containsMeat: true }} exclude={this.state.toggles} />
        <FoodItem title="Beef/Pork Chilli" contents={{ containsMeat: true }} exclude={this.state.toggles} />
        <AdvancedFoodItem title="Chilli Sin Carne" extra={"w/ rice is great; make sure kidney beans not too dry"} />
        <AdvancedFoodItem title="Burgers" extra="Preferably vegan soy or pea protein based burger; ones with beetroot in are nice; not wheat protein based" />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title="Ingredients / Condiments">
        <FoodItem title="Hendo's Relish" />
        <FoodItem title="Worcestershire Sauce" contents={{ containsFish: true }} exclude={this.state.toggles} />
        <AdvancedFoodItem title="Spicy Mayo for Fries" extra={"Good with fries"} contents={{ containsEggs: true }} exclude={this.state.toggles} />
        <AdvancedFoodItem title="Tomato Ketchup" extra={"Can't be too acidic"} />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title="Vegetables (for cooking)">
        <FoodItem title="Sweetcorn" />
        <AdvancedFoodItem title="Broccoli" extra={"Cooked to be very soft"} />
        <AdvancedFoodItem title="Cauliflower" extra={"Cooked to be very soft"} />
        <AdvancedFoodItem title="Carrot" extra={"Cooked to be very soft; or crunchy as a snack;"} />
        <FoodItem title="Swede / Rutabaga" />
        <AdvancedFoodItem title="Chili Peppers" extra={"Cooked to be soft; Cut up very finely or pureed"} />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title={"Soups & Stews"}>
        <AdvancedFoodItem title={"Chicken & Mushroom Soup"} extra="Mushroom either flavor or tiny fried bits of mushroom" contents={{ containsMeat: true }} exclude={this.state.toggles} />
        <AdvancedFoodItem title="Mushroom Soup" extra={"needs to be creamy, w/ coconut milk good"} />
        <FoodItem title="Tomato Soup" />
        <FoodItem title="Chicken Noodle Soup" contents={{ containsMeat: true }} exclude={this.state.toggles} />
        <FoodItem title="Nettle Soup" />
        <FoodItem title={"Tomatoey Stew w/ Potato & Soft Carrot"} />
      </FoodItemsContainer>

      <br />

      <FoodItemsContainer title="Sensory Bads (Do Not Like)">
        <AdvancedFoodItem title="Anything Bitter" extra="We are very sensitive to bitter things; way more than most ppl i know; even toast can sometimes be too bitter;" />
        <AdvancedFoodItem title="Lettuce" extra="Horrible crunch; only sometimes like the flat leafy kind but only nibbling on the lighter green parts" />
        <AdvancedFoodItem title="Spinach Stalks" extra={"Is fine if flattened & Stalks are removed; Is also fine pureed as can't texture then"} />
        <AdvancedFoodItem title="Onion" extra={"Too Crunchy; somewhat ok if cooked to remove all texture, fine as a powder or puree but not too sharp tasting"} />
        <AdvancedFoodItem title="Firm Mushrooms" extra={"Too Chewy; prefer mushrooms to be boiled or cooked in a way that makes them very soft and not tender"} />
        <AdvancedFoodItem title="Button Mushroom Stalks" extra={"Weird Texture"} />
        <AdvancedFoodItem title="Fried Shitake Mushroom" extra={"Again, also way too chewy and Bad"} />
        <AdvancedFoodItem title="Firm/Semi-Firm Cooked Vegetables" extra={"is Okay but prefer most vegetables to be cooked until soft enough to be smushed when pressed on"} />
        <AdvancedFoodItem title="Pickles that are too soft" extra={"is ok diced up as a ingredient; but do not like whole, closer to texture of firm cucumber is preferred"} />
        <AdvancedFoodItem title="Lettuce" extra="Horrible crunch; only sometimes like the flat leafy kind but only nibbling on the lighter green parts" />
        <AdvancedFoodItem title="Some Peppers" extra="Taste of bell peppers and jalapenos Very Bad And Repulsing Cannot Handle" />
        <AdvancedFoodItem title={"Peppers & Chillis"} extra="Bad when in large chunks, good when cut up to roughly size of cooked rice when surrounded by other foods of simular or larger size" />
        <AdvancedFoodItem title="Raw Garlic" extra={"Too sharp & digestive system isn't a fan; please lightly fry or soften; black garlic is yum"} />
        <AdvancedFoodItem title="Beansprouts" extra={"Too Crunch; VERY bad"} />
        <AdvancedFoodItem title="Baby Corn Cobs" extra={"Weird texture, never soft enough"} />
        <AdvancedFoodItem title="Vegan Cheese" extra={"Can't handle slimy/mucusy texture of most; the ones that puff up into a solid crunchy-ish bubble on pizza are Okay but not the ones that stay soft"} />
        <AdvancedFoodItem title="Seitan/Gluten-Based Protein" extra={"Can't handle texture of it, very weird"} />
        <AdvancedFoodItem title="Peanut Butter" extra={"Too creamy or crunchy, never a fan of taste"} />
        <AdvancedFoodItem title="Silken Tofu" extra={"Too soft, falls apart to easily, bad texture, prefer firmer pressed tofus"} />
        <AdvancedFoodItem title="Lotus Fruit" extra={"Weird texture; Also trypophobia;"}/>
        <AdvancedFoodItem title="Crumpets" extra={"Can have if served upside down, otherwise no, too many holes"} />
        <AdvancedFoodItem title="Mucus-like Textures" extra={"Common in Vegan Cheese.."} />
        <AdvancedFoodItem title="Chewy Tofu" extra={"We like it but only a small amount of it; after a while brain starts to hate it; is good when can add as much as want to food"} />
        <FoodItem title="Shrimp/Prawns" contents={{ containsFish: true }} exclude={this.state.toggles} />
        <FoodItem title="Celery" />
        <AdvancedFoodItem title="Fiberous Textures" extra={"Stuff like mango and some other fruits"} />
        <FoodItem title="Cooked Fruit" />
        <FoodItem title="Anything else unexpectedly crunchy" />
        <FoodItem title="Sparkling Water" />
        <FoodItem title="Apple Cider Vinegar" />
        <FoodItem title="Anything over my limit of acidity for regular food/sauces, like mcdonalds ketchup" />
        <FoodItem title="Aniseed Flavor" />
        <AdvancedFoodItem title="Aniseed Liquorice Flavors" extra={"Absolutely love natural liquorice root flavor; hate anise"} />
      </FoodItemsContainer>

      <br />
    </>;
  }
}