Develop into Master for release 1.8

.github/workflows/codeql-analysis.yml

@@ -0,0 +1,72 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ develop, master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ develop ]
+  schedule:
+    - cron: '42 23 * * 1'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines. 
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2

CHANGELOG.md

@@ -2,12 +2,23 @@
 
 ---
 
+## Release 1.8
+
+Tag: v1.8  
+Date: May 2, 2023
+URL: <https://github.com/KCarlile/flashchord/releases/tag/v1.8>  
+Commit: <>
+
+- Fixed bug in debugging-enabled check (no issue).
+- Updated Google Analytics code to GA4.
+- Added Docker support for local development.
+
 ## Release 1.7
 
 Tag: v1.7  
 Date: April 28, 2022  
 URL: <https://github.com/KCarlile/flashchord/releases/tag/v1.7>  
-Commit:
+Commit: <https://github.com/KCarlile/flashchord/commit/602cbe1cb30dafcae8985f32e45bb599c3825901>
 
 - Add the option to display inversions/slash chords with bass notes.
 - Added debug mode and logging.

Dockerfile

@@ -0,0 +1,3 @@
+FROM php:8.1.9-apache
+
+RUN a2enmod rewrite

README.md

@@ -1,4 +1,4 @@
-# FlashChord
+# Flash Chord
 
 ## Functional
 
