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

View File

@ -1631,6 +1631,7 @@ table.table-nombres-astraux tr:hover {
font-family: "GoudyAcc";
pointer-events: none;
}
.window-app.calendar .window-content > div {
pointer-events: all;
}
@ -1644,12 +1645,12 @@ table.table-nombres-astraux tr:hover {
}
.window-app.calendar div.horloge-roue div.horloge-heure {
width: 1rem;
height: 1rem;
width: 1.4rem;
height: 1.4rem;
}
.window-app.calendar div.horloge-roue div.horloge-heure img.horloge-heure-img {
width: 1.6rem;
height: 1.6rem;
width: 1.4rem;
height: 1.4rem;
}
div.horloge-roue div {
@ -1692,23 +1693,24 @@ div.horloge-roue div.horloge-ajustement {
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 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.7rem + sin(-150deg) *38%); left: calc(50% - 0.7rem + cos(-150deg) *38%); }
.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.7rem + sin(-90deg) *38%); left: calc(50% - 0.7rem + cos(-90deg) *38%); }
.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.7rem + sin(-30deg) *38%); left: calc(50% - 0.7rem + cos(-30deg) *38%); }
.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.7rem + sin(30deg) *38%); left: calc(50% - 0.7rem + cos(30deg) *38%); }
.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.7rem + sin(90deg) *38%); left: calc(50% - 0.7rem + cos(90deg) *38%); }
.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.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-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;
pointer-events: none;
}
div.horloge-analogique.horloge-analogique-hidden {
visibility: hidden;
}
div.horloge-digitale {
color: #CCC;
background: hsla(0, 0%, 20%, 1);
@ -1793,10 +1798,9 @@ div.horloge-digitale {
width: 100%;
}
div.horloge-digitale .calendar-heure-texte {
font-size: 1.1rem;
}
div.horloge-digitale .calendar-minute-texte {
div.horloge-digitale :is(.calendar-heure-texte,.calendar-minute-texte) {
font-size: 1rem;
pointer-events: all;
margin: 0;
}

View File

@ -1,4 +1,4 @@
<div>
<div class="calendar-horloge">
{{#if isGM}}
<div class="calendar-boutons-heure">
<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-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"/>
<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"/>
@ -31,12 +31,10 @@
</a>
</span>
{{#if isGM}}
<span class="calendar-minute-texte">{{minute}} minutes</p>
<span class="calendar-minute-texte">{{minute}} minutes</span>
{{/if}}
</div>
</div>
<div class="horloge-analogique">
{{#if horlogeAnalogique}}
{{> 'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs' }}
{{/if}}
<div class="horloge-analogique {{#unless horlogeAnalogique}}horloge-analogique-hidden{{/unless}}">
{{> 'systems/foundryvtt-reve-de-dragon/templates/time/horloge.hbs' }}
</div>
</div>