chore(*): Update package version

feat(#2): Add image customisation for mid-spinner

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SelectionWheel",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "A fun and simple selection wheel.",
   "main": "index.js",
   "scripts": {

src/index.ts

@@ -4,6 +4,9 @@ import loadServiceWorker from './loadServiceWorker';
 require('./assets/favicon.ico');
 require('./assets/android-chrome-192x192.png');
 require('./assets/android-chrome-512x512.png');
+require('./assets/apple-touch-icon.png');
+require('./assets/favicon-16x16.png');
+require('./assets/favicon-32x32.png');
 require('./styles/main.scss');
 
 const padding = {
@@ -74,25 +77,23 @@ function makeArrowAndCircle(
       .attr('x', 0)
       .attr('y', 0)
       .attr('preserveAspectRatio', 'xMaxYMax slice');
-  }
+
-  container
-    .append('circle')
-    .attr('cx', 0)
-    .attr('cy', 0)
-    .attr('r', 60)
-    .style('fill', 'white')
-    .style('fill', 'url(#image)')
-    .style('cursor', 'pointer');
-  if (imageUrlForSpinner.length === 0) {
-    // spin text
     container
-      .append('text')
+      .append('circle')
-      .attr('x', 0)
+      .attr('cx', 0)
-      .attr('y', 10)
+      .attr('cy', 0)
-      .attr('text-anchor', 'middle')
+      .attr('r', 60)
-      .text('SPIN')
+      .style('fill', 'white')
-      .style('font-weight', 'bold')
+      .style('fill', 'url(#image)')
-      .style('font-size', '30px');
+      .style('cursor', 'pointer');
+  } else {
+    container
+      .append('circle')
+      .attr('cx', 0)
+      .attr('cy', 0)
+      .attr('r', 60)
+      .style('fill', 'white')
+      .style('cursor', 'pointer');
   }
 }
 

src/template.html

@@ -40,7 +40,11 @@
 
         <div id="input-container">
             <textarea id="input-lines" class="input-items" rows="15" cols="60" name="text"
-            placeholder="Enter names to be shuffled, one per line. Leave this area empty in order to use a default set of generated names."></textarea>
+            placeholder="Enter names to be shuffled, one per line. Leave this area empty in order to use a default set of generated names.
+
+You can also customise the centre of the spinner with an image. Just put ?imgUrl= at the end of the web address and the URL of the image you want to use.
+
+For example, https://wheel.jcreek.co.uk/?imgUrl=https://www.mammal.org.uk/wp-content/uploads/2021/09/red-fox-300x300.jpg"></textarea>
             <button id="startSpinning" class="input-items button button-green" role="button">Start spinning</button>
         </div>