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:
The MaxiGos script requests the SGF file directly: GET /endgame.sgf.
The server responds with a 302 Found and provides a location header that points to the sgf-viewer URL.
The MaxiGos script follows the redirect and requests the sgf-viewer URL with the sgf_file parameter: GET /sgf-viewer/?sgf_file=https://example.com/endgame.sgf
.
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.
_________________
All About Go | Go website featuring lessons, history of Go, downloads, articles by professionals and more.