From 432098f9c5886be5b6ce807d4b11aa55772ef753 Mon Sep 17 00:00:00 2001 From: Vincent Vandemeulebrouck Date: Sun, 14 Mar 2021 16:02:31 +0100 Subject: [PATCH] Couleurs du calendrier MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit De nuit, les boutons noirs sur fond gris sur fond sombre étaient difficiles à voir séparation de class css pour affichage/position du bouton séparation du nombre de minutes/heure à positionner --- module/rdd-calendrier.js | 374 +++++++++++++++---------------- styles/simple.css | 118 +++------- templates/calendar-template.html | 30 +-- 3 files changed, 231 insertions(+), 291 deletions(-) diff --git a/module/rdd-calendrier.js b/module/rdd-calendrier.js index 8a6c3bed..bbc65875 100644 --- a/module/rdd-calendrier.js +++ b/module/rdd-calendrier.js @@ -8,62 +8,64 @@ import { Grammar } from "./grammar.js"; /* -------------------------------------------- */ const dossierIconesHeures = 'systems/foundryvtt-reve-de-dragon/icons/heures/' -const heuresList = [ "vaisseau", "sirene", "faucon", "couronne", "dragon", "epees", "lyre", "serpent", "poissonacrobate", "araignee", "roseau", "chateaudormant" ]; -const heuresDef = { "vaisseau": { label: "Vaisseau", lettreFont: 'v', saison: "printemps", heure: 0, icon: 'hd01.svg' }, - "sirene": { label: "Sirène", lettreFont: 'S', saison: "printemps", heure: 1, icon: 'hd02.svg' }, - "faucon": { label: "Faucon", lettreFont: 'f', saison: "printemps", heure: 2, icon: 'hd03.svg' }, - "couronne": { label: "Couronne", lettreFont: 'C', saison: "ete", heure: 3, icon: 'hd04.svg' }, - "dragon": { label: "Dragon", lettreFont: 'd', saison: "ete", heure: 4, icon: 'hd05.svg' }, - "epees": { label: "Epées", lettreFont: 'e', saison: "ete", heure: 5, icon: 'hd06.svg' }, - "lyre": { label: "Lyre", lettreFont: 'l', saison: "automne", heure: 6, icon: 'hd07.svg' }, - "serpent": { label: "Serpent", lettreFont: 's', saison: "automne", heure: 7, icon: 'hd08.svg' }, - "poissonacrobate": { label: "Poisson Acrobate", lettreFont: 'p', saison: "automne", heure: 8, icon: 'hd09.svg' }, - "araignee": { label: "Araignée", lettreFont: 'a', saison: "hiver", heure: 9, icon: 'hd10.svg' }, - "roseau": { label: "Roseau", lettreFont: 'r', saison: "hiver", heure: 10, icon: 'hd11.svg' }, - "chateaudormant": { label: "Château Dormant", lettreFont: 'c', saison: "hiver", heure: 11, icon: 'hd12.svg' } - }; -const saisonsDef = { "printemps": { label: "Printemps"}, - "ete": { label: "Eté"}, - "automne": { label: "Automne"}, - "hiver": { label: "Hiver"} - }; +const heuresList = ["vaisseau", "sirene", "faucon", "couronne", "dragon", "epees", "lyre", "serpent", "poissonacrobate", "araignee", "roseau", "chateaudormant"]; +const heuresDef = { + "vaisseau": { label: "Vaisseau", lettreFont: 'v', saison: "printemps", heure: 0, icon: 'hd01.svg' }, + "sirene": { label: "Sirène", lettreFont: 'S', saison: "printemps", heure: 1, icon: 'hd02.svg' }, + "faucon": { label: "Faucon", lettreFont: 'f', saison: "printemps", heure: 2, icon: 'hd03.svg' }, + "couronne": { label: "Couronne", lettreFont: 'C', saison: "ete", heure: 3, icon: 'hd04.svg' }, + "dragon": { label: "Dragon", lettreFont: 'd', saison: "ete", heure: 4, icon: 'hd05.svg' }, + "epees": { label: "Epées", lettreFont: 'e', saison: "ete", heure: 5, icon: 'hd06.svg' }, + "lyre": { label: "Lyre", lettreFont: 'l', saison: "automne", heure: 6, icon: 'hd07.svg' }, + "serpent": { label: "Serpent", lettreFont: 's', saison: "automne", heure: 7, icon: 'hd08.svg' }, + "poissonacrobate": { label: "Poisson Acrobate", lettreFont: 'p', saison: "automne", heure: 8, icon: 'hd09.svg' }, + "araignee": { label: "Araignée", lettreFont: 'a', saison: "hiver", heure: 9, icon: 'hd10.svg' }, + "roseau": { label: "Roseau", lettreFont: 'r', saison: "hiver", heure: 10, icon: 'hd11.svg' }, + "chateaudormant": { label: "Château Dormant", lettreFont: 'c', saison: "hiver", heure: 11, icon: 'hd12.svg' } +}; +const saisonsDef = { + "printemps": { label: "Printemps" }, + "ete": { label: "Eté" }, + "automne": { label: "Automne" }, + "hiver": { label: "Hiver" } +}; const RDD_JOUR_PAR_MOIS = 28; const MAX_NOMBRE_ASTRAL = 12; /* -------------------------------------------- */ export class RdDCalendrier extends Application { -/* -------------------------------------------- */ + /* -------------------------------------------- */ async initCalendrier() { // Calendrier this.calendrier = duplicate(game.settings.get("foundryvtt-reve-de-dragon", "calendrier")); console.log("CALENDRIER", this.calendrier); - if ( this.calendrier == undefined || this.calendrier.moisRdD == undefined) { - this.calendrier.heureRdD = 0; // Index dans heuresList + if (this.calendrier == undefined || this.calendrier.moisRdD == undefined) { + this.calendrier.heureRdD = 0; // Index dans heuresList this.calendrier.minutesRelative = 0; - this.calendrier.moisRdD = 0; // Index dans heuresList - this.calendrier.jour = 0; - if ( game.user.isGM) { // Uniquement si GM - game.settings.set("foundryvtt-reve-de-dragon", "calendrier", this.calendrier ); + this.calendrier.moisRdD = 0; // Index dans heuresList + this.calendrier.jour = 0; + if (game.user.isGM) { // Uniquement si GM + game.settings.set("foundryvtt-reve-de-dragon", "calendrier", this.calendrier); } } // position this.calendrierPos = duplicate(game.settings.get("foundryvtt-reve-de-dragon", "calendrier-pos")); - if ( this.calendrierPos == undefined || this.calendrierPos.top == undefined) { - this.calendrierPos.top = 200; - this.calendrierPos.left = 200; - if ( game.user.isGM) { // Uniquement si GM - game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", this.calendrierPos ); + if (this.calendrierPos == undefined || this.calendrierPos.top == undefined) { + this.calendrierPos.top = 200; + this.calendrierPos.left = 200; + if (game.user.isGM) { // Uniquement si GM + game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", this.calendrierPos); } } // nombre astral - if ( game.user.isGM) { - this.listeNombreAstral = this._loadListNombreAstral(); + if (game.user.isGM) { + this.listeNombreAstral = this._loadListNombreAstral(); this.rebuildListeNombreAstral(); // Ensure always up-to-date } console.log(this.calendrier, this.calendrierPos, this.listeNombreAstral); } - + /* -------------------------------------------- */ _loadListNombreAstral() { return Object.values(game.settings.get("foundryvtt-reve-de-dragon", "liste-nombre-astral")); @@ -79,11 +81,11 @@ export class RdDCalendrier extends Application { } /* -------------------------------------------- */ - getDateFromIndex( index = undefined ) { - if ( !index) index = this.getCurrentDayIndex(); + getDateFromIndex(index = undefined) { + if (!index) index = this.getCurrentDayIndex(); let month = Math.floor(index / 28); - let day = (index - (month*28)) + 1; - return day+" "+heuresList[month]; + let day = (index - (month * 28)) + 1; + return day + " " + heuresList[month]; } /* -------------------------------------------- */ @@ -92,25 +94,25 @@ export class RdDCalendrier extends Application { } /* -------------------------------------------- */ - getCurrentDayIndex( ) { + getCurrentDayIndex() { return (this.calendrier.moisRdD * 28) + this.calendrier.jour; } - + /* -------------------------------------------- */ - getJoursSuivants( num) { + getJoursSuivants(num) { let jours = []; let index = this.getCurrentDayIndex(); - for (let i=0; i nombreAstral.index == indexDate ); - if (! astralData?.nombreAstral ) { + let astralData = liste.find((nombreAstral, i) => nombreAstral.index == indexDate); + if (!astralData?.nombreAstral) { this.rebuildListeNombreAstral(); - astralData = liste.find( (nombreAstral, i) => nombreAstral.index == indexDate ); + astralData = liste.find((nombreAstral, i) => nombreAstral.index == indexDate); } return astralData?.nombreAstral ?? "N/A"; } @@ -137,7 +139,7 @@ export class RdDCalendrier extends Application { rebuildListeNombreAstral() { let jourCourant = this.getCurrentDayIndex(); let jourFin = jourCourant + 12; - let newList = [0,1,2,3,4,5,6,7,8,9,10,11].map( i => this.ajouterNombreAstral(jourCourant + i)); + let newList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(i => this.ajouterNombreAstral(jourCourant + i)); if (this.listeNombreAstral) { for (const na of this.listeNombreAstral) { if (na && na.index >= jourCourant && na.index < jourFin) { @@ -145,34 +147,47 @@ export class RdDCalendrier extends Application { } } } - game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral ); + game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral); + } + /* -------------------------------------------- */ + onCalendarButton(ev) { + ev.preventDefault(); + const calendarAvance = ev.currentTarget.attributes['data-calendar-avance']; + const calendarSet = ev.currentTarget.attributes['data-calendar-set']; + if (calendarAvance) { + this.incrementTime(Number(calendarAvance.value)); + } + else if (calendarSet) { + this.positionnerHeure(Number(calendarSet.value)); + } + this.updateDisplay(); } /* -------------------------------------------- */ - incrementTime(minute = 0) { - this.calendrier.minutesRelative += minute; - if (this.calendrier.minutesRelative >= 120 ) { + incrementTime(minutes = 0) { + this.calendrier.minutesRelative += minutes; + if (this.calendrier.minutesRelative >= 120) { this.calendrier.minutesRelative -= 120; this.calendrier.heureRdD += 1; } - if ( this.calendrier.heureRdD > 11 ) { + if (this.calendrier.heureRdD > 11) { this.calendrier.heureRdD -= 12; this.incrementerJour(); } - game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier) ); + game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier)); // Notification aux joueurs game.socket.emit("system.foundryvtt-reve-de-dragon", { msg: "msg_sync_time", data: duplicate(this.calendrier) - } ); + }); } - + /* -------------------------------------------- */ - incrementerJour( ) { + incrementerJour() { this.calendrier.jour += 1; - if ( this.calendrier.jour >= RDD_JOUR_PAR_MOIS) { + if (this.calendrier.jour >= RDD_JOUR_PAR_MOIS) { this.calendrier.jour -= RDD_JOUR_PAR_MOIS; - if ( this.calendrier.jour <= 0) + if (this.calendrier.jour <= 0) this.calendrier.jour = 0; this.calendrier.moisRdD += 1; // Reconstruire les nombres astraux @@ -181,97 +196,97 @@ export class RdDCalendrier extends Application { } /* -------------------------------------------- */ - syncPlayerTime( calendrier ) { + syncPlayerTime(calendrier) { this.calendrier = duplicate(calendrier); // Local copy update this.updateDisplay(); // Then update } /* -------------------------------------------- */ - positionnerHeure( indexHeure ) { - if ( indexHeure <= this.calendrier.heureRdD ) + positionnerHeure(indexHeure) { + if (indexHeure <= this.calendrier.heureRdD) this.incrementerJour(); this.calendrier.heureRdD = indexHeure; this.calendrier.minutesRelative = 0; - game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier) ); + game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier)); } /* -------------------------------------------- */ - fillCalendrierData( data = {} ) { - let moisKey = heuresList[this.calendrier.moisRdD]; + fillCalendrierData(data = {}) { + let moisKey = heuresList[this.calendrier.moisRdD]; let heureKey = heuresList[this.calendrier.heureRdD]; const mois = heuresDef[moisKey]; const heure = heuresDef[heureKey]; //console.log(moisKey, heureKey); - data.heureKey = heureKey; - data.moisKey = moisKey; - data.jourMois = this.calendrier.jour + 1; - data.nomMois = mois.label; // heures et mois nommés identiques - data.iconMois = dossierIconesHeures + mois.icon; - data.nomHeure = heure.label; + data.heureKey = heureKey; + data.moisKey = moisKey; + data.jourMois = this.calendrier.jour + 1; + data.nomMois = mois.label; // heures et mois nommés identiques + data.iconMois = dossierIconesHeures + mois.icon; + data.nomHeure = heure.label; data.iconHeure = dossierIconesHeures + heure.icon; data.nomSaison = saisonsDef[mois.saison].label; + data.heureRdD = this.calendrier.heureRdD; data.minutesRelative = this.calendrier.minutesRelative; - data.isGM = game.user.isGM; + data.isGM = game.user.isGM; return data; } /* -------------------------------------------- */ - getLectureAstrologieDifficulte( dateIndex ) { + getLectureAstrologieDifficulte(dateIndex) { let indexNow = this.getCurrentDayIndex(); let diffDay = dateIndex - indexNow; return - Math.floor(diffDay / 2); } /* -------------------------------------------- */ - async requestNombreAstral( request) { - if ( game.user.isGM) { // Only GM - console.log( request ); - let jourDiff = this.getLectureAstrologieDifficulte( request.date); + async requestNombreAstral(request) { + if (game.user.isGM) { // Only GM + console.log(request); + let jourDiff = this.getLectureAstrologieDifficulte(request.date); let niveau = Number(request.astrologie.data.niveau) + Number(request.conditions) + Number(jourDiff) + Number(request.etat); let rolled = await RdDResolutionTable.rollData({ caracValue: request.carac_vue, finalLevel: niveau, - showDice: false}); - let nbAstral = this.getNombreAstral( request.date ); + showDice: false + }); + let nbAstral = this.getNombreAstral(request.date); let nbAstralFaux = nbAstral; request.isValid = true; - request.rolled = rolled; - if ( !rolled .isSuccess ) { + request.rolled = rolled; + if (!rolled.isSuccess) { request.isValid = false; - while ( nbAstralFaux == nbAstral ) { + while (nbAstralFaux == nbAstral) { nbAstralFaux = new Roll("1d12").roll().total; } nbAstral = nbAstralFaux; // Mise à jour des nombres astraux du joueur - let astralData = this.listeNombreAstral.find( (nombreAstral, i) => nombreAstral.index == request.date ); - astralData.valeursFausses.push( {actorId: request.id, nombreAstral: nbAstralFaux}); - game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral ); + let astralData = this.listeNombreAstral.find((nombreAstral, i) => nombreAstral.index == request.date); + astralData.valeursFausses.push({ actorId: request.id, nombreAstral: nbAstralFaux }); + game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral); } request.nbAstral = nbAstral; - if ( game.user.isGM) { - RdDUtility.responseNombreAstral( request ); - } else { + if (game.user.isGM) { + RdDUtility.responseNombreAstral(request); + } else { game.socket.emit("system.foundryvtt-reve-de-dragon", { msg: "msg_response_nombre_astral", - data: request - } ); + data: request + }); } } } /* -------------------------------------------- */ - getAjustementAstrologique(heureNaissance, name='inconnu') - { + getAjustementAstrologique(heureNaissance, name = 'inconnu') { let heure = Grammar.toLowerCaseNoAccent(heureNaissance); if (heure && heuresDef[heure]) { let hn = heuresDef[heure].heure; let chiffreAstral = this.getCurrentNombreAstral(); let heureCourante = this.calendrier.heureRdD; - let ecartChance = (hn + chiffreAstral - heureCourante)%12; - switch (ecartChance) - { + let ecartChance = (hn + chiffreAstral - heureCourante) % 12; + switch (ecartChance) { case 0: return 4; case 4: case 8: return 2; case 6: return -4; @@ -290,7 +305,7 @@ export class RdDCalendrier extends Application { this.fillCalendrierData(data); - this.setPos( this.calendrierPos ); + this.setPos(this.calendrierPos); return data; } @@ -301,8 +316,8 @@ export class RdDCalendrier extends Application { let elmnt = document.getElementById("calendar-time-container"); if (elmnt) { elmnt.style.bottom = null; - let xPos = (pos.left) > window.innerWidth ? window.innerWidth-200 : pos.left; - let yPos = (pos.top) > window.innerHeight-20 ? window.innerHeight-100 : pos.top; + let xPos = (pos.left) > window.innerWidth ? window.innerWidth - 200 : pos.left; + let yPos = (pos.top) > window.innerHeight - 20 ? window.innerHeight - 100 : pos.top; elmnt.style.top = (yPos) + "px"; elmnt.style.left = (xPos) + "px"; resolve(); @@ -315,126 +330,97 @@ export class RdDCalendrier extends Application { } /* -------------------------------------------- */ - updateDisplay() { - let data = this.fillCalendrierData( ); - // Rebuild data + updateDisplay() { + let data = this.fillCalendrierData(); + // Rebuild data let dateHTML = `Jour ${data.jourMois} de ${data.nomMois} (${data.nomSaison})`; if (game.user.isGM) { - dateHTML = dateHTML + " - NA: "+this.getCurrentNombreAstral(); + dateHTML = dateHTML + " - NA: " + this.getCurrentNombreAstral(); + } + for (let handle of document.getElementsByClassName("calendar-move-handle")) { + handle.innerHTML = dateHTML; + } + for (let heure of document.getElementsByClassName("calendar-heure-texte")) { + heure.innerHTML = data.nomHeure; + } + for (const minute of document.getElementsByClassName("calendar-time-disp")) { + minute.innerHTML = `${data.minutesRelative} minutes`; + } + for (const heureImg of document.getElementsByClassName("calendar-heure-img")) { + heureImg.src = data.iconHeure; } - document.getElementById("calendar--move-handle").innerHTML = dateHTML; - document.getElementById("calendar-heure-texte").innerHTML = `${data.nomHeure}`; - document.getElementById("calendar-time").innerHTML = `${data.minutesRelative} min.`; - document.getElementById("calendar-heure-img").src = data.iconHeure; } /* -------------------------------------------- */ - saveEditeur( calendrierData ) { + saveEditeur(calendrierData) { this.calendrier.minutesRelative = Number(calendrierData.minutesRelative); - this.calendrier.jour = Number(calendrierData.jourMois) - 1; - this.calendrier.moisRdD = heuresList.findIndex(mois => mois === calendrierData.moisKey); - this.calendrier.heureRdD = heuresList.findIndex(heure => heure === calendrierData.heureKey);; // Index dans heuresList - game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier) ); - + this.calendrier.jour = Number(calendrierData.jourMois) - 1; + this.calendrier.moisRdD = heuresList.findIndex(mois => mois === calendrierData.moisKey); + this.calendrier.heureRdD = heuresList.findIndex(heure => heure === calendrierData.heureKey);; // Index dans heuresList + game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier)); + this.rebuildListeNombreAstral(); this.updateDisplay(); } - + /* -------------------------------------------- */ - async showCalendarEditor() { - let calendrierData = duplicate( this.fillCalendrierData( ) ); - if ( this.editeur == undefined ) { + async showCalendarEditor() { + let calendrierData = duplicate(this.fillCalendrierData()); + if (this.editeur == undefined) { calendrierData.jourMoisOptions = Array(28).fill().map((item, index) => 1 + index); - calendrierData.heuresOptions = [0, 1]; - calendrierData.minutesOptions = Array(120).fill().map((item, index) => 0 + index); - let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-editor-template.html', calendrierData ); - this.editeur = new RdDCalendrierEditeur(html, this, calendrierData ) + calendrierData.heuresOptions = [0, 1]; + calendrierData.minutesOptions = Array(120).fill().map((item, index) => 0 + index); + let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-editor-template.html', calendrierData); + this.editeur = new RdDCalendrierEditeur(html, this, calendrierData) } - this.editeur.updateData( calendrierData ); + this.editeur.updateData(calendrierData); this.editeur.render(true); } /* -------------------------------------------- */ async showAstrologieEditor() { - let calendrierData = duplicate( this.fillCalendrierData( ) ); - let astrologieArray = []; - for (let astralData of this.listeNombreAstral ) { - astralData.humanDate = this.getDateFromIndex( astralData.index ); + let calendrierData = duplicate(this.fillCalendrierData()); + let astrologieArray = []; + for (let astralData of this.listeNombreAstral) { + astralData.humanDate = this.getDateFromIndex(astralData.index); for (let vf of astralData.valeursFausses) { - let actor = game.actors.get( vf.actorId); - console.log(vf.actorId, actor ); + let actor = game.actors.get(vf.actorId); + console.log(vf.actorId, actor); vf.actorName = (actor) ? actor.name : "Inconnu"; } - astrologieArray.push( duplicate(astralData ) ); + astrologieArray.push(duplicate(astralData)); } //console.log("ASTRO", astrologieArray); calendrierData.astrologieData = astrologieArray; - let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-astrologie-template.html', calendrierData ); - let astrologieEditeur = new RdDAstrologieEditeur(html, this, calendrierData ) - astrologieEditeur.updateData( calendrierData ); + let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-astrologie-template.html', calendrierData); + let astrologieEditeur = new RdDAstrologieEditeur(html, this, calendrierData) + astrologieEditeur.updateData(calendrierData); astrologieEditeur.render(true); } - + /* -------------------------------------------- */ /** @override */ - activateListeners(html) { + activateListeners(html) { super.activateListeners(html); HtmlUtility._showControlWhen($(".gm-only"), game.user.isGM); this.updateDisplay(); - html.find('#calendar-btn-1min').click(ev => { - ev.preventDefault(); - this.incrementTime(1); - this.updateDisplay(); - }); - html.find('#calendar-btn-5min').click(ev => { - ev.preventDefault(); - this.incrementTime(5); - this.updateDisplay(); - }); - html.find('#calendar-btn-10min').click(ev => { - ev.preventDefault(); - this.incrementTime(10); - this.updateDisplay(); - }); - html.find('#calendar-btn-20min').click(ev => { - ev.preventDefault(); - this.incrementTime(20); - this.updateDisplay(); - }); - html.find('#calendar-btn-30min').click(ev => { - ev.preventDefault(); - this.incrementTime(30); - this.updateDisplay(); - }); - html.find('#calendar-btn-1heure').click(ev => { - ev.preventDefault(); - this.incrementTime(120); - this.updateDisplay(); - }); - html.find('#calendar-btn-vaisseau').click(ev => { - ev.preventDefault(); - this.positionnerHeure(0); // 0 -> vaisseau - this.updateDisplay(); - }); - html.find('#calendar-btn-lyre').click(ev => { - ev.preventDefault(); - this.positionnerHeure(6); // 6 -> lyre - this.updateDisplay(); - }); - html.find('#calendar-btn-edit').click(ev => { + html.find('.calendar-btn').click(ev => this.onCalendarButton(ev)); + + html.find('.calendar-btn-edit').click(ev => { ev.preventDefault(); this.showCalendarEditor(); }); - html.find('#astrologie-btn-edit').click(ev => { + + html.find('.astrologie-btn-edit').click(ev => { ev.preventDefault(); this.showAstrologieEditor(); }); - html.find('#calendar--move-handle').mousedown(ev => { + html.find('#calendar-move-handle').mousedown(ev => { ev.preventDefault(); ev = ev || window.event; let isRightMB = false; @@ -455,11 +441,11 @@ export class RdDCalendrier extends Application { e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; - + document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } - + function elementDrag(e) { e = e || window.event; e.preventDefault(); @@ -473,36 +459,36 @@ export class RdDCalendrier extends Application { elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } - + function closeDragElement() { // stop moving when mouse button is released: elmnt.onmousedown = null; document.onmouseup = null; document.onmousemove = null; - let xPos = (elmnt.offsetLeft - pos1) > window.innerWidth ? window.innerWidth-200 : (elmnt.offsetLeft - pos1); - let yPos = (elmnt.offsetTop - pos2) > window.innerHeight-20 ? window.innerHeight-100 : (elmnt.offsetTop - pos2) + let xPos = (elmnt.offsetLeft - pos1) > window.innerWidth ? window.innerWidth - 200 : (elmnt.offsetLeft - pos1); + let yPos = (elmnt.offsetTop - pos2) > window.innerHeight - 20 ? window.innerHeight - 100 : (elmnt.offsetTop - pos2) xPos = xPos < 0 ? 0 : xPos; yPos = yPos < 0 ? 0 : yPos; - if(xPos != (elmnt.offsetLeft - pos1) || yPos != (elmnt.offsetTop - pos2)){ + if (xPos != (elmnt.offsetLeft - pos1) || yPos != (elmnt.offsetTop - pos2)) { elmnt.style.top = (yPos) + "px"; elmnt.style.left = (xPos) + "px"; } - game.system.rdd.calendrier.calendrierPos.top = yPos; - game.system.rdd.calendrier.calendrierPos.left = xPos; - if ( game.user.isGM) { - game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos) ); + game.system.rdd.calendrier.calendrierPos.top = yPos; + game.system.rdd.calendrier.calendrierPos.left = xPos; + if (game.user.isGM) { + game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos)); } } } - } else if(isRightMB){ - game.system.rdd.calendrier.calendrierPos.top = 200; - game.system.rdd.calendrier.calendrierPos.left = 200; - if ( game.user.isGM) { - game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos) ); + } else if (isRightMB) { + game.system.rdd.calendrier.calendrierPos.top = 200; + game.system.rdd.calendrier.calendrierPos.left = 200; + if (game.user.isGM) { + game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos)); } this.setPos(game.system.rdd.calendrier.calendrierPos); } - }); + }); } - + } \ No newline at end of file diff --git a/styles/simple.css b/styles/simple.css index fb4342b2..7a73a2b1 100644 --- a/styles/simple.css +++ b/styles/simple.css @@ -1058,7 +1058,7 @@ ul, li { position: absolute; display: block; } -#calendar{ +.calendar{ min-width: 150px; grid-row: 1; grid-column: 1; @@ -1072,7 +1072,7 @@ ul, li { font-family: "GoudyAcc"; z-index: 100; } -#calendar-hdr{ +.calendar-hdr{ display: grid; font-size: 1rem; margin: 3px; @@ -1091,7 +1091,7 @@ ul, li { font-size: 1.10rem; opacity: 90; } -#calendar--move-handle { +#calendar-move-handle { font-family: "GoudyAcc"; font-size: 13px; line-height: 1; @@ -1101,7 +1101,7 @@ ul, li { border: none; flex: 1; } -#calendar-date{ +.calendar-date{ grid-row: 1; grid-column: 2; float: left; @@ -1112,11 +1112,11 @@ ul, li { color: #CCC; cursor: pointer; } -#calendar-date, -#calendar-date-num { +.calendar-date, +.calendar-date-num { transition: 0.2s; } -#calendar-date-num { +.calendar-date-num { grid-row: 1; grid-column: 2; float: left; @@ -1128,18 +1128,18 @@ ul, li { opacity: 0; cursor: pointer; } -#calendar-heure-img{ +.calendar-heure-img{ width: 24px; height: 24px; flex-grow: 0; border-width: 0; opacity: 90; - color: #CCC; + color: rgba(255, 255, 255, 0.5); } -#calendar-hdr:hover #calendar-date { +.calendar-hdr:hover .calendar-date { opacity: 0; } -#calendar-hdr:hover #calendar-date-num{ +.calendar-hdr:hover .calendar-date-num{ opacity: 1; } .calendar-container{ @@ -1161,132 +1161,86 @@ ul, li { margin: 2px; grid-row-gap: 3px; } -#astrologie-btn-edit, -#calendar-btn-edit{ +.astrologie-btn-edit, +.calendar-btn-edit{ grid-row: 1; grid-column: 1; margin: auto; color: rgba(0, 0, 0, 0.5); } -#astrologie-btn-edit:hover, -#calendar-btn-edit:hover { +.astrologie-btn-edit:hover, +.calendar-btn-edit:hover { color: #FFF; border: 0px solid #000; cursor: pointer; } -#calendar-btn-1min{ +.calendar-btn{ + margin: auto; + border: 1px solid rgba(0, 0, 0, 0); + color: rgba(255, 255, 255, 0.5); +} +.calendar-btn:hover { + color: rgba(255, 255, 128, 0.7); + border: 1px solid rgba(255, 128, 0, 0.8); + cursor: pointer; +} + +.calendar-1min{ grid-row: 1; grid-column: 1; - margin: auto; - color: rgba(0, 0, 0, 0.7); } -#calendar-btn-5min{ +.calendar-5min{ grid-row: 1; grid-column: 2; - margin: auto; - color: rgba(0, 0, 0, 0.7); } -#calendar-btn-10min{ +.calendar-10min{ grid-row: 2; grid-column: 1; margin-left: 10px; - color: rgba(0, 0, 0, 0.7); } -#calendar-btn-20min{ +.calendar-20min{ grid-row: 2; grid-column: 2; margin-left: 10px; - color: rgba(0, 0, 0, 0.7); } -#calendar-btn-lyre{ +.calendar-lyre{ grid-row: 1; grid-column: 1; height: fit-content; text-align: center; vertical-align: center; - color: rgba(0, 0, 0, 0.7); } -#calendar-btn-vaisseau{ +.calendar-vaisseau{ grid-row: 1; grid-column: 2; height: fit-content; text-align: center; vertical-align: center; - color: rgba(0, 0, 0, 0.7); } -#calendar-btn-30min{ +.calendar-30min{ grid-row: 2; grid-column: 1; height: fit-content; text-align: center; vertical-align: center; - color: rgba(0, 0, 0, 0.7); } -#calendar-btn-1heure{ +.calendar-1heure{ grid-row: 2; grid-column: 2; height: fit-content; text-align: center; vertical-align: center; - color: rgba(0, 0, 0, 0.7); -} -#calendar-btn-container-left:hover{ - color: #FFF; - border: 0px solid #000; - cursor: pointer; -} -#calendar-btn-1min:hover { - color: #FFF; - border: 0px solid #000; - cursor: pointer; } -#calendar-btn-5min:hover { +.calendar-btn-container-left:hover{ color: #FFF; border: 0px solid #000; cursor: pointer; } - -#calendar-btn-10min:hover { - color: #FFF; - border: 0px solid #000; - cursor: pointer; -} - -#calendar-btn-20min:hover { - color: #FFF; - border: 0px solid #000; - cursor: pointer; -} - -#calendar-btn-30min:hover { - color: #FFF; - border: 0px solid #000; - cursor: pointer; -} - -#calendar-btn-1heure:hover { - color: #FFF; - border: 0px solid #000; - cursor: pointer; -} - -#calendar-btn-vaisseau:hover { - color: #FFF; - border: 0px solid #000; - cursor: pointer; -} - -#calendar-btn-lyre:hover{ - color: #FFF; - border: 0px solid #000; - cursor: pointer; -} - .calendar-weekday-time{ display: grid; float: left; @@ -1296,7 +1250,7 @@ ul, li { margin: auto; color: #CCC; } -#calendar-weekday{ +.calendar-weekday{ grid-column: 1; grid-row: 1; text-align: center; diff --git a/templates/calendar-template.html b/templates/calendar-template.html index e1d65073..b4ed6be7 100644 --- a/templates/calendar-template.html +++ b/templates/calendar-template.html @@ -1,34 +1,34 @@
-
+
{{#if isGM}} - - + + {{/if}} -
-

Jour {{jourMois}} de {{nomMois}} ({{nomSaison}})

+
+

Jour {{jourMois}} de {{nomMois}} ({{nomSaison}})

{{#if isGM}}
- - - - + + + +
{{else}}
{{/if}}
-

{{nomHeure}} {{nomHeure}}

-

{{heuresRelative}}:{{minutesRelative}}

 +

{{nomHeure}} {{nomHeure}}

+

{{minutesRelative}} minutes
{{#if isGM}}
- - - - + + + +
{{/if}}