shoot-miniprograms/src/util.js

import websocket from "@/websocket";
import { isGamingAPI, getGameAPI } from "@/apis";

export const formatTimestamp = (timestamp) => {
  const date = new Date(timestamp * 1000);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();

  return `${year}-${month}-${day}`;
};

export const checkConnection = () => {
  uni.sendSocketMessage({
    data: JSON.stringify({ event: "ping", data: {} }),
    fail: () => {
      websocket.closeWebSocket();
      const token = uni.getStorageSync("token");
      if (!token) return;
      // 如果发送失败，说明连接已断开，需要重新连接
      websocket.createWebSocket(token, (content) => {
        uni.$emit("socket-inbox", content);
      });
    },
  });
};

export const debounce = (fn, delay = 300) => {
  let timer = null;
  return async (...args) => {
    if (timer) clearTimeout(timer);
    return new Promise((resolve) => {
      timer = setTimeout(async () => {
        try {
          const result = await fn(...args);
          resolve(result);
        } finally {
          timer = null;
        }
      }, delay);
    });
  };
};

export function renderScores(ctx, arrows = []) {
  let rowIndex = 0;
  arrows.forEach((item, i) => {
    rowIndex = i;
    if (arrows.length >= 36 && i < 36) {
      ctx.drawImage(
        "../static/score-bg.png",
        16 + (i % 9) * 30,
        290 + Math.ceil((i + 1) / 9) * 30,
        27,
        27,
        "center"
      );
      renderText(
        ctx,
        item.ring,
        18,
        "#fed847",
        29.5 + (i % 9) * 30,
        310 + Math.ceil((i + 1) / 9) * 30,
        "center"
      );
    } else if (arrows.length >= 12 && i < 12) {
      if (i > 5) rowIndex = i - 6;
      ctx.drawImage(
        "../static/score-bg.png",
        24 + rowIndex * 42,
        i > 5 ? 362 : 320,
        38,
        38
      );
      renderText(
        ctx,
        item.ring,
        23,
        "#fed847",
        43 + rowIndex * 42,
        i > 5 ? 389 : 347,
        "center"
      );
    }
  });
}

export function renderLine(ctx, from) {
  ctx.beginPath();
  ctx.lineWidth = 1;
  ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
  const length = 35;
  ctx.moveTo(from, 295);
  ctx.lineTo(from + length, 295);
  ctx.stroke();
}

export function renderText(ctx, text, size, color, x, y, textAlign = "left") {
  ctx.setFontSize(size);
  ctx.setFillStyle(color);
  ctx.setTextAlign(textAlign);
  ctx.fillText(text, x, y);
}

export function renderRankTitle(ctx, text) {
  const fontSize = 8;
  const textWidth = ctx.measureText(text).width;
  const padding = 8; // 文字与背景边缘的间距
  const radius = 8; // 圆角半径
  const textX = 76;
  const textY = 50;
  const x = textX - padding - 10; // 文字 x 坐标减去内边距
  const y = textY - fontSize - padding / 2 + 2; // 文字 y 坐标减去字体大小和内边距
  const width = textWidth + padding * 2 - 25; // 背景宽度
  const height = fontSize + padding - 2; // 背景高度

  // 开始绘制圆角矩形
  ctx.beginPath();
  // 从左上角开始，顺时针绘制
  ctx.moveTo(x + radius, y);
  // 上边框
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  // 右边框
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  // 下边框
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  // 左边框
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);

  // 设置背景颜色并填充
  ctx.fillStyle = "#5F51FF";
  ctx.fill();
  ctx.setFontSize(fontSize);
  ctx.setTextAlign("center");
  ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
  ctx.fillText(text, textX, textY); // 绘制文字
}

export const drawRoundImage = async (
  ctx,
  imgPath,
  x,
  y,
  width,
  height,
  radius
) => {
  ctx.save();
  // 创建圆角路径
  ctx.beginPath();
  ctx.moveTo(x + radius, y);

  // 右上角
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + radius, radius);

  // 右下角
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

  // 左下角
  ctx.lineTo(x + radius, y + height);
  ctx.arcTo(x, y + height, x, y + height - radius, radius);

  // 左上角
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);

  ctx.clip();
  // 绘制图片
  ctx.drawImage(imgPath, x, y, width, height);
  ctx.restore();
};

