education.js

(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){
function getServerUrl() {
    return `${location.origin}${
        location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
    }`;
}

module.exports = {
    getServerUrl,
    website_title: "Kuadrado website template",
    build: {
        protected_dirs: ["assets", "style", "articles"],
        default_meta_keys: ["title", "description", "image", "open_graph"],
    },
};

},{}],2:[function(require,module,exports){
const { getServerUrl } = require("./config");

module.exports = {
    images_url: `${getServerUrl()}assets/images/`,
    articles_url: `${getServerUrl()}articles/`,
};

},{"./config":1}],3:[function(require,module,exports){
"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){
"use strict";

class WebPage {
    constructor(args) {
        Object.assign(this, args);
    }
}

module.exports = WebPage;
},{}],5:[function(require,module,exports){
"use strict";

const { images_url } = require("../../../../constants");

const GAMEDEV_THEMES = [
    {
        title: "Dessin et création 2D",
        image: "learning_theme_2d.png",
        details: [
            "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",
        details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
    },
    {
        title: "Écriture",
        image: "learning_theme_write.png",
        details: [
            "Écrire une histoire, construire une narration",
            "Imaginer des mondes et des personnages",
        ],
    },
    {
        title: "Conception",
        image: "learning_theme_conception.png",
        details: [
            "Concevoir les différents éléments qui composent le jeu",
            "Développer les mécanismes de gameplay",
        ],
    },
    {
        title: "Programmation",
        image: "learning_theme_coding.png",
        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",
        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>",
        details: [
            "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",
        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.
            </em>`,
        details: ["Gestion de projet", "Méthodologie", "Communication"],
    },
    {
        title: "Logiciels libres, GNU/Linux",
        image: "learning_theme_linux.png",
        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 {
    render() {
        return {
            tag: "section",
            contents: [
                {
                    tag: "div",
                    class: "title-banner game-banner",
                    id: "game-studio-club", // anchor id
                    contents: [{ tag: "h2", contents: "Game Studio Club" }],
                },
                {
                    tag: "div",
                    class: "section-contents page-contents-center",
                    contents: [
                        {
                            tag: "div",
                            class: "full-row",
                            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",
                            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: "a",
                                            href: "tel:+33475780872",
                                            contents: "04 75 78 08 72",
                                        },
                                        {
                                            tag: "a",
                                            href: "mailto:contact@kuadrado-software.fr",
                                            contents: "contact@kuadrado-software.fr",
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "list-wrapper",
                            contents: [
                                {
                                    tag: "ul",
                                    class: "learning-themes",
                                    contents: GAMEDEV_THEMES.map(li => {
                                        return {
                                            tag: "li",
                                            class: "learning-theme",
                                            contents: [
                                                {
                                                    tag: "strong",
                                                    class: "title",
                                                    contents: li.title,
                                                },
                                                {
                                                    tag: "img",
                                                    alt: `learning theme image ${li.title}`,
                                                    src: `${images_url}${li.image}`,
                                                },
                                                {
                                                    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,
                                                                };
                                                            }),
                                                        },
                                                    ],
                                                },
                                            ],
                                        };
                                    }),
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "infos-inscriptions full-row",
                            contents: [
                                {
                                    tag: "div",
                                    class: "groups",
                                    contents: [
                                        {
                                            tag: "h3",
                                            contents: "Groupes",
                                        },
                                        {
                                            tag: "p",
                                            contents:
                                                "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
                                        },
                                        {
                                            tag: "div",
                                            class: "table-wrapper",
                                            contents: [
                                                {
                                                    tag: "table",
                                                    contents: [
                                                        {
                                                            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.
                                        `,
                                        },
                                        {
                                            tag: "div",
                                            class: "table-wrapper",
                                            contents: [
                                                {
                                                    tag: "table",
                                                    contents: [
                                                        {
                                                            tag: "tr",
                                                            contents: [
                                                                {
                                                                    tag: "td",
                                                                    contents: "Abonnement 1 mois",
                                                                },
                                                                {
                                                                    tag: "td",
                                                                    contents: "(4 séances)",
                                                                },
                                                                { tag: "td", contents: "60€" },
                                                            ],
                                                        },
                                                        {
                                                            tag: "tr",
                                                            contents: [
                                                                {
                                                                    tag: "td",
                                                                    contents:
                                                                        "Abonnement 1 trimestre",
                                                                },
                                                                {
                                                                    tag: "td",
                                                                    contents: "(12 séances)",
                                                                },
                                                                { tag: "td", contents: "160€" },
                                                            ],
                                                        },
                                                    ],
                                                },
                                            ],
                                        },
                                        {
                                            tag: "div",
                                            contents: [
                                                {
                                                    tag: "a",
                                                    class: "download-link",
                                                    download: "fiche-inscription",
                                                    href: "/assets/documents/fiche-inscription.pdf",
                                                    contents: "Télécharger la fiche d'inscription",
                                                },
                                            ],
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = GameStudioClub;

},{"../../../../constants":2}],6:[function(require,module,exports){
"use strict";

const { images_url } = require("../../../../constants");

const VULGARISATION_THEMES = [
    {
        title: "Qu'est-ce qui se passe dans mon ordinateur ?",
        image: "learning_theme_pc.png",
        details: [
            "Répondre aux questions sur l'informatique de tous les jours",
            "L'organisation des fichiers",
            "Le navigateur web et les logiciels usuels",
            "Le système d'exploitation",
        ],
    },
    {
        title: "GNU/Linux, le monde du libre",
        image: "learning_theme_linux.png",
        details: [
            "Apprendre à installer Linux",
            "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
        ],
    },
    {
        title: "Comment fonctionne le web ?",
        image: "learning_theme_web.png",
        details: [
            "De quoi est fait le réseau internet ?",
            "Comment fonctionnent les différents services que nous utilisons ?",
            "Qu'est-ce qu'un cloud ?",
        ],
    },
    {
        title: "Le langages des machines",
        image: "learning_theme_coding.png",
        details: [
            "Qu'est-ce qu'un langage de programmation",
            "À quoi ça sert ?",
            "Les métiers du développement informatique",
        ],
    },
    {
        title: "Les coulisses du jeu vidéo",
        image: "learning_theme_2d.png",
        details: [
            "De quoi sont fait les jeux vidéos ?",
            "Quels sont les outils ?",
            "Les métiers du jeu vidéo",
            "Du pixelart à l'industrie lourde",
            "Qu'est-ce qu'un moteur de jeu ?"
        ],
    },
];

class Popularization {
    render() {
        return {
            tag: "section",
            contents: [
                {
                    tag: "div",
                    class: "title-banner popu-banner",
                    id: "popularization", // anchor id
                    contents: [{ tag: "h2", contents: "Vulgarisation numérique" }],
                },
                {
                    tag: "div",
                    class: "section-contents page-contents-center",
                    contents: [
                        {
                            tag: "div",
                            class: "full-row",
                            contents: [
                                {
                                    tag: "h3",
                                    class: "big",
                                    contents: "<blue>S'approprier</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>",
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "practical-infos",
                            contents: [
                                {
                                    tag: "div",
                                    class: "info-item",
                                    contents: [
                                        {
                                            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>.",
                                        },
                                    ],
                                },
                                {
                                    tag: "div",
                                    class: "info-item",
                                    contents: [
                                        {
                                            tag: "strong",
                                            contents: "Contact",
                                        },
                                        {
                                            tag: "a",
                                            href: "tel:+33475780872",
                                            contents: "04 75 78 08 72",
                                        },
                                        {
                                            tag: "a",
                                            href: "mailto:contact@kuadrado-software.fr",
                                            contents: "contact@kuadrado-software.fr",
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "list-wrapper",
                            contents: [
                                {
                                    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",
                                                    alt: `learning theme image ${li.title}`,
                                                    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,
                                                                };
                                                            }),
                                                        },
                                                    ],
                                                },
                                            ],
                                        };
                                    }),
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = Popularization;

},{"../../../../constants":2}],7:[function(require,module,exports){
"use strict";

const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
const GameStudioClub = require("./components/game-studio-club");
const Popularization = require("./components/popularization");

class EducationPage extends WebPage {

    render() {
        return {
            tag: "div",
            id: "education-page",
            contents: [
                {
                    tag: "div",
                    class: "page-header logo-left",
                    contents: [
                        {
                            tag: "div",
                            class: "page-contents-center grid-wrapper",
                            contents: [
                                {
                                    tag: "div",
                                    class: "logo",
                                    contents: [
                                        {
                                            tag: "img",
                                            alt: "image brain",
                                            src: `${images_url}brain.svg`,
                                        },
                                    ],
                                },
                                { tag: "h1", contents: "Pédagogie" },
                                {
                                    tag: "p",
                                    contents: `Animations autour de la création de jeux vidéos, vulgarisation numérique.`,
                                },
                            ],
                        },
                    ],
                },
                new GameStudioClub().render(),
                new Popularization().render(),
            ],
        };
    }
}

module.exports = EducationPage;

},{"../../../constants":2,"../../lib/web-page":4,"./components/game-studio-club":5,"./components/popularization":6}],8:[function(require,module,exports){
"use strict";

"use strict";
const runPage = require("../../run-page");
const EducationPage = require("./education");
runPage(EducationPage);

},{"../../run-page":9,"./education":7}],9:[function(require,module,exports){
"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":11}],10:[function(require,module,exports){
"use strict";

const { images_url } = require("../../../constants");

const NAV_MENU_ITEMS = [
    ["/games/", "Jeux"],
    [
        "/software-development/",
        "Software",
        [
            ["/software-development/#projects", "Projets"],
            ["/software-development/#service", "Prestation de services"],
        ],
    ],
    [
        "/education/",
        "Pédagogie",
        [
            // submenu
            ["/education/#game-studio-club", "Game Studio Club"],
            ["/education/#popularization", "Vulgarisation numérique"],
        ],
    ],
];

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",
                    href: "/",
                    contents: [
                        {
                            tag: "img",
                            alt: "Logo Kuadrado",
                            src: `${images_url}logo_kuadrado.svg`,
                        },
                        {
                            tag: "img",
                            alt: "Kuadrado Software",
                            class: "logo-text",
                            src: `${images_url}logo_kuadrado_txt.svg`,
                        },
                    ],
                },
            ],
        };
    }

    renderMenu(menuItemsArray, isSubmenu = false) {
        return {
            tag: "ul",
            id: "nav-menu-list",
            class: isSubmenu ? "submenu" : "",
            contents: menuItemsArray.map(link => {
                const [href, text, submenu] = link;
                return {
                    tag: "li",
                    class: !isSubmenu && window.location.pathname === href ? "active" : "",
                    contents: [
                        {
                            tag: "a",
                            href,
                            contents: text,
                        },
                    ].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}],11:[function(require,module,exports){
"use strict";

const { in_construction } = require("../../config");
const { images_url } = require("../../constants");
const NavBar = require("./components/navbar");

class Template {
    constructor(props) {
        this.props = props;
    }
    render() {
        return {
            tag: "main",
            contents: [
                {
                    tag: "header",
                    contents: [new NavBar().render()],
                },
                in_construction && {
                    tag: "section",
                    class: "warning-banner",
                    contents: [
                        {
                            tag: "strong",
                            class: "page-contents-center",
                            contents: "Site en construction ...",
                        },
                    ],
                },
                {
                    tag: "section",
                    id: "page-container",
                    contents: [this.props.page.render()],
                },
                {
                    tag: "footer",
                    contents: [
                        {
                            tag: "div",
                            class: "logo",
                            contents: [
                                {
                                    tag: "img",
                                    alt: `logo Kuadrado`,
                                    src: `${images_url}logo_kuadrado.svg`,
                                },
                                {
                                    tag: "img",
                                    class: "text-logo",
                                    alt: "Kuadrado Software",
                                    src: `${images_url}logo_kuadrado_txt.svg`,
                                },
                            ],
                        },
                        {
                            tag: "span",
                            contents:
                                "<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
                        },
                        {
                            tag: "div",
                            contents: [
                                { tag: "strong", contents: "<blue>Nous contacter : </blue>" },
                                {
                                    tag: "a",
                                    href: "mailto:contact@kuadrado-software.fr",
                                    contents: "contact@kuadrado-software.fr",
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "social",
                            contents: [
                                {
                                    tag: "strong",
                                    contents: "<blue>Sur les réseaux : </blue>",
                                },
                                {
                                    tag: "a",
                                    href: "https://www.linkedin.com/company/kuadrado-software",
                                    target: "_blank",
                                    contents: "in",
                                    title: "Linkedin",
                                },
                                {
                                    tag: "a",
                                    href: "https://twitter.com/KuadradoSoft",
                                    target: "_blank",
                                    contents: "t",
                                    title: "Twitter",
                                    style_rules: { fontFamily: "serif" },
                                },
                            ],
                        },
                        {
                            tag: "span",
                            contents: `Copyright © ${new Date()
                                .getFullYear()} Kuadrado Software | 
                                Toutes les images du site ont été réalisées par nos soins et peuvent être réutilisées pour un usage personnel.`,
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = Template;

},{"../../config":1,"../../constants":2,"./components/navbar":10}]},{},[8]);