Couleurs du calendrier

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

@@ -9,7 +9,8 @@ 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' },
+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' },
@@ -22,7 +23,8 @@ const heuresDef = { "vaisseau": { label: "Vaisseau", lettreFont: 'v', saison: "p
   "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"},
+const saisonsDef = {
+  "printemps": { label: "Printemps" },
   "ete": { label: "Eté" },
   "automne": { label: "Automne" },
   "hiver": { label: "Hiver" }
@@ -147,10 +149,23 @@ export class RdDCalendrier extends Application {
     }
     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) {
       this.calendrier.minutesRelative -= 120;
       this.calendrier.heureRdD += 1;
@@ -212,6 +227,7 @@ export class RdDCalendrier extends Application {
     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;
     return data;
@@ -233,7 +249,8 @@ export class RdDCalendrier extends Application {
       let rolled = await RdDResolutionTable.rollData({
         caracValue: request.carac_vue,
         finalLevel: niveau,
-        showDice: false});
+        showDice: false
+      });
       let nbAstral = this.getNombreAstral(request.date);
       let nbAstralFaux = nbAstral;
       request.isValid = true;
@@ -262,16 +279,14 @@ export class RdDCalendrier extends Application {
   }
 
   /* -------------------------------------------- */
-  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)
+      switch (ecartChance) {
-      {
         case 0: return 4;
         case 4: case 8: return 2;
         case 6: return -4;
@@ -322,10 +337,18 @@ export class RdDCalendrier extends Application {
     if (game.user.isGM) {
       dateHTML = dateHTML + " - NA: " + this.getCurrentNombreAstral();
     }
-    document.getElementById("calendar--move-handle").innerHTML = dateHTML;
+    for (let handle of document.getElementsByClassName("calendar-move-handle")) {
-    document.getElementById("calendar-heure-texte").innerHTML = `${data.nomHeure}`;
+      handle.innerHTML = dateHTML;
-    document.getElementById("calendar-time").innerHTML = `${data.minutesRelative} min.`;
+    }
-    document.getElementById("calendar-heure-img").src = data.iconHeure;
+    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;
+    }
   }
 
   /* -------------------------------------------- */
@@ -385,56 +408,19 @@ export class RdDCalendrier extends Application {
 
     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();
       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;

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,
-#calendar-date-num {
+.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,
+.astrologie-btn-edit,
-#calendar-btn-edit{
+.calendar-btn-edit{
 	grid-row: 1;
 	grid-column: 1;
 	margin: auto;
 	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;
 	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; 

templates/calendar-template.html

@@ -1,34 +1,34 @@
 <div id="calendar-time-container">
-	<div id="calendar">
+	<div class="calendar">
     {{#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}}
-		<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 class="calendar-container">
       {{#if isGM}}
 			<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>
       {{else}}
       <div class="calendar-btn-container-left">
 			</div>
       {{/if}}
 			<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>
       {{#if isGM}}
 			<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>
       {{/if}}
 		</div>