classroom-app/src/views/tempo-practice/setting.ts

import { reactive } from 'vue';
import { handleInitTick } from './tick';
import { handleInitBeat } from './beat-tick';
import deepClone from '@/helpers/deep-clone';

export const setting = reactive({
  element: 'jianpu' as 'jianpu' | 'staff', // 元素
  beat: '4-4' as '4-2' | '4-3' | '4-4' | '8-3' | '8-6', // 拍号
  barLine: '1' as '1' | '2' | '4', // 小节数
  tempo: ['1', '2', '3'] as any[], // 节奏形筛选
  scorePart: [] as any, // 生成谱面
  playState: 'pause' as 'pause' | 'play',
  playType: 'tempo' as 'beat' | 'tempo',
  speed: 60 // 默认速度
} as any);

/**
 * 临时设置的数据
 */
export const setting_modal = reactive({
  element: 'jianpu' as 'jianpu' | 'staff', // 元素
  beat: '4-4' as '4-2' | '4-3' | '4-4' | '8-3' | '8-6', // 拍号
  barLine: '1' as '1' | '2' | '4', // 小节数
  tempo: ['1', '2', '3'] as any[], // 节奏形筛选
  scorePart: [] as any, // 生成谱面
  playState: 'pause' as 'pause' | 'play',
  playType: 'tempo' as 'beat' | 'tempo',
  speed: 60 // 默认速度
} as any);

/** 元素 */
export const elementList = {
  jianpu: '简谱',
  staff: '五线谱'
} as any;

/** 拍号 */
export const beatList = {
  '4-2': '2/4',
  '4-3': '3/4',
  '4-4': '4/4',
  '8-3': '3/8',
  '8-6': '6/8'
} as any;

/** 每页小节数量 */
export const barLineList = {
  1: 1,
  2: 2,
  4: 4
} as any;

/** 节奏型筛选 */
// 简谱
const temp: any = {};
const tempNum = [] as any
for (let i = 1; i <= 14; i++) {
  temp[i] = i + '.png';
  tempNum.push(i)
}
export const tempo4 = temp;
export const tempo4Num = tempNum

// 五线谱
const temp2: any = {};
const tempNum2 = [] as any
for (let i = 15; i <= 31; i++) {
  temp2[i] = i + '.png';
  tempNum2.push(i)
}
export const tempo8 = temp2;
export const tempo8Num = tempNum2

export const getTempList = (element: 'jianpu' | 'staff') => {
  // 
  let temp: any = {};
  let tempNum = [] as any
  for (let i = 1; i <= 14; i++) {
    temp[i] = i + '.png';
    tempNum.push(i)
  }

  let temp2: any = {};
  let tempNum2 = [] as any
  for (let i = 15; i <= 31; i++) {
    temp2[i] = i + '.png';
    tempNum2.push(i)
  }

  if(element === "jianpu") {
    temp = {}
    tempNum = []
    temp2 = {}
    tempNum2 = []
    for (let i = 1; i <= 14; i++) {
      temp[i] = i + '.png';
      tempNum.push(i)
      if(i === 5) {
        temp[32] = '32.png'
        tempNum.push(32)
      }
    }
    for (let i = 15; i <= 31; i++) {
      temp2[i] = i + '.png';
      tempNum2.push(i)
    }
  } 
  return {
    tempo4: temp,
    tempo4Num: tempNum,
    tempo8: temp2,
    tempo8Num: tempNum2
  }
}

/** 随机生成元素 */
export const randomScoreElement = (element?: string) => {
  // const tempoList = setting.tempo;
  let tempoList = getTempList(setting_modal.element).tempo4Num || [] as any
  if (['4-2', '4-3', '4-4'].includes(setting_modal.beat)) {
    tempoList = getTempList(setting_modal.element).tempo4Num;
  } else if (['8-3', '8-6'].includes(setting_modal.beat)) {
    tempoList = getTempList(setting_modal.element).tempo8Num;
  }
  const prefix = setting_modal.element === 'jianpu' ? 'j-' : 'f-';
  if (element) {
    const newArr = tempoList.filter((item: any) => item !== element);
    // 生成一个0到newArr长度之间的随机索引
    const randomIndex = Math.floor(Math.random() * newArr.length);
    return {
      url: prefix + newArr[randomIndex] + '.png',
      index: newArr[randomIndex]
    };
  } else {
    // 如果只有一个就直接返回
    if (tempoList.length === 1) {
      return {
        url: prefix + tempoList[0] + '.png',
        index: tempoList[0]
      };
    } else {
      const randomIndex = Math.floor(Math.random() * tempoList.length);
      const randomItem = tempoList[randomIndex];
      return {
        url: prefix + randomItem + '.png',
        index: randomItem
      };
    }
  }
};

