{"id":1698,"date":"2025-06-25T11:39:19","date_gmt":"2025-06-25T09:39:19","guid":{"rendered":"https:\/\/www.axa.dz\/?page_id=1698"},"modified":"2026-06-22T17:23:52","modified_gmt":"2026-06-22T16:23:52","slug":"rouefia","status":"publish","type":"page","link":"https:\/\/www.axa.dz\/rouefia\/","title":{"rendered":""},"content":{"rendered":"<div class=\"vce-row-container\" data-vce-boxed-width=\"true\"><div class=\"vce-row vce-row--col-gap-30 vce-row-equal-height vce-row-content--top\" id=\"el-cf40cc3d\" data-vce-do-apply=\"all el-cf40cc3d\"><div class=\"vce-row-content\" data-vce-element-content=\"true\"><div class=\"vce-col vce-col--md-auto vce-col--xs-1 vce-col--xs-last vce-col--xs-first vce-col--sm-last vce-col--sm-first vce-col--md-last vce-col--lg-last vce-col--xl-last vce-col--md-first vce-col--lg-first vce-col--xl-first\" id=\"el-73d5676f\"><div class=\"vce-col-inner\" data-vce-do-apply=\"border margin background  el-73d5676f\"><div class=\"vce-col-content\" data-vce-element-content=\"true\" data-vce-do-apply=\"padding el-73d5676f\"><div class=\"vce-raw-html\"><div class=\"vce-raw-html-wrapper\" id=\"el-102ed6aa\" data-vce-do-apply=\"all el-102ed6aa\"><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.6.0\/dist\/confetti.browser.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.12.2\/dist\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/zarocknz\/javascript-winwheel@2.7.0\/Winwheel.min.js\"><\/script>\n\n<style>\n  :root {\n    --axa-blue: #00008F;\n    --axa-red: #FF1721;\n    --axa-dark-grey: #7F7F7F;\n  }\n\n  .axa-wheel-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin: 40px auto;\n    max-width: 620px;\n    position: relative;\n    font-family: sans-serif;\n  }\n\n  \/* Indicateur fl\u00e8che AXA Red *\/\n  .axa-wheel-arrow {\n    position: absolute;\n    top: -15px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: 24px solid transparent;\n    border-right: 24px solid transparent;\n    border-top: 36px solid var(--axa-red);\n    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));\n    z-index: 10;\n  }\n\n  .canvas-wrapper {\n    position: relative;\n    border-radius: 50%;\n    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);\n    background: #fff;\n    padding: 6px;\n    border: 6px solid var(--axa-blue);\n  }\n\n  canvas { \n    display: block;\n    width: 100%; \n    height: auto; \n  }\n\n  .axa-btn-group {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    align-items: center;\n    margin-top: 25px;\n  }\n\n  .axa-spin-btn, .axa-replay-btn {\n    font-family: sans-serif;\n    font-size: 20px;\n    font-weight: 900;\n    color: #fff;\n    border: none;\n    padding: 16px 36px;\n    margin: 8px;\n    width: 100%;\n    max-width: 300px;\n    border-radius: 30px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.15);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  .axa-spin-btn {\n    background: var(--axa-blue);\n  }\n\n  .axa-spin-btn:hover:not(:disabled) {\n    background: #0000bd;\n    transform: translateY(-2px);\n    box-shadow: 0 6px 15px rgba(0,0,0,0.2);\n  }\n\n  .axa-spin-btn:disabled {\n    background: var(--axa-dark-grey);\n    cursor: not-allowed;\n    opacity: 0.6;\n    transform: none;\n    box-shadow: none;\n  }\n\n  .axa-replay-btn {\n    background: #333333;\n  }\n\n  .axa-replay-btn:hover {\n    background: #444444;\n    transform: translateY(-2px);\n  }\n\n  #result {\n    font-size: 46px; \n    font-weight: 900;\n    color: var(--axa-blue);\n    text-align: center;\n    margin-top: 30px;\n    min-height: 50px;\n    text-transform: uppercase;\n    line-height: 1.2;\n  }\n<\/style>\n\n<div class=\"axa-wheel-container\">\n  <div class=\"axa-wheel-arrow\"><\/div>\n  <div class=\"canvas-wrapper\">\n    <canvas id=\"wheelcanvas\" width=\"650\" height=\"650\"><\/canvas>\n  <\/div>\n\n  <div class=\"axa-btn-group\">\n    <button id=\"spinBtn\" class=\"axa-spin-btn\">\ud83c\udfaf Tourner la roue<\/button>\n    <button id=\"replayBtn\" class=\"axa-replay-btn\" style=\"display:none;\">\ud83d\udd04 Rejouer<\/button>\n  <\/div>\n\n  <p id=\"result\"><\/p>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  const spinBtn = document.getElementById(\"spinBtn\");\n  const replayBtn = document.getElementById(\"replayBtn\");\n  const resultText = document.getElementById(\"result\");\n\n  let lastAngle = 0;\n  let ticking = null;\n  \n  const AudioCtx = window.AudioContext || window.webkitAudioContext;\n  let audioCtx = null;\n\n  function initAudio() {\n    if (!audioCtx) audioCtx = new AudioCtx();\n  }\n\n  function playTickSound() {\n    if (!audioCtx) return;\n    let osc = audioCtx.createOscillator();\n    let gain = audioCtx.createGain();\n    osc.connect(gain);\n    gain.connect(audioCtx.destination);\n    osc.type = 'sine';\n    osc.frequency.setValueAtTime(600, audioCtx.currentTime);\n    osc.frequency.exponentialRampToValueAtTime(150, audioCtx.currentTime + 0.04);\n    gain.gain.setValueAtTime(0.15, audioCtx.currentTime);\n    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.04);\n    osc.start();\n    osc.stop(audioCtx.currentTime + 0.04);\n  }\n\n  function playWinSound() {\n    if (!audioCtx) return;\n    const notes = [261.63, 329.63, 392.00, 523.25, 659.25, 783.99, 1046.50];\n    notes.forEach((freq, index) => {\n      let osc = audioCtx.createOscillator();\n      let gain = audioCtx.createGain();\n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      osc.type = 'triangle';\n      osc.frequency.setValueAtTime(freq, audioCtx.currentTime + index * 0.08);\n      gain.gain.setValueAtTime(0.2, audioCtx.currentTime + index * 0.08);\n      gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + index * 0.08 + 0.3);\n      osc.start(audioCtx.currentTime + index * 0.08);\n      osc.stop(audioCtx.currentTime + index * 0.08 + 0.3);\n    });\n  }\n\n  const stocksLots = [\n    { text: \"Tote Bag\", quantite: 6 },\n    { text: \"Prot\u00e9ge-passeport\", quantite: 6 },\n    { text: \"Casquette\", quantite: 6 },\n    { text: \"T-Shirt\", quantite: 6 },\n    { text: \"Repose-t\u00eate\", quantite: 6 },\n    { text: \"Carnet + Stylo\", quantite: 6 },\n    { text: \"Rien \ud83d\ude22\", quantite: 12 }\n  ];\n\n  function playLoseSound() {\n    if (!audioCtx) return;\n    let osc = audioCtx.createOscillator();\n    let gain = audioCtx.createGain();\n    osc.connect(gain);\n    gain.connect(audioCtx.destination);\n    osc.type = 'sawtooth';\n    osc.frequency.setValueAtTime(220, audioCtx.currentTime);\n    osc.frequency.linearRampToValueAtTime(80, audioCtx.currentTime + 0.5);\n    gain.gain.setValueAtTime(0.2, audioCtx.currentTime);\n    gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);\n    osc.start();\n    osc.stop(audioCtx.currentTime + 0.5);\n  }\n\n  function startTick() {\n    clearInterval(ticking);\n    ticking = setInterval(() => {\n      const diff = Math.abs(wheel.rotationAngle - lastAngle);\n      if (diff > 7) {\n        playTickSound();\n        lastAngle = wheel.rotationAngle;\n      }\n    }, 30);\n  }\n\n  function lancerEclatsAxa() {\n    const duree = 2 * 1000;\n    const fin = Date.now() + duree;\n    (function frame() {\n      confetti({ particleCount: 6, angle: 60, spread: 55, origin: { x: 0, y: 0.8 }, colors: ['#00008F', '#E1F0FF', '#FFFFFF'] });\n      confetti({ particleCount: 6, angle: 120, spread: 55, origin: { x: 1, y: 0.8 }, colors: ['#00008F', '#E1F0FF', '#FFFFFF'] });\n      if (Date.now() < fin) requestAnimationFrame(frame);\n    }());\n  }\n\n  const wheel = new Winwheel({\n    canvasId: \"wheelcanvas\",\n    numSegments: 7,\n    outerRadius: 300,                 \/\/ L\u00e9g\u00e8rement r\u00e9duit pour maximiser l'espace interne des textes g\u00e9ants\n    textAlignment: 'center',\n    textMargin: 45,\n    textFontFamily: 'sans-serif',\n    textFontWeight: '900',\n    textFontSize: 24,                 \/\/ TEXTE AGRANDI \u00c0 24PX \ud83d\ude80\n    \n    segments: [\n      { text: \"Tote Bag\",          fillStyle: \"#00008F\", textFillStyle: \"#FFFFFF\" }, \n      { text: \"Prot\u00e9ge-\\npasseport\", fillStyle: \"#FFFFFF\", textFillStyle: \"#00008F\" }, \n      { text: \"Casquette\",         fillStyle: \"#E1F0FF\", textFillStyle: \"#00008F\" }, \n      { text: \"T-Shirt\",           fillStyle: \"#00008F\", textFillStyle: \"#FFFFFF\" }, \n      { text: \"Repose-t\u00eate\",       fillStyle: \"#FFFFFF\", textFillStyle: \"#00008F\" }, \n      { text: \"Rien \ud83d\ude22\",           fillStyle: \"#E1F0FF\", textFillStyle: \"#00008F\" }, \n      { text: \"Carnet +\\nStylo\",    fillStyle: \"#FFFFFF\", textFillStyle: \"#00008F\" }  \n    ],\n\n    animation: {\n      type: \"spinToStop\",\n      duration: 5,\n      spins: 6,\n      callbackFinished: function(seg) {\n        clearInterval(ticking);\n        const texteNettoye = seg.text.replace('\\n', ' ');\n        const segmentGagnant = stocksLots.find(s => s.text.replace('+\\n', '+ ').replace('-\\n', '-') === texteNettoye);\n\n        if(seg.text.includes(\"Rien\")) {\n          resultText.innerHTML = \"D\u00e9sol\u00e9 !<br><span style='color:#7F7F7F; font-size: 36px;'>Retentez votre chance... \ud83c\udf40<\/span>\";\n          playLoseSound(); \n        } else {\n          resultText.innerHTML = \"\ud83c\udf89 GAGN\u00c9 :<br><span style='color:#FF1721;'>\" + texteNettoye + \"<\/span> !\";\n          playWinSound();  \n          lancerEclatsAxa(); \n\n          if(segmentGagnant && segmentGagnant.quantite > 0) {\n             segmentGagnant.quantite--;\n          }\n        }\n\n        replayBtn.style.display = \"inline-block\";\n        spinBtn.disabled = false;\n      }\n    }\n  });\n\n  wheel.draw();\n\n  function getWeightedRandomIndex() {\n    let totalStock = stocksLots.reduce((acc, curr) => acc + curr.quantite, 0);\n    if (totalStock === 0) return stocksLots.findIndex(s => s.text.includes(\"Rien\"));\n\n    let randomNum = Math.random() * totalStock;\n    let compteur = 0;\n\n    const ordreRoue = [\"Tote Bag\", \"Prot\u00e9ge-passeport\", \"Casquette\", \"T-Shirt\", \"Repose-t\u00eate\", \"Rien \ud83d\ude22\", \"Carnet + Stylo\"];\n\n    for (let i = 0; i < ordreRoue.length; i++) {\n      const item = stocksLots.find(s => s.text === ordreRoue[i]);\n      compteur += item ? item.quantite : 0;\n      if (randomNum <= compteur) return i;\n    }\n    return ordreRoue.length - 1;\n  }\n\n  spinBtn.onclick = () => {\n    initAudio(); \n    spinBtn.disabled = true;\n    resultText.innerText = \"\";\n    replayBtn.style.display = \"none\";\n    startTick();\n\n    const idx = getWeightedRandomIndex();\n    const segDeg = 360 \/ 7;\n\n    wheel.stopAngle = 360 - (idx * segDeg + (Math.random() * (segDeg - 6) + 3));\n    wheel.rotationAngle = 0;\n    wheel.startAnimation();\n  };\n\n  replayBtn.onclick = () => {\n    wheel.stopAnimation(false);\n    wheel.rotationAngle = 0;\n    wheel.draw();\n    replayBtn.style.display = \"none\";\n    spinBtn.disabled = false;\n    resultText.innerText = \"\";\n    clearInterval(ticking);\n  };\n});\n<\/script><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfaf Tourner la roue \ud83d\udd04 Rejouer<\/p>\n","protected":false},"author":1025,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1698","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.axa.dz\/api\/wp\/v2\/pages\/1698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.axa.dz\/api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.axa.dz\/api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.axa.dz\/api\/wp\/v2\/users\/1025"}],"replies":[{"embeddable":true,"href":"https:\/\/www.axa.dz\/api\/wp\/v2\/comments?post=1698"}],"version-history":[{"count":91,"href":"https:\/\/www.axa.dz\/api\/wp\/v2\/pages\/1698\/revisions"}],"predecessor-version":[{"id":1967,"href":"https:\/\/www.axa.dz\/api\/wp\/v2\/pages\/1698\/revisions\/1967"}],"wp:attachment":[{"href":"https:\/\/www.axa.dz\/api\/wp\/v2\/media?parent=1698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}