import { h, Host, getAssetPath } from "@stencil/core";
import { ROController } from "../../utils/resize-observer";
export class Game {
    constructor() {
        this.bgNoise = 'bg_noise.svg';
        this.bgWaves = 'bg_waves.svg';
        this.rvLogo = 'logo_romagna_vending.svg';
        this.numberBackground = 'forma_numeri.svg';
        this.totalScore = 0;
        this.partialScore = 0;
        this.step = 0;
        this.currentQuestion = 0;
        this.randNum = 0;
        this.firstColorComb = {
            comb: 'orange',
            primaryColor: '#facfad',
            accentColor: '#ed7100',
            buttonText: '#facfad',
            buttonTextHover: '#fff',
        };
        this.secondColorComb = {
            comb: 'violet',
            primaryColor: '#e2cfea',
            accentColor: '#5f4bb6',
            buttonText: '#e2cfea',
            buttonTextHover: '#fff',
        };
        this.thirdColorComb = {
            comb: 'blue',
            primaryColor: '#bacfe2',
            accentColor: '#246eb9',
            buttonText: '#bacfe2',
            buttonTextHover: '#fff',
        };
        this.quizObj = [
            {
                question: 'La tua vacanza ideale è...?',
                image: 'test_1.svg',
                number_background: 'number_bg_orange.svg',
                answer: [
                    {
                        text: 'alla scoperta di una nazione straniera',
                        points: 1
                    },
                    {
                        text: 'tra le bellezze dell\'italia',
                        points: 2
                    }
                ],
                colors: this.firstColorComb
            },
            {
                question: 'In vacanza cerchi...?',
                image: 'test_2.svg',
                number_background: 'number_bg_blue.svg',
                answer: [
                    {
                        text: 'Il completo relax',
                        points: 1
                    },
                    {
                        text: 'un\'avventura, zaino in spalla',
                        points: 2
                    }
                ],
                colors: this.secondColorComb
            },
            {
                question: 'Sull\'aereo per raggiungere la meta preferisci...?',
                image: 'test_3.svg',
                number_background: 'number_bg_violet.svg',
                answer: [
                    {
                        text: 'dedicarti ad un bel libro',
                        points: 1
                    },
                    {
                        text: 'dormire per arrivare con le batterie cariche',
                        points: 2
                    }
                ],
                colors: this.thirdColorComb
            },
            {
                question: 'serata cinema! come ti organizzi?',
                image: 'test_4.svg',
                number_background: 'number_bg_orange.svg',
                answer: [
                    {
                        text: 'ci vai da solo',
                        points: 1
                    },
                    {
                        text: 'organizzi un gruppetto',
                        points: 2
                    }
                ],
                colors: this.firstColorComb
            },
            {
                question: 'che film scegli?',
                image: 'test_5.svg',
                number_background: 'number_bg_blue.svg',
                answer: [
                    {
                        text: 'un thriller all\'ultimo respiro',
                        points: 1
                    },
                    {
                        text: 'un film romantico dalla lacrima facile',
                        points: 2
                    }
                ],
                colors: this.secondColorComb
            },
            {
                question: 'serata libera! dove si va?',
                image: 'test_6.svg',
                number_background: 'number_bg_violet.svg',
                answer: [
                    {
                        text: 'due risate al pub',
                        points: 1
                    },
                    {
                        text: 'un\'ottima cena al ristorante',
                        points: 2
                    }
                ],
                colors: this.thirdColorComb
            },
            {
                question: 'bisogna ordinare da bere, cosa si ordina?',
                image: 'test_7.svg',
                number_background: 'number_bg_orange.svg',
                answer: [
                    {
                        text: 'una bella birra con la schiuma',
                        points: 1
                    },
                    {
                        text: 'una bottiglia di vino pregiato',
                        points: 2
                    }
                ],
                colors: this.firstColorComb
            },
            {
                question: '...e da mangiare?',
                image: 'test_8.svg',
                number_background: 'number_bg_blue.svg',
                answer: [
                    {
                        text: 'una grigliata di carne',
                        points: 1
                    },
                    {
                        text: 'scorpacciata di pesce',
                        points: 2
                    }
                ],
                colors: this.secondColorComb
            },
            {
                question: 'serata tra amici, cosa si fa?',
                image: 'test_9.svg',
                number_background: 'number_bg_violet.svg',
                answer: [
                    {
                        text: 'silenzio, concentrazion e si guarda la partita',
                        points: 1
                    },
                    {
                        text: 'chiacchiere su tutto e tutti',
                        points: 2
                    }
                ],
                colors: this.thirdColorComb
            },
            {
                question: 'Domanda finale. Nel caffè... Zucchero si o zucchero no?',
                image: 'test_10.svg',
                number_background: 'number_bg_orange.svg',
                answer: [
                    {
                        text: 'si',
                        points: 1
                    },
                    {
                        text: 'no',
                        points: 2
                    }
                ],
                colors: this.firstColorComb
            },
        ];
        this.results = [
            {
                machine: 'machine_inovy.png',
                text: 'Il tuo caffè ha talmente tanta voglia di riportarti la carica che non riesce più a stare nella tazzina. Mettiti comodo e sorseggialo, al resto ci pensa lui. Hai percepito questo brio?Ecco, finire la giornata sarà una passeggiata!',
                pod: 'pod_gustoso.png',
                machine_name: 'Inovy',
                pod_name: 'Gustoso',
            },
            {
                machine: 'machine_inovy_compact.png',
                text: 'Il tuo caffè ha talmente tanta voglia di riportarti la carica che non riesce più a stare nella tazzina. Mettiti comodo e sorseggialo, al resto ci pensa lui. Hai percepito questo brio?Ecco, finire la giornata sarà una passeggiata!',
                pod: 'pod_gustoso.png',
                machine_name: 'Inovy Compact',
                pod_name: 'Gustoso',
            },
            {
                machine: 'machine_lf400_milk.png',
                text: 'Il tuo caffè ha talmente tanta voglia di riportarti la carica che non riesce più a stare nella tazzina. Mettiti comodo e sorseggialo, al resto ci pensa lui. Hai percepito questo brio?Ecco, finire la giornata sarà una passeggiata!',
                pod: 'pod_gustoso.png',
                machine_name: 'LF400 Milk',
                pod_name: 'Gustoso',
            },
            {
                machine: 'machine_inovy.png',
                text: 'Il tuo caffè ancora prima di svegliarti ti coccola, ti culla in un sapore unico. È un caffè da bere con gli occhi chiusi, pensando a tutti i momenti positivi della giornata. Finito? Apri gli occhi, sorridi e sarà tutto più bello.',
                pod: 'pod_vivace.png',
                machine_name: 'Inovy',
                pod_name: 'Vivace',
            },
            {
                machine: 'machine_inovy_compact.png',
                text: 'Il tuo caffè ancora prima di svegliarti ti coccola, ti culla in un sapore unico. È un caffè da bere con gli occhi chiusi, pensando a tutti i momenti positivi della giornata. Finito? Apri gli occhi, sorridi e sarà tutto più bello.',
                pod: 'pod_vivace.png',
                machine_name: 'Inovy Compact',
                pod_name: 'Vivace',
            },
            {
                machine: 'machine_lf400_milk.png',
                text: 'Il tuo caffè ancora prima di svegliarti ti coccola, ti culla in un sapore unico. È un caffè da bere con gli occhi chiusi, pensando a tutti i momenti positivi della giornata. Finito? Apri gli occhi, sorridi e sarà tutto più bello.',
                pod: 'pod_vivace.png',
                machine_name: 'LF400 Milk',
                pod_name: 'Vivace',
            },
            {
                machine: 'machine_inovy.png',
                text: 'Le tue giornate lavorative fanno fatica ad ingranare, hai decisamente bisogno di una scossa! Il primo sorso di caffè sarà una densa iniezione di carica e motivazione, non ti resta che gonfiare il petto ed affrontare la giornata finalmente con il piglio giusto.',
                pod: 'pod_corposo.png',
                machine_name: 'Inovy',
                pod_name: 'Corposo',
            },
            {
                machine: 'machine_inovy_compact.png',
                text: 'Le tue giornate lavorative fanno fatica ad ingranare, hai decisamente bisogno di una scossa! Il primo sorso di caffè sarà una densa iniezione di carica e motivazione, non ti resta che gonfiare il petto ed affrontare la giornata finalmente con il piglio giusto.',
                pod: 'pod_corposo.png',
                machine_name: 'Inovy Compact',
                pod_name: 'Corposo',
            },
            {
                machine: 'machine_lf400_milk.png',
                text: 'Le tue giornate lavorative fanno fatica ad ingranare, hai decisamente bisogno di una scossa! Il primo sorso di caffè sarà una densa iniezione di carica e motivazione, non ti resta che gonfiare il petto ed affrontare la giornata finalmente con il piglio giusto.',
                pod: 'pod_corposo.png',
                machine_name: 'LF400 Milk',
                pod_name: 'Corposo',
            },
            {
                machine: 'machine_inovy.png',
                text: 'Questa è la capsula perfetta per te! La mattina hai bisogno di un sergente che ti dia la sveglia e detti i tempi per essere efficiente al 100%... un, due, un, due! Sveglio? Ne vuoi un altro?',
                pod: 'pod_forte.png',
                machine_name: 'Inovy',
                pod_name: 'Forte',
            },
            {
                machine: 'machine_inovy_compact.png',
                text: 'Questa è la capsula perfetta per te! La mattina hai bisogno di un sergente che ti dia la sveglia e detti i tempi per essere efficiente al 100%... un, due, un, due! Sveglio? Ne vuoi un altro?',
                pod: 'pod_forte.png',
                machine_name: 'Inovy Compact',
                pod_name: 'Forte',
            },
            {
                machine: 'machine_lf400_milk.png',
                text: 'Questa è la capsula perfetta per te! La mattina hai bisogno di un sergente che ti dia la sveglia e detti i tempi per essere efficiente al 100%... un, due, un, due! Sveglio? Ne vuoi un altro?',
                pod: 'pod_forte.png',
                machine_name: 'LF400 Milk',
                pod_name: 'Forte',
            },
            {
                machine: 'machine_inovy.png',
                text: 'Sorseggialo, senti questa melodia che vola nell’aria? Ecco la capsula giusta per te, perfetta per cambiare musica alla giornata. Camminerai per strada sicuro di sentire una colonna sonora su misura per te per tutto il tempo... concediti due passi di danza!',
                pod: 'pod_aromatico.png',
                machine_name: 'Inovy',
                pod_name: 'Aromatico',
            },
            {
                machine: 'machine_inovy_compact.png',
                text: 'Sorseggialo, senti questa melodia che vola nell’aria? Ecco la capsula giusta per te, perfetta per cambiare musica alla giornata. Camminerai per strada sicuro di sentire una colonna sonora su misura per te per tutto il tempo... concediti due passi di danza!',
                pod: 'pod_aromatico.png',
                machine_name: 'Inovy Compact',
                pod_name: 'Aromatico',
            },
            {
                machine: 'machine_lf400_milk.png',
                text: 'Sorseggialo, senti questa melodia che vola nell’aria? Ecco la capsula giusta per te, perfetta per cambiare musica alla giornata. Camminerai per strada sicuro di sentire una colonna sonora su misura per te per tutto il tempo... concediti due passi di danza!',
                pod: 'pod_aromatico.png',
                machine_name: 'LF400 Milk',
                pod_name: 'Aromatico',
            },
            {
                machine: 'machine_inovy.png',
                text: 'Sei una scheggia impazzita! Madre Natura ti ha già dato in dote una dose di carica perfetta... ma proprio non riesci a rinunciare al sapore del caffè! Questa è la tua capsula, insieme create un mix perfetto.',
                pod: 'pod_decaffeinato.png',
                machine_name: 'Inovy',
                pod_name: 'Decaffeinato',
            },
            {
                machine: 'machine_inovy_compact.png',
                text: 'Sei una scheggia impazzita! Madre Natura ti ha già dato in dote una dose di carica perfetta... ma proprio non riesci a rinunciare al sapore del caffè! Questa è la tua capsula, insieme create un mix perfetto.',
                pod: 'pod_decaffeinato.png',
                machine_name: 'Inovy Compact',
                pod_name: 'Decaffeinato',
            },
            {
                machine: 'machine_lf400_milk.png',
                text: 'Sei una scheggia impazzita! Madre Natura ti ha già dato in dote una dose di carica perfetta... ma proprio non riesci a rinunciare al sapore del caffè! Questa è la tua capsula, insieme create un mix perfetto.',
                pod: 'pod_decaffeinato.png',
                machine_name: 'LF400 Milk',
                pod_name: 'Decaffeinato',
            },
        ];
        this.wavesBg = {
            backgroundImage: `url(${getAssetPath(`./assets/${this.bgWaves}`)})`,
        };
        // Permette di fare lo switch tra mobile e desktop
        this.resizeFunction = (entry, el) => {
            el.boxWidth = entry.contentRect.width;
        };
    }
    renderStart() {
        return (h("div", { class: "VendingGaming__Start" },
            h("div", { class: "VendingGaming__ContentWrapper" },
                h("div", { class: "VendingGaming__Logo" },
                    h("img", { src: getAssetPath(`./assets/${this.rvLogo}`), alt: "" })),
                h("h2", { class: "VendingGaming__ContentTitle" },
                    "E tu che ",
                    h("b", null,
                        h("u", null, "capsula")),
                    " sei?"),
                h("div", { class: "VendingGaming__ContentDescription" },
                    h("p", null,
                        "Scopri subito qual e\u0300 la capsula adatta alla tua personalita\u0300! Gioca con il test di ",
                        h("b", null, "Romagna Vending"),
                        ", potresti vincere una macchinetta del caffe\u0300 a capsule!")),
                h("button", { onClick: _ev => this.step = 1, class: "VendingGaming__Submit VendingGaming__Submit--Confirm" }, "Fai il test"))));
    }
    setSelected(ev) {
        const buttons = this.el.shadowRoot.querySelectorAll("button.VendingGaming__Submit--Answer");
        const confirm = this.el.shadowRoot.querySelectorAll("button.VendingGaming__Submit--Confirm");
        this.colorComb = this.quizObj[this.currentQuestion].colors.comb;
        buttons.forEach(elem => {
            elem.classList.remove("is-active");
            elem.classList.remove(`comb-${this.colorComb}`);
            this.partialScore = 0;
        });
        ev.target.classList.add("is-active");
        const selection = ev.target.dataset.answer;
        if (selection === 'first') {
            this.partialScore = this.quizObj[this.currentQuestion].answer[0].points;
        }
        else {
            this.partialScore = this.quizObj[this.currentQuestion].answer[1].points;
        }
        ev.target.classList.add(`comb-${this.colorComb}`);
        confirm.forEach(elem => {
            elem.disabled = false;
        });
    }
    resetData() {
        this.totalScore = 0;
        this.partialScore = 0;
        this.step = 0;
        this.currentQuestion = 0;
    }
    startForm() {
        const formPanel = this.el.shadowRoot.querySelector(".VendingGaming__ResultForm");
        const gameWrapper = this.el.shadowRoot.querySelector(".VendingGaming__Wrapper--Results");
        // const body = document.querySelector("body");
        // body.style.height = "100vh";
        // body.style.overflow = "hidden";
        gameWrapper.classList.add("no-scroll");
        formPanel.classList.add("is-active");
        window.scrollTo(0, 0);
        this.formEvent.emit();
    }
    closeForm() {
        const formPanel = this.el.shadowRoot.querySelector(".VendingGaming__ResultForm");
        const gameWrapper = this.el.shadowRoot.querySelector(".VendingGaming__Wrapper--Results");
        // const body = document.querySelector("body");
        // body.style.height = "auto";
        // body.style.overflow = "auto";
        gameWrapper.classList.remove("no-scroll");
        formPanel.classList.remove("is-active");
    }
    shuffleArray(array) {
        let currentIndex = array.length, temporaryValue, randomIndex;
        // While there remain elements to shuffle...
        while (0 !== currentIndex) {
            // Pick a remaining element...
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            // And swap it with the current element.
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
        return array;
    }
    /**
  <meta name="description" content="La tua pausa in automatico on Romagna Vending&#8230;" />
  <meta property="og:locale" content="it_IT" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Romagna Vending | La tua pausa in automatico" />
  <meta property="og:description" content="La tua pausa in automatico on Romagna Vending&#8230;" />
  <meta property="og:url" content="http://dev.romagnavending.it/" />
  <meta property="og:site_name" content="Romagna Vending" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Romagna Vending | La tua pausa in automatico" />
  <meta name="twitter:description" content="La tua pausa in automatico on Romagna Vending&#8230;" />
    */
    loadMeta() {
        const properties = [
            {
                property: "og:locale",
                content: "it_IT"
            },
            {
                property: "og:url",
                content: "contenuto"
            },
            {
                property: "og:type",
                content: "website"
            },
            {
                property: "og:title",
                content: "Titolo OG"
            },
            {
                property: "og:description",
                content: "La tua pausa in automatico on Romagna Vending OG"
            },
            {
                property: "og:site_name",
                content: "Romagna Vending "
            },
            {
                property: "og:image",
                content: "https://via.placeholder.com/1920x1080"
            },
            {
                property: "og:image:secure_url",
                content: "https://via.placeholder.com/1920x1080"
            },
        ];
        const names = [
            {
                name: "description",
                content: "La tua pausa in automatico on Romagna Vending"
            },
            {
                name: "twitter:card",
                content: "summary"
            },
            {
                name: "twitter:title",
                content: "Titolo twitter"
            },
            {
                name: "twitter:description",
                content: "La tua pausa in automatico on Romagna Vending Twitter"
            },
        ];
        properties.forEach(item => {
            let metaTag = document.querySelector(`meta[property="${item.property}"]`);
            if (!metaTag) {
                let newMeta = document.createElement('meta');
                newMeta.setAttribute('property', item.property);
                newMeta.content = item.content;
                document.querySelector('head').appendChild(newMeta);
            }
            else if (metaTag && (item.content != metaTag.getAttribute('content'))) {
                metaTag.setAttribute('content', item.content);
            }
        });
        names.forEach(item => {
            let metaTag = document.querySelector(`meta[property="${item.name}"]`);
            if (!metaTag) {
                let newMeta = document.createElement('meta');
                newMeta.setAttribute('property', item.name);
                newMeta.content = item.content;
                document.querySelector('head').appendChild(newMeta);
            }
            else if (metaTag && (item.content != metaTag.getAttribute('content'))) {
                metaTag.setAttribute('content', item.content);
            }
        });
    }
    confirm() {
        if (this.currentQuestion < this.quizObj.length - 1) {
            const confirm = this.el.shadowRoot.querySelectorAll("button.VendingGaming__Submit--Confirm");
            confirm.forEach(elem => {
                elem.disabled = true;
            });
            const buttons = this.el.shadowRoot.querySelectorAll("button.VendingGaming__Submit--Answer");
            buttons.forEach(elem => {
                elem.classList.remove(`comb-${this.colorComb}`);
                elem.classList.remove("is-active");
            });
            this.totalScore = this.totalScore + this.partialScore;
            this.currentQuestion = this.currentQuestion + 1;
        }
        else {
            this.totalScore = this.totalScore + this.partialScore;
            this.step = 2;
        }
    }
    renderQuiz() {
        const numberBg = h("div", { class: "NumberBg" },
            h("img", { src: getAssetPath(`./assets/${this.quizObj[this.currentQuestion].number_background}`), alt: "" }));
        if (this.boxWidth <= 767) {
            return (h("div", { class: "VendingGaming__Quiz" },
                h("div", { class: "VendingGaming__ImageWrapper" },
                    h("div", { class: "VendingGaming__Number" }, this.currentQuestion < 9 ? `0${this.currentQuestion + 1}` : this.currentQuestion + 1),
                    h("div", { class: "VendingGaming__Image" },
                        h("img", { src: getAssetPath(`./assets/${this.quizObj[this.currentQuestion].image}`), alt: "" }))),
                h("div", { class: "VendingGaming__ContentWrapper" },
                    h("h2", { class: "VendingGaming__ContentTitle" }, this.quizObj[this.currentQuestion].question),
                    h("div", { class: "VendingGaming__Answers" },
                        h("button", { onClick: (ev) => this.setSelected(ev), "data-answer": "first", class: "VendingGaming__Submit VendingGaming__Submit--Answer" }, this.quizObj[this.currentQuestion].answer[0].text),
                        h("button", { onClick: (ev) => this.setSelected(ev), "data-answer": "second", class: "VendingGaming__Submit VendingGaming__Submit--Answer" }, this.quizObj[this.currentQuestion].answer[1].text)),
                    h("button", { disabled: true, onClick: () => this.confirm(), class: "VendingGaming__Submit VendingGaming__Submit--Confirm" }, "Conferma"))));
        }
        else {
            return (h("div", { class: "VendingGaming__Quiz" },
                h("div", { class: "VendingGaming__ContentWrapper" },
                    h("div", { class: "VendingGaming__Number" },
                        this.currentQuestion < 9 ? `0${this.currentQuestion + 1}` : this.currentQuestion + 1,
                        numberBg),
                    h("h2", { class: "VendingGaming__ContentTitle" }, this.quizObj[this.currentQuestion].question),
                    h("div", { class: "VendingGaming__Answers" },
                        h("button", { onClick: (ev) => this.setSelected(ev), "data-answer": "first", class: "VendingGaming__Submit VendingGaming__Submit--Answer" }, this.quizObj[this.currentQuestion].answer[0].text),
                        h("button", { onClick: (ev) => this.setSelected(ev), "data-answer": "second", class: "VendingGaming__Submit VendingGaming__Submit--Answer" }, this.quizObj[this.currentQuestion].answer[1].text)),
                    h("button", { disabled: true, onClick: () => this.confirm(), class: "VendingGaming__Submit VendingGaming__Submit--Confirm" }, "Conferma")),
                h("div", { class: "VendingGaming__ImageWrapper" },
                    h("div", { class: "VendingGaming__Image" },
                        h("img", { src: getAssetPath(`./assets/${this.quizObj[this.currentQuestion].image}`), alt: "" })))));
        }
    }
    renderResult() {
        this.randNum = Math.abs(this.totalScore - Math.floor(Math.random() * this.results.length));
        this.loadMeta();
        return (h("div", { class: "VendingGaming__Result" },
            h("div", { class: "VendingGaming__ContentWrapper" },
                h("section", { class: "VendingGaming__ResultSection" },
                    h("h2", { class: "VendingGaming__ResultTitle" }, "risultato:"),
                    h("div", { class: "VendingGaming__ResultImage" },
                        h("img", { src: getAssetPath(`./assets/results/${this.results[this.randNum].pod}`), alt: "" })),
                    h("div", { class: "VendingGaming__ResultText" },
                        h("p", null, this.results[this.randNum].text))),
                h("div", { class: "VendingGaming__ResultDivider" },
                    h("div", { class: "VendingGaming__DividerImg" },
                        h("img", { src: getAssetPath(`./assets/arrow.svg`), alt: "" }))),
                h("section", { class: "VendingGaming__ResultSection" },
                    h("h2", { class: "VendingGaming__ResultTitle" }, "Per la tua pausa consigliamo:"),
                    h("div", { class: "VendingGaming__ResultImage VendingGaming__ResultImage--Machine" },
                        h("img", { src: getAssetPath(`./assets/results/${this.results[this.randNum].machine}`), alt: "" }))),
                h("div", { class: "VendingGaming__ResultDivider" },
                    h("div", { class: "VendingGaming__DividerImg" },
                        h("img", { src: getAssetPath(`./assets/arrow.svg`), alt: "" }))),
                h("section", { class: "VendingGaming__ResultSection" },
                    h("h2", { class: "VendingGaming__ResultTitle" }, "Ottimo risultato!"),
                    h("div", { class: "VendingGaming__ResultText" },
                        h("p", null, "Condividi la tua cialda sui social e scopri quella dei tuoi amici!")),
                    h("div", { class: "VendingGaming__ResultShare" },
                        h("slot", { name: "social-share" })),
                    h("div", { class: "VendingGaming__Retry" },
                        h("div", { class: "VendingGaming__RetryItem" },
                            h("p", null, "Non sei soddisfatto?"),
                            h("button", { onClick: () => this.resetData(), class: "VendingGaming__Submit VendingGaming__Submit--Outline" }, "Riprova!")),
                        h("div", { class: "VendingGaming__RetryItem" },
                            h("p", null, "Per informazioni"),
                            h("button", { onClick: () => this.startForm(), class: "VendingGaming__Submit VendingGaming__Submit--Outline" }, "Contattaci")))))));
    }
    renderResultForm() {
        return (h("div", { class: "VendingGaming__ResultForm" },
            h("div", { class: "VendingGaming__ResultFormWrapper" },
                h("button", { onClick: () => this.closeForm(), class: "VendingGaming__CloseForm" }, "X"),
                h("slot", { name: "contact-form", "data-machine-name": this.results[this.randNum].machine_name, "data-pod-name": this.results[this.randNum].pod_name }))));
    }
    componentDidLoad() {
        ROController.addEntry(this.el.shadowRoot.querySelector('.VendingGaming'), this.resizeFunction, this.el);
    }
    componentDidUnload() {
        ROController.removeEntry(this.el.shadowRoot.querySelector('.VendingGaming'));
    }
    renderStep() {
        if (this.step == 1) {
            return this.renderQuiz();
        }
        else if (this.step == 2) {
            return this.renderResult();
        }
        else {
            return this.renderStart();
        }
    }
    render() {
        const backgroundNoise = `
    :host {
        --primary-bg: ${this.quizObj[this.currentQuestion].colors.primaryColor};
        --accent-bg: ${this.quizObj[this.currentQuestion].colors.accentColor};
        --button-text: ${this.quizObj[this.currentQuestion].colors.buttonText};
        --button-text-hover: ${this.quizObj[this.currentQuestion].colors.buttonTextHover};
        background-image: url(${getAssetPath(`./assets/${this.bgNoise}`)});
    }`;
        const backgroundWaves = h("div", { class: "Waves" },
            h("img", { src: getAssetPath(`./assets/${this.bgWaves}`), alt: "" }));
        return (h(Host, null,
            h("style", null, backgroundNoise),
            h("div", { class: `VendingGaming ${this.boxWidth <= 767 ? `` : `lg-screen`}` },
                h("div", { class: `VendingGaming__Wrapper ${this.step == 2 ? `VendingGaming__Wrapper--Results` : ``}` }, this.renderStep()),
                this.step == 2 ? this.renderResultForm() : ''),
            this.step == 0 || this.step == 2 ? backgroundWaves : ''));
    }
    static get is() { return "rv-game"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["game.scss", "assets/fonts.css"]
    }; }
    static get styleUrls() { return {
        "$": ["game.css", "assets/fonts.css"]
    }; }
    static get assetsDirs() { return ["assets"]; }
    static get properties() { return {
        "boxWidth": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "box-width",
            "reflect": false
        },
        "primaryImage": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "primary-image",
            "reflect": false
        },
        "bgNoise": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "bg-noise",
            "reflect": false,
            "defaultValue": "'bg_noise.svg'"
        },
        "bgWaves": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "bg-waves",
            "reflect": false,
            "defaultValue": "'bg_waves.svg'"
        },
        "rvLogo": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "rv-logo",
            "reflect": false,
            "defaultValue": "'logo_romagna_vending.svg'"
        },
        "numberBackground": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "number-background",
            "reflect": false,
            "defaultValue": "'forma_numeri.svg'"
        },
        "colorComb": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color-comb",
            "reflect": false
        },
        "totalScore": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "total-score",
            "reflect": false,
            "defaultValue": "0"
        },
        "partialScore": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "partial-score",
            "reflect": false,
            "defaultValue": "0"
        },
        "quizObj": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "{ question: string; image: string; number_background: string; answer: { text: string; points: number; }[]; colors: { comb: string; primaryColor: string; accentColor: string; buttonText: string; buttonTextHover: string; }; }[]",
                "resolved": "{ question: string; image: string; number_background: string; answer: { text: string; points: number; }[]; colors: { comb: string; primaryColor: string; accentColor: string; buttonText: string; buttonTextHover: string; }; }[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[\n    {\n      question: 'La tua vacanza ideale \u00E8...?',\n      image: 'test_1.svg',\n      number_background: 'number_bg_orange.svg',\n      answer: [\n        {\n          text: 'alla scoperta di una nazione straniera',\n          points: 1\n        },\n        {\n          text: 'tra le bellezze dell\\'italia',\n          points: 2\n        }\n      ],\n      colors: this.firstColorComb\n    },\n    {\n      question: 'In vacanza cerchi...?',\n      image: 'test_2.svg',\n      number_background: 'number_bg_blue.svg',\n      answer: [\n        {\n          text: 'Il completo relax',\n          points: 1\n        },\n        {\n          text: 'un\\'avventura, zaino in spalla',\n          points: 2\n        }\n      ],\n      colors: this.secondColorComb\n    },\n    {\n      question: 'Sull\\'aereo per raggiungere la meta preferisci...?',\n      image: 'test_3.svg',\n      number_background: 'number_bg_violet.svg',\n      answer: [\n        {\n          text: 'dedicarti ad un bel libro',\n          points: 1\n        },\n        {\n          text: 'dormire per arrivare con le batterie cariche',\n          points: 2\n        }\n      ],\n      colors: this.thirdColorComb\n    },\n    {\n      question: 'serata cinema! come ti organizzi?',\n      image: 'test_4.svg',\n      number_background: 'number_bg_orange.svg',\n      answer: [\n        {\n          text: 'ci vai da solo',\n          points: 1\n        },\n        {\n          text: 'organizzi un gruppetto',\n          points: 2\n        }\n      ],\n      colors: this.firstColorComb\n    },\n    {\n      question: 'che film scegli?',\n      image: 'test_5.svg',\n      number_background: 'number_bg_blue.svg',\n      answer: [\n        {\n          text: 'un thriller all\\'ultimo respiro',\n          points: 1\n        },\n        {\n          text: 'un film romantico dalla lacrima facile',\n          points: 2\n        }\n      ],\n      colors: this.secondColorComb \n    },\n    {\n      question: 'serata libera! dove si va?',\n      image: 'test_6.svg',\n      number_background: 'number_bg_violet.svg',\n      answer: [\n        {\n          text: 'due risate al pub',\n          points: 1\n        },\n        {\n          text: 'un\\'ottima cena al ristorante',\n          points: 2\n        }\n      ],\n      colors: this.thirdColorComb\n    },\n    {\n      question: 'bisogna ordinare da bere, cosa si ordina?',\n      image: 'test_7.svg',\n      number_background: 'number_bg_orange.svg',\n      answer: [\n        {\n          text: 'una bella birra con la schiuma',\n          points: 1\n        },\n        {\n          text: 'una bottiglia di vino pregiato',\n          points: 2\n        }\n      ],\n      colors: this.firstColorComb\n    },\n    {\n      question: '...e da mangiare?',\n      image: 'test_8.svg',\n      number_background: 'number_bg_blue.svg',\n      answer: [\n        {\n          text: 'una grigliata di carne',\n          points: 1\n        },\n        {\n          text: 'scorpacciata di pesce',\n          points: 2\n        }\n      ],\n      colors: this.secondColorComb \n    },\n    {\n      question: 'serata tra amici, cosa si fa?',\n      image: 'test_9.svg',\n      number_background: 'number_bg_violet.svg',\n      answer: [\n        {\n          text: 'silenzio, concentrazion e si guarda la partita',\n          points: 1\n        },\n        {\n          text: 'chiacchiere su tutto e tutti',\n          points: 2\n        }\n      ],\n      colors: this.thirdColorComb \n    },\n    {\n      question: 'Domanda finale. Nel caff\u00E8... Zucchero si o zucchero no?',\n      image: 'test_10.svg',\n      number_background: 'number_bg_orange.svg',\n      answer: [\n        {\n          text: 'si',\n          points: 1\n        },\n        {\n          text: 'no',\n          points: 2\n        }\n      ],\n      colors: this.firstColorComb\n    },\n  ]"
        },
        "results": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "{ machine: string; text: string; pod: string; machine_name: string; pod_name: string; }[]",
                "resolved": "{ machine: string; text: string; pod: string; machine_name: string; pod_name: string; }[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[\n    {\n      machine: 'machine_inovy.png',\n      text: 'Il tuo caff\u00E8 ha talmente tanta voglia di riportarti la carica che non riesce pi\u00F9 a stare nella tazzina. Mettiti comodo e sorseggialo, al resto ci pensa lui. Hai percepito questo brio?Ecco, finire la giornata sar\u00E0 una passeggiata!',\n      pod: 'pod_gustoso.png',\n      machine_name: 'Inovy',\n      pod_name: 'Gustoso',\n    },\n    {\n      machine: 'machine_inovy_compact.png',\n      text: 'Il tuo caff\u00E8 ha talmente tanta voglia di riportarti la carica che non riesce pi\u00F9 a stare nella tazzina. Mettiti comodo e sorseggialo, al resto ci pensa lui. Hai percepito questo brio?Ecco, finire la giornata sar\u00E0 una passeggiata!',\n      pod: 'pod_gustoso.png',\n      machine_name: 'Inovy Compact',\n      pod_name: 'Gustoso',\n    },\n    {\n      machine: 'machine_lf400_milk.png',\n      text: 'Il tuo caff\u00E8 ha talmente tanta voglia di riportarti la carica che non riesce pi\u00F9 a stare nella tazzina. Mettiti comodo e sorseggialo, al resto ci pensa lui. Hai percepito questo brio?Ecco, finire la giornata sar\u00E0 una passeggiata!',\n      pod: 'pod_gustoso.png',\n      machine_name: 'LF400 Milk',\n      pod_name: 'Gustoso',\n    },\n    {\n      machine: 'machine_inovy.png',\n      text: 'Il tuo caff\u00E8 ancora prima di svegliarti ti coccola, ti culla in un sapore unico. \u00C8 un caff\u00E8 da bere con gli occhi chiusi, pensando a tutti i momenti positivi della giornata. Finito? Apri gli occhi, sorridi e sar\u00E0 tutto pi\u00F9 bello.',\n      pod: 'pod_vivace.png',\n      machine_name: 'Inovy',\n      pod_name: 'Vivace',\n    },\n    {\n      machine: 'machine_inovy_compact.png',\n      text: 'Il tuo caff\u00E8 ancora prima di svegliarti ti coccola, ti culla in un sapore unico. \u00C8 un caff\u00E8 da bere con gli occhi chiusi, pensando a tutti i momenti positivi della giornata. Finito? Apri gli occhi, sorridi e sar\u00E0 tutto pi\u00F9 bello.',\n      pod: 'pod_vivace.png',\n      machine_name: 'Inovy Compact',\n      pod_name: 'Vivace',\n    },\n    {\n      machine: 'machine_lf400_milk.png',\n      text: 'Il tuo caff\u00E8 ancora prima di svegliarti ti coccola, ti culla in un sapore unico. \u00C8 un caff\u00E8 da bere con gli occhi chiusi, pensando a tutti i momenti positivi della giornata. Finito? Apri gli occhi, sorridi e sar\u00E0 tutto pi\u00F9 bello.',\n      pod: 'pod_vivace.png',\n      machine_name: 'LF400 Milk',\n      pod_name: 'Vivace',\n    },\n    {\n      machine: 'machine_inovy.png',\n      text: 'Le tue giornate lavorative fanno fatica ad ingranare, hai decisamente bisogno di una scossa! Il primo sorso di caff\u00E8 sar\u00E0 una densa iniezione di carica e motivazione, non ti resta che gonfiare il petto ed affrontare la giornata finalmente con il piglio giusto.',\n      pod: 'pod_corposo.png',\n      machine_name: 'Inovy',\n      pod_name: 'Corposo',\n    },\n    {\n      machine: 'machine_inovy_compact.png',\n      text: 'Le tue giornate lavorative fanno fatica ad ingranare, hai decisamente bisogno di una scossa! Il primo sorso di caff\u00E8 sar\u00E0 una densa iniezione di carica e motivazione, non ti resta che gonfiare il petto ed affrontare la giornata finalmente con il piglio giusto.',\n      pod: 'pod_corposo.png',\n      machine_name: 'Inovy Compact',\n      pod_name: 'Corposo',\n    },\n    {\n      machine: 'machine_lf400_milk.png',\n      text: 'Le tue giornate lavorative fanno fatica ad ingranare, hai decisamente bisogno di una scossa! Il primo sorso di caff\u00E8 sar\u00E0 una densa iniezione di carica e motivazione, non ti resta che gonfiare il petto ed affrontare la giornata finalmente con il piglio giusto.',\n      pod: 'pod_corposo.png',\n      machine_name: 'LF400 Milk',\n      pod_name: 'Corposo',\n    },\n    {\n      machine: 'machine_inovy.png',\n      text: 'Questa \u00E8 la capsula perfetta per te! La mattina hai bisogno di un sergente che ti dia la sveglia e detti i tempi per essere efficiente al 100%... un, due, un, due! Sveglio? Ne vuoi un altro?',\n      pod: 'pod_forte.png',\n      machine_name: 'Inovy',\n      pod_name: 'Forte',\n    },\n    {\n      machine: 'machine_inovy_compact.png',\n      text: 'Questa \u00E8 la capsula perfetta per te! La mattina hai bisogno di un sergente che ti dia la sveglia e detti i tempi per essere efficiente al 100%... un, due, un, due! Sveglio? Ne vuoi un altro?',\n      pod: 'pod_forte.png',\n      machine_name: 'Inovy Compact',\n      pod_name: 'Forte',\n    },\n    {\n      machine: 'machine_lf400_milk.png',\n      text: 'Questa \u00E8 la capsula perfetta per te! La mattina hai bisogno di un sergente che ti dia la sveglia e detti i tempi per essere efficiente al 100%... un, due, un, due! Sveglio? Ne vuoi un altro?',\n      pod: 'pod_forte.png',\n      machine_name: 'LF400 Milk',\n      pod_name: 'Forte',\n    },\n    {\n      machine: 'machine_inovy.png',\n      text: 'Sorseggialo, senti questa melodia che vola nell\u2019aria? Ecco la capsula giusta per te, perfetta per cambiare musica alla giornata. Camminerai per strada sicuro di sentire una colonna sonora su misura per te per tutto il tempo... concediti due passi di danza!',\n      pod: 'pod_aromatico.png',\n      machine_name: 'Inovy',\n      pod_name: 'Aromatico',\n    },\n    {\n      machine: 'machine_inovy_compact.png',\n      text: 'Sorseggialo, senti questa melodia che vola nell\u2019aria? Ecco la capsula giusta per te, perfetta per cambiare musica alla giornata. Camminerai per strada sicuro di sentire una colonna sonora su misura per te per tutto il tempo... concediti due passi di danza!',\n      pod: 'pod_aromatico.png',\n      machine_name: 'Inovy Compact',\n      pod_name: 'Aromatico',\n    },\n    {\n      machine: 'machine_lf400_milk.png',\n      text: 'Sorseggialo, senti questa melodia che vola nell\u2019aria? Ecco la capsula giusta per te, perfetta per cambiare musica alla giornata. Camminerai per strada sicuro di sentire una colonna sonora su misura per te per tutto il tempo... concediti due passi di danza!',\n      pod: 'pod_aromatico.png',\n      machine_name: 'LF400 Milk',\n      pod_name: 'Aromatico',\n    },\n    {\n      machine: 'machine_inovy.png',\n      text: 'Sei una scheggia impazzita! Madre Natura ti ha gi\u00E0 dato in dote una dose di carica perfetta... ma proprio non riesci a rinunciare al sapore del caff\u00E8! Questa \u00E8 la tua capsula, insieme create un mix perfetto.',\n      pod: 'pod_decaffeinato.png',\n      machine_name: 'Inovy',\n      pod_name: 'Decaffeinato',\n    },\n    {\n      machine: 'machine_inovy_compact.png',\n      text: 'Sei una scheggia impazzita! Madre Natura ti ha gi\u00E0 dato in dote una dose di carica perfetta... ma proprio non riesci a rinunciare al sapore del caff\u00E8! Questa \u00E8 la tua capsula, insieme create un mix perfetto.',\n      pod: 'pod_decaffeinato.png',\n      machine_name: 'Inovy Compact',\n      pod_name: 'Decaffeinato',\n    },\n    {\n      machine: 'machine_lf400_milk.png',\n      text: 'Sei una scheggia impazzita! Madre Natura ti ha gi\u00E0 dato in dote una dose di carica perfetta... ma proprio non riesci a rinunciare al sapore del caff\u00E8! Questa \u00E8 la tua capsula, insieme create un mix perfetto.',\n      pod: 'pod_decaffeinato.png',\n      machine_name: 'LF400 Milk',\n      pod_name: 'Decaffeinato',\n    },\n  ]"
        }
    }; }
    static get states() { return {
        "step": {},
        "currentQuestion": {}
    }; }
    static get events() { return [{
            "method": "formEvent",
            "name": "formEvent",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "el"; }
}
