commit 0fd014b6553f04aec424cffac38db88ae9fa614f
parent f2c0dc50dfd81236f0266ac797e7ea4ad4eec708
Author: MoiBaguette <[email protected]>
Date: Sun, 18 Jun 2023 17:03:14 +0200
css en menu button
Diffstat:
| A | css/login.css | 83 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | css/main.css | 196 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | css/settings.css | 94 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | login.html | 30 | +++++++++++++++--------------- |
| D | main.css | 191 | ------------------------------------------------------------------------------- |
| M | memory.html | 40 | ++++++++++++++++------------------------ |
| M | memory.js | 26 | ++++++++++++++++++++++++++ |
| M | settings.html | 34 | +++++++++++++++++++++------------- |
8 files changed, 451 insertions(+), 243 deletions(-)
diff --git a/css/login.css b/css/login.css
@@ -0,0 +1,83 @@
+body {
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ background: #282828;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 20px;
+ color: #fea400;
+}
+
+form input, form select {
+ margin-bottom: 10px;
+ padding: 5px;
+}
+
+form button {
+ cursor: pointer;
+ margin-top: 10px;
+ padding: 5px 10px;
+ background: #fea400;
+ color: #282828;
+ font-weight: bold;
+}
+
+form button:hover {
+ background: #df9a06;
+}
+
+label {
+ margin-bottom: 5px;
+}
+
+#message {
+ color: #fea400;
+}
+
+#username, #email, #password, #password-again {
+ width: 200px;
+}
+
+#do-register {
+ margin-bottom: 10px;
+}
+
+#logout {
+ cursor: pointer;
+ margin-top: 20px;
+ padding: 5px 10px;
+ background: #fea400;
+ color: #282828;
+ font-weight: bold;
+}
+
+#logout:hover {
+ background: #df9a06;
+}
+
+@media (min-width: 650px) {
+ form {
+ width: 400px;
+ }
+
+ #username, #email, #password, #password-again {
+ width: 100%;
+ }
+}
+
+@media (min-width: 1400px) {
+ form {
+ width: 600px;
+ }
+}
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,195 @@
+body{
+ margin: 0;
+ padding: 0;
+}
+.container{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ background: #282828;
+}
+
+.header{
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width:100%;
+ height:65px;
+ margin-bottom: 5px;
+}
+
+.menu{
+ display: none;
+ flex-direction: column;
+}
+
+#menu{
+ color: #fea400;
+}
+
+
+#menu div{
+ border-bottom: 1px solid #8a8a82;
+ margin: 2px;
+ padding: 2px;
+}
+
+.menu_btn{
+ cursor: pointer;
+ margin-left: 20px;
+ height: 40px;
+ width: 40px;
+ display: flex;
+ justify-content: space-between;
+ flex-direction: column;
+}
+
+.line{
+ display: block;
+ height: 5px;
+ width: 100%;
+ border-radius: 10px;
+ background: #fea400;
+}
+.title{
+ font-size:x-large;
+ font-weight: bold;
+ color:#fea400;
+}
+.restart_button{
+ cursor: pointer;
+ height: 40px;
+ margin-right: 20px;
+}
+.restart{
+ width: 40px;
+ height: 40px;
+}
+
+.game_state{
+ display: grid;
+ width: 95%;
+ grid-template-columns: auto auto;
+ margin: 10px;
+ font-weight: bold;
+ color:#fea400;
+ justify-content: space-between;
+}
+#game_time{
+ grid-row: 1;
+}
+#found_pairs{
+ grid-row: 1;
+}
+
+#progress_bar{
+ grid-row: 2;
+ grid-column-start: 1;
+ grid-column-end: 3;
+ margin-top:10px;
+ display: block;
+ height: 5px;
+ width: 100%;
+ border-radius: 10px;
+ background: #fea400;
+}
+.game_info .div{
+ margin: 5px;
+}
+.game_board{
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ flex-wrap: wrap;
+ aspect-ratio: 1 / 1;
+ width: 95%;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.card{
+ cursor: pointer;
+ width: calc(16.66% - 10px);
+ height: calc(16.66% - 10px);
+ margin: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background:#df9a06;
+ box-shadow: 1px 1px 1px rgba(42, 42, 42, 0.3);
+}
+
+.card p{
+ color: #282828;
+}
+
+.card.inactive {
+ background:#278704;
+}
+
+.card.open {
+ background:#5e3ccdd5;
+}
+
+.footer{
+ color:#fea400;
+ width: 95%;
+ justify-content: center;
+ display: flex;
+ margin-bottom: 25px;
+}
+
+.footer ul{
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+@media (orientation: landscape) {
+ .game_board{
+ width: 80vh;
+ }
+ .header{
+ width: 650px;
+ }
+}
+
+@media (min-width: 650px) {
+ .game_board{
+ width: 630px;
+ }
+ .game_state{
+ width: 600px;
+ }
+ .header{
+ width: 650px;
+ }
+ .menu{
+ width: 630px;
+ }
+}
+
+@media (min-width: 1400px) {
+ .footer{
+ position: absolute;
+ width: auto;
+ top: 100px;
+ right: 5%;
+ flex-direction: column;
+ }
+}
+
+.done {
+ border: 5px solid green;
+ box-sizing: border-box;
+}
+
+.clicked {
+ border: 5px solid red;
+ box-sizing: border-box;
+}
+
+#login {
+ color: #df9a06;
+}
+\ No newline at end of file
diff --git a/css/settings.css b/css/settings.css
@@ -0,0 +1,94 @@
+body {
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100vh;
+ background: #282828;
+}
+
+.color_select{
+ display: flex;
+ align-items: center;
+}
+
+.color-div{
+ display: flex;
+ margin: 10px;
+ align-items: center;
+ flex-direction: column;
+}
+form {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 20px;
+ color: #fea400;
+}
+
+form input, form select {
+ margin-bottom: 10px;
+ padding: 5px;
+}
+
+form button {
+ cursor: pointer;
+ margin-top: 10px;
+ padding: 5px 10px;
+ background: #fea400;
+ color: #282828;
+ font-weight: bold;
+}
+
+form button:hover {
+ background: #df9a06;
+}
+
+label {
+ margin-bottom: 5px;
+}
+
+#message, #login {
+ color: #fea400;
+}
+
+#email {
+ width: 190px;
+}
+
+#api {
+ width: 200px;
+}
+
+#color-found, #color-closed {
+ width: 40px;
+ height: 40px;
+ border: none;
+ padding: 0;
+ margin-left: 5px;
+ vertical-align: middle;
+}
+
+#submit {
+ width: 80px;
+}
+
+@media (min-width: 650px) {
+ form {
+ width: 400px;
+ }
+
+ #email, #api {
+ width: 100%;
+ }
+}
+
+@media (min-width: 1400px) {
+ form {
+ width: 600px;
+ }
+}
diff --git a/login.html b/login.html
@@ -2,24 +2,24 @@
<html>
<head>
<title>Memory</title>
- <link rel='stylesheet' href='main.css' />
+ <link rel='stylesheet' href='css/login.css' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
</head>
- <body>
+ <body>
<div class='container' id='login'>
- <span id='message'></span>
- <form>
- <input type='text' id='username' placeholder='Username' /><br>
- <input type='text' id='email' placeholder='Email' style='display: none' /><br>
- <input type='password' id='password' placeholder='Password' /><br>
- <input type='password' id='password-again' placeholder='Retype Password' style='display: none' /><br>
- <input type='checkbox' id='do-register' />
- <label for="do-register">Do Register?</label><br>
- <button type='button' id='submit'>submit</button>
- </form>
- <button id='logout'>logout</button>
- </div>
-
+ <span id='message'></span>
+ <form>
+ <input type='text' id='username' placeholder='Username' /><br>
+ <input type='text' id='email' placeholder='Email' style='display: none' /><br>
+ <input type='password' id='password' placeholder='Password' /><br>
+ <input type='password' id='password-again' placeholder='Retype Password' style='display: none' /><br>
+ <input type='checkbox' id='do-register' />
+ <label for="do-register">Do Register?</label><br>
+ <button type='button' id='submit'>submit</button>
+ </form>
+ <button id='logout'>logout</button>
+ </div>
+
<script type='text/javascript' src='backend.js'></script>
<script type='text/javascript' src='login.js'></script>
</body>
diff --git a/main.css b/main.css
@@ -1,190 +0,0 @@
-body{
- margin: 0;
- padding: 0;
-}
-.container{
- display: flex;
- flex-direction: column;
- align-items: center;
- min-height: 100vh;
- background: #282828;
-}
-
-.header{
- display: flex;
- justify-content: space-between;
- align-items: center;
- width:100%;
- height:65px;
- margin-bottom: 5px;
-}
-.menu{
- display: flex;
- width: 95%;
- flex-direction: column;
- color: #fea400;
-}
-
-.menu div{
- border-bottom: 1px solid #8a8a82;
- margin: 2px;
- padding: 2px;
-}
-.menu_btn{
- cursor: pointer;
- margin-left: 20px;
- height: 40px;
- width: 40px;
- display: flex;
- justify-content: space-between;
- flex-direction: column;
-}
-
-.line{
- display: block;
- height: 5px;
- width: 100%;
- border-radius: 10px;
- background: #fea400;
-}
-.title{
- font-size:x-large;
- font-weight: bold;
- color:#fea400;
-}
-.restart_button{
- cursor: pointer;
- height: 40px;
- margin-right: 20px;
-}
-.restart{
- width: 40px;
- height: 40px;
-}
-
-.game_state{
- display: grid;
- width: 95%;
- grid-template-columns: auto auto;
- margin: 10px;
- font-weight: bold;
- color:#fea400;
- justify-content: space-between;
-}
-#game_time{
- grid-row: 1;
-}
-#found_pairs{
- grid-row: 1;
-}
-
-#progress_bar{
- grid-row: 2;
- grid-column-start: 1;
- grid-column-end: 3;
- margin-top:10px;
- display: block;
- height: 5px;
- width: 100%;
- border-radius: 10px;
- background: #fea400;
-}
-.game_info .div{
- margin: 5px;
-}
-.game_board{
- margin-left: auto;
- margin-right: auto;
- display: flex;
- flex-wrap: wrap;
- aspect-ratio: 1 / 1;
- width: 95%;
- align-items: center;
- justify-content: space-between;
-}
-
-.card{
- cursor: pointer;
- width: calc(16.66% - 10px);
- height: calc(16.66% - 10px);
- margin: 5px;
- display: flex;
- align-items: center;
- justify-content: center;
- background:#df9a06;
- box-shadow: 1px 1px 1px rgba(42, 42, 42, 0.3);
-}
-
-.card p{
- color: #282828;
-}
-
-.card.inactive {
- background:#278704;
-}
-
-.card.open {
- background:#5e3ccdd5;
-}
-
-.footer{
- color:#fea400;
- width: 95%;
- justify-content: center;
- display: flex;
- margin-bottom: 25px;
-}
-
-.footer ul{
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-
-@media (orientation: landscape) {
- .game_board{
- width: 80vh;
- }
- .header{
- width: 650px;
- }
-}
-
-@media (min-width: 650px) {
- .game_board{
- width: 630px;
- }
- .game_state{
- width: 600px;
- }
- .header{
- width: 650px;
- }
- .menu{
- width: 630px;
- }
-}
-
-@media (min-width: 1400px) {
- .footer{
- position: absolute;
- width: auto;
- top: 100px;
- right: 5%;
- flex-direction: column;
- }
-}
-
-.done {
- border: 5px solid green;
- box-sizing: border-box;
-}
-
-.clicked {
- border: 5px solid red;
- box-sizing: border-box;
-}
-
-#login {
- color: white;
-}
-\ No newline at end of file
diff --git a/memory.html b/memory.html
@@ -2,65 +2,57 @@
<html>
<head>
<title>Memory</title>
- <link rel="stylesheet" href="main.css" />
+ <link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
- <body>
+ <body onload="OnLoad()">
<div class ="container">
<div class ="header">
- <div class ="menu_btn">
+ <div class ="menu_btn" onclick="menu()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="title">Memory</div>
- <div class="restart_button">
- <span id='login'></span>
+ <div class="restart_button">
<img class="restart" src="img/restart.png" alt="restart button">
</div>
</div>
- <div class="menu">
+ <div class="menu" id="menu">
<div id="theme">
- <select name="theme" id="theme">
- <option value="nature">Colors</option>
- <option value="nature">Nature</option>
- <option value="cars">Cars</option>
- <option value="food">Food</option>
- </select>
- <label for="theme">Select a theme</label>
+ <select id="picture-select" onchange="onSelect()">
+ <option value="dog">Doggos</option>
+ <option value="cat">Kitties</option>
+ </select>
+ <label for="theme">Select a theme</label>
</div>
-
<div id="card_color">
<input type="color" id="closed_card" name="closed_card" value="#df9a06" onchange="colorChange()">
<label for="closed_card">Closed card</label>
</div>
</div>
<div class="game_state">
+ <span id='login'></span>
<div id="game_time">Time: 0sec</div>
- <div id="picture_choose">
- <select id="picture-select" onchange="onSelect()">
- <option value="none">Select Picture Set:</option>
- <option value="dog">Doggos</option>
- <option value="cat">Kitties</option>
- </select>
- </div>
+
<div id="found_pairs">Pairs: <span id='pairs'>0</span></div>
<div id="progress_bar"></div>
- </div>
+ </div>
<div aria-label="game board" class ="game_board" id="game_board">
</div>
<div class ="footer">
- <div class="high_scores">
+ <div class="high_scores">
<h2> Top 5 </h2>
<ul id="top_5" aria-label="Top 5">
</ul>
</div>
<div id="average_time"><h2>Average playtime: 420s</h2></div>
</div>
- </div>
+ </div>
<script type="text/javascript" src="backend.js"></script>
<script type="text/javascript" src="memory.js"></script>
+ <script type='text/javascript' src='settings.js'></script>
</body>
</html>
\ No newline at end of file
diff --git a/memory.js b/memory.js
@@ -104,6 +104,32 @@ function onSelect() {
}
}
+function OnLoad(){
+ let board = document.getElementById("game_board");
+ board.innerHTML = '';
+
+ buttons = {};
+ openButton = null;
+ done = [];
+ pairs = 0;
+ let promises = [];
+ for (let i = 0; i < BOARD_SIZE / 2; i++) {
+ promises.push(fetch(DOG_API).then(res => res.json()).then(res => res.message));
+ }
+ Promise.all(promises).then(makeBoard);
+}
+
+function menu(){
+ let menu = document.getElementById('menu');
+ if(menu.style.display == 'flex'){
+ menu.style.display = 'none';
+ }else{
+ menu.style.display = 'flex';
+ }
+
+ console.log(menu.getPropertyValue());
+}
+
function onCardClick(evt) {
if (done.includes(this))
return;
diff --git a/settings.html b/settings.html
@@ -2,28 +2,36 @@
<html>
<head>
<title>Memory</title>
- <link rel='stylesheet' href='main.css' />
- <meta name='viewport' content='width=device-width, initial-scale=1' />
+ <link rel='stylesheet' href='css/settings.css' />
+ <meta name='viewport' content='width=device-width, initial-scale=1' />
</head>
- <body>
+ <body>
<div class='container'>
<span id='message'></span>
<span id='login'></span>
- <form>
- <input type='text' id='email' /><br>
+ <form>
+ <label for="email">Email</label>
+ <input type='text' id='email' /><br>
+ <label for="api">Select card theme:</label>
<select id="api">
<option value="none">Select Picture Set:</option>
<option value="dog">Doggos</option>
<option value="cat">Kitties</option>
- </select><br>
- <label for='color-found'>Color found</label>
- <input type='color' id='color-found' /><br>
- <label for='color-closed'>Color closed</label>
- <input type='color' id='color-closed' /><br>
- <button type='button' id='submit'>submit</button>
+ </select><br>
+ <div class ="color_select">
+ <div class="color-div">
+ <label for='color-found'>Color found</label>
+ <input type='color' id='color-found' /><br>
+ </div>
+ <div class="color-div">
+ <label for='color-closed'>Color closed</label>
+ <input type='color' id='color-closed' /><br>
+ </div>
+ </div>
+ <button type='button' id='submit'>submit</button>
</form>
- </div>
-
+ </div>
+
<script type='text/javascript' src='backend.js'></script>
<script type='text/javascript' src='settings.js'></script>
</body>
