Добро пожаловать в нашу бродилку - Путешествие по магическому Лондону!

Ты стартуешь с первой ячейки. Очутившись в начале улицы Лютного переулка, ты уже не помнишь, зачем тебя сюда принесли ноги. В воздухе ощущается сырость и запах плесени, рядом старуха торгует чем-то похожим на старые ногти. Первый ход - бесплатно!

[html]<div class="wheel-container">
  <h2>Дискуссионное колесо для флуд-клеток</h2>

  <div class="wheel-wrapper">
    <div class="wheel" id="wheel">
      <div class="stars" id="stars"></div>
      <div class="constellations" id="constellations"></div>
    </div>
    <div class="pointer" id="pointer"></div>
  </div>
 
  <button class="spin-btn" id="spinBtn">КРУТИТЬ</button>
 
  <div class="result-tablet" id="result">
    <p class="result-text" id="questionText">Нажми «КРУТИТЬ», чтобы получить вопрос</p>
  </div>
</div>

<style>
  .wheel-container {
    max-width: 520px;
    margin: 25px auto;
    text-align: center;
    font-family: "Georgia", serif;
    color: #dddcd2;
  }
  h2 {
    color: #743c37;
    margin-bottom: 20px;
    font-size: 27px;
    letter-spacing: 1px;
  }
  .wheel-wrapper {
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto 25px;
  }
  .wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 16px solid #1f2126;
    box-shadow: 0 0 45px rgba(0,0,0,0.9),
                inset 0 0 40px rgba(116, 60, 55, 0.3),
                0 0 70px rgba(15, 18, 32, 0.85);
    position: relative;
    overflow: hidden;
    background: #0b0d12;
    transition: transform 5.4s cubic-bezier(0.33, 0.01, 0.18, 1);
  }
  .stars {
    position: absolute;
    inset: 0;
    border-radius: 50%;
  }
  .star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px #fff;
    animation: twinkle 4s infinite alternate ease-in-out;
  }
  @keyframes twinkle {
    0% { opacity: 0.45; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
  }
  .constellations {
    position: absolute;
    inset: 0;
    border-radius: 50%;
  }
  .constellation-line {
    position: absolute;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, rgba(225, 215, 190, 0.4), transparent);
  }
  .pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 48px solid #743c37;
    z-index: 10;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.85));
  }
  .result-tablet {
    background: #1c1f26;
    border: 6px solid #743c37;
    border-radius: 12px;
    padding: 28px 35px;
    min-height: 145px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.75);
    margin: 0 15px;
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.7s ease;
  }
  .result-tablet.show {
    opacity: 1;
    transform: translateY(0);
  }
  .result-text {
    font-size: 19px;
    line-height: 1.5;
    color: #dddcd2;
  }
  .spin-btn {
    margin: 20px 0 10px;
    padding: 14px 42px;
    font-size: 18px;
    font-weight: bold;
    background: #1f2126;
    color: #dddcd2;
    border: 2px solid #4a3f3c;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    transition: all 0.25s ease;
  }
  .spin-btn:hover {
    background: #2a2d34;
    border-color: #743c37;
    transform: translateY(-3px);
  }
  .spin-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>

<script>

