Add navigation/cooking mode

[lucharo]

To implement this feature, you can follow these steps:

1. Create a state variable to hold the current slide index.
2. Create a function to handle the spacebar event.
3. Add an event listener for the spacebar event.
4. Create a function to handle the play button click event.
5. Add CSS classes for active and inactive steps.
6. Apply the CSS classes conditionally based on the current slide index.

Here's an updated version of your Recipe.tsx component with the changes:

import React, { useState, useEffect } from "react";
import RecipeMultiplier from "./RecipeMultiplier";

// ... other imports

const Recipe = () => {
  // ... your existing state variables

  // Step 1: Create a state variable to hold the current slide index
  const [currentSlide, setCurrentSlide] = useState(0);

  // Step 2: Create a function to handle the spacebar event
  const handleSpacebar = (event: KeyboardEvent) => {
    if (event.code === "Space") {
      setCurrentSlide((prevSlide) => (prevSlide + 1) % recipe.methods.length);
    }
  };

  // Step 3: Add an event listener for the spacebar event
  useEffect(() => {
    window.addEventListener("keydown", handleSpacebar);
    return () => {
      window.removeEventListener("keydown", handleSpacebar);
    };
  }, []);

  // Step 4: Create a function to handle the play button click event
  const handlePlayClick = () => {
    setCurrentSlide((prevSlide) => (prevSlide + 1) % recipe.methods.length);
  };

  // ... your existing functions

  return (
    // ... your existing JSX

    <div className="column methods">
      <h3>Methods</h3>
      {/* Step 5: Add the play button */}
      <Button variant="contained" color="primary" onClick={handlePlayClick}>
        Play
      </Button>
      <ol>
        {recipe.methods.map((step, index) => (
          // Step 6: Apply the CSS classes conditionally based on the current slide index
          <li
            key={index}
            className={index === currentSlide ? "active-step" : "inactive-step"}
          >
            {step}
          </li>
        ))}
      </ol>
      {/* ... your existing Notes JSX */}
    </div>
  );
};

export default Recipe;

And then add the CSS classes in your styles.css:

.active-step {
  font-weight: bold;
}

.inactive-step {
  opacity: 0.5;
}

This implementation will:

1. Create a state variable currentSlide to hold the index of the current slide.
2. Create a handleSpacebar function to increment the currentSlide value when the spacebar is pressed.
3. Use the useEffect hook to add and remove the event listener for the spacebar event.
4. Create a handlePlayClick function to increment the currentSlide value when the play button is clicked.
5. Add a play button to your JSX.
6. Conditionally apply the active-step and inactive-step CSS classes based on the value of currentSlide.

Now, when you press the spacebar or click the play button, the steps will highlight one by one, and the ingredients corresponding to the highlighted step will turn bold, while the other ingredients will turn slightly transparent.

[lucharo]

So I'm working on this in the branch play-mode. The issue is that I need every ingredient to be assigned to a step, considering this I thought of expanding the current very simple YAML spec to include more info for ingredients such as: name, quantity, unit, and step. This I could do manually but I have refused (maybe wrong choice) and I've explored options such as having simple recipes in a simple format that then get turned into the slightly more complex yaml format after some fancy regex and nlp token matching. I have then considered incorporating the cooklang language to my recipes but then I have realised that the cooklang spec doesn't include the step info by default and I am not sure how easy it is to extend the language (I've raised an issue in the cooklang-ts repo). Maybe I just do the editing semi manually