Natty Precise Maverick

    fanaro.io

    1.0.1 • Public • Published

    Logo

    Github CI Gitter Buy Me A Coffee


    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

    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

    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>

    Install

    npm i fanaro.io

    DownloadsWeekly Downloads

    0

    Version

    1.0.1

    License

    BSD-3-Clause

    Unpacked Size

    2.98 MB

    Total Files

    134

    Last publish

    Collaborators

    • psygo