---

fanaro.io

Access the website here: fanaro.io

This is the revamp with pure HTML, CSS and TypeScript of the fanaro.com.br old WordPress website.

It was meant to be a single-page application (SPA) — Angular style — but with no framework at all. However this demands too much work without a server and with only Gihub Pages, which I don't want to meet right now.

---

Table of Contents

• 1. For the developer
  • 1.1. The Full Development Workflow
    • 1.1.1. Compiling with TypeScript
    • 1.1.2. Testing with NPM
    • 1.1.3. Bundling everything together with Webpack
    • 1.1.4. Running a Live Server
  • 1.2. Formatting
  • 1.3. Snippets
  • 1.4. Go SGF Viewers
    • 1.4.1. Glift
    • 1.4.2. WGo.js

---

1. For the developer

1.1. The Full Development Workflow

I typically use VS Code for development, and to have everything running smoothily, I open 4 parallel integrated terminals running:

• npm t -- --watch
• npx webpack --watch
  • In the future I might try to get something going with WebAssembly.
• tsc -w
• Mostly my Git commits.

Then I use the Live Server VS Code extension to run the index.html top file under watch mode — you could also run the live server from the command line with live-server . once you've installed it with npm.

If you wish for a streamlined experience, you might find the shell script tools/build_watch.sh useful.

1.1.1. Compiling with TypeScript

Compile the code and watch its changes:

tsc -w

Then, you can watch for changes on the docs/index.html file, with, for example, the Live Server VS Code extension.

1.1.2. Testing with NPM

To test it with Jest:

npm t -- --watch

1.1.3. Bundling everything together with Webpack

Webpack helps us bundle all of the codebase into a single JS file and also minify it. The resulting code will look like gibberish, but the browser can read the sourceMap, so it can decipher what's what.

At any rate, on one of the terminals, keep this going:

npx webpack --watch

1.1.4 Running a Live Server

After having installed the live-server package with npm i, you can run it with

live-server .

1.2. Formatting

This project currently uses Prettier as its code and Markdown formatter.

For more specifics on this, check out the .prettierrc file.

If you wish to format the whole project, you can then:

npx prettier -w .

1.3. Snippets

The snippets file contains all of the extremely useful code snippets for this project. They will not only speed you up but guarantee everything is standardized as it should.

1.4. Go SGF Viewers

There are mainly 2 ways of including embedded SGF viewers in an HTML file:

1. Glift
   • Initially, this is the one I was using.
   • Also used by the now defunct GoGameGuru website.
   • However, it started to present bugs when I added more complex behavior with Webpack.
2. WGo.js
   • Offers much more customizability.
   • Is part of the Waltheri ecosystem (Waltheri Pattern Search).

Both platforms have been included in the [assets/][assets] folder and are featured in the snippets file.

1.4.1. Glift

Prefer using WGo.js.

Anyway, if you really want to use it:

<div id="SGF" style="height: 500px; width: 100%"></div>
<script>
  glift.create({
    divId: "SGF",
    sgf: "game-name.sgf",
  });
</script>

The import is typically done with:

<script src="/assets/glift_1_1_2.min.js"></script>

1.4.2. WGo.js

The imports to this package are quite cumbersome if you want all the perks, do check it out in the snippets file.

The typical embedding goes like this:

<div
  data-wgo="game-name.sgf"
  data-wgo-board="stoneHandler: WGo.Board.drawHandlers.NORMAL,
                  background: '../../assets/wgo/textures/wood2.jpg'"
  class="SGF"
>
  <p>
    Your browser doesn't support the WGo.js Player. Please use a more
    modern browser, like Brave, Chrome, Firefox or Edge.
  </p>
</div>