insomnia-cognition-h5/src/views/cognitiveTasks/ContinueAddition/index.vue

<script setup lang="ts">
import { showSuccessToast } from 'vant'
import GameAPI, { type GameResultVO, type GameVO, type Result, type ResultLevel } from '@/api/game'

const router = useRouter()

const subjectInfo = ref<GameVO>({})

// 控制倒计时的显隐
const showCountDown = ref(true)
// 显示题目文本
const showSpanText = ref('')
// 测试总次数
const totalCount = ref(0)
// 当前题答案
const currentAnswer = ref(0)
// 正确总次数
const rightCount = ref(0)
// 当前轮正确次数
const currentRoundRightCount = ref(0)
// 连续对3次
const rightThree = ref(0)
// 连续错两次
const wrongTwo = ref(0)
// 当前轮需要计算的数字个数
const additionNumCount = ref(2)
// 统计每个层级答对个数
const rightCountList: Result[] = reactive([])
// 测试时长 300 秒
const gameDuration = ref(300)
// 游戏结束时间戳
const gameEndTime = ref(0)
// 游戏开始时间戳
const gameStartTime = ref(0)
// 游戏收集的数据
const gameData: GameResultVO = {
  finish: '1',
  gameId: subjectInfo.value.id,
  gameName: subjectInfo.value.name,
  userId: sessionStorage.getItem('userId')!,
  paramList: [],
  levelList: [],
}

function nNumRightCount() {
  const isIndex = rightCountList.findIndex(item => Number.parseInt(item.name!) === additionNumCount.value)
  if (isIndex !== -1) {
    if (typeof rightCountList[isIndex].value === 'number') {
      rightCountList[isIndex].value++
    }
  }
  else {
    rightCountList.push({
      name: additionNumCount.value.toString(),
      value: 1,
    })
  }
}

function createComputeSpanText() {
  // 生成下一道题和答案
  const tempSpanText: number[] = []
  let additionResult = 0
  for (let i = additionNumCount.value; i > 0; i--) {
    const tempNum = Math.floor(Math.random() * 10)
    additionResult += tempNum
    tempSpanText.push(tempNum)
  }
  showSpanText.value = tempSpanText.join('+')
  currentAnswer.value = additionResult % 10
}

function userClick(answer: number) {
  // 如果游戏时长大于或等于 300 秒，则游戏结束
  gameEndTime.value = performance.now()
  const duration = gameEndTime.value - gameStartTime.value
  if (duration >= gameDuration.value * 1000) {
    // 游戏结束，发送数据
    sendData()
    return
  }

  // 用户点击动作
  totalCount.value++
  if (answer === currentAnswer.value) {
    // 正确次数
    rightCount.value++
    // 当前数字个数计算正确数加1
    nNumRightCount()
    // 本轮正确次数
    currentRoundRightCount.value++

    rightThree.value++
    wrongTwo.value = 0
    if (rightThree.value >= 3 && wrongTwo.value === 0) {
      additionNumCount.value++
      rightThree.value = 0
      wrongTwo.value = 0
    }
  }
  else {
    // 正式测试时要做降级处理
    currentRoundRightCount.value = 0
    rightThree.value = 0
    wrongTwo.value++
    if (additionNumCount.value > 2 && rightThree.value === 0 && wrongTwo.value >= 2) {
      additionNumCount.value--
      rightThree.value = 0
      wrongTwo.value = 0
    }
  }

  // 生成下一道题
  createComputeSpanText()
}

/**
 * 倒计时结束时的回调
 */
function endCountDown() {
  // 隐藏倒计时组件
  showCountDown.value = false
  // 开始生成游戏的第一道题
  createComputeSpanText()
  // 记录游戏开始时间戳
  gameStartTime.value = performance.now()
  // 重置游戏结束时间戳
  gameEndTime.value = 0
  // 重置收集的游戏数据
}

