diff --git a/README.md b/README.md index ab1054f..1fa359f 100644 --- 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 index fc2b139..7830822 100644 --- 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%; -} \ No newline at end of file diff --git a/assets/js/bingo.js b/assets/js/bingo.js index 5fc5e0b..e7d5791 100644 --- a/assets/js/bingo.js +++ b/assets/js/bingo.js @@ -4,20 +4,30 @@ 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 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 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 index 8fcbdfe..f406434 100644 --- a/index.html +++ b/index.html @@ -19,32 +19,24 @@ - - - -
-
-

BINGO GAME

-
- -
-
+ +