Update packages and lint

.github/workflows/ci.yml

@@ -1,42 +1,40 @@
-# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
-# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
-
-name: Node.js CI
+# This workflow will run the three lint tools
+name: Lint
 
 on:
   push:
-    branches: [ "development" ]
+    branches: [ "development", "main" ]
   pull_request:
+    # The branches below must be a subset of the branches above
     branches: [ "main" ]
+  workflow_dispatch:
 
 jobs:
-  build:
-
+  lint:
+    name: Run Code Quality Checks
     runs-on: ubuntu-latest
-
+    permissions:
+      contents: read
+      security-events: write
+      actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
     steps:
-    - uses: actions/checkout@v3
-
-    - name: Use Node.js 18.x
-      uses: actions/setup-node@v3
-      with:
-        node-version: 18.x
-        cache: 'npm'
-        registry-url: 'https://npm.pkg.github.com'
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-    - name: Install Tools
-      run: npm ci
-      env:
-        NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Install Tools
+        run: npm ci
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-    - name: Lint JavaScript
-      run: npm run eslint
+      - name: Lint JavaScript
+        if: ${{ ! cancelled() }}
+        run: npm run eslint
 
-    - name: Lint HTML
-      run: npm run htmllint
+      - name: Lint HTML
+        if: ${{ ! cancelled() }}
+        run: npm run htmllint
 
-    - name: Lint CSS
-      run: npm run csslint
+      - name: Lint CSS
+        if: ${{ ! cancelled() }}
+        run: npm run csslint
 
-    #- run: npm run build --if-present
-    #- run: npm test --if-present

3d-showcase.html

@@ -207,7 +207,8 @@
 
             </div>
         </aside>
+
+        <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>
+        <script type="module" src="controllers/3d-showcase.js"></script>
     </body>
-    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>
-    <script type="module" src="controllers/3d-showcase.js"></script>
 </html>

css/common.css

