KatrinaCloyd · caseywar · Feb 1, 2021 · Feb 1, 2021 · Feb 1, 2021 · Feb 1, 2021
diff --git a/about-us/index.html b/about-us/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../styles/style.css">
+    <link rel="stylesheet" href="./results.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Chonburi&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap"
+        rel="stylesheet">
+
+    <title>about us</title>
+</head>
+
+<body>
+    <header>
+        <header>
+            <h1>vampire match</h1>
+            <div class="topnav">
+                <a href="../">Home</a>
+                <a href="../results">Score Board</a>
+                <a href="../about-us">About Us</a>
+            </div>
+
+        </header>
+    </header>
+    <main>
+        <section class="main-section">
+            ABOUT US
+        </section>
+    </main>
+    <footer>
+    </footer>
+
+    <script type="module" src="./results.js"></script>
+</body>
+
+</html>
diff --git a/about-us/results.css b/about-us/results.css
diff --git a/about-us/results.js b/about-us/results.js
diff --git a/app.js b/app.js
@@ -1,5 +1,35 @@
 // import functions and grab DOM elements
+import { saveUsers, getUsers, setCurrentUser, findById } from './utils.js';
 
 // initialize state
 
-// set event listeners to update state and DOM
+// set event listeners to update state and DOM
+
+const form = document.querySelector('form');
+
+form.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(form);
+    const currentUser = formData.get('name');
+    const existingUsers = getUsers();
+    const userInArray = findById(formData.get('name'), existingUsers);
+
+    if (!existingUsers) {
+        const user = [{
+            name: formData.get('name'),
+            scores: [],
+        }];
+        saveUsers(user);
+        setCurrentUser(currentUser);
+        //console.log(currentUser);
+    } else if (userInArray) {
+        setCurrentUser(currentUser);
+    } else {
+        const user = { name: formData.get('name'), scores: [], };
+        existingUsers.push(user);
+        saveUsers(existingUsers);
+        setCurrentUser(currentUser);
+    }
+    window.location = './game/index.html';
+});
diff --git a/assets/cards/mock-up-back.png b/assets/cards/mock-up-back.png
diff --git a/assets/cards/mock-up-five.png b/assets/cards/mock-up-five.png
diff --git a/assets/cards/mock-up-four.png b/assets/cards/mock-up-four.png
diff --git a/assets/cards/mock-up-one.png b/assets/cards/mock-up-one.png
diff --git a/assets/cards/mock-up-six.png b/assets/cards/mock-up-six.png
diff --git a/assets/cards/mock-up-three.png b/assets/cards/mock-up-three.png
diff --git a/assets/cards/mock-up-two.png b/assets/cards/mock-up-two.png
diff --git a/data.js b/data.js
@@ -0,0 +1,34 @@
+const cardDeck = [
+    {
+        id: 1,
+        name: 'one',
+        img: 'mock-up-one.png',
+    },
+    {
+        id: 2,
+        name: 'two',
+        img: 'mock-up-two.png',     
+    },    
+    {
+        id: 3,
+        name: 'three',
+        img: 'mock-up-three.png',
+    },    
+    {
+        id: 4,
+        name: 'four',
+        img: 'mock-up-four.png',
+    },    
+    {
+        id: 5,
+        name: 'five',
+        img: 'mock-up-five.png',
+    },    
+    {
+        id: 6,
+        name: 'six',
+        img: 'mock-up-six.png',
+    },
+];
+
+export default cardDeck;
diff --git a/game/game.css b/game/game.css
@@ -0,0 +1,7 @@
+.hidden {
+    display: none;
+}
+
+#game-board img {
+    padding: .25rem;
+}
diff --git a/game/game.js b/game/game.js
@@ -0,0 +1,91 @@
+// switch to cardDeck import
+
+export function createUser(name, difficulty) {
+    const user = {};
+    user.name = name;
+    user.difficulty = difficulty;
+    user.clicks = 0;
+
+    return activeUser;
+}
+
+export function updateSavedUser(savedUser, activeUser) {
+    const difficulty = activeUser.difficulty;
+    savedUser[difficulty].push(activeUser.clicks);
+}
+
+export function makeGameArray(deck, gameBoardSize) {
+    const halfDeck = deck.splice(0, gameBoardSize / 2);
+    const fullDeck = halfDeck.concat(halfDeck);
+
+    const gameboardArray = [];
+
+    for (let i = gameBoardSize; i > 0; i--) {
+        const cardIndex = Math.floor(Math.random() * i);
+        gameboardArray.push(...fullDeck.splice(cardIndex, 1));
+    }
+
+    return gameboardArray;
+}
+
+export function makeGameBoard(gameBoardSize) {
+    const gameboardArray = makeGameArray(deck, gameBoardSize);
+    const gameBoard = document.querySelector('#game-board');
+
+    for (let card of gameboardArray) {
+        const img = document.createElement('img');
+        img.src = `../assets/cards/${card.img}`;
+        img.classList.add(card.name);
+        img.classList.toggle('hidden');
+
+        const imgBack = document.createElement('img');
+        imgBack.src = `../assets/cards/mock-up-back.png`;
+
+        imgBack.addEventListener('click', () => {
+            imgBack.classList.toggle('hidden');
+            img.classList.toggle('hidden');
+        });
+
+        img.addEventListener('click', () => {
+            imgBack.classList.toggle('hidden');
+            img.classList.toggle('hidden');
+        });
+
+        gameBoard.append(img, imgBack);
+    }
+}
+
+const deck = [
+    {
+        id: 1,
+        name: 'one',
+        img: 'mock-up-one.png',
+    },
+    {
+        id: 2,
+        name: 'two',
+        img: 'mock-up-two.png',
+    },
+    {
+        id: 3,
+        name: 'three',
+        img: 'mock-up-three.png',
+    },
+    {
+        id: 4,
+        name: 'four',
+        img: 'mock-up-four.png',
+    },
+    {
+        id: 5,
+        name: 'five',
+        img: 'mock-up-five.png',
+    },
+    {
+        id: 6,
+        name: 'six',
+        img: 'mock-up-six.png',
+    },
+];
+
+makeGameBoard(12);
diff --git a/game/index.html b/game/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="../styles/style.css">
+    <link rel="stylesheet" href="./game.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Chonburi&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap"
+        rel="stylesheet">
+
+    <title>game board</title>
+</head>
+
+<body>
+
+    <header>
+        <h1>vampire match</h1>
+        <div class="topnav">
+            <a href="../">Home</a>
+            <a href="../results">Score Board</a>
+            <a href="../about-us">About Us</a>
+        </div>
+
+    </header>
+    <main>
+        <section class="main-section">
+            ABOUT US
+            <div id="game-board">
+
+            </div>
+        </section>
+    </main>
+    <footer>
+    </footer>
+
+    <script type="module" src="./game.js"></script>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -5,50 +5,59 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="styles/reset.css">
-    <link rel="stylesheet" href="styles/style.css">
-    <link rel="stylesheet" href="styles/home.css">
-    <title>Document</title>
+    <link rel="stylesheet" href="../styles/style.css">
+    <link rel="stylesheet" href="../styles/home.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link
+        href="https://fonts.googleapis.com/css2?family=Chonburi&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap"
+        rel="stylesheet">
+    <title>start</title>
 </head>
 
 <body>
     <header>
