Dependency updates & add formatter.

.github/dependabot.yml

@@ -1,10 +1,10 @@
 version: 2
 updates:
     # Enable version updates for npm
-    - package-ecosystem: "npm"
+    - package-ecosystem: 'npm'
       # Look for `package.json` and `lock` files in the `root` directory
-      directory: "/"
-      target-branch: "development"
+      directory: '/'
+      target-branch: 'development'
       # Check the npm registry for updates every day (weekdays)
       schedule:
-          interval: "daily"
+          interval: 'daily'

.github/workflows/release.yml

@@ -1,9 +1,9 @@
 name: Release
 
 on:
-  push:
-    tags:
-    - '**'
+    push:
+        tags:
+            - '**'
 
 # remove comments if a recent tag push should
 # terminate the older running action
@@ -12,22 +12,22 @@ on:
 #  cancel-in-progress: true
 
 jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-20.04
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Get the version
-        id: get_version
-        run: echo "version=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_OUTPUT
-      - name: Generate changelog
-        id: changelog
-        uses: metcalfc/changelog-generator@v4.0.1
-        with:
-          myToken: ${{ secrets.ACTIONS_GITHUB_TOKEN }}
-      - name: GitHub Release
-        uses: softprops/action-gh-release@v1
-        with:
-          body: ${{ steps.changelog.outputs.changelog }}
-          token: ${{ secrets.ACTIONS_GITHUB_TOKEN }}
+    release:
+        name: Release
+        runs-on: ubuntu-20.04
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v2
+            - name: Get the version
+              id: get_version
+              run: echo "version=${GITHUB_REF/refs\/tags\//}" >> $GITHUB_OUTPUT
+            - name: Generate changelog
+              id: changelog
+              uses: metcalfc/changelog-generator@v4.0.1
+              with:
+                  myToken: ${{ secrets.ACTIONS_GITHUB_TOKEN }}
+            - name: GitHub Release
+              uses: softprops/action-gh-release@v1
+              with:
+                  body: ${{ steps.changelog.outputs.changelog }}
+                  token: ${{ secrets.ACTIONS_GITHUB_TOKEN }}

.prettierignore

@@ -0,0 +1,6 @@
+build
+coverage
+node_modules
+bundle.js
+dist/client/font
+package-lock.json

.prettierrc

@@ -0,0 +1,17 @@
+{
+    "arrowParens": "always",
+    "bracketSpacing": true,
+    "embeddedLanguageFormatting": "auto",
+    "htmlWhitespaceSensitivity": "css",
+    "insertPragma": false,
+    "jsxSingleQuote": false,
+    "printWidth": 100,
+    "proseWrap": "preserve",
+    "quoteProps": "as-needed",
+    "requirePragma": false,
+    "semi": true,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "useTabs": false
+}

README.md

@@ -20,15 +20,15 @@ ChainSynth currently is a very early version of a generative audio-visual synthe
 
 It updates the generated audio at every finalized block as explained below.
 
-- Modulo of the block hash determines the root note and the scale, from the following set:
-  1. C Lydian
-  2. F Major
-  3. D Major
-  4. G Major
-  5. A Major
-  6. G Whole-Tone
-- Number of events in the block defines the speed of the succession of the melody notes.
-- Number of extrinsics defines the depth of reverb applied to the melody.
+-   Modulo of the block hash determines the root note and the scale, from the following set:
+    1. C Lydian
+    2. F Major
+    3. D Major
+    4. G Major
+    5. A Major
+    6. G Whole-Tone
+-   Number of events in the block defines the speed of the succession of the melody notes.
+-   Number of extrinsics defines the depth of reverb applied to the melody.
 
 ## Build & Run
 
