Colour coding grammar points by SRS progress

Bunpro
#1

The past few years I haven’t been studying Japanese much. Coming back to Bunpro again I’m trying to go through all my grammar and review what terms I need to revise or even start from scratch again.

There are small tags on each grammar for the SRS progress, but I find it really hardto quickly asses the SRS progress of each item as I scan through the tabs.

Right now I’m using a userscript generated by ChatGPT to implement this but I think it would be a really helpful feature to have. Below you can see the before and after difference:

image
image1920×919 105 KB

image
image1920×919 107 KB

I also find it really satisfying to see which items have been mastered.

image
image1920×919 81.7 KB

18 Likes
#2

I agree. Will see if we can make this slightly more visually separatable.
No promises tho!

9 Likes
#3

Nice idea! :smiley:
I wonder about even color-coding the entire tiles.

By the way, congratulations on reaching the level your username foretold :tada:

6 Likes
#4

Thanks! That was my original version but I preferred something a bit more subtle.

image
image1920×919 127 KB

If anyone wanted to try this you can use this userscript:

Bunpro SRS Card Border Highlight

// ==UserScript==
// @name         Bunpro SRS Card Border Highlight
// @namespace    https://greasyfork.org/users/230700
// @version      1.0.0
// @description  Add a coloured highlight to Bunpro grammar cards by SRS stage
// @author       Ambo100
// @match        *://bunpro.jp/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const STYLE_ID = 'ambo-bunpro-srs-card-border-css-only';
    if (document.getElementById(STYLE_ID)) return;

    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = `
        /* Base card styling */
        li[id^="grammar_point-id-"] a.group,
        li[id^="related-content-"] button.group {
            border-left: 4px solid transparent !important;
            border-radius: 0 !important;
        }

        /* Unlearned: no real Bunpro SRS badge present */
        li[id^="grammar_point-id-"]:not(:has(span[class*="bg-srs-"] svg[data-name="BUNPRO"])) a.group,
        li[id^="related-content-"]:not(:has(span[class*="bg-srs-"] svg[data-name="BUNPRO"])) button.group {
            border-left-color: #4b5563 !important;
        }

        /* Beginner */
        li[id^="grammar_point-id-"]:has(span[class*="bg-srs-beginner"] svg[data-name="BUNPRO"]) a.group,
        li[id^="related-content-"]:has(span[class*="bg-srs-beginner"] svg[data-name="BUNPRO"]) button.group {
            border-left-color: #8a8a8a !important;
        }

        /* Adept */
        li[id^="grammar_point-id-"]:has(span[class*="bg-srs-adept"] svg[data-name="BUNPRO"]) a.group,
        li[id^="related-content-"]:has(span[class*="bg-srs-adept"] svg[data-name="BUNPRO"]) button.group {
            border-left-color: #3b82f6 !important;
        }

        /* Seasoned */
        li[id^="grammar_point-id-"]:has(span[class*="bg-srs-seasoned"] svg[data-name="BUNPRO"]) a.group,
        li[id^="related-content-"]:has(span[class*="bg-srs-seasoned"] svg[data-name="BUNPRO"]) button.group {
            border-left-color: #22c55e !important;
        }

        /* Expert */
        li[id^="grammar_point-id-"]:has(span[class*="bg-srs-expert"] svg[data-name="BUNPRO"]) a.group,
        li[id^="related-content-"]:has(span[class*="bg-srs-expert"] svg[data-name="BUNPRO"]) button.group {
            border-left-color: #a855f7 !important;
        }

        /* Master */
        li[id^="grammar_point-id-"]:has(span[class*="bg-srs-master"] svg[data-name="BUNPRO"]) a.group,
        li[id^="related-content-"]:has(span[class*="bg-srs-master"] svg[data-name="BUNPRO"]) button.group {
            border-left-color: #f59e0b !important;
        }
    `;

    document.head.appendChild(style);
})();
7 Likes