<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>席替えルーレット</title>
  <style>
    body, html{
      margin:0;
      padding:0;
      height:100%;
      width:100%;
      display: flex;
      overflow: hidden; /* スクロールバーを非表示にする */
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .seating-chart {
      display: grid;
      grid-template-columns: repeat(6, 1fr); 
      grid-template-rows: repeat(8, 1fr); 
      gap: 10px;
      width: 90vw;  /* ビューポート幅の90% */
      height: 90vh; /* ビューポート高さの90% */
      max-width: 1200px; /* 画面が大きすぎる場合に幅を制限 */
      max-height: 700px; /* 高さも同様に制限 */
    }
    .seat {
      background-color: lightgray;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: calc(1.5vw +1.5vh);
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    .highlight {
      background-color: yellow;
      transform: scale(1.1);
    }
    .selected {
      background-color: lightgreen;
    }
    .special {
      background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
      animation: rainbow 1s linear infinite;
    }
    .blank {
      background-color: darkgray; /* 空白席の色 */
      pointer-events: none; /* 空白席はクリック不可 */
    }
    @keyframes rainbow {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }
    #currentStudent, #nextStudent {
      font-size: calc(1.2vw + 1.2vh);
      margin-bottom: 20px;
      max-width: 90vw; /* テキストが画面外にはみ出さないように制限 */
    }
  </style>
  <audio id="specialSound" src="special-sound.mp3"></audio>
</head>
<body>

<h1>席替えルーレット</h1>
<div id="currentStudent">今選んでいる席: ?</div>
<div id="nextStudent">次の席: ?</div>
<div class="seating-chart" id="seatingChart"></div>

<script>
  const seatingChart = document.getElementById('seatingChart');
  const currentStudentDisplay = document.getElementById('currentStudent');
  const nextStudentDisplay = document.getElementById('nextStudent');
  const totalSeats = 48;
  // 空白席のインデックス
  const blankSeats = [0, 6, 41, 42, 45, 46, 47]; // 例: インデックス5, 15, 25を空白席にする
  function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(window.crypto.getRandomValues(new Uint32Array(1))[0] / (0xFFFFFFFF + 1) * (i + 1)); // 0からiまでの範囲の乱数を生成
    [array[i], array[j]] = [array[j], array[i]]; // 要素を入れ替える
  }
  return array;
  }
  // 出席番号と生徒名のリスト（ランダム順）
  let students = [
    { number: 1, name: '浅村' },
    { number: 2, name: '稲垣' },
    { number: 3, name: '井上' },
    { number: 4, name: '岩尾' },
    { number: 5, name: '碓井' },
    { number: 6, name: '江尻' },
    { number: 7, name: '大笹' },
    { number: 8, name: '小川' },
    { number: 9, name: '折橋' },
    { number: 10, name: '開発' },
    { number: 11, name: '川口' },
    { number: 12, name: '甲田' },
    { number: 13, name: '此川' },
    { number: 14, name: '崎山' },
    { number: 15, name: '白石' },
    { number: 16, name: '高山' },
    { number: 17, name: '田川' },
    { number: 18, name: '太刀川' },
    { number: 19, name: '田村' },
    { number: 20, name: '釣谷' },
    { number: 21, name: '長島' },
    { number: 22, name: '中村' },
    { number: 23, name: '野嵜' },
    { number: 24, name: '野島' },
    { number: 25, name: '野寺' },
    { number: 26, name: '長谷川' },
    { number: 27, name: '幅' },
    { number: 28, name: '濱井' },
    { number: 29, name: '濱多' },
    { number: 30, name: '藤井' },
    { number: 31, name: '古田' },
    { number: 32, name: '町田' },
    { number: 33, name: '宮谷' },
    { number: 34, name: '村井' },
    { number: 35, name: '村田' },
    { number: 36, name: '餅川' },
    { number: 37, name: '森' },
    { number: 38, name: '猶明' },
    { number: 39, name: 'ケン' },
    { number: 40, name: 'プレーン' },
    { number: 41, name: 'マンゴーン' },
  ];

  // 生徒の順番をランダム化
  students = shuffleArray(students);

  let selectedSeats = []; // 既に選ばれた座席を記録
  let currentIndex = 0;

  const specialSeatIndexes = [10, 20, 30, 36, 40]; // 特殊な席のインデックス
  let specialStudents = [];

  const fixedSeatPairs = [
    { studentNumber: 1, seatIndex: 2 },
    { studentNumber: 41, seatIndex: 43 }
  ];

  function createSeatingChart() {
    for (let i = 0; i < totalSeats; i++) {
      const seat = document.createElement('div');
      seat.classList.add('seat');
      if (blankSeats.includes(i)) {
        seat.classList.add('blank'); // 空白席にスタイルを追加
        seat.textContent = '×'; // 空白席の表示
      } else {
        seat.textContent = '?';
      }
      seat.dataset.index = i;
      seatingChart.appendChild(seat);
    }
  }

  function getRandomSeat(excludeFixed = false) {
  let availableSeats = Array.from({ length: totalSeats }, (_, i) => i)
    .filter(i =>
      !selectedSeats.includes(i) &&
      !specialSeatIndexes.includes(i) &&  // 特殊演出席を除外
      !blankSeats.includes(i) &&  // 空白席を除外
      (!excludeFixed || !fixedSeatPairs.some(pair => pair.seatIndex === i))
    );

  const randomIndex = getCryptoRandomInt(0, availableSeats.length - 1);
  return availableSeats[randomIndex];
}

