Bug fixes and UX improvements by jowtron · Pull Request #2 · ballantynedewolf/WolfChart

jowtron · 2026-01-18T08:53:00Z

Summary

Fixed some bugs mentioned in the README
Added a few UX improvements
CSS vertical centering for letter chart pages (adapted from pablo-knight/WolfChartOptotype)

Changes

Bug fixes:

Added missing isShuffled and isDuo initialisation in objWolf
Fixed implicit global variables in for loops
Removed duplicate swapSVGLayers function

UX improvements:

Help ? buttons now toggle closed when clicking the same one
Cursor only hides after 1s inactivity on chart areas (not immediately on load)
Vertical centering for letter chart pages

Happy to revert any of the UX changes if you prefer the original behaviour!

🤖 Vibe coded with Claude

Bug fixes: - Add missing isShuffled and isDuo state initialization in objWolf - Fix implicit global variables in shuffleLetters and UnShuffleFunction for loops - Remove duplicate swapSVGLayers function inside fullscreenChange, use class method UX improvements: - Help button toggle: clicking same ? closes panel, different ? navigates - Cursor behavior: only hides after 1s inactivity on chart areas, not on load CSS improvement: - Vertical centering for letter chart pages (adapted from pablo-knight/WolfChartOptotype) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Replace CSS transform positioning on <svg> elements with flexbox centering on parent divs, which avoids SVG 1.0 transform issues on mobile Chrome. Apply mirror (scale) to parent div instead of SVG. Add href alongside xlink:href on <use> elements for modern browser compatibility. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ballantynedewolf

This is my first ever review!
I like the code cleanups. Don't like the change to cursor behaviour. Do like the changes to the help section behaviours.
I've got several changes in progress locally - updating the css to flexbox grid, adding options for letter chart display, adding some new charts, dealing with smaller displays, getting proper fullscreenchange behaviour - so as soon as we resolve this review, I'll make a branch for that stuff

ballantynedewolf · 2026-02-10T10:31:21Z

+
+        /* Vertically center letter chart pages */
+        #letterChart .chart.V {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+        }
+


The next major version does this as part of a larger change to the way letters are displayed, with 3 more user options. So I don't want to do this in this version. We'll make these changes into ver 2.43, then I'll make a new branch where we can build ver 2.50 to include flex box and the options aforementioned

ballantynedewolf · 2026-02-10T10:33:00Z

                    setColIconsAndPresets("tBgColour");
                    $('body').append('<div class="modal-setting"></div>')
                });
+                var lastHelpTarget = null;


ballantynedewolf · 2026-02-10T10:33:10Z

                    $('.guide-section').removeClass('active');
                    $('.mask').removeClass('active');
                    $('.modal-setting').remove();
+                    lastHelpTarget = null;


ballantynedewolf · 2026-02-10T10:33:57Z

+                    var target = $(this).attr('href');
+                    var guideSection = $('.guide-section');
+                    var isOpen = guideSection.hasClass('active');
+
+                    if (isOpen && target === lastHelpTarget) {
+                        // Same button clicked again - close
+                        guideSection.removeClass('active');
+                        $('.mask').removeClass('active');
+                        lastHelpTarget = null;
+                    } else {
+                        // Different button or not open - open/navigate
+                        guideSection.addClass('active');
+                        $('.mask').addClass('active');
+                        lastHelpTarget = target;
+                    }


Yes. I didn't actually build this section so I've never really looked at it

ballantynedewolf · 2026-02-10T10:34:07Z

                    e.preventDefault();
                    $('.guide-section').removeClass('active');
                    $('.mask').removeClass('active');
+                    lastHelpTarget = null;


ballantynedewolf · 2026-02-10T10:41:15Z

                                arAlphabet = functionConfigWolfChart.YatesShuffle(arAlphabet);
                                //append shuffled letters to the number in the pre-shuffled line
