GoBoard: Fix responsiveness

Bug

fixes #105

Description

On the Go attack website, the Go board is resized too small and not centered when we shrink from a large window width to a small width.

Diagnosis

The Go player's CSS class is supposed to change as the window is resized. However, old CSS classes are not being removed as expected. In particular, if the window is large and shrinks, the CSS class should change from wgo-twocols wgo-large to, say, wgo-medium. Instead, the CSS class is wgo-twocols wgo-large wgo-medium, and the unexpected remaining wgo-twocols class is causing the incorrect Go board appearance.

Why does this happen? In GoBoard.svelte, we create a Go player object wgoPlayer and give it a div to attach to. In fact we're creating wgoPlayer responsively — we create a new wgoPlayer whenever the selected SGF changes. Each wgoPlayer is attached to the same div, and there's no way to destroy the old wgoPlayer. We then actually create two wgoPlayers upon page load, one when the selected SGF is undefined and one when the selected SGF is the first row in the game list. These two wgoPlayers both append to the CSS class and cause the CSS class to not be the expected value. (Similarly, each time we select a different SGF from the game list, another wgoPlayer is created, and the CSS class becomes longer and longer.)

Fix

Only create wgoPlayer once in GoBoard.svelte
Load new SGFs using the existing wgoPlayer

Testing

Go board size looks correct on window resize
Check for obvious regressions
- Clicking on a different game in the game list still works
- Clicking on a move number link in the "Game analysis" tab still works

Deploy Preview for goattack ready!

Name	Link
Latest commit	a43958e28d8f538aa6f2b4019f1f241f4e060f8b
Latest deploy log	https://app.netlify.com/sites/goattack/deploys/663fc08c424c0300081e4dc5
Deploy Preview	https://deploy-preview-106--goattack.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 90 (no change from production) Accessibility: 95 (no change from production) Best Practices: 100 (no change from production) SEO: 85 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

AlignmentResearch / KataGoVisualizer