ezterry/Manual-Coffee-Roasting-Plan
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ezterry:7f402fcade5b3ee00070afa6501694ba0557bbc4c4162235929922e66d7492d5
Branches Tags
ezterry:main
...
compare: ezterry:b0024aec803119600c4a307d3e254fec52f019b4473d67e5ad654681adadcb40
Branches Tags
ezterry:main

2 Commits
7f402fcade ... b0024aec80

Author SHA256 Message Date
Terrence Ezrol
b0024aec80 add color updates to timer for feedback 2025-07-13 16:04:46 -04:00
Terrence Ezrol
ae874cd665 Add development percent 2025-07-13 15:47:11 -04:00
3 changed files with 79 additions and 2 deletions
Expand all files Collapse all files

18
src/roast.css
View File

@@ -15,6 +15,24 @@ body {
margin: 0; margin: 0;
} }
/* Roast phase backgrounds */
#timer.initial-phase {
background-color: #ffffff; /* white before Charge */
}
#timer.charge-phase {
background-color: #e6ffe6; /* pale green after Charge */
}
#timer.yellow-phase {
background-color: #fffdd0; /* light yellow after Yellow */
}
/* Dynamic muddy yellow-brown transition (0–40% dev) */
#timer.dev-phase {
transition: background-color 0.5s ease;
}
#create-plan { #create-plan {
padding: 20px; padding: 20px;
text-align: center; text-align: center;

5
src/roast.html
View File

@@ -6,7 +6,10 @@
<link rel="stylesheet" href="./roast.css"> <link rel="stylesheet" href="./roast.css">
</head> </head>
<body> <body>
<div id="timer">0:00</div> <div id="timer">
<span id="roastTime">0:00</span>
<span id="devPercent" style="display: none;"> (0%)</span>
</div>
<div id="create-plan"> <div id="create-plan">
<input type="text" id="plan-input" placeholder="Enter temperatures (comma separated)"> <input type="text" id="plan-input" placeholder="Enter temperatures (comma separated)">
<button onclick="setPlan()">Set Plan</button> <button onclick="setPlan()">Set Plan</button>

58
src/roast.ts
View File

@@ -6,6 +6,7 @@ let log: Array<{ time: string, event: string, temp?: number }> = [];
let targets: number[] = []; let targets: number[] = [];
let currentTargetIndex = 0; let currentTargetIndex = 0;
let interval: NodeJS.Timeout | null = null; let interval: NodeJS.Timeout | null = null;
let firstCrackTime: number | null = null;
declare global { declare global {
interface Window { interface Window {
@@ -45,9 +46,49 @@ function stopTimer(): void {
} }
function updateTimerDisplay(): void { function updateTimerDisplay(): void {
const roastTimeEl = document.getElementById("roastTime")!;
const devPercentEl = document.getElementById("devPercent")!;
const minutes = Math.floor(timer / 60); const minutes = Math.floor(timer / 60);
const seconds = timer % 60; const seconds = timer % 60;
document.getElementById("timer")!.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`; roastTimeEl.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
if (firstCrackTime !== null && timer > firstCrackTime) {
const devTime = timer - firstCrackTime;
const devRatio = Math.floor((devTime / timer) * 100);
devPercentEl.textContent = ` (${devRatio}%)`;
devPercentEl.style.display = 'inline';
} else {
devPercentEl.style.display = 'none';
}
const timerEl = document.getElementById("timer")!;
// Reset classes
timerEl.className = "";
// Determine phase
if (!log.some(e => e.event === "Charge")) {
timerEl.classList.add("initial-phase");
} else if (!log.some(e => e.event === "Yellow")) {
timerEl.classList.add("charge-phase");
} else if (firstCrackTime === null) {
timerEl.classList.add("yellow-phase");
} else {
// Development phase
timerEl.classList.add("dev-phase");
const devTime = timer - firstCrackTime;
const devRatio = Math.min(devTime / timer, 0.4); // clamp to 0–0.4
// Interpolate from yellow (255,255,208) to muddy brown (215,195,158)
const r = Math.round(255 - devRatio * 100);
const g = Math.round(255 - devRatio * 150);
const b = Math.round(208 - devRatio * 125);
timerEl.style.backgroundColor = `rgb(${r},${g},${b})`;
}
} }
function logEvent(eventName: string): void { function logEvent(eventName: string): void {
@@ -73,6 +114,10 @@ function logEvent(eventName: string): void {
tempButtons.innerHTML = ""; tempButtons.innerHTML = "";
return; return;
} }
if (eventName === "First Crack") {
firstCrackTime = timer;
}
log.push({ time: formatTime(timer), event: eventName }); log.push({ time: formatTime(timer), event: eventName });
updateLog(); updateLog();
} }
@@ -80,7 +125,18 @@ function logEvent(eventName: string): void {
function resetSystem(): void { function resetSystem(): void {
stopTimer(); stopTimer();
log = []; log = [];
timer = 0;
firstCrackTime = null;
updateLog(); updateLog();
updateTimerDisplay();
const devPercentEl = document.getElementById("devPercent")!;
devPercentEl.style.display = "none";
const timerEl = document.getElementById("timer")!;
timerEl.className = "initial-phase"; // back to white background
timerEl.style.backgroundColor = ""; // clear inline style
document.getElementById("create-plan")!.classList.remove("hidden"); document.getElementById("create-plan")!.classList.remove("hidden");
const tempButtons = document.getElementById("temp-buttons")!; const tempButtons = document.getElementById("temp-buttons")!;
tempButtons.innerHTML = ""; tempButtons.innerHTML = "";