shogiground/esm/anim.js

lishogi.org shogi ui

import { allKeys, colors } from './constants.js';
import * as util from './util.js';
export function anim(mutation, state) {
    return state.animation.enabled ? animate(mutation, state) : render(mutation, state);
}
export function render(mutation, state) {
    const result = mutation(state);
    state.dom.redraw();
    return result;
}
function makePiece(key, piece) {
    return {
        key: key,
        pos: util.key2pos(key),
        piece: piece,
    };
}
function closer(piece, pieces) {
    return pieces.sort((p1, p2) => {
        return util.distanceSq(piece.pos, p1.pos) - util.distanceSq(piece.pos, p2.pos);
    })[0];
}
function computePlan(prevPieces, prevHands, current) {
    const anims = new Map(), animedOrigs = [], fadings = new Map(), promotions = new Map(), missings = [], news = [], prePieces = new Map();
    for (const [k, p] of prevPieces) {
        prePieces.set(k, makePiece(k, p));
    }
    for (const key of allKeys) {
        const curP = current.pieces.get(key), preP = prePieces.get(key);
        if (curP) {
            if (preP) {
                if (!util.samePiece(curP, preP.piece)) {
                    missings.push(preP);
                    news.push(makePiece(key, curP));
                }
            }
            else
                news.push(makePiece(key, curP));
        }
        else if (preP)
            missings.push(preP);
    }
    if (current.animation.hands) {
        for (const color of colors) {
            const curH = current.hands.handMap.get(color), preH = prevHands.get(color);
            if (preH && curH) {
                for (const [role, n] of preH) {
                    const piece = { role, color }, curN = curH.get(role) || 0;
                    if (curN < n) {
                        const handPieceOffset = current.dom.bounds.hands
                            .pieceBounds()
                            .get(util.pieceNameOf(piece)), bounds = current.dom.bounds.board.bounds(), outPos = handPieceOffset && bounds
                            ? util.posOfOutsideEl(handPieceOffset.left, handPieceOffset.top, util.sentePov(current.orientation), current.dimensions, bounds)
                            : undefined;
                        if (outPos)
                            missings.push({
                                pos: outPos,
                                piece: piece,
                            });
                    }
                }
            }
        }
    }
    for (const newP of news) {
        const preP = closer(newP, missings.filter((p) => {
            if (util.samePiece(newP.piece, p.piece))
                return true;
            // checking whether promoted pieces are the same
            const pRole = current.promotion.promotesTo(p.piece.role), pPiece = pRole && { color: p.piece.color, role: pRole };
            const nRole = current.promotion.promotesTo(newP.piece.role), nPiece = nRole && { color: newP.piece.color, role: nRole };
            return ((!!pPiece && util.samePiece(newP.piece, pPiece)) ||
                (!!nPiece && util.samePiece(nPiece, p.piece)));
        }));
        if (preP) {
            const vector = [preP.pos[0] - newP.pos[0], preP.pos[1] - newP.pos[1]];
            anims.set(newP.key, vector.concat(vector));
            if (preP.key)
                animedOrigs.push(preP.key);
            if (!util.samePiece(newP.piece, preP.piece) && newP.key)
                promotions.set(newP.key, preP.piece);
        }
    }
    for (const p of missings) {
        if (p.key && !animedOrigs.includes(p.key))
            fadings.set(p.key, p.piece);
    }
    return {
        anims: anims,
        fadings: fadings,
        promotions: promotions,
    };
}
function step(state, now) {
    const cur = state.animation.current;
    if (cur === undefined) {
        // animation was canceled :(
        if (!state.dom.destroyed)
            state.dom.redrawNow();
        return;
    }
    const rest = 1 - (now - cur.start) * cur.frequency;
    if (rest <= 0) {
        state.animation.current = undefined;
        state.dom.redrawNow();
    }
    else {
        const ease = easing(rest);
        for (const cfg of cur.plan.anims.values()) {
            cfg[2] = cfg[0] * ease;
            cfg[3] = cfg[1] * ease;
        }
        state.dom.redrawNow(true); // optimisation: don't render SVG changes during animations
        requestAnimationFrame((now = performance.now()) => step(state, now));
    }
}
function animate(mutation, state) {
    var _a;
    // clone state before mutating it
    const prevPieces = new Map(state.pieces), prevHands = new Map([
        ['sente', new Map(state.hands.handMap.get('sente'))],
        ['gote', new Map(state.hands.handMap.get('gote'))],
    ]);
    const result = mutation(state), plan = computePlan(prevPieces, prevHands, state);
    if (plan.anims.size || plan.fadings.size) {
        const alreadyRunning = ((_a = state.animation.current) === null || _a === void 0 ? void 0 : _a.start) !== undefined;
        state.animation.current = {
            start: performance.now(),
            frequency: 1 / Math.max(state.animation.duration, 1),
            plan: plan,
        };
        if (!alreadyRunning)
            step(state, performance.now());
    }
    else {
        // don't animate, just render right away
        state.dom.redraw();
    }
    return result;
}
// https://gist.github.com/gre/1650294
function easing(t) {
    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
//# sourceMappingURL=anim.js.map