-        <div class="gutter-right logo">
-            <img src="assets/big-logo.png"/>
+        <h1>vampire match</h1>
+        <div class="topnav">
+            <a href="../">Home</a>
+            <a href="../results">Score Board</a>
+            <a href="../about-us">About Us</a>
         </div>
+
     </header>
     <main>
         <section class="main-section">
-            <img class="main-logo" src="assets/alchemy-logo.png"/>
-            <h2>
-                Welcome to Alchemy Bootstrap!
-            </h2>
 
-            <content>
-            <p>
-                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam repellendus similique consectetur voluptas facilis molestiae voluptates nobis error sapiente, ad, ipsa vero non, sint eligendi? Eos praesentium iusto magnam exercitationem.
-                Earum sunt voluptatibus molestias, sint voluptatum quos reiciendis. Id asperiores deleniti dolores provident, eius, nostrum aperiam vel, optio qui illo corrupti in. Eum quam, est nemo porro sapiente excepturi assumenda.
-                Rerum unde quidem maxime. Ullam, dolores labore molestias voluptatibus adipisci quod? Quaerat nihil inventore molestiae assumenda, voluptates vel necessitatibus eligendi? Accusamus ratione eligendi reprehenderit? Beatae incidunt molestias ea soluta nulla.
-                Fugiat quae soluta voluptate mollitia praesentium modi ex illo, autem assumenda, vel aliquam fugit possimus dolorem esse corporis ipsa! Voluptatem sapiente error non, ea optio suscipit quasi maxime nobis ex?
-                Et ipsa tenetur ullam ab nesciunt quas fugit velit impedit illum esse eligendi corporis culpa praesentium aspernatur ex sint veniam quidem, doloribus corrupti hic vitae. Eum neque ducimus omnis exercitationem?
-            </p>
-            <hr />
-            <p>
-                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam repellendus similique consectetur voluptas facilis molestiae voluptates nobis error sapiente, ad, ipsa vero non, sint eligendi? Eos praesentium iusto magnam exercitationem.
-                Earum sunt voluptatibus molestias, sint voluptatum quos reiciendis. Id asperiores deleniti dolores provident, eius, nostrum aperiam vel, optio qui illo corrupti in. Eum quam, est nemo porro sapiente excepturi assumenda.
-                Rerum unde quidem maxime. Ullam, dolores labore molestias voluptatibus adipisci quod? Quaerat nihil inventore molestiae assumenda, voluptates vel necessitatibus eligendi? Accusamus ratione eligendi reprehenderit? Beatae incidunt molestias ea soluta nulla.
-                Fugiat quae soluta voluptate mollitia praesentium modi ex illo, autem assumenda, vel aliquam fugit possimus dolorem esse corporis ipsa! Voluptatem sapiente error non, ea optio suscipit quasi maxime nobis ex?
-                Et ipsa tenetur ullam ab nesciunt quas fugit velit impedit illum esse eligendi corporis culpa praesentium aspernatur ex sint veniam quidem, doloribus corrupti hic vitae. Eum neque ducimus omnis exercitationem?
-            </p>
+            <p>It's matching time! Play your basic matching memory game, but vampire style!</p>
+            <section class="form">
+                <form>
+                    <label>
+                        <span>Name:</span>
+                        <input class="name" name="name">
+                    </label>
+                    <br>
+                    <span class="Difficulty Level">Choose your difficulty:</span>
+                    <label>
+                        <span class="card">12 Card</span>
+                        <input type="radio" name="game" value="easy">
+                    </label>
+                    <label>
+                        <span class="card">24 Card</span>
+                        <input type="radio" name="game" value="medium">
+                    </label>
+                    <label>
+                        <span class="card">48 Card</span>
+                        <input type="radio" name="game" value="hard">
+                    </label>
+                    <button>Play</button>
+                </form>
+            </section>
 
         </section>
     </main>
     <footer>
-        <div class="copy gutter-right">&copy; 2020 Alchemy Code Lab</div>
     </footer>
 
-    <script type="module" src="app.js"></script>
+    <script type="module" src="./app.js"></script>
 </body>
 
 </html>