Merge pull request #6 from teamdev-c/feature-add-explanation-ui

Feature add explanation UI
teamdev-c · Aug 1, 2023 · 43ea0b6 · 43ea0b6
2 parents ea29f9c + 3b97516
commit 43ea0b6
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 3 deletions.
diff --git a/explanation.js b/explanation.js
@@ -0,0 +1,25 @@
+const entrance = document.getElementById("js-entrance");
+const explanationButton = document.getElementById("js-explanation");
+const layout = document.getElementById("js-layout");
+const layoutExplanation = document.getElementById("js-layout-explanation");
+
+explanationButton.addEventListener("click", () => {
+  entrance.classList.add("hidden");
+  layoutExplanation.classList.add("explanation");
+  layoutExplanation.innerHTML = `
+    <div class="explanation_header">
+      <button id="js-back">
+        <i class="fa-solid fa-arrow-left"></i>
+      </button>
+      <h1 class="explanation_header_title">説明</h1>
+    </div>
+    <div class="explanation_text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas tempore repellat molestiae recusandae esse saepe hic unde sequi temporibus distinctio, nesciunt alias incidunt nostrum iusto voluptatibus. Nihil, quis in! Debitis.</div>
+  `;
+
+  const backButton = document.getElementById("js-back");
+  backButton.addEventListener("click", () => {
+    layoutExplanation.innerHTML = "";
+    layoutExplanation.classList.remove("explanation");
+    entrance.classList.remove("hidden");
+  });
+});
diff --git a/index.html b/index.html
@@ -3,18 +3,28 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- font awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <link rel="stylesheet" href="styles/reset.css" />
     <link rel="stylesheet" href="styles/style.css" />
     <script src="./main.js" defer></script>
+    <script src="./explanation.js" defer></script>
     <title>team-c</title>
   </head>
-  <body class="layout">
-    <div class="entrance">
+  <body id="js-layout" class="layout">
+    <div id="js-entrance" class="entrance">
       <h1 class="entrance_title">テトリス</h1>
       <div class="entrance_buttons">
         <button class="entrance_buttons_button">ゲームスタート</button>
-        <button class="entrance_buttons_button">説明</button>
+        <button id="js-explanation" class="entrance_buttons_button">説明</button>
       </div>
     </div>
+    <div id="js-layout-explanation"></div>
   </body>
 </html>
diff --git a/main.js b/main.js
@@ -1 +1,28 @@
 "use strict";
+
+// keydownイベントの数字と動作の紐づけを行います
+// 例えば、{ 37: 'left' }のように定義します
+// HTMLのbodyタグに紐づけておきます
+// 参考:https://developer.mozilla.org/ja/docs/Web/API/Element/keydown_event
+
+
+
+// canvas要素を活用して、描画する各関数を定義します
+// 参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas#%E4%BE%8B
+
+const H = 600, W = 300;
+const ROWS = 20, COLS = 10;
+const BLOCK_H = H / ROWS, BLOCK_W = W / COLS;
+
+// 1つのブロックを描画する関数を作成します
+// (x, y)を引数としてとりその位置に表示するようにします
+
+// canvas上にテトロミノを描画します
+// controller.jsから呼び出して、描画の部分だけ切り出すようにします
+// 描画するかどうかは、tetris.jsで配列などで管理して、受け渡します
+
+
+
+// 各テトロミノを定義します
+
+// 
diff --git a/styles/style.css b/styles/style.css
@@ -15,6 +15,10 @@
   align-items: center;
   height: 100vh;
 }
+
+.hidden {
+  display: none !important;
+}
 /* 共通ここまで */
 
 /* エントランス画面ここから */
@@ -55,6 +59,42 @@
   justify-content: center;
   align-items: center;
 }
+
+.explanation {
+  background-color: var(--bg-color-sub-1);
+  width: 360px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  border-radius: 16px;
+  padding: 32px;
+}
+
+.explanation_header {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.explanation_header_title {
+  color: var(--font-color-sub-1);
+  font-size: 28px;
+  font-weight: 600;
+}
+
+.explanation_text {
+  color: var(--font-color-sub-1);
+}
+
+.fa-solid {
+  color: var(--font-color-sub-1);
+  font-size: 30px;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
 /* エントランス画面ここまで */
 
 /* ゲーム画面ここから */