HoloTech/timer-widget
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add parametrisation for timer vars

Browse Source
This commit is contained in:
Interitio
2026-03-14 00:13:42 +10:00
parent 3979a0f68e
commit 60e141e2ae
3 changed files with 92 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -7,7 +7,7 @@
<script src="timer.js"></script> <script src="timer.js"></script>
<title>Croccy Timer</title> <title>Croccy Timer</title>
</head> </head>
<body style="background-color: #1A1A1A;"> <body style="background-color: transparent">
<div class="timer-box"> <div class="timer-box">
<div class="timer-bg"> <div class="timer-bg">
<div class="timer-time"> <div class="timer-time">

11
timer.css
View File

@@ -1,6 +1,7 @@
:root { :root {
--break-color: #8CD5CA; --break-color: #8CD5CA;
--focus-color: #EED59F; --focus-color: #EED59F;
--bg-color: #1E202F;
--stage-color: var(--break-color); --stage-color: var(--break-color);
--clip-path: none; --clip-path: none;
} }
@@ -18,10 +19,10 @@
height: 175px; height: 175px;
width: 397px; width: 397px;
position: absolute; position: absolute;
background-color: #1E202F; background-color: var(--bg-color);
border-radius: 40px; border-radius: 40px;
outline-offset: -5px; outline-offset: -3px;
outline: dotted 10px #534F72; outline: dotted 6px #534F72;
} }
.timer-bg:before { .timer-bg:before {
content: ""; content: "";
@@ -29,8 +30,8 @@
height: 175px; height: 175px;
width: 397px; width: 397px;
border-radius: 40px; border-radius: 40px;
outline-offset: -5px; outline-offset: -3px;
outline: dotted 10px var(--stage-color); outline: dotted 6px var(--stage-color);
border-radius: 40px; border-radius: 40px;
clip-path: var(--clip-path); clip-path: var(--clip-path);
} }

119
timer.js
View File