export async function generateCanvasImage(canvasId, type, user, data) {
  try {
    var ctx = uni.createCanvasContext(canvasId);
    const width = 300;
    const height = 534;
    ctx.drawImage("../static/share-bg.png", 0, 0, width, height);
    drawRoundImage(ctx, user.avatar, 17, 20, 32, 32, 20);
    ctx.drawImage(user.lvlImage, 12, 15, 42, 42);
    renderText(ctx, user.nickName, 13, "#fff", 58, 34);
    renderRankTitle(ctx, user.lvlName);

    let titleImage = "../static/first-try-title.png";
    let subTitle = "正式开启弓箭手之路";
    if (type > 1) {
      subTitle = `今日弓箭练习打卡 ${data.createdAt
        .split(" ")[0]
        .replaceAll("-", ".")}`;
    }
    if (type == 2) {
      titleImage = "../static/practise-one-title.png";
    } else if (type == 3) {
      titleImage = "../static/practise-two-title.png";
    }
    ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
    const subTitleWidth = ctx.measureText(subTitle).width;
    renderText(
      ctx,
      subTitle,
      18,
      "#fff",
      width / 2 - subTitleWidth - (type > 1 ? 15 : 9),
      220
    );
    renderText(ctx, "共", 14, "#fff", 122, 300);
    const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
    renderText(ctx, totalRing, 14, "#fed847", 148, 300, "center");
    renderText(ctx, "环", 14, "#fff", 161, 300);
    renderLine(ctx, 77);
    renderLine(ctx, 185);
    renderScores(ctx, data.arrows);
    ctx.drawImage(
      "../static/device-icon.png",
      width * 0.06,
      height * 0.87,
      48,
      48
    );
    renderText(ctx, "射灵平台", 14, "#fff", width * 0.25, height * 0.9);
    renderText(
      ctx,
      "快加入我们一起玩吧~",
      10,
      "rgba(255, 255, 255, 0.5)",
      width * 0.25,
      height * 0.93
    );
    renderText(
      ctx,
      "后羿就是这样练成的",
      10,
      "rgba(255, 255, 255, 0.5)",
      width * 0.25,
      height * 0.955
    );
    ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 56, 56);
    ctx.draw();
  } catch (err) {
    console.log(err);
  }
}

export const wxShare = async () => {
  try {
    const res = await uni.canvasToTempFilePath({
      canvasId: "shareCanvas",
      fileType: "png", // 图片格式，可选 jpg 或 png
      quality: 1, // 图片质量，取值范围为 0-1
    });
    wx.showShareImageMenu({
      path: res.tempFilePath,
    });
  } catch (error) {
    uni.showToast({
      title: "生成图片失败",
      icon: "error",
    });
  }
};

