<script setup lang="ts">
  import Speed from "./components/Speed.vue";
  import Rhythm from "./components/Rhythm.vue";
  import Beat from "./components/Beat.vue";
  import Play from "./components/Play.vue";
</script>
<template>
  <p class="title">節(jié)拍器</p>
  <main>
    <Speed></Speed>
    <div class="flex">
      <Beat></Beat>
      <Rhythm></Rhythm>
    </div>
    <Play></Play>
  </main>
</template>

export const MIN_SPEED = 40
export const MAX_SPEED = 400
export const DEF_SPEED = 120
export const DEF_BEAT = [4,4]
export const BEAT_OPTIONS = [
  [1,4],
  [2,4],
  [3,4],
  [4,4],
  [3,8],
  [6,8],
  [7,8],
]
export const DEF_RHYTHM = 1
export const RHYTHM_OPTIONS = [
  { id: 1, name: '?', value: [[1]], img: './img/1.jpg', rate: 30},
  { id: 2, name: '??', value: [[1,1]], img: './img/2.jpg', rate: 15},
  { id: 3, name: '三連音', value: [[1, 1, 1]], img: './img/3.jpg', rate: 10},
  { id: 4, name: '????', value: [[1,1,1,1]], img: './img/4.jpg', rate: 10},
  { id: 5, name: 'swing', value: [[1, 0, 1]], img: './img/5.jpg', rate: 10},
  { id: 6, name: '民謠掃弦', value: [[1, 0, 0,0], [1,0,1,1]], img: './img/6.png', rate: 10},
  { id: 7, name: '民謠掃弦2', value: [[1, 0, 1, 1], [0,1,1,1]], img: './img/7.png', rate: 10},
]

// 點(diǎn)擊播放，重置節(jié)拍和節(jié)奏型計(jì)數(shù)，狀態(tài)置為true，執(zhí)行播放小節(jié)函數(shù)
function play() {
  beatCount.value = 0
  rhythmCount.value = 0
  isPlaying.value = true
  playBeat()
}

// 播放整個(gè)小節(jié)，節(jié)拍計(jì)數(shù)重置為0，允許播放重聲，播放節(jié)奏型
function playBeat () {
  if (!isPlaying.value) return false
  beat = useBeatStore().beat
  console.log('播放節(jié)拍：', beat)
  beatCount.value = 0
  heavy = true
  playRhythm()
}

// 播放整個(gè)節(jié)奏型(可能多拍), 節(jié)奏型音符計(jì)數(shù)重置
  function playRhythm () {
    if (!isPlaying.value) return false
    rhythm = useRhythmStore().rhythm.value
    rhythmRate = useRhythmStore().rhythm.rate
    console.log('播放節(jié)奏型：', rhythm)
    rhythmNotesLen = 0
    rhythmCount.value = 0
    rhythm.forEach(item => {
      rhythmNotesLen += item.length
    })
    playNote()
  }

  // 播放單個(gè)音符位置，可能是空拍
  function playNote () {
    // 一個(gè)節(jié)奏型可能有多拍
    speed = useSpeedStore().speed
    // 調(diào)整播放倍速
      player.playbackRate = Math.max(1, Math.min(10, speed / rhythmRate))
      player2.playbackRate = player.playbackRate
    const rhythmItemIndex = beatCount.value % rhythm.length 
    // 播放音頻
    const rhythmItem = rhythm[rhythmItemIndex]
    const note = rhythmItem[rhythmCount.value]
    console.log('播放音頻：', 
      note ?
        (heavy ? '重' : '輕')
      : '空'
    )
    if (note) {
      // 播放
      if (heavy) {
        player.currentTime = 0;
        player.play()
        heavy = false
      } else {
        player2.currentTime = 0;
        player2.play()
      }
    }
    // 計(jì)算間隔時(shí)間
    const oneBeatTime = ONE_MINUTE / speed
    const rhythmNoteTime = oneBeatTime / rhythmItem.length
    // 定時(shí)器，播放下一個(gè)音符
    timer = setTimeout(() => {
      let newRhythmCount = rhythmCount.value + 1
      if (newRhythmCount >= rhythmItem.length) {
        if (newRhythmCount >= rhythmNotesLen) {
          // 新的節(jié)奏型
          newRhythmCount = 0
          rhythmCount.value = newRhythmCount
        } else {
          // 當(dāng)前節(jié)奏型新的一拍
          rhythmCount.value = newRhythmCount
        }
        let newBeatCount = beatCount.value + 1
        if (newBeatCount >= beat[0]) {
          newBeatCount = 0
          // 新的節(jié)拍
          beatCount.value = newBeatCount
          playBeat()
        } else {
          beatCount.value = newBeatCount
          playRhythm()
        }
      } else {
        rhythmCount.value = newRhythmCount
        playNote()
      }
    }, rhythmNoteTime)
    // 呼吸樣式
    if (note) {
      const styleTime = rhythmNoteTime * 0.8
      rhythmCircleStyle.value = `transform: scale(1.5); transition: all linear ${styleTime / 1000}s; opacity: 0.5;`
      timer2 = setTimeout(() => {
        rhythmCircleStyle.value = 'transform: scale(0); transition: none; opacity: 0;'
      }, styleTime)
    }
  }

  const player = new Audio('./audio/beat1.mp3')
  const player2 = new Audio('./audio/beat2.mp3')
// player.play()
// player.pause()

// 調(diào)整播放倍速
player.playbackRate = Math.max(1, Math.min(10, speed / rhythmRate))
player2.playbackRate = player.playbackRate

watch([
  () => beatStore.beat, 
  () => rhythmStore.rhythm, 
  () => speedStore.speed
], () => {
  console.log('restart')
  restart()
})

    // 呼吸樣式
    if (note) {
      const styleTime = rhythmNoteTime * 0.8
      rhythmCircleStyle.value = `transform: scale(1.5); transition: all linear ${styleTime / 1000}s; opacity: 0.5;`
      timer2 = setTimeout(() => {
        rhythmCircleStyle.value = 'transform: scale(0); transition: none; opacity: 0;'
      }, styleTime)
    }

import Speech from 'speak-tts' 
const speech = new Speech()
speech.init({
  volume: 1,
  rate: 1,
  pitch: 1,
  lang: 'zh-CN',
})
  function playVoice () {
    const voice = useVoiceStore().voice
    console.log('voice: ', voice)
    if (voice === 'human') {
      const text = rhythmCount.value === 0 ? (beatCount.value + 1) : (rhythmCount.value + 1)
      speech.speak({
        text: '' + text,
        queue: false
      })
      if (heavy) {
        heavy = false
        speech.setPitch(0.5)
      }
    } else {
      if (heavy) {
        player.currentTime = 0;
        player.play()
        heavy = false
        speech.setPitch(0.5)
      } else {
        player2.currentTime = 0;
        player2.play()
      }
    }
  }

name: CI
on:
  push:
    branches:
    - main
jobs:
  job:
    name: Deployment
    runs-on: macos-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      # setup node
      - name: Setup Node.js
        uses: actions/setup-node@v3 
        with:
          node-version: 16.16.0
      # setup pnpm
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        id: pnpm-install
        with:
          version: 7
          run_install: false
      # cache
      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      # cache fail and install dependencies
      - name: Install dependencies
        if: steps.pnpm-cache.outputs.cache-hit != 'true'
        run: |
          pnpm install
      - name: Build
        run: pnpm run build
      - name: upload production artifacts
        uses: actions/upload-pages-artifact@v1
        with:
          path: dist
      # deploy
      - name: Deploy Page To Release
        id: deployment
        uses: actions/deploy-pages@v1