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);
} }

73
timer.js
View File

@@ -1,12 +1,47 @@
var renderer;
var timer;
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
const websocket = new WebSocket("ws://adamwalsh.name:9500"); 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", () => { websocket.addEventListener("open", () => {
communicate(websocket); 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) {
@@ -83,7 +118,13 @@ 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.block_goal <= 0) {
goal = "??";
} else {
goal = String(this.block_goal);
}
this.renderer.update_block(String(this.counter + 1) + '/' + String(goal));
if (this.is_break){ if (this.is_break){
this.renderer.update_stage("BREAK"); this.renderer.update_stage("BREAK");
this.renderer.set_break_color(); this.renderer.set_break_color();
@@ -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();
@@ -242,9 +287,6 @@ 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);
const event = JSON.parse(data); const event = JSON.parse(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();
}