Cuento interactivo

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

1. Mostrar la propiedad txt de la primera escena.

2. Crear el método getSceneByName y hacer que devuelva el índice correspondiente a escena cuyo nombre que hemos pasado como parámetro. Utilizaremos este método para inicializar el estado currentScene :

const [currentScene, setCurrentScene] = useState(getSceneByName(ꞋespacioꞋ));

3. Cargaremos ahora la imagen de la primera escena. Esta imagen deberá ocupar toda la pantalla.

export const Scene = styled.div`
    width: 100vw;
    height:100vh;
    background-image:url(${({ back }) => back});
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: black;
    position: relative;
    margin:auto;
`;

4. Para mantener las proporciones de la imagen de fondo, usaremos este código:

  const calculateSceneDimensions = () => {
    const w = window.innerWidth;
    const h = window.innerHeight;
    const a = 16;
    const b = 9;
    const proportion = a / b;
    const proportion2 = w / h;
    if (proportion > proportion2) {
      setWidth(w);
      setHeight(w * b / a);
    } else {
      setHeight(h);
      setWidth(h * a / b);
    }
  }

5. Pondremos en pantalla unas areas interactivas, para que cuando el usuario las pulse, sea llevado a otra escena:

export const Door = style.div`
    position: absolute;
    left: ${({ data }) => data.x}%;
    top: ${({ data }) => data.y}%;
    width: ${({ data }) => data.width}%;
    height: ${({ data }) => data.height}%;
    border: 1px solid red;
    cursor: pointer;
`;

{
        currentScene.doors.map((door, i) => <Door key={i} onClick={() => {
          setCurrentScene(getSceneByName(door.target))
        }} data={door} />)
}