thepaperpilot/pages
1
0
Fork 0
Code Issues 1 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Added new header and part of the homepage

Browse source
This commit is contained in:
thepaperpilot 2019-10-29 22:56:34 -05:00
parent 3efcbd2704
commit 4ab3041fd0
10 changed files with 202 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.jekyll-metadata
View file

Binary file not shown.

25
_layouts/default.html
View file

@ -35,10 +35,21 @@
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="head">
<div class="breadcrumbs">
{% if page.title != "The Paper Pilot" %}
<h1><a href="/" style="color: #fff">The Paper Pilot</a></h1>
{% else %}
<h1>The Paper Pilot</h1>
{% endif %}
</div>
{% if page.title != "The Paper Pilot" %}
<h5><a href="/" style="color: #fff">The Paper Pilot</a></h5>
<h1 class="page-title">{{ page.title }}</h1>
{% endif %}
<h1 class="page-title">{{ page.title }}</h1>
<div class="sections">
{% for section in page.sections %}
<div onClick="document.getElementById('{{ section }}').scrollIntoView({ behavior: 'smooth' });">{{ section }}</div>
{% endfor %}
</div>
</div>
{% if page.links %}
@ -59,6 +70,7 @@
{% if page.nocard %}
{{ page.content }}
{% else %}
<div class="section">
<div class="card">
<div class="card-content">
{% if page.embed %}
@ -73,6 +85,7 @@
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endif %}
{% endfor %}
@ -80,9 +93,11 @@
{% elsif page.nocard %}
{{ content }}
{% else %}
<div class="card">
<div class="card-content">
{{ content }}
<div class="section">
<div class="card">
<div class="card-content">
{{ content }}
</div>
</div>
</div>
{% endif %}

2
_posts/2017-03-30-babble.md
View file