const questions = [
  "1. Как произошел выбор персонажа за которого вы сейчас играете? Доп.вопросы: важно ли вам, чтобы он был прописан в каноне и проработан автором или проще беретесь продумывать историю персонажа с нуля?",
  "2. Что объединяет всех ваших персонажей? Есть ли какие-то общие черты между ними, детали. Сделано это специально или просто так написалось?",
  "3. А что вашего персонажа объединяет с вами? Есть ли общие черты характера, особености поведения, что-то из истории самого персонажа? Добавляете ли вы себя в своего персонажа намеренно или пишите максимально противоположный от себя образ?",
  "4. Если взять всех персонажей, которых ты играл(а) есть ли у них всех общие черты, способности, детали личности?",
  "5. Ролевые/писательские табу? Что это за зверь и с чем его едят? Что вам не нравится отыгрывать, какие сцены, персонажей или сюжеты вызывают отторжение. Что может отталкивать в персонаже другого человека? Про что вы точно можете сказать: Это не мое",
  "6. Юмор в тексте - уместно или нелепо? Как часто мы сталкиваемся с тем, что у людей просто разное чувство юмора: не плохое, просто разное. Как вы реагируете на юмор в постах/текстах и шутите ли от лица персонажа?",
  "7. Дисциплина или вдохновение? Что движет вами при отписи постов?",
  "8. Напоминание о посте. Является ли для вас нормальным напоминать соигроку о постовом долге или вы предпочитаете просто ждать? Какой максимум у вас случался и в ожидании и в отписи?",
  "9. Пишите вы посты в тишине или под музыку? Если пишите под музыку, поделитесь с нами списком любимых треков! Чем больше песен тем лучше!",
  "10. Играете ли вы одновременно двух-трех-четырех разных персонажей? Меняется ли от этого ваш стиль, настроение, ритм поста? Сложно ли переключаться между персонажами? Как быть в том настроении чтобы писать сейчас за одного, через три часа за совершенно другого персонажа? Насколько легко держать разные образы в голове?",
  "11. Второстепенные персонажи - продумываете ли вы их, используете ли постоянно одних или в каждой сцене новые? Считаете ли вы, что прописывать второстепенных персонажей - это лишний текст? Поделитесь, что для вас хороший второстепенный со своим голосом, а что для вас плохой второстепенный?",
  "12. Имеет ли размер поста значение для вас? Что для вас хороший пост? С какого размера в словах/символах вы начинали и сколько пишете сейчас?",
  "13. Как вы считаете, вы пишите сейчас лучше, чем год-два назад или нет? По каким признакам понимаете что текст хорош?",
  "14. Расскажи кринжовую историю с ролевых, не важны сроки давности, лишь бы был чистый и отборный кринж",
  "15. Как возвращать вдохновение на игру? Что если в один момент вообще не хочется ничего писать и только лежать? Поделись своими мыслями, бывало ли у тебя такое и как ты справляешься",
  "16. Какую музыку бы слушал твой персонаж в 2026 году? Накинь треков",
  "17. Выбери несколько персонажей с форума и напиши ассоциации: погода, заклинание, песня, цвет, блюдо, животное, время суток, запах, можешь придумать свои ассоциации дополнительно",
  "18. Играли ли вы когда-нибудь свою профессию? А видели, как кто-то играет? Как вам это действо? Считаете ли вы наличие работы у персонажа важным?",
  "19. Продумывание персонажа - с чего вы начинаете? Что делаете в первую очередь: придумыватее имя, выбираете внешность или придумываете историю? Какие детали для вас важны, а какие вы не прописываете, но, может, держите в голове? Продумываете ли вы персонажа от трусов до вкусовых предпочтений или считаете это лишним?",
  "20. Что такое ролевой этикет? Понятие-то существует, но каждый как будто читал разный ролевой кодекс чести. Что это для вас? В чем этот ролевой этикет проявляется, какие негласные правила сущестуют. Каким вы следуете, а каким нет?",
  "21. Случалось ли вам перенимать настроение персонажа? Становилось обидно при отыгрыше конфликта, грустно/радостно и тд. Считаете ли это слиянием или нормальной реакцией?",
  "22. Внутренние монологи, воспоминания, сны - какой процент ваших постов, на ваш взгляд, посвящен взаимодействию персонажа с миром/с персонажем соигрока, а какой с внутренним миром? Считаете ли вы важным эту часть или предпочитаете не писать ее?",
  "23. Реткон - да или нет? Что это египетская казнь или египетская сила? Лучше откатать сцену или просто смириться?",
  "24. Ваш идеальный пост. О чем он был, какой он, был ли он вообще? А цитаты из него будут?",
  "25. Внутренний критик - друг или пиздец? Есть ли он у вас, как справляетесь - если да, лайфхаки по отключению говорящей головы внутри головы.",
  "26. Стиль для меня - это? Есть ли признаки этого хорошего и плохого стиля? Что вас вдохновляет в чужих текстах, что хотели бы позаимствовать себе? Вообще цепляли ли что-то у других соигроков, что именно и говорили ли об этом?",
  "27. Какая графа в анкете вызывает мигрень, а какую готовы расписывать страницами?",
  "28. Анкета - большая или маленькая? Что для вас важно указать в анкете и что важно прочесть в других анкетах? Читаете ли вы вообще анкеты других игроков и опираетесь ли на них?",
  "29. Токсичные привычки. Есть ли у вас вредные писательные привычки? Например: длинные диалоги или много реплик, слишком длинные абзацы с мыслями и тд."
];

let isSpinning = false;
let spinsToday = 0;
let lastSpinDate = '';

const STORAGE_KEY = 'wheel_spins';
const MAX_SPINS = 3;

