@Axel51 I did a bunch of small changes to the JS like adding extra class names, adding extra wrappers, and removing the sounds because I found them annoying. The extra class names and wrappers helped me with the css. Hopefully the css variables are self-explanatory that it still makes sense.
Let me know if you need me to clarify anything!
Here’s the .css code
.MMM-KitchenTimer div {
display: grid;
}
.MMM-KitchenTimer .text {
font-family: var(--font-primary);
font-weight: 300;
font-size: 12rem;
color: var(--secondary-background-color);
text-align: center;
line-height: 1;
}
.MMM-KitchenTimer .paused {
color: rgba(255, 255, 255, 0.6);
}
.MMM-KitchenTimer .button {
font-size: 20px;
font-weight: 300;
display: flex;
align-items: center;
justify-content: center;
min-width: 6rem;
aspect-ratio: 1;
border-radius: 100px;
background-color: var(--primary-background-color);
color: var(--primary-foreground-color);
backdrop-filter: blur(var(--blur));
-webkit-backdrop-filter: blur(var(--blur));
}
.MMM-KitchenTimer .list-container {
display: flex !important;
justify-content: center;
gap: 1rem;
}
Here’s the .js code
/* global Log, Module, moment, config */
/* Magic Mirror
* Module: Kitchen timers
*
* By Tom Short
* MIT Licensed.
*/
Module.register("MMM-KitchenTimer",{
// Module config defaults.
defaults: {
timertext: ["1m", "5m", "20m"],
timersecs: [60, 300, 1200],
},
// Define required scripts.
getScripts: function() {
return [];
},
// Define styles.
getStyles: function() {
return ["MMM-KitchenTimer.css"];
},
// Define start sequence.
start: function() {
Log.info("Starting module: " + this.name);
// Schedule update.
setTimeout(function() {
self.getDom();
}, 1000);
},
// Override dom generator.
getDom: function() {
var time = 0, startTime, interval, alarm;
function start() {
if (!interval) {
startTime = Date.now();
interval = setInterval(update, 1000);
}
display();
}
function pause() {
if (interval) {
timerText.className = "text paused";
sound.pause();
clearInterval(interval);
interval = null;
}
}
function update() {
time -= delta();
display();
}
function addSeconds(value) {
time += value;
}
function delta() {
var now = Date.now(),
d = now - startTime;
startTime = now;
return d / 1000;
}
function stop() {
pause();
time = 0;
display();
}
function pad(val) {
var str = "00";
return str.substring(0, str.length - String(val).length) + val;
}
function display() {
var secs = Math.round(Math.abs(time % 60));
var mins = Math.abs(Math.trunc(time / 60) % 60);
var hours = Math.abs(Math.trunc(time / 3600));
var sign = Math.sign(time);
if (time > 0) {
timerText.className = "text positive";
} else if (time < 0) {
timerText.className = "text negative";
} else {
timerText.className = "text";
}
timerText.innerHTML =
(time < 0 ? "-" : "") +
(hours > 0 ? hours+":" : "") +
pad(mins,2) + ":" + pad(secs,2);
}
var timerText = document.createElement("span");
var wrapper = document.createElement("div");
wrapper.appendChild(timerText);
var wrapper2 = document.createElement("section");
wrapper2.className = "list-container";
// Create buttons
for (var i=0; i<this.config.timertext.length; i++) {
var el = document.createElement("div");
el.className = "button";
el.innerHTML = this.config.timertext[i];
el.counter = i;
var self = this;
el.addEventListener("click", function(event) {
addSeconds(self.config.timersecs[this.counter]);
start();
});
wrapper2.appendChild(el);
};
const sound = document.createElement('audio');
sound.src = this.file("alarm.wav");
sound.setAttribute('autoplay', true);
sound.setAttribute('loop', true);
sound.pause();
const beep = document.createElement('audio');
beep.src = this.file("beep.wav");
beep.volume = 0.2;
beep.pause();
display();
timerText.addEventListener("click", function(event) {
if (interval) {
pause();
} else if (time != 0) {
start();
}
});
var stopButton = document.createElement("div");
stopButton.className = "button stop";
stopButton.innerHTML = "X";
stopButton.addEventListener("click", stop);
wrapper2.appendChild(stopButton);
wrapper.appendChild(wrapper2);
return wrapper;
}
});
