VincentVk/foundryvtt-reve-de-dragon
0
0
Fork 0
forked from public/foundryvtt-reve-de-dragon
Code Issues Pull Requests Projects Releases Wiki Activity

Couleurs du calendrier

Browse Source 
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
This commit is contained in:
Vincent Vandemeulebrouck 2021-03-14 16:02:31 +01:00
parent e1b10bc489
commit 432098f9c5
3 changed files with 231 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
module/rdd-calendrier.js
View File

@ -8,8 +8,9 @@ import { Grammar } from "./grammar.js";
/* -------------------------------------------- */ /* -------------------------------------------- */
const dossierIconesHeures = 'systems/foundryvtt-reve-de-dragon/icons/heures/' const dossierIconesHeures = 'systems/foundryvtt-reve-de-dragon/icons/heures/'
const heuresList = [ "vaisseau", "sirene", "faucon", "couronne", "dragon", "epees", "lyre", "serpent", "poissonacrobate", "araignee", "roseau", "chateaudormant" ]; 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' }, 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' }, "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' }, "faucon": { label: "Faucon", lettreFont: 'f', saison: "printemps", heure: 2, icon: 'hd03.svg' },
"couronne": { label: "Couronne", lettreFont: 'C', saison: "ete", heure: 3, icon: 'hd04.svg' }, "couronne": { label: "Couronne", lettreFont: 'C', saison: "ete", heure: 3, icon: 'hd04.svg' },
@ -21,43 +22,44 @@ const heuresDef = { "vaisseau": { label: "Vaisseau", lettreFont: 'v', saison: "p
"araignee": { label: "Araignée", lettreFont: 'a', saison: "hiver", heure: 9, icon: 'hd10.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' }, "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' } "chateaudormant": { label: "Château Dormant", lettreFont: 'c', saison: "hiver", heure: 11, icon: 'hd12.svg' }
}; };
const saisonsDef = { "printemps": { label: "Printemps"}, const saisonsDef = {
"ete": { label: "Eté"}, "printemps": { label: "Printemps" },
"automne": { label: "Automne"}, "ete": { label: "Eté" },
"hiver": { label: "Hiver"} "automne": { label: "Automne" },
}; "hiver": { label: "Hiver" }
};
const RDD_JOUR_PAR_MOIS = 28; const RDD_JOUR_PAR_MOIS = 28;
const MAX_NOMBRE_ASTRAL = 12; const MAX_NOMBRE_ASTRAL = 12;
/* -------------------------------------------- */ /* -------------------------------------------- */
export class RdDCalendrier extends Application { export class RdDCalendrier extends Application {
/* -------------------------------------------- */ /* -------------------------------------------- */
async initCalendrier() { async initCalendrier() {
// Calendrier // Calendrier
this.calendrier = duplicate(game.settings.get("foundryvtt-reve-de-dragon", "calendrier")); this.calendrier = duplicate(game.settings.get("foundryvtt-reve-de-dragon", "calendrier"));
console.log("CALENDRIER", this.calendrier); console.log("CALENDRIER", this.calendrier);
if ( this.calendrier == undefined || this.calendrier.moisRdD == undefined) { if (this.calendrier == undefined || this.calendrier.moisRdD == undefined) {
this.calendrier.heureRdD = 0; // Index dans heuresList this.calendrier.heureRdD = 0; // Index dans heuresList
this.calendrier.minutesRelative = 0; this.calendrier.minutesRelative = 0;
this.calendrier.moisRdD = 0; // Index dans heuresList this.calendrier.moisRdD = 0; // Index dans heuresList
this.calendrier.jour = 0; this.calendrier.jour = 0;
if ( game.user.isGM) { // Uniquement si GM if (game.user.isGM) { // Uniquement si GM
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", this.calendrier ); game.settings.set("foundryvtt-reve-de-dragon", "calendrier", this.calendrier);
} }
} }
// position // position
this.calendrierPos = duplicate(game.settings.get("foundryvtt-reve-de-dragon", "calendrier-pos")); this.calendrierPos = duplicate(game.settings.get("foundryvtt-reve-de-dragon", "calendrier-pos"));
if ( this.calendrierPos == undefined || this.calendrierPos.top == undefined) { if (this.calendrierPos == undefined || this.calendrierPos.top == undefined) {
this.calendrierPos.top = 200; this.calendrierPos.top = 200;
this.calendrierPos.left = 200; this.calendrierPos.left = 200;
if ( game.user.isGM) { // Uniquement si GM if (game.user.isGM) { // Uniquement si GM
game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", this.calendrierPos ); game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", this.calendrierPos);
} }
} }
// nombre astral // nombre astral
if ( game.user.isGM) { if (game.user.isGM) {
this.listeNombreAstral = this._loadListNombreAstral(); this.listeNombreAstral = this._loadListNombreAstral();
this.rebuildListeNombreAstral(); // Ensure always up-to-date this.rebuildListeNombreAstral(); // Ensure always up-to-date
} }
@ -79,11 +81,11 @@ export class RdDCalendrier extends Application {
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
getDateFromIndex( index = undefined ) { getDateFromIndex(index = undefined) {
if ( !index) index = this.getCurrentDayIndex(); if (!index) index = this.getCurrentDayIndex();
let month = Math.floor(index / 28); let month = Math.floor(index / 28);
let day = (index - (month*28)) + 1; let day = (index - (month * 28)) + 1;
return day+" "+heuresList[month]; return day + " " + heuresList[month];
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
@ -92,15 +94,15 @@ export class RdDCalendrier extends Application {
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
getCurrentDayIndex( ) { getCurrentDayIndex() {
return (this.calendrier.moisRdD * 28) + this.calendrier.jour; return (this.calendrier.moisRdD * 28) + this.calendrier.jour;
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
getJoursSuivants( num) { getJoursSuivants(num) {
let jours = []; let jours = [];
let index = this.getCurrentDayIndex(); let index = this.getCurrentDayIndex();
for (let i=0; i<num; i++) { for (let i = 0; i < num; i++) {
jours[i] = { label: this.getDateFromIndex(index), index: index }; jours[i] = { label: this.getDateFromIndex(index), index: index };
index += 1; index += 1;
} }
@ -123,12 +125,12 @@ export class RdDCalendrier extends Application {
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
getNombreAstral( indexDate ) { getNombreAstral(indexDate) {
const liste = this.listeNombreAstral ?? this._loadListNombreAstral(); const liste = this.listeNombreAstral ?? this._loadListNombreAstral();
let astralData = liste.find( (nombreAstral, i) => nombreAstral.index == indexDate ); let astralData = liste.find((nombreAstral, i) => nombreAstral.index == indexDate);
if (! astralData?.nombreAstral ) { if (!astralData?.nombreAstral) {
this.rebuildListeNombreAstral(); this.rebuildListeNombreAstral();
astralData = liste.find( (nombreAstral, i) => nombreAstral.index == indexDate ); astralData = liste.find((nombreAstral, i) => nombreAstral.index == indexDate);
} }
return astralData?.nombreAstral ?? "N/A"; return astralData?.nombreAstral ?? "N/A";
} }
@ -137,7 +139,7 @@ export class RdDCalendrier extends Application {
rebuildListeNombreAstral() { rebuildListeNombreAstral() {
let jourCourant = this.getCurrentDayIndex(); let jourCourant = this.getCurrentDayIndex();
let jourFin = jourCourant + 12; 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) { if (this.listeNombreAstral) {
for (const na of this.listeNombreAstral) { for (const na of this.listeNombreAstral) {
if (na && na.index >= jourCourant && na.index < jourFin) { 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) { incrementTime(minutes = 0) {
this.calendrier.minutesRelative += minute; this.calendrier.minutesRelative += minutes;
if (this.calendrier.minutesRelative >= 120 ) { if (this.calendrier.minutesRelative >= 120) {
this.calendrier.minutesRelative -= 120; this.calendrier.minutesRelative -= 120;
this.calendrier.heureRdD += 1; this.calendrier.heureRdD += 1;
} }
if ( this.calendrier.heureRdD > 11 ) { if (this.calendrier.heureRdD > 11) {
this.calendrier.heureRdD -= 12; this.calendrier.heureRdD -= 12;
this.incrementerJour(); 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 // Notification aux joueurs
game.socket.emit("system.foundryvtt-reve-de-dragon", { game.socket.emit("system.foundryvtt-reve-de-dragon", {
msg: "msg_sync_time", msg: "msg_sync_time",
data: duplicate(this.calendrier) data: duplicate(this.calendrier)
} ); });
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
incrementerJour( ) { incrementerJour() {
this.calendrier.jour += 1; 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; this.calendrier.jour -= RDD_JOUR_PAR_MOIS;
if ( this.calendrier.jour <= 0) if (this.calendrier.jour <= 0)
this.calendrier.jour = 0; this.calendrier.jour = 0;
this.calendrier.moisRdD += 1; this.calendrier.moisRdD += 1;
// Reconstruire les nombres astraux // Reconstruire les nombres astraux
@ -181,22 +196,22 @@ export class RdDCalendrier extends Application {
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
syncPlayerTime( calendrier ) { syncPlayerTime(calendrier) {
this.calendrier = duplicate(calendrier); // Local copy update this.calendrier = duplicate(calendrier); // Local copy update
this.updateDisplay(); // Then update this.updateDisplay(); // Then update
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
positionnerHeure( indexHeure ) { positionnerHeure(indexHeure) {
if ( indexHeure <= this.calendrier.heureRdD ) if (indexHeure <= this.calendrier.heureRdD)
this.incrementerJour(); this.incrementerJour();
this.calendrier.heureRdD = indexHeure; this.calendrier.heureRdD = indexHeure;
this.calendrier.minutesRelative = 0; 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 = {} ) { fillCalendrierData(data = {}) {
let moisKey = heuresList[this.calendrier.moisRdD]; let moisKey = heuresList[this.calendrier.moisRdD];
let heureKey = heuresList[this.calendrier.heureRdD]; let heureKey = heuresList[this.calendrier.heureRdD];
@ -212,66 +227,66 @@ export class RdDCalendrier extends Application {
data.nomHeure = heure.label; data.nomHeure = heure.label;
data.iconHeure = dossierIconesHeures + heure.icon; data.iconHeure = dossierIconesHeures + heure.icon;
data.nomSaison = saisonsDef[mois.saison].label; data.nomSaison = saisonsDef[mois.saison].label;
data.heureRdD = this.calendrier.heureRdD;
data.minutesRelative = this.calendrier.minutesRelative; data.minutesRelative = this.calendrier.minutesRelative;
data.isGM = game.user.isGM; data.isGM = game.user.isGM;
return data; return data;
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
getLectureAstrologieDifficulte( dateIndex ) { getLectureAstrologieDifficulte(dateIndex) {
let indexNow = this.getCurrentDayIndex(); let indexNow = this.getCurrentDayIndex();
let diffDay = dateIndex - indexNow; let diffDay = dateIndex - indexNow;
return - Math.floor(diffDay / 2); return - Math.floor(diffDay / 2);
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
async requestNombreAstral( request) { async requestNombreAstral(request) {
if ( game.user.isGM) { // Only GM if (game.user.isGM) { // Only GM
console.log( request ); console.log(request);
let jourDiff = this.getLectureAstrologieDifficulte( request.date); let jourDiff = this.getLectureAstrologieDifficulte(request.date);
let niveau = Number(request.astrologie.data.niveau) + Number(request.conditions) + Number(jourDiff) + Number(request.etat); let niveau = Number(request.astrologie.data.niveau) + Number(request.conditions) + Number(jourDiff) + Number(request.etat);
let rolled = await RdDResolutionTable.rollData({ let rolled = await RdDResolutionTable.rollData({
caracValue: request.carac_vue, caracValue: request.carac_vue,
finalLevel: niveau, finalLevel: niveau,
showDice: false}); showDice: false
let nbAstral = this.getNombreAstral( request.date ); });
let nbAstral = this.getNombreAstral(request.date);
let nbAstralFaux = nbAstral; let nbAstralFaux = nbAstral;
request.isValid = true; request.isValid = true;
request.rolled = rolled; request.rolled = rolled;
if ( !rolled .isSuccess ) { if (!rolled.isSuccess) {
request.isValid = false; request.isValid = false;
while ( nbAstralFaux == nbAstral ) { while (nbAstralFaux == nbAstral) {
nbAstralFaux = new Roll("1d12").roll().total; nbAstralFaux = new Roll("1d12").roll().total;
} }
nbAstral = nbAstralFaux; nbAstral = nbAstralFaux;
// Mise à jour des nombres astraux du joueur // Mise à jour des nombres astraux du joueur
let astralData = this.listeNombreAstral.find( (nombreAstral, i) => nombreAstral.index == request.date ); let astralData = this.listeNombreAstral.find((nombreAstral, i) => nombreAstral.index == request.date);
astralData.valeursFausses.push( {actorId: request.id, nombreAstral: nbAstralFaux}); astralData.valeursFausses.push({ actorId: request.id, nombreAstral: nbAstralFaux });
game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral ); game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral);
} }
request.nbAstral = nbAstral; request.nbAstral = nbAstral;
if ( game.user.isGM) { if (game.user.isGM) {
RdDUtility.responseNombreAstral( request ); RdDUtility.responseNombreAstral(request);
} else { } else {
game.socket.emit("system.foundryvtt-reve-de-dragon", { game.socket.emit("system.foundryvtt-reve-de-dragon", {
msg: "msg_response_nombre_astral", msg: "msg_response_nombre_astral",
data: request data: request
} ); });
} }
} }
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
getAjustementAstrologique(heureNaissance, name='inconnu') getAjustementAstrologique(heureNaissance, name = 'inconnu') {
{
let heure = Grammar.toLowerCaseNoAccent(heureNaissance); let heure = Grammar.toLowerCaseNoAccent(heureNaissance);
if (heure && heuresDef[heure]) { if (heure && heuresDef[heure]) {
let hn = heuresDef[heure].heure; let hn = heuresDef[heure].heure;
let chiffreAstral = this.getCurrentNombreAstral(); let chiffreAstral = this.getCurrentNombreAstral();
let heureCourante = this.calendrier.heureRdD; let heureCourante = this.calendrier.heureRdD;
let ecartChance = (hn + chiffreAstral - heureCourante)%12; let ecartChance = (hn + chiffreAstral - heureCourante) % 12;
switch (ecartChance) switch (ecartChance) {
{
case 0: return 4; case 0: return 4;
case 4: case 8: return 2; case 4: case 8: return 2;
case 6: return -4; case 6: return -4;
@ -290,7 +305,7 @@ export class RdDCalendrier extends Application {
this.fillCalendrierData(data); this.fillCalendrierData(data);
this.setPos( this.calendrierPos ); this.setPos(this.calendrierPos);
return data; return data;
} }
@ -301,8 +316,8 @@ export class RdDCalendrier extends Application {
let elmnt = document.getElementById("calendar-time-container"); let elmnt = document.getElementById("calendar-time-container");
if (elmnt) { if (elmnt) {
elmnt.style.bottom = null; elmnt.style.bottom = null;
let xPos = (pos.left) > window.innerWidth ? window.innerWidth-200 : pos.left; let xPos = (pos.left) > window.innerWidth ? window.innerWidth - 200 : pos.left;
let yPos = (pos.top) > window.innerHeight-20 ? window.innerHeight-100 : pos.top; let yPos = (pos.top) > window.innerHeight - 20 ? window.innerHeight - 100 : pos.top;
elmnt.style.top = (yPos) + "px"; elmnt.style.top = (yPos) + "px";
elmnt.style.left = (xPos) + "px"; elmnt.style.left = (xPos) + "px";
resolve(); resolve();
@ -316,25 +331,33 @@ export class RdDCalendrier extends Application {
/* -------------------------------------------- */ /* -------------------------------------------- */
updateDisplay() { updateDisplay() {
let data = this.fillCalendrierData( ); let data = this.fillCalendrierData();
// Rebuild data // Rebuild data
let dateHTML = `Jour ${data.jourMois} de ${data.nomMois} (${data.nomSaison})`; let dateHTML = `Jour ${data.jourMois} de ${data.nomMois} (${data.nomSaison})`;
if (game.user.isGM) { 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.minutesRelative = Number(calendrierData.minutesRelative);
this.calendrier.jour = Number(calendrierData.jourMois) - 1; this.calendrier.jour = Number(calendrierData.jourMois) - 1;
this.calendrier.moisRdD = heuresList.findIndex(mois => mois === calendrierData.moisKey); this.calendrier.moisRdD = heuresList.findIndex(mois => mois === calendrierData.moisKey);
this.calendrier.heureRdD = heuresList.findIndex(heure => heure === calendrierData.heureKey);; // Index dans heuresList this.calendrier.heureRdD = heuresList.findIndex(heure => heure === calendrierData.heureKey);; // Index dans heuresList
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier) ); game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier));
this.rebuildListeNombreAstral(); this.rebuildListeNombreAstral();
@ -343,36 +366,36 @@ export class RdDCalendrier extends Application {
/* -------------------------------------------- */ /* -------------------------------------------- */
async showCalendarEditor() { async showCalendarEditor() {
let calendrierData = duplicate( this.fillCalendrierData( ) ); let calendrierData = duplicate(this.fillCalendrierData());
if ( this.editeur == undefined ) { if (this.editeur == undefined) {
calendrierData.jourMoisOptions = Array(28).fill().map((item, index) => 1 + index); calendrierData.jourMoisOptions = Array(28).fill().map((item, index) => 1 + index);
calendrierData.heuresOptions = [0, 1]; calendrierData.heuresOptions = [0, 1];
calendrierData.minutesOptions = Array(120).fill().map((item, index) => 0 + index); 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 ); let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-editor-template.html', calendrierData);
this.editeur = new RdDCalendrierEditeur(html, this, calendrierData ) this.editeur = new RdDCalendrierEditeur(html, this, calendrierData)
} }
this.editeur.updateData( calendrierData ); this.editeur.updateData(calendrierData);
this.editeur.render(true); this.editeur.render(true);
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
async showAstrologieEditor() { async showAstrologieEditor() {
let calendrierData = duplicate( this.fillCalendrierData( ) ); let calendrierData = duplicate(this.fillCalendrierData());
let astrologieArray = []; let astrologieArray = [];
for (let astralData of this.listeNombreAstral ) { for (let astralData of this.listeNombreAstral) {
astralData.humanDate = this.getDateFromIndex( astralData.index ); astralData.humanDate = this.getDateFromIndex(astralData.index);
for (let vf of astralData.valeursFausses) { for (let vf of astralData.valeursFausses) {
let actor = game.actors.get( vf.actorId); let actor = game.actors.get(vf.actorId);
console.log(vf.actorId, actor ); console.log(vf.actorId, actor);
vf.actorName = (actor) ? actor.name : "Inconnu"; vf.actorName = (actor) ? actor.name : "Inconnu";
} }
astrologieArray.push( duplicate(astralData ) ); astrologieArray.push(duplicate(astralData));
} }
//console.log("ASTRO", astrologieArray); //console.log("ASTRO", astrologieArray);
calendrierData.astrologieData = astrologieArray; calendrierData.astrologieData = astrologieArray;
let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-astrologie-template.html', calendrierData ); let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-astrologie-template.html', calendrierData);
let astrologieEditeur = new RdDAstrologieEditeur(html, this, calendrierData ) let astrologieEditeur = new RdDAstrologieEditeur(html, this, calendrierData)
astrologieEditeur.updateData( calendrierData ); astrologieEditeur.updateData(calendrierData);
astrologieEditeur.render(true); astrologieEditeur.render(true);
} }
@ -385,56 +408,19 @@ export class RdDCalendrier extends Application {
this.updateDisplay(); this.updateDisplay();
html.find('#calendar-btn-1min').click(ev => { html.find('.calendar-btn').click(ev => this.onCalendarButton(ev));
ev.preventDefault();
this.incrementTime(1); html.find('.calendar-btn-edit').click(ev => {
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 => {
ev.preventDefault(); ev.preventDefault();
this.showCalendarEditor(); this.showCalendarEditor();
}); });
html.find('#astrologie-btn-edit').click(ev => {
html.find('.astrologie-btn-edit').click(ev => {
ev.preventDefault(); ev.preventDefault();
this.showAstrologieEditor(); this.showAstrologieEditor();
}); });
html.find('#calendar--move-handle').mousedown(ev => { html.find('#calendar-move-handle').mousedown(ev => {
ev.preventDefault(); ev.preventDefault();
ev = ev || window.event; ev = ev || window.event;
let isRightMB = false; let isRightMB = false;
@ -479,26 +465,26 @@ export class RdDCalendrier extends Application {
elmnt.onmousedown = null; elmnt.onmousedown = null;
document.onmouseup = null; document.onmouseup = null;
document.onmousemove = null; document.onmousemove = null;
let xPos = (elmnt.offsetLeft - pos1) > window.innerWidth ? window.innerWidth-200 : (elmnt.offsetLeft - pos1); 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 yPos = (elmnt.offsetTop - pos2) > window.innerHeight - 20 ? window.innerHeight - 100 : (elmnt.offsetTop - pos2)
xPos = xPos < 0 ? 0 : xPos; xPos = xPos < 0 ? 0 : xPos;
yPos = yPos < 0 ? 0 : yPos; 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.top = (yPos) + "px";
elmnt.style.left = (xPos) + "px"; elmnt.style.left = (xPos) + "px";
} }
game.system.rdd.calendrier.calendrierPos.top = yPos; game.system.rdd.calendrier.calendrierPos.top = yPos;
game.system.rdd.calendrier.calendrierPos.left = xPos; game.system.rdd.calendrier.calendrierPos.left = xPos;
if ( game.user.isGM) { if (game.user.isGM) {
game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos) ); game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos));
} }
} }
} }
} else if(isRightMB){ } else if (isRightMB) {
game.system.rdd.calendrier.calendrierPos.top = 200; game.system.rdd.calendrier.calendrierPos.top = 200;
game.system.rdd.calendrier.calendrierPos.left = 200; game.system.rdd.calendrier.calendrierPos.left = 200;
if ( game.user.isGM) { if (game.user.isGM) {
game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos) ); game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos));
} }
this.setPos(game.system.rdd.calendrier.calendrierPos); this.setPos(game.system.rdd.calendrier.calendrierPos);
} }

118
styles/simple.css
View File

@ -1058,7 +1058,7 @@ ul, li {
position: absolute; position: absolute;
display: block; display: block;
} }
#calendar{ .calendar{
min-width: 150px; min-width: 150px;
grid-row: 1; grid-row: 1;
grid-column: 1; grid-column: 1;
@ -1072,7 +1072,7 @@ ul, li {
font-family: "GoudyAcc"; font-family: "GoudyAcc";
z-index: 100; z-index: 100;
} }
#calendar-hdr{ .calendar-hdr{
display: grid; display: grid;
font-size: 1rem; font-size: 1rem;
margin: 3px; margin: 3px;
@ -1091,7 +1091,7 @@ ul, li {
font-size: 1.10rem; font-size: 1.10rem;
opacity: 90; opacity: 90;
} }
#calendar--move-handle { #calendar-move-handle {
font-family: "GoudyAcc"; font-family: "GoudyAcc";
font-size: 13px; font-size: 13px;
line-height: 1; line-height: 1;
@ -1101,7 +1101,7 @@ ul, li {
border: none; border: none;
flex: 1; flex: 1;
} }
#calendar-date{ .calendar-date{
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
float: left; float: left;
@ -1112,11 +1112,11 @@ ul, li {
color: #CCC; color: #CCC;
cursor: pointer; cursor: pointer;
} }
#calendar-date, .calendar-date,
#calendar-date-num { .calendar-date-num {
transition: 0.2s; transition: 0.2s;
} }
#calendar-date-num { .calendar-date-num {
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
float: left; float: left;
@ -1128,18 +1128,18 @@ ul, li {
opacity: 0; opacity: 0;
cursor: pointer; cursor: pointer;
} }
#calendar-heure-img{ .calendar-heure-img{
width: 24px; width: 24px;
height: 24px; height: 24px;
flex-grow: 0; flex-grow: 0;
border-width: 0; border-width: 0;
opacity: 90; opacity: 90;
color: #CCC; color: rgba(255, 255, 255, 0.5);
} }
#calendar-hdr:hover #calendar-date { .calendar-hdr:hover .calendar-date {
opacity: 0; opacity: 0;
} }
#calendar-hdr:hover #calendar-date-num{ .calendar-hdr:hover .calendar-date-num{
opacity: 1; opacity: 1;
} }
.calendar-container{ .calendar-container{
@ -1161,132 +1161,86 @@ ul, li {
margin: 2px; margin: 2px;
grid-row-gap: 3px; grid-row-gap: 3px;
} }
#astrologie-btn-edit, .astrologie-btn-edit,
#calendar-btn-edit{ .calendar-btn-edit{
grid-row: 1; grid-row: 1;
grid-column: 1; grid-column: 1;
margin: auto; margin: auto;
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);
} }
#astrologie-btn-edit:hover, .astrologie-btn-edit:hover,
#calendar-btn-edit:hover { .calendar-btn-edit:hover {
color: #FFF; color: #FFF;
border: 0px solid #000; border: 0px solid #000;
cursor: pointer; 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-row: 1;
grid-column: 1; grid-column: 1;
margin: auto;
color: rgba(0, 0, 0, 0.7);
} }
#calendar-btn-5min{ .calendar-5min{
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
margin: auto;
color: rgba(0, 0, 0, 0.7);
} }
#calendar-btn-10min{ .calendar-10min{
grid-row: 2; grid-row: 2;
grid-column: 1; grid-column: 1;
margin-left: 10px; margin-left: 10px;
color: rgba(0, 0, 0, 0.7);
} }
#calendar-btn-20min{ .calendar-20min{
grid-row: 2; grid-row: 2;
grid-column: 2; grid-column: 2;
margin-left: 10px; margin-left: 10px;
color: rgba(0, 0, 0, 0.7);
} }
#calendar-btn-lyre{ .calendar-lyre{
grid-row: 1; grid-row: 1;
grid-column: 1; grid-column: 1;
height: fit-content; height: fit-content;
text-align: center; text-align: center;
vertical-align: center; vertical-align: center;
color: rgba(0, 0, 0, 0.7);
} }
#calendar-btn-vaisseau{ .calendar-vaisseau{
grid-row: 1; grid-row: 1;
grid-column: 2; grid-column: 2;
height: fit-content; height: fit-content;
text-align: center; text-align: center;
vertical-align: center; vertical-align: center;
color: rgba(0, 0, 0, 0.7);
} }
#calendar-btn-30min{ .calendar-30min{
grid-row: 2; grid-row: 2;
grid-column: 1; grid-column: 1;
height: fit-content; height: fit-content;
text-align: center; text-align: center;
vertical-align: center; vertical-align: center;
color: rgba(0, 0, 0, 0.7);
} }
#calendar-btn-1heure{ .calendar-1heure{
grid-row: 2; grid-row: 2;
grid-column: 2; grid-column: 2;
height: fit-content; height: fit-content;
text-align: center; text-align: center;
vertical-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; color: #FFF;
border: 0px solid #000; border: 0px solid #000;
cursor: pointer; 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{ .calendar-weekday-time{
display: grid; display: grid;
float: left; float: left;
@ -1296,7 +1250,7 @@ ul, li {
margin: auto; margin: auto;
color: #CCC; color: #CCC;
} }
#calendar-weekday{ .calendar-weekday{
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
text-align: center; text-align: center;

30
templates/calendar-template.html
View File

@ -1,34 +1,34 @@
<div id="calendar-time-container"> <div id="calendar-time-container">
<div id="calendar"> <div class="calendar">
{{#if isGM}} {{#if isGM}}
<i id="calendar-btn-edit" class="fas fa-cog" title="Editer"></i> <i class="calendar-btn-edit fas fa-cog" title="Editer"></i>
<i id="astrologie-btn-edit" class="fas fa-cog" title="Astrologie"></i> <i class="astrologie-btn-edit fas fa-cog" title="Astrologie"></i>
{{/if}} {{/if}}
<div id="calendar-hdr"> <div class="calendar-hdr">
<p id="calendar--move-handle" class="calendar-date-rdd" title="Deplacer">Jour {{jourMois}} de {{nomMois}} ({{nomSaison}})</p> <p id="calendar-move-handle" class="calendar-date-rdd" title="Deplacer">Jour {{jourMois}} de {{nomMois}} ({{nomSaison}})</p>
</div> </div>
<div class="calendar-container"> <div class="calendar-container">
{{#if isGM}} {{#if isGM}}
<div class="calendar-btn-container-left"> <div class="calendar-btn-container-left">
<i id="calendar-btn-1min" class="fas fa-angle-right" title="Avancer de 1 minute"></i> <i class="calendar-btn calendar-1min fas fa-angle-right" data-calendar-avance="1" title="Avancer de 1 minute"></i>
<i id="calendar-btn-5min" class="fas fa-angle-double-right" title="Avancer de 5 minutes"></i> <i class="calendar-btn calendar-5min fas fa-angle-double-right" data-calendar-avance="5" title="Avancer de 5 minutes"></i>
<i id="calendar-btn-10min" class="fas fa-play" title="Avancer de 10 minutes"></i> <i class="calendar-btn calendar-10min fas fa-play" data-calendar-avance="10" title="Avancer de 10 minutes"></i>
<i id="calendar-btn-20min" class="fas fa-step-forward" title="Avancer de 20 minutes"></i> <i class="calendar-btn calendar-20min fas fa-step-forward" data-calendar-avance="20" title="Avancer de 20 minutes"></i>
</div> </div>
{{else}} {{else}}
<div class="calendar-btn-container-left"> <div class="calendar-btn-container-left">
</div> </div>
{{/if}} {{/if}}
<div class="calendar-weekday-time"> <div class="calendar-weekday-time">
<p id="calendar-weekday"><img id="calendar-heure-img" src="{{iconHeure}}" alt="{{nomHeure}}"/>&nbsp;<span id="calendar-heure-texte">{{nomHeure}}</span></p> <p class="calendar-weekday"><img class="calendar-heure-img" src="{{iconHeure}}" alt="{{nomHeure}}"/>&nbsp;<span class="calendar-heure-texte">{{nomHeure}}</span></p>
<span class="calendar-time isGM"><p class="calendar-time-disp" id="calendar-time" title="Start/Stop">{{heuresRelative}}:{{minutesRelative}}</p></span> <span class="calendar-time isGM"><p class="calendar-time-disp">{{minutesRelative}} minutes</p></span>
</div> </div>
{{#if isGM}} {{#if isGM}}
<div class="calendar-btn-container-right"> <div class="calendar-btn-container-right">
<i id="calendar-btn-30min" class="fas fa-forward" title="Avancer de 30 minutes" ></i> <i class="calendar-btn calendar-30min fas fa-forward" data-calendar-avance="30" title="Avancer de 30 minutes" ></i>
<i id="calendar-btn-1heure" class="fas fa-fast-forward" title="Avancer d'1 heure" ></i> <i class="calendar-btn calendar-1heure fas fa-fast-forward" data-calendar-avance="120" title="Avancer d'1 heure" ></i>
<i id="calendar-btn-vaisseau" class="fas fa-sun" title="Avancer au Vaisseau"></i> <i class="calendar-btn calendar-vaisseau fas fa-sun" data-calendar-set="0" title="Avancer au Vaisseau"></i>
<i id="calendar-btn-lyre" class="fas fa-moon" title="Avancer à Lyre"></i> <i class="calendar-btn calendar-lyre fas fa-moon" data-calendar-set="6" title="Avancer à Lyre"></i>
</div> </div>
{{/if}} {{/if}}
</div> </div>