@ -7,4 +7,4 @@ cards: [Babble Buds Preview, Babble Buds, Babble Buds Screenshot, Engine, Movie
links: ["Source Code|https://github.com/thepaperpilot/Babble-Buds", "URealms Post|https://forums.urealms.com/discussion/272/babble/p1", "Babble Buds Download Page|https://github.com/thepaperpilot/Babble-Buds/releases", "Babble Movie Maker Download Page|https://github.com/thepaperpilot/BabbleMovieMaker/releases"]
tags: [javascript, pixi.js]
---
A free, open source virtual puppet show engine for pixi.js and unity, as well as an accompanying electron-based software suite. Use it for enhancing your digital tabletop roleplaying game, creating silly videos, or even cutscenes in a videogame!
A free, open source virtual puppet show engine I made for web and unity, as well as an accompanying electron-based puppet editor and multiplayer stage. Use it for enhancing your digital tabletop roleplaying game, creating silly videos, or even scripting cutscenes in a videogame!

BIN
assets/home/arrowLeft.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/home/arrowRight.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/home/arrowUp.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
assets/home/deviceTilt.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

85
css/main.css
View file

@ -194,12 +194,82 @@ button.accordion:focus {
.head {
color: white;
background-color: #333c4a;
padding: 20px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.head > * {
flex-basis: 50%;
}
.sections {
text-align: right;
}
.sections div {
display: inline;
cursor: pointer;
font-size: large;
padding: 10px;
color: white;
}
#intro {
width: 100%;
height: 100vh;
background-color: #333c4a;
}
#current_chat {
display: none;
width: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: xx-large;
background: rgba(1, 1, 1, .2);
padding: 20px;
border-radius: 10px;
}
#controls {
opacity: 0;
position: absolute;
left: 50%;
top: 25%;
transform: translate(-50%, -50%);
color: grey;
font-size: 250%;
background: rgba(1, 1, 1, .1);
padding: 20px;
border-radius: 10px;
text-align: center;
transition: opacity 1s ease;
}
#controls .inline {
width: 2rem;
}
.page-title {
font-size: 4.2rem;
line-height: 110%;
font-size: xx-large;
font-weight: 400;
text-align: center;
}
.section {
margin-top: -150px;
padding-top: 150px;
}
.card .card-content .card-title {
@ -261,15 +331,6 @@ a {
padding: 10px 10px 0 10px;
}
.head {
background-color: #333c4a;
box-shadow: 0 2px 3px #222;
padding: 20px;
padding-bottom: 40px;
margin-bottom: -50px;
text-align: center;
}
table {
margin: auto;
}
@ -299,7 +360,7 @@ a.btn, a.btn-flat, input.btn, input.btn-flat {
height: 100% !important;
}
body > .collapsible, body > .collection, body > .card, body .slider, body > .container {
body > .collapsible, body > .collection, body .card, body .slider, body > .container {
width: 90% !important;
max-width:940px !important;
margin:auto !important;

19
index.html
View file

@ -2,17 +2,24 @@
layout: default
title: The Paper Pilot
nocard: true
sections: [intro, about, featured, favorites]
featured: [Dice Armor, Babble Buds]
---
<div id="intro">
<div id="controls">Use <img class="inline" src="assets/home/arrowLeft.png" />, <img class="inline" src="assets/home/arrowUp.png" />, <img class="inline" src="assets/home/arrowRight.png" />, and <img class="inline" src="assets/home/deviceTilt.png" /> to control me!</div>
<div id="current_chat"></div>
</div>
<div class="section" id="about">
<div class="card">
<div class="card-content">
<span class="card-title">Hello!</span>
<p>I'm Anthony Lawn, or "The Paper Pilot", and I develop free, open source programs and games in my spare time, using a variety of languages and engines. I'm currently working towards my B.S. in Computer Science, after which I plan to go on to earning a Masters degree in the same, with a focus on Data Science.</p>
<span class="card-title">Why are most of your projects free and open source?</span>
<p >I really liked playing free online games growing up, but most of those sites have died- Armor games peaked in 2010! I do not believe mobile games have the same effect since, as a kid playing a game on a phone, you can't just think "This is fun I want to make one of these" unless you also have a computer. I believe there needs to be a new generation of sites with free online games (like <a href="https://itch.io/">itch.io</a>!) to inspire the next generation of game developers and computer scientists. That's why I want to make free online games anyone can play, and see how they work. No credit cards or even admin privileges required. All free, and open source. Enjoy :)</p>
<p>I'm Anthony Lawn, or "The Paper Pilot", and I develop free, open source programs and games in my spare time, using a variety of languages and engines. I received my B.S. in Computer Science at the University of Texas at Dallas, and am still there as I pursue my M.S. in Computer Science, with a focus on Human Computer Interaction.</p>
</div>
</div>
</div>
<div class="section" id="featured">
{% for project in page.featured %}
{% assign post = site.posts | where:"title",project | first %}
<div class="card" style="padding-bottom: calc(1rem + 40px);">
@ -28,7 +35,9 @@ featured: [Dice Armor, Babble Buds]
</div>
</div>
{% endfor %}
</div>
<div class="section" id="favorites">
<div class="card">
{% assign projects = site.posts | where:"featured","true" %}
{% for project in projects %}
@ -49,3 +58,7 @@ featured: [Dice Armor, Babble Buds]
</div>
{% endfor %}
</div>
</div>
<script src="https://cdn.rawgit.com/thepaperpilot/babble.js/master/dist/babble.js"></script>
<script src="js/home.js"></script>

92
js/home.js Normal file
View file

@ -0,0 +1,92 @@
let current_chat = document.getElementById("current_chat")
let controls = document.getElementById("controls")
// Load the stage and characters and stuff
let stage = new babble.Stage("intro", {
"numCharacters": 3,
"puppetScale": 1.5
}, {
"94370077":{"name":"brow_excited","location":"eyebrows/94370077.png"},"-1478408941":{"name":"brow_normal","location":"eyebrows/-1478408941.png"},"-1370165314":{"name":"brow_confused","location":"eyebrows/-1370165314.png"},"-894109551":{"name":"brow_sad","location":"eyebrows/-894109551.png"},"-1624236206":{"name":"brow_angry","location":"eyebrows/-1624236206.png"},"-679379193":{"name":"eyes_normal","location":"eyes/-679379193.png"},"256135152":{"name":"mouth_teeth","location":"mouths/256135152.png"},"1802568030":{"name":"mouth_ooo","location":"mouths/1802568030.png"},"-1156489428":{"name":"mouth_normal","location":"mouths/-1156489428.png"},"-2006318913":{"name":"mouth_open","location":"mouths/-2006318913.png"},"-1834200705":{"name":"mouth_sad","location":"mouths/-1834200705.png"},"1879914476":{"name":"body","location":"shirts/1879914476.png"},"-925878550":{"name":"head","location":"skin/-925878550.png"},"-1259854622":{"name":"glasses_normal","location":"glasses/-1259854622.png"},"208380174":{"name":"kobold","location":"hats/208380174.png"},"354769791":{"name":"seachef","location":"hats/354769791.png"},"478565665":{"name":"tophat","location":"hats/478565665.png"},"-479894397":{"name":"elf","location":"hats/-479894397.png"},"-1611255066":{"name":"petalwalker","location":"hats/-1611255066.png"},"-5576877":{"name":"porc","location":"hats/-5576877.png"},"-1485571036":{"name":"wizard","location":"hats/-1485571036.png"}
}, "assets/blackhat-assets/assets", loaded);
let gravy = {"deadbonesStyle":false,"body":[{"tab":"shirts","id":"1879914476","x":1.5,"y":-54,"rotation":0,"scaleX":1,"scaleY":1}],"head":[{"tab":"skin","id":"-925878550","x":1,"y":-210.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"hats","id":"478565665","x":-6,"y":-305,"rotation":0,"scaleX":1,"scaleY":1}],"hat":[],"mouths":["2","3","4","5"],"eyes":["0","1","5","6"],"emotes":[{"name":"default","enabled":true,"mouth":[{"tab":"mouths","id":"-1156489428","x":-15.5,"y":-125,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1478408941","x":-6.5,"y":-210,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"happy","enabled":true,"mouth":[{"tab":"mouths","id":"-1156489428","x":-16,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"confused","enabled":true,"mouth":[{"tab":"mouths","id":"256135152","x":-6,"y":-126.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1370165314","x":-9,"y":-212.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"gasp","enabled":true,"mouth":[{"tab":"mouths","id":"-2006318913","x":-5.5,"y":-123.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","id":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"ooo","enabled":true,"mouth":[{"tab":"mouths","id":"1802568030","x":-2,"y":-122.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","id":"94370077","x":-9.5,"y":-220,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"sad","enabled":true,"mouth":[{"tab":"mouths","id":"-1834200705","x":-14.5,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.75,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-894109551","x":-7.5,"y":-211.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"angry","enabled":true,"mouth":[{"tab":"mouths","id":"256135152","x":-12,"y":-128.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","id":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","id":"-1624236206","x":-7,"y":-207,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"wink","enabled":false,"mouth":[],"eyes":[]},{"name":"kiss","enabled":false,"mouth":[],"eyes":[]}],"props":[{"tab":"glasses","id":"-1259854622","x":-3,"y":-158,"rotation":0,"scaleX":1,"scaleY":1}],"name":"Gravy","id":1,"position":0,"facingLeft":false,"emote":"0"}
let start = "delay 100;\n" +
"add gravy 1 0;\n" +
"move 1 2;\n" +
"chat 1 0;"
let stageElement = document.getElementById("intro")
function loaded() {
stage.resize(null, stage.innerWidth, stage.innerHeight)
window.onresize = () => {
stage.resize(null, stage.innerWidth, stage.innerHeight)
}
startCutscene()
}
function startCutscene() {
let cut = new babble.Cutscene(stage, start, {"gravy": gravy})
let add = cut.actions.add.bind(cut)
cut.actions.add = function(callback, name, id, position) {
add(callback, name, id, position)
this.stage.resize()
}
cut.actions.chat = function(callback, target, chatId) {
let chats = [{
message: "I'm Anthony, or The Paper Pilot, and I make fun games and tools using Javascript and Unity!"
}]
current_chat.style.display = 'block'
this.stage.getPuppet(target).setBabbling(true)
chatter(callback, target, chats[chatId], this.stage, 0)
}
cut.start()
}
function chatter(callback, target, chat, stage, textPos) {
if (textPos++ > chat.message.length) {
stage.getPuppet(target).setBabbling(false)
} else {
current_chat.innerText = chat.message.substring(0, textPos) + "_"
setTimeout(() => {chatter(callback, target, chat, stage, textPos)}, 20)
}
}
// Make player controllable
window.onkeydown = function(e) {
let key = e.keyCode ? e.keyCode : e.which
current_chat.style.display = 'none'
hideControls()
if (key == 32) {
stage.getPuppet(1).setBabbling(true)
e.preventDefault()
}
}
window.onkeyup = function(e) {
let key = e.keyCode ? e.keyCode : e.which
if (key > 48 && key < 58)
stage.getPuppet(1).changeEmote(key - 49)
else if (key == 37) stage.getPuppet(1).moveLeft()
else if (key == 38) stage.getPuppet(1).jiggle()
else if (key == 39) stage.getPuppet(1).moveRight()
else if (key == 32) {
stage.getPuppet(1).setBabbling(false)
e.preventDefault()
}
}
function showControls() {
controls.style.opacity = 1
}
let timeout
function hideControls() {
controls.style.opacity = 0
if (timeout)
clearTimeout(timeout)
timeout = setTimeout(showControls, 4000)
}
hideControls()