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

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

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

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


  render() {
    return <div>
      <h3>Settings</h3>
      <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[]) => {
            console.log(`FONT: ${font}`)
            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 we like?</p>

      <SettingsBlock />

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

      <br />

      <FoodItemsContainer title="Drinks">
        <FoodItem title="Chocolate flavor Soymilk" />
        <FoodItem title="Mango Juice" />
        <FoodItem title="Lingonberry Juice" />
        <FoodItem title="Pineapple Juice" />
        <FoodItem title="Yogurt-like drinks" />
        <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; 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" />
      </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">
        <FoodItem title="Garlic Bread!!!!!!!!!!!! So Good!!!" />
        <FoodItem title="Pizza" contents={{ containsMilk: true }} exclude={this.state.toggles} />
        <FoodItem title="Pasta" />
        <FoodItem title="Spongy Fried Battered Tofu" />
        <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="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="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"} exclude={this.state.toggles} />
      </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 we 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 Cooked Carrots" extra={"is Okay but prefer carrots to be cooked until soft enough to be smushed when pressed on"} />
        <AdvancedFoodItem title="Firm Cooked Broccoli" extra={"same as carrots"} />
        <AdvancedFoodItem title="Firm Cooked Cauliflower" extra={"same as carrots"} />
        <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"} />
        <FoodItem title="Anything else unexpectedly crunchy" />
        <FoodItem title="Sparkling Water" />
        <FoodItem title="Apple Cider Vinegar" />
        <FoodItem title="Anything over our limit of acidity for regular food/sauces" />
        <FoodItem title="Aniseed Flavor" />
        <AdvancedFoodItem title="Aniseed Liquorice Flavors" extra={"Absolutely love natural liquorice root flavor; hate anise"} />
      </FoodItemsContainer>
    </>;
  }
}