Ajout d'une horloge analogique

Amélioration de la fenêtre calendrier:
* plus compacte
* horloge analogique
* normalement compatible pop-out
* minimisable (juste la barre de titre)

module/actor.js

@@ -33,7 +33,7 @@ import { RdDRencontre } from "./item/rencontre.js";
 import { Targets } from "./targets.js";
 import { DialogRepos } from "./sommeil/dialog-repos.js";
 import { RdDBaseActor } from "./actor/base-actor.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
 import { RdDItemBlessure } from "./item/blessure.js";
 import { AppAstrologie } from "./sommeil/app-astrologie.js";
 

module/dialog-chronologie.js

@@ -1,7 +1,7 @@
 import { SYSTEM_RDD } from "./constants.js";
 import { Grammar } from "./grammar.js";
 import { HtmlUtility } from "./html-utility.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
 
 
 const LATEST_USED_JOURNAL_ID = "chronologie-dernier-journal";

module/item-sheet.js

@@ -10,7 +10,7 @@ import { SYSTEM_RDD } from "./constants.js";
 import { RdDSheetUtility } from "./rdd-sheet-utility.js";
 import { SystemCompendiums } from "./settings/system-compendiums.js";
 import { Misc } from "./misc.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
 
 /**
  * Extend the basic ItemSheet for RdD specific items

module/item.js

@@ -2,7 +2,7 @@ import { DialogItemVente } from "./dialog-item-vente.js";
 import { Grammar } from "./grammar.js";
 import { Misc } from "./misc.js";
 import { RdDHerbes } from "./rdd-herbes.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
 import { RdDUtility } from "./rdd-utility.js";
 import { SystemCompendiums } from "./settings/system-compendiums.js";
 import { RdDRaretes } from "./item/raretes.js";

module/item/blessure.js

@@ -1,6 +1,6 @@
 import { RdDItem } from "../item.js";
 import { Misc } from "../misc.js";
-import { RdDTimestamp } from "../rdd-timestamp.js";
+import { RdDTimestamp } from "../time/rdd-timestamp.js";
 
 const BASE_TACHE_SOIN_BLESSURE = {
   type: "tache",

module/item/maladie.js

@@ -1,6 +1,6 @@
 import { RdDItem } from "../item.js";
 import { Misc } from "../misc.js";
-import { RdDTimestamp } from "../rdd-timestamp.js";
+import { RdDTimestamp } from "../time/rdd-timestamp.js";
 
 export class RdDItemMaladie extends RdDItem {
 

module/item/signedraconique.js

@@ -2,7 +2,7 @@ import { RdDItem, defaultItemImg } from "../item.js";
 import { Misc } from "../misc.js";
 import { RdDDice } from "../rdd-dice.js";
 import { RdDRollTables } from "../rdd-rolltables.js";
-import { RdDTimestamp } from "../rdd-timestamp.js";
+import { RdDTimestamp } from "../time/rdd-timestamp.js";
 import { TMRType, TMRUtility } from "../tmr-utility.js";
 
 const tableSignesIndicatifs = [

module/migrations.js

@@ -3,7 +3,7 @@ import { LOG_HEAD, SYSTEM_RDD } from "./constants.js";
 import { Grammar } from "./grammar.js";
 import { Monnaie } from "./item-monnaie.js";
 import { RdDItem } from "./item.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
 import { RdDRaretes } from "./item/raretes.js";
 
 class Migration {

module/misc.js

@@ -239,4 +239,15 @@ export class Misc {
     }
     return subset;
   }
+
+  static cssRotation(angle) {
+    const rotation = `rotate(${angle}deg)`;
+    return {
+      'transform': rotation,
+      '-ms-transform': rotation,
+      '-moz-transform': rotation,
+      '-webkit-transform': rotation,
+      '-o-transform': rotation
+    };
+  }
 }

module/rdd-herbes.js

@@ -1,6 +1,6 @@
 import { Grammar } from "./grammar.js";
 import { SystemCompendiums } from "./settings/system-compendiums.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
 
 /* -------------------------------------------- */
 export class RdDHerbes extends Item {

module/rdd-main.js

@@ -4,8 +4,8 @@ import { Migrations } from './migrations.js';
 import { RdDUtility } from "./rdd-utility.js";
 import { TMRUtility } from "./tmr-utility.js";
 import { TMRRencontres } from "./tmr-rencontres.js";
-import { RdDCalendrier } from "./rdd-calendrier.js";
+import { RdDCalendrier } from "./time/rdd-calendrier.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
 import { DialogChronologie } from "./dialog-chronologie.js";
 
 import { RdDResolutionTable } from "./rdd-resolution-table.js";
@@ -181,6 +181,7 @@ export class SystemReveDeDragon {
 
     // préparation des différents modules
     RdDTimestamp.init();
+    RdDCalendrier.init();
     SystemCompendiums.init();
     DialogChronologie.init();
     ReglesOptionelles.init();
@@ -216,25 +217,6 @@ export class SystemReveDeDragon {
       default: "avant-encaissement"
     });
 
-    /* -------------------------------------------- */
-    game.settings.register(SYSTEM_RDD, "liste-nombre-astral", {
-      name: "liste-nombre-astral",
-      scope: "world",
-      config: false,
-      default: [],
-      type: Object
-    });
-
-    /* -------------------------------------------- */
-    game.settings.register(SYSTEM_RDD, "calendrier-pos", {
-      name: "calendrierPos",
-      scope: "client",
-      config: false,
-      default: RdDCalendrier.createCalendrierPos(),
-      type: Object
-    });
-
-
     /* -------------------------------------------- */
     game.settings.register(SYSTEM_RDD, "supprimer-dialogues-combat-chat", {
       name: "Supprimer les dialogues de combat",
@@ -280,9 +262,11 @@ export class SystemReveDeDragon {
       let sidebar = document.getElementById("sidebar");
       sidebar.style.width = "min-content";
     }
+    game.system.rdd.calendrier = new RdDCalendrier();
     if (Misc.isUniqueConnectedGM()) {
-      game.system.rdd.calendrier = new RdDCalendrier();
       new Migrations().migrate();
+      this.messageDeBienvenue();
+      this.registerUsageCount(SYSTEM_RDD);
     }
 
     StatusEffects.onReady();
@@ -290,8 +274,7 @@ export class SystemReveDeDragon {
     RdDDice.onReady();
     /* -------------------------------------------- */
     /* Affiche/Init le calendrier */
-    game.system.rdd.calendrier = new RdDCalendrier().display();
+    game.system.rdd.calendrier.display();
-
     // Avertissement si joueur sans personnage
     if (!game.user.isGM && game.user.character == undefined) {
       ui.notifications.info("Attention ! Vous n'êtes connecté à aucun personnage !");
@@ -300,10 +283,6 @@ export class SystemReveDeDragon {
         user: game.user.id
       });
     }
-    if (Misc.isUniqueConnectedGM()) {
-      this.messageDeBienvenue();
-      this.registerUsageCount(SYSTEM_RDD);
-    }
   }
 
   /* -------------------------------------------- */

module/rdd-tmr-dialog.js

@@ -16,8 +16,7 @@ import { ReglesOptionelles } from "./settings/regles-optionelles.js";
 import { RdDDice } from "./rdd-dice.js";
 import { STATUSES } from "./settings/status-effects.js";
 import { RdDRencontre } from "./item/rencontre.js";
-import { RdDCalendrier } from "./rdd-calendrier.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
 
 /* -------------------------------------------- */
 

module/rdd-utility.js

@@ -13,7 +13,7 @@ import { RdDNameGen } from "./rdd-namegen.js";
 import { RdDConfirm } from "./rdd-confirm.js";
 import { RdDItemCompetence } from "./item-competence.js";
 import { RdDResolutionTable } from "./rdd-resolution-table.js";
-import { RdDTimestamp } from "./rdd-timestamp.js";
+import { RdDTimestamp } from "./time/rdd-timestamp.js";
 import { RdDRaretes } from "./item/raretes.js";
 
 /* -------------------------------------------- */
@@ -196,6 +196,7 @@ export class RdDUtility {
       'systems/foundryvtt-reve-de-dragon/templates/enum-tmr-effet.html',
       // Partials
       'systems/foundryvtt-reve-de-dragon/templates/tirage/liste-resultats-recherche.hbs',
+      'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs',
       'systems/foundryvtt-reve-de-dragon/templates/common/timestamp.hbs',
       'systems/foundryvtt-reve-de-dragon/templates/common/periodicite.hbs',
       'systems/foundryvtt-reve-de-dragon/templates/common/enum-duree.hbs',
@@ -231,9 +232,6 @@ export class RdDUtility {
       'systems/foundryvtt-reve-de-dragon/templates/sommeil/astrologie-gardien.hbs',
       'systems/foundryvtt-reve-de-dragon/templates/sommeil/astrologie-joueur.hbs',
       'systems/foundryvtt-reve-de-dragon/templates/sommeil/astrologie-theme.hbs',
-      // Calendrier
-      'systems/foundryvtt-reve-de-dragon/templates/calendar-template.html',
-      'systems/foundryvtt-reve-de-dragon/templates/calendar-editor-template.html',
       // HUD
       'systems/foundryvtt-reve-de-dragon/templates/hud-actor-init.html',
       'systems/foundryvtt-reve-de-dragon/templates/hud-actor-attaque.html',

module/sommeil/app-astrologie.js

@@ -1,6 +1,6 @@
 import { SYSTEM_RDD } from "../constants.js";
 import { Misc } from "../misc.js";
-import { RDD_MINUTES_PAR_HEURES, RDD_MINUTES_PAR_JOUR, RdDTimestamp } from "../rdd-timestamp.js";
+import { RdDTimestamp } from "../time/rdd-timestamp.js";
 
 export const APP_ASTROLOGIE_REFRESH = `${SYSTEM_RDD}-refresh-astrologie`
 
@@ -22,6 +22,7 @@ export class AppAstrologie extends Application {
       title: "Astrologie",
       width: 'fit-content',
       height: 'fit-content',
+      classes: ['calendar-astrologie'],
       popOut: true,
       resizable: false
     });
@@ -155,30 +156,19 @@ export class AppAstrologie extends Application {
     RdDTimestamp.definitions().forEach(dh => {
       const ajustement = RdDTimestamp.ajustementAstrologiqueHeure(heureNaissance, chiffreAstral, dh.heure + 1);
       const txtAjustement = ajustement == 0 ? '' : Misc.toSignedString(ajustement);
-      this.html.find(`div.astro-ajustement.heure-${dh.hh}`).text(txtAjustement)
+      this.html.find(`div.horloge-ajustement.heure-${dh.hh}`).text(txtAjustement)
     });
 
     this.html.find(`select[name="signe-astral"]`).val(this.appData.theme.signeAstral.key)
     this.html.find(`select[name="signe-naissance"]`).val(this.appData.theme.signeNaissance.key)
 
     const angleAstrologie = ((chiffreAstral + heureNaissance) * 30) % 360 - 45;
-    this.html.find(`div.astro-roue div.astro-disque img`).css(this.cssRotation(angleAstrologie));
+    this.html.find(`div.horloge-roue div.disque-astro img`).css(Misc.cssRotation(angleAstrologie));
 
     const timestamp = game.system.rdd.calendrier.getTimestamp();
 
-    this.html.find(`div.astro-roue div.astro-horloge-heure img`).css(this.cssRotation(timestamp.angleHeure));
+    this.html.find(`div.horloge-roue div.horloge-aiguille-heure img`).css(Misc.cssRotation(timestamp.angleHeure));
-    this.html.find(`div.astro-roue div.astro-horloge-minute img`).css(this.cssRotation(timestamp.angleMinute));
+    this.html.find(`div.horloge-roue div.horloge-aiguille-minute img`).css(Misc.cssRotation(timestamp.angleMinute));
-  }
-
-  cssRotation(angleAstrologie) {
-    const rotation = `rotate(${angleAstrologie}deg)`;
-    return {
-      'transform': rotation,
-      '-ms-transform': rotation,
-      '-moz-transform': rotation,
-      '-webkit-transform': rotation,
-      '-o-transform': rotation
-    };
   }
 
   requestJetAstrologie() {

module/time/rdd-calendrier-editor.js

@@ -4,7 +4,7 @@ import { RdDTimestamp } from "./rdd-timestamp.js";
  * Extend the base Dialog entity by defining a custom window to perform roll.
  * @extends {Dialog}
  */
-export class RdDCalendrierEditeur extends Dialog {
+export class RdDCalendrierEditor extends Dialog {
 
   /* -------------------------------------------- */
   constructor(html, calendrier, calendrierData) {
@@ -30,8 +30,8 @@ export class RdDCalendrierEditeur extends Dialog {
     this.html.find("input[name='calendar.annee']").val(this.calendrierData.annee);
     this.html.find("select[name='calendar.mois']").val(this.calendrierData.mois.key);
     this.html.find("select[name='calendar.heure']").val(this.calendrierData.heure.key);
-    RdDCalendrierEditeur.setLimited(this.html.find("input[name='calendar.jourDuMois']"), this.calendrierData.jourDuMois, 1, 28);
+    RdDCalendrierEditor.setLimited(this.html.find("input[name='calendar.jourDuMois']"), this.calendrierData.jourDuMois, 1, 28);
-    RdDCalendrierEditeur.setLimited(this.html.find("input[name='calendar.minute']"), this.calendrierData.minute, 0, 119);
+    RdDCalendrierEditor.setLimited(this.html.find("input[name='calendar.minute']"), this.calendrierData.minute, 0, 119);
   }
 
   static setLimited(input, init, min, max) {

module/time/rdd-calendrier.js

@@ -1,58 +1,115 @@
-import { RdDCalendrierEditeur } from "./rdd-calendrier-editeur.js";
-import { RdDResolutionTable } from "./rdd-resolution-table.js";
-import { RdDUtility } from "./rdd-utility.js";
-import { RdDDice } from "./rdd-dice.js";
-import { Misc } from "./misc.js";
-import { HIDE_DICE, SHOW_DICE, SYSTEM_RDD, SYSTEM_SOCKET_ID } from "./constants.js";
-import { DialogChronologie } from "./dialog-chronologie.js";
 import { MAX_NOMBRE_ASTRAL, RdDTimestamp, WORLD_TIMESTAMP_SETTING } from "./rdd-timestamp.js";
-import { DialogChateauDormant } from "./sommeil/dialog-chateau-dormant.js";
+import { RdDCalendrierEditor } from "./rdd-calendrier-editor.js";
-import { ReglesOptionelles } from "./settings/regles-optionelles.js";
+import { RdDResolutionTable } from "../rdd-resolution-table.js";
-import { APP_ASTROLOGIE_REFRESH, AppAstrologie } from "./sommeil/app-astrologie.js";
+import { RdDUtility } from "../rdd-utility.js";
+import { RdDDice } from "../rdd-dice.js";
+import { Misc } from "../misc.js";
+import { DialogChronologie } from "../dialog-chronologie.js";
+import { HIDE_DICE, SHOW_DICE, SYSTEM_RDD, SYSTEM_SOCKET_ID } from "../constants.js";
+import { ReglesOptionelles } from "../settings/regles-optionelles.js";
+import { DialogChateauDormant } from "../sommeil/dialog-chateau-dormant.js";
+import { APP_ASTROLOGIE_REFRESH, AppAstrologie } from "../sommeil/app-astrologie.js";
 
+const TEMPLATE_CALENDRIER = "systems/foundryvtt-reve-de-dragon/templates/time/calendar.hbs";
+
+const INITIAL_CALENDAR_POS = { top: 200, left: 200, horlogeAnalogique: true };
 /* -------------------------------------------- */
 export class RdDCalendrier extends Application {
+  static init() {
+    game.settings.register(SYSTEM_RDD, "liste-nombre-astral", {
+      name: "liste-nombre-astral",
+      scope: "world",
+      config: false,
+      default: [],
+      type: Object
+    });
 
-  static get defaultOptions() {
+    game.settings.register(SYSTEM_RDD, "calendrier-pos", {
-    return mergeObject(super.defaultOptions, {
+      name: "calendrierPos",
-      template: "systems/foundryvtt-reve-de-dragon/templates/calendar-template.html",
+      scope: "client",
-      popOut: false,
+      config: false,
-      resizable: false
+      default: INITIAL_CALENDAR_POS,
+      type: Object
     });
   }
 
-  static createCalendrierPos() {
+  static get defaultOptions() {
-    return { top: 200, left: 200 };
+    return mergeObject(super.defaultOptions, {
+      title: "Calendrier",
+      template: TEMPLATE_CALENDRIER,
+      classes: ["calendar"],
+      popOut: true,
+      resizable: false,
+      width: 'fit-content',
+      height: 'fit-content',
+    });
   }
 
   constructor() {
     super();
-    // position
-    this.calendrierPos = duplicate(game.settings.get(SYSTEM_RDD, "calendrier-pos"));
-    if (this.calendrierPos == undefined || this.calendrierPos.top == undefined) {
-      this.calendrierPos = RdDCalendrier.createCalendrierPos();
-      game.settings.set(SYSTEM_RDD, "calendrier-pos", this.calendrierPos);
-    }
-    // Calendrier
     this.timestamp = RdDTimestamp.getWorldTime();
-
     if (Misc.isUniqueConnectedGM()) { // Uniquement si GM
       RdDTimestamp.setWorldTime(this.timestamp);
       this.nombresAstraux = this.getNombresAstraux();
       this.rebuildNombresAstraux(HIDE_DICE); // Ensure always up-to-date
     }
-    console.log('RdDCalendrier.constructor()', this.timestamp, this.timestamp.toCalendrier(), this.calendrierPos, this.nombresAstraux);
     Hooks.on('updateSetting', async (setting, update, options, id) => this.onUpdateSetting(setting, update, options, id));
   }
 
-  display() {
+  get title() {
-    let templatePath = "systems/foundryvtt-reve-de-dragon/templates/calendar-template.html";
+    const calendrier = this.timestamp.toCalendrier();
-    renderTemplate(templatePath, {}).then(html => {
+    return `${calendrier.heure.label}, ${calendrier.jourDuMois} ${calendrier.mois.label} ${calendrier.annee} (${calendrier.mois.saison})`;
-      this.render(true);
+  }
+
+  savePosition() {
+    game.settings.set(SYSTEM_RDD, "calendrier-pos", {
+      top: this.position.top,
+      left: this.position.left,
+      horlogeAnalogique: this.horlogeAnalogique
     });
+  }
+
+  getSavePosition() {
+    const pos = game.settings.get(SYSTEM_RDD, "calendrier-pos");
+    if (pos?.top == undefined) {
+      return INITIAL_CALENDAR_POS;
+    }
+    this.horlogeAnalogique = pos.horlogeAnalogique;
+    return pos
+  }
+
+  setPosition(position) {
+    super.setPosition(position)
+    this.savePosition()
+  }
+
+  display() {
+    const pos = this.getSavePosition()
+    this.render(true, { left: pos.left, top: pos.top});
     return this;
   }
 
+  _getHeaderButtons() {
+    const buttons = [];
+    if (game.user.isGM) {
+      buttons.unshift({
+        class: "calendar-astrologie",
+        icon: "fa-solid fa-moon-over-sun",
+        onclick: ev => this.showAstrologieEditor()
+      },
+        {
+          class: "calendar-set-datetime",
+          icon: "fa-solid fa-calendar-pen",
+          onclick: ev => this.showCalendarEditor()
+        });
+    }
+    return buttons
+  }
+  async maximize() {
+    await super.maximize()
+    this.render(true)
+  }
+
   async onUpdateSetting(setting, update, options, id) {
     if (setting.key == SYSTEM_RDD + '.' + WORLD_TIMESTAMP_SETTING) {
       this.timestamp = RdDTimestamp.getWorldTime();
@@ -61,18 +118,35 @@ export class RdDCalendrier extends Application {
     }
   }
 
+  getData() {
+    const formData = super.getData();
+    this.fillCalendrierData(formData);
+    return formData;
+  }
+
+  /* -------------------------------------------- */
+  fillCalendrierData(formData = {}) {
+    mergeObject(formData, this.timestamp.toCalendrier());
+    formData.isGM = game.user.isGM;
+    formData.heures = RdDTimestamp.definitions()
+    formData.horlogeAnalogique = this.horlogeAnalogique;
+    return formData;
+  }
+
   /* -------------------------------------------- */
   /** @override */
   async activateListeners(html) {
     super.activateListeners(html);
     this.html = html;
-
     this.updateDisplay();
 
     this.html.find('.ajout-chronologie').click(ev => DialogChronologie.create());
-
+    this.html.find('.toggle-horloge-analogique').click(ev => this.onToggleHorlogeAnalogique())
     this.html.find('.calendar-btn').click(ev => this.onCalendarButton(ev));
-
+    this.html.find('.horloge-roue .horloge-heure').click(event => {
+      const h = this.html.find(event.currentTarget)?.data('heure');
+      this.positionnerHeure(Number(h));
+    })
     this.html.find('.calendar-set-datetime').click(ev => {
       ev.preventDefault();
       this.showCalendarEditor();
@@ -82,77 +156,14 @@ export class RdDCalendrier extends Application {
       ev.preventDefault();
       this.showAstrologieEditor();
     });
-
-    this.html.find('.calendar-title').mousedown(ev => {
-      ev.preventDefault();
-      ev = ev || window.event;
-      let isRightMB = false;
-      if ("which" in ev) { // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
-        isRightMB = ev.which == 3;
-      } else if ("button" in ev) { // IE, Opera 
-        isRightMB = ev.button == 2;
-      }
-
-      if (!isRightMB) {
-        dragElement(document.getElementById("calendar-time-container"));
-        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-
-        function dragElement(elmnt) {
-          elmnt.onmousedown = dragMouseDown;
-          function dragMouseDown(e) {
-            e = e || window.event;
-            e.preventDefault();
-            pos3 = e.clientX;
-            pos4 = e.clientY;
-
-            document.onmouseup = closeDragElement;
-            document.onmousemove = elementDrag;
-          }
-
-          function elementDrag(e) {
-            e = e || window.event;
-            e.preventDefault();
-            // calculate the new cursor position:
-            pos1 = pos3 - e.clientX;
-            pos2 = pos4 - e.clientY;
-            pos3 = e.clientX;
-            pos4 = e.clientY;
-            // set the element's new position:
-            elmnt.style.bottom = undefined
-            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 = undefined;
-            document.onmouseup = undefined;
-            document.onmousemove = undefined;
-            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)) {
-              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(SYSTEM_RDD, "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(SYSTEM_RDD, "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos));
-        }
-        this.setPos(game.system.rdd.calendrier.calendrierPos);
-      }
-    });
   }
+
+  onToggleHorlogeAnalogique() {
+    this.horlogeAnalogique = !this.horlogeAnalogique;
+    this.savePosition()
+    this.render(true)
+  }
+
   /* -------------------------------------------- */
   getNombresAstraux() {
     return game.settings.get(SYSTEM_RDD, "liste-nombre-astral") ?? [];
@@ -226,7 +237,6 @@ export class RdDCalendrier extends Application {
     });
   }
 
-  /* -------------------------------------------- */
   /**
    * 
    * @param {*} indexDate la date pour laquelle obtenir le nombre astral. Si undefined, on prend la date du jour
@@ -281,6 +291,7 @@ export class RdDCalendrier extends Application {
     this.timestamp = newTimestamp;
     await this.rebuildNombresAstraux();
     this.updateDisplay();
+    this.display();
   }
 
   /* -------------------------------------------- */
@@ -295,12 +306,14 @@ export class RdDCalendrier extends Application {
       this.positionnerHeure(Number(calendarSet.value));
     }
     this.updateDisplay();
-    Hooks.callAll(APP_ASTROLOGIE_REFRESH);
   }
   
   /* -------------------------------------------- */
   async incrementTime(minutes = 0) {
-    await this.setNewTimestamp(this.timestamp.addMinutes(minutes));
+    if (game.user.isGM) {
+      await this.setNewTimestamp(this.timestamp.addMinutes(minutes));
+      Hooks.callAll(APP_ASTROLOGIE_REFRESH);
+    }
   }
   
   /* -------------------------------------------- */
@@ -310,17 +323,13 @@ export class RdDCalendrier extends Application {
   
   /* -------------------------------------------- */
   async positionnerHeure(heure) {
-    const indexDate = this.timestamp.indexDate;
+    if (game.user.isGM) {
-    const addDay = this.timestamp.heure < heure ? 0 : 1;
+      const indexDate = this.timestamp.indexDate;
-    const newTimestamp = new RdDTimestamp({ indexDate: indexDate + addDay }).addHeures(heure);
+      const addDay = this.timestamp.heure < heure ? 0 : 1;
-    await this.setNewTimestamp(newTimestamp)
+      const newTimestamp = new RdDTimestamp({ indexDate: indexDate + addDay }).addHeures(heure);
-  }
+      await this.setNewTimestamp(newTimestamp)
-
+      Hooks.callAll(APP_ASTROLOGIE_REFRESH);
-  /* -------------------------------------------- */
+    }
-  fillCalendrierData(formData = {}) {
-    mergeObject(formData, this.timestamp.toCalendrier());
-    formData.isGM = game.user.isGM;
-    return formData;
   }
   
   /* -------------------------------------------- */
@@ -376,14 +385,14 @@ export class RdDCalendrier extends Application {
   }
 
   addNbAstralIncorect(actorId, date, nbAstral) {
-    let astralData = this.nombresAstraux.find((nombreAstral, i) => nombreAstral.index == date);
+    const astralData = this.nombresAstraux.find((nombreAstral, i) => nombreAstral.index == date);
     astralData.valeursFausses.push({ actorId: actorId, nombreAstral: nbAstral });
     game.settings.set(SYSTEM_RDD, "liste-nombre-astral", this.nombresAstraux);
   }
 
   /* -------------------------------------------- */
   getAjustementAstrologique(heureNaissance, name = undefined) {
-    let defHeure = RdDTimestamp.findHeure(heureNaissance);
+    const defHeure = RdDTimestamp.findHeure(heureNaissance);
     if (defHeure) {
       return RdDTimestamp.ajustementAstrologiqueHeure(defHeure.heure, this.getNombreAstral(), this.timestamp.heure);
     }
@@ -396,54 +405,22 @@ export class RdDCalendrier extends Application {
     return 0;
   }
 
-  /* -------------------------------------------- */
-  getData() {
-    let formData = super.getData();
-    this.fillCalendrierData(formData);
-    this.setPos(this.calendrierPos);
-    return formData;
-  }
-
-  /* -------------------------------------------- */
-  setPos(pos) {
-    return new Promise(resolve => {
-      function check() {
-        let elmnt = document.getElementById("calendar-time-container");
-        if (elmnt) {
-          elmnt.style.bottom = undefined;
-          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();
-        } else {
-          setTimeout(check, 30);
-        }
-      }
-      check();
-    });
-  }
-
   /* -------------------------------------------- */
   updateDisplay() {
-    let calendrier = this.fillCalendrierData();
+    const calendrier = this.fillCalendrierData();
-    // Rebuild text du calendrier
+    for (const heure of document.getElementsByClassName("calendar-heure-texte")) {
-    let dateHTML = `${calendrier.jourDuMois} ${calendrier.mois.label} (${calendrier.mois.saison}) de l'année ${calendrier.annee}`
-    if (game.user.isGM) {
-      dateHTML = dateHTML + "<br>Nombre Astral: " + (this.getNombreAstral() ?? "?");
-    }
-    for (let handle of document.getElementsByClassName("calendar-title")) {
-      handle.innerHTML = dateHTML;
-    }
-    for (let heure of document.getElementsByClassName("calendar-heure-texte")) {
       heure.innerHTML = calendrier.heure.label;
     }
     for (const minute of document.getElementsByClassName("calendar-minute-texte")) {
       minute.innerHTML = `${calendrier.minute} minutes`;
     }
-    for (const heureImg of document.getElementsByClassName("calendar-heure-img")) {
+    this.postionnerAiguilles()
-      heureImg.src = calendrier.heure.icon;
+  }
-    }
+
+  postionnerAiguilles() {
+    const timestamp = this.getTimestamp();
+    this.html.find(`div.horloge-roue div.horloge-aiguille-heure img`).css(Misc.cssRotation(timestamp.angleHeure));
+    this.html.find(`div.horloge-roue div.horloge-aiguille-minute img`).css(Misc.cssRotation(timestamp.angleMinute));
   }
 
   /* -------------------------------------------- */
@@ -460,10 +437,10 @@ export class RdDCalendrier extends Application {
 
   /* -------------------------------------------- */
   async showCalendarEditor() {
-    let calendrierData = this.fillCalendrierData();
+    const calendrierData = this.fillCalendrierData();
     if (this.editeur == undefined) {
-      let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-editor-template.html', calendrierData);
+      const html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/time/calendar-editor.hbs', calendrierData);
-      this.editeur = new RdDCalendrierEditeur(html, this, calendrierData)
+      this.editeur = new RdDCalendrierEditor(html, this, calendrierData)
     }
     this.editeur.updateData(calendrierData);
     this.editeur.render(true);

module/time/rdd-timestamp.js

@@ -1,7 +1,7 @@
-import { SHOW_DICE, SYSTEM_RDD, SYSTEM_SOCKET_ID } from "./constants.js";
+import { SHOW_DICE, SYSTEM_RDD } from "../constants.js";
-import { Grammar } from "./grammar.js";
+import { Grammar } from "../grammar.js";
-import { Misc } from "./misc.js";
+import { Misc } from "../misc.js";
-import { RdDDice } from "./rdd-dice.js";
+import { RdDDice } from "../rdd-dice.js";
 
 export const WORLD_TIMESTAMP_SETTING = "calendrier";
 
@@ -47,7 +47,6 @@ const FORMULES_PERIODE = [
   { code: 'jour', label: "Jours", calcul: async (t, nombre) => t.addJours(nombre) },
 ]
 
-
 export class RdDTimestamp {
 
   static init() {
@@ -229,7 +228,6 @@ export class RdDTimestamp {
     this.indexMinute = indexMinute ?? 0
   }
 
-
   /**
    * Convertit le timestamp en une structure avec les informations utiles
    * pour afficher la date et l'heure

styles/simple.css

@@ -876,120 +876,29 @@ form.rdddialogchrono input[type=datetime-local] {
   color: var(--color-text-dark-primary);
   border-radius: 3px;
 }
-div.theme-astral{
+.app-calendar-astrologie div.theme-astral{
   width: 14rem;
   margin: 0.4rem;
 }
-form.dialog-astro {
+
-  width: 17rem;
+.app-calendar-astrologie div.horloge-roue {
-}
-div.astro-roue {
   position: relative;
   left: calc(50% - 6.5rem);
   width: 13rem;
   height: 13rem;
 }
-div.astro-roue div.astro-heure {
+
+.app-calendar-astrologie div.horloge-roue div.horloge-heure {
   position: absolute;
   width: 1.8rem;
   height: 1.8rem;
 }
 
-div.astro-roue div.astro-cercle1 {
+.app-calendar-astrologie div.horloge-roue div.horloge-heure img.horloge-heure-img {
-  position: absolute;
-  background: var(--gradient-daylight);
-  border: 0.2rem solid rgba(100, 45, 124, 0.6);
-  border-radius: calc(6rem);
-  top: calc(50% - 6rem);
-  left: calc(50% - 6rem);
-  width: calc(100% - 1rem);
-  height: calc(100% - 1rem);
-}
-div.astro-roue div.astro-cercle2 {
-  position: absolute;
-  border: 0.1rem solid rgba(100, 45, 124, 0.4);
-  border-radius: calc(6.1rem);
-  top: calc(50% - 4.5rem);
-  left: calc(50% - 4.5rem);
-  width: calc(100% - 4rem);
-  height: calc(100% - 4rem);
-}
-div.astro-roue div.astro-disque {
-  position: absolute;
-  border: none;
-  top: calc(50% - 3.4rem);
-  left: calc(50% - 3.4rem);
-  width: calc(100% - 6.2rem);
-  height: calc(100% - 6.2rem);
-}
-div.astro-roue div.astro-horloge-heure {
-  position: absolute;
-  border: none;
-  top: calc(50% - 2.5rem);
-  left: calc(50% - 2.5rem);
-  width: calc(100% - 8rem);
-  height: calc(100% - 8rem);
-}
-div.astro-roue div.astro-horloge-minute {
-  position: absolute;
-  border: none;
-  top: calc(50% - 3.5rem);
-  left: calc(50% - 3.5rem);
-  width: calc(100% - 6rem);
-  height: calc(100% - 6rem);
-}
-div.astro-roue div.astro-ajustement {
-  position: absolute;
-  width: 0.8rem;
-  height: 0.8rem;
-  color: hsl(120, 50%, 15%);
-  font-size: 0.8rem;
-  text-align: center;
-  vertical-align: middle;
-  border-radius: 0.4rem;
-  background-color: hsla(300, 100%, 95%, 0.3);
-}
-div.astro-roue div.astro-disque img { border: none; }
-div.astro-roue div:is(.astro-horloge-heure, .astro-horloge-minute) img {
-  border: none;
-  text-shadow: #403f3e;
-}
-div.astro-roue div.astro-heure img.astro-heure-img {
   width: 2rem;
   height: 2rem;
-  flex-grow: 0;
-  padding: 0.1rem;
-  border: 0;
-  opacity: 0.9;
-  border: none;
 }
 
-div.astro-roue div.astro-heure.heure-01 { top: calc(50% - 1rem + sin(-180deg) * 5rem); left: calc(50% - 1rem + cos(-180deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-02 { top: calc(50% - 1rem + sin(-150deg) * 5rem); left: calc(50% - 1rem + cos(-150deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-03 { top: calc(50% - 1rem + sin(-120deg) * 5rem); left: calc(50% - 1rem + cos(-120deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-04 { top: calc(50% - 1rem + sin(-90deg) * 5rem); left: calc(50% - 1rem + cos(-90deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-05 { top: calc(50% - 1rem + sin(-60deg) * 5rem); left: calc(50% - 1rem + cos(-60deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-06 { top: calc(50% - 1rem + sin(-30deg) * 5rem); left: calc(50% - 1rem + cos(-30deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-07 { top: calc(50% - 1rem + sin(-0deg) * 5rem); left: calc(50% - 1rem + cos(-0deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-08 { top: calc(50% - 1rem + sin(30deg) * 5rem); left: calc(50% - 1rem + cos(30deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-09 { top: calc(50% - 1rem + sin(60deg) * 5rem); left: calc(50% - 1rem + cos(60deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-10 { top: calc(50% - 1rem + sin(90deg) * 5rem); left: calc(50% - 1rem + cos(90deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-11 { top: calc(50% - 1rem + sin(120deg) * 5rem); left: calc(50% - 1rem + cos(120deg) * 5rem); }
-div.astro-roue div.astro-heure.heure-12 { top: calc(50% - 1rem + sin(150deg) * 5rem); left: calc(50% - 1rem + cos(150deg) * 5rem); }
-
-div.astro-roue div.astro-ajustement.heure-01 { top: calc(50% - 0.4rem + sin(180deg) * 3.9rem); left: calc(50% - 0.4rem + cos(180deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-02 { top: calc(50% - 0.4rem + sin(-150deg) * 3.9rem); left: calc(50% - 0.4rem + cos(-150deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-03 { top: calc(50% - 0.4rem + sin(-120deg) * 3.9rem); left: calc(50% - 0.4rem + cos(-120deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-04 { top: calc(50% - 0.4rem + sin(-90deg) * 3.9rem); left: calc(50% - 0.4rem + cos(-90deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-05 { top: calc(50% - 0.4rem + sin(-60deg) * 3.9rem); left: calc(50% - 0.4rem + cos(-60deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-06 { top: calc(50% - 0.4rem + sin(-30deg) * 3.9rem); left: calc(50% - 0.4rem + cos(-30deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-07 { top: calc(50% - 0.4rem + sin(0deg) * 3.9rem); left: calc(50% - 0.4rem + cos(0deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-08 { top: calc(50% - 0.4rem + sin(30deg) * 3.9rem); left: calc(50% - 0.4rem + cos(30deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-09 { top: calc(50% - 0.4rem + sin(60deg) * 3.9rem); left: calc(50% - 0.4rem + cos(60deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-10 { top: calc(50% - 0.4rem + sin(90deg) * 3.9rem); left: calc(50% - 0.4rem + cos(90deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-11 { top: calc(50% - 0.4rem + sin(120deg) * 3.9rem); left: calc(50% - 0.4rem + cos(120deg) * 3.9rem); }
-div.astro-roue div.astro-ajustement.heure-12 { top: calc(50% - 0.4rem + sin(150deg) * 3.9rem); left: calc(50% - 0.4rem + cos(150deg) * 3.9rem); }
-
 .window-app .window-content, .window-app.sheet .window-content .sheet-body{
   background: rgb(245,245,240) url(img/bg_left.webp) no-repeat left top;
 }
@@ -1698,178 +1607,206 @@ table.table-nombres-astraux tr:hover {
   border-image-outset: 0px;
 }
 
-/*--------------------------------------------------------------------------*/
-/* CALENDAR STUFF */
-#calendar-time-container{
-	position: absolute;
-  display: block;
-}
 
-.calendar {
+.window-app.calendar {
-  min-width: 250px;
+  background: none;
-  width: fit-content;
+  margin: 0;
-
+  padding: 0;
-  display: grid;
+  box-shadow: none;
-  grid-row: 2;
+  pointer-events: none;
-  grid-column: 9;
+}
-
+
-  min-height: 5rem;
+.window-app.calendar header.window-header {
-  height: fit-content;
+  pointer-events: all;
+}
+
+.window-app.calendar .window-content {
   margin: 0;
   padding: 0;
-  border: 1px solid #000;
-  border-radius: 0.3rem;
-  background: hsla(0, 0%, 0%, 0.5);
-  font-family: "GoudyAcc";
   z-index: 100;
+  flex-direction: column;
+  min-width: 250px;
+  height: fit-content;
+  background: hsla(0, 0%, 0%, 0.0);
+  font-family: "GoudyAcc";
+  pointer-events: none;
+}
+.window-app.calendar .window-content > div {
+  pointer-events: all;
 }
 
-.calendar-title {
+.window-app.calendar div.horloge-roue {
-  grid-column: 1 / span 7;
+  position: relative;
-  grid-row: 1;
+  margin-bottom: 7px;
-
+  left: 0;
-  color: #CCC;
+  width: 8rem;
-  opacity: 90;
+  height: 8rem;
-	font-size: 0.9rem;
-	text-align: center;
-}
-.calendar-options {
-  grid-column: 8 / span 2;
-}
-.calendar-title,.calendar-options{
-  border-bottom: 1px solid hsla(0, 0%, 80%, 0.5);
 }
 
-.calendar-avance-heure {
+.window-app.calendar div.horloge-roue div.horloge-heure {
-  grid-column: 1 / span 3;
+  width: 1rem;
+  height: 1rem;
+}
+.window-app.calendar div.horloge-roue div.horloge-heure img.horloge-heure-img {
+  width: 1.6rem;
+  height: 1.6rem;
 }
 
-.calendar-change-heure {
+div.horloge-roue div {
-  grid-column: 9 / span 1;
+  position: absolute;
+  border: none;
+  pointer-events: all;
 }
 
-.calendar-change-heure .calendar-change-heure-grid {
+div.horloge-roue div.horloge-cercle {
-  display: grid;
+  background: hsl(60, 20%, 95%) url(img/bg_left.webp) no-repeat left top;
-  grid-column: 1;
+  top: 2%; left: 2%; width: 96%; height: 96%; border-radius: 50%;
-  grid-row: 2;
-
-  margin: 2px;
-	grid-row-gap: 3px;
-	color: hsla(0, 0%, 80%, 0.5);
 }
 
-.calendar-avance-heure .calendar-avance-heure-grid {
+div.horloge-roue div.horloge-cercle1 {
-	display: grid;
+  background: var(--gradient-daylight);
-  grid-column: 3;
+  border: 0.2rem solid rgba(100, 45, 124, 0.6);
-  grid-row: 2;
+  top: 2%; left: 2%; width: 96%; height: 96%; border-radius: 50%;
-
-	margin: 2px;
-  grid-row-gap: 3px;
-	color: hsla(0, 0%, 80%, 0.5);
 }
 
-.calendar-avance-heure .calendar-avance-heure-grid:hover { 
+div.horloge-roue div.horloge-cercle2 {
-	color: #FFF;
+  border: 0.1rem solid rgba(100, 45, 124, 0.4);
-	cursor: pointer;
+  top: 17%; left: 17%; width: 66%; height: 66%; border-radius: 50%;
 }
-
+div.horloge-roue div.disque-astro {
-.calendar-affiche-heure {
+  top: 28%; left: 28%; width: 44%; height: 44%;
-  grid-column: 4 / span 4;
-  grid-row: 2;
 }
-
+div.horloge-roue div.horloge-aiguille-heure {
-.calendar-affiche-heure .calendar-horloge {
+  top: 25%; left: 25%; width: 50%; height: 50%;
-	display: grid;
+}
-  max-width: 100px;
+div.horloge-roue div.horloge-aiguille-minute {
-	float: left;
+  top: 20%; left: 20%; width: 60%; height: 60%;
-	padding-top: 0px;
+}
-	padding-bottom: 0px;
+div.horloge-roue div.horloge-ajustement {
-  margin: 0 0.3rem 0 0.3rem;
+  width: 0.8rem;
-	color: #CCC;
+  height: 0.8rem;
+  color: hsl(120, 50%, 15%);
+  background-color: hsla(300, 100%, 95%, 0.4);
+  font-size: 0.8rem;
   text-align: center;
+  vertical-align: middle;
+  border-radius: 0.3rem;
+}
+div.horloge-roue div img {
+  border: none;
 }
 
-.calendar-affiche-heure .calendar-horloge .calendar-heure-texte {
+
-  font-size: 1.1rem;
+.window-app.calendar div.horloge-heure.heure-01 { top: calc(50% - 0.8rem + sin(-180deg) *41%); left: calc(50% - 0.5rem + cos(-180deg) *41%); }
-}
+.window-app.calendar div.horloge-heure.heure-02 { top: calc(50% - 0.8rem + sin(-150deg) *41%); left: calc(50% - 0.5rem + cos(-150deg) *41%); }
-.calendar-affiche-heure .calendar-horloge .calendar-minute-texte {
+.window-app.calendar div.horloge-heure.heure-03 { top: calc(50% - 0.8rem + sin(-120deg) *41%); left: calc(50% - 0.5rem + cos(-120deg) *41%); }
-	margin: 0;
+.window-app.calendar div.horloge-heure.heure-04 { top: calc(50% - 0.8rem + sin(-90deg) *41%); left: calc(50% - 0.5rem + cos(-90deg) *41%); }
+.window-app.calendar div.horloge-heure.heure-05 { top: calc(50% - 0.8rem + sin(-60deg) *41%); left: calc(50% - 0.5rem + cos(-60deg) *41%); }
+.window-app.calendar div.horloge-heure.heure-06 { top: calc(50% - 0.8rem + sin(-30deg) *41%); left: calc(50% - 0.5rem + cos(-30deg) *41%); }
+.window-app.calendar div.horloge-heure.heure-07 { top: calc(50% - 0.8rem + sin(-0deg) *41%); left: calc(50% - 0.5rem + cos(-0deg) *41%); }
+.window-app.calendar div.horloge-heure.heure-08 { top: calc(50% - 0.8rem + sin(30deg) *41%); left: calc(50% - 0.5rem + cos(30deg) *41%); }
+.window-app.calendar div.horloge-heure.heure-09 { top: calc(50% - 0.8rem + sin(60deg) *41%); left: calc(50% - 0.5rem + cos(60deg) *41%); }
+.window-app.calendar div.horloge-heure.heure-10 { top: calc(50% - 0.8rem + sin(90deg) *41%); left: calc(50% - 0.5rem + cos(90deg) *41%); }
+.window-app.calendar div.horloge-heure.heure-11 { top: calc(50% - 0.8rem + sin(120deg) *41%); left: calc(50% - 0.5rem + cos(120deg) *41%); }
+.window-app.calendar div.horloge-heure.heure-12 { top: calc(50% - 0.8rem + sin(150deg) *41%); left: calc(50% - 0.5rem + cos(150deg) *41%); }
+
+.window-app.calendar-astrologie div.horloge-heure.heure-01 { top: calc(50% - 1rem + sin(-180deg) *41%); left: calc(50% - 1rem + cos(-180deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-02 { top: calc(50% - 1rem + sin(-150deg) *41%); left: calc(50% - 1rem + cos(-150deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-03 { top: calc(50% - 1rem + sin(-120deg) *41%); left: calc(50% - 1rem + cos(-120deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-04 { top: calc(50% - 1rem + sin(-90deg) *41%); left: calc(50% - 1rem + cos(-90deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-05 { top: calc(50% - 1rem + sin(-60deg) *41%); left: calc(50% - 1rem + cos(-60deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-06 { top: calc(50% - 1rem + sin(-30deg) *41%); left: calc(50% - 1rem + cos(-30deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-07 { top: calc(50% - 1rem + sin(-0deg) *41%); left: calc(50% - 1rem + cos(-0deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-08 { top: calc(50% - 1rem + sin(30deg) *41%); left: calc(50% - 1rem + cos(30deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-09 { top: calc(50% - 1rem + sin(60deg) *41%); left: calc(50% - 1rem + cos(60deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-10 { top: calc(50% - 1rem + sin(90deg) *41%); left: calc(50% - 1rem + cos(90deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-11 { top: calc(50% - 1rem + sin(120deg) *41%); left: calc(50% - 1rem + cos(120deg) *41%); }
+.window-app.calendar-astrologie div.horloge-heure.heure-12 { top: calc(50% - 1rem + sin(150deg) *41%); left: calc(50% - 1rem + cos(150deg) *41%); }
+
+.window-app.calendar-astrologie div.horloge-ajustement.heure-01 { top: calc(50% - 0.4rem + sin(180deg) * 28%); left: calc(50% - 0.4rem + cos(180deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-02 { top: calc(50% - 0.4rem + sin(-150deg) * 28%); left: calc(50% - 0.4rem + cos(-150deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-03 { top: calc(50% - 0.4rem + sin(-120deg) * 28%); left: calc(50% - 0.4rem + cos(-120deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-04 { top: calc(50% - 0.4rem + sin(-90deg) * 28%); left: calc(50% - 0.4rem + cos(-90deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-05 { top: calc(50% - 0.4rem + sin(-60deg) * 28%); left: calc(50% - 0.4rem + cos(-60deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-06 { top: calc(50% - 0.4rem + sin(-30deg) * 28%); left: calc(50% - 0.4rem + cos(-30deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-07 { top: calc(50% - 0.4rem + sin(0deg) * 28%); left: calc(50% - 0.4rem + cos(0deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-08 { top: calc(50% - 0.4rem + sin(30deg) * 28%); left: calc(50% - 0.4rem + cos(30deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-09 { top: calc(50% - 0.4rem + sin(60deg) * 28%); left: calc(50% - 0.4rem + cos(60deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-10 { top: calc(50% - 0.4rem + sin(90deg) * 28%); left: calc(50% - 0.4rem + cos(90deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-11 { top: calc(50% - 0.4rem + sin(120deg) * 28%); left: calc(50% - 0.4rem + cos(120deg) * 28%); }
+.window-app.calendar-astrologie div.horloge-ajustement.heure-12 { top: calc(50% - 0.4rem + sin(150deg) * 28%); left: calc(50% - 0.4rem + cos(150deg) * 28%); }
+
+.window-app.calendar header.window-header h4 {
+  font-size: 0.8rem;
 }
 
-.calendar-affiche-heure .calendar-horloge .calendar-heure-img{
+.window-app.calendar section.window-content div.calendar-boutons-heure {
-  width: 2rem;
+  display: grid;
-  height: 2rem;
+  background: hsla(0, 0%, 20%, 1);
-  float: left;
+  color: hsla(0, 0%, 80%, 0.8);
-  flex-grow: 0;
+  
-  padding: 0.1rem;
+  grid-row: 1;
-  border: 0;
+  grid-column: 10;
-  opacity: 0.9;
+}
+
+.calendar-boutons-heure .calendar-btn:is(.calendar-lyre,.calendar-vaisseau) img {
   color: hsla(0, 0%, 100%, 0.5);
+  vertical-align: bottom;
+  max-width: 1.2em;
+  max-height: 1.2em;
+  margin: 1px;
 }
 
-.calendar :is(.calendar-astrologie,.calendar-set-datetime) {
+.calendar-boutons-heure i {
-	grid-row: 1;
-	grid-column: 1;
-}
-.calendar :is(.calendar-astrologie,.calendar-set-datetime,.calendar-btn) {
-	color: hsla(0, 0%, 100%, 0.5);
-	border: 1px solid rgba(0, 0, 0, 0);
-}
-.calendar :is(.calendar-astrologie,.calendar-set-datetime,.calendar-btn):hover {
-  color: var(--color-controls-hover);
-	border: 1px solid var(--color-control-border-hover);
-	cursor: pointer;
-}
-.calendar .calendar-affiche-heure .calendar-horloge a {
   border: 1px solid rgba(0, 0, 0, 0);
 }
-.calendar .calendar-affiche-heure .calendar-horloge a:hover {
+.calendar-boutons-heure i:hover {
   color: var(--color-controls-hover);
 	border: 1px solid var(--color-control-border-hover);
   cursor: pointer;
 }
 
-.calendar-avance-heure .calendar-1min {
+.calendar-1min     { grid-column: 1;}
-  grid-row: 1;
+.calendar-5min     { grid-column: 2;}
-	grid-column: 1;
+.calendar-15min    { grid-column: 3;}
+.calendar-30min    { grid-column: 4;}
+.calendar-60min    { grid-column: 5;}
+.calendar-1heure   { grid-column: 6;}
+.calendar-lyre     { grid-column: 7;}
+.calendar-vaisseau { grid-column: 8;}
+.calendar-set-datetime { grid-column: 9;}
+.calendar-astrologie   { grid-column: 10;}
+
+div.horloge-analogique {
+  border: none;
+  margin: 0;
+  width: fit-content;
+  height: fit-content;
+  align-content: center;
+  vertical-align: middle;
+  pointer-events: none;
 }
-.calendar-avance-heure .calendar-5min {
+div.horloge-digitale {
-  grid-row: 1;
+	color: #CCC;
-	grid-column: 2;
+  background: hsla(0, 0%, 20%, 1);
-}
+  text-align: center;
-.calendar-avance-heure .calendar-15min {
+  width: 100%;
-  grid-row: 1;
-	grid-column: 3;
-}
-.calendar-avance-heure .calendar-30min {
-  grid-row: 2;
-	grid-column: 1;
-}
-.calendar-avance-heure .calendar-60min {
-  grid-row: 2;
-  grid-column: 2;
-}
-.calendar-avance-heure .calendar-1heure {
-  grid-row: 2;
-  grid-column: 3;
 }
 
-.calendar-lyre{
+div.horloge-digitale .calendar-heure-texte {
-  grid-row: 1;
+  font-size: 1.1rem;
-	grid-column: 1;
+}
+div.horloge-digitale .calendar-minute-texte {
+	margin: 0;
 }
 
-.calendar-vaisseau {
+div.horloge-digitale a {
-  grid-row: 2;
+  border: 1px solid rgba(0, 0, 0, 0);
-	grid-column: 1;
 }
-
+div.horloge-digitale a:hover {
-.calendar-change-heure .calendar-btn:is(.calendar-lyre,.calendar-vaisseau) img {
+  color: var(--color-controls-hover);
-  color: hsla(0, 0%, 100%, 0.5);
+	border: 1px solid var(--color-control-border-hover);
-  vertical-align: bottom;
+  cursor: pointer;
-  max-width: 1.2em;
-  max-height: 1.2em;
-  border-width: 0;
 }
 
 div.calendar-timestamp-edit select.calendar-signe-heure {

templates/calendar-template.html

@@ -1,47 +0,0 @@
-<div id="calendar-time-container">
-	<div class="calendar">
-		<div class="calendar-title" title="Deplacer">{{jourDuMois}} {{mois.label}} ({{mois.saison}})</div>
-		<div class="calendar-options">
-			{{#if isGM}}
-			<i class="calendar-set-datetime fa-solid fa-calendar-pen" title="Editer"></i>
-			<i class="calendar-astrologie fa-solid fa-moon-over-sun" title="Astrologie"></i>
-			{{/if}}
-		</div>
-		<div class="calendar-avance-heure">
-			<div class="calendar-avance-heure-grid">
-				{{#if isGM}}
-				<i class="calendar-btn calendar-1min" data-calendar-avance="1" title="Avancer de 1 minute">+1</i>
-				<i class="calendar-btn calendar-5min" data-calendar-avance="5" title="Avancer de 5 minutes">+5</i>
-				<i class="calendar-btn calendar-15min" data-calendar-avance="15" title="Avancer de 15 minutes">+15</i>
-				<i class="calendar-btn calendar-30min" data-calendar-avance="30" title="Avancer de 30 minutes">+30</i>
-				<i class="calendar-btn calendar-60min" data-calendar-avance="60" title="Avancer de 60 minutes" >+60</i>
-				<i class="calendar-btn calendar-1heure" data-calendar-avance="120" title="Avancer d'1 heure" >+1h</i>
-				{{else}}
-				{{/if}}
-			</div>
-		</div>
-		<div class="calendar-affiche-heure">
-			<div class="calendar-horloge">
-				<a class="ajout-chronologie">
-					<img class="calendar-heure-img" src="{{heure.icon}}" alt="{{nomHeure}}"/>
-					<span class="calendar-heure-texte">{{heure.label}}</span>
-				</a>
-				{{#if isGM}}
-				<p class="calendar-minute-texte">{{minute}} minutes</p>
-				{{/if}}
-			</div>
-		</div>
-		<div class="calendar-change-heure">
-			<div class="calendar-change-heure-grid">
-					{{#if isGM}}
-					<i class="calendar-btn calendar-lyre fas fa-forward" data-calendar-set="6" title="Avancer à Lyre">
-						<img src="systems/foundryvtt-reve-de-dragon/icons/heures/hd07.svg" alt="Avancer à Lyre"/>
-					</i>
-					<i class="calendar-btn calendar-vaisseau fas fa-forward" data-calendar-set="0" title="Avancer au Vaisseau">
-						<img src="systems/foundryvtt-reve-de-dragon/icons/heures/hd01.svg" alt="Avancer au Vaisseau"/>
-					</i>
-					{{/if}}
-			</div>
-		</div>
-	</div>
-</div>

templates/sommeil/astrologie-theme.hbs

@@ -19,21 +19,5 @@
   </div>
   <hr>
   <div><label>Heures de chance et malchance</label></div>
-  <div class="astro-roue">
+  {{> 'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs'}}
-    <div class="astro-cercle1"></div>
-    {{#each heures as |heure|}}
-    <div class="astro-ajustement heure-{{heure.hh}}"></div>
-    <div class="astro-heure heure-{{heure.hh}}"><img class="astro-heure-img" src="{{heure.webp}}" title="{{heure.label}}"></div>
-    {{/each}}
-    <div class="astro-cercle2"></div>
-    <div class="astro-disque">
-      <img src="systems/foundryvtt-reve-de-dragon/styles/img/ui/astro-disque.svg" alt="">
-    </div>
-    <div class="astro-horloge-heure">
-      <img src="systems/foundryvtt-reve-de-dragon/styles/img/ui/rdd-aiguille-horloge.svg" alt="">
-    </div>
-    <div class="astro-horloge-minute">
-      <img src="systems/foundryvtt-reve-de-dragon/styles/img/ui/rdd-aiguille-minute.svg" alt="">
-    </div>
-  </div>
 </div>

templates/time/calendar.hbs

@@ -0,0 +1,42 @@
+<div>
+	{{#if isGM}}
+		<div class="calendar-boutons-heure">
+			<i class="calendar-btn calendar-1min" data-calendar-avance="1" title="Avancer de 1 minute">+1</i>
+			<i class="calendar-btn calendar-5min" data-calendar-avance="5" title="Avancer de 5 minutes">+5</i>
+			<i class="calendar-btn calendar-15min" data-calendar-avance="15" title="Avancer de 15 minutes">+15</i>
+			<i class="calendar-btn calendar-30min" data-calendar-avance="30" title="Avancer de 30 minutes">+30</i>
+			<i class="calendar-btn calendar-60min" data-calendar-avance="60" title="Avancer de 60 minutes" >+60</i>
+			<i class="calendar-btn calendar-1heure" data-calendar-avance="120" title="Avancer d'1 heure" >+1h</i>
+			<i class="calendar-btn calendar-lyre fas fa-forward" data-calendar-set="6" title="Avancer à Lyre">
+						<img src="systems/foundryvtt-reve-de-dragon/icons/heures/hd07.svg" alt="Avancer à Lyre"/>
+			</i>
+			<i class="calendar-btn calendar-vaisseau fas fa-forward" data-calendar-set="0" title="Avancer au Vaisseau">
+				<img src="systems/foundryvtt-reve-de-dragon/icons/heures/hd01.svg" alt="Avancer au Vaisseau"/>
+			</i>
+		</div>
+	{{/if}}
+	<div class="horloge-digitale">
+		<span>
+			<a class="toggle-horloge-analogique">
+			{{#if horlogeAnalogique}}
+				<i class="fa-solid fa-chevrons-up"></i>
+			{{else}}
+        <i class="fa-solid fa-chevrons-down"></i>
+			{{/if}}
+			</a>
+		</span>
+		<span class="calendar-heure-texte">
+			<a class="ajout-chronologie">
+				{{heure.label}}
+			</a>
+		</span>
+		{{#if isGM}}
+		<span class="calendar-minute-texte">{{minute}} minutes</p>
+		{{/if}}
+	</div>
+</div>
+<div class="horloge-analogique">
+{{#if horlogeAnalogique}}
+	{{> 'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs' }}
+{{/if}}
+</div>

templates/time/horloge.hbs

@@ -0,0 +1,22 @@
+<div class="horloge-roue">
+  <div class="horloge-cercle"></div>
+  <div class="horloge-cercle1"></div>
+  {{#if theme}}
+  {{#each heures as |heure|}}
+  <div class="horloge-ajustement heure-{{heure.hh}}"></div>
+  {{/each}}
+  <div class="disque-astro">
+    <img src="systems/foundryvtt-reve-de-dragon/styles/img/ui/astro-disque.svg" alt="">
+  </div>
+  {{/if}}
+  {{#each heures as |heure|}}
+  <div class="horloge-heure heure-{{heure.hh}}" data-heure="{{heure.heure}}"><img class="horloge-heure-img" src="{{heure.webp}}" title="{{heure.label}}"></div>
+  {{/each}}
+  <div class="horloge-cercle2"></div>
+  <div class="horloge-aiguille-heure">
+    <img src="systems/foundryvtt-reve-de-dragon/styles/img/ui/rdd-aiguille-horloge.svg" alt="">
+  </div>
+  <div class="horloge-aiguille-minute">
+    <img src="systems/foundryvtt-reve-de-dragon/styles/img/ui/rdd-aiguille-minute.svg" alt="">
+  </div>
+</div>