Merge pull request #2 from yko-git/feature-function.js

add Feature function.js (feature-function.js)
yko-git · Apr 1, 2024 · ef662fd · ef662fd
2 parents 484022c + b1a45a2
commit ef662fd
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -1,14 +1,57 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8" />
-  <title>Tic Tac Toe</title>
-  <link href="stylesheets/index.css" rel="stylesheet" type="text/css" media="all" />
-</head>
-<body>
-  <div class="container">
-    <!-- write your html -->
-  </div>
-  <script type="text/javascript" src="js/function.js"></script>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Tic Tac Toe</title>
+    <link
+      href="stylesheets/index.css"
+      rel="stylesheet"
+      type="text/css"
+      media="all"
+    />
+  </head>
+  <body>
+    <div class="l-container">
+      <!-- write your html -->
+      <main class="l-main">
+        <header>
+          <h1>TIC TAC TOE</h1>
+        </header>
+        <div class="items">
+          <div class="items-item circle is-active">○</div>
+          <div class="items-item cross">×</div>
+        </div>
+        <div class="l-board">
+          <table class="table js-table">
+            <tbody>
+              <tr class="row">
+                <td class="cell js-cell" data-key="1"></td>
+                <td class="cell js-cell" data-key="2"></td>
+                <td class="cell js-cell" data-key="3"></td>
+              </tr>
+              <tr class="row">
+                <td class="cell js-cell" data-key="4"></td>
+                <td class="cell js-cell" data-key="5"></td>
+                <td class="cell js-cell" data-key="6"></td>
+              </tr>
+              <tr class="row">
+                <td class="cell js-cell" data-key="7"></td>
+                <td class="cell js-cell" data-key="8"></td>
+                <td class="cell js-cell" data-key="9"></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="l-footer">
+          <div class="state js-state">starting...</div>
+          <div>
+              <a class="btn btn-restart">RESTART</a>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+    <script type="text/javascript" src="js/function.js"></script>
+  </body>
 </html>
diff --git 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
@@ -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
diff --git a/stylesheets/index.css.map b/stylesheets/index.css.map
diff --git a/stylesheets/sass/base.sass 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
diff --git 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
diff --git a/stylesheets/sass/layout.sass 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
diff --git a/stylesheets/sass/modules.sass 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
diff --git a/stylesheets/sass/reset.sass b/stylesheets/sass/reset.sass
@@ -0,0 +1,2 @@
+*, *:before, *:after
+    box-sizing: border-box
diff --git 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