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 2021-03-14 16:02:31 +01:00
parent e1b10bc489
commit 432098f9c5
3 changed files with 231 additions and 291 deletions

View File

@ -8,8 +8,9 @@ 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 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' },
"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' },
@ -21,43 +22,44 @@ const heuresDef = { "vaisseau": { label: "Vaisseau", lettreFont: 'v', saison: "p
"araignee": { label: "Araignée", lettreFont: 'a', saison: "hiver", heure: 9, icon: 'hd10.svg' },
"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"},
"ete": { label: "Eté"},
"automne": { label: "Automne"},
"hiver": { label: "Hiver"}
};
};
const saisonsDef = {
"printemps": { label: "Printemps" },
"ete": { label: "Eté" },
"automne": { label: "Automne" },
"hiver": { label: "Hiver" }
};
const RDD_JOUR_PAR_MOIS = 28;
const MAX_NOMBRE_ASTRAL = 12;
/* -------------------------------------------- */
export class RdDCalendrier extends Application {
/* -------------------------------------------- */
/* -------------------------------------------- */
async initCalendrier() {
// Calendrier
this.calendrier = duplicate(game.settings.get("foundryvtt-reve-de-dragon", "calendrier"));
console.log("CALENDRIER", this.calendrier);
if ( this.calendrier == undefined || this.calendrier.moisRdD == undefined) {
if (this.calendrier == undefined || this.calendrier.moisRdD == undefined) {
this.calendrier.heureRdD = 0; // Index dans heuresList
this.calendrier.minutesRelative = 0;
this.calendrier.moisRdD = 0; // Index dans heuresList
this.calendrier.jour = 0;
if ( game.user.isGM) { // Uniquement si GM
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", this.calendrier );
if (game.user.isGM) { // Uniquement si GM
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", this.calendrier);
}
}
// position
this.calendrierPos = duplicate(game.settings.get("foundryvtt-reve-de-dragon", "calendrier-pos"));
if ( this.calendrierPos == undefined || this.calendrierPos.top == undefined) {
if (this.calendrierPos == undefined || this.calendrierPos.top == undefined) {
this.calendrierPos.top = 200;
this.calendrierPos.left = 200;
if ( game.user.isGM) { // Uniquement si GM
game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", this.calendrierPos );
if (game.user.isGM) { // Uniquement si GM
game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", this.calendrierPos);
}
}
// nombre astral
if ( game.user.isGM) {
if (game.user.isGM) {
this.listeNombreAstral = this._loadListNombreAstral();
this.rebuildListeNombreAstral(); // Ensure always up-to-date
}
@ -79,11 +81,11 @@ export class RdDCalendrier extends Application {
}
/* -------------------------------------------- */
getDateFromIndex( index = undefined ) {
if ( !index) index = this.getCurrentDayIndex();
getDateFromIndex(index = undefined) {
if (!index) index = this.getCurrentDayIndex();
let month = Math.floor(index / 28);
let day = (index - (month*28)) + 1;
return day+" "+heuresList[month];
let day = (index - (month * 28)) + 1;
return day + " " + heuresList[month];
}
/* -------------------------------------------- */
@ -92,15 +94,15 @@ export class RdDCalendrier extends Application {
}
/* -------------------------------------------- */
getCurrentDayIndex( ) {
getCurrentDayIndex() {
return (this.calendrier.moisRdD * 28) + this.calendrier.jour;
}
/* -------------------------------------------- */
getJoursSuivants( num) {
getJoursSuivants(num) {
let jours = [];
let index = this.getCurrentDayIndex();
for (let i=0; i<num; i++) {
for (let i = 0; i < num; i++) {
jours[i] = { label: this.getDateFromIndex(index), index: index };
index += 1;
}
@ -123,12 +125,12 @@ export class RdDCalendrier extends Application {
}
/* -------------------------------------------- */
getNombreAstral( indexDate ) {
getNombreAstral(indexDate) {
const liste = this.listeNombreAstral ?? this._loadListNombreAstral();
let astralData = liste.find( (nombreAstral, i) => nombreAstral.index == indexDate );
if (! astralData?.nombreAstral ) {
let astralData = liste.find((nombreAstral, i) => nombreAstral.index == indexDate);
if (!astralData?.nombreAstral) {
this.rebuildListeNombreAstral();
astralData = liste.find( (nombreAstral, i) => nombreAstral.index == indexDate );
astralData = liste.find((nombreAstral, i) => nombreAstral.index == indexDate);
}
return astralData?.nombreAstral ?? "N/A";
}
@ -137,7 +139,7 @@ export class RdDCalendrier extends Application {
rebuildListeNombreAstral() {
let jourCourant = this.getCurrentDayIndex();
let jourFin = jourCourant + 12;
let newList = [0,1,2,3,4,5,6,7,8,9,10,11].map( i => this.ajouterNombreAstral(jourCourant + i));
let newList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(i => this.ajouterNombreAstral(jourCourant + i));
if (this.listeNombreAstral) {
for (const na of this.listeNombreAstral) {
if (na && na.index >= jourCourant && na.index < jourFin) {
@ -145,34 +147,47 @@ export class RdDCalendrier extends Application {
}
}
}
game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral );
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;
if (this.calendrier.minutesRelative >= 120 ) {
incrementTime(minutes = 0) {
this.calendrier.minutesRelative += minutes;
if (this.calendrier.minutesRelative >= 120) {
this.calendrier.minutesRelative -= 120;
this.calendrier.heureRdD += 1;
}
if ( this.calendrier.heureRdD > 11 ) {
if (this.calendrier.heureRdD > 11) {
this.calendrier.heureRdD -= 12;
this.incrementerJour();
}
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier) );
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier));
// Notification aux joueurs
game.socket.emit("system.foundryvtt-reve-de-dragon", {
msg: "msg_sync_time",
data: duplicate(this.calendrier)
} );
});
}
/* -------------------------------------------- */
incrementerJour( ) {
incrementerJour() {
this.calendrier.jour += 1;
if ( this.calendrier.jour >= RDD_JOUR_PAR_MOIS) {
if (this.calendrier.jour >= RDD_JOUR_PAR_MOIS) {
this.calendrier.jour -= RDD_JOUR_PAR_MOIS;
if ( this.calendrier.jour <= 0)
if (this.calendrier.jour <= 0)
this.calendrier.jour = 0;
this.calendrier.moisRdD += 1;
// Reconstruire les nombres astraux
@ -181,22 +196,22 @@ export class RdDCalendrier extends Application {
}
/* -------------------------------------------- */
syncPlayerTime( calendrier ) {
syncPlayerTime(calendrier) {
this.calendrier = duplicate(calendrier); // Local copy update
this.updateDisplay(); // Then update
}
/* -------------------------------------------- */
positionnerHeure( indexHeure ) {
if ( indexHeure <= this.calendrier.heureRdD )
positionnerHeure(indexHeure) {
if (indexHeure <= this.calendrier.heureRdD)
this.incrementerJour();
this.calendrier.heureRdD = indexHeure;
this.calendrier.minutesRelative = 0;
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier) );
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier));
}
/* -------------------------------------------- */
fillCalendrierData( data = {} ) {
fillCalendrierData(data = {}) {
let moisKey = heuresList[this.calendrier.moisRdD];
let heureKey = heuresList[this.calendrier.heureRdD];
@ -212,66 +227,66 @@ 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;
}
/* -------------------------------------------- */
getLectureAstrologieDifficulte( dateIndex ) {
getLectureAstrologieDifficulte(dateIndex) {
let indexNow = this.getCurrentDayIndex();
let diffDay = dateIndex - indexNow;
return - Math.floor(diffDay / 2);
}
/* -------------------------------------------- */
async requestNombreAstral( request) {
if ( game.user.isGM) { // Only GM
console.log( request );
let jourDiff = this.getLectureAstrologieDifficulte( request.date);
async requestNombreAstral(request) {
if (game.user.isGM) { // Only GM
console.log(request);
let jourDiff = this.getLectureAstrologieDifficulte(request.date);
let niveau = Number(request.astrologie.data.niveau) + Number(request.conditions) + Number(jourDiff) + Number(request.etat);
let rolled = await RdDResolutionTable.rollData({
caracValue: request.carac_vue,
finalLevel: niveau,
showDice: false});
let nbAstral = this.getNombreAstral( request.date );
showDice: false
});
let nbAstral = this.getNombreAstral(request.date);
let nbAstralFaux = nbAstral;
request.isValid = true;
request.rolled = rolled;
if ( !rolled .isSuccess ) {
if (!rolled.isSuccess) {
request.isValid = false;
while ( nbAstralFaux == nbAstral ) {
while (nbAstralFaux == nbAstral) {
nbAstralFaux = new Roll("1d12").roll().total;
}
nbAstral = nbAstralFaux;
// Mise à jour des nombres astraux du joueur
let astralData = this.listeNombreAstral.find( (nombreAstral, i) => nombreAstral.index == request.date );
astralData.valeursFausses.push( {actorId: request.id, nombreAstral: nbAstralFaux});
game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral );
let astralData = this.listeNombreAstral.find((nombreAstral, i) => nombreAstral.index == request.date);
astralData.valeursFausses.push({ actorId: request.id, nombreAstral: nbAstralFaux });
game.settings.set("foundryvtt-reve-de-dragon", "liste-nombre-astral", this.listeNombreAstral);
}
request.nbAstral = nbAstral;
if ( game.user.isGM) {
RdDUtility.responseNombreAstral( request );
if (game.user.isGM) {
RdDUtility.responseNombreAstral(request);
} else {
game.socket.emit("system.foundryvtt-reve-de-dragon", {
msg: "msg_response_nombre_astral",
data: request
} );
});
}
}
}
/* -------------------------------------------- */
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)
{
let ecartChance = (hn + chiffreAstral - heureCourante) % 12;
switch (ecartChance) {
case 0: return 4;
case 4: case 8: return 2;
case 6: return -4;
@ -290,7 +305,7 @@ export class RdDCalendrier extends Application {
this.fillCalendrierData(data);
this.setPos( this.calendrierPos );
this.setPos(this.calendrierPos);
return data;
}
@ -301,8 +316,8 @@ export class RdDCalendrier extends Application {
let elmnt = document.getElementById("calendar-time-container");
if (elmnt) {
elmnt.style.bottom = null;
let xPos = (pos.left) > window.innerWidth ? window.innerWidth-200 : pos.left;
let yPos = (pos.top) > window.innerHeight-20 ? window.innerHeight-100 : pos.top;
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();
@ -316,25 +331,33 @@ export class RdDCalendrier extends Application {
/* -------------------------------------------- */
updateDisplay() {
let data = this.fillCalendrierData( );
let data = this.fillCalendrierData();
// Rebuild data
let dateHTML = `Jour ${data.jourMois} de ${data.nomMois} (${data.nomSaison})`;
if (game.user.isGM) {
dateHTML = dateHTML + " - NA: "+this.getCurrentNombreAstral();
dateHTML = dateHTML + " - NA: " + this.getCurrentNombreAstral();
}
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;
}
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;
}
/* -------------------------------------------- */
saveEditeur( calendrierData ) {
saveEditeur(calendrierData) {
this.calendrier.minutesRelative = Number(calendrierData.minutesRelative);
this.calendrier.jour = Number(calendrierData.jourMois) - 1;
this.calendrier.moisRdD = heuresList.findIndex(mois => mois === calendrierData.moisKey);
this.calendrier.heureRdD = heuresList.findIndex(heure => heure === calendrierData.heureKey);; // Index dans heuresList
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier) );
game.settings.set("foundryvtt-reve-de-dragon", "calendrier", duplicate(this.calendrier));
this.rebuildListeNombreAstral();
@ -343,36 +366,36 @@ export class RdDCalendrier extends Application {
/* -------------------------------------------- */
async showCalendarEditor() {
let calendrierData = duplicate( this.fillCalendrierData( ) );
if ( this.editeur == undefined ) {
let calendrierData = duplicate(this.fillCalendrierData());
if (this.editeur == undefined) {
calendrierData.jourMoisOptions = Array(28).fill().map((item, index) => 1 + index);
calendrierData.heuresOptions = [0, 1];
calendrierData.minutesOptions = Array(120).fill().map((item, index) => 0 + index);
let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-editor-template.html', calendrierData );
this.editeur = new RdDCalendrierEditeur(html, this, calendrierData )
let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-editor-template.html', calendrierData);
this.editeur = new RdDCalendrierEditeur(html, this, calendrierData)
}
this.editeur.updateData( calendrierData );
this.editeur.updateData(calendrierData);
this.editeur.render(true);
}
/* -------------------------------------------- */
async showAstrologieEditor() {
let calendrierData = duplicate( this.fillCalendrierData( ) );
let calendrierData = duplicate(this.fillCalendrierData());
let astrologieArray = [];
for (let astralData of this.listeNombreAstral ) {
astralData.humanDate = this.getDateFromIndex( astralData.index );
for (let astralData of this.listeNombreAstral) {
astralData.humanDate = this.getDateFromIndex(astralData.index);
for (let vf of astralData.valeursFausses) {
let actor = game.actors.get( vf.actorId);
console.log(vf.actorId, actor );
let actor = game.actors.get(vf.actorId);
console.log(vf.actorId, actor);
vf.actorName = (actor) ? actor.name : "Inconnu";
}
astrologieArray.push( duplicate(astralData ) );
astrologieArray.push(duplicate(astralData));
}
//console.log("ASTRO", astrologieArray);
calendrierData.astrologieData = astrologieArray;
let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-astrologie-template.html', calendrierData );
let astrologieEditeur = new RdDAstrologieEditeur(html, this, calendrierData )
astrologieEditeur.updateData( calendrierData );
let html = await renderTemplate('systems/foundryvtt-reve-de-dragon/templates/calendar-astrologie-template.html', calendrierData);
let astrologieEditeur = new RdDAstrologieEditeur(html, this, calendrierData)
astrologieEditeur.updateData(calendrierData);
astrologieEditeur.render(true);
}
@ -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;
@ -479,26 +465,26 @@ export class RdDCalendrier extends Application {
elmnt.onmousedown = null;
document.onmouseup = null;
document.onmousemove = null;
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)
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)){
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("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos) );
if (game.user.isGM) {
game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos));
}
}
}
} else if(isRightMB){
} else if (isRightMB) {
game.system.rdd.calendrier.calendrierPos.top = 200;
game.system.rdd.calendrier.calendrierPos.left = 200;
if ( game.user.isGM) {
game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos) );
if (game.user.isGM) {
game.settings.set("foundryvtt-reve-de-dragon", "calendrier-pos", duplicate(game.system.rdd.calendrier.calendrierPos));
}
this.setPos(game.system.rdd.calendrier.calendrierPos);
}

View File

@ -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;

View File

@ -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}}"/>&nbsp;<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}}"/>&nbsp;<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>