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

Added prototype into black hat page

Browse source
This commit is contained in:
thepaperpilot 2017-09-15 15:09:30 -05:00
parent 1ec61c9657
commit cfa98f8258
46 changed files with 307 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
_content/blackhat/assets/background.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 252 KiB

BIN
_content/blackhat/assets/baddie.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
_content/blackhat/assets/baddieArmor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
_content/blackhat/assets/baddieRanged.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
_content/blackhat/assets/baddieRangedArmor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
_content/blackhat/assets/bar.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 529 B

BIN
_content/blackhat/assets/coin.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
_content/blackhat/assets/crystal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
_content/blackhat/assets/deflect.mp3 Normal file
View file

Binary file not shown.

BIN
_content/blackhat/assets/eyebrows/-1370165314.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
_content/blackhat/assets/eyebrows/-1478408941.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
_content/blackhat/assets/eyebrows/-1624236206.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
_content/blackhat/assets/eyebrows/-894109551.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
_content/blackhat/assets/eyebrows/94370077.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
_content/blackhat/assets/eyes/-679379193.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
_content/blackhat/assets/fly.mp3 Normal file
View file

Binary file not shown.

BIN
_content/blackhat/assets/fortress.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
_content/blackhat/assets/glasses/-1259854622.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
_content/blackhat/assets/hats/-1485571036.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
_content/blackhat/assets/hats/-1611255066.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
_content/blackhat/assets/hats/-479894397.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
_content/blackhat/assets/hats/-5576877.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
_content/blackhat/assets/hats/208380174.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
_content/blackhat/assets/hats/354769791.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
_content/blackhat/assets/hats/478565665.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
_content/blackhat/assets/hats/911485366.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7 KiB

BIN
_content/blackhat/assets/impact.mp3 Normal file
View file

Binary file not shown.

BIN
_content/blackhat/assets/land.mp3 Normal file
View file

Binary file not shown.

BIN
_content/blackhat/assets/mouths/-1156489428.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 590 B

BIN
_content/blackhat/assets/mouths/-1834200705.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 459 B

BIN
_content/blackhat/assets/mouths/-2006318913.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 732 B

BIN
_content/blackhat/assets/mouths/1802568030.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 338 B

BIN
_content/blackhat/assets/mouths/256135152.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 939 B

BIN
_content/blackhat/assets/shirts/1879914476.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
_content/blackhat/assets/skin/-925878550.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
_content/blackhat/assets/slime.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
_content/blackhat/assets/slime_armor.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
_content/blackhat/assets/smoke.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
_content/blackhat/assets/squish.mp3 Normal file
View file

Binary file not shown.

BIN
_content/blackhat/assets/zap.mp3 Normal file
View file

Binary file not shown.

81
_content/blackhat/bh_prototype.html Normal file
View file

