New Seasonal Valentine's Theme by amah853 · Pull Request #126 · nicolaschan/bell

amah853 · 2026-01-20T20:09:21Z

This pull request adds several new themes to the bell schedule countdown app and improves the way seasonal and debug themes are handled. The most significant changes are the addition of new color themes (including special effects for some), updates to the theme manager to support these themes, and a minor documentation cleanup.

Theme Addition:

Added new theme: Valentines. The Valentines theme includes a seasonal activation (February only) and interactive animated heart effects.
Updated ThemeManager.ts to import and register the new themes, making them available in the app.

Theme Availability and Debugging:

Added a debug mode to ThemeManager that allows developers to enable all themes by visiting the app on localhost with a mode=debug URL parameter. This makes it easier to test seasonal and special themes outside their normal activation periods.

Note: Debug mode ONLY works if the instance is being hosted on localhost or 127.0.0.1.

You can preview the Valentines theme here:

amah853 · 2026-01-20T20:09:44Z

@nicolaschan

amah853 · 2026-01-20T20:10:05Z

@copilot please review

amah853 · 2026-01-22T03:56:45Z

heres an updated screenshot for the heart timer:

…e floating hearts slightly bigger

amah853 · 2026-01-26T14:17:14Z

@nicolaschan the duplicate commits have been fixed :)

Removed unnecessary blank lines for cleaner code.

amah853 · 2026-01-27T01:56:30Z

@nicolaschan I cleaned up the whitespace on lines 126, 129, 133, and 140. The tests should pass now if you try it again!

nicolaschan · 2026-01-27T02:38:08Z

Thanks for the effort here @amah853! It's a pretty effect. I think with a few tweaks for accessibility and edge cases plus a few code cleanups we'll be good to go.

amah853 · 2026-01-27T02:41:43Z

Sounds good! I just saw the updated test results and am working on them now. Copilot explained it was a formatting issue and some trailing whitespace, so I'll fix that and get back to you.

Would you like me to work on the accessibility and edge cases or is that something you were planning to do? I have no problem implementing them-- just asking.

@nicolaschan

nicolaschan · 2026-01-27T02:44:36Z

Go ahead! I think you're in a better position to consider how you'd like it to look since you're the original author

…ns/21381506019/job/61551523008?pr=126)

nicolaschan · 2026-01-27T02:48:20Z

By the way, you should be able to run the tests and lint locally. See the commands to use in .github/workflows/test.yaml

nicolaschan

Here’s my detailed feedback. Meant to submit it yesterday but forgot to hit send, sorry!

nicolaschan · 2026-01-27T01:47:57Z

+  drawHeartCountdown: drawHeartCountdown,
+  enabled: (secrets) => {
+    const now = new Date()
+    return (now.getMonth() + 1) === 2 // February


I'd expect Valentine's day theme to be only on Valentine's day

Or maybe if Valentine's day is on the weekend we could do the week leading up to it. Continuing to show Valentine's day after it has passed feels odd.

Yes, but I also want users to see the theme for more then one day? How about Feb 9-Feb 19? That gives them a 10 day window with Valentine's being directly in the middle of that.

How about 10 days ending on Valentine's day? That way it won't continue occurring after Valentines' day which I think is odd.

That would also match the behavior of the Halloween theme well: https://github.com/nicolaschan/bell/blob/6727149a96c7d0095b74c06cdc2deaa048dedc63/src/themes/Halloween.js#L9C1-L9C63

nicolaschan · 2026-01-27T01:57:57Z

    }
  }

