diff --git a/about-us/index.html b/about-us/index.html index e69de29..0ec0c49 100644 --- a/about-us/index.html +++ b/about-us/index.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + + about us + + + +
+
+

vampire match

+
+ Home + Score Board + About Us +
+ +
+
+
+
+ ABOUT US +
+
+ + + + + + \ No newline at end of file diff --git a/about-us/results.css b/about-us/results.css new file mode 100644 index 0000000..e69de29 diff --git a/about-us/results.js b/about-us/results.js new file mode 100644 index 0000000..e69de29 diff --git a/app.js b/app.js index c71cd34..7113910 100644 --- 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 \ No newline at end of file +// 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'; +}); \ No newline at end of file diff --git a/assets/cards/mock-up-back.png b/assets/cards/mock-up-back.png new file mode 100644 index 0000000..24447c3 Binary files /dev/null and b/assets/cards/mock-up-back.png differ diff --git a/assets/cards/mock-up-five.png b/assets/cards/mock-up-five.png new file mode 100644 index 0000000..1ac01c7 Binary files /dev/null and b/assets/cards/mock-up-five.png differ diff --git a/assets/cards/mock-up-four.png b/assets/cards/mock-up-four.png new file mode 100644 index 0000000..037e586 Binary files /dev/null and b/assets/cards/mock-up-four.png differ diff --git a/assets/cards/mock-up-one.png b/assets/cards/mock-up-one.png new file mode 100644 index 0000000..326cef5 Binary files /dev/null and b/assets/cards/mock-up-one.png differ diff --git a/assets/cards/mock-up-six.png b/assets/cards/mock-up-six.png new file mode 100644 index 0000000..a4170bc Binary files /dev/null and b/assets/cards/mock-up-six.png differ diff --git a/assets/cards/mock-up-three.png b/assets/cards/mock-up-three.png new file mode 100644 index 0000000..9170045 Binary files /dev/null and b/assets/cards/mock-up-three.png differ diff --git a/assets/cards/mock-up-two.png b/assets/cards/mock-up-two.png new file mode 100644 index 0000000..c87b488 Binary files /dev/null and b/assets/cards/mock-up-two.png differ diff --git a/data.js b/data.js new file mode 100644 index 0000000..06fd283 --- /dev/null +++ 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; \ No newline at end of file diff --git a/game/game.css b/game/game.css index e69de29..65137ae 100644 --- a/game/game.css +++ b/game/game.css @@ -0,0 +1,7 @@ +.hidden { + display: none; +} + +#game-board img { + padding: .25rem; +} \ No newline at end of file diff --git a/game/game.js b/game/game.js new file mode 100644 index 0000000..501dfe2 --- /dev/null +++ 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); \ No newline at end of file diff --git a/game/index.html b/game/index.html index e69de29..0b03e1a 100644 --- a/game/index.html +++ b/game/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + game board + + + + +
+

vampire match

+
+ Home + Score Board + About Us +
+ +
+
+
+ ABOUT US +
+ +
+
+
+ + + + + + \ No newline at end of file diff --git a/index.html b/index.html index b147c50..7a5a1dc 100644 --- a/index.html +++ b/index.html @@ -5,50 +5,59 @@ - - - - - Document + + + + + start
-
- -

- Welcome to Alchemy Bootstrap! -

- -

- 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? -

-
-

- 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? -

+

It's matching time! Play your basic matching memory game, but vampire style!

+
+
+ +
+ Choose your difficulty: + + + + +
+
- + \ No newline at end of file diff --git a/results/index.html b/results/index.html index e69de29..7ed5a46 100644 --- a/results/index.html +++ b/results/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + + + + score board + + + +
+

vampire match

