diff --git a/index.html b/index.html index 806c045..be776cb 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,57 @@ - - - Tic Tac Toe - - - -
- -
- - + + + Tic Tac Toe + + + +
+ +
+
+

TIC TAC TOE

+
+
+
○
+
×
+
+
+ + + + + + + + + + + + + + + + + + +
+
+ +
+
starting...
+
+ RESTART +
+
+
+ + + + diff --git a/js/function.js b/js/function.js index e69de29..6ce1b60 100644 --- a/js/function.js +++ b/js/function.js @@ -0,0 +1,98 @@ +const itemsItem = document.querySelectorAll(".items-item"); +const board = document.querySelector(".l-board"); +const jsCell = document.querySelectorAll(".js-cell"); +const state = document.querySelector(".js-state"); +const jsReset = document.querySelector(".btn-restart"); +let done = false; +const winPatterns = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], +]; + +const cells = ["", "", "", "", "", "", "", "", ""]; + +const countFunc = (() => { + let count = 0; + + return { + inner: () => { + return count++; + }, + }; +})(); + +// イベントの登録 +jsCell.forEach(function (cell, index) { + cell.addEventListener("click", () => { + // セルの中身がある、もしくはdoneがtrueだったら処理せずそのまま + if (cells[index] || done) { + return; + } + // countFunc関数をcountへ代入 + const count = countFunc.inner(); + + // countの値の奇数判定 + const circleTurn = count % 2 === 0; + // 奇数だったら⚪︎そうでなければ× + const inputValue = circleTurn ? "○" : "×"; + + cell.innerHTML = inputValue; + + // 判定結果をinnerHTMLで出力 + cells[index] = inputValue; + + // itemsItemにtoggleTurn関数を実行 + toggleTurn(itemsItem); + + // cellsを引数にしたjudgeをjudgedに代入 + const judged = judge(cells); + + // judgedの結果で判定 + if (judged) { + message(inputValue); + done = true; + } else if (count === 8) { + // 揃わずに全てのセルが埋まったら メッセージをdrawに + state.innerHTML = "draw"; + } + }); +}); + +// 判定 +const judge = (judgeCell) => { + const judgeInner = winPatterns.some((line) => { + console.log(line); + const [first, second, third] = line; + if ( + judgeCell[first] && + judgeCell[first] === judgeCell[second] && + judgeCell[second] === judgeCell[third] + ) { + return true; + } + }); + return judgeInner; +}; + +// セルをクリックするごとにitemsのactiveを切り替える +const toggleTurn = (items) => { + for (let item of items) { + item.classList.toggle("is-active"); + } +}; + +// どちらかが揃ったら メッセージをwinに +const message = (mark) => { + state.innerHTML = `${mark} win`; +}; + +//リセットボタンでリロード +jsReset.addEventListener("click", () => { + location.reload(); +}); diff --git a/package.json b/package.json index f1fd985..c19b8ff 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ }, "homepage": "https://github.com/version-1/js-tic-tac-toe#readme", "devDependencies": { - "sass": "^1.57.1" + "sass": "^1.72.0" + }, + "dependencies": { + "destyle.css": "^4.0.1" } } diff --git a/stylesheets/index.css b/stylesheets/index.css new file mode 100644 index 0000000..736e5a6 --- /dev/null +++ b/stylesheets/index.css @@ -0,0 +1 @@ +*,*:before,*:after{box-sizing:border-box}html{background:#fff;font:100% "Lato","Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;font-size:15px;line-height:1.5}h1{font-size:1.2rem;text-align:center}.l-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.l-board{padding:16px}.l-footer{text-align:center}.items{width:100%;padding:8px 16px;display:flex;justify-content:flex-start;font-size:1.5rem;text-align:center}.items-item{width:100%;flex-grow:1;padding:8px}.items .is-active{border-bottom:4px solid #000}.table{background:#000;border:2px solid #fefefe;margin:0 auto}.table .cell{background:#fefefe;height:48px;width:48px;cursor:pointer;text-align:center;font-size:2rem}.state{padding:8px}.btn{display:inline-block;width:100%}.btn-restart{border:2px solid #000;border-radius:4px;font-weight:bold;cursor:pointer}.set{pointer-events:none}/*# sourceMappingURL=index.css.map */ diff --git a/stylesheets/index.css.map b/stylesheets/index.css.map new file mode 100644 index 0000000..820c0f5 --- /dev/null +++ b/stylesheets/index.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/base.sass","sass/variable.sass","sass/layout.sass","sass/modules.sass"],"names":[],"mappings":"AAAA,mBACI,sBCCJ,KACE,WCHiB,KDIjB,yEACA,eACA,gBAEF,GACE,iBACA,kBEVF,aACI,aACA,sBACA,mBACA,uBACA,aAEJ,SACI,aAEJ,UACI,kBCXJ,OACI,WACA,iBACA,aACA,2BACA,iBACA,kBACA,YACI,WACA,YACA,YACJ,kBACI,6BAER,OACI,gBACA,yBACA,cACA,aACI,mBACA,YACA,WACA,eACA,kBACA,eAER,OACI,YAEJ,KACI,qBACA,WACA,aACI,sBACA,kBACA,iBACA,eACR,KACI","file":"index.css"} \ No newline at end of file diff --git a/stylesheets/sass/base.sass b/stylesheets/sass/base.sass new file mode 100644 index 0000000..fb42b5d --- /dev/null +++ b/stylesheets/sass/base.sass @@ -0,0 +1,11 @@ +@use 'variable' as v + +html + background: v.$background-color + font: 100% v.$font-stack + font-size: 15px + line-height: 1.5 + +h1 + font-size: 1.2rem + text-align: center \ No newline at end of file diff --git a/stylesheets/sass/index.sass b/stylesheets/sass/index.sass index 41ac87a..7a256c5 100644 --- a/stylesheets/sass/index.sass +++ b/stylesheets/sass/index.sass @@ -1,4 +1,5 @@ +@use 'reset' @use 'variable' as v - -html - background: v.$background-color +@use 'base' as b +@use 'layout' as l +@use 'modules' as m \ No newline at end of file diff --git a/stylesheets/sass/layout.sass b/stylesheets/sass/layout.sass new file mode 100644 index 0000000..248ff2e --- /dev/null +++ b/stylesheets/sass/layout.sass @@ -0,0 +1,12 @@ +.l-container + display: flex + flex-direction: column + align-items: center + justify-content: center + height: 100vh + +.l-board + padding: 16px + +.l-footer + text-align: center \ No newline at end of file diff --git a/stylesheets/sass/modules.sass b/stylesheets/sass/modules.sass new file mode 100644 index 0000000..8d6f13d --- /dev/null +++ b/stylesheets/sass/modules.sass @@ -0,0 +1,39 @@ +.items + width: 100% + padding: 8px 16px + display: flex + justify-content: flex-start + font-size: 1.5rem + text-align: center + &-item + width: 100% + flex-grow: 1 + padding: 8px + .is-active + border-bottom: 4px solid black + +.table + background: #000 + border: 2px solid #fefefe + margin: 0 auto + .cell + background: #fefefe + height: 48px + width: 48px + cursor: pointer + text-align: center + font-size: 2rem + +.state + padding: 8px + +.btn + display: inline-block + width: 100% + &-restart + border: 2px solid #000 + border-radius: 4px + font-weight: bold + cursor: pointer +.set + pointer-events: none \ No newline at end of file diff --git a/stylesheets/sass/reset.sass b/stylesheets/sass/reset.sass new file mode 100644 index 0000000..39e284c --- /dev/null +++ b/stylesheets/sass/reset.sass @@ -0,0 +1,2 @@ +*, *:before, *:after + box-sizing: border-box \ No newline at end of file diff --git a/stylesheets/sass/variable.sass b/stylesheets/sass/variable.sass index f1864c4..81322fe 100644 --- a/stylesheets/sass/variable.sass +++ b/stylesheets/sass/variable.sass @@ -1 +1,2 @@ -$background-color: red +$background-color: white +$font-stack: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index e5751ca..27d713d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4,7 +4,7 @@ anymatch@~3.1.2: version "3.1.3" - resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e" + resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz" integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw== dependencies: normalize-path "^3.0.0" @@ -12,19 +12,19 @@ anymatch@~3.1.2: binary-extensions@^2.0.0: version "2.2.0" - resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d" + resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz" integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA== braces@~3.0.2: version "3.0.2" - resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107" + resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz" integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A== dependencies: fill-range "^7.0.1" "chokidar@>=3.0.0 <4.0.0": version "3.5.3" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" + resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== dependencies: anymatch "~3.1.2" @@ -37,75 +37,80 @@ braces@~3.0.2: optionalDependencies: fsevents "~2.3.2" +destyle.css@^4.0.1: + version "4.0.1" + resolved "https://registry.npmjs.org/destyle.css/-/destyle.css-4.0.1.tgz" + integrity sha512-G9iyW0JfRkgdxhbWQeuLdO1KZ40nzKssHtArbSFvaU/w44G0cZ5v3u4bHY829INSu480J/fxae+lTm225mN3Vw== + fill-range@^7.0.1: version "7.0.1" - resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" + resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz" integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ== dependencies: to-regex-range "^5.0.1" fsevents@~2.3.2: version "2.3.2" - resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== glob-parent@~5.1.2: version "5.1.2" - resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" + resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== dependencies: is-glob "^4.0.1" immutable@^4.0.0: version "4.2.2" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.2.tgz#2da9ff4384a4330c36d4d1bc88e90f9e0b0ccd16" + resolved "https://registry.npmjs.org/immutable/-/immutable-4.2.2.tgz" integrity sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og== is-binary-path@~2.1.0: version "2.1.0" - resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz" integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== dependencies: binary-extensions "^2.0.0" is-extglob@^2.1.1: version "2.1.1" - resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2" + resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz" integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ== is-glob@^4.0.1, is-glob@~4.0.1: version "4.0.3" - resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" + resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz" integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== dependencies: is-extglob "^2.1.1" is-number@^7.0.0: version "7.0.0" - resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" + resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz" integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" - resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" + resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz" integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== picomatch@^2.0.4, picomatch@^2.2.1: version "2.3.1" - resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" + resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== readdirp@~3.6.0: version "3.6.0" - resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz" integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== dependencies: picomatch "^2.2.1" -sass@^1.57.1: - version "1.57.1" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.57.1.tgz#dfafd46eb3ab94817145e8825208ecf7281119b5" - integrity sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw== +sass@^1.72.0: + version "1.72.0" + resolved "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz" + integrity sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA== dependencies: chokidar ">=3.0.0 <4.0.0" immutable "^4.0.0" @@ -113,12 +118,12 @@ sass@^1.57.1: "source-map-js@>=0.6.2 <2.0.0": version "1.0.2" - resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" + resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== to-regex-range@^5.0.1: version "5.0.1" - resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4" + resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz" integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ== dependencies: is-number "^7.0.0"