+  private isDebugMode (): boolean {


This is useful but can we separate it into another PR? I think we should actually solve this with the existing enableDevMode so that you can mock the time and see the themes available. This would let you E2E test that your theme appears on the right dates too.

Right now this is how I mock the time in the JS console:

bellTimer.correctedDate.enableDevMode(new Date('2026-02-16 9:20'), 0)

We should update the theme available function in the seasonal themes to take the actual bellTimer instance instead of using new Date().

Ohh, didn't see this in the codebase. I'll remove the debug mode.

nicolaschan · 2026-01-27T02:03:13Z

+  // Check if current theme is Valentines
+  if (themeManager.currentTheme.name === 'Valentines') {
+    // Draw heart countdown instead of circle - same size and behavior
+    Valentines.drawHeartCountdown(ctx, posX, posY, radius, proportion)


I appreciate the creativity but there are a few problems with this that make me think we should keep the circle.

With a circle, the angle matches the area. If there's 10% of the time remaining you see 10% of the circle's area. With a heart, that no longer holds so at a glance the proportion of time remaining is misleading, especially near the beginning/end of the period.

The heart outline results in poor contrast (see the screenshot). I'm straining my eyes trying to make it out against the background and also read the text layered on top of it.

This isn't the right place to put the heart draw code. The UI shouldn't depend directly on a concrete theme. Instead if we were to do this, we should abstract out a common interface for the themes so we don't have to special case a theme in the UI rendering code.

Yea, I see how that might be hard to read when the theme gets darker. I'll change it back to a circle, it was more of a last-minute idea and not really that important to me.

nicolaschan · 2026-01-27T02:10:45Z

+  theme: BasicColorTheme(
+    ColorSchemeTransformations.fromObjectStrings,
+    BasicTiming,
+    [{


Some of these color choices have very low contrast which makes it hard to read, especially if you have poor eyesight, bad lighting, or a bad screen.

Can we check each color combination and ensure all of the text on all of the combinations are easily readable?

You can use this in the JS console to mock the time to check them:

bellTimer.correctedDate.enableDevMode(new Date('2026-02-16 9:21'), 0)

nicolaschan · 2026-01-27T02:18:26Z

+}
+
+module.exports = {
+  name: 'Valentines',


nit: "Valentine's"

nicolaschan · 2026-01-27T02:20:31Z

+      ctx.globalAlpha = heart.opacity
+      ctx.fillStyle = heart.clicked ? '#ffffff' : heart.color
+
+      // Calculate pulse scale (subtle pulse between 0.9 and 1.1)


No need to comment obvious code.

Such comments don't add much value and tend to get out of date with changes, which I think this one already is because the next line looks like it will vary between 0.7 and 1.3 not 0.9 and 1.1.

That's because I changed the pulse scale later and forget to fix the comment. Regardless, I'll remove the comment.

nicolaschan · 2026-01-27T02:22:07Z

+      drawHeart(ctx, heart.x, heart.y, currentSize * pulseScale, heart.rotation)
+      ctx.fill()
+
+      if (heart.y > window.innerHeight + 50) {


What's the magic + 50 from? If it's important, let's give it a variable name.

nicolaschan · 2026-01-27T02:24:03Z

+    canvas.addEventListener('mousedown', (e) => {
+      for (const heart of hearts) {
+        const distance = Math.sqrt(Math.pow(heart.x - e.x, 2) + Math.pow(heart.y - e.y, 2))
+        if (distance < heart.size) {


Trying this out I noticed that the hitbox doesn't match the heart size. When I clicked large hearts near the edge but still within the heart it didn't register.

Looking at this code I think that's because heart.size is just the base size but it may be scaled upon render to appear larger than the heart.size.

nicolaschan · 2026-01-27T02:25:38Z

+      const currentSize = heart.clicked ? heart.size * 1.5 : heart.size
+
+      drawHeart(ctx, heart.x, heart.y, currentSize * pulseScale, heart.rotation)
+      ctx.fill()


Should this be part of drawing the heart in drawHeart?

nicolaschan · 2026-01-27T02:32:04Z

+      hearts.add({ 
+        x: Math.random() * window.innerWidth, 
+        y: -20,
+        size: 30 + Math.random() * 30,


What should we do about hearts covering up the text, especially on mobile where the screen is small but the hearts are the same size as on desktop?

Idk, I thought this looked nice but I can see how it might be intrusive. I'll model the hearts to be underneath the text.

… range, and ensure colors have enough contrast

amah853 · 2026-02-02T01:25:53Z

@nicolaschan when I ran the changes locally it passed 101 of 102 tests, and the failing part is not caused by my changes to the Valentine's theme. Do you want me to fix it, even though its unrelated to this PR?

the error is in BellTimer-test.js at line 34. The error "Cannot read property 'should' of undefined"

nicolaschan · 2026-02-02T01:30:42Z

If it's unrelated it would be better to put in a separate PR. But the CI works on the master branch so I think it is probably an issue with your local setup.

amah853 · 2026-02-02T01:33:23Z

bell % yarn lint 2>&1 | tail -20 yarn run v1.22.22 $ standard && tslint -e "**/*.js" --project . standard: Use JavaScript Standard Style (https://standardjs.com) standard: Run standard --fix to automatically fix some problems. /Users/AhmadGamer/Projects/bell/src/BellTimer.js:14:3: Block must not be padded by blank lines. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm running ChromeHeadless for my tests not Firefox, so that's probably the issue. Also, I forgot to run lint tests 😅
It's passing on my machine (other then the issue above)

amah853 · 2026-02-02T01:34:37Z

Github Actions is outputting the same error:

yarn run v1.22.22 $ standard && tslint -e "**/*.js" --project . standard: Use JavaScript Standard Style (https://standardjs.com/) standard: Run standard --fix to automatically fix some problems. /home/runner/work/bell/bell/src/BellTimer.js:14:3: Block must not be padded by blank lines. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. Error: Process completed with exit code 1.

nicolaschan · 2026-02-02T01:36:13Z

It looks like it's because you removed the devMode method in BellTimer.js in this PR

amah853 · 2026-02-02T01:48:28Z

Ohhh, submitting a fix now!

amah853 · 2026-02-02T20:11:31Z

@nicolaschan ready to merge?

nicolaschan · 2026-02-02T20:54:15Z

Can you please do a line-by-line self review of your changes before asking me to review again?

There are some obvious issues I don't think you intend to be there.

amah853 added 3 commits January 23, 2026 07:32

Add Valentines theme with falling hearts animation

361df69

Replace background timer with a heart on the valentines theme and mak…

43df4c6

…e floating hearts slightly bigger

change back to feb

91c79f3

amah853 force-pushed the valentines branch from af54c23 to 91c79f3 Compare January 23, 2026 13:32

Clean up whitespace in Valentines.js

b8d2dbd

Removed unnecessary blank lines for cleaner code.

Fix formatting issues (https://github.com/nicolaschan/bell/actions/ru…

726da74

…ns/21381506019/job/61551523008?pr=126)

nicolaschan reviewed Jan 27, 2026

View reviewed changes

amah853 added 2 commits January 30, 2026 07:41

Refactor Valentines theme logic and remove debug code

c663390

adjust heart clicking to match the current rendered size, update date…

ebd072f

… range, and ensure colors have enough contrast

Updated fix for lint tests

3aefa9a

all tests now pass

0a48f6f

Merge branch 'master' into valentines

5ab2b7f

Conversation

amah853 commented Jan 20, 2026

Uh oh!

amah853 commented Jan 20, 2026

Uh oh!

amah853 commented Jan 20, 2026

Uh oh!

amah853 commented Jan 22, 2026

Uh oh!

amah853 commented Jan 26, 2026

Uh oh!

amah853 commented Jan 27, 2026

Uh oh!

nicolaschan commented Jan 27, 2026

Uh oh!

amah853 commented Jan 27, 2026

Uh oh!

nicolaschan commented Jan 27, 2026

Uh oh!

nicolaschan commented Jan 27, 2026

Uh oh!

nicolaschan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

amah853 commented Feb 2, 2026

Uh oh!

nicolaschan commented Feb 2, 2026

Uh oh!

amah853 commented Feb 2, 2026

Uh oh!

amah853 commented Feb 2, 2026

Uh oh!

nicolaschan commented Feb 2, 2026

Uh oh!

amah853 commented Feb 2, 2026

Uh oh!

amah853 commented Feb 2, 2026

Uh oh!

nicolaschan commented Feb 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects