1.2 very minor ui improvements and some junk files

DeadCreator · Aug 8, 2024 · d4de060 · d4de060
1 parent 1c163fe
commit d4de060
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -8,11 +8,22 @@
 </head>
 <body>
     <header>
-
+        <button>Pause/Play</button>
+        <button>Sound Off</button>
     </header>
     <main>
+        <section class="main menu">
+
+        </section>
+        <section class="pause menu">
+            <h3>Paused</h3>
+            <button>Resume</button>
+            <button>Settings</button>
+            <button>Back to main menu</button>
+        </section>
         <section class="field">
         </section>
+        <audio src="media/ost/test.mp3"></audio>
     </main>
     <footer>
 

diff --git a/main.js b/main.js
@@ -1,6 +1,5 @@
 const x = 4
 const y = 6
-
 const delay = ms => new Promise(res => setTimeout(res, ms))
 
 const checkMatched = () => {
@@ -83,3 +82,10 @@ const makeField = (x, y) => {
 
 window.onload = () => {makeField(x, y)}
 
+
+
+//How to add difficulty to the game:
+// 1) Add timer (for example, 1 minute)
+// 2) Set a restricted amount of touches (more than minimal, but restricted)
+// 3) Different amount of cards
+
diff --git a/media/cards/card-1.png b/media/cards/card-1.png
diff --git a/media/ost/test.mp3 b/media/ost/test.mp3
diff --git a/style.css b/style.css
@@ -1,28 +1,54 @@
+@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:[email protected]&display=swap');
+
+button, h3 {
+    font-family: "Pixelify Sans", sans-serif;
+}
+
 body, html {
     margin: 0;
-
 }
 
-main, header {
+main, header, footer, .menu {
     display: flex;
-    justify-content: center;
 }
 
 header, footer {
-    height: 12vh;
-    width: 100%;
+    height: calc((100vh - 178vw) / 2);
+    padding: 2vw;
     background-color: lightgreen;
-    margin-bottom: 5vw;
 }
 
+
 main {
     background-color: lightgoldenrodyellow;
-    aspect-ratio: 9 / 14;
+    position: relative;
+    height: 170vw;
+}
+
+
+.menu {
+    position: absolute;
+    flex-direction: column;
+    background-color: lightseagreen;
+    align-items: center;
+    width: 90vw;
+    padding: 5vw;
+    height: calc(100% - 10vw);
+    z-index: 2;
+    gap: 4vw;
+}
+
+.menu * {
+    width: 90%;
+    font-size: 7vw;
+    padding: 2.5vw;
 }
 
-footer {
-    margin-top: 5vw;
-    margin-bottom: 5vw;
+.menu h3 {
+    text-align: center;
+    margin-top: 25vw;
+    font-size: 10vw;
+    color: white;
 }
 
 .field {