-                                for (i = 0; i < lineLength; i++) {
+                                for (let i = 0; i < lineLength; i++) {


ballantynedewolf · 2026-02-10T10:41:39Z


            this.UnShuffleFunction = function (oldCharacter) {
-                for (i = 0; i < oldCharacter.length; i++) {
+                for (let i = 0; i < oldCharacter.length; i++) {


ballantynedewolf · 2026-02-10T10:43:02Z

-                        }, 5000);
+                        }, 1000);


I may be changing my mind on this. But the cursor will always appear on mouse movement, so I wonder why it became unusable to you? Let's commit it an see what happens

ballantynedewolf · 2026-02-10T10:43:20Z

+
+                // Show cursor and cancel timer when leaving chart area
+                chartAreas.on('mouseleave', function () {
+                    clearTimeout(idleMouseTimer);
+                    $("body").css('cursor', '');
+                });


Fair enough! I imagine you're mostly using this on a touchscreen or via keyboard where the pointer isn't relevant. On my end with a mouse, the pointer would disappear immediately and wouldn’t reappear which made it impossible for me to use. But happy to revert if you prefer the original behaviour.

ballantynedewolf

I don't really know what I;m doing here, but I think you need to roll back the changes where I've said no, and then I approve the merge?
J

ballantynedewolf · 2026-02-14T02:39:08Z

-                    <use xlink:href="#rFusedXCyl_e0" />
-                    <use xlink:href="#rFusedXCyl_e0" transform="translate(3,0)" />
-                    <use xlink:href="#rFusedXCyl_e0" transform="translate(6,0)" />
-                    <use xlink:href="#rFusedXCyl_e0" transform="translate(9,0)" />
-                    <use xlink:href="#rFusedXCyl_e0" transform="translate(12,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="translate(3,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="translate(6,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="translate(9,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="translate(12,0)" />


ballantynedewolf · 2026-02-14T02:39:18Z

-                    <use xlink:href="#rFusedXCyl_e0" transform="rotate(-90,0,0)" />
-                    <use xlink:href="#rFusedXCyl_e0" transform="translate(0,3)  rotate(-90,0,0)" />
-                    <use xlink:href="#rFusedXCyl_e0" transform="translate(0,6)  rotate(-90,0,0)" />
-                    <use xlink:href="#rFusedXCyl_e0" transform="translate(0,9)  rotate(-90,0,0)" />
-                    <use xlink:href="#rFusedXCyl_e0" transform="translate(0,12)  rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="translate(0,3)  rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="translate(0,6)  rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="translate(0,9)  rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e0" href="#rFusedXCyl_e0" transform="translate(0,12)  rotate(-90,0,0)" />


ballantynedewolf · 2026-02-14T02:39:30Z

-                    <use xlink:href="#rFusedXCyl_e1" />
-                    <use xlink:href="#rFusedXCyl_e1" transform="translate(1.5,0)" />
-                    <use xlink:href="#rFusedXCyl_e1" transform="translate(3,0)" />
-                    <use xlink:href="#rFusedXCyl_e1" transform="translate(4.5,0)" />
-                    <use xlink:href="#rFusedXCyl_e1" transform="translate(6,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="translate(1.5,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="translate(3,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="translate(4.5,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="translate(6,0)" />
                </g>
                <g id="rFusedXCylHGroup" transform="translate(7.25,11.75)">
-                    <use xlink:href="#rFusedXCyl_e1" transform="rotate(-90,0,0)" />
-                    <use xlink:href="#rFusedXCyl_e1" transform="translate(0,1.5)  rotate(-90,0,0)" />
-                    <use xlink:href="#rFusedXCyl_e1" transform="translate(0,3)  rotate(-90,0,0)" />
-                    <use xlink:href="#rFusedXCyl_e1" transform="translate(0,4.5)  rotate(-90,0,0)" />
-                    <use xlink:href="#rFusedXCyl_e1" transform="translate(0,6)  rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="translate(0,1.5)  rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="translate(0,3)  rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="translate(0,4.5)  rotate(-90,0,0)" />
+                    <use xlink:href="#rFusedXCyl_e1" href="#rFusedXCyl_e1" transform="translate(0,6)  rotate(-90,0,0)" />


ballantynedewolf · 2026-02-14T02:39:41Z

-                    <use xlink:href="#path-bg" fill="#d42c2c" />
-                    <use xlink:href="#path-bg" fill="#2cd72c" transform="scale(1,-1) translate(0,-28)" />
-                    <use xlink:href="#path-ring" transform="translate(7.5 17.5)" />
-                    <use xlink:href="#path-ring" transform="translate(7.5 3.5)" />
+                    <use xlink:href="#path-bg" href="#path-bg" fill="#d42c2c" />
+                    <use xlink:href="#path-bg" href="#path-bg" fill="#2cd72c" transform="scale(1,-1) translate(0,-28)" />
+                    <use xlink:href="#path-ring" href="#path-ring" transform="translate(7.5 17.5)" />
+                    <use xlink:href="#path-ring" href="#path-ring" transform="translate(7.5 3.5)" />


ballantynedewolf · 2026-02-14T02:39:53Z

-                    <use xlink:href="#path-bg" fill="#d42c2c" transform="scale(-1,1) translate(-40,0)" />
-                    <use xlink:href="#path-bg" fill="#2cd72c" transform="rotate(180,20,14)" />
-                    <use xlink:href="#path-box" transform="translate(25.5 3.5)" />
-                    <use xlink:href="#path-box" transform="translate(25.5 17.5)" />
+                    <use xlink:href="#path-bg" href="#path-bg" fill="#d42c2c" transform="scale(-1,1) translate(-40,0)" />
+                    <use xlink:href="#path-bg" href="#path-bg" fill="#2cd72c" transform="rotate(180,20,14)" />
+                    <use xlink:href="#path-box" href="#path-box" transform="translate(25.5 3.5)" />
+                    <use xlink:href="#path-box" href="#path-box" transform="translate(25.5 17.5)" />


ballantynedewolf · 2026-02-14T02:40:14Z

-                <use xlink:href="#4DotDiamond" transform="translate(14.5,6.75)" />
-                <use xlink:href="#4DotCross" transform="translate(6,14.5)" />
-                <use xlink:href="#4DotCross" transform="translate(23,14.5)" />
-                <use xlink:href="#4DotWhiteDot" transform="translate(14.5,23)" />
+                <use xlink:href="#4DotDiamond" href="#4DotDiamond" transform="translate(14.5,6.75)" />
+                <use xlink:href="#4DotCross" href="#4DotCross" transform="translate(6,14.5)" />
+                <use xlink:href="#4DotCross" href="#4DotCross" transform="translate(23,14.5)" />
+                <use xlink:href="#4DotWhiteDot" href="#4DotWhiteDot" transform="translate(14.5,23)" />


ballantynedewolf · 2026-02-14T02:42:36Z

+                <use xlink:href="#r4" href="#r4" transform="rotate(150 160 160)" />
+                <use xlink:href="#r4" href="#r4" transform="rotate(210 160 160)" />
+                <use xlink:href="#r4" href="#r4" transform="rotate(270 160 160)" />
+                <use xlink:href="#r4" href="#r4" transform="rotate(330 160 160)" />
+                <use xlink:href="#r5" href="#r5" />
+                <use xlink:href="#r5" href="#r5" transform="rotate(60 160 160)" />
+                <use xlink:href="#r5" href="#r5" transform="rotate(120 160 160)" />
+                <use xlink:href="#r5" href="#r5" transform="rotate(180 160 160)" />
+                <use xlink:href="#r5" href="#r5" transform="rotate(240 160 160)" />
+                <use xlink:href="#r5" href="#r5" transform="rotate(300 160 160)" />
+                <use xlink:href="#r6" href="#r6" transform="rotate(30 160 160)" />
+                <use xlink:href="#r6" href="#r6" transform="rotate(90 160 160)" />
+                <use xlink:href="#r6" href="#r6" transform="rotate(150 160 160)" />
+                <use xlink:href="#r6" href="#r6" transform="rotate(210 160 160)" />
+                <use xlink:href="#r6" href="#r6" transform="rotate(270 160 160)" />
+                <use xlink:href="#r6" href="#r6" transform="rotate(330 160 160)" />


ballantynedewolf · 2026-02-14T02:42:55Z

-                    <use xlink:href="#path-shuffle-arrow" fill="rgb(152,152,152)" stroke="none" />
-                    <use xlink:href="#path-shuffle-arrow" transform="rotate(180,2,2)" fill="rgb(152,152,152)" stroke="none" />
+                    <use xlink:href="#path-shuffle-arrow" href="#path-shuffle-arrow" fill="rgb(152,152,152)" stroke="none" />
+                    <use xlink:href="#path-shuffle-arrow" href="#path-shuffle-arrow" transform="rotate(180,2,2)" fill="rgb(152,152,152)" stroke="none" />
                    <rect x="1.5" y="1.6" width="1" height="0.8" transform="rotate(-60,2,2)" fill="rgb(102,102,102)" stroke="none"></rect>
-                    <use xlink:href="#path-shuffle-arrow" transform="scale(-1,1) translate(-4,0) rotate(180,2,2)" fill="rgb(152,152,152)" />
-                    <use xlink:href="#path-shuffle-arrow" transform="scale(-1,1) translate(-4,0)" fill="rgb(152,152,152)" />   
+                    <use xlink:href="#path-shuffle-arrow" href="#path-shuffle-arrow" transform="scale(-1,1) translate(-4,0) rotate(180,2,2)" fill="rgb(152,152,152)" />
+                    <use xlink:href="#path-shuffle-arrow" href="#path-shuffle-arrow" transform="scale(-1,1) translate(-4,0)" fill="rgb(152,152,152)" />   
                </g>
                <g id="shuffle-button-unshuffle" display="none">
-                    <use xlink:href="#path-shuffle-arrow" fill="rgb(0,200,127)" stroke="none" />
-                    <use xlink:href="#path-shuffle-arrow" transform="rotate(180,2,2)" fill="rgb(0,200,127)" stroke="none" />
+                    <use xlink:href="#path-shuffle-arrow" href="#path-shuffle-arrow" fill="rgb(0,200,127)" stroke="none" />
+                    <use xlink:href="#path-shuffle-arrow" href="#path-shuffle-arrow" transform="rotate(180,2,2)" fill="rgb(0,200,127)" stroke="none" />
                    <rect x="1.5" y="1.6" width="1" height="0.8" transform="rotate(-60,2,2)" fill="rgb(102,102,102)" stroke="none"></rect>
-                    <use xlink:href="#path-shuffle-arrow" transform="scale(-1,1) translate(-4,0) rotate(180,2,2)" fill="rgb(0,200,127)" />
-                    <use xlink:href="#path-shuffle-arrow" transform="scale(-1,1) translate(-4,0)" fill="rgb(0,200,127)" />   
+                    <use xlink:href="#path-shuffle-arrow" href="#path-shuffle-arrow" transform="scale(-1,1) translate(-4,0) rotate(180,2,2)" fill="rgb(0,200,127)" />
+                    <use xlink:href="#path-shuffle-arrow" href="#path-shuffle-arrow" transform="scale(-1,1) translate(-4,0)" fill="rgb(0,200,127)" />   


ballantynedewolf · 2026-02-14T02:43:10Z

-                    <use xlink:href="#path-interspace-arrow" fill="rgb(152,152,152)" stroke="none" />
-                    <use xlink:href="#path-interspace-arrow" transform="rotate(180,2,2)" fill="rgb(152,152,152)" stroke="none" />
+                    <use xlink:href="#path-interspace-arrow" href="#path-interspace-arrow" fill="rgb(152,152,152)" stroke="none" />
+                    <use xlink:href="#path-interspace-arrow" href="#path-interspace-arrow" transform="rotate(180,2,2)" fill="rgb(152,152,152)" stroke="none" />
                </g>
                <g id="interspace-button-on" display="none">
-                    <use xlink:href="#path-interspace-arrow" fill="rgb(0,200,127)" stroke="none" />
-                    <use xlink:href="#path-interspace-arrow" transform="rotate(180,2,2)" fill="rgb(0,200,127)" stroke="none" />
+                    <use xlink:href="#path-interspace-arrow" href="#path-interspace-arrow" fill="rgb(0,200,127)" stroke="none" />
+                    <use xlink:href="#path-interspace-arrow" href="#path-interspace-arrow" transform="rotate(180,2,2)" fill="rgb(0,200,127)" stroke="none" />


ballantynedewolf · 2026-02-14T02:43:23Z

-                    <use xlink:href="#path-fullscreen-corner" />
-                    <use xlink:href="#path-fullscreen-corner" transform="rotate(90,2,2)" />
-                    <use xlink:href="#path-fullscreen-corner" transform="rotate(180,2,2)" />
-                    <use xlink:href="#path-fullscreen-corner" transform="rotate(-90,2,2)" />
+                    <use xlink:href="#path-fullscreen-corner" href="#path-fullscreen-corner" />
+                    <use xlink:href="#path-fullscreen-corner" href="#path-fullscreen-corner" transform="rotate(90,2,2)" />
+                    <use xlink:href="#path-fullscreen-corner" href="#path-fullscreen-corner" transform="rotate(180,2,2)" />
+                    <use xlink:href="#path-fullscreen-corner" href="#path-fullscreen-corner" transform="rotate(-90,2,2)" />

                </g>
                <g id="fullscreen-button-unfullscreen" display="none">
-                    <use xlink:href="#path-fullscreen-corner" transform="rotate(180,1.2,1.2)" />
-                    <use xlink:href="#path-fullscreen-corner" transform="rotate(180,2.8,1.2) rotate(90,2,2)" />
-                    <use xlink:href="#path-fullscreen-corner" transform="translate(1.6,1.6)" />
-                    <use xlink:href="#path-fullscreen-corner" transform="rotate(180,1.2,2.8) rotate(-90,2,2)" />
+                    <use xlink:href="#path-fullscreen-corner" href="#path-fullscreen-corner" transform="rotate(180,1.2,1.2)" />
+                    <use xlink:href="#path-fullscreen-corner" href="#path-fullscreen-corner" transform="rotate(180,2.8,1.2) rotate(90,2,2)" />
+                    <use xlink:href="#path-fullscreen-corner" href="#path-fullscreen-corner" transform="translate(1.6,1.6)" />
+                    <use xlink:href="#path-fullscreen-corner" href="#path-fullscreen-corner" transform="rotate(180,1.2,2.8) rotate(-90,2,2)" />


Reviewer wants letter chart centering deferred to v2.50 where it will be part of a larger flexbox/display-options rework. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

jowtron · 2026-02-14T13:58:03Z

I've pushed a commit reverting the CSS vertical centering for letter charts.

I've kept the mouse cursor idle-hide behaviour in for now since you mentioned you might be changing your mind on it. The issue on my end was that the cursor would disappear immediately and not come back, making it unusable with a mouse. Also sometimes the mouse would freeze entirely and this seems to fix that too.

Everything else (bug fixes, help toggle, SVG updates) is unchanged.

jowtron and others added 3 commits January 18, 2026 14:55

Merge upstream README updates

eb01da5

jowtron force-pushed the bugfixes-and-improvements branch from 6f6b1b1 to eb01da5 Compare February 10, 2026 09:05

ballantynedewolf reviewed Feb 10, 2026

View reviewed changes

ballantynedewolf requested changes Feb 14, 2026

View reviewed changes

Joseph and others added 2 commits February 15, 2026 00:46

Revert CSS vertical centering per PR review feedback

ee2bf69

Reviewer wants letter chart centering deferred to v2.50 where it will be part of a larger flexbox/display-options rework. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge remote branch, drop CSS centering (deferred to v2.50)

04bb502

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

jowtron requested a review from ballantynedewolf February 14, 2026 13:59

Conversation

jowtron commented Jan 18, 2026

Summary

Changes

Uh oh!

ballantynedewolf 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!

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!

ballantynedewolf 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!

jowtron commented Feb 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants