From b37a5dca926c1892654b5259452408255cc811bf Mon Sep 17 00:00:00 2001 From: yko-git Date: Wed, 20 Mar 2024 07:15:48 +0900 Subject: [PATCH 01/21] =?UTF-8?q?add=20base=E3=82=92=E3=82=B3=E3=83=BC?= =?UTF-8?q?=E3=83=87=E3=82=A3=E3=83=B3=E3=82=B0=E4=B8=AD(feature-base)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 36 ++++++++++++++++++-------- package.json | 5 +++- stylesheets/index.css | 1 + stylesheets/index.css.map | 1 + stylesheets/sass/base.sass | 9 +++++++ stylesheets/sass/index.sass | 7 ++--- stylesheets/sass/layout.sass | 8 ++++++ stylesheets/sass/modules.sass | 2 ++ stylesheets/sass/reset.sass | 6 +++++ stylesheets/sass/variable.sass | 3 ++- yarn.lock | 47 +++++++++++++++++++--------------- 11 files changed, 88 insertions(+), 37 deletions(-) create mode 100644 stylesheets/index.css create mode 100644 stylesheets/index.css.map create mode 100644 stylesheets/sass/base.sass create mode 100644 stylesheets/sass/layout.sass create mode 100644 stylesheets/sass/modules.sass create mode 100644 stylesheets/sass/reset.sass diff --git a/index.html b/index.html index 806c045..6bbddeb 100644 --- a/index.html +++ b/index.html @@ -1,14 +1,28 @@ - - - Tic Tac Toe - - - -
- -
- - + + + Tic Tac Toe + + + +
+ +
+
+

TIC TAC TOE

+
+
    +
  • ○
    • +
  • ×
    • +
