[Userscript] Book Club Tracker

[Hubbit200]

→ → → → Install Here ← ← ← ←

(Requires script extension such as Tampermonkey)

This script adds a book club tracker panel, where you can keep track of any book clubs you’re in.

• Click on a week to toggle between incomplete / complete
• The current week will be highlighted, and any you’ve missed will turn red
• Click the title to go to the main forum thread, or the link below for the vocab sheet
• Toggle a book club active / inactive by clicking the active / inactive button

To add book clubs:

• Automatically (go to a book club community page - the home thread - and click the add button by the title. Does not always work!
• Manually
• Copy-pasting a JSON string in this format:
  E.g. for the Horimiya book club

{
    "title": "Horimiya",
    "url": "https://community.wanikani.com/t/%E3%83%9B%E3%83%AA%E3%83%9F%E3%83%A4-%E3%83%BB-horimiya-absolute-beginner-book-club/62664",
    "vocabListUrl": "https://docs.google.com/spreadsheets/d/1ofa8HV6l6lGcdj8peCmuzE7yaQvpNjHDZPAY2VJVlE0/edit#gid=1130416198",
    "totalPages": 178,
    "weeksInfo": [
        {"startPage": 5, "startDate": "2023-08-26"},
        {"startPage": 12, "startDate": "2023-09-02"},
        {"startPage": 17, "startDate": "2023-09-09"},
        {"startPage": 22, "startDate": "2023-09-16"},
        {"startPage": 32, "startDate": "2023-09-23"},
        {"startPage": 41, "startDate": "2023-09-30"},
        {"startPage": 60, "startDate": "2023-10-07"},
        {"startPage": 70, "startDate": "2023-10-14"},
        {"startPage": 81, "startDate": "2023-10-21"},
        {"startPage": 94, "startDate": "2023-10-28"},
        {"startPage": 107, "startDate": "2023-11-04"},
        {"startPage": 122, "startDate": "2023-11-11"},
        {"startPage": 132, "startDate": "2023-11-18"},
        {"startPage": 148, "startDate": "2023-11-25"},
        {"startPage": 162, "startDate": "2023-12-02"}
    ]
}

Feel free to share any suggestions you have! There’s a lot more I want to add to this script, but thought I’d post the first functional version in case anyone finds it useful

Version History

• 0.3.0: Initial release
• 0.3.1 - 0.3.4: Lots of fixes and small improvements
• 0.3.5: Add notification badges to dashboard button (warning = missed, hourglass = to-do)
• 0.4.0 - 0.4.3: Move panel to the Dashboard page, allow book club editing
• 0.5.0: Add book club button on community book club pages, date fixes
• 0.5.5: Add book club reordering buttons, more date fixes
• 0.5.6 - 0.6.6 Many fixes, Natively Forums support, compact mode, etc.

[ChristopherFritz]

Minor bug: browser back button

If you click on one of the Readers (something I did not know existed), then use the browser’s “Back” functionality, the tracker adds again.

Here’s where I went back and forth a few times:

Edit: Forgot to mention, this script is a great idea, and I’m looking into whether it’s something I may be able to utilize =D

[Hubbit200]

Oh - not sure how I missed that. I think I know how to solve it, will get it sorted asap. Thanks for the report!

@ChristopherFritz

on one of the Readers (something I did not know existed)

Yes, I wish they’d do something more with them… Right now they’re pretty barebones, without even an option for furigana!

[Hubbit200]

Should be fixed in the just-released 0.3.4!
Let me know if you have any ideas for features you think would be useful!

[ChristopherFritz]

I've been a bit deprived of writing code recently, so I partially wrote something that can work with this.

Disclaimers:

• This is incomplete.
• I only tested it with one book club post (most recent Soredemo volume).
• Support for page counts is not implemented.
• Use of end-of-lines semi-colons is not consistent as I normally don’t add them, but tried to for this.
• I probably won’t update this further.

Anyone, feel free to utilize/expand this in any way if you’d like.

class BookClub {
  constructor(Title, Url, VocabListUrl, TotalPages, WeekInfo) {
    this.title = Title;
    this.url = Url;
    this.vocabListUrl = VocabListUrl;
    this.totalPages = TotalPages;
    this.weeksInfo = WeekInfo;
  }
}

class WeekInfo {
  constructor(StartPage, StartDate) {
    this.startPage = StartPage;
    this.startDate = StartDate;
  }
}

Date.prototype.addDays = function(days) {
    var date = new Date(this.valueOf());
    date.setDate(date.getDate() + days);
    return date;
}

// Try and get the volume name from the title bar.  This is extremely basic logic and may fail in various cases.
let title = document.title.split(' ', 2)[0];
let url = window.location.href;

let vocabListElement = document.querySelector('a[href^="https://docs.google.com/spreadsheets/d/"]');
let vocabListUrl = '';
if (vocabListElement) {
  vocabListUrl = vocabListElement.href;
}

// What are the chances the first table isn't the schedule?
let scheduleTable = document.querySelector('table:has(thead)');

let weeksInfo = []

if (scheduleTable) {

  // This likely will fail on many schedule tables.

  // Get the number of rows minus the header.
  let weekCount = scheduleTable.querySelectorAll('tr').length - 1

  // Get the date of the first week.
  let weekStartDate = null;
  let startPage = null;

  let thElements = scheduleTable.querySelectorAll('th');
  for (var i = 0; i < thElements.length; i++) {
    switch(thElements[i].textContent) {
      case 'Start Date':

        // Get the thread's post date.
        //const threadDate = new Date(Date.parse(document.querySelector('#post_1').querySelector('a.post-date').querySelector('span').title))
        const threadDate = new Date(Date.parse("Decr 1, 2022"))

        weekStartDate = new Date(Date.parse(scheduleTable.querySelector('tr:has(td)').querySelectorAll('td')[i].textContent));
        weekStartDate.setFullYear(threadDate.getFullYear());

        // Handle if the thread was posted at the end of one year, and the club starts early the next year.
        if (weekStartDate < threadDate) {
          weekStartDate.setFullYear(threadDate.getFullYear() + 1);
        }

        // TODO: Need to handle a failed parse.  Should be NaN, correct?
        break;
      //default:
        //console.log(thElements[i].textContent)

    }
  }

  const offset = weekStartDate.getTimezoneOffset()

  for (week = 1; week <= weekCount; week++) {
    let formattedDate = (new Date(weekStartDate.getTime() - (offset*60*1000))).toISOString().split('T')[0]
    startPage = 1; // TODO: Implement this.
    const weekInfo = new WeekInfo(startPage, formattedDate);
    weeksInfo.push(weekInfo)
    weekStartDate = weekStartDate.addDays(7)
  }

}

let totalPages = 1 // TODO: Implement this.
const bookClub = new BookClub(title, url, vocabListUrl, totalPages, weeksInfo);
console.log(JSON.stringify(bookClub));

Open a book club thread (again, I only tested it on one!), open a Javascript console, paste the code in, and it spits out a JSON string that can be pasted into the Book Club Tracker.

[Belthazar]

@ChristopherFritz

If you click on one of the Readers (something I did not know existed)

Uhhhh… I was told they’re keeping it a secret for now, and I haven’t been told anything since then to contradict that.

[Hubbit200]

Oh hmm. Interesting… I wonder if I should have a look tomorrow at changing the script to add the panel on the dashboard instead then…? I kind of assumed it was an old “abandoned” project as it seems to use a bunch of older-style code as compared to the rest of WK. Although surely if they really wanted to keep it a secret they wouldn’t have made the page live…

[Hubbit200]

Nice! If you don’t mind then I’ll probably take this as a base to implement something similar in the script, adding a button to WK Community pages in the Book Club category to automatically try and get the information from them. As soon as I have time that is…

[ChristopherFritz]

No wonder Urushi has this look for the book clubs image in my custom User CSS:

@Hubbit200

I wonder I should have a look at changing the script to add the panel on the dashboard instead then…?

Probably best, just to be safe. I can’t find anything on the forums or main site, etc., that mentions this page.

@Hubbit200

If you don’t mind then I’ll probably take this as a base to implement something similar in the script,

Go for it!

It’ll still require a bit of work to make work well, since there’s no consistency on how book clubs format things.

If going this route, I recommend having it parse the data into the “manual add” interface, so the user can manually fix/add anything that didn’t get automatically pulled in.

[Belthazar]

@Hubbit200

Although surely if they really wanted to keep it a secret they wouldn’t have made it live…

I don’t really know. I got an invite link by e-mail in April last year saying “You’re one of a small handful of individuals to get this email, so please don’t share it, or the information inside of it! We’re not ready to tell everybody about what we’re working on, yet.” but haven’t heard a thing about it since. Though, I never sent them any feedback on it either.

Was there an official release somewhere that I never saw? Did they link it to somewhere? Or did you just find it on Google or something?

[Hubbit200]

That image on the button is amazing What script / style do you use to change the images?
Seeing that also makes me realize I need to improve how the button looks in light mode…

@ChristopherFritz

If going this route, I recommend having it parse the data into the “manual add” interface, so the user can manually fix/add anything that didn’t get automatically pulled in.

Yep I agree, that’s definitely the best way to go about it

[ChristopherFritz]

@Hubbit200

What script / style do you use to change the images?

User CSS extension with the following CSS set.

.lessons-and-reviews__lessons-button{background-image:url(http://kurifuri.com/files/wanikani/css/ayumu_lessons-0.png)}
.lessons-and-reviews__lessons-button--1{background-image:url(http://kurifuri.com/files/wanikani/css/ayumu_lessons-1.png)}
.lessons-and-reviews__lessons-button--25{background-image:url(http://kurifuri.com/files/wanikani/css/ayumu_lessons-25.png)}
.lessons-and-reviews__lessons-button--50{background-image:url(http://kurifuri.com/files/wanikani/css/ayumu_lessons-50.png)}
.lessons-and-reviews__lessons-button--100{background-image:url(http://kurifuri.com/files/wanikani/css/ayumu_lessons-100.png)}
.lessons-and-reviews__lessons-button--250{background-image:url(http://kurifuri.com/files/wanikani/css/ayumu_lessons-250.png)}
.lessons-and-reviews__lessons-button--500{background-image:url(http://kurifuri.com/files/wanikani/css/ayumu_lessons-500.png)}

.lessons-and-reviews__reviews-button{background-image:url(http://kurifuri.com/files/wanikani/css/urushi_reviews-0.png)}
.lessons-and-reviews__reviews-button--1{background-image:url(http://kurifuri.com/files/wanikani/css/urushi_reviews-1.png)}
.lessons-and-reviews__reviews-button--50{background-image:url(http://kurifuri.com/files/wanikani/css/urushi_reviews-50.png)}
.lessons-and-reviews__reviews-button--100{background-image:url(http://kurifuri.com/files/wanikani/css/urushi_reviews-100.png)}
.lessons-and-reviews__reviews-button--250{background-image:url(http://kurifuri.com/files/wanikani/css/urushi_reviews-250.png)}
.lessons-and-reviews__reviews-button--500{background-image:url(http://kurifuri.com/files/wanikani/css/urushi_reviews-500.png)}
.lessons-and-reviews__reviews-button--1000{background-image:url(http://kurifuri.com/files/wanikani/css/urushi_reviews-1000.png)}

.lessons-and-reviews>ul>li>a {height: 30px; background-position: bottom;}

[Hubbit200]

Oh hmm, maybe they are still working on it then… To be safe I guess I’ll switch the script over to put the panel on the Dashboard instead! Maybe I’ll shoot them an email asking as well…

@Belthazar

Was there an official release somewhere that I never saw? Did they link it to somewhere?

Nope, just found it, so you’re probably right that to be safe it would be best to change it!

EDIT: Moved it to the Dashboard for now (messing up a bunch of my CSS styling ), we’ll see what the devs say about it…

[fallynleaf]

This script is brilliant!!

A couple things I’ve noticed:

Is there any way to remove a book club once it has been added, or edit one that you’ve already added? I see an “add book club” button, but no option to remove or edit something, only mark it as inactive.

Also, there’s currently no way to exit out of the add book club menu besides refreshing the page.

The first club I added doesn’t have a vocab list, but it wouldn’t let me add it without inputting something in the vocab list field. Could this field be marked optional?

Thank you so much for making this!

EDIT:

Personally, I don’t find the book clubs button necessary if it just takes you to the bottom of the same page, so I feel like you could just do away with it entirely and save yourself the trouble of styling it, haha.

[Hubbit200]

You should be able to remove one by clicking the cross button in the top right of a book club panel. Let me know if that’s not showing for you for some reason and I’ll take a look.

I’ll add a button to exit the menu, not sure how I missed that I’ll also make the vocab field optional. I’ll hopefully get these updates out today or if not tomorrow!

The book clubs button is there temporarily while I wait to hear back from WK about something, if the panel is going to stay on the dashboard then yes, I’ll remove it!

Thanks for your feedback, let me know if there’s any features you’d like added Right now I’m working on adding a button to community book club pages which will try and auto-fill the details for a book club!

[fallynleaf]

Thank you!

@Hubbit200

You should be able to remove one by clicking the cross button in the top right of a book club panel. Let me know if that’s not showing for you for some reason and I’ll take a look.

Here’s how it appears to me:

Maybe it’s because I added a book club with only one thread for the book?

@Hubbit200

The book clubs button is there temporarily while I wait to hear back from WK about something, if the panel is going to stay on the dashboard then yes, I’ll remove it!

Honestly, I personally prefer having the panel on the dashboard! It’s nice to have everything in one place so that I only have to have one WK window open and can have everything a click away.

[Hubbit200]

Missing delete button should be fixed. You should now also be able to add a club without a vocab list. I’ll get the close button for the menu added along with the functionality to add a book club from a community page in the next few days! And along with that I’ll likely remove the button at the top of the page as well.

[fallynleaf]

Thank you so much! That all sounds great!

I noticed a new issue: I tried re-adding this club with the weeks info, and for some reason, it didn’t like the dates (I added them through selecting them on the calendar in the “manual add” interface, not “paste JSON”, if that makes a difference).

I guess some features that might be nice to have would be the opportunity to link individual chapter threads with the weeks, in cases where the book club has multiple threads for the book.

Though in order to do that, we’d probably need to be able to go back in and edit the already added book clubs, because most of the time, all of the threads aren’t in existence yet at the start of the club.

I’ll probably try testing the limits of this script by adding the book club for A Dictionary of Basic Japanese Grammar at one point, haha, but a club of that size would be a huge pain to enter more than once if you notice you made a mistake in there somewhere…

[Hubbit200]

Hmm strange - I’ll take a look at the issue with the dates asap (in around 6h).
Editing book clubs is already mostly implemented, I just need to add a button for it and fix a couple of small things. And adding the chapter threads is definitely a good idea. I’ll get both those done today. Thanks for the feedback!

[Hubbit200]

0.4.3 released with a fix for the date issue (you’ll have to delete the book club or at least re-add the weeks, sorry!) - you should now also be able to edit book clubs (everything except the title). And styling should also be a bit improved.