Merge pull request #21 from jcreek/19-add-touchclick-to-spin-help-text-depending-on-device

doc(#19): Add click to spin help text

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SelectionWheel",
-  "version": "1.3.1",
+  "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,22 +62,39 @@ function makeArrowAndCircle(
     .attr('d', `M-${r * 0.15},0L0,${r * 0.05}L0,-${r * 0.05}Z`)
     .style('fill', 'black');
   // draw spin circle
-  container
+  if (imageUrlForSpinner.length > 0) {
-    .append('circle')
+    const defs = svg.append('svg:defs');
-    .attr('cx', 0)
+
-    .attr('cy', 0)
+    defs.append('svg:pattern')
-    .attr('r', 60)
+      .attr('id', 'image')
-    .style('fill', 'white')
+      .attr('width', 1)
-    .style('cursor', 'pointer');
+      .attr('height', 1)
-  // spin text
+      .attr('patternContentUnits', 'objectBoundingBox')
-  container
+      .append('svg:image')
-    .append('text')
+      .attr('xlink:href', imageUrlForSpinner)
-    .attr('x', 0)
+      .attr('width', 1)
-    .attr('y', 10)
+      .attr('height', 1)
-    .attr('text-anchor', 'middle')
+      .attr('x', 0)
-    .text('SPIN')
+      .attr('y', 0)
-    .style('font-weight', 'bold')
+      .attr('preserveAspectRatio', 'xMaxYMax slice');
-    .style('font-size', '30px');
+
+    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)
+      .attr('cy', 0)
+      .attr('r', 60)
+      .style('fill', 'white')
+      .style('cursor', 'pointer');
+  }
 }
 
 function drawWheel() {
@@ -158,6 +180,7 @@ function drawWheel() {
       .on('end', () => {
         // mark question as seen
         d3.select(`.slice:nth-child(${picked + 1}) path`).attr('fill', '#111');
+        d3.select(`.slice:nth-child(${picked + 1}) text`).attr('fill', '#ffffff');
         // populate question
         d3.select('#question h1').text(data[picked].label.trim());
         oldrotation = rotation;
@@ -237,6 +260,11 @@ 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/serviceWorker.js

@@ -7,9 +7,6 @@ import { registerRoute, NavigationRoute, Route } from 'workbox-routing';
 // eslint-disable-next-line no-underscore-dangle, no-restricted-globals
 precacheAndRoute(self.__WB_MANIFEST);
 
-// Enable navigation preload - this should reduce navigation latency
-navigationPreload.enable();
-
 const navigationRoute = new NavigationRoute(new NetworkFirst({
   cacheName: 'navigations',
 }));

src/styles/main.scss

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

src/template.html

@@ -40,7 +40,13 @@
 
         <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.
+
+Click or tap on the wheel to spin it.
+
+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>