export const isGameEnded = async (battleId) => {
  const isGaming = await isGamingAPI();
  if (!isGaming) {
    const result = await getGameAPI(battleId);
    if (result.mode) {
      uni.redirectTo({
        url: `/pages/battle-result?battleId=${battleId}`,
      });
    } else {
      uni.showToast({
        title: "比赛已结束",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    }
  }
  return !isGaming;
};

// 获取元素尺寸和位置信息
export const getElementRect = (classname) => {
  return new Promise((resolve) => {
    const query = uni.createSelectorQuery();
    query
      .select(classname)
      .boundingClientRect((rect) => {
        resolve(rect);
      })
      .exec();
  });
};

const calcNormalBowTarget = (x, y, targetWidth, targetHeight) => {
  // 计算靶心坐标（靶纸中心）
  const centerX = targetWidth / 2;
  const centerY = targetHeight / 2;

  // 计算点击点到靶心的距离
  const deltaX = x - centerX;
  const deltaY = y - centerY;
  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  // 计算靶纸半径（取宽高中较小值的一半）
  // const targetRadius = Math.min(targetWidth, targetHeight) / 2;
  const targetRadius = targetWidth / 2;

  // 如果距离超过靶纸半径，则脱靶
  if (distance > targetRadius) return 0;

  // 计算相对距离（0-1之间）
  const relativeDistance = distance / targetRadius;
  // 全环靶有10个环，每个环占半径的10%
  // 从外到内：1环到10环
  // 距离越近靶心，环数越高
  if (relativeDistance <= 0.05) return "X";
  if (relativeDistance <= 0.1) return 10;
  if (relativeDistance <= 0.2) return 9;
  if (relativeDistance <= 0.3) return 8;
  if (relativeDistance <= 0.4) return 7;
  if (relativeDistance <= 0.5) return 6;
  if (relativeDistance <= 0.6) return 5;
  if (relativeDistance <= 0.7) return 4;
  if (relativeDistance <= 0.8) return 3;
  if (relativeDistance <= 0.9) return 2;
  if (relativeDistance <= 1.0) return 1;

  return 0; // 脱靶
};

const calcHalfBowTarget = (x, y, side, noX = false) => {
  // 计算靶心坐标（靶纸中心）
  const centerX = side / 2;
  const centerY = side / 2;

  // 计算点击点到靶心的距离
  const deltaX = x - centerX;
  const deltaY = y - centerY;
  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);

  // 计算靶纸半径（取宽高中较小值的一半）
  const targetRadius = side / 2;

  // 如果距离超过靶纸半径，则脱靶
  if (distance > targetRadius) return 0;

  // 计算相对距离（0-1之间）
  const relativeDistance = distance / targetRadius;
  if (relativeDistance <= 0.1) return noX ? 10 : "X";
  if (relativeDistance <= 0.2) return noX ? 9 : 10;
  if (relativeDistance <= 0.4) return 9;
  if (relativeDistance <= 0.6) return 8;
  if (relativeDistance <= 0.8) return 7;
  if (relativeDistance <= 1.0) return 6;

  return 0; // 脱靶
};

export const calcTripleBowTarget = (
  x,
  y,
  targetWidth,
  targetHeight,
  noX = false
) => {
  const side = targetWidth * 0.325;
  if (x / targetWidth >= 0.337 && x / targetWidth <= 0.663) {
    if (y / targetHeight <= 0.325) {
      return calcHalfBowTarget(x - targetWidth * 0.337, y, side, noX);
    } else if (y / targetHeight >= 0.335 && y / targetHeight <= 0.662) {
      return calcHalfBowTarget(
        x - targetWidth * 0.337,
        y - targetHeight * 0.335,
        side,
        noX
      );
    } else if (y / targetHeight >= 0.674) {
      return calcHalfBowTarget(
        x - targetWidth * 0.337,
        y - targetHeight * 0.674,
        side,
        noX
      );
    }
  }
  return 0;
};

export const calcPinBowTarget = (
  x,
  y,
  targetWidth,
  targetHeight,
  noX = false
) => {
  const side = targetWidth * 0.48;
  if (
    x / targetWidth >= 0.26 &&
    x / targetWidth <= 0.74 &&
    y / targetWidth >= 0.032 &&
    y / targetHeight <= 0.51
  ) {
    return calcHalfBowTarget(
      x - targetWidth * 0.26,
      y - targetHeight * 0.032,
      side,
      noX
    );
  } else if (x / targetHeight <= 0.48 && y / targetHeight >= 0.482) {
    return calcHalfBowTarget(x, y - targetHeight * 0.482, side, noX);
  } else if (x / targetHeight >= 0.52 && y / targetHeight >= 0.482) {
    return calcHalfBowTarget(
      x - targetWidth * 0.52,
      y - targetHeight * 0.482,
      side,
      noX
    );
  }
  return 0;
};

export const calcRing = (bowtargetId, x, y, targetWidth, targetHeight) => {
  if (bowtargetId < 4) {
    return calcNormalBowTarget(x, y, targetWidth, targetHeight);
  } else if (bowtargetId < 7) {
    return calcHalfBowTarget(x, y, targetWidth);
  } else if (bowtargetId === 7) {
    return calcTripleBowTarget(x, y, targetWidth, targetHeight);
  } else if (bowtargetId === 8) {
    return calcPinBowTarget(x, y, targetWidth, targetHeight);
  } else if (bowtargetId === 9) {
    return calcTripleBowTarget(x, y, targetWidth, targetHeight, true);
  } else if (bowtargetId === 10) {
    return calcPinBowTarget(x, y, targetWidth, targetHeight, true);
  }
  return 0;
};