BurkusCat / r6-operator-counters

A website with a graph visualisation of how operators counter each other in Rainbow Six Siege.
https://r6counters.com
MIT License
71 stars 38 forks source link

Fix performance, SEO, and accessibility issues #157

Open BurkusCat opened 4 years ago

BurkusCat commented 4 years ago

Describe the bug Site analysis tools like Google Chrome Audit report problems with the website. Most are simple to fix.

To Reproduce Use an analysis tool to generate a report on r6counters.com (build processes and caching remove a lot of errors you may see locally).

Expected behavior Simple site issues reported by these tools are resolved.

Screenshots

Device (please complete the following information):

Mr-Martinez commented 4 years ago

I'm not sure if this is the same bug, but I noticed that the website https://r6counters.com is not displaying anything. The problem I see on the debug console on the web browser debugging tools is the click events not registering and that nejsd3.js file is not found. It helps if the website was able to pull the current main/html/index.html file "replace click events with event listeners" and to make sure that the website has the correct .js file that the html file links to.

Here is a small snippet of last few lines of code of the the index.html the server is displaying:

...
var startButton = document.getElementById("startButton"); 
            var stopButton = document.getElementById("stopButton"); 

            function init() {
                startButton.style.display = "none"; 
                stopButton.style.display = "block"; 

                neo4jd3Options.counters = [document.querySelector('#hardCounters').checked, document.querySelector('#softCounters').checked, 
                        document.querySelector('#minorCounters').checked]; 
                neo4jd3 = new Neo4jd3('#neo4jd3', neo4jd3Options); 
            } 

            function unfreezeAllNodes() { 
                startButton.style.display = "none"; 
                stopButton.style.display = "block"; 
                neo4jd3.unfreezeAllNodes(); 
            } 

            function freezeAllNodes() { 
                stopButton.style.display = "none"; 
                startButton.style.display = "block"; 
                neo4jd3.freezeAllNodes(); 
            } 

            window.onload = init; 
...

Here is a small snippet of code that is missing from the small snippet above:

//event listeners to handle clicks, module is not global scoped
            document.getElementById('hardCounters').addEventListener('click', init);
            document.getElementById('softCounters').addEventListener('click', init);
            document.getElementById('minorCounters').addEventListener('click', init);
            document.getElementById('startButton').addEventListener('click', unfreezeAllNodes);
            document.getElementById('stopButton').addEventListener('click', freezeAllNodes);

I believe that not all of the code that was written in the html and js files got transferred over to the web server. The error codes I see is are the same ones I had when working on the update for gulp. The fix was to rewrite some of the html and js files in the src/main folder

There is more that is missing as well in the html file on the server that I did not how in the snippets above.