Merge pull request #4 from adeliae1316/remake-by-grid-layout

#1 delete modal
adeliae1316 · Dec 30, 2019 · 1479b54 · 1479b54
2 parents d68cd30 + 34d07b4
commit 1479b54
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -16,4 +16,3 @@
 |---|---|---|
 |Quiz-Results(sound)|[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)|[OtoLogic](https://otologic.jp)|
 |Ubuntu(Font)|[Ubuntu font licence Version 1.0](https://ubuntu.com/legal/font-licence)|[Dalton Maag](https://www.daltonmaag.com/)|
-|[Materialize](https://materializecss.com/)|[MIT License](https://opensource.org/licenses/mit-license.php)||
diff --git a/assets/css/bingo.css b/assets/css/bingo.css
@@ -11,11 +11,25 @@ h1 {
   display: inline-block;
 }
 
+#gridcontainer {
+  display: grid;
+  grid-template-columns: 1fr 20%;
+  grid-template-areas:
+  "areaA areaB";
+}
+
+.griditem {
+
+}
+
+#list {
+  grid-area: areaA;
+}
+
 .flexcontainer {
   display: flex;
   flex-wrap: wrap;
   align-content:space-around;
-  margin: auto 12px;
 }
 
 .item {
@@ -29,7 +43,8 @@ h1 {
   background-color: rgb(240, 240, 240);
 }
 
-#viewarea {
+#numarea {
+  grid-area: areaB;
   display: flex;
   justify-content: center;
   width: auto;
@@ -51,8 +66,3 @@ h1 {
   text-align: center;
   font-size: 128px;
 }
-
-/* @override */
-#modal {
-  width: 30%;
-}
diff --git a/assets/js/bingo.js b/assets/js/bingo.js
@@ -4,124 +4,140 @@ window.addEventListener("DOMContentLoaded", function() {
     e.returnValue = "本当にページ移動しますか？";
   }, false);
 
-  var is_modal_open = false;
+  // maxを設定（初期値は75）
+  let bingo_max_number;
+  let queries = getUrlQueries();
+  if(queries["max"] && queries["max"] > 0){
+    bingo_max_number = queries["max"];
+  } else {
+    bingo_max_number = 75;
+  }
 
   // 定数
-  const bingo_max_number = 75;
   const logo = document.getElementById("logo");
   const list = document.getElementById("list");
-  const viewarea = document.getElementById("viewarea");
+  const numarea = document.getElementById("numarea");
   const upperbit = document.getElementById("upperbit");
   const lowerbit = document.getElementById("lowerbit");
   const player = new Audio();
   player.src = "./assets/audio/drum_roll.mp3";
 
+  // 変数
+  let pre_elem, interval_id, num, is_started = false;
+
   // 初期化
   for(let i=0;i<bingo_max_number;i++){
+    // 数字表示用の領域を作成
     let div = document.createElement("div");
     div.id = "num_box_" + (i+1);
     div.className = "item";
     let str = (i+1) < 10 ? "0" + (i+1) : (i+1);
     div.innerText = str;
     list.appendChild(div);
   }
+  upperbit.textContent = "0";
+  lowerbit.textContent = "0";
 
-  // モーダル終了後イベントコールバック関数 onCloseEnd
-  // 引数を渡す術が分からないため、グローバル変数
-  var num, pre_elem;
-  let onCloseEnd = function(){
-    let elem = document.getElementById("num_box_" + num);
-    elem.style.backgroundColor = "#d9c816";
-    elem.style.color = "#f0f0f0";
-    pre_elem = elem;
-    is_modal_open = false;
-  };
-
-  // モーダル開始後イベントコールバック関数 onOpenEnd
-  var id;
-  let onOpenEnd = function(){
-    player.play();
-    is_modal_open = true;
-    let i=0;
-    let j=5;
-    let count = 0;
-    id = setInterval(function(){
-      if(count > 46){
-        clearInterval(id);
+  // keyevents
+  document.addEventListener("keydown", function(event) {
+    switch (event.key) {
+      case "Enter":
+      {
+        numarea.click();
+        break;
       }
-      upperbit.textContent = count < 46 ? parseInt(i++ % 10) : parseInt(num / 10);
-      lowerbit.textContent = count < 46 ? parseInt(j++ % 10) : parseInt(num % 10);
-      count++;
-    }, 100);
-  };
-
-  // 巻き機能
-  viewarea.addEventListener("click", function(){
-    player.pause();
-    player.currentTime = 0;
-    clearInterval(id);
-    upperbit.textContent = parseInt(num / 10);
-    lowerbit.textContent = parseInt(num % 10);
+      default:
+      {
+        break;
+      }
+    }
   }, false);
 
-  // モーダル初期化
-  let elems = document.querySelectorAll('.modal');
-  let options = {
-    "preventScrolling": true,
-    "onCloseEnd": onCloseEnd,
-    "onOpenEnd": onOpenEnd
-  };
-  let instances = M.Modal.init(elems, options);
-
   // 重複のないランダムな数列を用意
-  let array = getShuffledArray();
+  let array = getShuffledArray(null);
 
-  // logoのクリックによるイベント発火
-  logo.addEventListener("click", function() {
-    // write code
-    if(array.length >0){
-      // 直前の要素の色を変更
-      if(pre_elem){
-        pre_elem.style.backgroundColor = "#367fa3";
-        pre_elem.style.color = "#f0f0f0";
+  // numareaのクリックによるイベント発火
+  numarea.addEventListener("click", function() {
+    if(!is_started){
+      if(array.length > 0){
+        is_started = true;
+        // シャッフルする
+        reshuffled_array = getShuffledArray(array);
+        // 1つ取り出す
+        num = reshuffled_array.pop();
+        // 音楽を再生して数字を表示し色を変更
+        player.play();
+        let i=0, j=5;
+        let count = 0;
+        interval_id = setInterval(function(){
+          if(count > 46){
+            clearInterval(interval_id);
+            changeColor(num);
+          }
+          upperbit.textContent = count < 46 ? parseInt(i++ % 10) : parseInt(num / 10);
+          lowerbit.textContent = count < 46 ? parseInt(j++ % 10) : parseInt(num % 10);
+          count++;
+        }, 100);
       }
-      // 1つ取り出して色を変更
-      num = array.pop();
-      // モーダルを表示
-      var instance = M.Modal.getInstance(logo);
-      // モーダル終了後イベントコールバック関数を参照
-      // onCloseEnd
+    } else {
+      // 巻き機能
+      player.pause();
+      player.currentTime = 0;
+      clearInterval(interval_id);
+      upperbit.textContent = parseInt(num / 10);
+      lowerbit.textContent = parseInt(num % 10);
+      changeColor(num);
+      is_started = false;
     }
   }, false);
 
-  document.addEventListener("keydown", function(event) {
-    // write code
-    if(event.key == "Enter"){
-      if(is_modal_open){
-        viewarea.click();
-      }else{
-        logo.click();
-      }
+  function changeColor(num){
+    // 直前の要素の色を変更
+    if(pre_elem){
+      pre_elem.style.backgroundColor = "#367fa3";
+      pre_elem.style.color = "#f0f0f0";
     }
-  }, false);
+    // 現在の要素の色を変更
+    let elem = document.getElementById("num_box_" + num);
+    elem.style.backgroundColor = "#d9c816";
+    elem.style.color = "#f0f0f0";
+    pre_elem = elem;
+  }
 
-  function getShuffledArray(){
+  // 引数が配列でない場合は配列を作成し、Fisher–Yatesによるシャッフルを実施する
+  // 引数が配列の場合は再度Fisher–Yatesによるシャッフルを実施する
+  function getShuffledArray(target){
     // 1~bingo_max_numberまでの数列を用意
-    let array = new Array();
-    for(let i=0;i<bingo_max_number;i++){
-      array.push(i+1);
+    if(!Array.isArray(target)){
+      target = new Array();
+      for(let i=0;i<bingo_max_number;i++){
+        target.push(i+1);
+      }
     }
     // ミリ秒 回ループ（なんでもいいけどランダムな数）
     for(let j = 0;j<(new Date().getMilliseconds());j++){
       // Fisher–Yates
-      for(let i = array.length - 1; i > 0; i--){
+      for(let i = target.length - 1; i > 0; i--){
         let r = Math.floor(Math.random() * (i + 1));
-        let tmp = array[i];
-        array[i] = array[r];
-        array[r] = tmp;
+        let tmp = target[i];
+        target[i] = target[r];
+        target[r] = tmp;
       }
     }
-    return array;
+    return target;
+  }
+
+  // クエリ文字列を取得
+  function getUrlQueries() {
+    let ret = {};
+    const query_str = window.location.search.slice(1);
+    let queriy_array = query_str.split("&");
+    if(queriy_array.length == 0) return ret;
+    for(let query of queriy_array){
+      let keyval = query.split("=");
+      ret[keyval[0]] = keyval[1];
+    }
+    return ret;
   }
 
 }, false);
diff --git a/index.html b/index.html
@@ -19,32 +19,24 @@
   <meta name="theme-color" content="#ffffff">
   <!-- stylesheet -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   <link rel="stylesheet" href="./assets/css/bingo.css">
   <!-- javascript -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
   <script src="./assets/js/bingo.js"></script>
 </head>
 
-<body">
-<header></header>
-<article>
-  <h1 id="logo" data-target="modal" class="modal-trigger">BINGO GAME</h1>
-  <div id="list" class="flexcontainer"></div>
-  <!-- Modal Structure -->
-  <div id="modal" class="modal">
-    <div class="modal-content">
-      <div id="viewarea">
-        <div id="upperbit" class="odometer"></div>
-        <div id="lowerbit" class="odometer"></div>
+<body>
+  <header></header>
+  <article>
+    <h1 id="logo">BINGO GAME</h1>
+    <div id="gridcontainer">
+      <div id="list" class="flexcontainer griditem"></div>
+      <div id="numarea" class="griditem">
+        <div id="upperbit"></div>
+        <div id="lowerbit"></div>
       </div>
     </div>
-    <div class="modal-footer">
-      <a href="#!" class="modal-close waves-effect waves-green btn-flat">OK</a>
-    </div>
-  </div>
-</article>
-<footer></footer>
+  </article>
+  <footer></footer>
 </body>
 
 </html>