chore(#2): Update version number

12 empty lines in the textarea are added to the spinner as names

package.json

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

src/index.ts

@@ -26,6 +26,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,13 +59,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');
+  if (imageUrlForSpinner.length === 0) {
     // spin text
     container
       .append('text')
@@ -73,6 +93,7 @@ function makeArrowAndCircle(
       .text('SPIN')
       .style('font-weight', 'bold')
       .style('font-size', '30px');
+  }
 }
 
 function drawWheel() {
@@ -182,7 +203,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 +249,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 {