+
+ Home + Score Board + About Us +
+ +
+
+
+
+ RESULTS +
+
+ + + + + + + + + + + + + + + + + + + + + +
NameTurns
Casey7
Soraya6
Katrina10
Brandon3
+
+
+ + + + + + \ No newline at end of file diff --git a/results/results.css b/results/results.css new file mode 100644 index 0000000..e69de29 diff --git a/results/results.js b/results/results.js new file mode 100644 index 0000000..e69de29 diff --git a/styles/home.css b/styles/home.css index 1820594..1e86850 100644 --- a/styles/home.css +++ b/styles/home.css @@ -1 +1,15 @@ -/* add home page styles here */ \ No newline at end of file +form { + height: auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +input.name { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; +} \ No newline at end of file diff --git a/styles/reset.css b/styles/reset.css index df18604..e69de29 100644 --- a/styles/reset.css +++ b/styles/reset.css @@ -1,39 +0,0 @@ - -/* adapted from http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -*{ - box-sizing: border-box; -} - -html, body { - height: 100%; - width: 100%; -} - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} - -ol, ul { - list-style: none; -} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index c492f8e..2227e19 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,119 +1,82 @@ - -body { - /* https://coolors.co/generate and click export -> scss to get the colors to copy and paste below*/ - /* --color1: hsla(349, 69%, 76%, 1); - --color2: hsla(207, 67%, 44%, 1); - --color3: hsla(200, 61%, 56%, 1); - --color4: hsla(187, 41%, 94%, 1); - --color5: hsla(170, 28%, 95%, 1); */ -/* - /* --color1: hsla(45, 86%, 83%, 1); - --color2: hsla(135, 65%, 98%, 1); - --color3: hsla(315, 37%, 86%, 1); - --color4: hsla(45, 73%, 98%, 1); - --color5: hsla(224, 40%, 79%, 1); */ - - --header-height: 80px; - --shadow: 0px 10px 20px -12px rgba(0,0,0,0.45); - --gutter: 30px; - --footer-height: 25px; - - font-family: 'Titillium Web', sans-serif; - background-color: var(--color2); +* { + box-sizing: border-box; } -main { +body, html { + width: 100%; + height: auto; + padding: 0; + margin: 0; display: flex; flex-direction: column; - justify-content: center; + justify-content: flex-start; align-items: center; - margin-bottom: calc(var(--footer-height)); + font-family: 'Prompt', sans-serif; + font-size: 16px; + background: white; + columns: black; } -section { - background-color: var(--color5); - width: 1000px; - max-width: 80%; - display: flex; - flex-direction: column; +header { + height: 150px; + width: 100%; + display: flex; justify-content: center; align-items: center; - padding-top: var(--gutter); - padding-bottom: var(--gutter); - margin-top: var(--gutter); - margin-bottom: var(--gutter); - border: solid 2px var(--color1); -} - -header { - display: flex; - justify-content: flex-end; - background-color: var(--color3); - height: var(--header-height); - box-shadow: var(--shadow); -} - -footer { - display: flex; - justify-content: flex-end; - background-color: var(--color3); - box-shadow: var(--shadow); + flex-direction: column; + border: 2px black solid; } - -h2 { - font-size: 1.8rem; - font-weight: bold; +h1 { + font-family: 'Chonburi', cursive; } -.gutter-right { - margin-right: 20px; +a { + color: black; + font-size: 1rem; + font-weight: 500; + text-align: center; + text-decoration: none; + cursor: default; + margin: 10px; } -.main-logo { - animation: pulse 5s infinite ease-in-out; +a:hover { + color: rgb(97, 205, 171); + cursor: default; } -header img { - height: var(--header-height); +main { + width: 100%; + height: auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 10px; } - - -content { - width: 80%; +button { + height: 30px; + background: black; + color: white; + font-family: 'Prompt', sans-serif; + font-weight: 400; + border: rgb(97, 205, 171) 3px solid; + border-radius: 5px; + margin: 20px; } -p { - margin: var(--gutter); -} - -footer { - position: fixed; - width: 100%; - bottom: 0; - height: var(--footer-height); - display: flex; - justify-content: flex-end; - background-color: var(--color3); - box-shadow: var(--shadow); +button:hover { + background:white; + color: black; + border: black 3px solid; + border-radius: 5px; } - - @keyframes pulse { - 20% { - transform: rotate3d(-10, -10, -10, 50deg) scale(1.2); - } - - 40% { - transform: rotate3d(10, 10, -10, 50deg) scale(1); - } - - 60% { - transform: rotate3d(-10, 10, 10, 50deg) scale(1.2); - } - - 80% { - transform: rotate3d(10, 10, 10, 50deg) scale(1); - } - } \ No newline at end of file +button:focus { + background: rgb(97, 205, 171); + color: black; + border: black 3px solid; + border-radius: 5px; +} \ No newline at end of file diff --git a/utils.js b/utils.js new file mode 100644 index 0000000..0e11524 --- /dev/null +++ b/utils.js @@ -0,0 +1,29 @@ +export function findById(id, array) { + for (let item of array) { + if (id === item.name) { + return item; + } + } +} + +const USERS = 'users'; +const CURRENTUSER = 'current user'; + +export function saveUsers(user) { + localStorage.setItem(USERS, JSON.stringify(user)); +} + +export function setCurrentUser(currentUser) { + localStorage.setItem(CURRENTUSER, JSON.stringify(currentUser)); +} + +export function getUsers() { + let stringyUser = localStorage.getItem(USERS); + if (!stringyUser) { + const emptyArray = []; + return emptyArray; + } + let parsedUser = JSON.parse(stringyUser); + return parsedUser; +} +