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){
"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;
        }
    },
};

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

const GAMEDEV_ASPECTS = [
    {
        title: "Dessin et création 2D",
        image: "...",
        comment: "",
        details: [
            "Créer des décors et des personnages",
            "Dessiner sur ordinateur, faire du pixel art",
            "Créer des animations 2D",
        ],
    },
    {
        title: "Musique et effets sonores",
        image: "...",
        comment: "",
        details: [
            "Utiliser des logiciels de son et des synthétiseurs",
            "Composer une musique",
            "Faire une prise de son",
            "Mixer un enregistrement",
        ],
    },
    {
        title: "Développer un univers",
        image: "...",
        comment: "",
        details: [
            "Écrire une histoire, construire une narration",
            "Imaginer des mondes et des personnages",
        ],
    },
    {
        title: "Concevoir le jeu",
        image: "...",
        comment: "",
        details: [
            "Comprendres les différents éléments qui composent un jeu",
            "Développer les mécanismes de gameplay",
        ],
    },
    {
        title: "Programmation informatique",
        image: "...",
        comment: "",
        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 et physique",
        image: "...",
        comment:
            "<i>Le jeu vidéo et l'informatique en général, c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</i>",
        details: [
            "Algorithmie, logique, calcul, ensembles, géométrie, trigonométrie, algèbre linéaire ,vecteurs, repères en 2 dimensions ...",
        ],
    },
    {
        title: "Travail en équipe",
        image: "...",
        comment:
            "<i>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.</i>",
        details: [],
    },
    {
        title: "Logiciels libres, systèmes Linux",
        image: "...",
        comment:
            "<i>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 !</i>",
        details: [],
    },
];

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

    render() {
        return {
            tag: "div",
            contents: [
                { tag: "h1", contents: "Pédagogie" },
                { tag: "h2", contents: "Game studio club" },
                { tag: "h3", contents: "Apprendre à créer un jeu vidéo de A à Z" },
                {
                    tag: "strong",
                    contents: "Dans nos locaux, 32 rue Simon Vialet, 07240 Vernoux en Vivarais",
                },
                {
                    tag: "p",
                    contents:
                        "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
                },
                {
                    tag: "ul",
                    contents: GAMEDEV_ASPECTS.map(li => {
                        return {
                            tag: "li",
                            contents: [
                                { tag: "img", src: li.image },
                                { tag: "strong", contents: li.title },
                                { tag: "div", contents: li.comment },
                                {
                                    tag: "ul",
                                    contents: li.details.map(d => {
                                        return {
                                            tag: "li",
                                            contents: d,
                                        };
                                    }),
                                },
                            ],
                        };
                    }),
                },
                {
                    tag: "p",
                    contents:
                        "Une de ces choses vous intéresse mais pas spécialement le jeu vidéo ? <br>Pas de problème ! On peut se concentrer par exemple uniquement sur de la création 2D, ou de la création sonore, ou même uniquement des maths ! <br>L'orientation se fait en fonction des préférences de chacun.",
                },
                {
                    tag: "h3",
                    contents: "Groupes",
                },
                {
                    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: "h3",
                    contents: "Inscription, fonctionnement et tarifs",
                },
                {
                    tag: "p",
                    contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou plus.
                    <br>Les groupes sont de 5 personnes maximum.
                    <br>Le matériel informatique est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
                    `,
                },
                {
                    tag: "table",
                    contents: [
                        {
                            tag: "tr",
                            contents: [
                                { tag: "td", contents: "Abonnement 1 mois" },
                                { tag: "td", contents: "(4 séances)" },
                                { tag: "td", contents: "70€" },
                            ],
                        },
                        {
                            tag: "tr",
                            contents: [
                                { tag: "td", contents: "Abonnement 1 trimestre" },
                                { tag: "td", contents: "(12 séances)" },
                                { tag: "td", contents: "190€" },
                            ],
                        },
                    ],
                },
                { tag: "h2", contents: "Ateliers de vulgarisation" },
                {
                    tag: "div",
                    contents:
                        "Nous pouvons animer ponctuellement des ateliers d'une journée de vulgarisation autour de l'informatique sur les thèmes suivants :",
                },
                {
                    tag: "ul",
                    contents: [
                        {
                            tag: "li",
                            contents: [
                                {
                                    tag: "span",
                                    contents: "Qu'est-ce qui se passe dans mon ordinateur ?",
                                },
                                {
                                    tag: "ul",
                                    contents: [
                                        {
                                            tag: "li",
                                            contents:
                                                "Répondre à des questions simples sur l'informatique de tous les jours",
                                        },
                                        {
                                            tag: "li",
                                            contents: "L'organisation des fichiers",
                                        },
                                        {
                                            tag: "li",
                                            contents: "Le navigateur web",
                                        },
                                        {
                                            tag: "li",
                                            contents: "Les logiciels usuels",
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            tag: "li",
                            contents: [
                                {
                                    tag: "span",
                                    contents: "GNU/Linux, le monde du libre",
                                },
                                {
                                    tag: "ul",
                                    contents: [
                                        {
                                            tag: "li",
                                            contents:
                                                "Installer Linux, démystifier et faire tomber les barrières.",
                                        },
                                        {
                                            tag: "li",
                                            contents:
                                                "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            tag: "li",
                            contents:
                                "Comment fonctionne le réseau internet et ses services (Sites, applications, boites mail, clouds...",
                            contents: [
                                {
                                    tag: "span",
                                    contents: "Comment fonctionne le réseau internet ?",
                                },
                                {
                                    tag: "ul",
                                    contents: [
                                        {
                                            tag: "li",
                                            contents: "De quoi est fait le réseau internet ?",
                                        },
                                        {
                                            tag: "li",
                                            contents:
                                                "Comment fonctionnent les différents services que nous utilisons ? (Sites, applications, boites mail, etc...)",
                                        },
                                        {
                                            tag: "li",
                                            contents: "Qu'est-ce qu'un cloud ?",
                                        },
                                    ],
                                },
                            ],
                        },
                        {
                            tag: "li",
                            contents: [
                                {
                                    tag: "span",
                                    contents: "Qu'est-ce qu'on fait quand on programme ?",
                                },
                                {
                                    tag: "ul",
                                    contents: [
                                        {
                                            tag: "li",
                                            contents:
                                                "Démystifier l'idée de programmation informatique",
                                        },
                                        {
                                            tag: "li",
                                            contents: "Qu'est-ce qu'un langage de programmation",
                                        },
                                        {
                                            tag: "li",
                                            contents: "À quoi ça sert ?",
                                        },
                                        {
                                            tag: "li",
                                            contents: "Les métiers du développement informatique",
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
                {
                    tag: "div",
                    contents:
                        "Si vous êtes intéressé par un atelier pour votre structure, contactez-nous pour un devis gratuit.",
                },
                { tag: "h3", contents: "Contact" },
                { tag: "div", contents: "Pour toute question, n'hésitez pas à nous contacter" },
                {
                    tag: "ul",
                    contents: [
                        { tag: "li", contents: "04 75 78 08 72" },
                        {
                            tag: "li",
                            contents: [
                                {
                                    tag: "a",
                                    href: "mailto:kuadrado-software@tutanota.com",
                                    contents: "kuadrado-software@tutanota.com",
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = EducationPage;

},{}],3:[function(require,module,exports){
"use strict";

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

},{"../../run-page":4,"./education":2}],4:[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":1,"./template/template":5}],5:[function(require,module,exports){
"use strict";

class Template {
    constructor(props) {
        this.props = props;
    }

    render() {
        return {
            tag: "main",
            contents: [
                {
                    tag: "header",
                    contents: [
                        {
                            tag: "ul",
                            contents: [
                                {
                                    tag: "li",
                                    contents: [
                                        {
                                            tag: "a",
                                            href: "/public/",
                                            contents: "Home",
                                        },
                                    ],
                                },
                                {
                                    tag: "li",
                                    contents: [
                                        {
                                            tag: "a",
                                            href: "/public/games/",
                                            contents: "Jeux",
                                        },
                                    ],
                                },
                                {
                                    tag: "li",
                                    contents: [
                                        {
                                            tag: "a",
                                            href: "/public/software-development/",
                                            contents: "Software development",
                                        },
                                    ],
                                },
                                {
                                    tag: "li",
                                    contents: [
                                        {
                                            tag: "a",
                                            href: "/public/education/",
                                            contents: "Pédagogie",
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
                {
                    tag: "div",
                    id: "page-container",
                    contents: [this.props.page.render()],
                },
                {
                    tag: "footer",
                    contents: [
                        {
                            tag: "a",
                            href: "mailto:kuadrado-software@tutanota.com",
                            contents: "kuadrado-software@tutanota.com",
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = Template;

},{}]},{},[3]);