kekec_bbs/scripts/script.js

const music = new Audio ('./assets/music.mp3'); // BGM
let   playing = false;                          // 再生フラグ
let   nowPlay = true;                           // 再生すべきかどぅか

document.getElementById ('sort').addEventListener ('change', sortChange);

/*
 * BGM を再生しよぅとする．
 *
 * 戻り値は，なし．
 */
async function
PlayMusic ()
{
  // 再生中でなぃ場合
  if (playing === false)
    {
      // BGM を再生しよぅとする．
      try
      {
        await music.play ();
        music.loop = true;

        playing = true;
        nowPlay = true;

        // オン/オフ・ボタン
        document.getElementById ('mute').innerHTML = 'BGM がうるさい人用';
      }
      catch (err)
      {
        playing = false;
      }
    }
}

/*
 * BGM の消音切替
 *
 * 戻り値は，なし．
 */
function
PauseMusic ()
{
  // 切替
  if (nowPlay && playing)  // 再生中の場合
    {
      music.muted = true;
      document.getElementById ('mute').innerHTML = 'やっぱり BGM が恋しい人用';

      nowPlay = false;
    }
  else                     // 消音中の場合
    {
      music.muted = false;
      document.getElementById ('mute').innerHTML = 'BGM がうるさい人用';

      nowPlay = true;
    }
}

// 1000 ms ごとに BGM 再生試行 
window.setInterval (function
    ()
    {
      PlayMusic ();
    },
    1000);

// 画面クリックで BGM 再生試行
document.addEventListener ('click', function
    ()
    {
      PlayMusic ();
    });

// 画面タッチで BGM 再生試行
document.addEventListener ('touchstart', function
    ()
    {
      PlayMusic ();
    });

const body = document.getElementsByTagName ('body')[0];  // body 要素
const cv = document.getElementById ('work');             // 作業用 Canvas
const g = cv.getContext ('2d');                          // 作業用 Canvas のコンテクスト

const list = ['magenta', 'lime', 'cyan', 'yellow', 'orange', 'pink', 'aliceblue',
              'antiquewhite', 'aqua', 'aquamarine', 'bisque', 'lightgreen', 'linen',
              'lightsalmon', 'darkorange', 'palegreen'];
    // 色リスト
let   nowColour = Math.floor (Math.random () * list.length);
    // 前の色番号
let   nextColour = Math.floor (Math.random () * list.length);
    // 次の色番号
let   [tempR, tempG, tempB] = getRGB (list[nowColour]);
    // 現在の RGB 値

// 3000 ms ごとに次の色指定
window.setInterval (function
    ()
    {
      nowColour = nextColour;
      nextColour = Math.floor (Math.random () * list.length);
    },
    3000);

// 20 ms ごとに，ぢょぢょに，色変更 
window.setInterval (function
    ()
    {
      let [nowR, nowG, nowB] = getRGB (list[nowColour]);
      let [nextR, nextG, nextB] = getRGB (list[nextColour]);

      body.style.backgroundColor = `rgb(${tempR}, ${tempG}, ${tempB})`;

      tempR += (nextR - nowR) / 150;
      tempG += (nextG - nowG) / 150;
      tempB += (nextB - nowB) / 150;
    },
    20);

/*
 * カラ・コゥド c を RGB 値に変換する．
 *
 * 戻り値は，RGB 値排列．
 */
function
getRGB (c)
{
    g.fillStyle = c;
    g.fillRect (0, 0, 1, 1);

    const img = g.getImageData (0, 0, 1, 1);
    const px = img.data;
    const rgb = [px[0], px[1], px[2]];

    return rgb;
}

function
sortChange (evt)
{
  const searchParams = new URLSearchParams (window.location.search);

  switch (evt.currentTarget.value)
    {
    default:
      window.location.href = `./?thread=${searchParams.get ('thread')}&sort=td`;

      break;

    case 'evaluate-good':
      window.location.href = `./?thread=${searchParams.get ('thread')}&sort=eg`;

      break;

    case 'time-asc':
      window.location.href = `./?thread=${searchParams.get ('thread')}&sort=ta`;

      break;

    case 'evaluate-bad':
      window.location.href = `./?thread=${searchParams.get ('thread')}&sort=eb`;

      break;
    }
}