JackInTheBox.vue

<script setup lang="ts">
import {ref, computed} from 'vue'

const props = defineProps<{
  tapCount: number
  message: string
}>()

const currentTaps = ref(0)
const showMessage = computed(() => currentTaps.value >= props.tapCount)

const handleTap = () => currentTaps.value++
const reset = () => currentTaps.value = 0
</script>

<template>
  <div class="jack-in-the-box">
    <div v-if="!showMessage" class="box" @click="handleTap">
      <p>📦 Tap me! ({{ currentTaps }})</p>
    </div>

    <div v-else class="message-container">
      <h2>{{ message }}</h2>
      <button @click="reset">Reset</button>
    </div>
  </div>
</template>

<style scoped>
.jack-in-the-box {
  text-align: center;
  padding: 20px;
}

.box {
  width: 200px;
  height: 200px;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 auto;
  background-color: #f0f0f0;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid #333;
  background-color: #fff;
  border-radius: 4px;
}

</style>