chore(*): Update package version

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SelectionWheel",
-  "version": "1.2.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 = {
@@ -26,6 +29,8 @@ const color = d3.scaleOrdinal(d3.schemeCategory10);
 let data = [];
 const testData = ['Person 1', 'Person 2', 'Person 3', 'Person 4'];
 
+let imageUrlForSpinner = '';
+
 // eslint-disable-next-line no-unused-vars
 function rotTween(to) {
   const i = d3.interpolate(oldrotation % 360, rotation);
@@ -57,6 +62,31 @@ function makeArrowAndCircle(
     .attr('d', `M-${r * 0.15},0L0,${r * 0.05}L0,-${r * 0.05}Z`)
     .style('fill', 'black');
   // draw spin circle
+  if (imageUrlForSpinner.length > 0) {
+    const defs = svg.append('svg:defs');
+
+    defs.append('svg:pattern')
+      .attr('id', 'image')
+      .attr('width', 1)
+      .attr('height', 1)
+      .attr('patternContentUnits', 'objectBoundingBox')
+      .append('svg:image')
+      .attr('xlink:href', imageUrlForSpinner)
+      .attr('width', 1)
+      .attr('height', 1)
+      .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');
+  } else {
     container
       .append('circle')
       .attr('cx', 0)
@@ -64,15 +94,7 @@ function makeArrowAndCircle(
       .attr('r', 60)
       .style('fill', 'white')
       .style('cursor', 'pointer');
-  // spin text
-  container
-    .append('text')
-    .attr('x', 0)
-    .attr('y', 10)
-    .attr('text-anchor', 'middle')
-    .text('SPIN')
-    .style('font-weight', 'bold')
-    .style('font-size', '30px');
+  }
 }
 
 function drawWheel() {
@@ -182,7 +204,7 @@ function startOver() {
 function startSpinning() {
   const textArea = <HTMLInputElement>document.getElementById('input-lines');
   const inputData = textArea.value.trim()
-    ? textArea.value.split('\n')
+    ? textArea.value.split('\n').filter((elm) => elm)
     : testData;
   const tempData = [];
   for (let index = 0; index < inputData.length; index += 1) {
@@ -228,6 +250,20 @@ function startSpinning() {
 const button = document.getElementById('startSpinning');
 button.onclick = startSpinning;
 
+const textArea = <HTMLInputElement>document.getElementById('input-lines');
+if (window.localStorage.TextEditorData) {
+  textArea.value = window.localStorage.TextEditorData;
+}
+
+textArea.addEventListener('keyup', () => {
+  window.localStorage.TextEditorData = textArea.value;
+});
+
+const urlParams = new URLSearchParams(window.location.search);
+if (urlParams.has('imgUrl')) {
+  imageUrlForSpinner = urlParams.get('imgUrl');
+}
+
 if (process.env.NODE_ENV === 'production') {
   loadServiceWorker();
 }

src/styles/main.scss

@@ -176,6 +176,10 @@ text{
   margin-bottom: 50px;
 }
 
+#image{
+  width: 100%;
+}
+
 /* Buttons */
 
 .button {

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>