Upload index.html

index.html

@@ -11,9 +11,8 @@
        text-shadow:0 2px 6px rgba(0,0,0,.45);pointer-events:none}
   #hud b{font-size:13px;letter-spacing:.12em}
   #hudText{animation:fade 1.2s ease 15s forwards}
-  @keyframes fade{ to{ opacity:0 } }
-  #bar{width:180px;height:6px;margin-top:8px;background:rgba(0,0,0,.35);border-radius:3px;overflow:hidden}
-  #fill{height:100%;width:0;background:#79d2ff;border-radius:3px}
+  @keyframes fade{ to{ opacity:0; visibility:hidden } }
+  canvas.idle{cursor:none}
   #menu{position:fixed;right:16px;top:14px;width:250px;padding:12px 14px;pointer-events:auto;
         background:rgba(10,37,64,.86);border:1px solid rgba(233,245,255,.22);border-radius:8px;
         color:#e9f5ff;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
@@ -32,7 +31,6 @@
     <b>PUTT-PUTT ON THE GREAT SEA</b><br>
     WASD or arrows throttle &middot; A/D rudder &middot; drag = camera &middot; wheel = zoom &middot; R = reset &middot; M = menu
   </div>
-  <div id="bar"><div id="fill"></div></div>
 </div>
 <div id="menu">
   <b>MENU</b>
@@ -43,7 +41,6 @@
 
 /* ================= gl ================= */
 const cv = document.getElementById("c");
-const fillEl = document.getElementById("fill");
 const gl = cv.getContext("webgl2", { antialias: true });
 if (!gl) { document.body.innerHTML = "<p style='color:#fff;font-family:monospace;padding:20px'>WebGL2 is required.</p>"; throw new Error("no webgl2"); }
 
@@ -961,6 +958,17 @@ const stopDrag = e=>{
 };
 cv.addEventListener("pointerup", stopDrag);
 cv.addEventListener("pointercancel", stopDrag);
+// A cursor cannot be transitioned - it is drawn by the browser, not by the page - so it can only
+// appear or disappear. It comes back on any movement, and stays put while you are dragging.
+let cursorTimer = null;
+function showCursor(){
+  cv.classList.remove("idle");
+  clearTimeout(cursorTimer);
+  cursorTimer = setTimeout(()=>{ if(!dragging) cv.classList.add("idle"); }, 1200);
+}
+cv.addEventListener("pointermove", showCursor);
+cv.addEventListener("pointerleave", ()=>{ clearTimeout(cursorTimer); cv.classList.remove("idle"); });
+cv.addEventListener("pointerdown", showCursor);
 addEventListener("pointermove", e=>{
   if(!dragging) return;
   dragYaw  += (e.clientX-lastX)*0.006;
@@ -1259,8 +1267,7 @@ function frame(nowMs){
   }
   puffs = puffs.filter(p=>p.life < p.max);
 
-  /* --- hud + engine hum / water hiss levels --- */
-  fillEl.style.width = Math.round(Math.abs(boat.throttle)*100) + "%";
+  /* --- engine hum / water hiss levels --- */
   if(AC){
     const lvl = Math.abs(boat.throttle);
     // the candle is always heating something, so at rest there is a soft idle chug rather than silence