@@ -221,7 +221,7 @@ body {
   margin: 0;
   padding: 0;
   padding-top: var(--top-nav-height);
-  overflow: auto auto;
+  overflow: auto;
   overflow-wrap: anywhere;
   word-break: auto-phrase;
   hyphens: auto;

home-ala-homestar.html

@@ -95,7 +95,7 @@ <h1>Sam Sarette's Portfolio</h1>
             </button>
         </container>
         <audio id="bg-audio" src="audio/536935__defaultv__campfire.mp3" loop="loop"></audio>
+        <script type="module" src="controllers/home-ala-homestar.js"></script>
     </body>
-    <script type="module" src="controllers/home-ala-homestar.js"></script>
 
 </html>

home-console.html

@@ -98,7 +98,8 @@ <h2>Home Screens</h2>
         <audio id="ok-audio" src="audio/538551__sjonas88__3-select-ok.mp3"></audio>
         <audio id="select-audio" src="audio/538551__sjonas88__3-select-3.mp3"></audio>
         <audio id="bg-audio" src="audio/687905__tehclaw__ambient_piano__bpm62.mp3" loop="loop"></audio>
+
+        <script type="module" src="controllers/home-console.js"></script>
     </body>
-    <script type="module" src="controllers/home-console.js"></script>
 
 </html>

home-lcars.html

@@ -133,7 +133,7 @@ <h1>Sam Sarette's Portfolio</h1>
         <audio id="beep-ok-audio" src="audio/423167__plasterbrain__minimalist-sci-fi-ui-ok.mp3" preload></audio>
         <audio id="beep-cancel-audio" src="audio/423167__plasterbrain__minimalist-sci-fi-ui-cancel.mp3" preload></audio>
 
+        <script type="module" src="controllers/home-lcars.js"></script>
     </body>
-    <script type="module" src="controllers/home-lcars.js"></script>
 
 </html>

index.html

@@ -164,6 +164,7 @@ <h2>Socials</h2>
 
         </main>
         <footer>© Samuel James Sarette 2023</footer>
+
+        <script type="module" src="controllers/index.js"></script>
     </body>
-    <script type="module" src="controllers/index.js"></script>
 </html>

lib/gameinputjs/README.md

@@ -1,16 +1,48 @@
-Game-Input (JavaScript) Library
+[<img src="img/generic.png" width="48" />](img/generic.png) Game-Input JavaScript Library
 =============
-![](img/generic.png)
+[![npm](https://img.shields.io/npm/v/gameinputjs)](https://www.npmjs.com/package/gameinputjs)
+[![license](https://img.shields.io/npm/l/gameinputjs)](LICENSE)
+[![language](https://img.shields.io/badge/lang-JavaScript-orange)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+[![environment](https://img.shields.io/badge/env-Browser-green)](https://developer.mozilla.org/en-US/docs/Learn/JavaScript)
 
 A client-side JavaScript module one can import to add good gamepad support to web-powered games or other gamepad-powered web applications.
 
+## Installation
+
+GameinputJS's `src` and `img` folders need to be accessible in the distributed version of your website.
+
+I would recommend setting up a `package.json` script to help update a distributable copy of the library outside node_modules:
+```json
+{
+    "name": "@me/my-client-webapp",
+    "scripts": {
+        "deps2lib": "shx rm -rf lib && shx mkdir lib && shx cp -r node_modules/gameinputjs lib/"
+    }
+    ...
+}
+```
+Which would allow you to run:
+
+```sh
+    npm i --save-dev shx
+    npm i gameinputjs
+    npm run deps2lib
+```
+
+
+## Usage
+Import from within a Javascript module, construct it, and then use either the events or make a game loop that uses the properties.
+
 ```js
-import { GameInput, DetectedOS } from './gameinput.js'
-import { GameInputSchemaSectionNames, GameInputSchemaButtonNames } from './gameinput-schema.js'
+import { GameInput, DetectedOS } from './lib/gameinputjs/src/gameinput.js'
+import { GameInputSchemaSectionNames, GameInputSchemaButtonNames } from './lib/gameinputjs/src/gameinput-schema.js'
 
-/** @type {GameInput} */
 const gameInput = new GameInput()
-// Events style
+```
+
+### Event-Driven Style
+```js
+gameInput
     .onReinitialize(() => {
         console.debug("Players updated")
         const firstPlayer = gameInput.getPlayer(0)
@@ -38,8 +70,10 @@ const gameInput = new GameInput()
             console.debug('Jump / Confirm pushed')
         }
     })
+```
 
-// Game-Loop Style
+### Game-Loop Style
+```js
 function gameLoop() {
     for (const player of gameInput.Players) {
         if (!player)

lib/gameinputjs/package.json

@@ -1,13 +1,10 @@
 {
-    "name": "@lunarcloud/gameinputjs",
+    "name": "gameinputjs",
     "type": "module",
     "repository": {
         "url": "https://github.com/lunarcloud/gameinputjs.git"
     },
-    "publishConfig": {
-        "@lunarcloud:registry": "https://npm.pkg.github.com"
-    },
-    "version": "13.2.1",
+    "version": "13.2.7",
     "description": "Browser library to upgrade the Gamepad API experience",
     "private": false,
     "scripts": {
@@ -31,6 +28,7 @@
         "eslint-plugin-n": "^16.1.0",
         "eslint-plugin-promise": "^6.1.1",
         "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "jsdoc": "^4.0.2",
         "jsdoc-tsimport-plugin": "^1.0.5",
         "serve": "^14.2.1",
@@ -52,7 +50,12 @@
         ],
         "testLocationInResults": true
     },
-    "dependencies": {
-        "jest-environment-jsdom": "^29.7.0"
-    }
-}
+    "keywords": [
+        "gamepad",
+        "client",
+        "gaming",
+        "xbox",
+        "dualshock",
+        "joystick"
+    ]
+}