mirror of
https://github.com/amark/gun.git
synced 2025-03-30 15:08:33 +00:00
331 lines
8.9 KiB
HTML
331 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- always start with these two lines to set a clean baseline for different devices -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="../style.css">
|
|
<!-- link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gun/examples/style.css" -->
|
|
<script src="https://cdn.jsdelivr.net/npm/gun/examples/jquery.js"></script>
|
|
|
|
<title>Win</title>
|
|
</head>
|
|
<body class="black whitet">
|
|
<style>
|
|
/*
|
|
Choose white text on a black background so you can add color in.
|
|
Pick your favorite font and choose a font size.
|
|
*/
|
|
@import url('https://fonts.googleapis.com/css?family=Montserrat');
|
|
html, body {
|
|
font-family: "Montserrat", sans-serif;
|
|
}
|
|
|
|
button, input {
|
|
padding: 1em;
|
|
background: transparent;
|
|
border: 1px solid white;
|
|
border-radius: 1.5em;
|
|
color: white;
|
|
margin: 0.5em;
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
}
|
|
button:hover, input:hover {
|
|
background: white;
|
|
color: black;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.air { padding-top: 9%; }
|
|
.yak button { font-size: 80%; }
|
|
.wag {
|
|
-webkit-animation: wag 3s infinite;
|
|
animation: wag 3s infinite;
|
|
} @keyframes wag {
|
|
0% {transform: rotate(0deg);}
|
|
50% {transform: rotate(-1deg);}
|
|
100% {transform: rotate(0deg);}
|
|
}
|
|
</style>
|
|
</style>
|
|
|
|
<!-- for educational sites, consider starting with a nice full screen welcome message -->
|
|
<div class="home hold full huef center air">
|
|
<div class="focus row">
|
|
<p><i>how to</i></p>
|
|
<p class="shout wag">Win at Life!</p>
|
|
<p><i>success, fame, power.</i></p>
|
|
<p><i>sex, ethics, & integrity.</i></p>
|
|
<!-- just like in real life, say who you are and give a concise reason why you add value to someone's life and then make a call to action, if they want to learn more they can always scroll to learn more -->
|
|
<div>
|
|
<!-- a class="unit hold" href="#fullscreen"><button>WATCH TRAILER</button></a -->
|
|
<a class="unit yak gap" href="#breathe"><button>PLAY GAME</button></a>
|
|
</div>
|
|
</div>
|
|
<div class="focus center row leak">
|
|
<!-- just like in real life, looking pretty attracts attention, so show off and look glamorous! -->
|
|
<img class="unit blink" src="" style="min-width: 10em; width: 80%;">
|
|
</div>
|
|
<script>location.hash = ''</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/gun/lib/fun.js"></script>
|
|
</div>
|
|
|
|
<div id="breathe" class="hold full green">
|
|
<style>
|
|
</style>
|
|
<div class="story pad">
|
|
<p class="loud crack">Step 1: Breathe</p>
|
|
<a class="unit yak" href="#water"><button>Yupe</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
<div id="water" class="hold full blue">
|
|
<style>
|
|
</style>
|
|
<div class="story pad">
|
|
<p class="loud crack">Step 2: Drink Water</p>
|
|
<p></p>
|
|
<a class="unit yak" href="#eat"><button>Next</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
<div id="eat" class="hold full red">
|
|
<style>
|
|
</style>
|
|
<div class="story pad">
|
|
<p class="loud crack">Step 3: Eat Once a Day</p>
|
|
<p>If you do not want to be eaten, do not eat things that would not want to be eaten.</p>
|
|
<a class="unit yak" href="#babies"><button>Got It</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
<div id="babies" class="hold full red">
|
|
<style>
|
|
</style>
|
|
<div class="story pad">
|
|
<p class="loud crack">Step 4: Babymaking* 😉</p>
|
|
<p>Find a willing player.</p>
|
|
<p><small> * This does not always make babies.</small></p>
|
|
<a class="unit yak" href="#make"><button>How?</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
<div id="make" class="hold full hue">
|
|
<style>
|
|
</style>
|
|
<div class="story pad">
|
|
<p class="loud crack">Step 5: Make Dance</p>
|
|
<p>Moving your body is how you express your thoughts.</p>
|
|
<p>What you do with your body is what others will come to know you for. So do well.</p>
|
|
<p>You can make art, songs, or stories; You can make science, tools, or discoveries.</p>
|
|
<p>Who are you?</p>
|
|
<a class="unit yak" href="#science"><button>I am a Scientist!</button></a>
|
|
<a class="unit yak" href="#art"><button>I am an Artist!</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
<div id="science" class="hold full hue">
|
|
<div class="story pad">
|
|
<p class="loud crack">Science: Knowing Games</p>
|
|
<p>If you must win one game, it should be the game of making games.</p>
|
|
<p>If you can make any game, then you will know how to win any game.</p>
|
|
<a class="unit yak" href="#games"><button>Games?</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
<div id="games" class="hold full hue">
|
|
<div class="story pad">
|
|
<p>Games have goals and play.</p>
|
|
<p>Play is a safe space to try new dances.</p>
|
|
<p>Goals try to get players to do a type of dance.</p>
|
|
<a class="unit yak" href="#swim"><button>Start</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
<div id="swim" class="hold full blue">
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css?family=Audiowide');
|
|
#hud {
|
|
opacity: 0.4;
|
|
font-family: 'Audiowide', cursive;
|
|
z-index: 999999999999;
|
|
transition: all 3s;
|
|
}
|
|
#hud .life {
|
|
position: fixed;
|
|
left: 50%;
|
|
bottom: 0px;
|
|
padding: 0.25em 1em 0.1em;
|
|
border-radius: 0.5em 0.5em 0 0;
|
|
transform: translateX(-50%);
|
|
background: black;
|
|
text-shadow: 0em -0.125em 0.75em white;
|
|
}
|
|
#hud .score {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 0px;
|
|
padding: 0.1em 1em 0.25em;
|
|
border-radius: 0 0 0.5em 0.5em;
|
|
transform: translateX(-50%);
|
|
background: black;
|
|
text-shadow: 0em 0.1em 0.75em white;
|
|
}
|
|
#hud .down {
|
|
bottom: -2em !important;
|
|
}
|
|
#hud .up {
|
|
top: -2em !important;
|
|
}
|
|
</style>
|
|
<div class="story pad">
|
|
<p>The simplest goal is to not "die" in the game.</p>
|
|
<p>Oh look, you've fallen into water and cannot breathe.</p>
|
|
<p>If you do not push the button to swim to the top, you'll lose the game.</p>
|
|
<a class="unit yak"><button>Swim</button></a>
|
|
</div>
|
|
<div id="hud">
|
|
<div class="score shade up">
|
|
SCORE: <span id="hudscore">0</span>%
|
|
</div>
|
|
<div class="life shade down">
|
|
LIFE: <span id="hudlife">100</span>%
|
|
</div>
|
|
</div>
|
|
<script>
|
|
;(function(){
|
|
var go, life = $('#hudlife').data();
|
|
$(window).on('hashchange', function(){
|
|
if(location.hash != '#swim'){ return }
|
|
$('#hudlife').text($('#hudlife').data().is = 100);
|
|
$('#hud .life').removeClass('down');
|
|
go = setInterval(function(){
|
|
if(0 >= life.is){
|
|
location.hash = 'die';
|
|
clearInterval(go);
|
|
go = false;
|
|
return;
|
|
}
|
|
$('#hudlife').text(life.is -= 1);
|
|
}, 100);
|
|
})
|
|
$('#swim a').on('click', function(){
|
|
$('#hudlife').text((life.is += 5) < 100? life.is : 100);
|
|
if(100 <= life.is){
|
|
location.hash = 'won';
|
|
clearInterval(go);
|
|
go = false;
|
|
return;
|
|
}
|
|
});
|
|
}());
|
|
</script>
|
|
</div>
|
|
|
|
<div id="won" class="hold full hue">
|
|
<div class="story pad">
|
|
<p>You won your first game! 🎉</p>
|
|
<p>See? I told you breathing is important.</p>
|
|
<p>You also learned the most basic dance: rapid poking.</p>
|
|
<p>The goal of the next game is to make the game you just won.</p>
|
|
<a class="unit yak" href="#won" style="z-index: 999999;"><button>Make</button></a>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/gh/amark/gun/lib/meta.js"></script>
|
|
<script>
|
|
meta.edit({name: "Add", combo: ['A']});
|
|
meta.edit({
|
|
name: "Timer",
|
|
combo: ['A','T'],
|
|
on: function(){
|
|
console.log("up");
|
|
this.to = this.to || setInterval(this.on, 100);
|
|
$("html, body").stop().animate({ scrollTop: $(window).scrollTop()-100 }, 100);
|
|
p.css({top: --p.y +'%'});
|
|
},
|
|
use: function(){},
|
|
up: function(){ clearTimeout(this.to); this.to = 0 }
|
|
});
|
|
meta.edit({
|
|
name: "Delete",
|
|
combo: ['A','D'],
|
|
on: function(){
|
|
$(meta.tap.on).remove();
|
|
},
|
|
use: function(){},
|
|
up: function(){}
|
|
});
|
|
meta.edit({
|
|
name: "Button",
|
|
combo: ['A','B'],
|
|
on: function(){
|
|
$(meta.tap.on).append("<a class='unit yak'><button>Button</button></a>")
|
|
},
|
|
use: function(){},
|
|
up: function(){}
|
|
});
|
|
meta.edit({
|
|
name: "Edit",
|
|
combo: ['E'],
|
|
on: function(){
|
|
$('body').attr('contenteditable', 'true' == $('body').attr('contenteditable')? false : true);
|
|
},
|
|
use: function(){},
|
|
up: function(){ }
|
|
});
|
|
</script>
|
|
<script>
|
|
window.requestAnimationFrame(function frame(){
|
|
return;
|
|
window.requestAnimationFrame(frame);
|
|
if(location.hash != '#won'){ return }
|
|
var p = $('#won a').offset();
|
|
var bx = p.left, by = p.top, mx = meta.tap.x, my = meta.tap.y;
|
|
bx = mx - bx; by = my - by;
|
|
var d = Math.sqrt(bx*bx + by*by);
|
|
console.log(bx, by, mx, my, d);
|
|
if(d > 250){ return }
|
|
$('#won a').css({position: 'fixed', left: bx + (Math.random()*100), top: by + (Math.random()*100)});
|
|
})
|
|
</script>
|
|
</div>
|
|
|
|
<div id="rules" class="hold full white blackt">
|
|
<style>
|
|
</style>
|
|
<div class="story pad">
|
|
<p class="loud crack">Bend these Rules if it is more Moral to do so</p>
|
|
<p></p>
|
|
<a class="unit yak" href="#water"><button>Next</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
<div id="die" class="hold full red">
|
|
<style>
|
|
</style>
|
|
<div class="story pad">
|
|
<p class="loud crack">GAME OVER</p>
|
|
<p></p>
|
|
<a class="unit yak" href="#make"><button>Start Over</button></a>
|
|
</div>
|
|
<script>
|
|
</script>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |