Couleurs du calendrier
De nuit, les boutons noirs sur fond gris sur fond sombre étaient difficiles à voir séparation de class css pour affichage/position du bouton séparation du nombre de minutes/heure à positionner
This commit is contained in:
Vincent Vandemeulebrouck
parent
e1b10bc489
commit
432098f9c5
|
|
@ -9,7 +9,8 @@ import { Grammar } from "./grammar.js";
|
|||
/* -------------------------------------------- */
|
||||
const dossierIconesHeures = 'systems/foundryvtt-reve-de-dragon/icons/heures/'
|
||||
const heuresList = ["vaisseau", "sirene", "faucon", "couronne", "dragon", "epees", "lyre", "serpent", "poissonacrobate", "araignee", "roseau", "chateaudormant"];
|
||||
const heuresDef = { "vaisseau": { label: "Vaisseau", lettreFont: 'v', saison: "printemps", heure: 0, icon: 'hd01.svg' },
|
||||
const heuresDef = {
|
||||
"vaisseau": { label: "Vaisseau", lettreFont: 'v', saison: "printemps", heure: 0, icon: 'hd01.svg' },
|
||||
"sirene": { label: "Sirène", lettreFont: 'S', saison: "printemps", heure: 1, icon: 'hd02.svg' },
|
||||
"faucon": { label: "Faucon", lettreFont: 'f', saison: "printemps", heure: 2, icon: 'hd03.svg' },
|
||||
"couronne": { label: "Couronne", lettreFont: 'C', saison: "ete", heure: 3, icon: 'hd04.svg' },
|
||||
|
|
@ -22,7 +23,8 @@ const heuresDef = { "vaisseau": { label: "Vaisseau", lettreFont: 'v', saison: "p
|
|||
"roseau": { label: "Roseau", lettreFont: 'r', saison: "hiver", heure: 10, icon: 'hd11.svg' },
|
||||
"chateaudormant": { label: "Château Dormant", lettreFont: 'c', saison: "hiver", heure: 11, icon: 'hd12.svg' }
|
||||
};
|
||||
const saisonsDef = { "printemps": { label: "Printemps"},
|
||||
const saisonsDef = {
|
||||
"printemps": { label: "Printemps" },
|
||||
"ete": { label: "Eté" },
|
||||
"automne": { label: "Automne" },
|
||||
"hiver": { label: "Hiver" }
|
||||
|
|
@ -147,10 +149,23 @@ export class RdDCalendrier extends Application {
|
|||
}
|
||||
game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral);
|
||||
}
|
||||
/* -------------------------------------------- */
|
||||
onCalendarButton(ev) {
|
||||
ev.preventDefault();
|
||||
const calendarAvance = ev.currentTarget.attributes['data-calendar-avance'];
|
||||
const calendarSet = ev.currentTarget.attributes['data-calendar-set'];
|
||||
if (calendarAvance) {
|
||||
this.incrementTime(Number(calendarAvance.value));
|
||||
}
|
||||
else if (calendarSet) {
|
||||
this.positionnerHeure(Number(calendarSet.value));
|
||||
}
|
||||
this.updateDisplay();
|
||||
}
|
||||
|
||||
/* -------------------------------------------- */
|
||||
incrementTime(minute = 0) {
|
||||
this.calendrier.minutesRelative += minute;
|
||||
incrementTime(minutes = 0) {
|
||||
this.calendrier.minutesRelative += minutes;
|
||||
if (this.calendrier.minutesRelative >= 120) {
|
||||
this.calendrier.minutesRelative -= 120;
|
||||
this.calendrier.heureRdD += 1;
|
||||
|
|
@ -212,6 +227,7 @@ export class RdDCalendrier extends Application {
|
|||
data.nomHeure = heure.label;
|
||||
data.iconHeure = dossierIconesHeures + heure.icon;
|
||||
data.nomSaison = saisonsDef[mois.saison].label;
|
||||
data.heureRdD = this.calendrier.heureRdD;
|
||||
data.minutesRelative = this.calendrier.minutesRelative;
|
||||
data.isGM = game.user.isGM;
|
||||
return data;
|
||||
|
|
@ -233,7 +249,8 @@ export class RdDCalendrier extends Application {
|
|||
let rolled = await RdDResolutionTable.rollData({
|
||||
caracValue: request.carac_vue,
|
||||
finalLevel: niveau,
|
||||
showDice: false});
|
||||
showDice: false
|
||||
});
|
||||
let nbAstral = this.getNombreAstral(request.date);
|
||||
let nbAstralFaux = nbAstral;
|
||||
request.isValid = true;
|
||||
|
|
@ -262,16 +279,14 @@ export class RdDCalendrier extends Application {
|
|||
}
|
||||
|
||||
/* -------------------------------------------- */
|
||||
getAjustementAstrologique(heureNaissance, name='inconnu')
|
||||
{
|
||||
getAjustementAstrologique(heureNaissance, name = 'inconnu') {
|
||||
let heure = Grammar.toLowerCaseNoAccent(heureNaissance);
|
||||
if (heure && heuresDef[heure]) {
|
||||
let hn = heuresDef[heure].heure;
|
||||
let chiffreAstral = this.getCurrentNombreAstral();
|
||||
let heureCourante = this.calendrier.heureRdD;
|
||||
let ecartChance = (hn + chiffreAstral - heureCourante) % 12;
|
||||
switch (ecartChance)
|
||||
{
|
||||
switch (ecartChance) {
|
||||
case 0: return 4;
|
||||
case 4: case 8: return 2;
|
||||
case 6: return -4;
|
||||
|
|
@ -322,10 +337,18 @@ export class RdDCalendrier extends Application {
|
|||
if (game.user.isGM) {
|
||||
dateHTML = dateHTML + " - NA: " + this.getCurrentNombreAstral();
|
||||
}
|
||||
document.getElementById("calendar--move-handle").innerHTML = dateHTML;
|
||||
document.getElementById("calendar-heure-texte").innerHTML = `${data.nomHeure}`;
|
||||
document.getElementById("calendar-time").innerHTML = `${data.minutesRelative} min.`;
|
||||
document.getElementById("calendar-heure-img").src = data.iconHeure;
|
||||
for (let handle of document.getElementsByClassName("calendar-move-handle")) {
|
||||
handle.innerHTML = dateHTML;
|
||||
}
|
||||
for (let heure of document.getElementsByClassName("calendar-heure-texte")) {
|
||||
heure.innerHTML = data.nomHeure;
|
||||
}
|
||||
for (const minute of document.getElementsByClassName("calendar-time-disp")) {
|
||||
minute.innerHTML = `${data.minutesRelative} minutes`;
|
||||
}
|
||||
for (const heureImg of document.getElementsByClassName("calendar-heure-img")) {
|
||||
heureImg.src = data.iconHeure;
|
||||
}
|
||||
}
|
||||
|
||||
/* -------------------------------------------- */
|
||||
|
|
@ -385,56 +408,19 @@ export class RdDCalendrier extends Application {
|
|||
|
||||
this.updateDisplay();
|
||||
|
||||
html.find('#calendar-btn-1min').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.incrementTime(1);
|
||||
this.updateDisplay();
|
||||
});
|
||||
html.find('#calendar-btn-5min').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.incrementTime(5);
|
||||
this.updateDisplay();
|
||||
});
|
||||
html.find('#calendar-btn-10min').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.incrementTime(10);
|
||||
this.updateDisplay();
|
||||
});
|
||||
html.find('#calendar-btn-20min').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.incrementTime(20);
|
||||
this.updateDisplay();
|
||||
});
|
||||
html.find('#calendar-btn-30min').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.incrementTime(30);
|
||||
this.updateDisplay();
|
||||
});
|
||||
html.find('#calendar-btn-1heure').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.incrementTime(120);
|
||||
this.updateDisplay();
|
||||
});
|
||||
html.find('#calendar-btn-vaisseau').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.positionnerHeure(0); // 0 -> vaisseau
|
||||
this.updateDisplay();
|
||||
});
|
||||
html.find('#calendar-btn-lyre').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.positionnerHeure(6); // 6 -> lyre
|
||||
this.updateDisplay();
|
||||
});
|
||||
html.find('#calendar-btn-edit').click(ev => {
|
||||
html.find('.calendar-btn').click(ev => this.onCalendarButton(ev));
|
||||
|
||||
html.find('.calendar-btn-edit').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.showCalendarEditor();
|
||||
});
|
||||
html.find('#astrologie-btn-edit').click(ev => {
|
||||
|
||||
html.find('.astrologie-btn-edit').click(ev => {
|
||||
ev.preventDefault();
|
||||
this.showAstrologieEditor();
|
||||
});
|
||||
|
||||
html.find('#calendar--move-handle').mousedown(ev => {
|
||||
html.find('#calendar-move-handle').mousedown(ev => {
|
||||
ev.preventDefault();
|
||||
ev = ev || window.event;
|
||||
let isRightMB = false;
|
||||
|
|
|
|||
|
|
@ -1058,7 +1058,7 @@ ul, li {
|
|||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
#calendar{
|
||||
.calendar{
|
||||
min-width: 150px;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
|
|
@ -1072,7 +1072,7 @@ ul, li {
|
|||
font-family: "GoudyAcc";
|
||||
z-index: 100;
|
||||
}
|
||||
#calendar-hdr{
|
||||
.calendar-hdr{
|
||||
display: grid;
|
||||
font-size: 1rem;
|
||||
margin: 3px;
|
||||
|
|
@ -1091,7 +1091,7 @@ ul, li {
|
|||
font-size: 1.10rem;
|
||||
opacity: 90;
|
||||
}
|
||||
#calendar--move-handle {
|
||||
#calendar-move-handle {
|
||||
font-family: "GoudyAcc";
|
||||
font-size: 13px;
|
||||
line-height: 1;
|
||||
|
|
@ -1101,7 +1101,7 @@ ul, li {
|
|||
border: none;
|
||||
flex: 1;
|
||||
}
|
||||
#calendar-date{
|
||||
.calendar-date{
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
float: left;
|
||||
|
|
@ -1112,11 +1112,11 @@ ul, li {
|
|||
color: #CCC;
|
||||
cursor: pointer;
|
||||
}
|
||||
#calendar-date,
|
||||
#calendar-date-num {
|
||||
.calendar-date,
|
||||
.calendar-date-num {
|
||||
transition: 0.2s;
|
||||
}
|
||||
#calendar-date-num {
|
||||
.calendar-date-num {
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
float: left;
|
||||
|
|
@ -1128,18 +1128,18 @@ ul, li {
|
|||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#calendar-heure-img{
|
||||
.calendar-heure-img{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-grow: 0;
|
||||
border-width: 0;
|
||||
opacity: 90;
|
||||
color: #CCC;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
#calendar-hdr:hover #calendar-date {
|
||||
.calendar-hdr:hover .calendar-date {
|
||||
opacity: 0;
|
||||
}
|
||||
#calendar-hdr:hover #calendar-date-num{
|
||||
.calendar-hdr:hover .calendar-date-num{
|
||||
opacity: 1;
|
||||
}
|
||||
.calendar-container{
|
||||
|
|
@ -1161,132 +1161,86 @@ ul, li {
|
|||
margin: 2px;
|
||||
grid-row-gap: 3px;
|
||||
}
|
||||
#astrologie-btn-edit,
|
||||
#calendar-btn-edit{
|
||||
.astrologie-btn-edit,
|
||||
.calendar-btn-edit{
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
margin: auto;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
#astrologie-btn-edit:hover,
|
||||
#calendar-btn-edit:hover {
|
||||
.astrologie-btn-edit:hover,
|
||||
.calendar-btn-edit:hover {
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
#calendar-btn-1min{
|
||||
.calendar-btn{
|
||||
margin: auto;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.calendar-btn:hover {
|
||||
color: rgba(255, 255, 128, 0.7);
|
||||
border: 1px solid rgba(255, 128, 0, 0.8);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-1min{
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
margin: auto;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#calendar-btn-5min{
|
||||
.calendar-5min{
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
margin: auto;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#calendar-btn-10min{
|
||||
.calendar-10min{
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
margin-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#calendar-btn-20min{
|
||||
.calendar-20min{
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
margin-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#calendar-btn-lyre{
|
||||
.calendar-lyre{
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#calendar-btn-vaisseau{
|
||||
.calendar-vaisseau{
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
#calendar-btn-30min{
|
||||
.calendar-30min{
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#calendar-btn-1heure{
|
||||
.calendar-1heure{
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
height: fit-content;
|
||||
text-align: center;
|
||||
vertical-align: center;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#calendar-btn-container-left:hover{
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
#calendar-btn-1min:hover {
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#calendar-btn-5min:hover {
|
||||
.calendar-btn-container-left:hover{
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#calendar-btn-10min:hover {
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#calendar-btn-20min:hover {
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#calendar-btn-30min:hover {
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#calendar-btn-1heure:hover {
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#calendar-btn-vaisseau:hover {
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#calendar-btn-lyre:hover{
|
||||
color: #FFF;
|
||||
border: 0px solid #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-weekday-time{
|
||||
display: grid;
|
||||
float: left;
|
||||
|
|
@ -1296,7 +1250,7 @@ ul, li {
|
|||
margin: auto;
|
||||
color: #CCC;
|
||||
}
|
||||
#calendar-weekday{
|
||||
.calendar-weekday{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
<div id="calendar-time-container">
|
||||
<div id="calendar">
|
||||
<div class="calendar">
|
||||
{{#if isGM}}
|
||||
<i id="calendar-btn-edit" class="fas fa-cog" title="Editer"></i>
|
||||
<i id="astrologie-btn-edit" class="fas fa-cog" title="Astrologie"></i>
|
||||
<i class="calendar-btn-edit fas fa-cog" title="Editer"></i>
|
||||
<i class="astrologie-btn-edit fas fa-cog" title="Astrologie"></i>
|
||||
{{/if}}
|
||||
<div id="calendar-hdr">
|
||||
<p id="calendar--move-handle" class="calendar-date-rdd" title="Deplacer">Jour {{jourMois}} de {{nomMois}} ({{nomSaison}})</p>
|
||||
<div class="calendar-hdr">
|
||||
<p id="calendar-move-handle" class="calendar-date-rdd" title="Deplacer">Jour {{jourMois}} de {{nomMois}} ({{nomSaison}})</p>
|
||||
</div>
|
||||
<div class="calendar-container">
|
||||
{{#if isGM}}
|
||||
<div class="calendar-btn-container-left">
|
||||
<i id="calendar-btn-1min" class="fas fa-angle-right" title="Avancer de 1 minute"></i>
|
||||
<i id="calendar-btn-5min" class="fas fa-angle-double-right" title="Avancer de 5 minutes"></i>
|
||||
<i id="calendar-btn-10min" class="fas fa-play" title="Avancer de 10 minutes"></i>
|
||||
<i id="calendar-btn-20min" class="fas fa-step-forward" title="Avancer de 20 minutes"></i>
|
||||
<i class="calendar-btn calendar-1min fas fa-angle-right" data-calendar-avance="1" title="Avancer de 1 minute"></i>
|
||||
<i class="calendar-btn calendar-5min fas fa-angle-double-right" data-calendar-avance="5" title="Avancer de 5 minutes"></i>
|
||||
<i class="calendar-btn calendar-10min fas fa-play" data-calendar-avance="10" title="Avancer de 10 minutes"></i>
|
||||
<i class="calendar-btn calendar-20min fas fa-step-forward" data-calendar-avance="20" title="Avancer de 20 minutes"></i>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="calendar-btn-container-left">
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="calendar-weekday-time">
|
||||
<p id="calendar-weekday"><img id="calendar-heure-img" src="{{iconHeure}}" alt="{{nomHeure}}"/> <span id="calendar-heure-texte">{{nomHeure}}</span></p>
|
||||
<span class="calendar-time isGM"><p class="calendar-time-disp" id="calendar-time" title="Start/Stop">{{heuresRelative}}:{{minutesRelative}}</p></span>
|
||||
<p class="calendar-weekday"><img class="calendar-heure-img" src="{{iconHeure}}" alt="{{nomHeure}}"/> <span class="calendar-heure-texte">{{nomHeure}}</span></p>
|
||||
<span class="calendar-time isGM"><p class="calendar-time-disp">{{minutesRelative}} minutes</p></span>
|
||||
</div>
|
||||
{{#if isGM}}
|
||||
<div class="calendar-btn-container-right">
|
||||
<i id="calendar-btn-30min" class="fas fa-forward" title="Avancer de 30 minutes" ></i>
|
||||
<i id="calendar-btn-1heure" class="fas fa-fast-forward" title="Avancer d'1 heure" ></i>
|
||||
<i id="calendar-btn-vaisseau" class="fas fa-sun" title="Avancer au Vaisseau"></i>
|
||||
<i id="calendar-btn-lyre" class="fas fa-moon" title="Avancer à Lyre"></i>
|
||||
<i class="calendar-btn calendar-30min fas fa-forward" data-calendar-avance="30" title="Avancer de 30 minutes" ></i>
|
||||
<i class="calendar-btn calendar-1heure fas fa-fast-forward" data-calendar-avance="120" title="Avancer d'1 heure" ></i>
|
||||
<i class="calendar-btn calendar-vaisseau fas fa-sun" data-calendar-set="0" title="Avancer au Vaisseau"></i>
|
||||
<i class="calendar-btn calendar-lyre fas fa-moon" data-calendar-set="6" title="Avancer à Lyre"></i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user