(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, build: { protected_dirs: ["assets", "style", "articles"], default_meta_keys: ["title", "description", "image", "open_graph", "json_ld"], }, }; },{}],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"; const objectHtmlRenderer = require("object-to-html-renderer") class ImageCarousel { constructor(props) { this.props = props; this.id = performance.now(); this.state = { showImageIndex: 0, }; this.RUN_INTERVAL = 5000; this.props.images.length > 1 && this.run(); } run() { this.runningInterval = setInterval(() => { let { showImageIndex } = this.state; const { images } = this.props; this.state.showImageIndex = showImageIndex < images.length - 1 ? ++showImageIndex : 0; this.refreshImage(); }, this.RUN_INTERVAL); } setImageIndex(i) { clearInterval(this.runningInterval); this.state.showImageIndex = i; this.refreshImage(); } refreshImage() { objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), { mode: "replace", }); } render() { const { showImageIndex } = this.state; const { images } = this.props; return { tag: "div", id: this.id, class: "image-carousel", contents: [ { tag: "img", property: "image", alt: `image carousel ${images[showImageIndex].replace(/\.[A-Za-z]+/, "")}`, src: images[showImageIndex], }, images.length > 1 && { tag: "div", class: "carousel-bullets", contents: images.map((_, i) => { const active = showImageIndex === i; return { tag: "span", class: `bullet ${active ? "active" : ""}`, onclick: this.setImageIndex.bind(this, i), }; }), }, ], }; } } module.exports = ImageCarousel; },{"object-to-html-renderer":3}],5:[function(require,module,exports){ "use strict"; const { fetchjson, fetchtext } = require("./fetch"); function getArticleBody(text) { return text.replaceAll("\n", "<br/>"); } function getArticleDate(date) { return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`; } function loadArticles(dir_url) { return new Promise((resolve, reject) => { fetchjson(`${dir_url}/index.json`) .then(json => { Promise.all( json.articles.map(async artDir => { const artPath = `${artDir}/${artDir}.json`; const art = await fetchjson(`${dir_url}/${artPath}`); const tmpSplit = artPath.split("/"); tmpSplit.pop(); const absArtPath = `${dir_url}/${tmpSplit.join("/")}`; return Object.assign(art, { path: absArtPath }); }) ) .then(articles => { populateArticles(articles) .then(completeArticles => resolve(completeArticles)) .catch(e => reject(e)); }) .catch(e => reject(e)); }) .catch(e => console.log(e)); }); } function populateArticles(articles) { return new Promise((resolve, reject) => { Promise.all( articles.map(async article => { if (article.body.indexOf("<file>") !== -1) { const txtPath = article.body.replace("<file>", ""); const textValue = await fetchtext(`${article.path}/${txtPath}`); article.body = textValue; article.date = article.date ? new Date(article.date) : undefined; } return article; }) ) .then(completeArticles => resolve(completeArticles.sort((a, b) => b.date - a.date))) .catch(e => reject(e)); }); } module.exports = { loadArticles, getArticleBody, getArticleDate, populateArticles, }; },{"./fetch":6}],6:[function(require,module,exports){ "use strict"; function fetchjson(url) { return new Promise((resolve, reject) => { fetch(url) .then(r => r.json()) .then(r => resolve(r)) .catch(e => reject(e)); }); } function fetchtext(url) { return new Promise((resolve, reject) => { fetch(url) .then(r => r.text()) .then(r => resolve(r)) .catch(e => reject(e)); }); } module.exports = { fetchjson, fetchtext, }; },{}],7:[function(require,module,exports){ "use strict"; class WebPage { constructor(args) { Object.assign(this, args); } } module.exports = WebPage; },{}],8:[function(require,module,exports){ "use strict"; const ImageCarousel = require("../../../generic-components/image-carousel"); const { getArticleBody } = require("../../../lib/article-utils"); class TeamMember { constructor(props) { this.props = props; } render() { const { title, subtitle, body, images, path } = this.props; return { tag: "div", class: "team-member", typeof: "Person", property: "author", contents: [ { tag: "div", class: "team-member-img", contents: [ { tag: "img", alt: `ìmage team member ${title}`, src: images.map(im => `${path}/images/${im}`)[0], property: "image", }, ], }, { tag: "h3", class: "team-member-title", contents: title, property: "name", }, { tag: "strong", class: "team-member-subtitle", contents: subtitle, property: "jobTitle", }, { tag: "p", class: "team-member-body", contents: getArticleBody(body), property: "description", }, ], }; } } class GameArticle { constructor(props) { this.props = props; } render() { const { title, tags, body, subtitle, images, path, team_subarticles, image_banner, } = this.props; return { tag: "article", typeof: "VideoGame", additionalType: "Article", class: "game-article", contents: [ { tag: "h2", property: "name", class: "game-title", contents: title, }, { tag: "div", class: "game-banner", contents: [ { tag: "img", class: "pixelated", src: `${path}/images/${image_banner}` }, ], }, { tag: "div", class: "game-tags", contents: tags.map(tag => { return { tag: "span", contents: tag, property: "about" }; }), }, { tag: "h3", class: "game-subtitle", contents: subtitle, property: "alternativeHeadline", }, { tag: "div", class: "game-description", property: "description", contents: getArticleBody(body), }, new ImageCarousel({ images: images.map(img => `${path}/images/${img}`) }).render(), { tag: "div", class: "game-team", contents: [ { tag: "h2", contents: "L'équipe", }, { tag: "div", class: "team-members", contents: team_subarticles.map(tsa => new TeamMember({ ...tsa }).render() ), }, ], }, ], }; } } module.exports = GameArticle; },{"../../../generic-components/image-carousel":4,"../../../lib/article-utils":5}],9:[function(require,module,exports){ "use strict"; const { articles_url } = require("../../../../constants"); const { loadArticles, populateArticles } = require("../../../lib/article-utils"); const objectHtmlRenderer = require("object-to-html-renderer") const GameArticle = require("./game-article"); class GameArticles { constructor(props) { this.props = props; this.state = { articles: [], }; this.id = performance.now(); this.loadArticles(); } loadArticles() { loadArticles(`${articles_url}games`) .then(articles => { Promise.all( articles.map(async a => { if (a.team_subarticles) { a.team_subarticles = await populateArticles( a.team_subarticles.map(sa => Object.assign(sa, { path: a.path })) ); } return a; }) ).then(completeArticles => { this.state.articles = completeArticles; this.refresh(); }); }) .catch(e => console.log(e)); } renderPlaceholder() { return { tag: "article", class: "placeholder", contents: [{ tag: "div" }, { tag: "div" }], }; } refresh() { objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), { mode: "replace", }); } render() { const { articles } = this.state; return { tag: "section", class: "game-articles page-contents-center", id: this.id, contents: articles.length > 0 ? articles.map(article => new GameArticle({ ...article }).render()) : [this.renderPlaceholder()], }; } } module.exports = GameArticles; },{"../../../../constants":2,"../../../lib/article-utils":5,"./game-article":8,"object-to-html-renderer":3}],10:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); const WebPage = require("../../lib/web-page"); const GameArticles = require("./components/game-articles"); class GamesPage extends WebPage { render() { return { tag: "div", id: "games-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 game controller", src: `${images_url}game_controller.svg`, }, ], }, { tag: "h1", contents: "Jeux" }, { tag: "p", contents: `Création de jeux vidéos indépendants. <br/>Jeux web, PC et projets en cours de développement`, }, ], }, ], }, new GameArticles().render(), ], }; } } module.exports = GamesPage; },{"../../../constants":2,"../../lib/web-page":7,"./components/game-articles":9}],11:[function(require,module,exports){ "use strict"; "use strict"; const runPage = require("../../run-page"); const GamesPage = require("./games"); runPage(GamesPage); },{"../../run-page":12,"./games":10}],12:[function(require,module,exports){ "use strict"; const objectHtmlRenderer = require("object-to-html-renderer") const Template = require("./template/template"); module.exports = function runPage(PageComponent) { const template = new Template({ page: new PageComponent() }); objectHtmlRenderer.setRenderCycleRoot(template); objectHtmlRenderer.renderCycle(); }; },{"./template/template":14,"object-to-html-renderer":3}],13:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); const NAV_MENU_ITEMS = [ { url: "/games/", text: "Jeux" }, { url: "/education/", text: "Pédagogie", // submenu: [ // { url: "/gamedev", text: "Création de jeux vidéo" }, // ] }, { url: "/software-development/", text: "Software" } ]; 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, parentUrl = "") { return { tag: "ul", id: "nav-menu-list", class: isSubmenu ? "submenu" : "", contents: menuItemsArray.map(item => { const { url, text, submenu } = item; const href = `${parentUrl}${url}`; return { tag: "li", class: !isSubmenu && window.location.pathname === href ? "active" : "", contents: [ { tag: "a", href, contents: text, }, ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []), }; }), }; } 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}],14:[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: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France", }, { tag: "div", contents: [ { tag: "strong", contents: "<blue>Contact : </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 mes soins et peuvent être réutilisées pour un usage personnel.`, }, ], }, ], }; } } module.exports = Template; },{"../../config":1,"../../constants":2,"./components/navbar":13}]},{},[11]);