feat: 説明画面のUIを作成

teamdev-c · Aug 1, 2023 · 3b97516 · 3b97516
1 parent 986c4e2
commit 3b97516
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 46 deletions.
diff --git a/explanation.js b/explanation.js
@@ -1,21 +1,12 @@
-{/* <div class="explanation">
-      <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>
-    </div> */}
-
-const explanationButton = document.getElementById("js-explanation");
 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", () => {
-  explanation = document.createElement('div');
-  explanation.classList.add('explanation');
-  explanation.innerHTML = `
+  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>
@@ -24,19 +15,11 @@ explanationButton.addEventListener("click", () => {
     </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>
   `;
-  layout.append(explanation)
-  entrance.classList.add('hidden');
 
   const backButton = document.getElementById("js-back");
   backButton.addEventListener("click", () => {
-    layout.innerHTML = `
-    <div class="entrance">
-      <h1 class="entrance_title">テトリス</h1>
-      <div class="entrance_buttons">
-        <button class="entrance_buttons_button">ゲームスタート</button>
-        <button id="js-explanation" class="entrance_buttons_button">説明</button>
-      </div>
-    </div>
-    `
-  })
-})
+    layoutExplanation.innerHTML = "";
+    layoutExplanation.classList.remove("explanation");
+    entrance.classList.remove("hidden");
+  });
+});
diff --git a/index.html b/index.html
@@ -3,36 +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"
-     />
+    <!-- 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 id="js-layout" class="layout">
-    <div class="entrance hidden">
+    <div id="js-entrance" class="entrance">
       <h1 class="entrance_title">テトリス</h1>
       <div class="entrance_buttons">
         <button class="entrance_buttons_button">ゲームスタート</button>
         <button id="js-explanation" class="entrance_buttons_button">説明</button>
       </div>
     </div>
-    <!-- <div class="explanation">
-      <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>
-    </div> -->
+    <div id="js-layout-explanation"></div>
   </body>
 </html>
diff --git a/styles/style.css b/styles/style.css
@@ -17,7 +17,7 @@
 }
 
 .hidden {
-  display: none;
+  display: none !important;
 }
 /* 共通ここまで */