SpongeBob Starter
Working on SpongeBob life sim.
%%html
<style>
@import url('https://fonts.cdnfonts.com/css/krabby-patty');
#header_tag {
background-color: orange;
padding: 10px;
border: 3px solid;
color: white;
font-family: 'Krabby Patty', sans-serif;
font-size: 30px;
margin: auto;
text-align: center;
justify-content: center;
}
#displays {
display: flex;
justify-content: space-between;
}
#left_box {
position: relative;
align-items: center;
text-align: center;
color: white;
font-size:20px;
width:25%;
}
#right_box {
position: relative;
align-items: center;
color: white;
font-size:20px;
width:25%;
}
#bottom_text {
border-radius: 10px;
padding: 8px;
padding-left:25px;
padding-right:20px;
background-color: rgba(0,0,0,.5);
opacity:0;
width: 65%;
height: 100px;
max-height: 16%;
color: white;
margin: auto;
text-align:left;
font-size: 20px;
top: -10%;
font-family: 'trebuchet ms',sans-serif;
position:relative;
transform:none;
display:none;
}
#name_head {
border-radius: 10px;
padding: 8px;
padding-left:25px;
padding-right:20px;
background-color: rgba(0,0,0,1);
opacity:0;
width: 65%;
height: 100px;
max-height: 16%;
color: white;
margin: auto;
text-align:left;
font-size: 30px;
top: -12%;
font-family: 'Krabby Patty',sans-serif;
position:relative;
transform:none;
display:none;
}
.dialogue_selection {
background-color: rgba(0,0,0,.5);
border-radius: 10px;
border:0px;
font-family: "trebuchet ms",sans-serif;
color:white;
}
.dialogue_selection:hover {
color:yellow;
}
</style>
<html>
<div id="header_tag">
<p>New Text <button id="click2start" onclick="startThis()" style="font-size:20px;color:white;">PRESS TO START</button><button onclick="tboxUp()">BringUp</button><button onclick="tboxDown()">BringDown</button><button onclick="fadeBG(coffeeShopImg)">Cafe BG</button></p>
</div>
<br>
<div id="displays">
<div id="left_box">
</div>
<div id="bg_container" style="border:5px solid tan">
<img id="bg_img" width="360" src="https://images.nightcafe.studio/jobs/NbZpn5mHCc4aOJnTkTgy/NbZpn5mHCc4aOJnTkTgy--1--0t64w.jpg">
</div>
<div id="right_box">
</div>
</div>
<br>
<footer id="bottom_text">
<div id="textbox" style="font-family:'trebuchet ms', sans-serif">
Test for text.
</div>
</footer>
</html>
<script>
var homeImg = "https://images.nightcafe.studio/jobs/NbZpn5mHCc4aOJnTkTgy/NbZpn5mHCc4aOJnTkTgy--1--0t64w.jpg";
var libraryImg = "https://images.nightcafe.studio/jobs/TEL9XQrgZjuwl6B4QZfy/TEL9XQrgZjuwl6B4QZfy--1--zhwiv.jpg";
var restaurantImg = "https://images.nightcafe.studio/jobs/dwF793B80vPVu02QgpBr/dwF793B80vPVu02QgpBr--1--nin9p.jpg";
var emptyMallImg = "https://images.nightcafe.studio/jobs/KMC8kBhuArYOBPh2uqOa/KMC8kBhuArYOBPh2uqOa--4--e4c1a.jpg";
var paintStoreImg = "https://images.nightcafe.studio/jobs/zIuQs58EyZLDHaoBQczv/zIuQs58EyZLDHaoBQczv--1--ju4n7.jpg";
var theaterImg = "https://images.nightcafe.studio/jobs/5aYVoYaeY4Emeqz4kWCK/5aYVoYaeY4Emeqz4kWCK--1--pq6zs.jpg";
var portTownImg = "https://images.nightcafe.studio/jobs/gHRptHyVSYhtrlaeUPSG/gHRptHyVSYhtrlaeUPSG--1--m92sn.jpg";
var coffeeShopImg = "https://images.nightcafe.studio/jobs/FSo7lDApBFLCDQ3ju93L/FSo7lDApBFLCDQ3ju93L--1--rityb.jpg";
var groceryImg = "https://images.nightcafe.studio/jobs/xtBJjU41vSKfNsqxAugW/xtBJjU41vSKfNsqxAugW--1--g6vvi.jpg";
var neighborhoodImg = "https://images.nightcafe.studio/jobs/uhPEXwNAF9FCXjzrfbHi/uhPEXwNAF9FCXjzrfbHi--1--mrlsz.jpg";
var hospitalLobbyImg = "https://images.nightcafe.studio/jobs/0M0yyI648y04m4rXZR3e/0M0yyI648y04m4rXZR3e--1--xlxsn.jpg";
var allScenes = [homeImg, libraryImg, restaurantImg, emptyMallImg, paintStoreImg, theaterImg, portTownImg, coffeeShopImg, groceryImg, neighborhoodImg, hospitalLobbyImg];
var textbox = document.getElementById('textbox');
var textboxCont = document.getElementById('bottom_text');
var leftBox = document.getElementById('left_box');
var bgImage = document.getElementById('bg_img');
var rightBox = document.getElementById('right_box');
function tboxUp() {
textboxCont.style["display"] = "block";
textboxCont.style["top"] = "-10%"; //goal is up to "-25%"
var posVal = 10;
var opVal = 0.00625;
var animateBoxUp = setInterval(function() {
posVal++;
opVal = opVal * 1.5;
textboxCont.style["top"] = "-" + String(posVal) + "%";
textboxCont.style["opacity"] = String(opVal);
if (posVal >= 25) {
textboxCont.style["top"] = "-25%";
textboxCont.style["opacity"] = "1";
clearInterval(animateBoxUp);
};
}, 20);
}
function tboxDown() {
textboxCont.style["display"] = "block";
textboxCont.style["top"] = "-25%"; //goal is up to "-25%"
textboxCont.style["opacity"] = "1";
var posVal = 25;
var opVal = 1;
var animBoxDown = setInterval(function() {
posVal--;
opVal = opVal / 1.5;
textboxCont.style["top"] = "-" + String(posVal) + "%";
textboxCont.style["opacity"] = String(opVal);
if (posVal <= 10) {
clearInterval(animBoxDown);
textboxCont.style["top"] = "-10%";
textboxCont.style["opacity"] = "0";
textbox.innerHTML = "";
textboxCont.setAttribute('onclick', '');
textboxCont.style["cursor"] = 'auto';
};
}, 20);
}
function fadeBG(imageURL) {
return new Promise(resolve => {
bgImage.style["opacity"] = "1";
var opVal = 1;
var fadeOut = setInterval(function() {
opVal -= 0.1;
bgImage.style["opacity"] = String(opVal);
if (opVal <= 0) {
clearInterval(fadeOut);
bgImage.style["opacity"] = "0";
}
}, 50);
setTimeout(function() {
opVal = 0;
bgImage.src = imageURL;
var fadeIn = setInterval(function() {
opVal += 0.1;
bgImage.style["opacity"] = String(opVal);
if (opVal >= 1) {
clearInterval(fadeIn);
bgImage.style["opacity"] = "1";
resolve(true);
}
}, 50);
}, 700)
})
}
var timeout = async ms => new Promise(res => setTimeout(res, ms));
var next = false;
async function waitUserInput() {
while (next === false) await timeout(50); // pauses script
next = false;
}
async function typeMessage(text) {
return new Promise(resolve => {
textbox.innerHTML = "";
char = 0;
string = "";
var typeProcess = setInterval(() => {
string += text[char];
textbox.innerHTML = string;
char++;
if (char >= text.length) {
clearInterval(typeProcess);
textboxCont.onclick = function() {next = true};
textboxCont.style["cursor"] = "pointer";
resolve(true);
}
}, 15);
});
}
async function typeScene(list) {
for (let i = 0; i < list.length; i++) {
var currentText = list[i];
await typeMessage(currentText);
await waitUserInput();
textboxCont.onclick = "";
textboxCont.style["cursor"] = "";
};
return new Promise(resolve => {resolve(true)});
}
async function startThis() {
tboxUp();
await typeScene(["This is the first line.", "This is the second line."]);
tboxDown();
//for (bg of allScenes) {await fadeBG(bg)};
}
</script>
New Text
