JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div id="app">
  <div class="container">
    <div class="contents">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="msg">
      <p class="text">写真をクリックしてスタート！</p>
      <p><a class="tweet" href="#" target="_blank"></a></p>
    </div>
  </div>
</div>

SCSS

@charset "UTF-8";

.container {
  position: relative;
  margin: auto;
  width: 960px;
  height: 240px;
}

.contents {
  display: table;
  border: 3px solid black;
  background-color: gold;
}

.box {
  display: table-cell;
  width: 320px;
  height: 320px;
  background-repeat: no-repeat;
  background-position: center center;
}

.box:nth-child(2) {
  border-right: 3px solid black;
  border-left: 3px solid black;
}

.msg {
  margin: 1em auto;
  color: black;
  font-size: 16px;
  text-align: center;
}

.msg.hie {
  display: none;
}

JavaScript

(function() {
  'use strict';

  // dom
  var box = document.querySelectorAll('.box');
  var msg = document.querySelectorAll('.msg');
  var text = document.querySelectorAll('.text');
  var tweet = document.querySelectorAll('.tweet');

  var win_text = ['うわぁそろってる……すごいね……','今日はかなりついてるね！','乙。','ﾔｯﾀｰ！ さぁTKGを食べよう！'];
  var lose_text = ['はい残念〜','おしい！','ﾝﾝｰwww','まだそろえられないの？'];

  // 各スロットの停止状態とTKG写真配列のインデックス
  var slot_status = [];

  // ゼロパディング
  var zeroPadding = function(number, length){
     return (Array(length).join('0') + number).slice(-length);
  };

  // TKG写真パスの配列
  var tkgs = (function(){
    var arr = []
    for(var i=1;i<3;i++) {
      arr.push('http://lab.dskd.jp/tkg-slot/img/'+zeroPadding(i,3)+'.jpg')
    }
    return arr;
  })();

  // そろってない時（何もしない）
  function rolling() {
    text[0].textContent = 'そろうかな〜？';
    tweet[0].textContent = '';
    tweet[0].setAttribute('href', '#')
  };

  // そろった時
  function win() {
    text[0].textContent = win_text[Math.floor(Math.random() * win_text.length)];
    tweet[0].textContent = 'ツイートする';
    tweet[0].setAttribute('href', 'https://twitter.com/intent/tweet?text='+encodeURIComponent('TKGスロットを揃えました。 '+tkgs[slot_status[0].img])+'&url='+encodeURIComponent('http://lab.dskd.jp/tkg-slot/')+'&via=dskd_jp&related=o_ti');
  };

  // そろってない時（何もしない）
  function lose() {
    text[0].textContent = lose_text[Math.floor(Math.random() * lose_text.length)];
    tweet[0].textContent = '';
    tweet[0].setAttribute('href', '#')
  };

  function status_has_query(key, query) {
    return (slot_status.map(function(status){
      return status[key];
    }).indexOf(query) !== -1) ? true : false;
  }

  // img判定
  function is_same_img() {
    for (var i=0;i<slot_status.length;i++) {
      if (slot_status[0].img !== slot_status[i].img) {
        return false;
      }
    };
    return true;
  };

  // TKGが揃ってるか判定
  function judgement() {
    // 全てスタート済みでなかったらreturn
    if ( status_has_query('started', false) ) return;

    // 停止してない写真があるか
   ...