Hints on progress bars

config.js

@@ -11,8 +11,7 @@ function tabulate(html) {
 }
 
 
-function template(id, data) {
+function template(tmpl, data) {
-  var tmpl = $("#" + id).html();
   var brag = tmpl.replace(/\$([_A-Za-z.]+)/g, function (str, p1) {
     var dict = data;
     $.each(p1.split("."), function (i,v) {

main.html

@@ -71,7 +71,9 @@
     </table>
     
     <span class="label" >Experience</span>
+
     <div class="progress-container" id="ExpBar">
+      <div class="hint" template="$remaining XP needed for next level"></div>
       <div class="bar" style="width: 50%"></div>
     </div>
 
@@ -126,6 +128,7 @@
 
     <span class="label">Encumbrance</span>
     <div class="progress-container" id="EncumBar">
+      <div class="hint" template="$Position/$Max cubits"></div>
       <div class="bar" style="width: 50%"></div>
     </div>
   </div>
@@ -142,6 +145,7 @@
     </div>
 
     <div class="progress-container" id="PlotBar">
+      <div class="hint" template="$time remaining"></div>
       <div class="bar" style="width: 50%"></div>
     </div>
 
@@ -154,6 +158,7 @@
     </div>
 
     <div class="progress-container" id="QuestBar">
+      <div class="hint" template="$percent% complete"></div>
       <div class="bar" style="width: 50%"></div>
     </div>
   </div>
@@ -163,13 +168,14 @@
 <div id="Kill" class="label">Executing a Greater Wolog</div>
 
 <div class="progress-container" id="TaskBar">
+  <div class="hint" template="$percent%"></div>
   <div class="bar" style="width: 50%"></div>
 </div>
 
 </div>
 
 <br>
-Cheats: 
+Cheat
 </body>
 
 
@@ -177,10 +183,10 @@ Cheats:
 $Traits.Name the $Traits.Race [$hostname]
 $motto
 
-Level $Traits.Level $Traits.Class (exp. $ExpBar.position/$ExpBar.max)
+Level $Traits.Level $Traits.Class (exp. $ExpBar.position / $ExpBar.max)
 
-Plot stage: $Plots.last ($PlotBar.Hint)
+Plot stage: $Plots.last ($PlotBar.hint)
-Quest: $Quests.last ($QuestBar.Hint)
+Quest: $Quests.last ($QuestBar.hint)
 
 Stats:
    STR $Stats.STR
@@ -194,7 +200,7 @@ Equipment:
 $Equips.___
 Spell Book:
 $Spells.___
-Inventory ($EncumBar.Hint):
+Inventory ($EncumBar.hint):
 $Inventory.___
 -- $date
 -- Progress Quest 6.3.web - http://progressquest.com/

main.js

@@ -1,10 +1,10 @@
 // Copyright (c)2002-2010 Eric Fredricksen <e@fredricksen.net> all rights reserved
 
-// TODO: All these Hints
 // TODO: Test use of seed as DNA
 // TODO: Layout newguy and main better
 // TODO: fix Prologue plot bar
 // TODO: limit number of Acts
+// TODO: get first quest
 
 // revs:
 // 6: pq 6.3/web 
@@ -103,7 +103,7 @@ function Plural(s) {
     return Copy(s,1,Length(s)-1) + 'ies';
   else if (Ends(s,'us')) 
     return Copy(s,1,Length(s)-2) + 'i';
-  else if (Ends(s,'ch') || Ends(s,'x') || Ends(s,'s')) 
+  else if (Ends(s,'ch') || Ends(s,'x') || Ends(s,'s') || Ends(s, 'sh')) 
     return s + 'es';
   else if (Ends(s,'f')) 
     return Copy(s,1,Length(s)-1) + 'ves';
@@ -398,10 +398,8 @@ function Put(list, key, value) {
     EncumBar.reposition(EncumBar.Position);
   }
 
-  if (list === Inventory) {
+  if (list === Inventory)
     EncumBar.reposition(Sum(Inventory) - GetI(Inventory,'Gold'));
-    EncumBar.Hint = IntToStr(EncumBar.Position) + '/' + IntToStr(EncumBar.Max) + ' cubits';
-  }
 }
 
 function LevelUpTime(level) {  // seconds 
@@ -413,6 +411,7 @@ function LevelUpTime(level) {  // seconds
 function ProgressBar(id) {
   this.id = id;
   this.bar = $("#"+ id + " > .bar");
+  this.hint = '';
 
   this.reset = function (newmax) {
     this.Max = newmax;
@@ -420,8 +419,16 @@ function ProgressBar(id) {
   };
 
   this.reposition = function (newpos) {
-    this.Position = newpos;
+    this.Position = Min(newpos, this.Max);
     this.bar.css("width", 100 * this.Position / this.Max + "%");
+
+    // Recompute hint
+    var label = $("#" + this.id).find(".hint");
+    this.percent = (100 * this.Position).div(this.Max);
+    this.remaining = Math.floor(this.Max - this.Position);
+    this.time = RoughTime(this.Max - this.Position);
+    this.hint = template(label.attr("template"), this);
+    label.text(this.hint);
   };
 
   this.increment = function (inc) {
@@ -433,7 +440,9 @@ function ProgressBar(id) {
   };
 
   this.save = function (game) {
-    game[id] = {position: this.Position, max: this.Max};
+    game[id] = {position: this.Position, 
+                max: this.Max,
+                hint: this.hint};
   };
   
   this.load = function (game) {
@@ -784,7 +793,6 @@ function toArabic(s) {
 function CompleteAct() {
   Plots.rows().find("input:checkbox").attr("checked", "true");
   PlotBar.reset(60 * 60 * (1 + 5 * Plots.length())); // 1 hr + 5/act
-  PlotBar.Hint = 'Cutscene omitted';
   Plots.Add('Act ' + toRoman(Plots.length()));
 
   WinItem();
@@ -801,7 +809,7 @@ function Log(line) {
 }
 
 function CharSheet() {
-  return template("sheet", game);
+  return template($("#sheet").html(), game);
   // TODO: make this a separate page
 }
 
@@ -902,7 +910,6 @@ function Timer1Timer() {
       else 
         ExpBar.increment(TaskBar.Max / 1000);
     }
-    ExpBar.Hint = Math.floor(ExpBar.Max-ExpBar.Position) + ' XP needed for next level';
 
     // advance quest
     if (gain) {
@@ -911,7 +918,6 @@ function Timer1Timer() {
           CompleteQuest();
         } else if (Quests.length() > 0) {
           QuestBar.increment(TaskBar.Max / 1000);
-          QuestBar.Hint = IntToStr(100 * QuestBar.Position.div(QuestBar.Max)) + '% complete';
         }
       }
     }
@@ -922,8 +928,6 @@ function Timer1Timer() {
         InterplotCinematic();
       else 
         PlotBar.increment(TaskBar.Max / 1000);
-
-      PlotBar.Hint = RoughTime(PlotBar.Max-PlotBar.Position) + ' remaining';
     }
      
     Dequeue();

pq.css

@@ -123,6 +123,20 @@ div.progress-container > div.bar {
   width: 50%;
 }
 
+div.hint { 
+  z-index: 20;
+  position: absolute;
+  margin-top: 1px;
+  visibility: hidden;
+  width: 250px;
+  text-align: center;
+  color: #060;
+}
+
+div.progress-container:hover div.hint { 
+  visibility: visible;
+}
+
 
 #titlebar { 
   background-color: blue;
@@ -159,8 +173,8 @@ body {
   margin-top: 1em;
 }
 
-#taskbar { 
+#TaskBar, #TaskBar .hint { 
-  width: 99%;
+  width: 800px;
  }
 
 div.scroll { 

roster.js

@@ -54,7 +54,7 @@ $(document).ready(function () {
   });
   
   function brag(sheet) {
-    var brag = $(template("badge", sheet));
+    var brag = template($("#badge").html(), sheet));
     if (sheet.motto) 
       brag.find(".bs").text('"' + sheet.motto + '"');
     return brag;