From 2c9fba4a4a40c7af34f7250e2d7fa86a1706a937 Mon Sep 17 00:00:00 2001 From: Carlos de Miguel Ferrero Date: Tue, 16 Apr 2024 20:43:30 +0200 Subject: [PATCH 1/5] feat(front): add selection screen info --- .../src/main/Selection/SelectionScreen.tsx | 23 ++++++++++++++----- 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx b/Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx index f822d06..daace8b 100644 --- a/Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx +++ b/Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx @@ -4,22 +4,33 @@ import styles from "./SelectionScreen.module.scss"; interface SelectionScreenProps { start: (story: Story) => void; + stories: Story[]; } -export const SelectionScreen: React.FC = ({ start }) => { +export const SelectionScreen: React.FC = ({ + start, + stories, +}) => { const startStory = () => { start(basic3 as Story); }; + const selectionScreenInfo = stories.map((story) => { + return { + title: story.title, + description: story.initialDescription, + }; + }); + return ( <>
    -
  • Una de las historias
    • -
  • - Una de las historias -
    • -
  • Una de las historias
    • + {selectionScreenInfo.map((story, index) => ( +
  • + {story.title} +
    • + ))}

Esta debería ser la descripción de la historia cuando el usuario clica From 74527e7c7b67a45312186acf4807aef2fe106aef Mon Sep 17 00:00:00 2001 From: Carlos de Miguel Ferrero Date: Tue, 16 Apr 2024 20:51:58 +0200 Subject: [PATCH 2/5] feat(front): change different initial description --- .../Paradigmas/src/stories/basic.story.json | 223 +++++++++--------- .../Paradigmas/src/stories/basic2.story.json | 2 +- .../Paradigmas/src/stories/basic3.story.json | 2 +- 3 files changed, 113 insertions(+), 114 deletions(-) diff --git a/Modulo1/Paradigmas/src/stories/basic.story.json b/Modulo1/Paradigmas/src/stories/basic.story.json index 154f40d..6222055 100644 --- a/Modulo1/Paradigmas/src/stories/basic.story.json +++ b/Modulo1/Paradigmas/src/stories/basic.story.json @@ -1,119 +1,118 @@ { - "title": "El misterio de la mansión", - "initialDescription": "Un asesinato ha tenido lugar en una mansión victoriana. La víctima es un joven aristócrata, hijo de la dueña de la casa. El mayordomo y la madre de la víctima son los principales sospechosos. El detective debe investigar la escena del crimen y hablar con los testigos para resolver el caso.", - "locations": [ + "title": "El misterio de la mansión", + "initialDescription": "1 .Un asesinato ha tenido lugar en una mansión victoriana. La víctima es un joven aristócrata, hijo de la dueña de la casa. El mayordomo y la madre de la víctima son los principales sospechosos. El detective debe investigar la escena del crimen y hablar con los testigos para resolver el caso.", + "locations": [ + { + "name": "recibidor", + "image": "recibidor.jpg", + "description": "Un recibidor elegante, con un gran espejo y una alfombra roja", + "connections": ["cocina", "salón"], + "clues": [ { - "name": "recibidor", - "image": "recibidor.jpg", - "description": "Un recibidor elegante, con un gran espejo y una alfombra roja", - "connections": ["cocina", "salón"], - "clues": [ - { - "name": "cuchillo", - "description": "Un cuchillo de cocina viejo y gastado, manchado con la sangre de la víctima", - "requisites": ["testimonio de la señora", "cadaver de la victima"] - } - ] - }, - { - "name": "cocina", - "image": "cocina.jpg", - "description": "Una cocina antigua, con fogones de gas y utensilios de cobre", - "connections": ["recibidor"], - "clues": [ - { - "name": "cadaver de la victima", - "description": "El cuerpo sin vida de la víctima, con una herida de cuchillo en el pecho" - } - ] - }, + "name": "cuchillo", + "description": "Un cuchillo de cocina viejo y gastado, manchado con la sangre de la víctima", + "requisites": ["testimonio de la señora", "cadaver de la victima"] + } + ] + }, + { + "name": "cocina", + "image": "cocina.jpg", + "description": "Una cocina antigua, con fogones de gas y utensilios de cobre", + "connections": ["recibidor"], + "clues": [ { - "name": "salón", - "image": "salon.jpg", - "description": "Un salón lujoso, con muebles de madera y cuadros antiguos", - "connections": ["recibidor"] + "name": "cadaver de la victima", + "description": "El cuerpo sin vida de la víctima, con una herida de cuchillo en el pecho" } - - ], + ] + }, + { + "name": "salón", + "image": "salon.jpg", + "description": "Un salón lujoso, con muebles de madera y cuadros antiguos", + "connections": ["recibidor"] + } + ], - "characters": [ - { - "id": "donAlfredo", - "name": "Don Alfredo, mayordomo", - "description": "Un hombre de mediana edad, con aspecto serio y formal", - "location": "recibidor", - "dialog": { - "initial": "Buenas tardes, señor detective. ¿En qué puedo ayudarle?", - "continuation": "¿Quiere hacerme alguna pregunta más?", - "final": "Gracias por su tiempo, señora. Si tiene alguna información adicional, no dude en decírmelo.", + "characters": [ + { + "id": "donAlfredo", + "name": "Don Alfredo, mayordomo", + "description": "Un hombre de mediana edad, con aspecto serio y formal", + "location": "recibidor", + "dialog": { + "initial": "Buenas tardes, señor detective. ¿En qué puedo ayudarle?", + "continuation": "¿Quiere hacerme alguna pregunta más?", + "final": "Gracias por su tiempo, señora. Si tiene alguna información adicional, no dude en decírmelo.", - "options": [ - { - "question": "¿Dónde estaba usted la noche del crimen?", - "answer": "Estaba en la cocina, preparando la cena para el señor y la señora.", - "options": [ - { - "question": "¿Vio a alguien más en la casa?", - "answer": "No, no vi a nadie más. Estaba solo en la cocina." - }, - { - "question": "¿Como era su relación laboral con la víctima?", - "answer": "Mucho trabajo y un sueldo bajo, como siempre." - } - ] - }, - { - "question": "¿Qué opina de la víctima?", - "answer": "Era hijo de buena familia, pero algo distante. No hablaba mucho con los demás." - } - ] - } - }, - { - "id": "ladyButterworth", - "name": "Lady Butterworth", - "description": "Una mujer de avanzada edad, con aspecto elegante y distante", - "location": "salón", - "dialog": { - "initial": "Buenas tardes, detective. ¿En qué puedo ayudarle?", - "continuation": "¿Quiere hacerme alguna pregunta más?", - "final": "Gracias por su tiempo, señora. Si tiene alguna información adicional, no dude en decírmelo.", + "options": [ + { + "question": "¿Dónde estaba usted la noche del crimen?", + "answer": "Estaba en la cocina, preparando la cena para el señor y la señora.", + "options": [ + { + "question": "¿Vio a alguien más en la casa?", + "answer": "No, no vi a nadie más. Estaba solo en la cocina." + }, + { + "question": "¿Como era su relación laboral con la víctima?", + "answer": "Mucho trabajo y un sueldo bajo, como siempre." + } + ] + }, + { + "question": "¿Qué opina de la víctima?", + "answer": "Era hijo de buena familia, pero algo distante. No hablaba mucho con los demás." + } + ] + } + }, + { + "id": "ladyButterworth", + "name": "Lady Butterworth", + "description": "Una mujer de avanzada edad, con aspecto elegante y distante", + "location": "salón", + "dialog": { + "initial": "Buenas tardes, detective. ¿En qué puedo ayudarle?", + "continuation": "¿Quiere hacerme alguna pregunta más?", + "final": "Gracias por su tiempo, señora. Si tiene alguna información adicional, no dude en decírmelo.", - "options": [ - { - "question": "¿Dónde estaba usted la noche del crimen?", - "answer": "Estaba en el salón, leyendo un libro. No me di cuenta de nada raro.", - "options": [ - { - "question": "¿Vio a alguien más en la casa?", - "answer": "No, no vi a nadie más. Estaba sola en el salón." - }, - { - "question": "¿Como era su relación con la víctima?", - "single": true, - "answer": "Era mi hijo, pero no hablábamos mucho. Era un chico solitario. Por favor, no insista en este tema" - } - ] - }, - { - "question": "¿Qué opina de la víctima?", - "answer": "Era un buen chico, pero algo distante. No hablaba mucho con los demás.", - "options": [ - { - "question": "¿Cree que el mayordomo podría ser el asesino?", - "answer": "Claro que ha sido él, ¿no lee usted novelas de misterio?", - "clue": ["testimonio de la señora"] - }, - { - "question": "¿Cree que alguien más podría ser el asesino?", - "answer": "No lo sé, pero no me extrañaría que alguien quisiera hacerle daño." - } - ] - } - ] - } - } - ], - "initialLocation": "recibidor", - "finalClue": "cuchillo" -} \ No newline at end of file + "options": [ + { + "question": "¿Dónde estaba usted la noche del crimen?", + "answer": "Estaba en el salón, leyendo un libro. No me di cuenta de nada raro.", + "options": [ + { + "question": "¿Vio a alguien más en la casa?", + "answer": "No, no vi a nadie más. Estaba sola en el salón." + }, + { + "question": "¿Como era su relación con la víctima?", + "single": true, + "answer": "Era mi hijo, pero no hablábamos mucho. Era un chico solitario. Por favor, no insista en este tema" + } + ] + }, + { + "question": "¿Qué opina de la víctima?", + "answer": "Era un buen chico, pero algo distante. No hablaba mucho con los demás.", + "options": [ + { + "question": "¿Cree que el mayordomo podría ser el asesino?", + "answer": "Claro que ha sido él, ¿no lee usted novelas de misterio?", + "clue": ["testimonio de la señora"] + }, + { + "question": "¿Cree que alguien más podría ser el asesino?", + "answer": "No lo sé, pero no me extrañaría que alguien quisiera hacerle daño." + } + ] + } + ] + } + } + ], + "initialLocation": "recibidor", + "finalClue": "cuchillo" +} diff --git a/Modulo1/Paradigmas/src/stories/basic2.story.json b/Modulo1/Paradigmas/src/stories/basic2.story.json index 56da24a..b470a2a 100644 --- a/Modulo1/Paradigmas/src/stories/basic2.story.json +++ b/Modulo1/Paradigmas/src/stories/basic2.story.json @@ -1,6 +1,6 @@ { "title": "El misterio de la mansión v2", - "initialDescription": "Un asesinato ha tenido lugar en una mansión victoriana. La víctima es un joven aristócrata, hijo de la dueña de la casa. El mayordomo y la madre de la víctima son los principales sospechosos. El detective debe investigar la escena del crimen y hablar con los testigos para resolver el caso.", + "initialDescription": "2. Un asesinato ha tenido lugar en una mansión victoriana. La víctima es un joven aristócrata, hijo de la dueña de la casa. El mayordomo y la madre de la víctima son los principales sospechosos. El detective debe investigar la escena del crimen y hablar con los testigos para resolver el caso.", "locations": [ { "name": "recibidor", diff --git a/Modulo1/Paradigmas/src/stories/basic3.story.json b/Modulo1/Paradigmas/src/stories/basic3.story.json index f9416ef..2489381 100644 --- a/Modulo1/Paradigmas/src/stories/basic3.story.json +++ b/Modulo1/Paradigmas/src/stories/basic3.story.json @@ -1,6 +1,6 @@ { "title": "El misterio de la mansión v3", - "initialDescription": "Un asesinato ha tenido lugar en una mansión victoriana. La víctima es un joven aristócrata, hijo de la dueña de la casa. El mayordomo y la madre de la víctima son los principales sospechosos. El detective debe investigar la escena del crimen y hablar con los testigos para resolver el caso.", + "initialDescription": "3. Un asesinato ha tenido lugar en una mansión victoriana. La víctima es un joven aristócrata, hijo de la dueña de la casa. El mayordomo y la madre de la víctima son los principales sospechosos. El detective debe investigar la escena del crimen y hablar con los testigos para resolver el caso.", "locations": [ { "name": "recibidor", From a15497d7ad2adfab500b5515deeec5e907f0b17d Mon Sep 17 00:00:00 2001 From: Carlos de Miguel Ferrero Date: Wed, 17 Apr 2024 14:03:09 +0200 Subject: [PATCH 3/5] feat(front): add base url --- Modulo1/Paradigmas/tsconfig.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Modulo1/Paradigmas/tsconfig.json b/Modulo1/Paradigmas/tsconfig.json index d23f680..e7da4b1 100644 --- a/Modulo1/Paradigmas/tsconfig.json +++ b/Modulo1/Paradigmas/tsconfig.json @@ -19,7 +19,9 @@ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true + "noFallthroughCasesInSwitch": true, + + "baseUrl": "src" }, "include": ["src", "tests"], "references": [{ "path": "./tsconfig.node.json" }] From 9fc1244016eb6ca3b84205254e8d57578fd85837 Mon Sep 17 00:00:00 2001 From: Carlos de Miguel Ferrero Date: Thu, 18 Apr 2024 10:45:48 +0200 Subject: [PATCH 4/5] feat(front): add options --- Modulo1/Paradigmas/src/main.tsx | 6 +- Modulo1/Paradigmas/src/main/App.tsx | 18 +++--- .../src/main/Screen/GameOptions.tsx | 21 ++++--- .../Paradigmas/src/main/Screen/GameScreen.tsx | 21 ++++--- .../src/main/Screen/useGameOptions.tsx | 59 +++++++++++++++++++ .../src/main/Screen/useSelectedStory.tsx | 26 ++++++++ .../src/main/Selection/SelectionScreen.tsx | 15 ++++- 7 files changed, 135 insertions(+), 31 deletions(-) create mode 100644 Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx create mode 100644 Modulo1/Paradigmas/src/main/Screen/useSelectedStory.tsx diff --git a/Modulo1/Paradigmas/src/main.tsx b/Modulo1/Paradigmas/src/main.tsx index 8c1c08c..774c85b 100644 --- a/Modulo1/Paradigmas/src/main.tsx +++ b/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( - - - -); +ReactDOM.createRoot(document.getElementById("root")!).render(); diff --git a/Modulo1/Paradigmas/src/main/App.tsx b/Modulo1/Paradigmas/src/main/App.tsx index 2c6f7dd..b0d9d7b 100644 --- a/Modulo1/Paradigmas/src/main/App.tsx +++ b/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(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() {

Una aventura conversacional old-school

- {currentStory ? ( - + {selectedStory ? ( + ) : ( - + )} ); diff --git a/Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx b/Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx index a26db85..399fa53 100644 --- a/Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx +++ b/Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx @@ -1,15 +1,22 @@ import styles from "./GameScreen.module.scss"; +import { useGameOptions } from "./useGameOptions"; -interface GameOptionsProps {} +type GameOptionsProps = { + end: () => void; +}; + +export const GameOptions = ({ end }: GameOptionsProps) => { + const { options } = useGameOptions(); -export const GameOptions: React.FC = () => { return (
- - - - - + {options.map((option, index) => { + return ( + + ); + })}
); }; diff --git a/Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx b/Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx index 35ef6c4..4286b2b 100644 --- a/Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx +++ b/Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx @@ -1,24 +1,27 @@ import { useEffect, useState } from "react"; -import { Location, Story } from "../stories"; +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"; -interface GameScreenProps { - story: Story; -} +type GameScreeProps = { + end: () => void; +}; + +export const GameScreen = ({ end }: GameScreeProps) => { + const { selectedStory } = useSelectedStory(); -export const GameScreen: React.FC = ({ story }) => { const [currentScene, setCurrentScene] = useState( undefined ); useEffect(() => { - if (story) { - setCurrentScene(story.locations[0]); + if (selectedStory) { + setCurrentScene(selectedStory.locations[0]); } - }, [story]); + }, [selectedStory]); return ( <> @@ -29,7 +32,7 @@ export const GameScreen: React.FC = ({ story }) => { />
- + ); }; diff --git a/Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx b/Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx new file mode 100644 index 0000000..995586a --- /dev/null +++ b/Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx @@ -0,0 +1,59 @@ +import { useSelectedStory } from "./useSelectedStory"; + +type OptionType = { + type: string; + text: string; + handler?: () => void; +}; + +const useGameOptions = () => { + const { selectedStory } = useSelectedStory(); + + const initialLocation = selectedStory?.initialLocation; + + const locations = + selectedStory?.locations.filter( + (location) => location.name !== initialLocation + ) ?? []; + + const characters = + selectedStory?.characters.filter( + (character) => character.location === initialLocation + ) ?? []; + + const mapLocationsAndCharactersIntoOptions = () => { + const locationsOptions = locations?.map((location) => { + return { + type: "location", + text: `Ir a ${location.name}`, + handler: () => { + console.log(`Ir a ${location.name}`); + }, + }; + }); + + const charactersOptions = characters?.map((character) => { + return { + type: "character", + text: `Hablar con ${character.name}`, + handler: () => { + console.log(`Hablar con ${character.name}`); + }, + }; + }); + + return [...locationsOptions, ...charactersOptions]; + }; + + const selectedStoryOptions = mapLocationsAndCharactersIntoOptions(); + + const endGameOption: OptionType = { + type: "end", + text: "Salir del juego", + }; + + const options = [...selectedStoryOptions, endGameOption]; + return { options }; +}; + +export { useGameOptions }; diff --git a/Modulo1/Paradigmas/src/main/Screen/useSelectedStory.tsx b/Modulo1/Paradigmas/src/main/Screen/useSelectedStory.tsx new file mode 100644 index 0000000..5652827 --- /dev/null +++ b/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( + 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 }; diff --git a/Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx b/Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx index daace8b..7669ff7 100644 --- a/Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx +++ b/Modulo1/Paradigmas/src/main/Selection/SelectionScreen.tsx @@ -1,6 +1,7 @@ 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; @@ -11,6 +12,7 @@ export const SelectionScreen: React.FC = ({ start, stories, }) => { + const { selectedStory, selectStory } = useSelectedStory(); const startStory = () => { start(basic3 as Story); }; @@ -22,19 +24,26 @@ export const SelectionScreen: React.FC = ({ }; }); + const onClickSelectStory = (index: number) => { + selectStory(stories[index]); + }; + return ( <>
    {selectionScreenInfo.map((story, index) => ( -
  • +
  • onClickSelectStory(index)} + > {story.title}
    • ))}

- Esta debería ser la descripción de la historia cuando el usuario clica - en ella + {selectedStory?.initialDescription}

From 09b57d11ba1b36bb968917b2befcb605faa3eceb Mon Sep 17 00:00:00 2001 From: Carlos de Miguel Ferrero Date: Thu, 18 Apr 2024 13:25:11 +0200 Subject: [PATCH 5/5] feat(front): edit go to --- .../src/main/Screen/GameOptions.tsx | 15 +++-- .../Paradigmas/src/main/Screen/GameScreen.tsx | 13 ++--- .../src/main/Screen/useGameOptions.tsx | 56 ++++++++++++++----- .../Paradigmas/src/stories/basic.story.json | 3 - 4 files changed, 57 insertions(+), 30 deletions(-) diff --git a/Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx b/Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx index 399fa53..153e1d5 100644 --- a/Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx +++ b/Modulo1/Paradigmas/src/main/Screen/GameOptions.tsx @@ -1,18 +1,21 @@ import styles from "./GameScreen.module.scss"; -import { useGameOptions } from "./useGameOptions"; +import { OptionType } from "./useGameOptions"; type GameOptionsProps = { end: () => void; + options: OptionType[]; }; -export const GameOptions = ({ end }: GameOptionsProps) => { - const { options } = useGameOptions(); - +export const GameOptions = ({ options, end }: GameOptionsProps) => { return (
- {options.map((option, index) => { + {options.map((option) => { + const handleClick = option.handler + ? () => option.handler(option.name) + : end; + return ( - ); diff --git a/Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx b/Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx index 4286b2b..18928ca 100644 --- a/Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx +++ b/Modulo1/Paradigmas/src/main/Screen/GameScreen.tsx @@ -1,10 +1,11 @@ -import { useEffect, useState } from "react"; +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"; type GameScreeProps = { end: () => void; @@ -12,17 +13,15 @@ type GameScreeProps = { export const GameScreen = ({ end }: GameScreeProps) => { const { selectedStory } = useSelectedStory(); - - const [currentScene, setCurrentScene] = useState( - undefined - ); + const { options, setCurrentScene, currentScene } = useGameOptions(); useEffect(() => { if (selectedStory) { - setCurrentScene(selectedStory.locations[0]); + setCurrentScene(selectedStory.locations[0] as Location); } }, [selectedStory]); + console.log(currentScene); return ( <>
@@ -32,7 +31,7 @@ export const GameScreen = ({ end }: GameScreeProps) => { />
- + ); }; diff --git a/Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx b/Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx index 995586a..f95f6e8 100644 --- a/Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx +++ b/Modulo1/Paradigmas/src/main/Screen/useGameOptions.tsx @@ -1,9 +1,12 @@ +import { useState } from "react"; import { useSelectedStory } from "./useSelectedStory"; +import { Location } from "../stories"; -type OptionType = { +export type OptionType = { type: string; text: string; - handler?: () => void; + name?: string; + handler: (name?: string) => void; }; const useGameOptions = () => { @@ -11,49 +14,74 @@ const useGameOptions = () => { const initialLocation = selectedStory?.initialLocation; - const locations = + const [currentScene, setCurrentScene] = useState( + undefined + ); + + const [locationOptions, setLocationOptions] = useState( selectedStory?.locations.filter( (location) => location.name !== initialLocation - ) ?? []; + ) ?? [] + ); - const characters = + const [characterOptions, setCharacterOptions] = useState( selectedStory?.characters.filter( (character) => character.location === initialLocation - ) ?? []; + ) ?? [] + ); const mapLocationsAndCharactersIntoOptions = () => { - const locationsOptions = locations?.map((location) => { + const locationsOptions = locationOptions?.map((location) => { return { type: "location", text: `Ir a ${location.name}`, - handler: () => { - console.log(`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 = characters?.map((character) => { + 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 [...locationsOptions, ...charactersOptions]; + return [...charactersOptions, ...locationsOptions]; }; const selectedStoryOptions = mapLocationsAndCharactersIntoOptions(); - const endGameOption: OptionType = { + const endGameOption = { type: "end", text: "Salir del juego", + handler: () => {}, }; - const options = [...selectedStoryOptions, endGameOption]; - return { options }; + const options: OptionType[] = [...selectedStoryOptions, endGameOption]; + + return { + options, + characterOptions, + locationOptions, + setLocationOptions, + setCharacterOptions, + currentScene, + setCurrentScene, + }; }; export { useGameOptions }; diff --git a/Modulo1/Paradigmas/src/stories/basic.story.json b/Modulo1/Paradigmas/src/stories/basic.story.json index 6222055..60a1c78 100644 --- a/Modulo1/Paradigmas/src/stories/basic.story.json +++ b/Modulo1/Paradigmas/src/stories/basic.story.json @@ -34,7 +34,6 @@ "connections": ["recibidor"] } ], - "characters": [ { "id": "donAlfredo", @@ -45,7 +44,6 @@ "initial": "Buenas tardes, señor detective. ¿En qué puedo ayudarle?", "continuation": "¿Quiere hacerme alguna pregunta más?", "final": "Gracias por su tiempo, señora. Si tiene alguna información adicional, no dude en decírmelo.", - "options": [ { "question": "¿Dónde estaba usted la noche del crimen?", @@ -77,7 +75,6 @@ "initial": "Buenas tardes, detective. ¿En qué puedo ayudarle?", "continuation": "¿Quiere hacerme alguna pregunta más?", "final": "Gracias por su tiempo, señora. Si tiene alguna información adicional, no dude en decírmelo.", - "options": [ { "question": "¿Dónde estaba usted la noche del crimen?",