Permalink
Browse files

Added maps to each character, testing out different types of inputs a…

…nd minigames
  • Loading branch information...
dakotahducharme committed Jan 9, 2019
1 parent 9b3dacd commit 011f6e440b8093a8d4b7ed38dd6f75cf617348a3
Showing with 119 additions and 14 deletions.
  1. BIN Untitled.gif
  2. +56 −8 css/style.css
  3. +3 −1 index.html
  4. +60 −5 js/app.js
  5. BIN map.gif
  6. BIN Untitled 2.gif → pokawaii.gif
View
Binary file not shown.
View
@@ -3,9 +3,11 @@ h1 {
font-family: 'Fredoka One', cursive;
font-size: 60px;
color: #b8cbff;
padding-left: 30px;
text-align: center;
padding-left: 180px;
}
body {
font-family: helvetica;
margin: 0 auto;
@@ -14,16 +16,19 @@ body {
a {
text-decoration: none;
color: black;
}
nav {
ul {
text-align: center;
font-family: 'Fredoka One', cursive;
}
li {
display: inline;
padding-right: 45px;
padding-right: 75px;
color: black;
font-family: 'Fredoka One', cursive;
}
footer {
@@ -38,21 +43,64 @@ footer {
}
#start {
position: fixed;
left: 400px;
top: 250px;
font-size: 32px;
border: none;
font-weight: bold;
}
#start:hover, #no:hover {
color: #219d7e;
}
#link:hover {
color: #219d7e;
}
#sakura:hover, #yes:hover{
color: #ff68ad;
}
#naruto:hover {
color: #faa542;
}
#zelda {
color: #FFFFFF;
}
#zelda:hover {
color: black;
font-weight: bold;
}
#ask-name {
#ask-name, #map-color, .welcome {
padding-top: 60px;
text-align: center;
font-size: 28px;
font-family: 'Fredoka One', cursive;
}
.name-input {
display: inline;
text-align: center;
font-size: 32px;
}
.welcome {
text-align: center;
font-weight: 700;
font-size: 62px;
button, #yes, #no {
border: none;
font-size: 20px;
}
#basic-map {
position: relative;
top: 50%;
left: 50%;
width: 700px;
height: 700px;
margin-top: -100px; /* Half the height */
margin-left: -350px; /* Half the width */
margin-bottom: 250px;
}
View
@@ -11,7 +11,7 @@
</head>
<body>
<header>
<h1>Pokawaii</h1>
<h1><img id="pokawaii-gif" src="pokawaii.gif" alt="Pokawaii!"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
@@ -24,6 +24,8 @@ <h1>Pokawaii</h1>
<button id="start" type="button">Start</button>
</div>
<div id="map"></div>
<footer>
<p>Made with love by Dakotah Ducharme</p>
</footer>
View
@@ -3,20 +3,75 @@ $('h1').velocity('callout.bounce', {
duration: 3000
})
function startMap () {
$('body').append('<img id="basic-map" src="map.gif">')
}
$('#start').on('click', function() {
$('#start').remove()
$('.homepage').append('<p id="ask-name">Oh! I know you! Yer name is uh....um...</p>')
$('.homepage').append('<li class="name-input"><button id="naruto">Naruto</button></li></ul>')
$('.homepage').append('<li class="name-input"><button id="sakura">Sakura</button></li></ul>')
$('.homepage').append('<li class="name-input"><button id="link">Link</button></li></ul>')
$('.homepage').append('<li class="name-input"><button id="zelda">Zelda</button></li>')
$('.homepage').append('<ul><li class="name-input"><button id="naruto">Naruto</button></li></ul>')
$('.homepage').append('<ul><li class="name-input"><button id="sakura">Sakura</button></li></ul>')
$('.homepage').append('<ul><li class="name-input"><button id="link">Link</button></li></ul>')
$('.homepage').append('<ul><li class="name-input"><button id="zelda">Zelda</button></li></ul>')
// $('.welcome').append('<input type=')
$('#naruto').on('click', function() {
$('body').append('<div class="naruto-adventure"><p class="welcome">Welcome to Pokawaii, Naruto!</p></div>')
$('.homepage').remove();
$('body').append('<div class="naruto-adventure"><p class="welcome">Ah, yes! Naruto! I remember, hehe...How could I forget a noble ninja such as yourself? Anyway, welcome to Pokawaii</p></div>')
$('.welcome').velocity('transition.shrinkIn', {
duration: 300,
})
$('.naruto-adventure').append('<button id="naruto-game-start">start</button>')
$('#naruto-game-start').on('click', function() {
startMap();
$('.welcome').remove()
$('#naruto-game-start').remove()
})
})
$('#sakura').on('click', function() {
$('.homepage').remove();
$('body').append('<div class="sakura-adventure"><div id="map-color"><p class="welcome">Oh yes!! Sakura, of course. Your favorite color is pink, right? So, is it safe to assume you would like a pink map? </p></div></div>')
$('.welcome').velocity('transition.shrinkIn', {
duration: 300,
})
$('body').append('<ul><li><button id="yes">Yes</button></li></ul>')
$('body').append('<ul><li><button id="no">No</button></li></ul>')
$('#yes').on('click', function() {
startMap();
$('.welcome').remove()
$('#yes').remove()
$('#no').remove()
})
$('#no').on('click', function() {
startMap();
})
})
$('#link').on('click', function() {
$('.homepage').remove();
$('body').append('<div class="link-adventure"><p class="welcome">Welcome to Pokawaii, Link. May the Goddess smile upon you.</p></div>')
$('.welcome').velocity('transition.shrinkIn', {
duration: 300,
})
$('.link-adventure').append('<button id="link-game-start">start</button>')
$('#link-game-start').on('click', function() {
startMap();
$('.welcome').remove()
})
})
$('#zelda').on('click', function() {
$('.homepage').remove();
$('body').append('<div class="zelda-adventure"><p class="welcome">Welcome to Pokawaii, Princess Zelda. May the Goddess smile upon you.</p></div>')
$('.zelda-adventure').append('<li><button id="thanks">thank you</button></li>')
$('.welcome').velocity('transition.shrinkIn', {
duration: 300,
})
$('#thanks').on('click', function() {
})
})
})
View
BIN map.gif
Binary file not shown.
File renamed without changes.

0 comments on commit 011f6e4

Please sign in to comment.