function createStars() {
  const container = document.getElementById('stars');
  container.innerHTML = '';
  for (let i = 0; i < 160; i++) {
    const star = document.createElement('div');
    star.className = 'star';
    const size = Math.random() * 3 + 1;
    star.style.width = `${size}px`;
    star.style.height = `${size}px`;
    star.style.left = `${Math.random() * 100}%`;
    star.style.top = `${Math.random() * 100}%`;
    star.style.animationDelay = `-${Math.random() * 4}s`;
    container.appendChild(star);
  }
}

function createConstellations() {
  const container = document.getElementById('constellations');
  container.innerHTML = '';

  const lines = [
    {x1:32, y1:25, x2:47, y2:20}, {x1:47, y1:20, x2:65, y2:33},
    {x1:25, y1:52, x2:40, y2:68}, {x1:40, y1:68, x2:58, y2:55},
    {x1:70, y1:42, x2:85, y2:37}, {x1:72, y1:70, x2:88, y2:63}
  ];
 
  lines.forEach(line => {
    const el = document.createElement('div');
    el.className = 'constellation-line';
    const dx = line.x2 - line.x1;
    const dy = line.y2 - line.y1;
    const length = Math.sqrt(dx*dx + dy*dy);
    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
   
    el.style.left = `${line.x1}%`;
    el.style.top = `${line.y1}%`;
    el.style.width = `${length}%`;
    el.style.transform = `rotate(${angle}deg)`;
    container.appendChild(el);
  });
}

function loadSpinData() {
  const data = localStorage.getItem(STORAGE_KEY);
  if (data) {
    const parsed = JSON.parse(data);
    lastSpinDate = parsed.date || '';
    spinsToday = parsed.count || 0;
  }
}

function saveSpinData() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify({
    date: lastSpinDate,
    count: spinsToday
  }));
}

function checkDailyReset() {
  const today = new Date().toISOString().split('T')[0];
  if (today !== lastSpinDate) {
    lastSpinDate = today;
    spinsToday = 0;
    saveSpinData();
  }
}

function updateButtonState() {
  const spinBtn = document.getElementById('spinBtn');
  if (spinsToday >= MAX_SPINS) {
    spinBtn.disabled = true;
    spinBtn.textContent = `КРУТИТЬ (3/3) — завтра`;
  } else {
    spinBtn.disabled = false;
    spinBtn.textContent = `КРУТИТЬ (${spinsToday}/${MAX_SPINS})`;
  }
}

function spinWheel() {
  if (isSpinning) return;

  checkDailyReset();

  if (spinsToday >= MAX_SPINS) {
    const resultText = document.getElementById('questionText');
    const resultTablet = document.getElementById('result');
    resultTablet.classList.add('show');
    resultText.textContent = `Вы уже использовали все 3 попытки сегодня. Возвращайтесь завтра! 🌙`;
    return;
  }

  isSpinning = true;
  const spinBtn = document.getElementById('spinBtn');
  const wheel = document.getElementById('wheel');
  const resultText = document.getElementById('questionText');
  const resultTablet = document.getElementById('result');

  spinBtn.disabled = true;
  resultTablet.classList.remove('show');
  resultText.textContent = "Крутится...";

  spinsToday++;
  saveSpinData();
  updateButtonState();

  const randomSegment = Math.floor(Math.random() * questions.length);
  const minSpins = 6;
  const extraSpins = Math.random() * 5 + 4;
  const baseRotation = (minSpins + extraSpins) * 360;
  const segmentAngle = 360 / questions.length;
  const finalRotation = baseRotation + (randomSegment * segmentAngle) + (segmentAngle / 2);

  wheel.style.transition = 'transform 5.4s cubic-bezier(0.33, 0.01, 0.18, 1)';
  wheel.style.transform = `rotate(-${finalRotation}deg)`;

  setTimeout(() => {
    resultText.textContent = questions[randomSegment];
    resultTablet.classList.add('show');
   
    wheel.style.transition = 'transform 0.45s ease';
    wheel.style.transform = `rotate(-${finalRotation - 8}deg)`;
   
    setTimeout(() => {
      wheel.style.transition = 'transform 0.65s ease';
      wheel.style.transform = `rotate(-${finalRotation}deg)`;
    }, 150);

    isSpinning = false;
    updateButtonState();
  }, 5500);
}

createStars();
createConstellations();
loadSpinData();
checkDailyReset();
updateButtonState();

document.getElementById('spinBtn').addEventListener('click', spinWheel);
</script>[/html]