From 5010b2f78a2edf78b21dd2676a293e29c87e5888 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Melaine=20G=C3=A9rard?= Date: Fri, 4 Oct 2024 16:03:37 +0200 Subject: [PATCH] =?UTF-8?q?:sparkles:=20Ajout=20du=20calendrier=20des=20?= =?UTF-8?q?=C3=A9v=C3=A8nements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 4 ++ p/camelianimes/calendar.css | 67 ++++++++++++++++++++ p/camelianimes/images/calendar.svg | 1 + p/camelianimes/pages/calendrier.html | 5 +- p/camelianimes/scripts/calendar.js | 94 ++++++++++++++++++++++++++++ 5 files changed, 169 insertions(+), 2 deletions(-) create mode 100644 .gitignore create mode 100644 p/camelianimes/calendar.css create mode 100644 p/camelianimes/images/calendar.svg create mode 100644 p/camelianimes/scripts/calendar.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..126439a --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.idea/ +.vscode/ +.fleet/ +*.iml \ No newline at end of file diff --git a/p/camelianimes/calendar.css b/p/camelianimes/calendar.css new file mode 100644 index 0000000..ec8039a --- /dev/null +++ b/p/camelianimes/calendar.css @@ -0,0 +1,67 @@ +.cards { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.card { + background: #3f4248; + border-radius: 1rem; + padding: 1rem; + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); +} + +.grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1rem; +} + +.column { + display: flex; + flex-direction: column; + gap: .5rem; + justify-content: space-between; +} + +.image { + width: 100%; + height: 100%; + border-radius: 1rem; +} + +.icon { + width: 1rem; + height: 1rem; + color: white; +} + +.flex { + display: flex; + align-items: center; + gap: .25rem; + flex-wrap: wrap; +} + +.anime-name { + font-size: 1.25rem; + font-weight: bold; +} + +.discordButton { + background: #5b5d67; + color: white; + padding: .5rem 1rem; + border-radius: .5rem; + text-decoration: none; + transition: background .2s; +} + +.discordButton:hover { + background: #636570; + text-decoration: none; +} + +.d-flex { + display: flex; +} \ No newline at end of file diff --git a/p/camelianimes/images/calendar.svg b/p/camelianimes/images/calendar.svg new file mode 100644 index 0000000..3171cf0 --- /dev/null +++ b/p/camelianimes/images/calendar.svg @@ -0,0 +1 @@ + diff --git a/p/camelianimes/pages/calendrier.html b/p/camelianimes/pages/calendrier.html index fbf35dc..47fa79f 100644 --- a/p/camelianimes/pages/calendrier.html +++ b/p/camelianimes/pages/calendrier.html @@ -10,6 +10,7 @@ + @@ -25,8 +26,8 @@

Calendrier

-

Prochainement

+
- + diff --git a/p/camelianimes/scripts/calendar.js b/p/camelianimes/scripts/calendar.js new file mode 100644 index 0000000..5e5e2db --- /dev/null +++ b/p/camelianimes/scripts/calendar.js @@ -0,0 +1,94 @@ +const CAMELIANIME_CHANNEL_ID = "865314473668771850"; +const DISCORD_BASE_INVITE = "https://discord.gg/nBuZ9vJ"; + + +function createCard(evt, parent) { + const cardElement = document.createElement('div'); + cardElement.classList.add('card'); + const gridElement = document.createElement('div'); + gridElement.classList.add('grid'); + /** + * Data Part + */ + const dataElement = document.createElement('div'); + dataElement.classList.add('column'); + const svgElement = document.createElement('img'); + svgElement.classList.add('icon'); + svgElement.src = '../images/calendar.svg'; + const colElement = document.createElement('div'); + colElement.classList.add('column'); + const dateElement = document.createElement('div'); + dateElement.classList.add('flex'); + dateElement.appendChild(svgElement); + const dateTextElement = document.createElement('div'); + dateTextElement.innerHTML = new Date(evt.scheduled_start_time).toLocaleDateString('fr-FR', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' + }); + + dateElement.appendChild(dateTextElement); + + colElement.appendChild(dateElement); + + const titleElement = document.createElement('div'); + titleElement.classList.add('anime-name'); + titleElement.innerText = evt.name; + colElement.appendChild(titleElement); + + + dataElement.appendChild(colElement); + + + + /** + * Bouton s'inscrire à la séance + */ + const flexButtonElement = document.createElement('div'); + flexButtonElement.classList.add('flex'); + const linkElement = document.createElement('a'); + linkElement.classList.add('discordButton'); + linkElement.href = `${DISCORD_BASE_INVITE}?event=${evt.id}`; + linkElement.target = "_blank"; + linkElement.innerText = "S'inscrire à la séance"; + + flexButtonElement.appendChild(linkElement); + dataElement.appendChild(flexButtonElement); + + gridElement.appendChild(dataElement); + + /** + * Image Part + */ + const imageParentElement = document.createElement('div'); + const imageElement = document.createElement('img'); + imageElement.src = `https://cdn.discordapp.com/guild-events/${evt.id}/${evt.image}.png?size=256`; + imageElement.alt = evt.name; + imageElement.classList.add('image'); + imageParentElement.appendChild(imageElement); + gridElement.appendChild(imageParentElement); + + cardElement.appendChild(gridElement); + parent.appendChild(cardElement); +} + +document.addEventListener('readystatechange', async function() { + if (document.readyState === "complete") { + const events = await fetch('https://corsproxy.io/?https://git.crystalyx.net/camelia-studio/Camelianimes-Datas/raw/branch/datas/events.json') + .then(res => res.json()) + .catch((err) => { + console.error(err); + return []; + }); + + const cardParent = document.querySelector('.cards'); + + // On sort les éléments par date + events.sort((a, b) => new Date(a.scheduled_start_time) - new Date(b.scheduled_start_time)); + + events.filter(event => event.channel_id === CAMELIANIME_CHANNEL_ID).forEach(evt => { + createCard(evt, cardParent); + }); + } +}); \ No newline at end of file