The Deadlock Wiki

User:Monster Domosed/common.js: Difference between revisions

Browse history interactively
← Older editNewer edit →

Monster Domosed (talk | contribs)

2 user groups
4,611 edits
No edit summary
Undo
Tag: Undo
Line 30: Line 30:
             startFrame  = +el.dataset.startFrame  || 0,
             startFrame  = +el.dataset.startFrame  || 0,
             sensitivity = +el.dataset.sensitivity || 5;
             sensitivity = +el.dataset.sensitivity || 5;
        /* ---- 1:1 square for 3D strip ---- */
        var sq = Math.min(fw, fh);


         var hint = el.querySelector('.rotatable-model-hint'),
         var hint = el.querySelector('.rotatable-model-hint'),
Line 47: Line 44:
             is2D  = false,
             is2D  = false,
             dragOK = true,
             dragOK = true,
             ready  = false;
             ready  = false;   // true once the strip image has loaded


         /* ============================================================
         /* ============================================================
           3D SPRITE STRIP — each frame is sq × sq
           3D SPRITE STRIP
           ============================================================ */
           ============================================================ */
         var img = makeImg(imageUrl, '', 'rm-strip');
         var img = makeImg(imageUrl, '', 'rm-strip');


         img.style.height = sq + 'px';
        // Set explicit display dimensions
         img.style.width  = (sq * count) + 'px';
        // width = single frame width × number of frames
        // height = frame height
         img.style.height = fh + 'px';
         img.style.width  = (fw * count) + 'px';


         img.addEventListener('load', function () {
         img.addEventListener('load', function () {
Line 68: Line 68:
         el.insertBefore(img, el.firstChild);
         el.insertBefore(img, el.firstChild);


        // Handle cached images
         if (img.complete && img.naturalWidth > 0) {
         if (img.complete && img.naturalWidth > 0) {
             ready = true;
             ready = true;
Line 75: Line 76:


         /* ============================================================
         /* ============================================================
           2D STATIC IMAGE — renders at full fw × fh
           2D STATIC IMAGE
           ============================================================ */
           ============================================================ */
         var staticImg = null;
         var staticImg = null;
Line 126: Line 127:


         /* ============================================================
         /* ============================================================
           FRAME DISPLAY — sq × sq centred in fw × fh viewport
           FRAME DISPLAY
           ============================================================ */
           ============================================================ */
         function show(idx) {
         function show(idx) {
             cur = ((idx % count) + count) % count;
             cur = ((idx % count) + count) % count;
             img.style.left = ((fw - sq) / 2 - cur * sq) + 'px';
            // Move the strip so that frame `cur` is visible in the viewport
             img.style.top  = ((fh - sq) / 2) + 'px';
            var offset = cur * fw;
             img.style.left = '-' + offset + 'px';
             img.style.top  = '0px';
         }
         }


Line 184: Line 187:
         /* ============================================================
         /* ============================================================
           DRAG  (mouse + touch)
           DRAG  (mouse + touch)
          One frame per `sensitivity` pixels of movement.
          Clamped to ±1 frame per event to prevent skipping.
           ============================================================ */
           ============================================================ */
         function startDrag(x0) {
         function startDrag(x0) {
Line 195: Line 200:
                 acc += dx;
                 acc += dx;


                // Convert accumulated pixels to frame steps
                 while (acc >= sensitivity) {
                 while (acc >= sensitivity) {
                     acc -= sensitivity;
                     acc -= sensitivity;
Line 237: Line 243:
         }, { passive: false });
         }, { passive: false });


         /* ---- wheel ---- */
         /* ---- wheel: always ±1 frame per tick ---- */
         el.addEventListener('wheel', function (e) {
         el.addEventListener('wheel', function (e) {
             if (!dragOK || !ready) return;
             if (!dragOK || !ready) return;
Retrieved from "https://deadlock.wiki/User:Monster_Domosed/common.js"