@ -0,0 +1,81 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Black Hat</title>
</head>
<script src="https://cdn.rawgit.com/thepaperpilot/babble.js/master/dist/babble.js"></script>
<script src="lib/pixi-particles.min.js"></script>
<style>
.definition {
width: 40%;
height: 300px;
color: #8f8f8f;
font-size: x-large;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.chatbox {
position: absolute;
height: 50%;
top: 50%;
width: 100%;
left: 0;
background: #2a323d;
transition: all 1s;
overflow: hidden;
}
.chatbox.hidden {
top: 100%;
height: 0;
}
.chatbox > div {
width: calc(90% - 44px);
height: calc(90% - 44px);
border-radius: 20px;
border: 2px solid #969696;
position: absolute;
top: 5%;
left: 5%;
padding: 20px;
color: white;
font-size: x-large;
}
.name {
margin-bottom: 10px;
font-weight: bold;
color: gold;
}
.continue {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
</style>
<body style="margin: 0; background: rgba(0, 0, 0, 0) url('https://www.toptal.com/designers/subtlepatterns/patterns/darkness.png') repeat scroll 0% 0%;">
<div id="definition" class="definition">
BLACKHAT:<br><br>
n. (Hacker Lingo) Hacker who uses his or her skills for malicious purposes and/or personal gain. Defacing websites, writing viruses, stealing personal information, and booting people off chat programs are all considered blackhat activities.
</div>
<div id="chatbox" class="chatbox hidden">
<div id="current_chat" style="display: none">
<div id="name" class="name">Gravy</div>
<div id="message" class="message">Waa?!?!?!</div>
<div class="continue">Click to continue</div>
</div>
<div id="instructions">
Click the protagonist (the one with the hat) to perform research and make decisions, click the antagonist (the one with the moustache) to commit your choices!<br><br>
Also, use the arrow keys to move and hold spacebar to babble, and the number keys to change emotes.
</div>
</div>
<div id="screen" style="height: 50%"></div>
<script src="js/index.js"></script>
</body>
</html>

175
_content/blackhat/js/index.js Normal file
View file

@ -0,0 +1,175 @@
// Variables
let cutscene = true // whether or not we're currently in a cutscene. Starts at true until everything loaded
let isLoaded = false // turned to true when either 4 seconds have passed or all assets loaded
let chatClicked = false // whether or not the chatbox has been clicked
// Load the stage and characters and stuff
// Less than ideal process, but I don't know how to load JSON client side
let stage = new babble.Stage("screen", {
"numCharacters": 5,
"puppetScale": 1,
"assets": [
{"name": "eyebrows"},
{"name": "eyes"},
{"name": "mouths"},
{"name": "shirts"},
{"name": "skin"},
{"name": "glasses"},
{"name": "hats"}
]
}, {
"eyebrows": {"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"}},
"eyes": {"-679379193":{"name":"eyes_normal","location":"eyes/-679379193.png"}},
"mouths": {"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"}},
"shirts": {"1879914476":{"name":"body","location":"shirts/1879914476.png"}},
"skin": {"-925878550":{"name":"head","location":"skin/-925878550.png"}},
"glasses": {"-1259854622":{"name":"glasses_normal","location":"glasses/-1259854622.png"}},
"hats": {"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", loaded);
let gravy = {"deadbonesStyle":false,"body":[{"tab":"shirts","hash":"1879914476","x":1.5,"y":-54,"rotation":0,"scaleX":1,"scaleY":1}],"head":[{"tab":"skin","hash":"-925878550","x":1,"y":-210.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"hats","hash":"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","hash":"-1156489428","x":-15.5,"y":-125,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1478408941","x":-6.5,"y":-210,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"happy","enabled":true,"mouth":[{"tab":"mouths","hash":"-1156489428","x":-16,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"confused","enabled":true,"mouth":[{"tab":"mouths","hash":"256135152","x":-6,"y":-126.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1370165314","x":-9,"y":-212.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"gasp","enabled":true,"mouth":[{"tab":"mouths","hash":"-2006318913","x":-5.5,"y":-123.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","hash":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"ooo","enabled":true,"mouth":[{"tab":"mouths","hash":"1802568030","x":-2,"y":-122.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","hash":"94370077","x":-9.5,"y":-220,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"sad","enabled":true,"mouth":[{"tab":"mouths","hash":"-1834200705","x":-14.5,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.75,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-894109551","x":-7.5,"y":-211.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"angry","enabled":true,"mouth":[{"tab":"mouths","hash":"256135152","x":-12,"y":-128.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-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","hash":"-1259854622","x":-3,"y":-158,"rotation":0,"scaleX":1,"scaleY":1}],"name":"Gravy","id":1,"position":0,"facingLeft":false,"emote":"0"}
let not_gravy = {"deadbonesStyle":false,"body":[{"tab":"shirts","hash":"1879914476","x":1.5,"y":-54,"rotation":0,"scaleX":1,"scaleY":1}],"head":[{"tab":"skin","hash":"-925878550","x":1,"y":-210.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1624236206","x":-5,"y":-139,"rotation":0,"scaleX":0.6931818181818182,"scaleY":0.6470588235294116}],"hat":[],"mouths":["2","3","4","5"],"eyes":["0","1","5","6"],"emotes":[{"name":"default","enabled":true,"mouth":[{"tab":"mouths","hash":"-1156489428","x":-15.5,"y":-125,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1478408941","x":-6.5,"y":-210,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"happy","enabled":true,"mouth":[{"tab":"mouths","hash":"-1156489428","x":-16,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"confused","enabled":true,"mouth":[{"tab":"mouths","hash":"256135152","x":-6,"y":-126.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-1370165314","x":-9,"y":-212.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"gasp","enabled":true,"mouth":[{"tab":"mouths","hash":"-2006318913","x":-5.5,"y":-123.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","hash":"94370077","x":-10.5,"y":-225,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"ooo","enabled":true,"mouth":[{"tab":"mouths","hash":"1802568030","x":-2,"y":-122.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyebrows","hash":"94370077","x":-9.5,"y":-220,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"sad","enabled":true,"mouth":[{"tab":"mouths","hash":"-1834200705","x":-14.5,"y":-125.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.75,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-894109551","x":-7.5,"y":-211.5,"rotation":0,"scaleX":1,"scaleY":1}]},{"name":"angry","enabled":true,"mouth":[{"tab":"mouths","hash":"256135152","x":-12,"y":-128.5,"rotation":0,"scaleX":1,"scaleY":1}],"eyes":[{"tab":"eyes","hash":"-679379193","x":-7,"y":-187.5,"rotation":0,"scaleX":1,"scaleY":1},{"tab":"eyebrows","hash":"-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","hash":"-1259854622","x":-3,"y":-158,"rotation":0,"scaleX":1,"scaleY":1}],"name":"Not Gravy","id":2,"position":6,"facingLeft":true,"emote":"0"}
let start = "delay 1000;\n" +
"add gravy 1 0;\n" +
"add not_gravy 2 6;\n" +
"move 1 1,\n" +
"move 2 5;"
let script = "move 1 0,\n" +
"move 2 6;\n" +
"remove 1;\n" +
"remove 2;\n" +
"delay 1000;\n" +
"add gravy 1 0;\n" +
"move 1 1;\n" +
"jiggle 1;\n" +
"emote 1 8;\n" +
"chat 1 0;\n" +
"add not_gravy 2 6;\n" +
"move 2 4;\n" +
"emote 2 8;\n" +
"chat 2 1;\n" +
"chat 1 2;\n" +
"emote 2 1;\n" +
"chat 2 3,\n" +
"jiggle 2;\n" +
"delay 400;\n" +
"jiggle 2;\n" +
"delay 400;\n" +
"jiggle 2;\n" +
"delay 400;\n" +
"babble 2;\n" +
"delay 2000;"
function loaded() {
stage.resize(null, window.innerWidth, window.innerHeight / 2)
stage.registerPuppetListener("click", (e) => {
if (cutscene) return
if (e.target.puppet.id === 2) {
startCutscene()
}
})
window.onresize = () => {
stage.resize(null, window.innerWidth, window.innerHeight / 2)
}
if (isLoaded) setup()
else isLoaded = true
}
function setup() {
var op = 1; // initial opacity
let element = document.getElementById('definition')
let timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
document.getElementById('chatbox').className = "chatbox"
new babble.Cutscene(stage, start, {"gravy": gravy, "not_gravy": not_gravy}, () => {cutscene = false}).start()
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
function startCutscene() {
cutscene = true
document.getElementById('instructions').style.display = 'none'
let cut = new babble.Cutscene(stage, script, {"gravy": gravy, "not_gravy": not_gravy}, stopCutscene)
cut.actions.chat = function(callback, target, chatId) {
let chats = [{
name: "Protagonist",
message: "Alright, I'm ready to start hacking!"
}, {
name: "Antagonist",
message: "Not so fast! I can tell you're up to no good."
}, {
name: "Protagonist",
message: "Ah shucks, I've been found out"
}, {
name: "Antagonist",
message: "Bwahahahahahahahahhahahaha!"
}]
document.getElementById('current_chat').style.display = 'block'
document.getElementById('name').innerText = chats[chatId].name
this.stage.getPuppet(target).setBabbling(true)
chatClicked = false
chatter(callback, target, chats[chatId], this.stage, 0)
}
cut.start()
}
function chatter(callback, target, chat, stage, textPos) {
if (chatClicked && textPos < chat.message.length) {
textPos = chat.message.length
chatClicked = false
}
if (textPos++ > chat.message.length) {
stage.getPuppet(target).setBabbling(false)
if (chatClicked) {
document.getElementById('current_chat').style.display = 'none'
callback()
}
else setTimeout(() => {chatter(callback, target, chat, stage, textPos)}, 1)
} else {
document.getElementById('message').innerText = chat.message.substring(0, textPos) + "_"
setTimeout(() => {chatter(callback, target, chat, stage, textPos)}, 20)
}
}
function stopCutscene() {
chatClicked = true
cutscene = false
document.getElementById('instructions').style.display = 'block'
}
// Make player controllable
window.onkeydown = function(e) {
if (cutscene) return
let key = e.keyCode ? e.keyCode : e.which
if (key == 32) {
stage.getPuppet(1).setBabbling(true)
}
}
window.onkeyup = function(e) {
if (cutscene) return
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)
}
window.addEventListener('click', () => {
chatClicked = true
})
// Ensure definition is up for at least 4 seconds
setTimeout(() => {
if (isLoaded) setup()
else isLoaded = true
}, 4000)

9
_content/blackhat/lib/pixi-particles.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
_content/blackhat/lib/pixi-sound.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

39
_content/blackhat/prototype.md Normal file
View file

@ -0,0 +1,39 @@
---
layout: default
title: Black Hat Prototype
---
<div style="position: relative;">
<button id="fullscreenBtn" style="position: absolute; bottom: 10px; right: 10px; width: 30px; height: 30px; background: none; border: none;">
<img src="https://itch.io/static/images/enlarge.svg" style="width: 30px; height: 30px">
</button>
<iframe id="prototype" msallowfullscreen="true" allowfullscreen="true" src="/content/blackhat/bh_prototype.html" scrolling="no" allowtransparency="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0" style="width: 100%; height: 500px"></iframe>
</div>
<script>
function fullscreen() {
// check if fullscreen mode is available
if (document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled) {
// which element will be fullscreen
var iframe = document.getElementById('prototype');
// Do fullscreen
if (iframe.requestFullscreen) {
iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
iframe.webkitRequestFullscreen();
} else if (iframe.mozRequestFullScreen) {
iframe.mozRequestFullScreen();
} else if (iframe.msRequestFullscreen) {
iframe.msRequestFullscreen();
}
}
else {
console.log('Your browser is not supported');
}
}
document.getElementById('fullscreenBtn').addEventListener('click', fullscreen)
</script>

3
_posts/2016-09-17-blackhat.md
View file

@ -3,8 +3,7 @@ layout: default
title: Black Hat
category: Game
banner: blackhat
cards: [Black Hat]
links: ["Prototype|https://thepaperpilot.itch.io/black-hat-prototype?secret=mlqMVnG9sDY3bQdVElOaAfYzQ"]
cards: [Black Hat Prototype, Black Hat]
tags: [pre production, concept, game]
---
A game about an 80s blackhat hacker who plans and executes feats of social engineering to take down the largest conglomerate business in history.