Publish develop branch

README.md

@@ -4,28 +4,32 @@
 	</a>
 </p>
 
-<p align="center">A web app to visualize the layout of scales and arpeggios on a variety of fretboards.</p>
+<p align="center">Ride your fretboard and take your guitar skills to the next level!&nbsp;&nbsp;🎸&nbsp;&nbsp;🤘</p>
 
-<img src="https://raw.githubusercontent.com/cheap-glitch/fretboarder/master/docs/screenshot-light.png" alt="A screenshot of the app in usage.">
-<img src="https://raw.githubusercontent.com/cheap-glitch/fretboarder/master/docs/screenshot-dark.png"  alt="A screenshot of the app in usage, with dark mode enabled.">
+<img src="https://raw.githubusercontent.com/cheap-glitch/fretboarder/develop/docs/screenshot.png" alt="A screenshot of the app in usage.">
+
+> Fretboarder is a web app to visualize  the layout of scales and arpeggios on a
+> variety of fretboards. It  aims to help players get a  better grasp on scales,
+> and ultimately to become a flexible learning and practicing tool for musicians
+> interested in music theory and improvisation.
 
 
 ## Highlights
 
-#### 🎸 Customize the instrument
+🎸&nbsp;&nbsp;&nbsp;**Customize the instrument**
 
 Choose between a  variety of instruments (from ukulele to  11-string guitar) and
 tunings,  set  the  length  of  the fretboard,  and  switch  between  left-  and
 right-handed fretting.
 
-#### 🎨 Overlay scales and arpeggios
+🎨&nbsp;&nbsp;&nbsp;**Overlay scales and arpeggios**
 
 The main feature  that distinguishes Fretboarder from other similar  apps is the
 ability to  display several sequences  of notes on  the same fretboard.  You can
 overlap scales  and arpeggios, display  their intersections and  select specific
 positions on the neck.
 
-#### 💻 Use on any device
+💻&nbsp;&nbsp;&nbsp;**Use on any device**
 
 The UI has been designed to be simple and intuitive, and to work on both desktop
 and mobile devices. Dark mode included!
@@ -38,6 +42,10 @@ Contributions are welcomed! See [CONTRIBUTING.md](CONTRIBUTING.md).
 
 ## Supporting the app
 
+<a href="https://www.patreon.com/cheap_glitch" target="_blank" rel="external nofollow noopener noreferrer">
+	<img src="./docs/patreon-badge.png" alt="Become a patron">
+</a>
+
 You can support my work on Fretboarder by donating on my [Patreon](https://www.patreon.com/cheap_glitch)
 or my [PayPal](https://paypal.me/CheapGlitch) page. Plenty of cool features are coming, such as:
   * an audio player to listen to the scales

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "fretboarder",
   "description": "A web app to visualize scales, chords and arpeggios on all kinds of fretboards.",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "license": "MPL-2.0",
   "repository": "github:cheap-glitch/fretboarder",
   "author": "cheap glitch <cheap.glitch@gmail.com> (https://github.com/cheap-glitch)",
@@ -12,8 +12,8 @@
     "test": "test"
   },
   "scripts": {
-    "analyze-bundle": "vue-cli-service build --modern --report-json && webpack-bundle-analyzer dist/report.json",
-    "build": "vue-cli-service build --modern",
+    "analyze-bundle": "vue-cli-service build --report-json && webpack-bundle-analyzer dist/report.json",
+    "build": "vue-cli-service build",
     "coverage": "nyc npm test",
     "lint": "vue-cli-service lint --no-fix 'src/**/*.{js,vue}'",
     "serve": "nodemon --watch vue.config.js --exec npm run serve-vue-cli",
@@ -23,9 +23,8 @@
     "test:unit": "vue-cli-service test:unit 'test/*.test.js'"
   },
   "browserslist": [
-    "last 1 version",
-    "not dead",
-    "> 0.2%"
+    "defaults",
+    "not ie 11"
   ],
   "postcss": {
     "plugins": {
@@ -54,11 +53,11 @@
     "@cheap-glitch/scss-mixins": "^1.0.1",
     "@cheap-glitch/scss-reset": "^1.0.0",
     "@cheap-glitch/vue-cli-plugin-fontawesome": "^1.0.8",
-    "@vue/cli-plugin-babel": "^4.4.1",
-    "@vue/cli-plugin-eslint": "^4.4.1",
-    "@vue/cli-plugin-unit-mocha": "^4.4.1",
-    "@vue/cli-plugin-vuex": "^4.4.1",
-    "@vue/cli-service": "^4.4.1",
+    "@vue/cli-plugin-babel": "^4.4.4",
+    "@vue/cli-plugin-eslint": "^4.4.4",
+    "@vue/cli-plugin-unit-mocha": "^4.4.4",
+    "@vue/cli-plugin-vuex": "^4.4.4",
+    "@vue/cli-service": "^4.4.4",
     "@vue/test-utils": "^1.0.3",
     "babel-eslint": "^10.1.0",
     "chai": "^4.2.0",

src/components/FretboardSequencesItem.vue

@@ -85,9 +85,8 @@ div.FretboardSequencesItem
 				:value="position"
 				:options="positions"
 				:is-disabled="!hasPositions"
-				is-value-numeric
 
-				@change="v => update('position', v)"
+				@change="v => update('position', parseInt(v, 10))"
 				)
 
 		//----------------------------------------------------------------------

src/components/FretboardSequencesItemInterval.vue

@@ -19,7 +19,7 @@ div.FretboardSequencesItemInterval
 		@mouseleave="isTootlipOpen = false"
 		)
 		p.button__note {{ note }}
-		p.button__name(v-html="shortName")
+		p.button__interval(v-html="shortName")
 
 	//- Tooltip
 	VPopup(
@@ -35,7 +35,7 @@ div.FretboardSequencesItemInterval
 <!--{{{ JavaScript -->
 <script>
 
-import { intervalsNames, intervalsShortNames } from '@/modules/music'
+import { intervalsNames, intervalsShorthands } from '@/modules/music'
 
 export default {
 	name: 'FretboardSequencesItemInterval',
@@ -63,7 +63,7 @@ export default {
 
 	computed: {
 		name()      { return intervalsNames[this.value].toLowerCase(); },
-		shortName() { return intervalsShortNames[this.value];          },
+		shortName() { return intervalsShorthands[this.value];          },
 	},
 }
 
@@ -113,11 +113,11 @@ export default {
 	.button:not(.is-selected):hover & { color: var(--color--hover);     }
 }
 
-.button__name {
+.button__interval {
 	color: var(--color--text--secondary);
 	cursor: pointer;
 
-	font-size: 1.2rem;
+	font-size: 1.35rem;
 
 	.button.is-selected             & { color: var(--color--text); }
 	.button:not(.is-selected):hover & { color: var(--color--text); }