function getCryptoRandomInt(min, max) {
  const randomBuffer = new Uint32Array(1);
  window.crypto.getRandomValues(randomBuffer);
  const randomNumber = randomBuffer[0] / (0xffffffff + 1); // 0 <= randomNumber < 1
  return Math.floor(randomNumber * (max - min + 1)) + min;
}


  function selectSpecialStudents() {
    const selectedIndexes = new Set();
    while (selectedIndexes.size < 5) {
      const randomIndex = Math.floor(Math.random() * students.length);
      selectedIndexes.add(randomIndex);
    }
    specialStudents = Array.from(selectedIndexes).map(index => students[index]);
  }

  function startRoulette() {
    let seats = document.querySelectorAll('.seat');
    let currentSeat;
    let highlightDuration = 100; // ハイライトの間隔（ミリ秒）

    const rouletteDuration = 10000; // 10秒かけて座席を選択
    const intervalCount = rouletteDuration / highlightDuration; // ルーレットで選ばれる回数
    let counter = 0;

    let interval = setInterval(() => {
      if (currentSeat) currentSeat.classList.remove('highlight');

      let randomIndex = getRandomSeat(true); // 固定席を除外してランダム選択
      currentSeat = seats[randomIndex];
      currentSeat.classList.add('highlight');

      currentStudentDisplay.textContent = `今選んでいる席: ${students[currentIndex].name}`;
      nextStudentDisplay.textContent = `次の席: ${students[currentIndex + 1]?.name || '?'}`;
      // 特殊演出対象者が選ばれたか確認
      if (specialStudents.some(special => special.number === students[currentIndex]?.number)) {
        specialSound.play();
        currentSeat.classList.add('special'); // 特殊演出を追加
      }
      counter++;
      if (counter >= intervalCount) {
        clearInterval(interval);
        finalizeSeatSelection(randomIndex, currentSeat);
      }
    }, highlightDuration);
  }

  function finalizeSeatSelection(index, seat) {
  let seats = document.querySelectorAll('.seat');
  seat.classList.remove('highlight'); // ハイライトを消す

  // まず固定席のチェック
  const fixedSeat = fixedSeatPairs.find(fixed => fixed.studentNumber === students[currentIndex].number);
  if (fixedSeat) {
    const fixedSeatElement = document.querySelector(`.seat[data-index="${fixedSeat.seatIndex}"]`);
    fixedSeatElement.classList.add('selected');
    fixedSeatElement.textContent = students[currentIndex].name;
    selectedSeats.push(fixedSeat.seatIndex); // 固定席を選ばれたとして記録
  } 
  // 次に特殊演出のチェック
  else if (specialStudents.some(special => special.number === students[currentIndex].number)) {
    const specialSeatIndex = specialSeatIndexes[specialStudents.findIndex(s => s.number === students[currentIndex].number)];
    const specialSeat = document.querySelector(`.seat[data-index="${specialSeatIndex}"]`);
    specialSeat.classList.add('selected');
    specialSeat.textContent = students[currentIndex].name;
    selectedSeats.push(specialSeatIndex); // 特殊席を選ばれたとして記録
  } 
  // 通常席の割り当て
  else {
    seat.classList.add('selected');
    seat.textContent = students[currentIndex].name;
    selectedSeats.push(index); // 通常の席を選ばれたとして記録
  }

  currentIndex++;

  if (currentIndex < students.length) {
    setTimeout(() => {
      seats.forEach((s, i) => {
        if (!selectedSeats.includes(i)) {
          s.classList.remove('special'); // レインボー効果を消す
        }
      });
      startRoulette();
    }, 1000);
  }
}


  function startSeatSelection() {
    createSeatingChart();
    selectSpecialStudents(); // 特殊学生を選択
    setTimeout(startRoulette, 1000); // 1秒後にルーレットをスタート
  }

  startSeatSelection();
</script>
</body>
</html>