function sendData() {
  const totalScore = rightCountList.reduce((acc, curr) => {
    acc += curr.value as number * 2 ** (Number.parseInt(curr.name!) - 2)
    return acc
  }, 0)

  gameData.gameId = subjectInfo.value.id
  gameData.gameName = subjectInfo.value.name

  gameData.levelList = rightCountList.map((item) => {
    return {
      level: item.name,
      levelParamList: [{ ...item }],
    } as ResultLevel
  })

  gameData.paramList = [
    {
      code: 'totalScore',
      name: '总分',
      value: totalScore === 0 ? 0 : Number.parseFloat(Math.log2(totalScore).toString()).toFixed(2),
    },
    {
      code: 'totalCount',
      name: '题目总数',
      value: totalCount.value,
    },
    {
      code: 'rightCount',
      name: '总正确数',
      value: rightCount.value,
    },
  ]

  GameAPI.add(gameData).then(() => {
    showSuccessToast('本次训练已结束')
    setTimeout(() => {
      const userAgent = navigator.userAgent.toLowerCase()
      const isWechatEnvironment = userAgent.includes('micromessenger')
      if (isWechatEnvironment) {
        // 执行微信环境下的逻辑，如调用微信JS-SDK
        if (wx && wx.miniProgram) {
          wx.miniProgram.navigateTo({
            url: '/pages/media/pages/feedbackTask/finish/finish',
          })
        }
      }
      else {
        router.go(-1)
        // 执行浏览器环境下的逻辑
      }
    }, 1300)
  })
}

onMounted(() => {
  const temp = sessionStorage.getItem('subjectInfo')
  if (temp) {
    subjectInfo.value = JSON.parse(temp)
  }
})
</script>

<template>
  <section class="app-container">
    <van-nav-bar class="self-nav-bar" :title="subjectInfo.name" left-arrow @click-left="router.go(-1)" />
    <count-down v-if="showCountDown" :time="5" color="white" @end-count-down="endCountDown" />
    <div v-else style="" class="mx-auto mt-[15px] w-[90%] border-6 border-white rounded-[8px] border-solid bg-[#425363] p-[15px]">
      <div class="h-[80px] flex flex-row items-center justify-center rounded-[8px] bg-[#D2E2F1]">
        <span
          class="text-[#222222]"
          :class="{
            'text-[40px]': showSpanText.length <= 11,
            'text-[36px]': showSpanText.length === 12,
            'text-[34px]': showSpanText.length === 13,
            'text-[32px]': [14, 15].includes(showSpanText.length),
            'text-[30px]': [16, 17].includes(showSpanText.length),
            'text-[27px]': [18, 19].includes(showSpanText.length),
            'text-[24px]': [20, 21].includes(showSpanText.length),
            'text-[21px]': [22, 23].includes(showSpanText.length),
            'text-[19px]': [24, 25].includes(showSpanText.length),
          }"
        >
          {{ showSpanText }}
        </span>
      </div>
      <div class="mt-[24px] flex flex-row justify-between">
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(1)">
          <span class="text-[32px] text-[#222222]">1</span>
        </div>
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(2)">
          <span class="text-[32px] text-[#222222]">2</span>
        </div>
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(3)">
          <span class="text-[32px] text-[#222222]">3</span>
        </div>
      </div>
      <div class="mt-[24px] flex flex-row justify-between">
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(4)">
          <span class="text-[32px] text-[#222222]">4</span>
        </div>
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(5)">
          <span class="text-[32px] text-[#222222]">5</span>
        </div>
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(6)">
          <span class="text-[32px] text-[#222222]">6</span>
        </div>
      </div>
      <div class="mt-[24px] flex flex-row justify-between">
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(7)">
          <span class="text-[32px] text-[#222222]">7</span>
        </div>
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(8)">
          <span class="text-[32px] text-[#222222]">8</span>
        </div>
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(9)">
          <span class="text-[32px] text-[#222222]">9</span>
        </div>
      </div>
      <div class="mt-[24px] flex flex-row justify-center">
        <div class="h-[72px] w-[72px] flex flex-row items-center justify-center rounded-[8px] bg-white" @click="userClick(0)">
          <span class="text-[32px] text-[#222222]">0</span>
        </div>
      </div>
    </div>
    <div class="absolute bottom-[16px] left-[50%] h-[45px] w-[200px] translate-x-[-50%]">
      <count-down v-if="!showCountDown" text="" is-format :time="gameDuration" :size="32" color="white" @end-count-down="userClick(0)" />
    </div>
  </section>
</template>

<style scoped lang="scss">
.app-container {
  background-image: url('/static/image/game/bg-continue-addition.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;

  :deep(.van-nav-bar) {
    &.self-nav-bar {
      .van-nav-bar__title {
        color: #ffffff;
      }

      .van-icon {
        color: #ffffff;
      }
    }
  }
}
</style>