/** 设置元素方向 */
export const elementDirection = (type: string, index: number) => {
  const prefix = setting.element === 'jianpu' ? 'j-' : 'f-';
  let ele = '';
  let i = 0;
  // const tempoList = setting.tempo;
  let tempoList = getTempList(setting.element).tempo4Num || [] as any
  if (['4-2', '4-3', '4-4'].includes(setting_modal.beat)) {
    tempoList = getTempList(setting.element).tempo4Num;
  } else if (['8-3', '8-6'].includes(setting_modal.beat)) {
    tempoList = getTempList(setting.element).tempo8Num;
  }
  const toIndex = tempoList.findIndex((t: any) => Number(t) === index);
  if (type === 'up') {
    if (toIndex <= 0) {
      ele = tempoList[tempoList.length - 1];
      i = tempoList.length - 1;
    } else {
      ele = tempoList[toIndex - 1];
      i = toIndex - 1;
    }
  } else if (type === 'down') {
    if (toIndex >= tempoList.length - 1) {
      ele = tempoList[0];
      i = 0;
    } else {
      ele = tempoList[toIndex + 1];
      i = toIndex + 1;
    }
  }

  return {
    url: prefix + ele + '.png',
    index: Number(ele)
  };
};

/**
 * 生成谱面
 * @param {temp} 是否临时生成
 * */
export const renderScore = () => {
  const barLine = Number(setting.barLine);
  const beatA = setting.beat.split('-').map((i: any) => Number(i));
  let beat = beatA[1];
  if (beatA[0] === 8) {
    beat = beat / 3;
  }
  const tempBeat: any = [];
  for (let i = 0; i < barLine; i++) {
    tempBeat[i] = [];
    for (let j = 0; j < beat; j++) {
      tempBeat[i][j] = {
        ...randomScoreElement()
      };
    }
  }

  setting.scorePart = tempBeat;

  const beatLengthInMilliseconds = (60 / setting.speed) * 1000;
  if (setting.playType === 'beat') {
    handleInitTick(
      beatLengthInMilliseconds,
      Number(beatA[1]) || 4,
      Number(beatA[0])
    );
  } else {
    handleInitBeat(beatLengthInMilliseconds, Number(beatA[1]) || 4);
  }
  initSelectScorePart();

  // 初始化设置里面的数据
  setting_modal.scorePart = deepClone(setting.scorePart)
};

/** 初始化选中状态 */
export const initSelectScorePart = (i?: number, j?: number) => {
  setting.scorePart.forEach((part: Array<any>) => {
    part.forEach((item: any) => {
      item.selected = false;
    });
  });

  if (i !== undefined && j !== undefined && setting.scorePart[i][j]) {
    setting.scorePart[i][j].selected = true;
  }
};




/** 随机生成元素  设置中 */
export const randomScoreElementModal = (element?: string) => {
  let tempoList = getTempList(setting_modal.element).tempo4Num || [] as any
  if (['4-2', '4-3', '4-4'].includes(setting_modal.beat)) {
    tempoList = getTempList(setting_modal.element).tempo4Num;
  } else if (['8-3', '8-6'].includes(setting_modal.beat)) {
    tempoList = getTempList(setting_modal.element).tempo8Num;
  }

  const prefix = setting_modal.element === 'jianpu' ? 'j-' : 'f-';
  if (element) {
    const newArr = tempoList.filter((item: any) => item !== element);
    // 生成一个0到newArr长度之间的随机索引
    const randomIndex = Math.floor(Math.random() * newArr.length);
    return {
      url: prefix + newArr[randomIndex] + '.png',
      index: newArr[randomIndex]
    };
  } else {
    // 如果只有一个就直接返回
    if (tempoList.length === 1) {
      return {
        url: prefix + tempoList[0] + '.png',
        index: tempoList[0]
      };
    } else {
      const randomIndex = Math.floor(Math.random() * tempoList.length);
      const randomItem = tempoList[randomIndex];
      return {
        url: prefix + randomItem + '.png',
        index: randomItem
      };
    }
  }
};
/*** 生成谱面  设置中 */
export const renderScoreModal = () => {
  const barLine = Number(setting_modal.barLine);
  const beatA = setting_modal.beat.split('-').map((i: any) => Number(i));
  let beat = beatA[1];
  if (beatA[0] === 8) {
    beat = beat / 3;
  }
  const tempBeat: any = [];
  for (let i = 0; i < barLine; i++) {
    tempBeat[i] = [];
    for (let j = 0; j < beat; j++) {
      tempBeat[i][j] = {
        ...randomScoreElementModal()
      };
    }
  }
  setting_modal.scorePart = tempBeat;

  const beatLengthInMilliseconds = (60 / setting.speed) * 1000;
  if (setting_modal.playType === 'beat') {
    handleInitTick(
      beatLengthInMilliseconds,
      Number(beatA[1]) || 4,
      Number(beatA[0])
    );
  } else {
    handleInitBeat(beatLengthInMilliseconds, Number(beatA[1]) || 4);
  }
  initSelectScorePartModal();
};

/** 初始化选中状态 设置中 */
export const initSelectScorePartModal = (i?: number, j?: number) => {
  setting_modal.scorePart.forEach((part: Array<any>) => {
    part.forEach((item: any) => {
      item.selected = false;
    });
  });

  if (i !== undefined && j !== undefined && setting_modal.scorePart[i][j]) {
    setting_modal.scorePart[i][j].selected = true;
  }
};