removed console.logs, changed dark mode hover color, made progress bar wider

modulearn/src/App.svelte

@@ -13,7 +13,6 @@
     interval = setInterval(() => {
       const pos = video.position()
       const newModule = getModule(pos)
-      if (!pos) return console.log('no pos')
       position.update(() => pos)
         if (newModule && !$currentModule 
             || newModule && $currentModule && newModule.name !== $currentModule.name)
@@ -36,7 +35,6 @@
   const onRepositionInModule = event => {
     const { percentage } = event.detail
     const pos = $currentModule.start + ($currentModule.duration * percentage / 100)
-    console.log(pos)
     jumpTo(pos)
   }
 

modulearn/src/Module.svelte

@@ -2,13 +2,13 @@
   import { createEventDispatcher } from 'svelte';
   import { currentModule, position } from "./stores"
 
-  const dispatch = createEventDispatcher()
-
   export let module
-  let progressBar
+
+  const dispatch = createEventDispatcher()
+  const progressWidth = 240
   const getProgress = pos => (pos - module.start) / module.duration * 100
 
-  let selected; let progress; let klass;
+  let selected; let progress; let klass; let progressBar
 
   $: selected = $currentModule && $currentModule.name === module.name
   $: if (selected) {
@@ -21,17 +21,10 @@
 
   const progressClick = e => {
 	// https://stackoverflow.com/a/28311723/4386191
-	const max = 160
 	const pos = e.pageX - progressBar.offsetLeft
-	let dual = Math.round(pos / max * 100)
-
-	if (dual > 100) {
-      console.log(dual)
-	  dual = 100;
-	}
-
+	let dual = Math.round(pos / progressWidth * 100)
+	if (dual > 100) dual = 100;
     dispatch("repositionInModule", {percentage: dual})
-
   }
 
 </script>
@@ -39,12 +32,15 @@
 <div on:click={() => dispatch("selectModule", { module })} >
   <span class="{klass}">I want to {module.outcome}.</span>
   {#if progress}
-      <progress bind:this={progressBar} on:click={progressClick} value={progress} max=100>Hi</progress>
+      <progress 
+         bind:this={progressBar} 
+         on:click={progressClick} 
+         value={progress} 
+         max=100>
+      </progress>
   {/if}
 </div>
 
-
-
 <style>
   @media (prefers-color-scheme: light) {
     span.current { background-color: yellow;}
@@ -54,11 +50,15 @@
   @media (prefers-color-scheme: dark) {
     span.current { background-color: blue; }
     span:hover {
-      background-color: lavender;
-      color: #222;
+      background-color: purple;
     }
   }
 
+  progress {
+    width: 240px;
+    height: 1.2em;
+  }
+
   div { padding: .3em; }
   span {
     cursor: pointer;