@@ -45,4 +45,4 @@ ChainSynth should be running at `localhost:8080`.
 
 Tips to [Helikon](https://github.com/helikon-labs) Polkadot account much welcome: `15fTH34bbKGMUjF1bLmTqxPYgpg481imThwhWcQfCyktyBzL`
 
-Helikon Polkadot validator `🏔 HELIKON 🏔/ISTANBUL`: `123kFHVth2udmM79sn3RPQ81HukrQWCxA1vmTWkGHSvkR4k1`
+Helikon Polkadot validator `🏔 HELIKON 🏔/ISTANBUL`: `123kFHVth2udmM79sn3RPQ81HukrQWCxA1vmTWkGHSvkR4k1`

dist/client/css/chainsynth.css

@@ -3,7 +3,7 @@ body {
     margin: 0px;
     background-color: #000000;
     color: #ffffffee;
-    font-family: "Roboto Mono", Courier, monospace;
+    font-family: 'Roboto Mono', Courier, monospace;
     font-size: 14px;
 }
 
@@ -17,7 +17,7 @@ a:active {
 }
 
 a:hover {
-    background-color: #FFFFFF22;
+    background-color: #ffffff22;
 }
 
 .start-button {
@@ -30,7 +30,7 @@ a:hover {
     font-size: 48px;
     font-weight: bold;
     letter-spacing: 14px;
-    background-color: #00AA00;
+    background-color: #00aa00;
     cursor: pointer;
     padding: 16px 10px 18px 24px;
     display: block;
@@ -43,7 +43,7 @@ a:hover {
 }
 
 .start-button:hover {
-    background-color: #00CC00;
+    background-color: #00cc00;
 }
 
 .left-panel {
@@ -56,7 +56,7 @@ a:hover {
 }
 
 div.chainsynth-logo {
-    font-family: "Silkscreen", sans-serif;
+    font-family: 'Silkscreen', sans-serif;
     display: flex;
     flex-flow: row nowrap;
     align-items: baseline;
@@ -100,13 +100,13 @@ span.chainsynth-version {
     align-items: center;
 }
 
-.block-progress { 
+.block-progress {
     width: 18px;
     height: 18px;
     background: conic-gradient(#fff 0%, 0, #000 0%);
     border-radius: 50%;
     border-width: 1px;
-    border-color: #FFF;
+    border-color: #fff;
     border-style: solid;
     display: none;
 }
@@ -133,7 +133,7 @@ span.chainsynth-version {
     left: 50%;
     margin-top: 140px;
     font-size: 15px;
-    color: #9A4E7A;
+    color: #9a4e7a;
 }
 
 .event-count {
@@ -143,7 +143,7 @@ span.chainsynth-version {
     left: 50%;
     margin-top: 270px;
     font-size: 15px;
-    color: #8E969D;
+    color: #8e969d;
 }
 
 .root-note {
@@ -153,5 +153,5 @@ span.chainsynth-version {
     left: 50%;
     font-size: 64px;
     font-weight: bold;
-    color: #9A4E7A;
-}
+    color: #9a4e7a;
+}

dist/client/css/loader-anim.css

@@ -63,4 +63,4 @@
     text-align: center;
 
     display: none;
-}
+}

dist/client/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <title>ChainSynth by Helikon</title>
@@ -16,22 +16,19 @@
     </head>
     <body>
         <script src="bundle.js"></script>
-        <div id="canvas-container" style="position: absolute;"></div>
+        <div id="canvas-container" style="position: absolute"></div>
         <a href="https://polkadot.network/">
             <img src="./img/polkadot-logo.svg" alt="Polkadot" class="network-logo" />
         </a>
         <a href="https://github.com/helikon-labs/chainsynth">
             <img src="./img/github-icon.svg" alt="ChainSynth GitHub" class="github-icon" />
         </a>
-        <div
-            class="page-spinner"
-            id="page-spinner"
-        >
+        <div class="page-spinner" id="page-spinner">
             <div class="double-bounce1"></div>
             <div class="double-bounce2"></div>
         </div>
         <div class="loading-status" id="loading-status">:: connecting to polkadot ::</div>
-        <div class="start-button" id="start-button">START<br>CHAINSYNTH</div>
+        <div class="start-button" id="start-button">START<br />CHAINSYNTH</div>
         <!-- left panel -->
         <div class="left-panel">
             <div class="chainsynth-logo">

dist/server/server.js

@@ -1,19 +1,19 @@
-"use strict";
+'use strict';
 var __importDefault =
     (this && this.__importDefault) ||
     function (mod) {
         return mod && mod.__esModule ? mod : { default: mod };
     };
-Object.defineProperty(exports, "__esModule", { value: true });
-const express_1 = __importDefault(require("express"));
-const path_1 = __importDefault(require("path"));
-const http_1 = __importDefault(require("http"));
+Object.defineProperty(exports, '__esModule', { value: true });
+const express_1 = __importDefault(require('express'));
+const path_1 = __importDefault(require('path'));
+const http_1 = __importDefault(require('http'));
 const port = 3000;
 class App {
     constructor(tcpPort) {
         this.port = tcpPort;
         const app = express_1.default();
-        app.use(express_1.default.static(path_1.default.join(__dirname, "../client")));
+        app.use(express_1.default.static(path_1.default.join(__dirname, '../client')));
         // In the webpack version of the boilerplate, it is not necessary
         // to add static references to the libs in node_modules if
         // you are using module specifiers in your client.ts imports.
@@ -37,4 +37,4 @@ class App {
         });
     }
 }
-new App(port).Start();
+new App(port).Start();