I followed your idea, but maintained the new summary part, looks cool thanks!
Note: If anyone is interested in having the script I used let me know and I’ll figure out how to share it.
I would love your script! Could you share it with us?
Of course. The modified script is not too long, so I’ll paste it here.
Copy it into Tamper Monkey and should be good to go.
// ==UserScript==
// @name Wanikani SRS Item Totals
// @namespace Mercieral
// @description Display specific SRS item totals
// @include /^https:\/\/(www|preview)\.wanikani\.com\/?(dashboard)?$/
// @version 1.0.3
// @run-at document-end
// @grant none
// ==/UserScript==
(async function() {
// Require the WK open resource
if (!window.wkof) {
alert('The "Wanikani SRS Item Totals" script requires Wanikani Open Framework.\nYou will now be forwarded to installation instructions.');
window.location.href = 'https://community.wanikani.com/t/instructions-installing-wanikani-open-framework/28549';
return;
}
let wkSRSTotals = [0, 0, 0, 0, 0, 0, 0, 0, 0];
try {
await initWKOF();
await loadData();
await updateUI();
} catch (e) {
console.error('"Wanikani SRS Item Totals" failed!', e);
}
async function initWKOF () {
window.wkof.include('ItemData');
await window.wkof.ready('document,ItemData');
if (window.wkof.ItemData == null) {
throw new Error('WKOF ItemData does not exist!');
}
}
async function loadData () {
const data = await loadDataFromWKOF();
await parseData(data);
async function loadDataFromWKOF () {
const config = {
wk_items: {
options: {assignments: true}
}
};
const processItems = await window.wkof.ItemData.get_items(config);
if (!Array.isArray(processItems)) {
throw new Error('WKOF call returned non-array');
}
return processItems;
}
async function parseData (data) {
for (let item of data) {
const srsLevel = item && item.assignments && item.assignments.srs_stage;
if (srsLevel != null) {
wkSRSTotals[srsLevel - 1]++;
}
}
}
}
function updateUI () {
initCSS();
createSRSTotalsContainer('apprenticeTotalsContainer', 0, 3, $('.srs-progress__stage--apprentice'));
createSRSTotalsContainer('guruTotalsContainer', 4, 5, $('.srs-progress__stage--guru'));
createSRSTotalsContainer('masterTotalsContainer', 6, 6, $('.srs-progress__stage--master'));
createSRSTotalsContainer('enlightenedTotalsContainer', 7, 7, $('.srs-progress__stage--enlightened'));
createSRSTotalsContainer('burnedTotalsContainer', 8, 8, $('.srs-progress__stage--burned'));
function initCSS() {
$('head').append(`
<style>
.srsTotal {
display: inline-block !important;
margin: 0 5px !important; /* Adjusted for horizontal spacing */
font-size: 16px !important;
font-weight: normal !important;
color: white;
text-align: center;
}
.srsTotalDiv {
padding: 2px 0 6px 0;
height: 40px;
margin-bottom: 10px;
display: flex;
justify-content: space-around; /* Ensure horizontal alignment */
}
.srs-progress__stages {
gap: 0 !important;
}
.srs-progress__stage-header {
display: flex;
justify-content: center;
}
.srs-progress__stage {
margin-right: 10px;
}
</style>
`);
}
function createSRSTotalsContainer (id, min, max, parent) {
const totalsContainer = $(document.createElement("div"));
totalsContainer.addClass("srsTotalDiv");
totalsContainer.attr('id', id);
const firstDiv = parent.children('div').first();
firstDiv.after(totalsContainer);
for (let srsStage = min; srsStage <= max; srsStage++) {
const srsTotalSpan = document.createElement("span");
srsTotalSpan.className = 'srsTotal';
srsTotalSpan.innerText = min === max ? wkSRSTotals[srsStage] : wkSRSTotals[srsStage];
totalsContainer.append(srsTotalSpan);
}
}
}
})();
howd you get the colored srs item totals, i think its really aesthetic
Now that looks really good!
For the change of colors I use
- Dark Reader plugin.
- Wanikani golden burn script.
thank you so much!!
Yes, we made the update to also remove the ? tooltip and also to move the count out of the button.