# Story 4.6: Page Challenge - Structure et puzzle

Status: ready-for-dev

## Story

As a visiteur,
I want relever un défi optionnel avant d'accéder au contact,
so that l'accès au développeur est une récompense méritée (mais pas bloquante).

## Acceptance Criteria

1. **Given** le visiteur accède à `/challenge` (après avoir débloqué le contact) **When** la page se charge **Then** une introduction narrative "Une dernière épreuve..." s'affiche
2. **And** un puzzle logique/code simple est présenté (réordonner, compléter, décoder)
3. **And** la difficulté est calibrée : 1-3 minutes pour résoudre
4. **And** le thème est lié au développement/code
5. **And** un système d'indices est disponible (bouton "Besoin d'aide ?")
6. **And** 3 niveaux d'indices progressifs sont proposés
7. **And** après 3 indices, une option "Passer" apparaît
8. **And** le challenge est TOUJOURS skippable (bouton discret "Passer directement au contact")
9. **And** une validation avec feedback clair indique succès/échec
10. **And** une animation de succès célèbre la réussite
11. **And** `challengeCompleted` est mis à `true` dans le store si réussi

## Tasks / Subtasks

- [ ] **Task 1: Créer la page challenge** (AC: #1, #8)
  - [ ] Créer `frontend/app/pages/challenge.vue`
  - [ ] Vérifier que le contact est débloqué
  - [ ] Introduction narrative avec Le Bug
  - [ ] Bouton discret "Passer" visible en permanence

- [ ] **Task 2: Concevoir le puzzle** (AC: #2, #3, #4)
  - [ ] Puzzle type "réordonner les lignes de code"
  - [ ] Code simple : une fonction qui affiche un message
  - [ ] 5-7 lignes à réordonner dans le bon ordre
  - [ ] Thème : débloquer l'accès au développeur

- [ ] **Task 3: Créer le composant CodePuzzle** (AC: #2, #9)
  - [ ] Créer `frontend/app/components/feature/CodePuzzle.vue`
  - [ ] Drag & drop des lignes de code
  - [ ] Support tactile (mobile)
  - [ ] Validation visuelle (vert/rouge)

- [ ] **Task 4: Implémenter le système d'indices** (AC: #5, #6, #7)
  - [ ] Bouton "Besoin d'aide ?"
  - [ ] 3 indices progressifs (révèlent de plus en plus)
  - [ ] Après 3 indices : bouton "Passer" plus visible
  - [ ] Indices traduits FR/EN

- [ ] **Task 5: Implémenter l'animation de succès** (AC: #10, #11)
  - [ ] Confettis ou effet visuel de célébration
  - [ ] Message du narrateur
  - [ ] Mettre `challengeCompleted = true` dans le store
  - [ ] Navigation vers la révélation

- [ ] **Task 6: Gérer le skip** (AC: #8)
  - [ ] Skip visible en permanence (discret mais accessible)
  - [ ] Skip après indices (plus visible)
  - [ ] Dans les deux cas : navigation vers révélation

- [ ] **Task 7: Accessibilité**
  - [ ] Navigation clavier pour le drag & drop
  - [ ] aria-labels descriptifs
  - [ ] Instructions claires

- [ ] **Task 8: Tests et validation**
  - [ ] Tester le puzzle complet
  - [ ] Tester les 3 indices
  - [ ] Vérifier le skip
  - [ ] Tester sur mobile (drag & drop tactile)
  - [ ] Valider l'animation de succès

## Dev Notes

### Puzzle : Réordonner le code

Le puzzle consiste à remettre dans l'ordre les lignes d'une fonction JavaScript qui "débloque" l'accès au développeur.

```javascript
// Solution correcte
function unlockDeveloper() {
  const secret = "SKYCEL";
  const key = decode(secret);
  if (key === "ACCESS_GRANTED") {
    return showDeveloper();
  }
  return "Keep exploring...";
}
```

Les lignes sont mélangées et le visiteur doit les réordonner.

### Page challenge.vue

```vue
<!-- frontend/app/pages/challenge.vue -->
<script setup lang="ts">
const { t } = useI18n()
const router = useRouter()
const progressionStore = useProgressionStore()
const narrator = useNarrator()

// Vérifier que le contact est débloqué
if (!progressionStore.contactUnlocked) {
  navigateTo('/')
}

// États
const showIntro = ref(true)
const puzzleCompleted = ref(false)
const hintsUsed = ref(0)

// Introduction narrative
onMounted(async () => {
  await narrator.showMessage('challenge_intro')
})

function startPuzzle() {
  showIntro.value = false
}

function handlePuzzleSolved() {
  puzzleCompleted.value = true
  progressionStore.setChallengeCompleted(true)

  // Attendre l'animation puis naviguer
  setTimeout(() => {
    router.push('/revelation')
  }, 3000)
}

function skipChallenge() {
  // Skip ne marque pas comme complété
  router.push('/revelation')
}

function useHint() {
  hintsUsed.value++
}
</script>

<template>
  <div class="challenge-page min-h-screen bg-sky-dark relative">
    <!-- Bouton skip (toujours visible) -->
    <button
      v-if="!puzzleCompleted"
      type="button"
      class="absolute top-4 right-4 text-sky-text-muted hover:text-sky-text text-sm font-ui underline z-10"
      :class="{ 'text-sky-accent': hintsUsed >= 3 }"
      @click="skipChallenge"
    >
      {{ t('challenge.skip') }}
    </button>

    <!-- Introduction -->
    <Transition name="fade" mode="out-in">
      <div
        v-if="showIntro"
        class="flex flex-col items-center justify-center min-h-screen p-8"
      >
        <div class="max-w-lg text-center">
          <img
            src="/images/bug/bug-stage-4.svg"
            alt="Le Bug"
            class="w-24 h-24 mx-auto mb-6"
          />

          <h1 class="text-3xl font-ui font-bold text-sky-text mb-4">
            {{ t('challenge.title') }}
          </h1>

          <p class="font-narrative text-xl text-sky-text-muted mb-8">
            {{ t('challenge.intro') }}
          </p>

          <button
            type="button"
            class="px-8 py-3 bg-sky-accent text-white font-ui font-semibold rounded-lg hover:bg-sky-accent/90 transition-colors"
            @click="startPuzzle"
          >
            {{ t('challenge.accept') }}
          </button>
        </div>
      </div>

      <!-- Puzzle -->
      <div
        v-else-if="!puzzleCompleted"
        class="flex flex-col items-center justify-center min-h-screen p-8"
      >
        <div class="max-w-2xl w-full">
          <h2 class="text-xl font-ui font-bold text-sky-text mb-2 text-center">
            {{ t('challenge.puzzleTitle') }}
          </h2>

          <p class="text-sky-text-muted text-center mb-8">
            {{ t('challenge.puzzleInstruction') }}
          </p>

          <CodePuzzle
            @solved="handlePuzzleSolved"
            @hint-used="useHint"
            :hints-used="hintsUsed"
          />
        </div>
      </div>

      <!-- Succès -->
      <div
        v-else
        class="flex flex-col items-center justify-center min-h-screen p-8"
      >
        <ChallengeSuccess />
      </div>
    </Transition>
  </div>
</template>
```

### Composant CodePuzzle

```vue
<!-- frontend/app/components/feature/CodePuzzle.vue -->
<script setup lang="ts">
import { useDraggable } from '@vueuse/core'

const props = defineProps<{
  hintsUsed: number
}>()

const emit = defineEmits<{
  solved: []
  hintUsed: []
}>()

const { t } = useI18n()

// Lignes de code (solution)
const solution = [
  'function unlockDeveloper() {',
  '  const secret = "SKYCEL";',
  '  const key = decode(secret);',
  '  if (key === "ACCESS_GRANTED") {',
  '    return showDeveloper();',
  '  }',
  '  return "Keep exploring...";',
  '}',
]

// Lignes mélangées au départ
const shuffledLines = ref<string[]>([])
const isValidating = ref(false)
const validationResult = ref<boolean | null>(null)

// Mélanger au montage
onMounted(() => {
  shuffledLines.value = [...solution].sort(() => Math.random() - 0.5)
})

// Indices progressifs
const hints = [
  () => t('challenge.hint1'), // "La fonction commence par 'function'"
  () => t('challenge.hint2'), // "La variable 'secret' est définie en premier"
  () => t('challenge.hint3'), // "Le return final est 'Keep exploring...'"
]

const currentHint = computed(() => {
  if (props.hintsUsed === 0) return null
  return hints[Math.min(props.hintsUsed - 1, hints.length - 1)]()
})

// Drag & Drop
function onDragStart(e: DragEvent, index: number) {
  e.dataTransfer?.setData('text/plain', index.toString())
}

function onDrop(e: DragEvent, targetIndex: number) {
  e.preventDefault()
  const sourceIndex = parseInt(e.dataTransfer?.getData('text/plain') || '-1')
  if (sourceIndex === -1) return

  // Swap les lignes
  const newLines = [...shuffledLines.value]
  const temp = newLines[sourceIndex]
  newLines[sourceIndex] = newLines[targetIndex]
  newLines[targetIndex] = temp
  shuffledLines.value = newLines
}

function onDragOver(e: DragEvent) {
  e.preventDefault()
}

// Validation
function validateSolution() {
  isValidating.value = true
  validationResult.value = null

  setTimeout(() => {
    const isCorrect = shuffledLines.value.every((line, i) => line === solution[i])
    validationResult.value = isCorrect

    if (isCorrect) {
      emit('solved')
    } else {
      // Reset après 2s
      setTimeout(() => {
        validationResult.value = null
        isValidating.value = false
      }, 2000)
    }
  }, 500)
}

function requestHint() {
  if (props.hintsUsed < 3) {
    emit('hintUsed')
  }
}

// Navigation clavier
function moveLineUp(index: number) {
  if (index === 0) return
  const newLines = [...shuffledLines.value]
  const temp = newLines[index - 1]
  newLines[index - 1] = newLines[index]
  newLines[index] = temp
  shuffledLines.value = newLines
}

function moveLineDown(index: number) {
  if (index === shuffledLines.value.length - 1) return
  const newLines = [...shuffledLines.value]
  const temp = newLines[index + 1]
  newLines[index + 1] = newLines[index]
  newLines[index] = temp
  shuffledLines.value = newLines
}
</script>

<template>
  <div class="code-puzzle">
    <!-- Zone de code -->
    <div class="bg-sky-dark rounded-lg border border-sky-dark-100 p-4 font-mono text-sm mb-6">
      <div
        v-for="(line, index) in shuffledLines"
        :key="index"
        class="code-line flex items-center gap-2 p-2 rounded cursor-grab transition-all"
        :class="[
          validationResult === true && 'bg-green-500/20 border-green-500/50',
          validationResult === false && line !== solution[index] && 'bg-red-500/20 border-red-500/50',
        ]"
        draggable="true"
        @dragstart="onDragStart($event, index)"
        @drop="onDrop($event, index)"
        @dragover="onDragOver"
      >
        <!-- Numéro de ligne -->
        <span class="text-sky-text-muted select-none w-6 text-right">{{ index + 1 }}</span>

        <!-- Poignée de drag -->
        <span class="text-sky-text-muted cursor-grab">⋮⋮</span>

        <!-- Code -->
        <code class="flex-1 text-sky-accent">{{ line }}</code>

        <!-- Boutons clavier (accessibilité) -->
        <div class="flex gap-1">
          <button
            type="button"
            class="p-1 text-sky-text-muted hover:text-sky-text"
            :disabled="index === 0"
            @click="moveLineUp(index)"
            :aria-label="t('challenge.moveUp')"
          >
            ↑
          </button>
          <button
            type="button"
            class="p-1 text-sky-text-muted hover:text-sky-text"
            :disabled="index === shuffledLines.length - 1"
            @click="moveLineDown(index)"
            :aria-label="t('challenge.moveDown')"
          >
            ↓
          </button>
        </div>
      </div>
    </div>

    <!-- Indice actuel -->
    <div
      v-if="currentHint"
      class="bg-sky-accent/10 border border-sky-accent/30 rounded-lg p-4 mb-6"
    >
      <p class="text-sm text-sky-accent">
        <span class="font-semibold">{{ t('challenge.hintLabel') }}:</span>
        {{ currentHint }}
      </p>
    </div>

    <!-- Actions -->
    <div class="flex flex-wrap gap-4 justify-center">
      <!-- Bouton valider -->
      <button
        type="button"
        class="px-6 py-3 bg-sky-accent text-white font-ui font-semibold rounded-lg hover:bg-sky-accent/90 transition-colors disabled:opacity-50"
        :disabled="isValidating"
        @click="validateSolution"
      >
        {{ isValidating ? t('challenge.validating') : t('challenge.validate') }}
      </button>

      <!-- Bouton indice -->
      <button
        v-if="hintsUsed < 3"
        type="button"
        class="px-6 py-3 border border-sky-dark-100 text-sky-text font-ui rounded-lg hover:bg-sky-dark-50 transition-colors"
        @click="requestHint"
      >
        {{ t('challenge.needHint') }} ({{ hintsUsed }}/3)
      </button>
    </div>

    <!-- Message d'erreur -->
    <Transition name="fade">
      <p
        v-if="validationResult === false"
        class="text-red-400 text-center mt-4 font-ui"
      >
        {{ t('challenge.wrongOrder') }}
      </p>
    </Transition>
  </div>
</template>

<style scoped>
.code-line {
  border: 1px solid transparent;
}

.code-line:hover {
  background-color: rgba(250, 120, 79, 0.1);
}

.code-line:active {
  cursor: grabbing;
}
</style>
```

### Composant ChallengeSuccess

```vue
<!-- frontend/app/components/feature/ChallengeSuccess.vue -->
<script setup lang="ts">
import confetti from 'canvas-confetti'

const { t } = useI18n()

onMounted(() => {
  // Lancer les confettis
  confetti({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6 },
    colors: ['#fa784f', '#3b82f6', '#10b981', '#f59e0b'],
  })
})
</script>

<template>
  <div class="challenge-success text-center">
    <div class="text-6xl mb-4 animate-bounce">🎉</div>

    <h2 class="text-3xl font-ui font-bold text-sky-accent mb-4">
      {{ t('challenge.success') }}
    </h2>

    <p class="font-narrative text-xl text-sky-text mb-8">
      {{ t('challenge.successMessage') }}
    </p>

    <p class="text-sky-text-muted">
      {{ t('challenge.redirecting') }}
    </p>
  </div>
</template>
```

### Clés i18n

**fr.json :**
```json
{
  "challenge": {
    "title": "Une dernière épreuve...",
    "intro": "Avant de rencontrer le développeur, prouve que tu maîtrises les bases du code. Rien de bien méchant, promis.",
    "accept": "Relever le défi",
    "skip": "Passer directement au contact",
    "puzzleTitle": "Remets le code dans l'ordre",
    "puzzleInstruction": "Glisse les lignes pour reconstituer la fonction qui débloque l'accès au développeur.",
    "hint1": "La fonction commence par 'function unlockDeveloper() {'",
    "hint2": "La variable 'secret' est définie juste après l'accolade ouvrante",
    "hint3": "La dernière ligne avant l'accolade fermante est 'return \"Keep exploring...\";'",
    "hintLabel": "Indice",
    "needHint": "Besoin d'aide ?",
    "validate": "Vérifier",
    "validating": "Vérification...",
    "wrongOrder": "Ce n'est pas le bon ordre... Essaie encore !",
    "moveUp": "Monter",
    "moveDown": "Descendre",
    "success": "Bravo !",
    "successMessage": "Tu as prouvé ta valeur. Le chemin vers le développeur est maintenant ouvert...",
    "redirecting": "Redirection en cours..."
  }
}
```

**en.json :**
```json
{
  "challenge": {
    "title": "One last challenge...",
    "intro": "Before meeting the developer, prove you understand the basics of code. Nothing too hard, I promise.",
    "accept": "Accept the challenge",
    "skip": "Skip to contact",
    "puzzleTitle": "Put the code in order",
    "puzzleInstruction": "Drag the lines to reconstruct the function that unlocks access to the developer.",
    "hint1": "The function starts with 'function unlockDeveloper() {'",
    "hint2": "The 'secret' variable is defined right after the opening brace",
    "hint3": "The last line before the closing brace is 'return \"Keep exploring...\";'",
    "hintLabel": "Hint",
    "needHint": "Need help?",
    "validate": "Check",
    "validating": "Checking...",
    "wrongOrder": "That's not the right order... Try again!",
    "moveUp": "Move up",
    "moveDown": "Move down",
    "success": "Well done!",
    "successMessage": "You've proven your worth. The path to the developer is now open...",
    "redirecting": "Redirecting..."
  }
}
```

### Dépendances

**Cette story nécessite :**
- Story 3.5 : Store de progression (contactUnlocked, challengeCompleted)
- Story 3.3 : useNarrator

**Cette story prépare pour :**
- Story 4.7 : Révélation (destination après le challenge)

### Project Structure Notes

**Fichiers à créer :**
```
frontend/app/
├── pages/
│   └── challenge.vue                    # CRÉER
└── components/feature/
    ├── CodePuzzle.vue                   # CRÉER
    └── ChallengeSuccess.vue             # CRÉER
```

**Fichiers à modifier :**
```
frontend/app/stores/progression.ts       # AJOUTER challengeCompleted
frontend/package.json                    # AJOUTER canvas-confetti
frontend/i18n/fr.json                    # AJOUTER challenge.*
frontend/i18n/en.json                    # AJOUTER challenge.*
```

### References

- [Source: docs/planning-artifacts/epics.md#Story-4.6]
- [Source: docs/planning-artifacts/ux-design-specification.md#Challenge]
- [Source: docs/brainstorming-gamification-2026-01-26.md#Challenge]

### Technical Requirements

| Requirement | Value | Source |
|-------------|-------|--------|
| Durée puzzle | 1-3 minutes | Epics |
| Indices | 3 niveaux progressifs | Epics |
| Skip | Toujours disponible | Epics |
| Thème | Code/développement | Epics |

## Dev Agent Record

### Agent Model Used

{{agent_model_name_version}}

### Debug Log References

### Completion Notes List

### Change Log
| Date | Change | Author |
|------|--------|--------|
| 2026-02-04 | Story créée avec contexte complet | SM Agent |

### File List