@@ -10,7 +10,7 @@ Preview new features and test new development at [http://dev.flashchord.com](htt
 
 ### Logging and Debugging
 
-Enable debugging in the browser console by adding `?dbg=1` to the URL. This will tell Flashchord to send logged messages to the console for viewing. Then, use the brower's console to view logging statements.
+Enable debugging in the browser console by adding `?dbg=1` to the URL. This will tell Flash Chord to send logged messages to the console for viewing. Then, use the browser's console to view logging statements.
 
 For logging functionality, see the `js/utils.js` file and look at the following functions:
 
@@ -28,17 +28,39 @@ For logging functionality, see the `js/utils.js` file and look at the following
 - jQuery
 - PHP
 
+### Docker
+
+Docker is used for local development, although you're welcome to setup your own development hosting stack yourself using Apache and PHP. The `/Dockerfile` and `/docker-composer.yml` files define the images and behaviors required to launch the local development containers.
+
+You'll need to modify your `/etc/localhost` file to include: `127.0.0.1	flashchord.com.local` to `/etc/hosts`
+
+To run this container (i.e. launch the "server"), follow these steps:
+
+- `$ docker compose up --build` rebuilds and launches the container
+  - Or run `$ ./server` from the root of the project folder
+- <flashchord.com.local> to access
+
 ## Creator
 
 Kenny Carlile
 
 - GitHub: @KCarlile
-- [http://www.kennycarlile.com/](http://www.kennycarlile.com/)
+- [http://www.kcarlile.com/](http://www.kcarlile.com/)
 
-## Contributions
+## Code Contributions
 
-If you'd like to contribute, please contact Kenny Carlile through GitHub or his website. Forks and PRs are welcome, but planned contributions are preferred.
+If you'd like to contribute code to Flash Chord, please contact Kenny Carlile through GitHub or his website. Forks and PRs are welcome, but planned contributions are preferred.
 
-## Contributors
+### Code Contributors
 
 - _Your name here!_
+
+## Supporters
+
+Flash Chord would like to extend a special thanks to our supporters who have made kind and generous donations.
+
+- Matt Godwin
+- Marco Valenti
+- Yohaan Pissurlenker
+- Michael Jacobson
+- Andrew Hawkes

components/head.php

@@ -1,15 +1,16 @@
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2437704-21"></script>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-1YLESD45YY"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
-        gtag('config', 'UA-2437704-21');
+
+        gtag('config', 'G-1YLESD45YY');
     </script>
 
 <?php
     // check for ?dbg=1 for debugging flag
-    if (isset($_GET['name']) && $_GET["dbg"]) {
+    if (isset($_GET["dbg"]) && $_GET["dbg"]) {
         if (htmlspecialchars($_GET["dbg"]) == 1) {
 ?>
     <script>

data/data.js

@@ -57,7 +57,7 @@ var $theoretical_keys = {
     "D♭ Minor":    ["D♭", "E♭", "F♭", "G♭", "A♭", "B𝄫", "C♭"],
     "F♭ Minor":    ["F♭", "G♭", "A𝄫", "B𝄫", "C♭", "D𝄫", "E𝄫"],
     "G♭ Minor":    ["G♭", "A♭", "B𝄫", "C♭", "D♭", "E𝄫", "F♭"],
-}
+};
 
 var $slash_degrees = [0, 2, 4];
 

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.9'
+services:
+    flashchord-php-apache:
+        build: .
+        image: php:8.1.9-apache
+        volumes:
+            - ./:/var/www/html/
+        container_name: flashchord-php-apache
+        ports:
+            - 80:80

index.php

@@ -2,6 +2,9 @@
 <html lang="en">
 <head>
     <?php require 'components/head.php'; ?>
+    <script>
+        const PAGE_NAME = "homepage";
+    </script>
     <title>Practice chords, scales, or arpeggios with an endless stream of randomized chords | Flash Chord</title>
 </head>
 <body>
@@ -92,7 +95,7 @@
                     <div class="col">
                         <button type="button" id="beginner_preset" class="btn btn-success chord-type-preset btn-sm mb-3">Beginner</button>
                         <div class="custom-control custom-checkbox">
-                            <input type="checkbox" class="custom-control-input difficulty_beginner chord-type-selection" id="chord_type_major" name="chord_type_major" value="" checked />
+                            <input type="checkbox" class="custom-control-input difficulty_beginner chord-type-selection" id="chord_type_major" name="chord_type_major" value="M" checked />
                             <label for="chord_type_major" class="custom-control-label">Major</label>
                         </div>
                         <div class="custom-control custom-checkbox">

js/flashchord.js

@@ -1,4 +1,4 @@
-/* global $current_beat:true, $current_bar:true, $downbeat_beep, $beat_beep, $quality:true, $extensions, $slash:true, $key:true, $keys, $chord_keys:true, $slash_degree:true, $root:true, logger, flatten, sharpen, setupBarsPerChord, setupBarsPerMeasure, setupBeatsPerMeasure, increment_beat, update_bars_progress, logger_new, logger_break, getRandom, $slash_degrees, $slash_note:true, $theoretical_keys, $all_chords, getHarmonicQualityMinor, getHarmonicQualityMajor, $extension:true, $chromatic, replaceRareEnharmonic, getTempo */
+/* global $current_beat:true, $current_bar:true, $downbeat_beep, $beat_beep, $quality:true, $extensions, $slash:true, $key:true, $keys, $chord_keys:true, $slash_degree:true, $root:true, logger, flatten, sharpen, setupBarsPerChord, setupBarsPerMeasure, setupBeatsPerMeasure, increment_beat, update_bars_progress, logger_new, logger_break, getRandom, $slash_degrees, $slash_note:true, $theoretical_keys, $all_chords, getHarmonicQualityMinor, getHarmonicQualityMajor, $extension:true, $chromatic, replaceRareEnharmonic, getTempo, $major_chords, $minor_chords, $dominant_chords, $diminished_chords, $augmented_chords, logger, PAGE_NAME */
 
 // Safari audio lag fix
 // No idea why this works, but someone online said this fixed the problem and it did! :)
@@ -17,7 +17,7 @@ $(document).ready(function() {
     // Init
     // ------------------------------------------------------------
     // first, make sure we're on the home page before doing any of the chord stuff
-    if ($("#chord_name").length) {
+    if (PAGE_NAME == "homepage") {
         $chord = $next_chord ? $next_chord : getChord();
 
         $next_chord = getChord();
@@ -91,7 +91,7 @@ function getChord() {
         $extension = getExtension();
         $slash = getSlash($root, $quality);
 
-        $new_chord = $root + $quality + $extension + $slash;
+        $new_chord = buildChord($root, $quality, $extension, $slash);
     } while($next_chord == $new_chord);
 
     logger_break();
@@ -103,6 +103,22 @@ function getChord() {
     return $new_chord;
 }
 
+// assemble the chord for display, handling any special situations
+function buildChord($root, $quality, $extension, $slash) {
+    // handle simplified qualities for °, °7, and m7♭5
+    if ($diminished_chords.includes($quality)) {
+        if (
+            ( ($quality == "°") && ($("input[name=chord_type_dim]").is(":not(:checked)")) ) || 
+            ( ($quality == "°7") && ($("input[name=chord_type_dim7]").is(":not(:checked)")) ) || 
+            ( ($quality == "m7♭5") && ($("input[name=chord_type_m7b5]").is(":not(:checked)")) ) )
+        {
+            $quality = "m";
+        }
+    }
+
+    return $root + $quality + $extension + $slash;
+}
+
 // get root of the chord based on selected settings
 function getRoot() {
     // get selected key
@@ -154,7 +170,7 @@ function getChordQuality() {
         // minor
         $chord_types = getHarmonicQualityMinor($key.indexOf($root));
     } else {
-        $chord_types = $all_chords;
+        $chord_types = $selected_chord_types;
     }
 
     // remove empty elements
@@ -163,6 +179,7 @@ function getChordQuality() {
     logger("Chord types: " + $chord_types);
 
     // filter out chord types disabled by user
+    // FIX THIS <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
     $chord_types = $chord_types.filter(function(chord) {
         return $selected_chord_types.includes(chord);
     });
@@ -172,9 +189,9 @@ function getChordQuality() {
     // get chord quality
     $quality = getRandom($chord_types);
 
-    // if the type returned is undefined because the user has eliminated the type...
-    // just default to major
-    if (!$quality) {
+    // if the type returned is undefined because the user has eliminated the type, just default to major
+    // also, if you get "M" as in major, just wipe the symbol (this is necessary as an empty value causes other problems)
+    if (!$quality || $quality == "M") {
         $quality = "";
     }
 

server

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+docker compose up --build