pet/src/components/JiaobeiAnimation.vue

<template>
  <div class="jiaobei-overlay">
    <div class="content">
      
      <!-- 動畫區域 -->
      <div class="blocks-container" :class="{ 'tossing': isTossing }">
        <!-- 左筊杯 -->
        <div class="block block-left" :class="leftBlockClass"></div>
        <!-- 右筊杯 -->
        <div class="block block-right" :class="rightBlockClass"></div>
      </div>

      <!-- 文字狀態 -->
      <div class="status-text pixel-font">
        <span v-if="isTossing">
          {{ mode === 'fortune' ? '擲筊確認中...' : '擲筊中...' }}
        </span>
        <template v-else>
          <span class="result-text" :class="resultType">{{ resultText }}</span>
          <span v-if="mode === 'fortune' && resultType === 'saint'" class="sub-text">
            (連續 {{ consecutiveCount }}/3)
          </span>
          <span v-if="mode === 'fortune' && resultType !== 'saint'" class="sub-text">
            需連續三次聖筊
          </span>
        </template>
      </div>

      <!-- 操作按鈕 (結果出來後顯示) -->
      <div v-if="!isTossing" class="action-buttons">
        <!-- 一般模式 -->
        <template v-if="mode === 'normal'">
          <button class="pixel-btn retry-btn" @click="startToss">再一次</button>
          <button class="pixel-btn close-btn" @click="handleClose">關閉</button>
        </template>

        <!-- 求籤模式 -->
        <template v-else>
          <!-- 失敗 (非聖筊) -->
          <button v-if="resultType !== 'saint'" class="pixel-btn close-btn" @click="handleRetryFortune">重新求籤</button>
          
          <!-- 成功 (聖筊) -->
          <template v-else>
            <button v-if="consecutiveCount < 2" class="pixel-btn retry-btn" @click="startToss">繼續擲筊</button>
            <button v-else class="pixel-btn retry-btn" @click="$emit('finish-fortune')">查看籤詩</button>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

const props = defineProps({
  mode: {
    type: String,
    default: 'normal' // 'normal' | 'fortune'
  },
  consecutiveCount: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['close', 'result', 'retry-fortune', 'finish-fortune']);

const isTossing = ref(true);
const resultLeft = ref('round');
const resultRight = ref('round');
const resultType = ref('');
const resultText = ref('');

const leftBlockClass = computed(() => {
  if (isTossing.value) return 'anim-spin';
  return resultLeft.value === 'round' ? 'style-round' : 'style-flat';
});

const rightBlockClass = computed(() => {
  if (isTossing.value) return 'anim-spin-reverse';
  return resultRight.value === 'round' ? 'style-round' : 'style-flat';
});

function startToss() {
  isTossing.value = true;
  resultType.value = '';
  resultText.value = '';
  
  setTimeout(() => {
    calculateResult();
    isTossing.value = false;
  }, 1500);
}

function calculateResult() {
  const isLeftFlat = Math.random() > 0.5;
  const isRightFlat = Math.random() > 0.5;

  resultLeft.value = isLeftFlat ? 'flat' : 'round';
  resultRight.value = isRightFlat ? 'flat' : 'round';

  if (isLeftFlat !== isRightFlat) {
    resultType.value = 'saint';
    resultText.value = '聖筊';
  } else if (isLeftFlat && isRightFlat) {
    resultType.value = 'laugh';
    resultText.value = '笑筊';
  } else {
    resultType.value = 'yin';
    resultText.value = '陰筊';
  }

  emit('result', resultType.value);
}

function handleClose() {
  emit('close');
}

function handleRetryFortune() {
  emit('retry-fortune');
}

onMounted(() => {
  startToss();
});
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

.jiaobei-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.blocks-container {
  position: relative;
  width: 80px;
  height: 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.block {
  width: 24px;
  height: 24px;
  position: relative;
  transition: all 0.3s;
}

/* --- 像素圖樣式 (保持不變) --- */
.style-round::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #d4522e;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow:
    -6px -4px 0 #d4522e, -4px -4px 0 #d4522e, -2px -4px 0 #d4522e,
    -8px -2px 0 #d4522e, -6px -2px 0 #ff7f50, -4px -2px 0 #d4522e, -2px -2px 0 #d4522e, 0px -2px 0 #d4522e, 2px -2px 0 #d4522e,
    -8px 0px 0 #d4522e, -6px 0px 0 #d4522e, -4px 0px 0 #d4522e, -2px 0px 0 #d4522e, 0px 0px 0 #d4522e, 2px 0px 0 #d4522e,
    -6px 2px 0 #d4522e, -4px 2px 0 #d4522e, -2px 2px 0 #d4522e, 0px 2px 0 #d4522e,
    -4px 4px 0 #a03010;
}

.style-flat::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #f0d09c;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow:
    -6px -4px 0 #f0d09c, -4px -4px 0 #f0d09c, -2px -4px 0 #f0d09c,
    -8px -2px 0 #f0d09c, -6px -2px 0 #f0d09c, -4px -2px 0 #e0b070, -2px -2px 0 #f0d09c, 0px -2px 0 #f0d09c, 2px -2px 0 #f0d09c,
    -8px 0px 0 #f0d09c, -6px 0px 0 #f0d09c, -4px 0px 0 #f0d09c, -2px 0px 0 #f0d09c, 0px 0px 0 #f0d09c, 2px 0px 0 #f0d09c,
    -6px 2px 0 #f0d09c, -4px 2px 0 #f0d09c, -2px 2px 0 #f0d09c, 0px 2px 0 #f0d09c,
    -4px 4px 0 #c49454;
}

