Permalink
Browse files

improved organization of characters, added pink sakura map option and…

… sakura's character
  • Loading branch information...
dakotahducharme committed Jan 9, 2019
1 parent 011f6e4 commit ff9f1ff7969a0664a719459cbb4b071fa3fef0fc
Showing with 249 additions and 76 deletions.
  1. +21 −8 css/style.css
  2. +4 −68 js/app.js
  3. +4 −0 js/link.js
  4. +15 −0 js/naruto.js
  5. +5 −0 js/pink-sakura.js
  6. +16 −0 js/sakura.js
  7. +19 −0 js/zelda.js
  8. +33 −0 link.html
  9. BIN link.png
  10. +33 −0 naruto.html
  11. BIN pink-sakura.gif
  12. +33 −0 pink-sakura.html
  13. BIN sakura-char.png
  14. +33 −0 sakura.html
  15. +33 −0 zelda.html
View
@@ -43,15 +43,15 @@ footer {
}
#start {
position: fixed;
left: 400px;
top: 250px;
font-size: 32px;
border: none;
font-weight: bold;
position: relative;
top: 50%;
left: 45%;
margin-top: 150px;
}
#start:hover, #no:hover {
#start:hover, #no:hover, a:hover {
color: #219d7e;
}
@@ -89,18 +89,31 @@ footer {
}
button, #yes, #no {
button, a, #yes, #no {
border: none;
font-size: 20px;
text-align: center;
}
#basic-map {
#basic-map, #pink-map {
position: relative;
top: 50%;
left: 50%;
width: 700px;
height: 700px;
margin-top: -100px; /* Half the height */
margin-top: 100px; /* Half the height */
margin-left: -350px; /* Half the width */
margin-bottom: 250px;
}
.character {
position: relative;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
margin-top: 100px; /* Half the height */
margin-left: -350px; /* Half the width */
margin-bottom: 250px;
}
}
View
@@ -1,77 +1,13 @@
console.log('hi?')
$('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('<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"><a href="naruto.html" id="naruto">Naruto</a></li></ul>')
$('.homepage').append('<ul><li class="name-input"><a href="sakura.html" id="sakura">Sakura</a></li></ul>')
$('.homepage').append('<ul><li class="name-input"><a href="link.html" id="link">Link</a></li></ul>')
$('.homepage').append('<ul><li class="name-input"><button id="zelda">Zelda</button></li></ul>')
// $('.welcome').append('<input type=')
$('#naruto').on('click', function() {
$('.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
@@ -0,0 +1,4 @@
function startMap () {
$('#map').append('<img id="basic-map" src="map.gif">')
}
startMap();
View
@@ -0,0 +1,15 @@
function startMap () {
$('#map').append('<img id="basic-map" src="map.gif">')
}
$('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() {
$('.welcome').remove()
startMap();
})
View
@@ -0,0 +1,5 @@
function startMap () {
$('#map').append('<img id="pink-map" src="pink-sakura.gif">')
$('#map').append('<img class="character" src="sakura-char.png">')
}
startMap();
View
@@ -0,0 +1,16 @@
function startMap () {
$('#map').append('<img id="basic-map" src="map.gif">')
}
$('.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><a href="pink-sakura.html" id="yes">Yes</a></li></ul>')
$('body').append('<ul><li><button id="no">No</button></li></ul>')
$('#no').on('click', function() {
$('.welcome').remove()
startMap();
})
View
@@ -0,0 +1,19 @@
function startMap () {
$('#map').append('<img id="basic-map" src="map.gif">')
}
startMap();
$('#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() {
$('.welcome').remove()
startMap();
})
})
View
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<title>Pokawaii</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.ui.js"></script>
</head>
<body>
<header>
<h1><img id="pokawaii-gif" src="pokawaii.gif" alt="Pokawaii!"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="https://github.com/dakotahducharme">Github</a></li>
<!-- <li><a href="#"></a></li> -->
</ul>
</nav>
</header>
<div id="map"></div>
<footer>
<p>Made with love by Dakotah Ducharme</p>
</footer>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/link.js"></script>
</body>
</html>
View
BIN link.png
Binary file not shown.
View
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<title>Pokawaii</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.ui.js"></script>
</head>
<body>
<header>
<h1><img id="pokawaii-gif" src="pokawaii.gif" alt="Pokawaii!"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="https://github.com/dakotahducharme">Github</a></li>
<!-- <li><a href="#"></a></li> -->
</ul>
</nav>
</header>
<div id="map"></div>
<footer>
<p>Made with love by Dakotah Ducharme</p>
</footer>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/naruto.js"></script>
</body>
</html>
View
Binary file not shown.
View
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<title>Pokawaii</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.ui.js"></script>
</head>
<body>
<header>
<h1><img id="pokawaii-gif" src="pokawaii.gif" alt="Pokawaii!"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="https://github.com/dakotahducharme">Github</a></li>
<!-- <li><a href="#"></a></li> -->
</ul>
</nav>
</header>
<div id="map"></div>
<footer>
<p>Made with love by Dakotah Ducharme</p>
</footer>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/pink-sakura.js"></script>
</body>
</html>
View
Binary file not shown.
View
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<title>Pokawaii</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.ui.js"></script>
</head>
<body>
<header>
<h1><img id="pokawaii-gif" src="pokawaii.gif" alt="Pokawaii!"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="https://github.com/dakotahducharme">Github</a></li>
<!-- <li><a href="#"></a></li> -->
</ul>
</nav>
</header>
<div id="map"></div>
<footer>
<p>Made with love by Dakotah Ducharme</p>
</footer>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/sakura.js"></script>
</body>
</html>
View
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">
<title>Pokawaii</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.ui.js"></script>
</head>
<body>
<header>
<h1><img id="pokawaii-gif" src="pokawaii.gif" alt="Pokawaii!"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="https://github.com/dakotahducharme">Github</a></li>
<!-- <li><a href="#"></a></li> -->
</ul>
</nav>
</header>
<div id="map"></div>
<footer>
<p>Made with love by Dakotah Ducharme</p>
</footer>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/zelda.js"></script>
</body>
</html>

0 comments on commit ff9f1ff

Please sign in to comment.