Request: Website Dev Assistance in Exchange for Go Lessons

Nikolas73 · #1

Hi everyone,

I have a background in web development and have been working on a website for ex-insei Kazunari Furuyama 8d, who goes by Kaz Sensei (http://www.kazsnesei.com). The new website we are building will offer access to custom problems and tests tailored for each student's needs. And at some point in the future it will include a tournament league with game reviews from Kaz sensei.

I have run into a roadblock with trying to get an in-browser SGF loader to dynamically load any .sgf file on the website. It appears to be beyond my skill set. Kaz gave me permission to ask if anyone would be able to help with this problem in exchange for a free lesson.

I can vouch that his lessons are very insightful; I sent him four or five of my games and he provided not only detailed reviews but also identified my general weaknesses and bad habits and provided dozens of problems to correct them. It was immediately helpful.

Below are the technical details of the problem. If you have any insights into it and would like to help work on this in exchange for a free lesson from Kaz, please reply here or DM me. Thanks!

--

Technical details:
Goal:
Any time a visitor clicks on a link on this website ending in .sgf, it opens a game viewer in-browser that they can use to click through the game file utilizing the MaxiGos javascript library.
Approach:
I created a .htaccess rule to redirect requests for .sgf files to a custom WordPresst template page called sgf-viewer.php, with the .sgf file URL stored in a ?sgf_file=x parameter:

Code:

RewriteEngine On
RewriteRule ^(.+\.sgf)$ https://example.com/sgf-viewer/?sgf_file=https://example.com/$1 [R,L]

Originally my code for the sgf-viewer.php page was as follows:

Code:

<?php
/*
Template Name: SGF Viewer
*/
    ?>

<div id="main-content">
    <div class="entry-content" style="margin-top:10px;">
    <script src="https://example.com/maxigos/maxigos-eidogo-tree.js" data-maxigos-sgf="<?php echo esc_js($_GET['sgf_file']); ?>"></script>
    </script>
    </div>
</div>

I created a page within WordPress with the slug /sgf-viewer and assigned the sgf-viewer.php template to this page.

Problem:
With this configuration, the redirect appears to work, for example https://example.com/endgame.sgf successfully redirects to https://example.com/sgf-viewer/?sgf_fil ... ndgame.sgf. However, the MaxiGos SGF viewer loads a blank game board. There are no errors in the Javascript console.

On the other hand, if I comment out the .htaccess RedirectRule, then https://example.com/sgf-viewer/?sgf_fil ... ndgame.sgf loads the SGF file in the viewer successfully.
With the redirect enabled, I looked in the browser console, and basically what is happening is:

.
But of course, that sgf_file parameter is not going to produce the file directly. I think a problem is that this is a client-side script, whereas the redirects are happening at the server level, so it's difficult to prevent the MaxiGos script from following the .htaccess redirect.

Attempted solution:
First, I have tried appending a '&skip_redirect=true’; parameter to the sgfFile variable that is fed into the data-maxigos-sgf attribute in the Javascript.
Then I added a !skip_redirect=true condition to the .htaccess RewriteRule so as to disable the rule if the skip_redirect parameter was present.

However it still doesn't work and from some hardcoded tests it appears the MaxiGos SGF Viewer simply does not work when the data-maxigos-sgf attribute contains any parameters in the URL. Possibly there is a way to modify the MaxiGos library code to fix this but that is beyond my skillset. I posted an issue on the MaxiGos GitHub repository about this but have not yet received a response.

So, because of that reason this first idea did not work, and I removed the &skip_redirect=true parameter from the Javascript and removed the .htaccess condition.

Next, I thought to try modifying the referer headers. I added some code to the sgf-viewer.php page that checks if the referer is the SGF Viewer page or not. If it is not (e.g. the visitor clicked on a link to http://www.example.com/endgame.sgf), it loads the MaxiGos SGF Viewer script. But if the SGF Viewer page is the referer, then it reads the contents of the SGF file directly.
Here is my updated sgf-viewer.php code with this idea:

Code:

<?php
/*
Template Name: SGF Viewer
*/

$sgfFilePath = isset($_GET['sgf_file']) ? $_GET['sgf_file'] : '';

$referer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : '';
$isViewerPageReferrer = strpos($referer, 'https://example.com/sgf-viewer/') !== false;

if ($isViewerPageReferrer) {
    header('Content-Type: text/html');
    readfile($sgfFilePath);
    exit();
} 
else {
    echo '<div id="main-content"><div class="entry-content" style="margin-top:10px;"><script src="https://example.com/maxigos/maxigos-eidogo-tree.js" data-maxigos-sgf="' . $sgfFilePath . '"></script></div></div>';
    echo $sgfFilePath;
}
?>

But unfortunately still no luck. Navigating to example.com/endgame.sgf redirects to example.com/sgf-viewer/endgame.sgf

Here is the relevant console output:

Code:

GET https://example.com/endgame.sgf [HTTP/2 302 Found]
GET https://example.com/sgf-viewer/?sgf_file=https://example.com/endgame.sgf [HTTP/2 200 OK]
GET https://example.com/maxigos/maxigos-eidogo-tree.js [HTTP/2 200 OK]
Error in parsing value for 'margin'.  Declaration dropped. sgf-viewer:1:7429
Error in parsing value for 'white-space'.  Declaration dropped. sgf-viewer:1:8837
XHR GET https://example.com/endgame.sgf [HTTP/2 302 Found]
XHR GET https://example.com/sgf-viewer/?sgf_file=https://example.com/endgame.sgf [HTTP/2 200 OK]

Still the same two annoying 302 Found Responses instead of the desired 200 OK responses. Frustratingly if I disable the .htaccess rules and navigate to https://example.com/sgf-viewer/?sgf_fil ... ndgame.sgf directly then it loads just fine. So, it seems like even with the sgf-viewer.php page containing instructions to readfile($sgfFilePath); directly when the page itself is the referer... the .htaccess redirect is still applying a second time. In summary, it seems I can have the redirects working (required as there are hundreds of .sgf problems on the website and to create a separate page with a hardcoded URL for each problem is not feasible), or the viewer working, but not both.

At this point I am stuck. I do not know what to try next. I am open to completely different approaches if there is a better idea.

xela · #2

I don't have a solution, but I'll comment that as a user, I find this sort of cleverness more annoying than helpful. It's on a par with custom right-click menus or autoplay videos: it removes choice from the user. If something looks like an SGF download link, then it should be an SGF download link: I should be able to configure the browser to use the viewer of my choice.

I get that some people might prefer an embedded viewer, especially if they're viewing on a mobile device without an SGF app installed. But that requires a different UI. Think about the various options on this site, at Go4Go, OGS and other places for viewing and downloading games.

A bit more context might be helpful. Is this about SGFs hosted on the main site, or links created by the site maintainers to SGFs elsewhere, or allowing users to post their own links? (I tried to look at http://www.kazsnesei.com/ but it seems to be unreachable for me today.)

jlt · #3

The URL is inaccurate, it should be https://kazsensei.com/

xela · #4

Thanks jlt. I just copied the URL from the first post without looking closely. Your version works :-)

I can't see any SGFs on the current site; no hint as to what's planned here.

Nikolas73 · #5

Thanks for the feedback. I will suggest allowing direct downloads of the SGF problems; I agree that choice is important.

www.kazsensei.com (apologies for the typo in my original post) is Kaz's personal/teaching page. The project I described will be a completely new website where he hosts his expansive collection of custom problems/tests and eventually plans to run an online league there as well.

I ended up solving the problem with assistance from the MaxiGos viewer developer (turns out it had a regex filter to check if the URL ends in .sgf, and I managed to change that filter to allow for appending query strings in the URL).

Request: Website Dev Assistance in Exchange for Go Lessons

Who is online