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
Commit 38630ab2 authored by peter_rabbit's avatar peter_rabbit
Browse files

feat:page games

parent bbfa4d23
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 731 additions and 171 deletions
build.js
+ 1
− 1
View file @ 38630ab2
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"use strict"; "use strict";
const build_conf = { const build_conf = {
protected_dirs: ["assets", "style", "articles"], protected_dirs: ["assets", "style", "news-articles", "game-articles", "software-articles"],
}; };
const fs = require("fs"); const fs = require("fs");
......
config.js
+ 1
− 1
View file @ 38630ab2
...@@ -10,4 +10,4 @@ switch (ENV) { ...@@ -10,4 +10,4 @@ switch (ENV) {
server_url = "http://kuadrado-software.fr"; server_url = "http://kuadrado-software.fr";
} }
module.exports = { server_url }; module.exports = { server_url, in_construction: true };
constants.js
+ 3
− 1
View file @ 38630ab2
...@@ -2,5 +2,7 @@ const { server_url } = require("./config"); ...@@ -2,5 +2,7 @@ const { server_url } = require("./config");
module.exports = { module.exports = {
images_url: `${server_url}/assets/images`, images_url: `${server_url}/assets/images`,
articles_url: `${server_url}/articles`, news_articles_url: `${server_url}/news-articles`,
game_articles_url: `${server_url}/game-articles`,
software_articles_url: `${server_url}/software-articles`,
}; };
nginx.conf
+ 7
− 3
View file @ 38630ab2
...@@ -28,8 +28,12 @@ http { ...@@ -28,8 +28,12 @@ http {
include /etc/nginx/conf.d/*.conf; include /etc/nginx/conf.d/*.conf;
# server { server {
# add_header 'Access-Control-Allow-Origin' '*'; server_name kuadrado-software.fr www.kuadrado-software.fr;
# } location / {
add_header Access-Control-Allow-Origin *;
}
}
} }
public/assets/images/wallpaper_warning.svg 0 → 100644
+ 74
− 0
View file @ 38630ab2
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="79.375mm"
height="79.375mm"
viewBox="0 0 79.375 79.375"
version="1.1"
id="svg8"
inkscape:version="1.0.1 (0767f8302a, 2020-10-17)"
sodipodi:docname="wallpaper_warning.svg">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8284271"
inkscape:cx="166.22215"
inkscape:cy="210.50122"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:document-rotation="0"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="966"
inkscape:window-x="1920"
inkscape:window-y="27"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Calque 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-68.684253,-89.92156)">
<g
id="g847"
transform="translate(22.712161,-53.33137)">
<path
style="fill:#fece00;stroke-width:0.264583"
d="m 125.34553,143.25255 c 3.9e-4,-2e-5 0.002,39.63184 0.002,39.63184 l -39.636437,39.74407 -39.737207,-0.0117 c 26.12056,-26.62352 52.901255,-52.96121 79.371964,-79.36422 z m -79.373459,3.8e-4 39.742018,0 c 0,0 -39.533678,39.4967 -39.743925,39.4967 z"
id="path851"
sodipodi:nodetypes="cccccccccc" />
<path
style="fill:#d79400;stroke-width:0.264583"
d="m 45.970159,182.74963 39.743932,-39.4967 39.631439,-3.8e-4 c 0,0 -52.907028,53.09226 -79.371964,79.36422 z m 39.740934,39.87883 39.636437,-39.74407 -3.9e-4,39.74354 z"
id="path849"
sodipodi:nodetypes="ccccccccc" />
</g>
</g>
</svg>
public/education/education.js
+ 22
− 7
View file @ 38630ab2
...@@ -11,14 +11,16 @@ switch (ENV) { ...@@ -11,14 +11,16 @@ switch (ENV) {
server_url = "http://kuadrado-software.fr"; server_url = "http://kuadrado-software.fr";
} }
module.exports = { server_url }; module.exports = { server_url, in_construction: true };
},{}],2:[function(require,module,exports){ },{}],2:[function(require,module,exports){
const { server_url } = require("./config"); const { server_url } = require("./config");
module.exports = { module.exports = {
images_url: `${server_url}/assets/images`, images_url: `${server_url}/assets/images`,
articles_url: `${server_url}/articles`, 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){ },{"./config":1}],3:[function(require,module,exports){
...@@ -828,6 +830,7 @@ module.exports = NavBar; ...@@ -828,6 +830,7 @@ module.exports = NavBar;
},{"../../../constants":2}],10:[function(require,module,exports){ },{"../../../constants":2}],10:[function(require,module,exports){
"use strict"; "use strict";
const { in_construction } = require("../../config");
const { images_url } = require("../../constants"); const { images_url } = require("../../constants");
const NavBar = require("./components/navbar"); const NavBar = require("./components/navbar");
...@@ -843,8 +846,19 @@ class Template { ...@@ -843,8 +846,19 @@ class Template {
tag: "header", tag: "header",
contents: [new NavBar().render()], contents: [new NavBar().render()],
}, },
in_construction && {
tag: "section",
class: "warning-banner",
contents: [
{
tag: "strong",
class: "page-contents-center",
contents: "Site en construction ...",
},
],
},
{ {
tag: "div", tag: "section",
id: "page-container", id: "page-container",
contents: [this.props.page.render()], contents: [this.props.page.render()],
}, },
...@@ -861,14 +875,15 @@ class Template { ...@@ -861,14 +875,15 @@ class Template {
}, },
{ {
tag: "img", tag: "img",
class:"text-logo", class: "text-logo",
src: `${images_url}/logo_kuadrado_txt.svg`, src: `${images_url}/logo_kuadrado_txt.svg`,
}, },
], ],
}, },
{ {
tag:"span", 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." contents:
"Toutes les images du site ont été réalisées par nos soins et peuvent être réutilisées pour un usage personnel.",
}, },
{ {
tag: "a", tag: "a",
...@@ -884,4 +899,4 @@ class Template { ...@@ -884,4 +899,4 @@ class Template {
module.exports = Template; module.exports = Template;
},{"../../constants":2,"./components/navbar":9}]},{},[7]); },{"../../config":1,"../../constants":2,"./components/navbar":9}]},{},[7]);
public/game-articles/fantom_quest/fantom_quest.json 0 → 100644
+ 27
− 0
View file @ 38630ab2
{
"title": "Fantom Quest",
"subtitle": "Le labyrinthe de la quête d'identité",
"tags": ["jeu web", "pixelart", "javascript", "labyrinthe"],
"body": "<file>fantom_quest.txt",
"images": [
"screen_fantom_quest_1.jpg",
"screen_fantom_quest_2.jpg",
"screen_fantom_quest_3.jpg",
"screen_fantom_quest_4.jpg",
"screen_fantom_quest_5.jpg"
],
"team_subarticles": [
{
"title": "Lucie Ventadour",
"subtitle": "Artiste 2D, illustratice, artiste peintre",
"body": "<file>lucie_ventadour.txt",
"images": ["lucipix.png"]
},
{
"title": "Pierre Jarriges",
"subtitle": "Auteur BD, dessinateur, compositeur, développeur.",
"body": "<file>pijar.txt",
"images": ["pijarpix.png"]
}
]
}
public/game-articles/fantom_quest/fantom_quest.txt 0 → 100644
+ 9
− 0
View file @ 38630ab2
Un petit fantôme en quête d'identité va devoir gravir chaque étage d'un donjon afin de rencontrer la sorcière qui lui révélera sa vraie nature.
Ce petit jeu de quête minimaliste en forme de labyrinthe sera jouable directement sur navigateur ou à télécharger sur pc.
Sortie prévue : Mars 2021 (si on y arrive !)
Concept original et graphismes : Lucie Ventadour ( http://lucipix.canalblog.com/||site_web ).
Programmation Javascript et bande son: Pierre Jarriges
https://lab.frogg.it/peter_rabbit/fantom-quest||Dépôt_du_code_source
public/game-articles/fantom_quest/images/lucipix.png 0 → 100644
+ 0
− 0
View file @ 38630ab2
public/game-articles/fantom_quest/images/lucipix.png

550 B

public/game-articles/fantom_quest/images/pijarpix.png 0 → 100644
+ 0
− 0
View file @ 38630ab2
public/game-articles/fantom_quest/images/pijarpix.png

549 B

public/game-articles/fantom_quest/images/screen_fantom_quest_1.jpg 0 → 100644
+ 0
− 0
View file @ 38630ab2
public/game-articles/fantom_quest/images/screen_fantom_quest_1.jpg

59.1 KiB

public/game-articles/fantom_quest/images/screen_fantom_quest_2.jpg 0 → 100644
+ 0
− 0
View file @ 38630ab2
public/game-articles/fantom_quest/images/screen_fantom_quest_2.jpg

54.1 KiB

public/game-articles/fantom_quest/images/screen_fantom_quest_3.jpg 0 → 100644
+ 0
− 0
View file @ 38630ab2
public/game-articles/fantom_quest/images/screen_fantom_quest_3.jpg

55 KiB

public/game-articles/fantom_quest/images/screen_fantom_quest_4.jpg 0 → 100644
+ 0
− 0
View file @ 38630ab2
public/game-articles/fantom_quest/images/screen_fantom_quest_4.jpg

47.6 KiB

public/game-articles/fantom_quest/images/screen_fantom_quest_5.jpg 0 → 100644
+ 0
− 0
View file @ 38630ab2
public/game-articles/fantom_quest/images/screen_fantom_quest_5.jpg

31.8 KiB

public/game-articles/fantom_quest/lucie_ventadour.txt 0 → 100644
+ 2
− 0
View file @ 38630ab2
Salut moi c'est lucette, je suis une geek et je vois la vie en pixels >< et ouais.
https://www.lucieventadour.com/||Mon_site | http://lucipix.canalblog.com/||Mon_blog_pix
\ No newline at end of file
public/game-articles/fantom_quest/pijar.txt 0 → 100644
+ 4
− 0
View file @ 38630ab2
Salut moi c'est pijar. Je fais des trucs.
J'aime bien le code.
Et je fais du dessin et tout.
\ No newline at end of file
public/game-articles/index.json 0 → 100644
+ 1
− 0
View file @ 38630ab2
["fantom_quest/fantom_quest.json"]
public/games/games.js
+ 369
− 13
View file @ 38630ab2
...@@ -11,19 +11,184 @@ switch (ENV) { ...@@ -11,19 +11,184 @@ switch (ENV) {
server_url = "http://kuadrado-software.fr"; server_url = "http://kuadrado-software.fr";
} }
module.exports = { server_url }; module.exports = { server_url, in_construction: true };
},{}],2:[function(require,module,exports){ },{}],2:[function(require,module,exports){
const { server_url } = require("./config"); const { server_url } = require("./config");
module.exports = { module.exports = {
images_url: `${server_url}/assets/images`, images_url: `${server_url}/assets/images`,
articles_url: `${server_url}/articles`, 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){ },{"./config":1}],3:[function(require,module,exports){
"use strict"; "use strict";
const objectHtmlRenderer = require("../lib/object-html-renderer");
class ImageCarousel {
constructor(props) {
this.props = props;
this.id = performance.now();
this.state = {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
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", 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;
},{"../lib/object-html-renderer":6}],4:[function(require,module,exports){
"use strict";
const { fetchjson, fetchtext } = require("./fetch");
function getArticleBody(text) {
return text
.split(" ")
.map(word => {
if (word.includes("http://") || word.includes("https://")) {
const splitword = word.split("||");
const href = splitword[0].match(/http.+/);
const text = splitword.length > 1 ? splitword[1].replaceAll("_", " ") : href;
return word.replace(/http.*/, `<a href=${href} target="_blank">${text}</a>`);
} else return word;
})
.join(" ")
.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.map(async articlePath => {
const art = await fetchjson(`${dir_url}/${articlePath}`);
const tmpSplit = articlePath.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) => a.date - b.date)))
.catch(e => reject(e));
});
}
module.exports = {
loadArticles,
getArticleBody,
getArticleDate,
populateArticles,
};
},{"./fetch":5}],5:[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
}
},{}],6:[function(require,module,exports){
"use strict";
module.exports = { module.exports = {
setRenderCycleRoot(renderCycleRoot) { setRenderCycleRoot(renderCycleRoot) {
this.renderCycleRoot = renderCycleRoot; this.renderCycleRoot = renderCycleRoot;
...@@ -107,9 +272,179 @@ module.exports = { ...@@ -107,9 +272,179 @@ module.exports = {
}, },
}; };
},{}],4:[function(require,module,exports){ },{}],7:[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",
contents: [
{
tag: "div",
class: "team-member-img",
contents: [{ tag: "img", src: images.map(im => `${path}/images/${im}`)[0] }],
},
{
tag: "h3",
class: "team-member-title",
contents: title,
},
{
tag: "strong",
class: "team-member-subtitle",
contents: subtitle,
},
{
tag: "p",
class: "team-member-body",
contents: getArticleBody(body),
},
],
};
}
}
class GameArticle {
constructor(props) {
this.props = props;
}
render() {
const { title, tags, body, subtitle, images, path, team_subarticles } = this.props;
return {
tag: "article",
class: "game-article",
contents: [
{
tag: "h2",
class: "game-title",
contents: title,
},
{
tag: "div",
class: "game-tags",
contents: tags.map(tag => {
return { tag: "span", contents: tag };
}),
},
{
tag: "h3",
class: "game-subtitle",
contents: subtitle,
},
{
tag: "div",
class: "game-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":3,"../../../lib/article-utils":4}],8:[function(require,module,exports){
"use strict";
const { game_articles_url } = require("../../../../constants");
const { loadArticles, populateArticles } = require("../../../lib/article-utils");
const objectHtmlRenderer = require("../../../lib/object-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(game_articles_url)
.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":4,"../../../lib/object-html-renderer":6,"./game-article":7}],9:[function(require,module,exports){
"use strict"; "use strict";
const GameArticles = require("./components/game-articles");
class GamesPage { class GamesPage {
constructor(args) { constructor(args) {
Object.assign(this, args); Object.assign(this, args);
...@@ -118,14 +453,22 @@ class GamesPage { ...@@ -118,14 +453,22 @@ class GamesPage {
render() { render() {
return { return {
tag: "div", tag: "div",
id:"games-page",
contents: [ contents: [
{ {
tag: "div", tag: "div",
class: "page-header", class: "page-header",
contents: [ contents: [
{ tag: "h1", contents: "Jeux", class: "page-contents-center" } { tag: "h1", contents: "Jeux", class: "page-contents-center" },
{
tag: "p",
class: "page-contents-center",
contents: `Créer des jeux vidéos c'est cœur de ce qui nous passionne.
<br/>Retrouvez ici nos créations, à jouer en ligne ou à télécharger, et découvrez nos projets en cours.`,
},
], ],
}, },
new GameArticles().render(),
], ],
}; };
} }
...@@ -133,7 +476,7 @@ class GamesPage { ...@@ -133,7 +476,7 @@ class GamesPage {
module.exports = GamesPage; module.exports = GamesPage;
},{}],5:[function(require,module,exports){ },{"./components/game-articles":8}],10:[function(require,module,exports){
"use strict"; "use strict";
"use strict"; "use strict";
...@@ -141,7 +484,7 @@ const runPage = require("../../run-page"); ...@@ -141,7 +484,7 @@ const runPage = require("../../run-page");
const GamesPage = require("./games"); const GamesPage = require("./games");
runPage(GamesPage); runPage(GamesPage);
},{"../../run-page":6,"./games":4}],6:[function(require,module,exports){ },{"../../run-page":11,"./games":9}],11:[function(require,module,exports){
"use strict"; "use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer"); const objectHtmlRenderer = require("./lib/object-html-renderer");
...@@ -153,7 +496,7 @@ module.exports = function runPage(PageComponent) { ...@@ -153,7 +496,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle(); objectHtmlRenderer.renderCycle();
}; };
},{"./lib/object-html-renderer":3,"./template/template":8}],7:[function(require,module,exports){ },{"./lib/object-html-renderer":6,"./template/template":13}],12:[function(require,module,exports){
"use strict"; "use strict";
const { images_url } = require("../../../constants"); const { images_url } = require("../../../constants");
...@@ -259,9 +602,10 @@ class NavBar { ...@@ -259,9 +602,10 @@ class NavBar {
module.exports = NavBar; module.exports = NavBar;
},{"../../../constants":2}],8:[function(require,module,exports){ },{"../../../constants":2}],13:[function(require,module,exports){
"use strict"; "use strict";
const { in_construction } = require("../../config");
const { images_url } = require("../../constants"); const { images_url } = require("../../constants");
const NavBar = require("./components/navbar"); const NavBar = require("./components/navbar");
...@@ -277,8 +621,19 @@ class Template { ...@@ -277,8 +621,19 @@ class Template {
tag: "header", tag: "header",
contents: [new NavBar().render()], contents: [new NavBar().render()],
}, },
in_construction && {
tag: "section",
class: "warning-banner",
contents: [
{
tag: "strong",
class: "page-contents-center",
contents: "Site en construction ...",
},
],
},
{ {
tag: "div", tag: "section",
id: "page-container", id: "page-container",
contents: [this.props.page.render()], contents: [this.props.page.render()],
}, },
...@@ -295,14 +650,15 @@ class Template { ...@@ -295,14 +650,15 @@ class Template {
}, },
{ {
tag: "img", tag: "img",
class:"text-logo", class: "text-logo",
src: `${images_url}/logo_kuadrado_txt.svg`, src: `${images_url}/logo_kuadrado_txt.svg`,
}, },
], ],
}, },
{ {
tag:"span", 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." contents:
"Toutes les images du site ont été réalisées par nos soins et peuvent être réutilisées pour un usage personnel.",
}, },
{ {
tag: "a", tag: "a",
...@@ -318,4 +674,4 @@ class Template { ...@@ -318,4 +674,4 @@ class Template {
module.exports = Template; module.exports = Template;
},{"../../constants":2,"./components/navbar":7}]},{},[5]); },{"../../config":1,"../../constants":2,"./components/navbar":12}]},{},[10]);
public/main.js
+ 211
− 145
View file @ 38630ab2
...@@ -11,25 +11,92 @@ switch (ENV) { ...@@ -11,25 +11,92 @@ switch (ENV) {
server_url = "http://kuadrado-software.fr"; server_url = "http://kuadrado-software.fr";
} }
module.exports = { server_url }; module.exports = { server_url, in_construction: true };
},{}],2:[function(require,module,exports){ },{}],2:[function(require,module,exports){
const { server_url } = require("./config"); const { server_url } = require("./config");
module.exports = { module.exports = {
images_url: `${server_url}/assets/images`, images_url: `${server_url}/assets/images`,
articles_url: `${server_url}/articles`, 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){ },{"./config":1}],3:[function(require,module,exports){
"use strict"; "use strict";
const { articles_url } = require("../../constants");
const { fetchjson, fetchtext } = require("../lib/fetch");
const objectHtmlRenderer = require("../lib/object-html-renderer"); const objectHtmlRenderer = require("../lib/object-html-renderer");
const ImageCarousel = require("./image-carousel");
class Articles { class ImageCarousel {
constructor(props) {
this.props = props;
this.id = performance.now();
this.state = {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
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", 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;
},{"../lib/object-html-renderer":9}],4:[function(require,module,exports){
"use strict";
const { news_articles_url } = require("../../constants");
const objectHtmlRenderer = require("../lib/object-html-renderer");
const ImageCarousel = require("../generic-components/image-carousel");
const { loadArticles, getArticleDate, getArticleBody } = require("../lib/article-utils");
class NewsArticles {
constructor() { constructor() {
this.id = performance.now().toString(); this.id = performance.now().toString();
this.state = { this.state = {
...@@ -41,35 +108,11 @@ class Articles { ...@@ -41,35 +108,11 @@ class Articles {
} }
loadArticles() { loadArticles() {
fetchjson(`${articles_url}/index.json`) loadArticles(news_articles_url).then(articles => {
.then(json => { this.state.articles = articles;
Promise.all( this.state.showArticleIndex = this.state.articles.length - 1;
json.map(async articlePath => { this.refresh();
const art = await fetchjson(`${articles_url}/${articlePath}`); });
const tmpSplit = articlePath.split("/");
tmpSplit.pop();
const absArtPath = `${articles_url}/${tmpSplit.join("/")}`;
return Object.assign(art, { path: absArtPath });
})
)
.then(articles => this.setArticles(articles))
.catch(e => console.log(e));
})
.catch(e => console.log(e));
}
async setArticles(articles) {
for (const article of articles) {
if (article.content_text.indexOf("<file>") !== -1) {
const txtPath = article.content_text.replace("<file>", "");
const txtValue = await fetchtext(`${article.path}/${txtPath}`);
article.content_text = txtValue;
}
article.date = new Date(article.date);
}
this.state.articles = articles.sort((a, b) => a.date - b.date);
this.state.showArticleIndex = this.state.articles.length - 1;
this.refresh();
} }
refresh() { refresh() {
...@@ -78,25 +121,6 @@ class Articles { ...@@ -78,25 +121,6 @@ class Articles {
}); });
} }
getArticleDate(date) {
return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
}
getArticleBody(text) {
return text
.split(" ")
.map(word => {
if (word.includes("http://") || word.includes("https://")) {
const splitword = word.split("||");
const href = splitword[0];
const text = splitword.length > 1 ? splitword[1] : href;
return `<a href=${href} target="_blank">${text}</a>`;
} else return word;
})
.join(" ")
.replaceAll("\n", "<br/>");
}
renderArticle(articleData) { renderArticle(articleData) {
return { return {
tag: "article", tag: "article",
...@@ -104,7 +128,7 @@ class Articles { ...@@ -104,7 +128,7 @@ class Articles {
{ {
tag: "div", tag: "div",
class: "date", class: "date",
contents: [{ tag: "span", contents: this.getArticleDate(articleData.date) }], contents: [{ tag: "span", contents: getArticleDate(articleData.date) }],
}, },
{ {
tag: "div", tag: "div",
...@@ -132,7 +156,7 @@ class Articles { ...@@ -132,7 +156,7 @@ class Articles {
contents: [ contents: [
{ {
tag: "p", tag: "p",
contents: this.getArticleBody(articleData.content_text), contents: getArticleBody(articleData.body),
}, },
], ],
}, },
...@@ -182,91 +206,34 @@ class Articles { ...@@ -182,91 +206,34 @@ class Articles {
contents: contents:
articles.length > 0 articles.length > 0
? [ ? [
{
tag: "button",
class: `prev-btn ${!showPrev ? "disabled" : "active"}`,
onclick: this.handleChangeArticle.bind(this, "prev"),
},
this.renderArticle(articles[showArticleIndex]), this.renderArticle(articles[showArticleIndex]),
{ {
tag: "button", tag: "div",
class: `next-btn ${!showNext ? "disabled" : "active"}`, class: "prev-next-buttons",
onclick: this.handleChangeArticle.bind(this, "next"), contents: [
{
tag: "button",
class: `prev-btn ${!showPrev ? "disabled" : "active"}`,
contents: "Précédent",
onclick: this.handleChangeArticle.bind(this, "prev"),
},
{
tag: "button",
class: `next-btn ${!showNext ? "disabled" : "active"}`,
contents: "Suivant",
onclick: this.handleChangeArticle.bind(this, "next"),
},
],
}, },
] ]
: [{tag:"div"},this.renderArticlePlaceholder(), {tag:"div"}], : [this.renderArticlePlaceholder()],
}; };
} }
} }
module.exports = Articles; module.exports = NewsArticles;
},{"../../constants":2,"../lib/fetch":7,"../lib/object-html-renderer":8,"./image-carousel":4}],4:[function(require,module,exports){ },{"../../constants":2,"../generic-components/image-carousel":3,"../lib/article-utils":7,"../lib/object-html-renderer":9}],5:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("../lib/object-html-renderer");
class ImageCarousel {
constructor(props) {
this.props = props;
this.id = performance.now();
this.state = {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
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", src: images[showImageIndex] },
{
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;
},{"../lib/object-html-renderer":8}],5:[function(require,module,exports){
"use strict"; "use strict";
const { images_url } = require("../../constants"); const { images_url } = require("../../constants");
...@@ -307,7 +274,8 @@ module.exports = ThemeCard; ...@@ -307,7 +274,8 @@ module.exports = ThemeCard;
},{"../../constants":2}],6:[function(require,module,exports){ },{"../../constants":2}],6:[function(require,module,exports){
"use strict"; "use strict";
const Articles = require("./home-page-components/articles"); const { images_url } = require("../constants");
const NewsArticles = require("./home-page-components/news-articles");
const ThemeCard = require("./home-page-components/theme-card"); const ThemeCard = require("./home-page-components/theme-card");
class HomePage { class HomePage {
...@@ -324,6 +292,18 @@ class HomePage { ...@@ -324,6 +292,18 @@ class HomePage {
tag: "div", tag: "div",
class: "page-header", class: "page-header",
contents: [ contents: [
{
tag: "div",
class: "big-logo page-contents-center",
contents: [
{ tag: "img", src: `${images_url}/logo_kuadrado.svg` },
{
tag: "img",
class: "logo-text",
src: `${images_url}/logo_kuadrado_txt.svg`,
},
],
},
{ tag: "h1", contents: "Kuadrado Software", class: "page-contents-center" }, { tag: "h1", contents: "Kuadrado Software", class: "page-contents-center" },
{ {
tag: "p", tag: "p",
...@@ -340,7 +320,7 @@ class HomePage { ...@@ -340,7 +320,7 @@ class HomePage {
class: "page-contents-center", class: "page-contents-center",
contents: [ contents: [
{ tag: "h2", contents: "Actu", class: "section-title bg-blue" }, { tag: "h2", contents: "Actu", class: "section-title bg-blue" },
new Articles().render(), new NewsArticles().render(),
], ],
}, },
{ {
...@@ -377,7 +357,80 @@ class HomePage { ...@@ -377,7 +357,80 @@ class HomePage {
module.exports = HomePage; module.exports = HomePage;
},{"./home-page-components/articles":3,"./home-page-components/theme-card":5}],7:[function(require,module,exports){ },{"../constants":2,"./home-page-components/news-articles":4,"./home-page-components/theme-card":5}],7:[function(require,module,exports){
"use strict";
const { fetchjson, fetchtext } = require("./fetch");
function getArticleBody(text) {
return text
.split(" ")
.map(word => {
if (word.includes("http://") || word.includes("https://")) {
const splitword = word.split("||");
const href = splitword[0].match(/http.+/);
const text = splitword.length > 1 ? splitword[1].replaceAll("_", " ") : href;
return word.replace(/http.*/, `<a href=${href} target="_blank">${text}</a>`);
} else return word;
})
.join(" ")
.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.map(async articlePath => {
const art = await fetchjson(`${dir_url}/${articlePath}`);
const tmpSplit = articlePath.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) => a.date - b.date)))
.catch(e => reject(e));
});
}
module.exports = {
loadArticles,
getArticleBody,
getArticleDate,
populateArticles,
};
},{"./fetch":8}],8:[function(require,module,exports){
"use strict"; "use strict";
function fetchjson(url) { function fetchjson(url) {
...@@ -402,7 +455,7 @@ module.exports = { ...@@ -402,7 +455,7 @@ module.exports = {
fetchjson, fetchtext fetchjson, fetchtext
} }
},{}],8:[function(require,module,exports){ },{}],9:[function(require,module,exports){
"use strict"; "use strict";
module.exports = { module.exports = {
...@@ -488,7 +541,7 @@ module.exports = { ...@@ -488,7 +541,7 @@ module.exports = {
}, },
}; };
},{}],9:[function(require,module,exports){ },{}],10:[function(require,module,exports){
"use strict"; "use strict";
const HomePage = require("./homepage"); const HomePage = require("./homepage");
...@@ -496,7 +549,7 @@ const runPage = require("./run-page"); ...@@ -496,7 +549,7 @@ const runPage = require("./run-page");
runPage(HomePage); runPage(HomePage);
},{"./homepage":6,"./run-page":10}],10:[function(require,module,exports){ },{"./homepage":6,"./run-page":11}],11:[function(require,module,exports){
"use strict"; "use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer"); const objectHtmlRenderer = require("./lib/object-html-renderer");
...@@ -508,7 +561,7 @@ module.exports = function runPage(PageComponent) { ...@@ -508,7 +561,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle(); objectHtmlRenderer.renderCycle();
}; };
},{"./lib/object-html-renderer":8,"./template/template":12}],11:[function(require,module,exports){ },{"./lib/object-html-renderer":9,"./template/template":13}],12:[function(require,module,exports){
"use strict"; "use strict";
const { images_url } = require("../../../constants"); const { images_url } = require("../../../constants");
...@@ -614,9 +667,10 @@ class NavBar { ...@@ -614,9 +667,10 @@ class NavBar {
module.exports = NavBar; module.exports = NavBar;
},{"../../../constants":2}],12:[function(require,module,exports){ },{"../../../constants":2}],13:[function(require,module,exports){
"use strict"; "use strict";
const { in_construction } = require("../../config");
const { images_url } = require("../../constants"); const { images_url } = require("../../constants");
const NavBar = require("./components/navbar"); const NavBar = require("./components/navbar");
...@@ -632,8 +686,19 @@ class Template { ...@@ -632,8 +686,19 @@ class Template {
tag: "header", tag: "header",
contents: [new NavBar().render()], contents: [new NavBar().render()],
}, },
in_construction && {
tag: "section",
class: "warning-banner",
contents: [
{
tag: "strong",
class: "page-contents-center",
contents: "Site en construction ...",
},
],
},
{ {
tag: "div", tag: "section",
id: "page-container", id: "page-container",
contents: [this.props.page.render()], contents: [this.props.page.render()],
}, },
...@@ -650,14 +715,15 @@ class Template { ...@@ -650,14 +715,15 @@ class Template {
}, },
{ {
tag: "img", tag: "img",
class:"text-logo", class: "text-logo",
src: `${images_url}/logo_kuadrado_txt.svg`, src: `${images_url}/logo_kuadrado_txt.svg`,
}, },
], ],
}, },
{ {
tag:"span", 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." contents:
"Toutes les images du site ont été réalisées par nos soins et peuvent être réutilisées pour un usage personnel.",
}, },
{ {
tag: "a", tag: "a",
...@@ -673,4 +739,4 @@ class Template { ...@@ -673,4 +739,4 @@ class Template {
module.exports = Template; module.exports = Template;
},{"../../constants":2,"./components/navbar":11}]},{},[9]); },{"../../config":1,"../../constants":2,"./components/navbar":12}]},{},[10]);
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service