Modulo.1.2/cdemiguel/add game info

Modulo1/Paradigmas/src/main.tsx

@@ -3,8 +3,4 @@ import ReactDOM from "react-dom/client";
 import App from "./main/App.tsx";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Modulo1/Paradigmas/src/main/App.tsx

@@ -1,18 +1,22 @@
-import { useState } from "react";
 import styles from "./App.module.scss";
 import { SelectionScreen } from "./Selection/SelectionScreen";
 import { Story } from "./stories";
 import { GameScreen } from "./Screen/GameScreen";
+import story1 from "../stories/basic.story.json";
+import story2 from "../stories/basic2.story.json";
+import story3 from "../stories/basic3.story.json";
+import { useSelectedStory } from "./Screen/useSelectedStory";
 
 function App() {
-  const [currentStory, setCurrentStory] = useState<Story | null>(null);
+  const { selectStory, selectedStory } = useSelectedStory();
+  const stories = [story1, story2, story3];
 
   const startStory = (story: Story) => {
-    setCurrentStory(story);
+    selectStory(story);
   };
 
   const endStory = () => {
-    setCurrentStory(null);
+    selectStory(null);
   };
 
   return (
@@ -21,10 +25,10 @@ function App() {
       <h2 className={styles.subtitle}>
         Una aventura conversacional old-school
       </h2>
-      {currentStory ? (
-        <GameScreen endGame={endStory} story={currentStory} />
+      {selectedStory ? (
+        <GameScreen end={endStory} />
       ) : (
-        <SelectionScreen start={startStory} />
+        <SelectionScreen start={startStory} stories={stories} />
       )}
     </div>
   );

Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx

@@ -1,15 +1,25 @@
 import styles from "./GameScreen.module.scss";
+import { OptionType } from "./useGameOptions";
 
-interface GameOptionsProps {}
+type GameOptionsProps = {
+  end: () => void;
+  options: OptionType[];
+};
 
-export const GameOptions: React.FC<GameOptionsProps> = () => {
+export const GameOptions = ({ options, end }: GameOptionsProps) => {
   return (
     <section className={styles.options}>
-      <button className={styles.chooseAnswer}>Opción 1</button>
-      <button className={styles.chooseAnswer}>Opción 2</button>
-      <button className={styles.chooseAnswer}>Opción 3</button>
-      <button className={styles.chooseAnswer}>Opción 4</button>
-      <button className={styles.chooseAnswer}>Opción 5</button>
+      {options.map((option) => {
+        const handleClick = option.handler
+          ? () => option.handler(option.name)
+          : end;
+
+        return (
+          <button key={option.text} onClick={handleClick}>
+            {option.text}
+          </button>
+        );
+      })}
     </section>
   );
 };

Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx

@@ -1,25 +1,27 @@
-import { useEffect, useState } from "react";
-import { Location, Story } from "../stories";
+import { useEffect } from "react";
+import { Location } from "../stories";
 import { ConversationHistoryDisplay } from "./ConversationHistory";
 import { GameOptions } from "./GameOptions";
 import styles from "./GameScreen.module.scss";
 import { StoryInfo } from "./StoryInfo";
+import { useSelectedStory } from "./useSelectedStory";
+import { useGameOptions } from "./useGameOptions";
 
-interface GameScreenProps {
-  story: Story;
-}
+type GameScreeProps = {
+  end: () => void;
+};
 
-export const GameScreen: React.FC<GameScreenProps> = ({ story }) => {
-  const [currentScene, setCurrentScene] = useState<Location | undefined>(
-    undefined
-  );
+export const GameScreen = ({ end }: GameScreeProps) => {
+  const { selectedStory } = useSelectedStory();
+  const { options, setCurrentScene, currentScene } = useGameOptions();
 
   useEffect(() => {
-    if (story) {
-      setCurrentScene(story.locations[0]);
+    if (selectedStory) {
+      setCurrentScene(selectedStory.locations[0] as Location);
     }
-  }, [story]);
+  }, [selectedStory]);
 
+  console.log(currentScene);
   return (
     <>
       <section className={styles.gameScreen}>
@@ -29,7 +31,7 @@ export const GameScreen: React.FC<GameScreenProps> = ({ story }) => {
         />
         <ConversationHistoryDisplay />
       </section>
-      <GameOptions />
+      <GameOptions options={options} end={end} />
     </>
   );
 };

Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { useSelectedStory } from "./useSelectedStory";
+import { Location } from "../stories";
+
+export type OptionType = {
+  type: string;
+  text: string;
+  name?: string;
+  handler: (name?: string) => void;
+};
+
+const useGameOptions = () => {
+  const { selectedStory } = useSelectedStory();
+
+  const initialLocation = selectedStory?.initialLocation;
+
+  const [currentScene, setCurrentScene] = useState<Location | undefined>(
+    undefined
+  );
+
+  const [locationOptions, setLocationOptions] = useState(
+    selectedStory?.locations.filter(
+      (location) => location.name !== initialLocation
+    ) ?? []
+  );
+
+  const [characterOptions, setCharacterOptions] = useState(
+    selectedStory?.characters.filter(
+      (character) => character.location === initialLocation
+    ) ?? []
+  );
+
+  const mapLocationsAndCharactersIntoOptions = () => {
+    const locationsOptions = locationOptions?.map((location) => {
+      return {
+        type: "location",
+        text: `Ir a ${location.name}`,
+        name: location.name,
+        handler: (locationName?: string) => {
+          const currentScene =
+            selectedStory?.locations.filter((location) => {
+              return location.name === locationName;
+            }) ?? [];
+
+          console.log("currentScene", currentScene);
+          setCurrentScene(currentScene[0]);
+        },
+      };
+    });
+
+    const charactersOptions = characterOptions?.map((character) => {
+      return {
+        type: "character",
+        text: `Hablar con ${character.name}`,
+        name: character.name,
+        handler: () => {
+          console.log(character);
+          console.log(`Hablar con ${character.name}`);
+        },
+      };
+    });
+
+    return [...charactersOptions, ...locationsOptions];
+  };
+
+  const selectedStoryOptions = mapLocationsAndCharactersIntoOptions();
+
+  const endGameOption = {
+    type: "end",
+    text: "Salir del juego",
+    handler: () => {},
+  };
+
+  const options: OptionType[] = [...selectedStoryOptions, endGameOption];
+
+  return {
+    options,
+    characterOptions,
+    locationOptions,
+    setLocationOptions,
+    setCharacterOptions,
+    currentScene,
+    setCurrentScene,
+  };
+};
+
+export { useGameOptions };

Modulo1/Paradigmas/src/main/Screen/useSelectedStory.tsx

@@ -0,0 +1,26 @@
+import { useState } from "react";
+import { Story } from "main/stories";
+
+const useSelectedStory = () => {
+  const initialStory = JSON.parse(
+    localStorage.getItem("selectedStory") || "null"
+  );
+  const [selectedStory, setSelectedStory] = useState<Story | null>(
+    initialStory
+  );
+
+  const selectStory = (story: Story | null) => {
+    if (story === null) {
+      localStorage.removeItem("selectedStory");
+      setSelectedStory(null);
+      return;
+    }
+
+    setSelectedStory(story);
+    localStorage.setItem("selectedStory", JSON.stringify(story));
+  };
+
+  return { selectedStory, selectStory };
+};
+
+export { useSelectedStory };

Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx

@@ -1,29 +1,49 @@
 import basic3 from "../../stories/basic3.story.json";
 import { Story } from "../stories";
 import styles from "./SelectionScreen.module.scss";
+import { useSelectedStory } from "../Screen/useSelectedStory";
 
 interface SelectionScreenProps {
   start: (story: Story) => void;
+  stories: Story[];
 }
 
-export const SelectionScreen: React.FC<SelectionScreenProps> = ({ start }) => {
+export const SelectionScreen: React.FC<SelectionScreenProps> = ({
+  start,
+  stories,
+}) => {
+  const { selectedStory, selectStory } = useSelectedStory();
   const startStory = () => {
     start(basic3 as Story);
   };
 
+  const selectionScreenInfo = stories.map((story) => {
+    return {
+      title: story.title,
+      description: story.initialDescription,
+    };
+  });
+
+  const onClickSelectStory = (index: number) => {
+    selectStory(stories[index]);
+  };
+
   return (
     <>
       <section className={styles.selectionScreen}>
         <ul className={styles.availableStories}>
-          <li className={`${styles.story}`}>Una de las historias</li>
-          <li className={`${styles.story} ${styles.selected}`}>
-            Una de las historias
-          </li>
-          <li className={`${styles.story}`}>Una de las historias</li>
+          {selectionScreenInfo.map((story, index) => (
+            <li
+              key={index}
+              className={styles.story}
+              onClick={() => onClickSelectStory(index)}
+            >
+              {story.title}
+            </li>
+          ))}
         </ul>
         <p className={styles.storyDescription}>
-          Esta debería ser la descripción de la historia cuando el usuario clica
-          en ella
+          {selectedStory?.initialDescription}
         </p>
       </section>
       <section className={styles.controls}>