See changelog. (#43)

See changelog

.gitignore

@@ -13,5 +13,5 @@ dist
 # Environment variables
 .env
 
-$ Node Modules
+# Node Modules
 node_modules

CHANGELOG.md

@@ -1,20 +1,35 @@
 # Changelog
 
+## v4.0.2
+
+- Altered the css for tracker sizing to a settings option to curtail potentiona issues with Windows Chrome
+- Instrument sprites will not be a static color with a setting to make them gifs if desired
+- Adjusted some spacing of the settings options as they needed a bit of breathing room
+- Currently hidding the `<ouput>` tag for background color as it seems to have no purpose
+- Reduced the opacity *slighty* on inactive items as ive been developing with dim screen brightness and see that they were far too bright **(open to changing it back)**
+- Timer feature documentation was removed from Marketing page as that feature was deprecated in a previous verion
+- Some markdown formatting adjustments
+- Created an environment script to run in a no settings cache mode
+- Adjusted meta-data for Facebook :eyeroll:, but Nuxt seems to ignore it. I tried.
+- Removed Translate component as it never worked as intended
+- Removed SettingsList component from SettingsList component...
+- Removed Herobrine
+
 ## v4.0.1
 
-*   Added Google Analytics
-*   Fixed a bug where Screen component marker iamges were not showing up
-*   Added Masthead component to marketing page
-*   Fixed a bug where Goat Mode click events werent registering
-*   Added meta share image + other meta tags
+- Added Google Analytics
+- Fixed a bug where Screen component marker iamges were not showing up
+- Added Masthead component to marketing page
+- Fixed a bug where Goat Mode click events werent registering
+- Added meta share image + other meta tags
 
 ## v4.0.0
 
 > Starting off this new version with a fresh changelog as the entire code base has changed.
 
-*   Codebase is now Vue and Nuxt based.
-*   Settings are stored in browser `localStorage`
-*   Broadcast Mode was added so multiple clients can interact with the same window and that data will flow to all connected clients
-*   Twitch bot is now more secure and requires a light-touch Twitch authorization. You authorize access to **no** private information and the only use of this is to gain access to your Twitch username
-*   Some small UI tweaks but nothing major
-*   Marketing page, Tracker, Server all exist under the same codebase now
+- Codebase is now Vue and Nuxt based.
+- Settings are stored in browser `localStorage`
+- Broadcast Mode was added so multiple clients can interact with the same window and that data will flow to all connected clients
+- Twitch bot is now more secure and requires a light-touch Twitch authorization. You authorize access to **no** private information and the only use of this is to gain access to your Twitch username
+- Some small UI tweaks but nothing major
+- Marketing page, Tracker, Server all exist under the same codebase now

DOCS.md

@@ -12,11 +12,11 @@ Your settings will be cleared on page refresh unless you enable the `Keep settin
 
 All trackers are activated with click events that will cycle the different sprites available to that container. The overworld has a replacement context menu that enables you to place/remove markers on each overworld screen.
 
-*   The timer works by clicking to start and clicking again to stop. Stoping the stop activates a `save` button that saves your current time for later in your browser.
+* The timer works by clicking to start and clicking again to stop. Stoping the stop activates a `save` button that saves your current time for later in your browser.
 
-*   The overworld can have markers placed on any location. Use the context click to select a marker. Using primary click with activate/deactivate the `cleared` state that will cover other markers but does not replace previously placed markers. Only the `reset` button in the context menu will remove all markers and states. Clicking the same marker twice will remove it from the screen.
+* The overworld can have markers placed on any location. Use the context click to select a marker. Using primary click with activate/deactivate the `cleared` state that will cover other markers but does not replace previously placed markers. Only the `reset` button in the context menu will remove all markers and states. Clicking the same marker twice will remove it from the screen.
 
-*   The item tracker activates by a simple primary click.
+* The item tracker activates by a simple primary click.
 
 ## Broadcast Mode
 
@@ -29,13 +29,13 @@ In broadcast mode, you connect to the server via a unique session id. Once joine
 
 **Only available in Broadcast Mode** After authenticating via the Twitch OAUTH. a button will appear below the broadcast mode section in the settings. To activate the use `!tracker activate`. You can then use `!tracker add [username]` to add that chat user to the whitelist to be able to run commands. A quick rundown of the commands are:
 
-*   !tracker, !tracker commands - Essentially pings the bot to see if it is available and returns the list of commands for general users.
-*   !tracker activate - Activates the tracker so commands can be performed
-*   !tracker deactivate - Stops the tracker from taking commands
-*   !tracker add [username] - Adds a user to the whitelist. Broadcaster and Mods are automatically whitelisted
-*   !tracker remove [username] - Removes a user from the whitelist.
-*   !tracker disable whitelist - Disables the whitelist so anyone can use commands
-*   !tracker enable whitelist - Enables the whitelist so anyone can use commands
-*   !tracker [item name]
+* !tracker, !tracker commands - Essentially pings the bot to see if it is available and returns the list of commands for general users.
+* !tracker activate - Activates the tracker so commands can be performed
+* !tracker deactivate - Stops the tracker from taking commands
+* !tracker add [username] - Adds a user to the whitelist. Broadcaster and Mods are automatically whitelisted
+* !tracker remove [username] - Removes a user from the whitelist.
+* !tracker disable whitelist - Disables the whitelist so anyone can use commands
+* !tracker enable whitelist - Enables the whitelist so anyone can use commands
+* !tracker [item name]
 
 > Windfish does _not_ ask for any permissions for this app. It does not need any data from your account other than your public information available via OpenID. The only information provided is your display name which the app uses to connect the bot to.

assets/js/data/marketing.js

@@ -42,22 +42,22 @@ export default {
                 },
             ],
         },
-        {
-            title: 'Timer',
-            description: 'Track your current run with just a click!',
-            content: [
-                {
-                    title: 'Timer can start and stop whenever you like',
-                },
-                {
-                    title: 'Save your best time to compare against later',
-                },
-                {
-                    title:
-                        '"Light Splitting" will show when you exceed your last best record',
-                },
-            ],
-        },
+        // {
+        //     title: 'Timer',
+        //     description: 'Track your current run with just a click!',
+        //     content: [
+        //         {
+        //             title: 'Timer can start and stop whenever you like',
+        //         },
+        //         {
+        //             title: 'Save your best time to compare against later',
+        //         },
+        //         {
+        //             title:
+        //                 '"Light Splitting" will show when you exceed your last best record',
+        //         },
+        //     ],
+        // },
         {
             title: 'Broadcast',
             description: 'Options for Streamers and Re-Streamers',

assets/js/data/settings.js

@@ -49,6 +49,12 @@ export default {
             type: 'radio',
             value: false,
         },
+        layoutNoMaxWidth: {
+            heading: 'Trackers Width',
+            label: 'No Max Width',
+            type: 'checkbox',
+            value: false
+        },
         showBorder: {
             heading: 'Border',
             label: 'Show Border',
@@ -123,6 +129,7 @@ export default {
             maximum: '1',
         },
         showGutter: {
+            heading: 'X/Y Coordinates',
             label: 'Show Coordinates',
             type: 'checkbox',
             value: false,
@@ -160,19 +167,36 @@ export default {
         },
     },
     items: {
+        desaturateInactive: {
+            heading: 'All Sprites',
+            label: 'Desaturate Inactive Spites',
+            type: 'checkbox',
+            value: false,
+        },
+        animateInstruments: {
+            heading: 'Instrument Sprites',
+            label: 'Animate Instruments',
+            type: 'checkbox',
+            value: false,
+        },
         showChests: {
-            heading: 'Sprites',
+            heading: 'Extras Sprites',
             label: 'Show Chests',
             type: 'checkbox',
             value: false,
         },
         showExtended: {
-            label: 'Show More Items',
+            label: 'Show More Sprites',
             type: 'checkbox',
             value: false,
         },
         showSuperExtended: {
-            label: 'Show Even More Items',
+            label: 'Show Even More Sprites',
+            type: 'checkbox',
+            value: false,
+        },
+        showGoatMode: {
+            label: 'Enable Goat Mode Tracking',
             type: 'checkbox',
             value: false,
         },
@@ -182,16 +206,5 @@ export default {
         //     type: 'checkbox',
         //     value: false,
         // },
-        desaturateInactive: {
-            heading: 'Miscellaneous',
-            label: 'Desaturate Inactive Items',
-            type: 'checkbox',
-            value: false,
-        },
-        showGoatMode: {
-            label: 'Enable Goat Mode Tracking',
-            type: 'checkbox',
-            value: false,
-        },
     },
 };

assets/js/utils.js

@@ -267,3 +267,13 @@ export function createSessionID() {
 
     return text;
 }
+
+/**
+ * 
+ * @param {Object} data User settings
+ */
+export function storeUserDataInLocalStorage(name, data) {
+    if (typeof window !== 'undefined' || window) {
+        window.localStorage.setItem(name, JSON.stringify(data));
+    }
+}

assets/styles/_vars.scss

@@ -10,7 +10,7 @@ $font-family-display: 'Playball', Georgia, sans-serif;
 $blue-1: #010619;
 $blue-2: lighten($blue-1, 15%);
 $blue-3: lighten($blue-1, 30%);
-$blue-4: lighten($blue-1, 50%);
+$blue-4: lighten($blue-1, 45%);
 
 $gold-1: #9fa037;
 $gold-2: darken($gold-1, 15%);
@@ -19,7 +19,7 @@ $gold-3: darken($gold-1, 30%);
 $green: #9fa037;
 
 // Sizes
-$document-max-width: 590px;
-$tracker-max-width: 570px;
+$document-max-width: 590px; // deprecated?
+$tracker-max-width: 570px; // deprecated?
 $settings-width: 320px;
 $grid-gutter-size: 1px;

assets/styles/main.scss

@@ -12,10 +12,13 @@
 html {
     min-width: 320px;
 
+    &.marketing-page {
+        background-color: white;
+    }
+
     &,
     body {
         @extend %full-abs;
-        background-color: $blue-1;
         color: white;
         background-image: url($image-asset-path+'display/bg-tile-kanalet.gif');
     }
@@ -24,6 +27,7 @@ html {
         padding: 0;
         margin: 0;
         background-position: center;
+        background-color: $blue-1;
         font-family: $font-family;
 
         .tracker {
@@ -77,6 +81,10 @@ html {
             color: inherit;
         }
 
+        small {
+            font-size: 12px;
+        }
+
         .grid-container {
             width: 100%;
             max-width: 1024px;

components/Tracker/App.vue

@@ -14,6 +14,7 @@ import TwitchAuth from '~/components/Tracker/TwitchAuth';
 import MenuBar from '~/components/Tracker/MenuBar';
 import Settings from '~/components/Tracker/Settings';
 import Trackers from '~/components/Tracker/Trackers';
+import { storeUserDataInLocalStorage } from '@/assets/js/utils';
 
 export default {
     name: 'App',
@@ -28,7 +29,7 @@ export default {
             showSettingsMenu: false,
             authedUser: null,
         };
-    },
+    }
 };
 </script>