Added Menu

JKarlavige · May 31, 2018 · 4660853 · 4660853
1 parent 1e2e5c4
commit 4660853
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 8 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>Diced</title>
     <link href="https://fonts.googleapis.com/css?family=Kanit:300,500" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
   </head>
   <body>
     <noscript>

diff --git a/src/App.css b/src/App.css
@@ -13,6 +13,7 @@
   font-size:100%;
   box-sizing:border-box;
   letter-spacing:1px;
+  text-decoration: none;
 }
 h1, h2, h3, h4, h5, h6 {
   font-weight:500;
@@ -31,14 +32,17 @@ p, li {
   font-size: 1.1rem;
 }
 a {
-  color: #39dc5e;
+  color:#ebbd6f;
 }
 a:hover {
-  color: #39dc5e;
+  color:#ebbd6f;
   text-decoration:underline;
 }
 
 /* App Styles */
+.hide {
+  display:none !important;
+}
 body {
   background:url('./images/app-bg.jpg');
   min-height:100vh;

diff --git a/src/App.js b/src/App.js
@@ -4,6 +4,7 @@ import Menu from './components/Menu/Menu.js'
 import Board from './components/Board/Board.js'
 import Roll from './components/Roll/Roll.js'
 import Loading from './components/Loading/Loading.js'
+import Credits from './components/Credits/Credits.js'
 /* Helpers */
 import createArray from './helpers/createArray.js'
 import randomRoll from './helpers/randomRoll.js'
@@ -66,6 +67,7 @@ class App extends Component {
     let isLoading = this.state.loading
     return (
       <main>
+        <Credits />
         <Menu 
           total={this.state.total}
           numDice={this.state.numDice}

diff --git a/src/components/Credits/Credits.css b/src/components/Credits/Credits.css
@@ -0,0 +1,74 @@
+#mobile-menu {
+  position:fixed;
+  right:20px;
+  top:20px;
+  z-index:9999;
+  background:#371f1f;
+  width:40px;
+  height:40px;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  cursor:pointer;
+}
+#mobile-menu .fas {
+  font-size:1.5rem;
+  color:#fff;
+}
+#credits {
+  background:#881d2d;
+  padding:2.75rem 1rem;
+  height:50vh;
+  text-align:center;
+  position:absolute;
+  top:-50vh;
+  left:0;
+  right:0;
+  display:flex;
+  flex-direction:column;
+  justify-content: space-between;
+  transition:top .4s;
+  -webkit-transition:top .4s;
+}
+.credit-block {
+  display:flex;
+  flex-direction:column;
+}
+.credit-block span {
+  font-weight:300;
+}
+#credit-logo {
+  display:block;
+  width:80%;
+  max-width:200px;
+  margin:0 auto;
+}
+#react-logo {
+  animation: App-logo-spin infinite 20s linear;
+  width:50px;
+  display:block;
+  margin:0 auto;
+}
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Tablet */
+@media only screen and (min-width: 480px) {
+#credits {
+  width:75%;
+  left:auto;
+  flex-direction:row;
+  padding:1rem;
+  height:20vh;
+  align-items:center;
+}
+}
+
+/* Desktop */
+@media only screen and (min-width: 768px) {
+#credits {
+  padding:1rem 7rem;
+}
+}
diff --git a/src/components/Credits/Credits.js b/src/components/Credits/Credits.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import './Credits.css'
+import menuIcon from '../../images/menu-icon.svg'
+import jkLogo from '../../images/jk_light.svg'
+import reactLogo from '../../images/react-logo.svg';
+/* Helpers */
+import handleMenu from '../../helpers/handleMenu.js'
+
+class Credits extends Component {
+	render() {
+		return [
+			<div id='mobile-menu' onClick={handleMenu} key={1}>
+				<i className='fas fa-bars'></i>
+			</div>,
+			<section id='credits' key={2}>
+				<div className='credit-block'>
+					<span>Developed by</span>
+					<a href='http://jasonkarlavige.com' id='credit-logo' target='_blank'><img src={jkLogo} id="jk-logo" alt="Jason Karlavige"/></a>
+				</div>
+				<div className='credit-block'>
+					<span>Dice Styles by</span>
+					<a href='https://game-icons.net/tags/dice.html' target='_blank'>Game-icons.net</a>
+					<a href='https://websemantics.uk/tools/svg-to-background-image-conversion/' target='_blank'>webSemantics</a>
+				</div>
+				<div className='credit-block'>
+					<span id='credit-react'>Made with React</span>
+					<img src={reactLogo} id="react-logo" alt="logo" />
+				</div>
+			</section>
+		]
+	}
+}
+
+export default Credits
+
diff --git a/src/components/Menu/Menu.css b/src/components/Menu/Menu.css
@@ -47,11 +47,6 @@
 
 /* Desktop */
 @media only screen and (min-width: 768px) {
-#menu {
-	float:left;
-	width:25%;
-	height:100vh;
-}
 #roll-result {
 	margin:50px 0 50px;
 }

diff --git a/src/components/Roll/Roll.css b/src/components/Roll/Roll.css
@@ -6,7 +6,6 @@
   font-weight:500;
   cursor:pointer;
   text-align:center;
-  position:fixed;
   bottom:0;
   right:0;
   height:15vh;

diff --git a/src/helpers/handleMenu.js b/src/helpers/handleMenu.js
@@ -0,0 +1,34 @@
+// Toggles Menu
+let isActive = false
+
+export default function handleMenu(array) {
+	const credits = document.querySelector('#credits')
+	const menu = document.querySelector('#mobile-menu')
+	const icon = document.querySelector('.fas')
+	let rollBtn = document.querySelector('#roll-btn')
+
+	// If roll button is clicked, hide menu
+	rollBtn.addEventListener('click', hideMenu)
+
+	// If menu is hidden, show - Else hide menu
+	if(isActive === false) {
+		showMenu()
+	} else {
+		hideMenu()
+	}
+
+	// Show Menu
+	function showMenu() {
+		credits.style.top = 0 + 'vh'
+		icon.classList.remove('fa-bars')
+		icon.classList.add('fa-times')
+		isActive = true
+	}
+	// Hide Menu
+	function hideMenu() {
+		credits.style.top = -50 + 'vh'
+		icon.classList.remove('fa-times')
+		icon.classList.add('fa-bars')
+		isActive = false
+	}
+}
diff --git a/src/images/dice/1.png b/src/images/dice/1.png
diff --git a/src/images/dice/2.png b/src/images/dice/2.png
diff --git a/src/images/dice/3.png b/src/images/dice/3.png
diff --git a/src/images/dice/4.png b/src/images/dice/4.png
diff --git a/src/images/dice/5.png b/src/images/dice/5.png
diff --git a/src/images/dice/6.png b/src/images/dice/6.png
diff --git a/src/images/jk_light.svg b/src/images/jk_light.svg
diff --git a/src/images/menu-icon.svg b/src/images/menu-icon.svg
diff --git a/src/images/react-logo.svg b/src/images/react-logo.svg