Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
education.js 38 KiB
Newer Older
  • Learn to ignore specific revisions
  • peter_rabbit's avatar
    peter_rabbit committed
    (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
    
    peter_rabbit's avatar
    peter_rabbit committed
    module.exports = {
        server_url: `${location.origin}${
            location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
        }`,
        in_construction: true,
    };
    
    
    },{}],2:[function(require,module,exports){
    const { server_url } = require("./config");
    
    module.exports = {
        images_url: `${server_url}/assets/images`,
    
    peter_rabbit's avatar
    peter_rabbit committed
        news_articles_url: `${server_url}/news-articles`,
        game_articles_url: `${server_url}/game-articles`,
        software_articles_url: `${server_url}/software-articles`,
    
    };
    
    },{"./config":1}],3:[function(require,module,exports){
    
    peter_rabbit's avatar
    peter_rabbit committed
    "use strict";
    
    module.exports = {
        setRenderCycleRoot(renderCycleRoot) {
            this.renderCycleRoot = renderCycleRoot;
        },
        objectToHtml: function objectToHtml(obj) {
            const { tag } = obj;
    
            const node = document.createElement(tag);
            const excludeKeys = ["tag", "contents", "style_rules", "state"];
    
            Object.keys(obj)
                .filter(attr => !excludeKeys.includes(attr))
                .forEach(attr => {
                    if (attr === "class") {
                        node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
                    } else {
                        node[attr] = obj[attr];
                    }
                });
            if (obj.contents && typeof obj.contents === "string") {
                node.innerHTML = obj.contents;
            } else {
                obj.contents &&
                    obj.contents.length > 0 &&
                    obj.contents.forEach(el => {
                        switch (typeof el) {
                            case "string":
                                node.innerHTML = el;
                                break;
                            case "object":
                                node.appendChild(objectToHtml(el));
                                break;
                        }
                    });
            }
    
            if (obj.style_rules) {
                Object.keys(obj.style_rules).forEach(rule => {
                    node.style[rule] = obj.style_rules[rule];
                });
            }
    
            return node;
        },
        renderCycle: function () {
            this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
                mode: "replace",
            });
        },
        subRender(object, htmlNode, options = { mode: "append" }) {
            const insert = this.objectToHtml(object);
            switch (options.mode) {
                case "append":
                    htmlNode.appendChild(insert);
                    break;
                case "override":
                    htmlNode.innerHTML = "";
                    htmlNode.appendChild(insert);
                    break;
                case "insert-before":
                    htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
                    break;
                case "adjacent":
                    /**
                     * options.insertLocation must be one of:
                     *
                     * afterbegin
                     * afterend
                     * beforebegin
                     * beforeend
                     */
                    htmlNode.insertAdjacentHTML(options.insertLocation, insert);
                    break;
                case "replace":
                    htmlNode.parentNode.replaceChild(insert, htmlNode);
                    break;
                case "remove":
                    htmlNode.remove();
                    break;
            }
        },
    };
    
    
    },{}],4:[function(require,module,exports){
    
    peter_rabbit's avatar
    peter_rabbit committed
    "use strict";
    
    
    const { images_url } = require("../../../../constants");
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    const GAMEDEV_THEMES = [
    
    peter_rabbit's avatar
    peter_rabbit committed
        {
            title: "Dessin et création 2D",
    
            image: "learning_theme_2d.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                "Création de décors et de personnages",
                "Dessin sur ordinateur, pixel art, vectoriel",
                "Animations 2D",
    
            title: "Musique et sons",
    
            image: "learning_theme_sound.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
    
    peter_rabbit's avatar
    peter_rabbit committed
        },
        {
    
            title: "Écriture",
    
            image: "learning_theme_write.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
                "Écrire une histoire, construire une narration",
                "Imaginer des mondes et des personnages",
            ],
        },
        {
    
            title: "Conception",
    
            image: "learning_theme_conception.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
    
                "Concevoir les différents éléments qui composent le jeu",
    
    peter_rabbit's avatar
    peter_rabbit committed
                "Développer les mécanismes de gameplay",
            ],
        },
        {
    
            title: "Programmation",
    
            image: "learning_theme_coding.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
                "Apprendre pas à pas à coder avec différents langages de programmation",
                "Découvrir les bases du web en créant des mini-jeux en lignes",
            ],
        },
        {
    
            title: "Mathématiques",
    
            image: "learning_theme_math.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            comment:
    
                "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                "Algorithmie",
                "Logique (algèbre booléen)",
                "Géométrie",
                "Trigonométrie",
                "Algèbre linéaire",
                "Repères 2D / 3D",
                "Vecteurs 2D / 3D",
                "Newton",
                "...",
    
            title: "Travail d'équipe",
    
            image: "learning_theme_team.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            comment: `
                <em>
                    Faire son jeu tout seul c'est bien mais ça peut être long !
    
                    <br />Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.
    
    peter_rabbit's avatar
    peter_rabbit committed
                </em>`,
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: ["Gestion de projet", "Méthodologie", "Communication"],
    
    peter_rabbit's avatar
    peter_rabbit committed
        },
        {
    
    peter_rabbit's avatar
    peter_rabbit committed
            title: "Logiciels libres, GNU/Linux",
    
            image: "learning_theme_linux.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            comment:
    
                "<em>Nous utilisons essentiellement des logiciels libres sur Linux.<br />C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</em>",
            details: ["Ubuntu / Debian", "GIMP", "LMMS", "Audacity", "Pencil2d", "..."],
    
    class GameStudioClub {
    
    peter_rabbit's avatar
    peter_rabbit committed
        render() {
            return {
    
                tag: "section",
    
    peter_rabbit's avatar
    peter_rabbit committed
                contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                    {
    
                        tag: "div",
    
                        class: "title-banner game-banner",
    
    peter_rabbit's avatar
    peter_rabbit committed
                        id: "game-studio-club", // anchor id
    
                        contents: [{ tag: "h2", contents: "Game Studio Club" }],
    
                        tag: "div",
    
    peter_rabbit's avatar
    peter_rabbit committed
                        class: "section-contents page-contents-center",
    
    peter_rabbit's avatar
    peter_rabbit committed
                        contents: [
                            {
    
                                tag: "div",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                class: "full-row",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                contents: [
    
                                    {
                                        tag: "h3",
                                        class: "big",
                                        contents:
                                            "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
                                    },
    
                                    {
                                        tag: "strong",
                                        contents:
                                            "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
                                    },
    
                                    {
                                        tag: "p",
                                        contents:
    
                                            "<em><b><blue>Aucun prérequis nécessaire</blue></b>. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
    
                                tag: "div",
                                class: "practical-infos",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                contents: [
    
                                    {
                                        tag: "div",
                                        class: "info-item",
                                        contents: [
                                            { tag: "strong", contents: "Ça se passe où ?" },
                                            {
                                                tag: "span",
                                                contents:
    
                                                    "Dans nos locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
    
                                            },
                                        ],
                                    },
                                    {
                                        tag: "div",
                                        class: "info-item",
                                        contents: [
                                            { tag: "strong", contents: "Pour qui ?" },
                                            {
                                                tag: "span",
    
                                                contents:
                                                    "Tout le monde à partir de <b><blue>12 ans</blue></b>.",
    
                                            },
                                        ],
                                    },
                                    {
                                        tag: "div",
                                        class: "info-item",
                                        contents: [
                                            {
                                                tag: "strong",
                                                contents: "Contact",
                                            },
                                            {
                                                tag: "span",
                                                contents: "04 75 78 08 72",
                                            },
                                            {
                                                tag: "a",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                href: "mailto:contact@kuadrado-software.fr",
                                                contents: "contact@kuadrado-software.fr",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                tag: "div",
                                class: "list-wrapper",
                                contents: [
                                    {
                                        tag: "ul",
                                        class: "learning-themes",
                                        contents: GAMEDEV_THEMES.map(li => {
                                            return {
                                                tag: "li",
                                                class: "learning-theme",
    
                                                contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                    {
                                                        tag: "strong",
                                                        class: "title",
                                                        contents: li.title,
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                    { tag: "img", src: `${images_url}/${li.image}` },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        tag: "div",
                                                        class: "details",
                                                        contents: [
                                                            li.comment && {
                                                                tag: "div",
                                                                class: "comment",
                                                                contents: li.comment,
                                                            },
                                                            {
                                                                tag: "ul",
                                                                contents: li.details.map(d => {
                                                                    return {
                                                                        tag: "li",
                                                                        contents: d,
                                                                    };
                                                                }),
                                                            },
                                                        ],
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
    
                                tag: "div",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                class: "infos-inscriptions full-row",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                contents: [
    
                                    {
                                        tag: "div",
                                        class: "groups",
                                        contents: [
                                            {
                                                tag: "h3",
                                                contents: "Groupes",
                                            },
                                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "p",
    
                                                contents:
                                                    "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            },
                                            {
                                                tag: "div",
                                                class: "table-wrapper",
    
                                                contents: [
                                                    {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        tag: "table",
    
                                                        contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                            {
                                                                tag: "tr",
                                                                contents: [
                                                                    { tag: "td", contents: "Mardi" },
                                                                    {
                                                                        tag: "td",
                                                                        contents: "16h - 19h",
                                                                    },
                                                                ],
                                                            },
                                                            {
                                                                tag: "tr",
                                                                contents: [
                                                                    { tag: "td", contents: "Mercredi" },
                                                                    {
                                                                        tag: "td",
                                                                        contents: "14h - 17h",
                                                                    },
                                                                ],
                                                            },
                                                            {
                                                                tag: "tr",
                                                                contents: [
                                                                    { tag: "td", contents: "Jeudi" },
                                                                    {
                                                                        tag: "td",
                                                                        contents: "16h - 19h",
                                                                    },
                                                                ],
                                                            },
    
                                                        ],
                                                    },
                                                ],
                                            },
                                        ],
                                    },
                                    {
                                        tag: "div",
                                        class: "pricing",
                                        contents: [
                                            {
                                                tag: "h3",
                                                contents: "Inscription, fonctionnement et tarifs",
                                            },
                                            {
                                                tag: "p",
                                                contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.
    
                                            <br /><br />Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "div",
                                                class: "table-wrapper",
    
                                                contents: [
                                                    {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        tag: "table",
    
                                                        contents: [
                                                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                                tag: "tr",
                                                                contents: [
                                                                    {
                                                                        tag: "td",
                                                                        contents: "Abonnement 1 mois",
                                                                    },
                                                                    {
                                                                        tag: "td",
                                                                        contents: "(4 séances)",
                                                                    },
    
                                                                    { tag: "td", contents: "60€" },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                                tag: "tr",
                                                                contents: [
                                                                    {
                                                                        tag: "td",
                                                                        contents:
                                                                            "Abonnement 1 trimestre",
                                                                    },
                                                                    {
                                                                        tag: "td",
                                                                        contents: "(12 séances)",
                                                                    },
    
                                                                    { tag: "td", contents: "160€" },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            {
                                                tag: "div",
                                                contents: [
                                                    {
                                                        tag: "a",
                                                        class: "download-link",
                                                        download: "fiche-inscription",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        href: "/assets/documents/fiche-inscription.pdf",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        contents: "Télécharger la fiche d'inscription",
                                                    },
                                                ],
                                            },
    
                ],
            };
        }
    }
    
    module.exports = GameStudioClub;
    
    
    },{"../../../../constants":2}],5:[function(require,module,exports){
    
    "use strict";
    
    
    const { images_url } = require("../../../../constants");
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    const VULGARISATION_THEMES = [
        {
            title: "Qu'est-ce qui se passe dans mon ordinateur ?",
    
            image: "learning_theme_pc.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
    
                "Répondre aux questions sur l'informatique de tous les jours",
    
    peter_rabbit's avatar
    peter_rabbit committed
                "L'organisation des fichiers",
    
                "Le navigateur web et les logiciels usuels",
    
                "Le système d'exploitation",
    
    peter_rabbit's avatar
    peter_rabbit committed
            ],
        },
        {
            title: "GNU/Linux, le monde du libre",
    
            image: "learning_theme_linux.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
                "Installer Linux, démystifier et faire tomber les barrières.",
                "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
            ],
        },
        {
    
            title: "Comment fonctionne le web ?",
    
            image: "learning_theme_web.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
                "De quoi est fait le réseau internet ?",
    
                "Comment fonctionnent les différents services que nous utilisons ?",
    
    peter_rabbit's avatar
    peter_rabbit committed
                "Qu'est-ce qu'un cloud ?",
            ],
        },
        {
            title: "Le langages des machines",
    
            image: "learning_theme_coding.png",
    
    peter_rabbit's avatar
    peter_rabbit committed
            details: [
                "Démystifier la programmation informatique",
                "Qu'est-ce qu'un langage de programmation",
                "À quoi ça sert ?",
                "Les métiers du développement informatique",
            ],
        },
    ];
    
    peter_rabbit's avatar
    peter_rabbit committed
    class Popularization {
    
        render() {
            return {
    
    peter_rabbit's avatar
    peter_rabbit committed
                tag: "section",
    
                contents: [
    
                    {
                        tag: "div",
    
                        class: "title-banner popu-banner",
    
    peter_rabbit's avatar
    peter_rabbit committed
                        id: "popularization", // anchor id
    
                        contents: [{ tag: "h2", contents: "Vulgarisation numérique" }],
    
    peter_rabbit's avatar
    peter_rabbit committed
                        tag: "div",
    
    peter_rabbit's avatar
    peter_rabbit committed
                        class: "section-contents page-contents-center",
    
                        contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                                tag: "div",
                                class: "full-row",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                    contents: [
                                        {
                                            tag: "h3",
                                            class: "big",
                                            contents:
                                                "<blue>Démystifier</blue> l'informatique",
                                        },
                                        {
                                            tag: "strong",
                                            contents:
                                                "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
                                        },
                                        {
                                            tag: "p",
                                            contents:
                                                "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
                                        },
                                    ]
    
    peter_rabbit's avatar
    peter_rabbit committed
                                tag: "div",
                                class: "practical-infos",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        tag: "div",
                                        class: "info-item",
    
                                        contents: [
                                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "span",
    
                                                contents:
    
                                                    "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        tag: "div",
                                        class: "info-item",
    
                                        contents: [
                                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "strong",
                                                contents: "Contact",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "span",
                                                contents: "04 75 78 08 72",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "a",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                href: "mailto:contact@kuadrado-software.fr",
                                                contents: "contact@kuadrado-software.fr",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                tag: "div",
                                class: "list-wrapper",
                                contents: [
                                    {
                                        tag: "ul",
                                        class: "learning-themes",
                                        contents: VULGARISATION_THEMES.map(li => {
                                            return {
                                                tag: "li",
                                                class: "learning-theme " + li.class,
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                contents: [
                                                    {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        tag: "strong",
                                                        class: "title",
                                                        contents: li.title,
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                    { tag: "img", src: `${images_url}/${li.image}` },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        tag: "div",
                                                        class: "details",
                                                        contents: [
                                                            {
                                                                tag: "div",
                                                                class: "comment",
                                                                contents: li.comment,
                                                            },
                                                            {
                                                                tag: "ul",
                                                                contents: li.details.map(d => {
                                                                    return {
                                                                        tag: "li",
                                                                        contents: d,
                                                                    };
                                                                }),
                                                            },
                                                        ],
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
    
    peter_rabbit's avatar
    peter_rabbit committed
                            // {
                            //     tag: "ul",
                            //     class: "learning-themes",
                            //     contents: VULGARISATION_THEMES.map(li => {
                            //         return {
                            //             tag: "li",
                            //             class: "learning-theme " + li.class,
                            //             contents: [
                            //                 { tag: "strong", class: "title", contents: li.title },
                            //                 { tag: "img", src: `${images_url}/${li.image}` },
                            //                 {
                            //                     tag: "div",
                            //                     class: "details",
                            //                     contents: [
                            //                         {
                            //                             tag: "div",
                            //                             class: "comment",
                            //                             contents: li.comment,
                            //                         },
                            //                         {
                            //                             tag: "ul",
                            //                             contents: li.details.map(d => {
                            //                                 return {
                            //                                     tag: "li",
                            //                                     contents: d,
                            //                                 };
                            //                             }),
                            //                         },
                            //                     ],
                            //                 },
                            //             ],
                            //         };
                            //     }),
                            // },
    
    peter_rabbit's avatar
    peter_rabbit committed
                        ],
                    },
    
    peter_rabbit's avatar
    peter_rabbit committed
    module.exports = Popularization;
    
    },{"../../../../constants":2}],6:[function(require,module,exports){
    
    peter_rabbit's avatar
    peter_rabbit committed
    "use strict";
    
    const GameStudioClub = require("./components/game-studio-club");
    
    peter_rabbit's avatar
    peter_rabbit committed
    const Popularization = require("./components/popularization");
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    class EducationPage {
        constructor(args) {
            Object.assign(this, args);
        }
    
        render() {
            return {
                tag: "div",
                id: "education-page",
                contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                        tag: "div",
                        class: "page-header",
                        contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                            { tag: "h1", contents: "Pédagogie", class: "page-contents-center" },
    
    peter_rabbit's avatar
    peter_rabbit committed
                            {
                                tag: "p",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                class: "page-contents-center",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                contents:
                                    "Démystifier et s'approprier la technologie par le partage de connaissances.",
                            },
                        ],
    
    peter_rabbit's avatar
    peter_rabbit committed
                    },
    
    peter_rabbit's avatar
    peter_rabbit committed
                    new GameStudioClub().render(),
    
    peter_rabbit's avatar
    peter_rabbit committed
                    new Popularization().render(),
    
    peter_rabbit's avatar
    peter_rabbit committed
                ],
            };
        }
    }
    
    module.exports = EducationPage;
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    },{"./components/game-studio-club":4,"./components/popularization":5}],7:[function(require,module,exports){
    
    peter_rabbit's avatar
    peter_rabbit committed
    "use strict";
    
    "use strict";
    const runPage = require("../../run-page");
    const EducationPage = require("./education");
    runPage(EducationPage);
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    },{"../../run-page":8,"./education":6}],8:[function(require,module,exports){
    
    peter_rabbit's avatar
    peter_rabbit committed
    "use strict";
    
    const objectHtmlRenderer = require("./lib/object-html-renderer");
    const Template = require("./template/template");
    
    module.exports = function runPage(PageComponent) {
        const template = new Template({ page: new PageComponent() });
        objectHtmlRenderer.setRenderCycleRoot(template);
        objectHtmlRenderer.renderCycle();
    };
    
    
    },{"./lib/object-html-renderer":3,"./template/template":10}],9:[function(require,module,exports){
    
    peter_rabbit's avatar
    peter_rabbit committed
    "use strict";
    
    
    const { images_url } = require("../../../constants");
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    const NAV_MENU_ITEMS = [
    
        ["/games/", "Jeux"],
        ["/software-development/", "Software"],
    
    peter_rabbit's avatar
    peter_rabbit committed
        [
    
            "/education/",
    
    peter_rabbit's avatar
    peter_rabbit committed
            "Pédagogie",
            [
                // submenu
    
                ["/education/#game-studio-club", "Game Studio Club"],
                ["/education/#popularization", "Vulgarisation numérique"],
    
    peter_rabbit's avatar
    peter_rabbit committed
            ],
        ],
    ];
    
    
    class NavBar {
        constructor() {
            this.initEventHandlers();
        }
    
        handleBurgerClick() {
            document.getElementById("nav-menu-list").classList.toggle("responsive-show");
        }
    
        initEventHandlers() {
            window.addEventListener("click", event => {
                if (
                    event.target.id !== "nav-menu-list" &&
                    !event.target.classList.contains("burger") &&
                    !event.target.parentNode.classList.contains("burger")
                ) {
                    document.getElementById("nav-menu-list").classList.remove("responsive-show");
                }
            });
        }
    
        renderHome() {
            return {
                tag: "div",
                class: "home",
                contents: [
                    {
                        tag: "a",
    
    peter_rabbit's avatar
    peter_rabbit committed
                            { tag: "img", src: `${images_url}/logo_kuadrado.svg` },
                            {
                                tag: "img",
                                class: "logo-text",
                                src: `${images_url}/logo_kuadrado_txt.svg`,
                            },
    
    peter_rabbit's avatar
    peter_rabbit committed
        renderMenu(menuItemsArray, isSubmenu = false) {
    
    peter_rabbit's avatar
    peter_rabbit committed
                tag: "ul",
    
                id: "nav-menu-list",
    
    peter_rabbit's avatar
    peter_rabbit committed
                class: isSubmenu ? "submenu" : "",
                contents: menuItemsArray.map(link => {
    
                    const [href, text, submenu] = link;
    
    peter_rabbit's avatar
    peter_rabbit committed
                    return {
                        tag: "li",
                        class: !isSubmenu && window.location.pathname === href ? "active" : "",
    
    peter_rabbit's avatar
    peter_rabbit committed
                        contents: [
                            {
                                tag: "a",
                                href,
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
                        ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
    
        renderResponsiveBurger() {
            return {
                tag: "div",
                class: "burger",
                onclick: this.handleBurgerClick.bind(this),
                contents: [{ tag: "span", contents: "···" }],
            };
        }
    
        render() {
            return {
                tag: "nav",
                contents: [
                    this.renderHome(),
                    this.renderResponsiveBurger(),
                    this.renderMenu(NAV_MENU_ITEMS),
                ],
            };
        }
    }
    
    module.exports = NavBar;
    
    },{"../../../constants":2}],10:[function(require,module,exports){
    "use strict";
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    const { in_construction } = require("../../config");
    
    peter_rabbit's avatar
    peter_rabbit committed
    const { images_url } = require("../../constants");
    
    const NavBar = require("./components/navbar");
    
    class Template {
        constructor(props) {
            this.props = props;
        }
    
    peter_rabbit's avatar
    peter_rabbit committed
        render() {
            return {
                tag: "main",
                contents: [
                    {
                        tag: "header",
    
                        contents: [new NavBar().render()],
    
    peter_rabbit's avatar
    peter_rabbit committed
                    },
    
    peter_rabbit's avatar
    peter_rabbit committed
                    in_construction && {
                        tag: "section",
                        class: "warning-banner",
                        contents: [
                            {
                                tag: "strong",
                                class: "page-contents-center",
                                contents: "Site en construction ...",
                            },
                        ],
                    },
    
    peter_rabbit's avatar
    peter_rabbit committed
                        tag: "section",
    
    peter_rabbit's avatar
    peter_rabbit committed
                        id: "page-container",
                        contents: [this.props.page.render()],
                    },
                    {
                        tag: "footer",
                        contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                            {
                                tag: "div",
                                class: "logo",
                                contents: [
                                    {
                                        tag: "img",
                                        src: `${images_url}/logo_kuadrado.svg`,
                                    },
                                    {
                                        tag: "img",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        class: "text-logo",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        src: `${images_url}/logo_kuadrado_txt.svg`,
                                    },
                                ],
                            },
                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                tag: "span",
                                contents:
                                    "Toutes les images du site ont été réalisées par nos soins et peuvent être réutilisées pour un usage personnel.",
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
    
    peter_rabbit's avatar
    peter_rabbit committed
                            {
                                tag: "a",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                href: "mailto:contact@kuadrado-software.fr",
                                contents: "contact@kuadrado-software.fr",
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
                        ],
                    },
                ],
            };
        }
    }
    
    module.exports = Template;
    
    
    peter_rabbit's avatar
    peter_rabbit committed
    },{"../../config":1,"../../constants":2,"./components/navbar":9}]},{},[7]);