@@ -1,12 +1,47 @@
window.addEventListener("DOMContentLoaded", () => { var renderer;
const websocket = new WebSocket("ws://adamwalsh.name:9500"); var timer;
websocket.addEventListener("open", () => { window.addEventListener("DOMContentLoaded", () => {
communicate(websocket); renderer = new TimerRenderer();
});
const queryString = window.location.search;
console.log(queryString);
// Set colours from querystring too, background, focus, break
if (queryString) {
updateTimerFromQuery(queryString)
} else {
const websocket = new WebSocket("wss://croccy.thewisewolf.dev/ws");
websocket.addEventListener("open", () => {
communicate(websocket);
});
}
}); });
function updateTimerFromQuery(queryString) {
const params = new URLSearchParams(queryString);
const block_number = parseInt(params.get('block') || 1);
const focus_length = parseInt(params.get('focus') || 50) * 60;
const break_length = parseInt(params.get('break') || 10) * 60;
const block_goal = parseInt(params.get('goal') || 0);
const focus_colour = "#" + (params.get('focuscolour') || "EED59F");
const break_colour = "#" + (params.get('breakcolour') || "8CD5CA");
const background = "#" + (params.get('background') || "1E202F");
const root = document.documentElement;
root.style.setProperty('--focus-color', focus_colour);
root.style.setProperty('--break-color', break_colour);
root.style.setProperty('--bg-color', background);
const now = new Date();
const start_at = new Date(now.getTime() - (focus_length + break_length) * 1000 * (block_number - 1));
update_timer(start_at, focus_length, break_length, block_goal);
}
class Timer { class Timer {
constructor(renderer, start_at, focus_length, break_length, block_goal) { constructor(renderer, start_at, focus_length, break_length, block_goal) {
@@ -34,20 +69,20 @@ class Timer {
get count_now() { get count_now() {
// Current actual block number. 0 for the first block, -1 if not running // Current actual block number. 0 for the first block, -1 if not running
var diff = Math.floor((new Date() - this.start_at) / 1000); var diff = Math.floor( (new Date() - this.start_at) / 1000 );
if (diff < 0) { if (diff < 0) {
return -1; return -1;
} else { } else {
var stage = Math.floor(diff / this.block_length); var stage = Math.floor( diff / this.block_length );
return stage; return stage;
} }
} }
get is_break() { get is_break() {
// Whether the current block is on break. // Whether the current block is on break.
if (this.counter < 0) { if (this.counter < 0){
return true return true
} else { } else{
return ((new Date() - this.block_start) / 1000) > this.focus_length; return ((new Date() - this.block_start) / 1000) > this.focus_length;
} }
} }
@@ -62,7 +97,7 @@ class Timer {
proportion = 0; proportion = 0;
} else { } else {
// How many seconds have passed in this block // How many seconds have passed in this block
var dur_seconds = Math.floor((new Date() - this.block_start) / 1000); var dur_seconds = Math.floor( (new Date() - this.block_start) / 1000);
if (dur_seconds < this.focus_length) { if (dur_seconds < this.focus_length) {
// How many seconds are left in the focus session // How many seconds are left in the focus session
dur_seconds = this.focus_length - dur_seconds; dur_seconds = this.focus_length - dur_seconds;
@@ -83,8 +118,14 @@ class Timer {
this.renderer.update_time(timestr); this.renderer.update_time(timestr);
this.renderer.update_proportion(proportion); this.renderer.update_proportion(proportion);
this.renderer.update_block(String(this.counter + 1) + '/' + String(this.block_goal)); let goal;
if (this.is_break) { if (this.block_goal <= 0) {
goal = "??";
} else {
goal = String(this.block_goal);
}
this.renderer.update_block(String(this.counter + 1) + '/' + String(goal));
if (this.is_break){
this.renderer.update_stage("BREAK"); this.renderer.update_stage("BREAK");
this.renderer.set_break_color(); this.renderer.set_break_color();
} else { } else {
@@ -102,14 +143,18 @@ class Timer {
if (this.is_break && !this.break_notified && this.counter >= 0) { if (this.is_break && !this.break_notified && this.counter >= 0) {
// Notify for break // Notify for break
// TODO voice alert
this.renderer.break_alert.play(); this.renderer.break_alert.play();
// TODO chat message?
console.log("Notifying Break.") console.log("Notifying Break.")
this.break_notified = true; this.break_notified = true;
} else if (this.count_now > this.counter) { } else if (this.count_now > this.counter) {
this.counter++; this.counter++;
this.break_notified = false; this.break_notified = false;
// Notify for focus // Notify for focus
// TODO voice alert
this.renderer.focus_alert.play(); this.renderer.focus_alert.play();
// TODO chat message?
console.log("Notifying Focus.") console.log("Notifying Focus.")
} }
this.render_time(); this.render_time();
@@ -118,7 +163,7 @@ class Timer {
} }
class TimerRenderer { class TimerRenderer {
constructor() { constructor (){
this.background = document.getElementsByClassName("timer-bg")[0]; this.background = document.getElementsByClassName("timer-bg")[0];
this.time_element = document.getElementsByClassName("timer-time")[0]; this.time_element = document.getElementsByClassName("timer-time")[0];
this.stage_element = document.getElementsByClassName("timer-details-stage-text")[0]; this.stage_element = document.getElementsByClassName("timer-details-stage-text")[0];
@@ -141,11 +186,11 @@ class TimerRenderer {
) )
} }
update_time(timestr) { update_time (timestr) {
this.time_element.textContent = timestr; this.time_element.textContent = timestr;
} }
update_proportion(proportion) { update_proportion (proportion) {
var bounds = rectBounds( var bounds = rectBounds(
proportion, this.bg_width, this.bg_height proportion, this.bg_width, this.bg_height
); );
@@ -155,20 +200,20 @@ class TimerRenderer {
); );
} }
update_block(blockstr) { update_block (blockstr) {
this.block_element.textContent = blockstr; this.block_element.textContent = blockstr;
} }
update_stage(stagestr) { update_stage (stagestr) {
this.stage_element.textContent = stagestr; this.stage_element.textContent = stagestr;
} }
set_break_color() { set_break_color () {
this.background.style.setProperty('--stage-color', 'var(--break-color)'); this.background.style.setProperty('--stage-color', 'var(--break-color)');
this.time_element.style.color = "var(--break-color)"; this.time_element.style.color = "var(--break-color)";
} }
set_focus_color() { set_focus_color () {
this.background.style.setProperty('--stage-color', 'var(--focus-color)'); this.background.style.setProperty('--stage-color', 'var(--focus-color)');
this.time_element.style.color = "var(--focus-color)"; this.time_element.style.color = "var(--focus-color)";
} }
@@ -182,8 +227,8 @@ function rectBounds(prop, rectHeight, rectWidth) {
if (propCircum < rectWidth / 2) { if (propCircum < rectWidth / 2) {
var xprop = Math.floor(( var xprop = Math.floor((
(rectWidth / 2 + propCircum) / rectWidth (rectWidth/2 + propCircum) / rectWidth
) * 1000) / 10; ) * 1000)/10;
bounds = [ bounds = [
"50% -5%", "50% -5%",
`${xprop}% -5%`, `${xprop}% -5%`,
@@ -201,7 +246,7 @@ function rectBounds(prop, rectHeight, rectWidth) {
]; ];
} else if (propCircum < 3 * rectWidth / 2 + rectHeight) { } else if (propCircum < 3 * rectWidth / 2 + rectHeight) {
var xprop = ( var xprop = (
((3 * rectWidth / 2 + rectHeight) - propCircum) / rectWidth ((3 * rectWidth/2 + rectHeight) - propCircum) / rectWidth
) * 100; ) * 100;
bounds = [ bounds = [
"50% -5%", "110% -5%", "50% -5%", "110% -5%",
@@ -212,7 +257,7 @@ function rectBounds(prop, rectHeight, rectWidth) {
]; ];
} else if (propCircum < 3 * rectWidth / 2 + 2 * rectHeight) { } else if (propCircum < 3 * rectWidth / 2 + 2 * rectHeight) {
var yprop = ( var yprop = (
((3 * rectWidth / 2 + 2 * rectHeight) - propCircum) / rectHeight ((3 * rectWidth/2 + 2 * rectHeight) - propCircum) / rectHeight
) * 100; ) * 100;
bounds = [ bounds = [
"50% -5%", "110% -5%", "50% -5%", "110% -5%",
@@ -223,7 +268,7 @@ function rectBounds(prop, rectHeight, rectWidth) {
]; ];
} else { } else {
var xprop = ( var xprop = (
(propCircum - (3 * rectWidth / 2 + 2 * rectHeight)) / rectWidth (propCircum - (3 * rectWidth/2 + 2 * rectHeight)) / rectWidth
) * 100; ) * 100;
bounds = [ bounds = [
"50% -5%", "110% -5%", "50% -5%", "110% -5%",
@@ -240,10 +285,7 @@ function rectBounds(prop, rectHeight, rectWidth) {
function communicate(websocket) { function communicate(websocket) {
console.log("Communicating"); console.log("Communicating");
websocket.send(JSON.stringify({ type: "init", channel: "Timer" })); websocket.send(JSON.stringify({type: "init", channel: "Timer"}));
var renderer = new TimerRenderer();
let timer;
websocket.addEventListener("message", ({ data }) => { websocket.addEventListener("message", ({ data }) => {
console.log("Rec Event " + data); console.log("Rec Event " + data);
@@ -255,17 +297,12 @@ function communicate(websocket) {
// Call the specified method // Call the specified method
switch (event.method) { switch (event.method) {
case "setTimer": case "setTimer":
if (timer != null) { update_timer(
timer.destroying = true;
}
timer = new Timer(
renderer,
new Date(args.start_at), new Date(args.start_at),
args.focus_length, args.focus_length,
args.break_length, args.break_length,
args.block_goal args.block_goal
) )
timer.tick();
break; break;
default: default:
throw new Error(`Unsupported method requested: ${event.method}.`) throw new Error(`Unsupported method requested: ${event.method}.`)
@@ -276,3 +313,17 @@ function communicate(websocket) {
} }
}); });
} }
function update_timer(start_at, focus_length, break_length, goal) {
if (timer != null) {
timer.destroying = true;
}
timer = new Timer(
renderer,
start_at,
focus_length,
break_length,
goal
)
timer.tick();
}