Adjust hotspot progress

index.twee

@@ -17,6 +17,7 @@ Spuk & Schreck
   <<set $pointsText = setup.text['StoryCaption'][2][setup.i18n.langs[settings.lang]]>>
   <<set $pointsMaximum to 600>>
   <h1>$menuText</h1>
+  <progress @value="$hotspot" max="10"></progress>
   <h5>$pointsText</h5>
   <h3>$points / $pointsMaximum</h3>
 
@@ -803,9 +804,9 @@ $(document).one(":passagedisplay", function() {
               map.setPaintProperty( location.id, 'fill-color', '#9CF299');
 
               map.on('click', location.id, (e) => {
-                                State.variables.enteredLocations.push(location.id);
-                $.wiki('<<set $hotspot to $hotspot + 1>>');
-                                if (State.variables.isStoryteller) {
+                State.variables.enteredLocations.push(location.id);
+                $.wiki('<<set $hotspot++>>');
+                if (State.variables.isStoryteller) {
                   $.wiki('<<goto "hotspot.splash">>');
                 } else { 
                   $.wiki('<<goto "hotspot.frequence">>');
@@ -1021,7 +1022,7 @@ $(document).one(":passagedisplay", function() {
 <</script>>
 
 <div class="wrapper">
-  <h1><<print $validFrequences[$hotspot] + 1>></h1>
+  <h1><<print $validFrequences[$hotspot-1]>></h1>
   <h2><<txt 1>></h2>
   <h2><<txt 2>></h2>
 </div>
@@ -1042,7 +1043,7 @@ $(document).one(":passagedisplay", function() {
 <</script>>
 
 <div class="wrapper">
-  <h1><<print $validGhostFrequences[$hotspot] + 1>></h1>
+  <h1><<print $validGhostFrequences[$hotspot-1]>></h1>
   <h2><<txt 1>></h2>
   <h2><<txt 2>></h2>
 </div>
@@ -1946,6 +1947,23 @@ input[type=text] {
   min-width: 1em
 }
 
+progress[value]  {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 20px;
+}
+
+progress[value]::-webkit-progress-bar {
+  background-color: var(--background-light-color);
+  border-radius: 2px;
+}
+
+progress[value]::-webkit-progress-value {
+  background-color: var(--secondary-color);
+  border-radius: 2px; 
+}
+
 /* ####################SUGARCUBE#################### */
 #ui-bar {
   background-color: transparent;
@@ -2380,4 +2398,5 @@ tw-hook[name="fade-out"] {
   font-size: 5vw;
   margin-left: 5vw;
   margin-right: 5vw;
+  max-width: 300px;
 }