Fix toggle horloge

Affiche/masque correctement l'horloge pour le MJ et les joueurs
This commit is contained in:
Vincent Vandemeulebrouck 2023-03-31 01:31:09 +02:00
parent e32a1d25f6
commit bf98e4eae2
3 changed files with 46 additions and 57 deletions

View File

@ -85,7 +85,7 @@ export class RdDCalendrier extends Application {
display() { display() {
const pos = this.getSavePosition() const pos = this.getSavePosition()
this.render(true, { left: pos.left, top: pos.top}); this.render(true, { left: pos.left, top: pos.top });
return this; return this;
} }
@ -115,7 +115,7 @@ export class RdDCalendrier extends Application {
async onUpdateSetting(setting, update, options, id) { async onUpdateSetting(setting, update, options, id) {
if (setting.key == SYSTEM_RDD + '.' + WORLD_TIMESTAMP_SETTING) { if (setting.key == SYSTEM_RDD + '.' + WORLD_TIMESTAMP_SETTING) {
this.timestamp = RdDTimestamp.getWorldTime(); this.timestamp = RdDTimestamp.getWorldTime();
this.updateDisplay(); this.positionAiguilles()
Hooks.callAll(APP_ASTROLOGIE_REFRESH); Hooks.callAll(APP_ASTROLOGIE_REFRESH);
} }
} }
@ -140,8 +140,6 @@ export class RdDCalendrier extends Application {
async activateListeners(html) { async activateListeners(html) {
super.activateListeners(html); super.activateListeners(html);
this.html = html; this.html = html;
this.updateDisplay();
this.html.find('.ajout-chronologie').click(ev => DialogChronologie.create()); this.html.find('.ajout-chronologie').click(ev => DialogChronologie.create());
this.html.find('.toggle-horloge-analogique').click(ev => this.onToggleHorlogeAnalogique()) this.html.find('.toggle-horloge-analogique').click(ev => this.onToggleHorlogeAnalogique())
this.html.find('.calendar-btn').click(ev => this.onCalendarButton(ev)); this.html.find('.calendar-btn').click(ev => this.onCalendarButton(ev));
@ -158,12 +156,19 @@ export class RdDCalendrier extends Application {
ev.preventDefault(); ev.preventDefault();
this.showAstrologieEditor(); this.showAstrologieEditor();
}); });
this.positionAiguilles()
}
positionAiguilles() {
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));
} }
onToggleHorlogeAnalogique() { onToggleHorlogeAnalogique() {
this.horlogeAnalogique = !this.horlogeAnalogique; this.horlogeAnalogique = !this.horlogeAnalogique;
this.savePosition() this.savePosition()
this.render(true) this.display()
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
@ -292,7 +297,7 @@ export class RdDCalendrier extends Application {
} }
this.timestamp = newTimestamp; this.timestamp = newTimestamp;
await this.rebuildNombresAstraux(); await this.rebuildNombresAstraux();
this.updateDisplay(); this.positionAiguilles()
this.display(); this.display();
} }
@ -307,9 +312,9 @@ export class RdDCalendrier extends Application {
else if (calendarSet) { else if (calendarSet) {
this.positionnerHeure(Number(calendarSet.value)); this.positionnerHeure(Number(calendarSet.value));
} }
this.updateDisplay(); this.positionAiguilles()
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
async incrementTime(minutes = 0) { async incrementTime(minutes = 0) {
if (game.user.isGM) { if (game.user.isGM) {
@ -317,12 +322,12 @@ export class RdDCalendrier extends Application {
Hooks.callAll(APP_ASTROLOGIE_REFRESH); Hooks.callAll(APP_ASTROLOGIE_REFRESH);
} }
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
async incrementerJour() { async incrementerJour() {
await this.setNewTimestamp(this.timestamp.nouveauJour()); await this.setNewTimestamp(this.timestamp.nouveauJour());
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
async positionnerHeure(heure) { async positionnerHeure(heure) {
if (game.user.isGM) { if (game.user.isGM) {
@ -333,7 +338,7 @@ export class RdDCalendrier extends Application {
Hooks.callAll(APP_ASTROLOGIE_REFRESH); Hooks.callAll(APP_ASTROLOGIE_REFRESH);
} }
} }
/* -------------------------------------------- */ /* -------------------------------------------- */
getLectureAstrologieDifficulte(dateIndex) { getLectureAstrologieDifficulte(dateIndex) {
let indexNow = this.timestamp.indexDate; let indexNow = this.timestamp.indexDate;
@ -407,24 +412,6 @@ export class RdDCalendrier extends Application {
return 0; return 0;
} }
/* -------------------------------------------- */
updateDisplay() {
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`;
}
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));
}
/* -------------------------------------------- */ /* -------------------------------------------- */
async saveEditeur(calendrierData) { async saveEditeur(calendrierData) {
const newTimestamp = RdDTimestamp.timestamp( const newTimestamp = RdDTimestamp.timestamp(

View File

@ -1631,6 +1631,7 @@ table.table-nombres-astraux tr:hover {
font-family: "GoudyAcc"; font-family: "GoudyAcc";
pointer-events: none; pointer-events: none;
} }
.window-app.calendar .window-content > div { .window-app.calendar .window-content > div {
pointer-events: all; pointer-events: all;
} }
@ -1644,12 +1645,12 @@ table.table-nombres-astraux tr:hover {
} }
.window-app.calendar div.horloge-roue div.horloge-heure { .window-app.calendar div.horloge-roue div.horloge-heure {
width: 1rem; width: 1.4rem;
height: 1rem; height: 1.4rem;
} }
.window-app.calendar div.horloge-roue div.horloge-heure img.horloge-heure-img { .window-app.calendar div.horloge-roue div.horloge-heure img.horloge-heure-img {
width: 1.6rem; width: 1.4rem;
height: 1.6rem; height: 1.4rem;
} }
div.horloge-roue div { div.horloge-roue div {
@ -1692,23 +1693,24 @@ div.horloge-roue div.horloge-ajustement {
vertical-align: middle; vertical-align: middle;
border-radius: 0.3rem; border-radius: 0.3rem;
} }
div.horloge-roue div img { div.horloge-roue div img {
border: none; 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-01 { top: calc(50% - 0.7rem + sin(-180deg) *38%); left: calc(50% - 0.7rem + cos(-180deg) *38%); }
.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-02 { top: calc(50% - 0.7rem + sin(-150deg) *38%); left: calc(50% - 0.7rem + cos(-150deg) *38%); }
.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-03 { top: calc(50% - 0.7rem + sin(-120deg) *38%); left: calc(50% - 0.7rem + cos(-120deg) *38%); }
.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-04 { top: calc(50% - 0.7rem + sin(-90deg) *38%); left: calc(50% - 0.7rem + cos(-90deg) *38%); }
.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-05 { top: calc(50% - 0.7rem + sin(-60deg) *38%); left: calc(50% - 0.7rem + cos(-60deg) *38%); }
.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-06 { top: calc(50% - 0.7rem + sin(-30deg) *38%); left: calc(50% - 0.7rem + cos(-30deg) *38%); }
.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-07 { top: calc(50% - 0.7rem + sin(-0deg) *38%); left: calc(50% - 0.7rem + cos(-0deg) *38%); }
.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-08 { top: calc(50% - 0.7rem + sin(30deg) *38%); left: calc(50% - 0.7rem + cos(30deg) *38%); }
.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-09 { top: calc(50% - 0.7rem + sin(60deg) *38%); left: calc(50% - 0.7rem + cos(60deg) *38%); }
.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-10 { top: calc(50% - 0.7rem + sin(90deg) *38%); left: calc(50% - 0.7rem + cos(90deg) *38%); }
.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-11 { top: calc(50% - 0.7rem + sin(120deg) *38%); left: calc(50% - 0.7rem + cos(120deg) *38%); }
.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 div.horloge-heure.heure-12 { top: calc(50% - 0.7rem + sin(150deg) *38%); left: calc(50% - 0.7rem + 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-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-02 { top: calc(50% - 1rem + sin(-150deg) *41%); left: calc(50% - 1rem + cos(-150deg) *41%); }
@ -1786,6 +1788,9 @@ div.horloge-analogique {
vertical-align: middle; vertical-align: middle;
pointer-events: none; pointer-events: none;
} }
div.horloge-analogique.horloge-analogique-hidden {
visibility: hidden;
}
div.horloge-digitale { div.horloge-digitale {
color: #CCC; color: #CCC;
background: hsla(0, 0%, 20%, 1); background: hsla(0, 0%, 20%, 1);
@ -1793,10 +1798,9 @@ div.horloge-digitale {
width: 100%; width: 100%;
} }
div.horloge-digitale .calendar-heure-texte { div.horloge-digitale :is(.calendar-heure-texte,.calendar-minute-texte) {
font-size: 1.1rem; font-size: 1rem;
} pointer-events: all;
div.horloge-digitale .calendar-minute-texte {
margin: 0; margin: 0;
} }

View File

@ -1,4 +1,4 @@
<div> <div class="calendar-horloge">
{{#if isGM}} {{#if isGM}}
<div class="calendar-boutons-heure"> <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-1min" data-calendar-avance="1" title="Avancer de 1 minute">+1</i>
@ -8,7 +8,7 @@
<i class="calendar-btn calendar-60min" data-calendar-avance="60" title="Avancer de 60 minutes" >+60</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-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"> <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"/> <img src="systems/foundryvtt-reve-de-dragon/icons/heures/hd07.svg" alt="Avancer à Lyre"/>
</i> </i>
<i class="calendar-btn calendar-vaisseau fas fa-forward" data-calendar-set="0" title="Avancer au Vaisseau"> <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"/> <img src="systems/foundryvtt-reve-de-dragon/icons/heures/hd01.svg" alt="Avancer au Vaisseau"/>
@ -31,12 +31,10 @@
</a> </a>
</span> </span>
{{#if isGM}} {{#if isGM}}
<span class="calendar-minute-texte">{{minute}} minutes</p> <span class="calendar-minute-texte">{{minute}} minutes</span>
{{/if}} {{/if}}
</div> </div>
</div> <div class="horloge-analogique {{#unless horlogeAnalogique}}horloge-analogique-hidden{{/unless}}">
<div class="horloge-analogique"> {{> 'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs' }}
{{#if horlogeAnalogique}} </div>
{{> 'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs' }}
{{/if}}
</div> </div>