Как сделать диалоговое сообщение , с выпавшим предметом из рулетки (предмет который выпал по центру) добавить курсор соответствующий этому предмету

Question

```const cells = 61 //количество предметов (скорость рулетки)

// From 0.001 to 100
const items = [
  {name: 'iPhone', img: './images/iPhone.png', chance: 25},
  {name: 'Keyboard', img: './images/keyboard.png', chance: 25},
  {name: 'Headphones', img: './images/headphones.png', chance: 25},
  {name: 'Pivo', img: './images/pivo.png', chance: 25},
  {name: 'butterfly', img: './images/butterfly.png', chance: 25},
  {name: 'jini', img: './images/jini.png', chance: 25},
  {name: 'vini', img: './images/vinipuh.png', chance: 25},
]

function getItem() {
  let item;
  const totalChances = items.reduce((acc, curr) => acc + curr.chance, 0) ;

  while (!item) {
    const chance = Math.floor(Math.random() * totalChances);
    let cumulativeChance = 0;
    
    for (const elm of items) {
      cumulativeChance += elm.chance;
      if (chance < cumulativeChance) {
        item = elm;
        break;
      }
    }
  }

  return item;
}

function generateItems() {
  document.querySelector('.list').remove()
  document.querySelector('.scope').innerHTML = `
    <ul class="list"></ul>
  `
  
  const list = document.querySelector('.list')

  for (let i = 0; i < cells; i++) {
    const item = getItem()
    
    const li = document.createElement('li')
    li.setAttribute('data-item', JSON.stringify(item))
    li.classList.add('list__item')
    li.innerHTML = `
      <img src="${item.img}" alt="" />
    `

    list.append(li)
  }
}

generateItems()

let isStarted = false
let isFirstStart = true

function start() {
  if (isStarted) return
  else isStarted = true

  if (!isFirstStart) generateItems()
  else isFirstStart = false
  const list = document.querySelector('.list')

  setTimeout(() => {
    list.style.left = '50%'
    list.style.transform = 'translate3d(-50%, 0, 0)'
  }, 0)

  const item = list.querySelectorAll('li')[15]

  list.addEventListener('transitionend', () => {
    isStarted = false
    item.classList.add('active')
    const data = JSON.parse(item.getAttribute('data-item'))
    
    console.log(data);
  }, {once: true})
}

let FPSCounter = 0
function FPSIncrementer() {
  FPSCounter++

  requestAnimationFrame(arguments.callee)
}; FPSIncrementer()

function FPSViewer() {
  document.querySelector('.FPS').innerHTML = FPSCounter * 2
  FPSCounter = 0

  setTimeout(arguments.callee, 500)
}; FPSViewer()
function start() {
  const startButton = document.getElementById('startButton');
  startButton.disabled = true; // Disable the button
  startButton.style.display = 'none'; // Скрываем кнопку "Крутить"

  if (isStarted) return;
  else isStarted = true;

  if (!isFirstStart) generateItems();
  else isFirstStart = false;
  const list = document.querySelector('.list');

  setTimeout(() => {
    list.style.left = '50%';
    list.style.transform = 'translate3d(-50%, 0, 0)';
  }, 0);

  const item = list.querySelectorAll('li')[15];

  list.addEventListener('transitionend', () => {
    isStarted = false;
    item.classList.add('active');
    const data = JSON.parse(item.getAttribute('data-item'));

    console.log(data);

  }, {once: true});
  list.addEventListener('transitionend', () => {
    isStarted = false;
    item.classList.add('active');
    const data = JSON.parse(item.getAttribute('data-item'));

    console.log(data);

    startButton.disabled = false; // Enable the button
    function showGoToTaskButton() {
      const messageContainer = document.getElementById('messageContainer');
      const goToTaskButton = document.getElementById('goToTaskButton');
      const message = document.getElementById('message');
    
      message.textContent = 'Предмет выпал!';
      goToTaskButton.style.display = 'inline-block';
      goToTaskButton.textContent = 'Перейти к заданию';
    }
    showGoToTaskButton(); // Show the "Go to task" button
  }, {once: true});
  list.addEventListener('transitionend', () => {
    isStarted = false;
    item.classList.add('active');
    const data = JSON.parse(item.getAttribute('data-item'));

    console.log(data);

    startButton.disabled = false; // Enable the button
    if (isGoToTaskButtonShown) {
      startButton.textContent = 'Перейти к заданию'; // Change the button text to "Перейти к заданию"
      showGoToTaskButton(); // Show the "Go to task" button
    } else {
      startButton.textContent = 'Испытать удачу снова'; // Change the button text to "Испытать удачу снова"
      resetStartButtonText(); // Hide the "Go to task" button
    }
    isGoToTaskButtonShown = false; // Reset the flag
  }, {once: true});
  list.addEventListener('transitionend', () => {
    isStarted = false;
    item.classList.add('active');
    const data = JSON.parse(item.getAttribute('data-item'));
  document.getElementById('startButton').style.display = 'none'

    console.log(data);

    startButton.disabled = false; // Enable the button
    if (isGoToTaskButtonShown) {
      startButton.textContent = 'Перейти к заданию'; // Change the button text to "Перейти к заданию"
      showGoToTaskButton(); // Show the "Go to task" button
    } else {
    
      resetStartButtonText(); 
    }
    isGoToTaskButtonShown = false; 
  }, {once: true});
}



function showGoToTaskButton() {
  const messageContainer = document.getElementById('messageContainer');
  const goToTaskButton = document.getElementById('goToTaskButton');
  const message = document.getElementById('message');

  message.textContent = 'Предмет выпал!';
  goToTaskButton.style.display = 'inline-block';
}
function resetStartButtonText() {
  startButton.textContent = 'Испытать удачу снова';
  document.getElementById('goToTaskButton').style.display = 'none'; // Hide the "Go to task" button
  document.getElementById('startButton').style.display = 'none'

}
let isGoToTaskButtonShown = false;

function showGoToTaskButton() {
  const messageContainer = document.getElementById('messageContainer');
  const goToTaskButton = document.getElementById('goToTaskButton');
  const message = document.getElementById('message');
  document.getElementById('startButton').style.display = 'none'
  message.textContent = 'Предмет выпал!';
  goToTaskButton.style.display = 'inline-block';
}

function resetStartButtonText() {
  startButton.textContent = 'Испытать удачу снова';
}
startButton.addEventListener('click', () => {
  resetStartButtonText(); // Change the button text back to "Испытать удачу снова"
  isGoToTaskButtonShown = false; // Reset the flag
  document.getElementById('goToTaskButton').style.display = 'none'; // Hide the "Go to task" button
  startButton.disabled = true; // Disable the button
});
goToTaskButton.addEventListener('click', () => {
  startButton.textContent = 'Крутить';
  document.getElementById('goToTaskButton').style.display = 'none'; // Hide the "Go to task" button
});
const startButton = document.getElementById('startButton');
const goToTaskButton = document.getElementById('goToTaskButton');

function showGoToTaskButton() {
  const messageContainer = document.getElementById('messageContainer');
  const message = document.getElementById('message');

  message.textContent = 'Предмет выпал!';
  goToTaskButton.style.display = 'inline-block';
  goToTaskButton.textContent = 'Испытать удачу снова';
}

startButton.addEventListener('click', () => {
  startButton.textContent = 'Крутить';
  document.getElementById('goToTaskButton').style.display = 'none'; // Hide the "Go to task" button
});

goToTaskButton.addEventListener('click', () => {
  startButton.textContent = 'Крутить';
  document.getElementById('goToTaskButton').style.display = 'none'; // Hide the "Go to task" button
});
//162 строка
window.addEventListener('resize', function() {
  // Получаем элементы, которые нужно зафиксировать
  var fixedElements = document.querySelectorAll('.fixed-element');

  // Проходим по каждому элементу и устанавливаем им позицию fixed
  for (var i = 0; i < fixedElements.length; i++) {
    var element = fixedElements[i];
    element.style.position = 'fixed'; // Зафиксируем позицию элемента
  }
});```
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeCase</title>
    <link rel="icon" type="image/x-icon" href="./images/favicon.ico">
    <link rel="stylesheet" href="./style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
  <header>
    <img src="./images/logo.webp" alt="Main-Logo" class =
    "main-logo">
    <a href='index.html' class = 'home_button'>Home</a>
    </header>

    <img src="./images/case_test.webp" alt="case_test" class = "case_on_open_page">
    <h2 class = "text_above_case">Кейс "Тест"</h2>
  <div class="app">
    <img class="pointer" src="IMG/pointer.png" alt="">
    <div class="scope">
      <ul class="list"></ul>
    </div>

    <button id="startButton" onclick="start()" class="start">Крутить</button>  </div>
<div id="messageContainer" class = 'task1'>
  <p id="message"></p>
  <button id="goToTaskButton" class="task" style="display: none;">Перейти к заданию</button>
</div>
<div id="resultContainer">
  <h2 id="resultTitle"></h2>
  <p id="resultDescription"></p>
  <img id="resultImage" src="" alt="">
</div>
<!-- <div>
  тут будет лутпул кейса
</div> -->

  <footer>
  </footer>
    </body>
</html>


<script src="./scripts/openCase.js"></script>

```

БЛОГ НА HUSL

Как сделать диалоговое сообщение , с выпавшим предметом из рулетки (предмет который выпал по центру) добавить курсор соответствующий этому предмету

Ответы (0 шт):