<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Historia de Amor: Elige tu Propio Camino</title>

        <meta name="description" content="Un juego interactivo de historias de amor donde eliges entre diferentes pretendientes mientras navegas por la vida después de una gran pérdida.">

        <meta name="keywords" content="juego de amor, historias interactivas, elecciones, romance, diversión">



        <!-- Libraries -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">



        <script type="text/javascript">

            try {

                let playerMoney = 0;

                let currentChapter = 0;

                let storyContent = [

                    {

                        text: "Después de la muerte de tu madre, sientes un vacío en casa. Tu hermano Noah siempre te está molestando, aunque en el fondo es tu mejor apoyo. Hoy decides salir de la rutina. En el instituto, tres chicos llaman tu atención:",

                        choices: [

                            { text: "1. Hablar con Hugo, el capitán del equipo de fútbol", next: 1 },

                            { text: "2. Conocer a Marco, el chico de gafas amable", next: 2 },

                            { text: "3. Divertirte con Lucas, el amigo gracioso de tu hermano", next: 3 }

                        ]

                    },

                    {

                        text: "Te acercas a Hugo. Él es encantador, pero arrogante y se siente como un rey en el instituto. Platicas un rato y parece pensar en ti. ¿Qué harás?",

                        choices: [

                            { text: "Coquetear con él. (Ganas $10)", effect: 10, next: 4 },

                            { text: "Ignorarlo. (Pierdes la oportunidad)", next: 0 }

                        ]

                    },

                    {

                        text: "Marco te recibe con una sonrisa y un libro en la mano. Es dulce y sereno, te ofrece ayuda en clase. ¿Cómo reaccionas?",

                        choices: [

                            { text: "Aceptar la ayuda y compartir un café. (Ganas $15)", effect: 15, next: 4 },

                            { text: "Rechazarla y seguir sola. (Te sientes sola)", next: 0 }

                        ]

                    },

                    {

                        text: "Lucas te hace reír con sus ocurrencias y es como un rayo de sol. Propones una partida de baloncesto. ¿Qué decides?",

                        choices: [

                            { text: "Jugar juntos y pasar un buen rato. (Ganas $5)", effect: 5, next: 4 },

                            { text: "Solearte y no salir. (Pierdes la diversión)", next: 0 }

                        ]

                    },

                    {

                        text: "Tu dinero total es: $" + (playerMoney += event.detail.effect || 0) + ".";

                        storyContent[0].choices.forEach((choice, index) => $("#choices").append("<button class='btn btn-primary choice-btn' data-next='"+ choice.next +"'>" + choice.text + "</button>"));

                        currentChapter = 0; // points back to first chapter selections

                        displayChapter(currentChapter);

                    }

                ];



                function displayChapter(chapter) {

                    $("#story").text(storyContent[chapter].text);

                    $("#choices").empty();

                    storyContent[chapter].choices.forEach((choice, index) => {

                        $("#choices").append("<button class='btn btn-primary choice-btn' data-effect='"+ (choice.effect || 0) +"' data-next='"+ choice.next +"'>" + choice.text + "</button>");

                    });

                    currentChapter = chapter;

                }



                $(document).on("click", ".choice-btn", function() {

                    let nextChapter = $(this).data("next");

                    playerMoney += $(this).data("effect") || 0;



                    if (nextChapter !== undefined) {

                        displayChapter(nextChapter);

                    }

                });



                $(document).ready(function() {

                    displayChapter(currentChapter);

                });



            } catch (error) {

                throw error;

            }

        </script>

        

        <style>

            body {

                background: linear-gradient(to right, #ffb347, #ffcc33);

                color: #fff;

                font-family: 'Arial', sans-serif;

            }

            #main-container {

                margin-top: 20px;

            }

            .choice-btn {

                width: 100%;

                margin: 10px 0;

            }

            button {

                border: none;

            }

            #story {

                font-size: 18px;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1 class="text-center">Historia de Amor Interactiva</h1>

            <p id="story"></p>

            <p id="money">Dinero Actual: $<span id="moneyValue">0</span></p>

            <div id="choices"></div>

        </div>

    </body>

</html>