diff --git a/branches/alt+tab/la-compagnie-de-sufokia/calendar.css b/branches/alt+tab/la-compagnie-de-sufokia/calendar.css new file mode 100644 index 0000000..edcd8c2 --- /dev/null +++ b/branches/alt+tab/la-compagnie-de-sufokia/calendar.css @@ -0,0 +1,85 @@ +.cards { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 1rem; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.flex-end { + display: flex; + justify-content: flex-end; +} + +.card { + color: white; + background-color: #524a3d; + 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; +} + +@media screen and (max-width: 768px) { + .grid { + grid-template-columns: 1fr; + } +} + + +.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: #ff6600; + color: white; + padding: .5rem 1rem; + border-radius: .5rem; + text-decoration: none; + transition: background .2s; +} + +.discordButton:hover { + background: #ee6002; + text-decoration: none; +} + +.d-flex { + display: flex; +} \ No newline at end of file diff --git a/branches/alt+tab/la-compagnie-de-sufokia/calendrier.html b/branches/alt+tab/la-compagnie-de-sufokia/calendrier.html index 2df2b31..820dc49 100644 --- a/branches/alt+tab/la-compagnie-de-sufokia/calendrier.html +++ b/branches/alt+tab/la-compagnie-de-sufokia/calendrier.html @@ -3,20 +3,21 @@ - La Compagnie de Sufokia - - - - - - + La Compagnie de Sufokia + + + + + + +
-
-

prochainement

+
+

Calendrier

+
+ Tout ajouter à mon agenda +
+
+ - \ No newline at end of file + diff --git a/branches/alt+tab/la-compagnie-de-sufokia/images/calendar.svg b/branches/alt+tab/la-compagnie-de-sufokia/images/calendar.svg new file mode 100644 index 0000000..3171cf0 --- /dev/null +++ b/branches/alt+tab/la-compagnie-de-sufokia/images/calendar.svg @@ -0,0 +1 @@ + diff --git a/branches/alt+tab/la-compagnie-de-sufokia/scripts/calendar.js b/branches/alt+tab/la-compagnie-de-sufokia/scripts/calendar.js new file mode 100644 index 0000000..6535fdd --- /dev/null +++ b/branches/alt+tab/la-compagnie-de-sufokia/scripts/calendar.js @@ -0,0 +1,94 @@ +const CALENDAR_PREFIX = "DofusÉvent"; +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.description.includes(CALENDAR_PREFIX)).forEach(evt => { + createCard(evt, cardParent); + }); + } +}); \ No newline at end of file