From c1d02d9fda4c7f268d8bb6584aa913ca7c07cf0a Mon Sep 17 00:00:00 2001 From: Vincent Vandemeulebrouck Date: Wed, 29 Mar 2023 22:53:40 +0200 Subject: [PATCH] Ajout d'une horloge analogique MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Amélioration de la fenêtre calendrier: * plus compacte * horloge analogique * normalement compatible pop-out * minimisable (juste la barre de titre) --- module/actor.js | 2 +- module/dialog-chronologie.js | 2 +- module/item-sheet.js | 2 +- module/item.js | 2 +- module/item/blessure.js | 2 +- module/item/maladie.js | 2 +- module/item/signedraconique.js | 2 +- module/migrations.js | 2 +- module/misc.js | 11 + module/rdd-herbes.js | 2 +- module/rdd-main.js | 35 +- module/rdd-tmr-dialog.js | 3 +- module/rdd-utility.js | 6 +- module/sommeil/app-astrologie.js | 24 +- .../rdd-calendrier-editor.js} | 6 +- module/{ => time}/rdd-calendrier.js | 313 ++++++------- module/{ => time}/rdd-timestamp.js | 10 +- styles/simple.css | 413 ++++++++---------- templates/calendar-template.html | 47 -- templates/sommeil/astrologie-theme.hbs | 18 +- .../calendar-editor.hbs} | 0 templates/time/calendar.hbs | 42 ++ templates/time/horloge.hbs | 22 + 23 files changed, 429 insertions(+), 539 deletions(-) rename module/{rdd-calendrier-editeur.js => time/rdd-calendrier-editor.js} (87%) rename module/{ => time}/rdd-calendrier.js (63%) rename module/{ => time}/rdd-timestamp.js (98%) delete mode 100644 templates/calendar-template.html rename templates/{calendar-editor-template.html => time/calendar-editor.hbs} (100%) create mode 100644 templates/time/calendar.hbs create mode 100644 templates/time/horloge.hbs diff --git a/module/actor.js b/module/actor.js index 9d9426d4..a941d79b 100644 --- a/module/actor.js +++ b/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"; diff --git a/module/dialog-chronologie.js b/module/dialog-chronologie.js index 3d0cc1d1..911942c8 100644 --- a/module/dialog-chronologie.js +++ b/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"; diff --git a/module/item-sheet.js b/module/item-sheet.js index 558fe8c7..268474cd 100644 --- a/module/item-sheet.js +++ b/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 diff --git a/module/item.js b/module/item.js index bc1248a5..05e2762b 100644 --- a/module/item.js +++ b/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"; diff --git a/module/item/blessure.js b/module/item/blessure.js index 8f8c69ca..dbf4ad87 100644 --- a/module/item/blessure.js +++ b/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", diff --git a/module/item/maladie.js b/module/item/maladie.js index d7f15c93..46d14395 100644 --- a/module/item/maladie.js +++ b/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 { diff --git a/module/item/signedraconique.js b/module/item/signedraconique.js index 31eaf436..42c34498 100644 --- a/module/item/signedraconique.js +++ b/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 = [ diff --git a/module/migrations.js b/module/migrations.js index b1d3513f..0287775d 100644 --- a/module/migrations.js +++ b/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 { diff --git a/module/misc.js b/module/misc.js index 71ee51d5..ac04d1e6 100644 --- a/module/misc.js +++ b/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 + }; + } } diff --git a/module/rdd-herbes.js b/module/rdd-herbes.js index 859cccea..edcd3513 100644 --- a/module/rdd-herbes.js +++ b/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 { diff --git a/module/rdd-main.js b/module/rdd-main.js index 73cf5d55..d8dde122 100644 --- a/module/rdd-main.js +++ b/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 { RdDTimestamp } from "./rdd-timestamp.js"; +import { RdDCalendrier } from "./time/rdd-calendrier.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); - } } /* -------------------------------------------- */ diff --git a/module/rdd-tmr-dialog.js b/module/rdd-tmr-dialog.js index 88474bc6..62e59e97 100644 --- a/module/rdd-tmr-dialog.js +++ b/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 "./rdd-timestamp.js"; +import { RdDTimestamp } from "./time/rdd-timestamp.js"; /* -------------------------------------------- */ diff --git a/module/rdd-utility.js b/module/rdd-utility.js index 5260bc2a..6b2bc787 100644 --- a/module/rdd-utility.js +++ b/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', diff --git a/module/sommeil/app-astrologie.js b/module/sommeil/app-astrologie.js index 53deec80..72d59e1d 100644 --- a/module/sommeil/app-astrologie.js +++ b/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.astro-roue div.astro-horloge-minute img`).css(this.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 - }; + 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)); } requestJetAstrologie() { diff --git a/module/rdd-calendrier-editeur.js b/module/time/rdd-calendrier-editor.js similarity index 87% rename from module/rdd-calendrier-editeur.js rename to module/time/rdd-calendrier-editor.js index d6347ffa..3ec10947 100644 --- a/module/rdd-calendrier-editeur.js +++ b/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); - RdDCalendrierEditeur.setLimited(this.html.find("input[name='calendar.minute']"), this.calendrierData.minute, 0, 119); + RdDCalendrierEditor.setLimited(this.html.find("input[name='calendar.jourDuMois']"), this.calendrierData.jourDuMois, 1, 28); + RdDCalendrierEditor.setLimited(this.html.find("input[name='calendar.minute']"), this.calendrierData.minute, 0, 119); } static setLimited(input, init, min, max) { diff --git a/module/rdd-calendrier.js b/module/time/rdd-calendrier.js similarity index 63% rename from module/rdd-calendrier.js rename to module/time/rdd-calendrier.js index 03fb26a5..62769c7a 100644 --- a/module/rdd-calendrier.js +++ b/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 { ReglesOptionelles } from "./settings/regles-optionelles.js"; -import { APP_ASTROLOGIE_REFRESH, AppAstrologie } from "./sommeil/app-astrologie.js"; +import { RdDCalendrierEditor } from "./rdd-calendrier-editor.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 { 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() { - return mergeObject(super.defaultOptions, { - template: "systems/foundryvtt-reve-de-dragon/templates/calendar-template.html", - popOut: false, - resizable: false + game.settings.register(SYSTEM_RDD, "calendrier-pos", { + name: "calendrierPos", + scope: "client", + config: false, + default: INITIAL_CALENDAR_POS, + type: Object }); } - static createCalendrierPos() { - return { top: 200, left: 200 }; + static get defaultOptions() { + 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() { - let templatePath = "systems/foundryvtt-reve-de-dragon/templates/calendar-template.html"; - renderTemplate(templatePath, {}).then(html => { - this.render(true); + get title() { + const calendrier = this.timestamp.toCalendrier(); + return `${calendrier.heure.label}, ${calendrier.jourDuMois} ${calendrier.mois.label} ${calendrier.annee} (${calendrier.mois.saison})`; + } + + 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,34 +306,32 @@ 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); + } } - + /* -------------------------------------------- */ async incrementerJour() { await this.setNewTimestamp(this.timestamp.nouveauJour()); } - + /* -------------------------------------------- */ async positionnerHeure(heure) { - const indexDate = this.timestamp.indexDate; - const addDay = this.timestamp.heure < heure ? 0 : 1; - const newTimestamp = new RdDTimestamp({ indexDate: indexDate + addDay }).addHeures(heure); - await this.setNewTimestamp(newTimestamp) + if (game.user.isGM) { + const indexDate = this.timestamp.indexDate; + const addDay = this.timestamp.heure < heure ? 0 : 1; + 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; - } - + /* -------------------------------------------- */ getLectureAstrologieDifficulte(dateIndex) { let indexNow = this.timestamp.indexDate; @@ -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(); - // Rebuild text du calendrier - let dateHTML = `${calendrier.jourDuMois} ${calendrier.mois.label} (${calendrier.mois.saison}) de l'année ${calendrier.annee}` - if (game.user.isGM) { - dateHTML = dateHTML + "
Nombre Astral: " + (this.getNombreAstral() ?? "?"); - } - for (let handle of document.getElementsByClassName("calendar-title")) { - handle.innerHTML = dateHTML; - } - for (let heure of document.getElementsByClassName("calendar-heure-texte")) { + const calendrier = this.fillCalendrierData(); + for (const 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")) { - heureImg.src = calendrier.heure.icon; - } + this.postionnerAiguilles() + } + + 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); - this.editeur = new RdDCalendrierEditeur(html, this, calendrierData) + const html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/time/calendar-editor.hbs', calendrierData); + this.editeur = new RdDCalendrierEditor(html, this, calendrierData) } this.editeur.updateData(calendrierData); this.editeur.render(true); @@ -473,4 +450,4 @@ export class RdDCalendrier extends Application { async showAstrologieEditor() { await AppAstrologie.create(); } -} \ No newline at end of file +} diff --git a/module/rdd-timestamp.js b/module/time/rdd-timestamp.js similarity index 98% rename from module/rdd-timestamp.js rename to module/time/rdd-timestamp.js index 0a5490ed..a28afaff 100644 --- a/module/rdd-timestamp.js +++ b/module/time/rdd-timestamp.js @@ -1,7 +1,7 @@ -import { SHOW_DICE, SYSTEM_RDD, SYSTEM_SOCKET_ID } from "./constants.js"; -import { Grammar } from "./grammar.js"; -import { Misc } from "./misc.js"; -import { RdDDice } from "./rdd-dice.js"; +import { SHOW_DICE, SYSTEM_RDD } from "../constants.js"; +import { Grammar } from "../grammar.js"; +import { Misc } from "../misc.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 diff --git a/styles/simple.css b/styles/simple.css index f5144534..fa65600d 100644 --- a/styles/simple.css +++ b/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; -} -div.astro-roue { + +.app-calendar-astrologie div.horloge-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 { - 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 { +.app-calendar-astrologie div.horloge-roue div.horloge-heure img.horloge-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 { - min-width: 250px; - width: fit-content; - - display: grid; - grid-row: 2; - grid-column: 9; - - min-height: 5rem; - height: fit-content; +.window-app.calendar { + background: none; + margin: 0; + padding: 0; + box-shadow: none; + pointer-events: none; +} + +.window-app.calendar header.window-header { + 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 { - grid-column: 1 / span 7; - grid-row: 1; - - color: #CCC; - opacity: 90; - 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); +.window-app.calendar div.horloge-roue { + position: relative; + margin-bottom: 7px; + left: 0; + width: 8rem; + height: 8rem; } -.calendar-avance-heure { - grid-column: 1 / span 3; +.window-app.calendar div.horloge-roue div.horloge-heure { + 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 { - grid-column: 9 / span 1; +div.horloge-roue div { + position: absolute; + border: none; + pointer-events: all; } -.calendar-change-heure .calendar-change-heure-grid { +div.horloge-roue div.horloge-cercle { + background: hsl(60, 20%, 95%) url(img/bg_left.webp) no-repeat left top; + top: 2%; left: 2%; width: 96%; height: 96%; border-radius: 50%; +} + +div.horloge-roue div.horloge-cercle1 { + background: var(--gradient-daylight); + border: 0.2rem solid rgba(100, 45, 124, 0.6); + top: 2%; left: 2%; width: 96%; height: 96%; border-radius: 50%; +} + +div.horloge-roue div.horloge-cercle2 { + border: 0.1rem solid rgba(100, 45, 124, 0.4); + top: 17%; left: 17%; width: 66%; height: 66%; border-radius: 50%; +} +div.horloge-roue div.disque-astro { + top: 28%; left: 28%; width: 44%; height: 44%; +} +div.horloge-roue div.horloge-aiguille-heure { + top: 25%; left: 25%; width: 50%; height: 50%; +} +div.horloge-roue div.horloge-aiguille-minute { + top: 20%; left: 20%; width: 60%; height: 60%; +} +div.horloge-roue div.horloge-ajustement { + width: 0.8rem; + 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; +} + + +.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%); } +.window-app.calendar div.horloge-heure.heure-03 { top: calc(50% - 0.8rem + sin(-120deg) *41%); left: calc(50% - 0.5rem + cos(-120deg) *41%); } +.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; +} + +.window-app.calendar section.window-content div.calendar-boutons-heure { display: grid; - grid-column: 1; - grid-row: 2; - - margin: 2px; - grid-row-gap: 3px; - color: hsla(0, 0%, 80%, 0.5); + background: hsla(0, 0%, 20%, 1); + color: hsla(0, 0%, 80%, 0.8); + + grid-row: 1; + grid-column: 10; } -.calendar-avance-heure .calendar-avance-heure-grid { - display: grid; - grid-column: 3; - grid-row: 2; - - margin: 2px; - grid-row-gap: 3px; - color: hsla(0, 0%, 80%, 0.5); -} - -.calendar-avance-heure .calendar-avance-heure-grid:hover { - color: #FFF; - cursor: pointer; -} - -.calendar-affiche-heure { - grid-column: 4 / span 4; - grid-row: 2; -} - -.calendar-affiche-heure .calendar-horloge { - display: grid; - max-width: 100px; - float: left; - padding-top: 0px; - padding-bottom: 0px; - margin: 0 0.3rem 0 0.3rem; - color: #CCC; - text-align: center; -} - -.calendar-affiche-heure .calendar-horloge .calendar-heure-texte { - font-size: 1.1rem; -} -.calendar-affiche-heure .calendar-horloge .calendar-minute-texte { - margin: 0; -} - -.calendar-affiche-heure .calendar-horloge .calendar-heure-img{ - width: 2rem; - height: 2rem; - float: left; - flex-grow: 0; - padding: 0.1rem; - border: 0; - 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) { - 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 { +.calendar-boutons-heure i { 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 { - grid-row: 1; - grid-column: 1; +.calendar-1min { grid-column: 1;} +.calendar-5min { grid-column: 2;} +.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 { - grid-row: 1; - grid-column: 2; -} -.calendar-avance-heure .calendar-15min { - 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; +div.horloge-digitale { + color: #CCC; + background: hsla(0, 0%, 20%, 1); + text-align: center; + width: 100%; } -.calendar-lyre{ - grid-row: 1; - grid-column: 1; +div.horloge-digitale .calendar-heure-texte { + font-size: 1.1rem; +} +div.horloge-digitale .calendar-minute-texte { + margin: 0; } -.calendar-vaisseau { - grid-row: 2; - grid-column: 1; +div.horloge-digitale a { + border: 1px solid rgba(0, 0, 0, 0); } - -.calendar-change-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; - border-width: 0; +div.horloge-digitale a:hover { + color: var(--color-controls-hover); + border: 1px solid var(--color-control-border-hover); + cursor: pointer; } div.calendar-timestamp-edit select.calendar-signe-heure { diff --git a/templates/calendar-template.html b/templates/calendar-template.html deleted file mode 100644 index 4c77d5e8..00000000 --- a/templates/calendar-template.html +++ /dev/null @@ -1,47 +0,0 @@ -
-
-
{{jourDuMois}} {{mois.label}} ({{mois.saison}})
-
- {{#if isGM}} - - - {{/if}} -
-
-
- {{#if isGM}} - +1 - +5 - +15 - +30 - +60 - +1h - {{else}} - {{/if}} -
-
-
-
- - {{nomHeure}} - {{heure.label}} - - {{#if isGM}} -

{{minute}} minutes

- {{/if}} -
-
-
-
- {{#if isGM}} - - Avancer à Lyre - - - Avancer au Vaisseau - - {{/if}} -
-
-
-
diff --git a/templates/sommeil/astrologie-theme.hbs b/templates/sommeil/astrologie-theme.hbs index e6f8ef23..218c0197 100644 --- a/templates/sommeil/astrologie-theme.hbs +++ b/templates/sommeil/astrologie-theme.hbs @@ -19,21 +19,5 @@
-
-
- {{#each heures as |heure|}} -
-
- {{/each}} -
-
- -
-
- -
-
- -
-
+ {{> 'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs'}} \ No newline at end of file diff --git a/templates/calendar-editor-template.html b/templates/time/calendar-editor.hbs similarity index 100% rename from templates/calendar-editor-template.html rename to templates/time/calendar-editor.hbs diff --git a/templates/time/calendar.hbs b/templates/time/calendar.hbs new file mode 100644 index 00000000..b587e924 --- /dev/null +++ b/templates/time/calendar.hbs @@ -0,0 +1,42 @@ +
+ {{#if isGM}} +
+ +1 + +5 + +15 + +30 + +60 + +1h + + Avancer à Lyre + + + Avancer au Vaisseau + +
+ {{/if}} +
+ + + {{#if horlogeAnalogique}} + + {{else}} + + {{/if}} + + + + + {{heure.label}} + + + {{#if isGM}} + {{minute}} minutes

+ {{/if}} +
+
+
+{{#if horlogeAnalogique}} + {{> 'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs' }} +{{/if}} +
\ No newline at end of file diff --git a/templates/time/horloge.hbs b/templates/time/horloge.hbs new file mode 100644 index 00000000..8fcb27f2 --- /dev/null +++ b/templates/time/horloge.hbs @@ -0,0 +1,22 @@ +
+
+
+ {{#if theme}} + {{#each heures as |heure|}} +
+ {{/each}} +
+ +
+ {{/if}} + {{#each heures as |heure|}} +
+ {{/each}} +
+
+ +
+
+ +
+