.anim-spin::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #d4522e;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  animation: spin 0.3s infinite linear;
  box-shadow: 
    -4px -4px 0 #d4522e, 0px -4px 0 #f0d09c, 4px -4px 0 #d4522e,
    -4px 0px 0 #f0d09c, 0px 0px 0 #d4522e, 4px 0px 0 #f0d09c,
    -4px 4px 0 #d4522e, 0px 4px 0 #f0d09c, 4px 4px 0 #d4522e;
}

.anim-spin-reverse::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #d4522e;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  animation: spin-reverse 0.3s infinite linear;
  box-shadow: 
    -4px -4px 0 #f0d09c, 0px -4px 0 #d4522e, 4px -4px 0 #f0d09c,
    -4px 0px 0 #d4522e, 0px 0px 0 #f0d09c, 4px 0px 0 #d4522e,
    -4px 4px 0 #f0d09c, 0px 4px 0 #d4522e, 4px 4px 0 #f0d09c;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1.2) rotate(360deg); }
}

@keyframes spin-reverse {
  0% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); }
  100% { transform: translate(-50%, -50%) scale(1.2) rotate(-360deg); }
}

.tossing .block {
  animation: bounce 0.5s infinite alternate;
}

@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

/* --- 文字與按鈕樣式 --- */

.pixel-font {
  font-family: 'DotGothic16', monospace;
}

.status-text {
  font-size: 12px; /* 縮小字體 */
  font-weight: bold;
  color: #fff;
  text-align: center;
  min-height: 20px;
  text-shadow: 1px 1px 0 #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.result-text {
  font-size: 16px; /* 縮小結果字體 */
  letter-spacing: 1px;
}

.result-text.saint { color: #ffcc00; }
.result-text.laugh { color: #88ff88; }
.result-text.yin { color: #ff8888; }

.sub-text {
  font-size: 10px;
  color: #ccc;
  margin-top: 2px;
  font-weight: normal;
}

.action-buttons {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.pixel-btn {
  font-family: 'DotGothic16', monospace;
  font-size: 10px; /* 縮小按鈕字體 */
  padding: 4px 8px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: all 0.1s;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.pixel-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.1);
}

.pixel-btn:active {
  transform: translateY(1px);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

.retry-btn {
  border-color: #ffcc00;
  color: #ffcc00;
}

.close-btn {
  border-color: #aaa;
  color: #aaa;
}
</style>