+
+
+ + 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..4f4b2a5 --- /dev/null +++ b/stylesheets/index.css @@ -0,0 +1 @@ +menu,ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}html{background:#fff;font:100% "Lato","Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif}h1{font-size:1.2rem}.l-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.items{display:flex}/*# sourceMappingURL=index.css.map */ diff --git a/stylesheets/index.css.map b/stylesheets/index.css.map new file mode 100644 index 0000000..7fb9a0b --- /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,WACE,gBAEF,MACE,yBACA,iBCHF,KACE,WCHiB,KDIjB,yEAEF,GACE,iBEPF,aACI,aACA,sBACA,mBACA,uBACA,aCLJ,OACI","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..dcae38c --- /dev/null +++ b/stylesheets/sass/base.sass @@ -0,0 +1,9 @@ +@use 'variable' as v + +html + background: v.$background-color + font: 100% v.$font-stack + +h1 + font-size: 1.2rem + text-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..f1402da --- /dev/null +++ b/stylesheets/sass/layout.sass @@ -0,0 +1,8 @@ +.l-container + display: flex + flex-direction: column + align-items: center + justify-content: center + height: 100vh + +.l-main \ No newline at end of file diff --git a/stylesheets/sass/modules.sass b/stylesheets/sass/modules.sass new file mode 100644 index 0000000..47aeddc --- /dev/null +++ b/stylesheets/sass/modules.sass @@ -0,0 +1,2 @@ +.items + display: flex \ No newline at end of file diff --git a/stylesheets/sass/reset.sass b/stylesheets/sass/reset.sass new file mode 100644 index 0000000..97cc796 --- /dev/null +++ b/stylesheets/sass/reset.sass @@ -0,0 +1,6 @@ +menu, ol, ul + list-style: none + +table + border-collapse: collapse + border-spacing: 0 \ 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" From cd6cb91cc8b0318f5223514b55cfdaaed765617e Mon Sep 17 00:00:00 2001 From: yko-git Date: Wed, 20 Mar 2024 12:47:08 +0900 Subject: [PATCH 02/21] =?UTF-8?q?fix=20=E3=83=99=E3=83=BC=E3=82=B9?= =?UTF-8?q?=E3=81=AE=E5=AE=9F=E8=A3=85=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 37 +++++++++++++++++++++++++++++++---- stylesheets/index.css | 2 +- stylesheets/index.css.map | 2 +- stylesheets/sass/base.sass | 3 ++- stylesheets/sass/layout.sass | 6 +++++- stylesheets/sass/modules.sass | 37 ++++++++++++++++++++++++++++++++++- stylesheets/sass/reset.sass | 8 ++------ 7 files changed, 80 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 6bbddeb..df97809 100644 --- a/index.html +++ b/index.html @@ -17,10 +17,39 @@

TIC TAC TOE

- +
+
○
+
×
+
+
+ + + + + + + + + + + + + + + + + + +
+
+ +
+
starting...
+
+ RESTART +
+
+ diff --git a/stylesheets/index.css b/stylesheets/index.css index 4f4b2a5..9b59da1 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -1 +1 @@ -menu,ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}html{background:#fff;font:100% "Lato","Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif}h1{font-size:1.2rem}.l-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.items{display:flex}/*# sourceMappingURL=index.css.map */ +*,*:before,*:after{box-sizing:border-box}html{background:#fff;font:100% "Lato","Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;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}/*# sourceMappingURL=index.css.map */ diff --git a/stylesheets/index.css.map b/stylesheets/index.css.map index 7fb9a0b..8b6a436 100644 --- a/stylesheets/index.css.map +++ b/stylesheets/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["sass/reset.sass","sass/base.sass","sass/variable.sass","sass/layout.sass","sass/modules.sass"],"names":[],"mappings":"AAAA,WACE,gBAEF,MACE,yBACA,iBCHF,KACE,WCHiB,KDIjB,yEAEF,GACE,iBEPF,aACI,aACA,sBACA,mBACA,uBACA,aCLJ,OACI","file":"index.css"} \ No newline at end of file +{"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,gBAEF,GACE,iBACA,kBETF,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","file":"index.css"} \ No newline at end of file diff --git a/stylesheets/sass/base.sass b/stylesheets/sass/base.sass index dcae38c..2c55823 100644 --- a/stylesheets/sass/base.sass +++ b/stylesheets/sass/base.sass @@ -3,7 +3,8 @@ html background: v.$background-color font: 100% v.$font-stack + line-height: 1.5 h1 font-size: 1.2rem - text-center \ No newline at end of file + text-align: center \ No newline at end of file diff --git a/stylesheets/sass/layout.sass b/stylesheets/sass/layout.sass index f1402da..248ff2e 100644 --- a/stylesheets/sass/layout.sass +++ b/stylesheets/sass/layout.sass @@ -5,4 +5,8 @@ justify-content: center height: 100vh -.l-main \ No newline at end of file +.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 index 47aeddc..543fd83 100644 --- a/stylesheets/sass/modules.sass +++ b/stylesheets/sass/modules.sass @@ -1,2 +1,37 @@ .items - display: flex \ No newline at end of file + 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 diff --git a/stylesheets/sass/reset.sass b/stylesheets/sass/reset.sass index 97cc796..39e284c 100644 --- a/stylesheets/sass/reset.sass +++ b/stylesheets/sass/reset.sass @@ -1,6 +1,2 @@ -menu, ol, ul - list-style: none - -table - border-collapse: collapse - border-spacing: 0 \ No newline at end of file +*, *:before, *:after + box-sizing: border-box \ No newline at end of file From 1e2527a8d5d11821b1904dc7eef43cf91d81e259 Mon Sep 17 00:00:00 2001 From: yko-git Date: Wed, 20 Mar 2024 16:44:27 +0900 Subject: [PATCH 03/21] add function.js --- index.html | 22 +++++++++++----------- js/function.js | 18 ++++++++++++++++++ 2 files changed, 29 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index df97809..0dc475e 100644 --- a/index.html +++ b/index.html @@ -18,26 +18,26 @@

TIC TAC TOE

-
○
-
×
+
○
+
×
- - - + + + - - - + + + - - - + + +
diff --git a/js/function.js b/js/function.js index e69de29..0fa3219 100644 --- a/js/function.js +++ b/js/function.js @@ -0,0 +1,18 @@ +const itemsItem = document.querySelectorAll(".items-item"); +const jsCell = document.querySelectorAll(".js-cell"); + +itemsItem.forEach((target) => { + for (let i = 0; i < jsCell.length; i++) { + jsCell[i].addEventListener("click", () => { + target.classList.toggle("is-active"); + + if (target.classList.contains("is-active")) { + jsCell[i].innerHTML = target.innerHTML; + } + }); + } +}); + +// jsCell.addEventListener("click", () => { +// console.log("click"); +// }); From 858156127d934f81d86f47031d50cf748a10481c Mon Sep 17 00:00:00 2001 From: yko-git Date: Wed, 20 Mar 2024 18:35:08 +0900 Subject: [PATCH 04/21] =?UTF-8?q?fix=20function.js=20(items=E3=81=ABdata-s?= =?UTF-8?q?et=E8=BF=BD=E5=8A=A0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 6 +++--- js/function.js | 18 +++++++++++------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 0dc475e..3dbcaf3 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,8 @@

TIC TAC TOE

-
○
-
×
+
○
+
×
@@ -46,7 +46,7 @@

TIC TAC TOE

starting...
diff --git a/js/function.js b/js/function.js index 0fa3219..0f75bc2 100644 --- a/js/function.js +++ b/js/function.js @@ -1,18 +1,22 @@ const itemsItem = document.querySelectorAll(".items-item"); const jsCell = document.querySelectorAll(".js-cell"); +const jsReset = document.querySelector(".btn-restart"); itemsItem.forEach((target) => { - for (let i = 0; i < jsCell.length; i++) { - jsCell[i].addEventListener("click", () => { + jsCell.forEach((cellTarget) => { + // if (cellTarget.children.length === 0) { + // console.log(cellTarget); + // } + cellTarget.addEventListener("click", () => { target.classList.toggle("is-active"); if (target.classList.contains("is-active")) { - jsCell[i].innerHTML = target.innerHTML; + cellTarget.innerHTML = target.dataset.set; } }); - } + }); }); -// jsCell.addEventListener("click", () => { -// console.log("click"); -// }); +jsReset.addEventListener("click", () => { + location.reload(); +}); From a0ce28712af142c16849237db47a9b81e234e64a Mon Sep 17 00:00:00 2001 From: yko-git Date: Thu, 21 Mar 2024 05:47:58 +0900 Subject: [PATCH 05/21] =?UTF-8?q?fix=20function.js=20(pointer-events?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 5 ++--- stylesheets/index.css | 2 +- stylesheets/index.css.map | 2 +- stylesheets/sass/base.sass | 1 + stylesheets/sass/modules.sass | 2 ++ 5 files changed, 7 insertions(+), 5 deletions(-) diff --git a/js/function.js b/js/function.js index 0f75bc2..18d1f62 100644 --- a/js/function.js +++ b/js/function.js @@ -4,11 +4,9 @@ const jsReset = document.querySelector(".btn-restart"); itemsItem.forEach((target) => { jsCell.forEach((cellTarget) => { - // if (cellTarget.children.length === 0) { - // console.log(cellTarget); - // } cellTarget.addEventListener("click", () => { target.classList.toggle("is-active"); + cellTarget.classList.add("set"); if (target.classList.contains("is-active")) { cellTarget.innerHTML = target.dataset.set; @@ -17,6 +15,7 @@ itemsItem.forEach((target) => { }); }); +// resetボタン処理 jsReset.addEventListener("click", () => { location.reload(); }); diff --git a/stylesheets/index.css b/stylesheets/index.css index 9b59da1..ef56208 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -1 +1 @@ -*,*:before,*:after{box-sizing:border-box}html{background:#fff;font:100% "Lato","Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;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}/*# sourceMappingURL=index.css.map */ +*,*: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}.table .set{pointer-events:none}.state{padding:8px}.btn{display:inline-block;width:100%}.btn-restart{border:2px solid #000;border-radius:4px;font-weight:bold;cursor:pointer}/*# sourceMappingURL=index.css.map */ diff --git a/stylesheets/index.css.map b/stylesheets/index.css.map index 8b6a436..e3271b3 100644 --- a/stylesheets/index.css.map +++ b/stylesheets/index.css.map @@ -1 +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,gBAEF,GACE,iBACA,kBETF,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","file":"index.css"} \ No newline at end of file +{"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,eACJ,YACI,oBAER,OACI,YAEJ,KACI,qBACA,WACA,aACI,sBACA,kBACA,iBACA","file":"index.css"} \ No newline at end of file diff --git a/stylesheets/sass/base.sass b/stylesheets/sass/base.sass index 2c55823..fb42b5d 100644 --- a/stylesheets/sass/base.sass +++ b/stylesheets/sass/base.sass @@ -3,6 +3,7 @@ html background: v.$background-color font: 100% v.$font-stack + font-size: 15px line-height: 1.5 h1 diff --git a/stylesheets/sass/modules.sass b/stylesheets/sass/modules.sass index 543fd83..3e0b93e 100644 --- a/stylesheets/sass/modules.sass +++ b/stylesheets/sass/modules.sass @@ -23,6 +23,8 @@ cursor: pointer text-align: center font-size: 2rem + .set + pointer-events: none .state padding: 8px From 3803f7bc37b2060653fc4b859470f15a68367f06 Mon Sep 17 00:00:00 2001 From: yko-git Date: Fri, 22 Mar 2024 05:52:43 +0900 Subject: [PATCH 06/21] =?UTF-8?q?fix=20function.js=20(=E5=87=A6=E7=90=86?= =?UTF-8?q?=E3=82=92=E5=88=86=E3=81=91=E3=81=9F=E6=9B=B8=E3=81=8D=E6=96=B9?= =?UTF-8?q?=E3=81=AB=E7=9B=B4=E3=81=97=E4=B8=AD)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 41 ++++++++++++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 11 deletions(-) diff --git a/js/function.js b/js/function.js index 18d1f62..6e86563 100644 --- a/js/function.js +++ b/js/function.js @@ -2,18 +2,37 @@ const itemsItem = document.querySelectorAll(".items-item"); const jsCell = document.querySelectorAll(".js-cell"); const jsReset = document.querySelector(".btn-restart"); -itemsItem.forEach((target) => { - jsCell.forEach((cellTarget) => { - cellTarget.addEventListener("click", () => { - target.classList.toggle("is-active"); - cellTarget.classList.add("set"); +for (let cell of jsCell) { + cell.addEventListener("click", clickFunc); +} - if (target.classList.contains("is-active")) { - cellTarget.innerHTML = target.dataset.set; - } - }); - }); -}); +function clickFunc() { + this.style.pointerEvents = "none"; + + for (let target of itemsItem) { + if (target.classList.contains("is-active")) { + this.innerHTML = target.dataset.set; + } + target.classList.toggle("is-active"); + } +} + +// function setClass() { +// this.classList.add("set"); +// } + +// itemsItem.forEach((target) => { +// jsCell.forEach((cellTarget) => { +// cellTarget.addEventListener("click", () => { +// target.classList.toggle("is-active"); +// cellTarget.classList.add("set"); + +// if (target.classList.contains("is-active")) { +// cellTarget.innerHTML = target.dataset.set; +// } +// }); +// }); +// }); // resetボタン処理 jsReset.addEventListener("click", () => { From e7405a491d6fd5f46d9e645fd783b156f355ce39 Mon Sep 17 00:00:00 2001 From: yko-git Date: Fri, 22 Mar 2024 06:15:59 +0900 Subject: [PATCH 07/21] =?UTF-8?q?fix=20function.js=20(click=E5=BE=8C?= =?UTF-8?q?=E3=81=AE=E5=80=A4=E3=82=92=E5=8F=96=E5=BE=97=E3=81=99=E3=82=8B?= =?UTF-8?q?=E6=A4=9C=E8=A8=BC)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/js/function.js b/js/function.js index 6e86563..dc66bbe 100644 --- a/js/function.js +++ b/js/function.js @@ -8,10 +8,13 @@ for (let cell of jsCell) { function clickFunc() { this.style.pointerEvents = "none"; - for (let target of itemsItem) { if (target.classList.contains("is-active")) { - this.innerHTML = target.dataset.set; + this.innerHTML = target.innerHTML; + console.log(this.innerHTML); + // if (this.dataset === 1) { + // console.log(this.innerHTML); + // } } target.classList.toggle("is-active"); } From 61bb46c39104cf8c414956e52716dced7da3fa1e Mon Sep 17 00:00:00 2001 From: yko-git Date: Sat, 23 Mar 2024 12:39:06 +0900 Subject: [PATCH 08/21] =?UTF-8?q?fix=20function.js=20(function.js=E6=A4=9C?= =?UTF-8?q?=E8=A8=BC=E4=B8=AD)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 6 +-- js/function.js | 74 +++++++++++++++++++++-------------- stylesheets/index.css | 2 +- stylesheets/index.css.map | 2 +- stylesheets/sass/layout.sass | 2 + stylesheets/sass/modules.sass | 2 - 6 files changed, 52 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 3dbcaf3..be776cb 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,8 @@

TIC TAC TOE

-
○
-
×
+
○
+
×
@@ -44,7 +44,7 @@

TIC TAC TOE

-
starting...
+
starting...
diff --git a/js/function.js b/js/function.js index dc66bbe..08bdda3 100644 --- a/js/function.js +++ b/js/function.js @@ -1,43 +1,59 @@ const itemsItem = document.querySelectorAll(".items-item"); const jsCell = document.querySelectorAll(".js-cell"); +const Board = document.querySelector(".l-board"); const jsReset = document.querySelector(".btn-restart"); +const state = document.querySelector(".js-state"); +let clickCount = 0; -for (let cell of jsCell) { - cell.addEventListener("click", clickFunc); -} +// セルをクリックするごとにitemsのactiveを切り替える -function clickFunc() { - this.style.pointerEvents = "none"; - for (let target of itemsItem) { - if (target.classList.contains("is-active")) { - this.innerHTML = target.innerHTML; - console.log(this.innerHTML); - // if (this.dataset === 1) { - // console.log(this.innerHTML); - // } +for (let i = 0; i < jsCell.length; i++) { + jsCell[i].addEventListener("click", (e) => { + if (jsCell[i].childNodes.length >= 1) { + return; } - target.classList.toggle("is-active"); - } + addChild(jsCell[i]); + for (let item of itemsItem) { + addClass(item); + } + + // console.log(jsCell[i].innerHTML); + if ( + jsCell[0].innerHTML === "⚪︎" && + jsCell[1].innerHTML === "⚪︎" && + jsCell[2].innerHTML === "⚪︎" + ) { + state.innerHTML = "win!"; + Board.classList.add("set"); + } else if ( + jsCell[0].innerHTML === "⚪︎" && + jsCell[3].innerHTML === "⚪︎" && + jsCell[6].innerHTML === "⚪︎" + ) { + state.innerHTML = "win!"; + Board.classList.add("set"); + } + }); } -// function setClass() { -// this.classList.add("set"); -// } +const addClass = (classItem) => { + classItem.classList.toggle("is-active"); +}; -// itemsItem.forEach((target) => { -// jsCell.forEach((cellTarget) => { -// cellTarget.addEventListener("click", () => { -// target.classList.toggle("is-active"); -// cellTarget.classList.add("set"); +// セルをクリックすると⚪︎とバツが交互に出力される +const addChild = (targetChild) => { + clickCount++; + if (clickCount % 2 === 0) { + targetChild.innerHTML = "×"; + } else { + targetChild.innerHTML = "⚪︎"; + } +}; -// if (target.classList.contains("is-active")) { -// cellTarget.innerHTML = target.dataset.set; -// } -// }); -// }); -// }); +// どちらかが揃ったら メッセージをwinに +// 揃わずに全てのセルが埋まったら メッセージをdrawに -// resetボタン処理 +//リセットボタンでリロード jsReset.addEventListener("click", () => { location.reload(); }); diff --git a/stylesheets/index.css b/stylesheets/index.css index ef56208..f6940cb 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -1 +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}.table .set{pointer-events:none}.state{padding:8px}.btn{display:inline-block;width:100%}.btn-restart{border:2px solid #000;border-radius:4px;font-weight:bold;cursor:pointer}/*# sourceMappingURL=index.css.map */ +*,*: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-board.set{pointer-events:none}.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}/*# sourceMappingURL=index.css.map */ diff --git a/stylesheets/index.css.map b/stylesheets/index.css.map index e3271b3..bf587cb 100644 --- a/stylesheets/index.css.map +++ b/stylesheets/index.css.map @@ -1 +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,eACJ,YACI,oBAER,OACI,YAEJ,KACI,qBACA,WACA,aACI,sBACA,kBACA,iBACA","file":"index.css"} \ No newline at end of file +{"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,aACA,aACI,oBAER,UACI,kBCbJ,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","file":"index.css"} \ No newline at end of file diff --git a/stylesheets/sass/layout.sass b/stylesheets/sass/layout.sass index 248ff2e..7f80cc4 100644 --- a/stylesheets/sass/layout.sass +++ b/stylesheets/sass/layout.sass @@ -7,6 +7,8 @@ .l-board padding: 16px + &.set + pointer-events: none .l-footer text-align: center \ No newline at end of file diff --git a/stylesheets/sass/modules.sass b/stylesheets/sass/modules.sass index 3e0b93e..543fd83 100644 --- a/stylesheets/sass/modules.sass +++ b/stylesheets/sass/modules.sass @@ -23,8 +23,6 @@ cursor: pointer text-align: center font-size: 2rem - .set - pointer-events: none .state padding: 8px From 01841a91a72b7d8ed58ea927cbe140b78ef73b60 Mon Sep 17 00:00:00 2001 From: yko-git Date: Sat, 23 Mar 2024 17:55:15 +0900 Subject: [PATCH 09/21] fix function.js --- js/function.js | 54 ++++++++++++++++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 19 deletions(-) diff --git a/js/function.js b/js/function.js index 08bdda3..2d2cb38 100644 --- a/js/function.js +++ b/js/function.js @@ -3,12 +3,20 @@ const jsCell = document.querySelectorAll(".js-cell"); const Board = document.querySelector(".l-board"); const jsReset = document.querySelector(".btn-restart"); const state = document.querySelector(".js-state"); +const win = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], +]; let clickCount = 0; -// セルをクリックするごとにitemsのactiveを切り替える - for (let i = 0; i < jsCell.length; i++) { - jsCell[i].addEventListener("click", (e) => { + jsCell[i].addEventListener("click", () => { if (jsCell[i].childNodes.length >= 1) { return; } @@ -17,25 +25,30 @@ for (let i = 0; i < jsCell.length; i++) { addClass(item); } - // console.log(jsCell[i].innerHTML); - if ( - jsCell[0].innerHTML === "⚪︎" && - jsCell[1].innerHTML === "⚪︎" && - jsCell[2].innerHTML === "⚪︎" - ) { - state.innerHTML = "win!"; - Board.classList.add("set"); - } else if ( - jsCell[0].innerHTML === "⚪︎" && - jsCell[3].innerHTML === "⚪︎" && - jsCell[6].innerHTML === "⚪︎" - ) { - state.innerHTML = "win!"; - Board.classList.add("set"); + for (let j = 0; j < win.length; j++) { + if ( + jsCell[win[j][0]].innerHTML === "⚪︎" && + jsCell[win[j][1]].innerHTML === "⚪︎" && + jsCell[win[j][2]].innerHTML === "⚪︎" + ) { + message(); + } else if ( + jsCell[win[j][0]].innerHTML === "×" && + jsCell[win[j][1]].innerHTML === "×" && + jsCell[win[j][2]].innerHTML === "×" + ) { + message(); + } + } + + // 揃わずに全てのセルが埋まったら メッセージをdrawに + if (clickCount >= 9) { + state.innerHTML = "draw"; } }); } +// セルをクリックするごとにitemsのactiveを切り替える const addClass = (classItem) => { classItem.classList.toggle("is-active"); }; @@ -51,7 +64,10 @@ const addChild = (targetChild) => { }; // どちらかが揃ったら メッセージをwinに -// 揃わずに全てのセルが埋まったら メッセージをdrawに +const message = () => { + state.innerHTML = "win!"; + Board.classList.add("set"); +}; //リセットボタンでリロード jsReset.addEventListener("click", () => { From d0ec25eabb57d83e7db97dbabbd587a8f31ce4b4 Mon Sep 17 00:00:00 2001 From: yko-git Date: Sat, 23 Mar 2024 17:59:25 +0900 Subject: [PATCH 10/21] fix function.js --- js/function.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/function.js b/js/function.js index 2d2cb38..a4265c6 100644 --- a/js/function.js +++ b/js/function.js @@ -31,13 +31,13 @@ for (let i = 0; i < jsCell.length; i++) { jsCell[win[j][1]].innerHTML === "⚪︎" && jsCell[win[j][2]].innerHTML === "⚪︎" ) { - message(); + message("⚪︎"); } else if ( jsCell[win[j][0]].innerHTML === "×" && jsCell[win[j][1]].innerHTML === "×" && jsCell[win[j][2]].innerHTML === "×" ) { - message(); + message("×"); } } @@ -64,8 +64,8 @@ const addChild = (targetChild) => { }; // どちらかが揃ったら メッセージをwinに -const message = () => { - state.innerHTML = "win!"; +const message = (mark) => { + state.innerHTML = `${mark} win`; Board.classList.add("set"); }; From feb0a519a3e81b212f0d283f0f14b75a10cf3f14 Mon Sep 17 00:00:00 2001 From: yko-git Date: Sat, 23 Mar 2024 18:04:49 +0900 Subject: [PATCH 11/21] =?UTF-8?q?fix=20function.js=20(=E2=97=8B=E3=82=92?= =?UTF-8?q?=E5=A4=89=E6=9B=B4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/function.js b/js/function.js index a4265c6..5cb7043 100644 --- a/js/function.js +++ b/js/function.js @@ -27,11 +27,11 @@ for (let i = 0; i < jsCell.length; i++) { for (let j = 0; j < win.length; j++) { if ( - jsCell[win[j][0]].innerHTML === "⚪︎" && - jsCell[win[j][1]].innerHTML === "⚪︎" && - jsCell[win[j][2]].innerHTML === "⚪︎" + jsCell[win[j][0]].innerHTML === "○" && + jsCell[win[j][1]].innerHTML === "○" && + jsCell[win[j][2]].innerHTML === "○" ) { - message("⚪︎"); + message("○"); } else if ( jsCell[win[j][0]].innerHTML === "×" && jsCell[win[j][1]].innerHTML === "×" && @@ -53,13 +53,13 @@ const addClass = (classItem) => { classItem.classList.toggle("is-active"); }; -// セルをクリックすると⚪︎とバツが交互に出力される +// セルをクリックすると○とバツが交互に出力される const addChild = (targetChild) => { clickCount++; if (clickCount % 2 === 0) { targetChild.innerHTML = "×"; } else { - targetChild.innerHTML = "⚪︎"; + targetChild.innerHTML = "○"; } }; From 3ee17cee657489c1d155e3e269d895af2b825f55 Mon Sep 17 00:00:00 2001 From: yko-git Date: Sun, 24 Mar 2024 05:53:06 +0900 Subject: [PATCH 12/21] =?UTF-8?q?fix=20function.js=20(draw=E5=88=A4?= =?UTF-8?q?=E5=AE=9A=E4=BF=AE=E6=AD=A3)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 58 +++++++++++++++++++++++++++----------------------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/js/function.js b/js/function.js index 5cb7043..cebaa1f 100644 --- a/js/function.js +++ b/js/function.js @@ -13,49 +13,53 @@ const win = [ [0, 4, 8], [2, 4, 6], ]; + let clickCount = 0; for (let i = 0; i < jsCell.length; i++) { jsCell[i].addEventListener("click", () => { - if (jsCell[i].childNodes.length >= 1) { - return; - } addChild(jsCell[i]); - for (let item of itemsItem) { - addClass(item); - } - for (let j = 0; j < win.length; j++) { - if ( - jsCell[win[j][0]].innerHTML === "○" && - jsCell[win[j][1]].innerHTML === "○" && - jsCell[win[j][2]].innerHTML === "○" - ) { - message("○"); - } else if ( - jsCell[win[j][0]].innerHTML === "×" && - jsCell[win[j][1]].innerHTML === "×" && - jsCell[win[j][2]].innerHTML === "×" - ) { - message("×"); - } - } + addClass(); - // 揃わずに全てのセルが埋まったら メッセージをdrawに - if (clickCount >= 9) { - state.innerHTML = "draw"; - } + judge(); }); } +// 判定 +const judge = () => { + for (let j = 0; j < win.length; j++) { + if ( + jsCell[win[j][0]].innerHTML === "○" && + jsCell[win[j][1]].innerHTML === "○" && + jsCell[win[j][2]].innerHTML === "○" + ) { + return message("○"); + } else if ( + jsCell[win[j][0]].innerHTML === "×" && + jsCell[win[j][1]].innerHTML === "×" && + jsCell[win[j][2]].innerHTML === "×" + ) { + return message("×"); + } + } + // 揃わずに全てのセルが埋まったら メッセージをdrawに + if (clickCount === 9) { + state.innerHTML = "draw"; + } +}; + // セルをクリックするごとにitemsのactiveを切り替える -const addClass = (classItem) => { - classItem.classList.toggle("is-active"); +const addClass = () => { + for (let item of itemsItem) { + item.classList.toggle("is-active"); + } }; // セルをクリックすると○とバツが交互に出力される const addChild = (targetChild) => { clickCount++; + if (clickCount % 2 === 0) { targetChild.innerHTML = "×"; } else { From 73d4a87102350c3ade2dfe68c590950b6dabe418 Mon Sep 17 00:00:00 2001 From: yko-git Date: Sun, 24 Mar 2024 12:28:44 +0900 Subject: [PATCH 13/21] =?UTF-8?q?fix=20function.js=20(set=E3=82=AF?= =?UTF-8?q?=E3=83=A9=E3=82=B9=E8=BF=BD=E5=8A=A0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 28 +++++++++++++++------------- stylesheets/index.css | 2 +- stylesheets/index.css.map | 2 +- stylesheets/sass/layout.sass | 2 -- stylesheets/sass/modules.sass | 2 ++ 5 files changed, 19 insertions(+), 17 deletions(-) diff --git a/js/function.js b/js/function.js index cebaa1f..8971010 100644 --- a/js/function.js +++ b/js/function.js @@ -1,8 +1,8 @@ const itemsItem = document.querySelectorAll(".items-item"); +const board = document.querySelector(".l-board"); const jsCell = document.querySelectorAll(".js-cell"); -const Board = document.querySelector(".l-board"); -const jsReset = document.querySelector(".btn-restart"); const state = document.querySelector(".js-state"); +const jsReset = document.querySelector(".btn-restart"); const win = [ [0, 1, 2], [3, 4, 5], @@ -16,9 +16,9 @@ const win = [ let clickCount = 0; -for (let i = 0; i < jsCell.length; i++) { - jsCell[i].addEventListener("click", () => { - addChild(jsCell[i]); +for (let cell of jsCell) { + cell.addEventListener("click", () => { + addChild(cell); addClass(); @@ -28,17 +28,17 @@ for (let i = 0; i < jsCell.length; i++) { // 判定 const judge = () => { - for (let j = 0; j < win.length; j++) { + for (let i = 0; i < win.length; i++) { if ( - jsCell[win[j][0]].innerHTML === "○" && - jsCell[win[j][1]].innerHTML === "○" && - jsCell[win[j][2]].innerHTML === "○" + jsCell[win[i][0]].innerHTML === "○" && + jsCell[win[i][1]].innerHTML === "○" && + jsCell[win[i][2]].innerHTML === "○" ) { return message("○"); } else if ( - jsCell[win[j][0]].innerHTML === "×" && - jsCell[win[j][1]].innerHTML === "×" && - jsCell[win[j][2]].innerHTML === "×" + jsCell[win[i][0]].innerHTML === "×" && + jsCell[win[i][1]].innerHTML === "×" && + jsCell[win[i][2]].innerHTML === "×" ) { return message("×"); } @@ -62,15 +62,17 @@ const addChild = (targetChild) => { if (clickCount % 2 === 0) { targetChild.innerHTML = "×"; + targetChild.classList.add("set"); } else { targetChild.innerHTML = "○"; + targetChild.classList.add("set"); } }; // どちらかが揃ったら メッセージをwinに const message = (mark) => { state.innerHTML = `${mark} win`; - Board.classList.add("set"); + board.classList.add("set"); }; //リセットボタンでリロード diff --git a/stylesheets/index.css b/stylesheets/index.css index f6940cb..736e5a6 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -1 +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-board.set{pointer-events:none}.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}/*# sourceMappingURL=index.css.map */ +*,*: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 index bf587cb..820c0f5 100644 --- a/stylesheets/index.css.map +++ b/stylesheets/index.css.map @@ -1 +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,aACA,aACI,oBAER,UACI,kBCbJ,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","file":"index.css"} \ No newline at end of file +{"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/layout.sass b/stylesheets/sass/layout.sass index 7f80cc4..248ff2e 100644 --- a/stylesheets/sass/layout.sass +++ b/stylesheets/sass/layout.sass @@ -7,8 +7,6 @@ .l-board padding: 16px - &.set - pointer-events: none .l-footer text-align: center \ No newline at end of file diff --git a/stylesheets/sass/modules.sass b/stylesheets/sass/modules.sass index 543fd83..8d6f13d 100644 --- a/stylesheets/sass/modules.sass +++ b/stylesheets/sass/modules.sass @@ -35,3 +35,5 @@ border-radius: 4px font-weight: bold cursor: pointer +.set + pointer-events: none \ No newline at end of file From dd7fcdeb77a54cf6e17998b48b976a167deab4a3 Mon Sep 17 00:00:00 2001 From: yko-git Date: Mon, 25 Mar 2024 17:26:44 +0900 Subject: [PATCH 14/21] =?UTF-8?q?fix=20function.js=20(=E9=96=A2=E6=95=B0?= =?UTF-8?q?=E5=9E=8B=E3=83=97=E3=83=AD=E3=82=B0=E3=83=A9=E3=83=9F=E3=83=B3?= =?UTF-8?q?=E3=82=B0=E6=A4=9C=E8=A8=BC=E4=B8=AD)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 42 +++++++++++++++++++++++++++++------------- 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/js/function.js b/js/function.js index 8971010..89c8162 100644 --- a/js/function.js +++ b/js/function.js @@ -16,29 +16,45 @@ const win = [ let clickCount = 0; -for (let cell of jsCell) { +jsCell.forEach(function (cell) { cell.addEventListener("click", () => { addChild(cell); - addClass(); + addClass(itemsItem); - judge(); + judge(jsCell); }); -} +}); // 判定 -const judge = () => { +const judge = (judgeCell) => { + // win.forEach((val) => { + // if ( + // judgeCell[val[0]].innerHTML === "○" && + // judgeCell[val[1]].innerHTML === "○" && + // judgeCell[val[2]].innerHTML === "○" + // ) { + // return message("○"); + // } else if ( + // judgeCell[val[0]].innerHTML === "×" && + // judgeCell[val[1]].innerHTML === "×" && + // judgeCell[val[2]].innerHTML === "×" + // ) { + // return message("×"); + // } + // }); + for (let i = 0; i < win.length; i++) { if ( - jsCell[win[i][0]].innerHTML === "○" && - jsCell[win[i][1]].innerHTML === "○" && - jsCell[win[i][2]].innerHTML === "○" + judgeCell[win[i][0]].innerHTML === "○" && + judgeCell[win[i][1]].innerHTML === "○" && + judgeCell[win[i][2]].innerHTML === "○" ) { return message("○"); } else if ( - jsCell[win[i][0]].innerHTML === "×" && - jsCell[win[i][1]].innerHTML === "×" && - jsCell[win[i][2]].innerHTML === "×" + judgeCell[win[i][0]].innerHTML === "×" && + judgeCell[win[i][1]].innerHTML === "×" && + judgeCell[win[i][2]].innerHTML === "×" ) { return message("×"); } @@ -50,8 +66,8 @@ const judge = () => { }; // セルをクリックするごとにitemsのactiveを切り替える -const addClass = () => { - for (let item of itemsItem) { +const addClass = (items) => { + for (let item of items) { item.classList.toggle("is-active"); } }; From a572aa035a122fb0170e2120ffb767a25d23acc2 Mon Sep 17 00:00:00 2001 From: yko-git Date: Wed, 27 Mar 2024 07:10:48 +0900 Subject: [PATCH 15/21] =?UTF-8?q?fix=20function.js=20(=E3=82=AF=E3=83=AD?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=83=A3=E3=83=BC=E3=81=AE=E6=A4=9C=E8=A8=BC?= =?UTF-8?q?=E4=B8=AD=E3=80=81count=E3=81=AE=E5=80=A4=E3=82=92=E6=9D=A1?= =?UTF-8?q?=E4=BB=B6=E5=88=86=E5=B2=90=E3=81=97=E3=81=9F=E3=81=84)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 60 +++++++++++++++++++++++--------------------------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/js/function.js b/js/function.js index 89c8162..79c32bb 100644 --- a/js/function.js +++ b/js/function.js @@ -14,8 +14,6 @@ const win = [ [2, 4, 6], ]; -let clickCount = 0; - jsCell.forEach(function (cell) { cell.addEventListener("click", () => { addChild(cell); @@ -26,24 +24,35 @@ jsCell.forEach(function (cell) { }); }); +// let clickCount = 0; + +const countFunc = (() => { + let count = 0; + + return { + inner: () => { + return count++; + }, + }; +})(); + +// セルをクリックすると○とバツが交互に出力される +const addChild = (targetChild) => { + countFunc.inner(); + console.log(countFunc.inner()); + // clickCount++; + + if (countFunc.inner() % 2 === 0) { + targetChild.innerHTML = "×"; + targetChild.classList.add("set"); + } else { + targetChild.innerHTML = "○"; + targetChild.classList.add("set"); + } +}; + // 判定 const judge = (judgeCell) => { - // win.forEach((val) => { - // if ( - // judgeCell[val[0]].innerHTML === "○" && - // judgeCell[val[1]].innerHTML === "○" && - // judgeCell[val[2]].innerHTML === "○" - // ) { - // return message("○"); - // } else if ( - // judgeCell[val[0]].innerHTML === "×" && - // judgeCell[val[1]].innerHTML === "×" && - // judgeCell[val[2]].innerHTML === "×" - // ) { - // return message("×"); - // } - // }); - for (let i = 0; i < win.length; i++) { if ( judgeCell[win[i][0]].innerHTML === "○" && @@ -60,7 +69,7 @@ const judge = (judgeCell) => { } } // 揃わずに全てのセルが埋まったら メッセージをdrawに - if (clickCount === 9) { + if (countFunc.inner() === 9) { state.innerHTML = "draw"; } }; @@ -72,19 +81,6 @@ const addClass = (items) => { } }; -// セルをクリックすると○とバツが交互に出力される -const addChild = (targetChild) => { - clickCount++; - - if (clickCount % 2 === 0) { - targetChild.innerHTML = "×"; - targetChild.classList.add("set"); - } else { - targetChild.innerHTML = "○"; - targetChild.classList.add("set"); - } -}; - // どちらかが揃ったら メッセージをwinに const message = (mark) => { state.innerHTML = `${mark} win`; From 99cb85116e69858761a21765ef66316fc1f8e578 Mon Sep 17 00:00:00 2001 From: yko-git Date: Wed, 27 Mar 2024 10:04:37 +0900 Subject: [PATCH 16/21] =?UTF-8?q?fix=20function.js=20(=E3=82=AF=E3=83=AD?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=83=A3=E3=83=BC=E6=A4=9C=E8=A8=BC=E4=B8=AD?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/function.js b/js/function.js index 79c32bb..b215bcf 100644 --- a/js/function.js +++ b/js/function.js @@ -39,7 +39,6 @@ const countFunc = (() => { // セルをクリックすると○とバツが交互に出力される const addChild = (targetChild) => { countFunc.inner(); - console.log(countFunc.inner()); // clickCount++; if (countFunc.inner() % 2 === 0) { From f048822e1e0d06471be110861a5c3be1308a26b0 Mon Sep 17 00:00:00 2001 From: yko-git Date: Fri, 29 Mar 2024 21:50:18 +0900 Subject: [PATCH 17/21] fix function.js --- js/function.js | 100 +++++++++++++++++++++++++++++-------------------- 1 file changed, 59 insertions(+), 41 deletions(-) diff --git a/js/function.js b/js/function.js index b215bcf..64b62f1 100644 --- a/js/function.js +++ b/js/function.js @@ -3,7 +3,7 @@ const board = document.querySelector(".l-board"); const jsCell = document.querySelectorAll(".js-cell"); const state = document.querySelector(".js-state"); const jsReset = document.querySelector(".btn-restart"); -const win = [ +const winPatterns = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], @@ -14,17 +14,7 @@ const win = [ [2, 4, 6], ]; -jsCell.forEach(function (cell) { - cell.addEventListener("click", () => { - addChild(cell); - - addClass(itemsItem); - - judge(jsCell); - }); -}); - -// let clickCount = 0; +const cells = ["", "", "", "", "", "", "", "", ""]; const countFunc = (() => { let count = 0; @@ -36,54 +26,82 @@ const countFunc = (() => { }; })(); -// セルをクリックすると○とバツが交互に出力される -const addChild = (targetChild) => { - countFunc.inner(); - // clickCount++; - - if (countFunc.inner() % 2 === 0) { - targetChild.innerHTML = "×"; - targetChild.classList.add("set"); - } else { - targetChild.innerHTML = "○"; - targetChild.classList.add("set"); - } -}; +// イベントの登録 +jsCell.forEach(function (cell, index) { + cell.addEventListener("click", (e) => { + // セルの中身があったらそのまま + if (cells[index]) { + 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); + doneFunc(board); + } + + // 揃わずに全てのセルが埋まったら メッセージをdrawに + if (count === 8) { + state.innerHTML = "draw"; + } + }); +}); // 判定 const judge = (judgeCell) => { - for (let i = 0; i < win.length; i++) { + for (let i = 0; i < winPatterns.length; i++) { if ( - judgeCell[win[i][0]].innerHTML === "○" && - judgeCell[win[i][1]].innerHTML === "○" && - judgeCell[win[i][2]].innerHTML === "○" + judgeCell[winPatterns[i][0]] === "○" && + judgeCell[winPatterns[i][1]] === "○" && + judgeCell[winPatterns[i][2]] === "○" ) { - return message("○"); - } else if ( - judgeCell[win[i][0]].innerHTML === "×" && - judgeCell[win[i][1]].innerHTML === "×" && - judgeCell[win[i][2]].innerHTML === "×" + return true; + } + + if ( + judgeCell[winPatterns[i][0]] === "×" && + judgeCell[winPatterns[i][1]] === "×" && + judgeCell[winPatterns[i][2]] === "×" ) { - return message("×"); + return true; } } - // 揃わずに全てのセルが埋まったら メッセージをdrawに - if (countFunc.inner() === 9) { - state.innerHTML = "draw"; - } + + return false; }; // セルをクリックするごとにitemsのactiveを切り替える -const addClass = (items) => { +const toggleTurn = (items) => { for (let item of items) { item.classList.toggle("is-active"); } }; +const doneFunc = (target) => { + target.classList.toggle("set"); +}; + // どちらかが揃ったら メッセージをwinに const message = (mark) => { state.innerHTML = `${mark} win`; - board.classList.add("set"); }; //リセットボタンでリロード From 065d0fc2963f39410a1db5980c366cc39730fa2b Mon Sep 17 00:00:00 2001 From: yko-git Date: Sat, 30 Mar 2024 06:12:05 +0900 Subject: [PATCH 18/21] fix function.js --- js/function.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/function.js b/js/function.js index 64b62f1..fc9e041 100644 --- a/js/function.js +++ b/js/function.js @@ -29,6 +29,7 @@ const countFunc = (() => { // イベントの登録 jsCell.forEach(function (cell, index) { cell.addEventListener("click", (e) => { + // debugger; // セルの中身があったらそのまま if (cells[index]) { return; @@ -56,12 +57,11 @@ jsCell.forEach(function (cell, index) { if (judged) { message(inputValue); doneFunc(board); + } else if (count === 8) { + state.innerHTML = "draw"; } // 揃わずに全てのセルが埋まったら メッセージをdrawに - if (count === 8) { - state.innerHTML = "draw"; - } }); }); From ef459151041c0bd89fca695451d94b73807bc823 Mon Sep 17 00:00:00 2001 From: yko-git Date: Sat, 30 Mar 2024 12:14:10 +0900 Subject: [PATCH 19/21] =?UTF-8?q?fix=20function.js=20(=E7=B5=82=E4=BA=86?= =?UTF-8?q?=E5=88=A4=E5=AE=9A=E3=82=92=E5=A4=89=E6=95=B0=E3=81=AB=E5=A4=89?= =?UTF-8?q?=E6=9B=B4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/js/function.js b/js/function.js index fc9e041..129a1d8 100644 --- a/js/function.js +++ b/js/function.js @@ -3,6 +3,7 @@ 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], @@ -28,10 +29,9 @@ const countFunc = (() => { // イベントの登録 jsCell.forEach(function (cell, index) { - cell.addEventListener("click", (e) => { - // debugger; - // セルの中身があったらそのまま - if (cells[index]) { + cell.addEventListener("click", () => { + // セルの中身がある、もしくはdoneがtrueだったら処理せずそのまま + if (cells[index] || done) { return; } // countFunc関数をcountへ代入 @@ -56,12 +56,11 @@ jsCell.forEach(function (cell, index) { // judgedの結果で判定 if (judged) { message(inputValue); - doneFunc(board); + done = true; } else if (count === 8) { + // 揃わずに全てのセルが埋まったら メッセージをdrawに state.innerHTML = "draw"; } - - // 揃わずに全てのセルが埋まったら メッセージをdrawに }); }); @@ -95,9 +94,10 @@ const toggleTurn = (items) => { } }; -const doneFunc = (target) => { - target.classList.toggle("set"); -}; +// const doneFunc = (target) => { +// debugger; +// target.classList.add("set"); +// }; // どちらかが揃ったら メッセージをwinに const message = (mark) => { From d274444f2d83a15698df1899084a2baaf224e8bf Mon Sep 17 00:00:00 2001 From: yko-git Date: Sat, 30 Mar 2024 15:15:04 +0900 Subject: [PATCH 20/21] =?UTF-8?q?fix=20function.js=20(=E5=88=A4=E5=AE=9A?= =?UTF-8?q?=E3=82=92some=E3=83=A1=E3=82=BD=E3=83=83=E3=83=89=E3=81=A7?= =?UTF-8?q?=E5=AE=9F=E8=A3=85=E3=81=AB=E5=A4=89=E6=9B=B4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/js/function.js b/js/function.js index 129a1d8..8197811 100644 --- a/js/function.js +++ b/js/function.js @@ -66,25 +66,23 @@ jsCell.forEach(function (cell, index) { // 判定 const judge = (judgeCell) => { - for (let i = 0; i < winPatterns.length; i++) { + const judgeInner = winPatterns.some((line) => { if ( - judgeCell[winPatterns[i][0]] === "○" && - judgeCell[winPatterns[i][1]] === "○" && - judgeCell[winPatterns[i][2]] === "○" + judgeCell[line[0]] === "○" && + judgeCell[line[1]] === "○" && + judgeCell[line[2]] === "○" ) { return true; } - if ( - judgeCell[winPatterns[i][0]] === "×" && - judgeCell[winPatterns[i][1]] === "×" && - judgeCell[winPatterns[i][2]] === "×" + judgeCell[line[0]] === "×" && + judgeCell[line[1]] === "×" && + judgeCell[line[2]] === "×" ) { return true; } - } - - return false; + }); + return judgeInner; }; // セルをクリックするごとにitemsのactiveを切り替える From b1a45a21e834aa7432e50106b28d9e5befedc558 Mon Sep 17 00:00:00 2001 From: yko-git Date: Mon, 1 Apr 2024 11:36:59 +0900 Subject: [PATCH 21/21] =?UTF-8?q?fix=20function.js(some=E3=83=A1=E3=82=BD?= =?UTF-8?q?=E3=83=83=E3=83=89=E5=86=85=E3=81=AE=E8=A8=98=E8=BF=B0=E3=82=92?= =?UTF-8?q?=E3=82=B7=E3=83=B3=E3=83=97=E3=83=AB=E3=81=AB=E5=A4=89=E6=9B=B4?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/function.js | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/js/function.js b/js/function.js index 8197811..6ce1b60 100644 --- a/js/function.js +++ b/js/function.js @@ -67,17 +67,12 @@ jsCell.forEach(function (cell, index) { // 判定 const judge = (judgeCell) => { const judgeInner = winPatterns.some((line) => { + console.log(line); + const [first, second, third] = line; if ( - judgeCell[line[0]] === "○" && - judgeCell[line[1]] === "○" && - judgeCell[line[2]] === "○" - ) { - return true; - } - if ( - judgeCell[line[0]] === "×" && - judgeCell[line[1]] === "×" && - judgeCell[line[2]] === "×" + judgeCell[first] && + judgeCell[first] === judgeCell[second] && + judgeCell[second] === judgeCell[third] ) { return true; } @@ -92,11 +87,6 @@ const toggleTurn = (items) => { } }; -// const doneFunc = (target) => { -// debugger; -// target.classList.add("set"); -// }; - // どちらかが揃ったら メッセージをwinに const message = (mark) => { state.innerHTML = `${mark} win`;