Chapter 1: Informational Text Boxes (2004)
Summary:
The text boxes used for informational prompts, as they appears in the original 2004 version of The Thousand-Year Door.
Notes:
Credit to Toodles Team for ripping the hand sprite from Paper Mario (N64).
EDIT 5/13/2023: Cleaned up the code.
(See the end of the chapter for more notes.)
Chapter Text
[ Goombella joined the party! ]
[ Goombella’s Abilities: A Primer ]
[ Press 🅧 to get information about nearby people, places, and objects. ]
Example HTML Code
<div class="ttyd-info press-star">
<p align="center">
<b>
<span class="hide">[</span>
Goombella joined the party!
<span class="hide">]</span>
</b>
</p>
</div>
<div class="ttyd-info press-star">
<p align="center" class="no-center">
<b>
<span class="hide">[</span>
Goombella’s Abilities: A Primer
<span class="hide">]</span>
</b>
</p>
</div>
<div class="ttyd-info press-star">
<p align="center">
<b>
<span class="hide">[</span>
Press <span class="x-button"></span><span class="hide">🅧</span> to get information about nearby people, places, and objects.
<span class="hide">]</span>
</b>
</p>
</div>
[ Save all game progress up to this point? ]
> Yes
No
[ Saving… Do not touch the Memory Card in Slot A or the POWER Button. ]
[ Your progress was saved. ]
Example HTML Code
<div class="ttyd-info">
<p align="center">
<b>
<span class="hide">[</span>
Save all game progress up to this point?
<span class="hide">]</span>
</b>
</p>
</div>
<div class="ttyd-select">
<p align="center">
<b><span class="hide">> </span>Yes</b>
<br />
<span class="option">No</span>
</p>
</div>
<div class="ttyd-info">
<p align="center">
<b>
<span class="hide">[</span>
Saving… Do not touch the Memory Card in Slot A or the POWER Button.
<span class="hide">]</span>
</b>
</p>
</div>
<div class="ttyd-info press-star">
<p align="center">
<b>
<span class="hide">[</span>
Your progress was saved.
<span class="hide">]</span>
</b>
</p>
</div>
CSS Code
/* TTYD ttyd-info Box (2004) */
#workskin .ttyd-info {
background-image: url('https://i.imgur.com/wcqnesr.png');
background-repeat: repeat;
background-position: 5px 5px;
border: 4px solid #CDCACE;
border-radius: 16px;
box-shadow: 3px 3px #818381, 3px 3px #818381 inset;
color: #ffffff;
display: block;
margin: 6px auto 22px;
padding: 5px;
width: 600px;
max-width: 80%;
}
#workskin .ttyd-info p {
padding: 0px 17px;
text-align: left;
}
#workskin .ttyd-info b {
font-weight: normal;
}
#workskin .ttyd-info.press-star::after {
content: '';
background-image: url('https://i.imgur.com/P1KSYy9.png');
background-size: cover;
cursor: pointer;
position: relative;
bottom: 20px;
float: right;
width: 20px;
height: 20px;
}
#workskin .x-button {
background-image: url('https://i.imgur.com/rNZaFr7.png');
background-size: cover;
display: inline-block;
position: relative;
top: 5px;
height: 18px;
width: 20px;
}
/* TTYD Dialog Select (2004) */
#workskin .ttyd-select {
background-color: #DEDDDF;
border-radius: 16px;
box-shadow: 2px 2px #ffffff inset, -2px -2px #888C76 inset;
color: #000000;
display: block;
font-size: 14px;
margin: 6px auto 22px;
padding: 1px 15px;
width: max-content;
}
#workskin .ttyd-select p {
margin-top: 10px;
margin-bottom: 10px;
padding-left: 5px;
text-align: left;
}
#workskin .ttyd-select b {
background: -webkit-linear-gradient(left, red, purple);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
float: left;
text-align: left;
position: relative;
right: 23px;
}
#workskin .ttyd-select b::before {
content: '';
background-image: url('https://i.imgur.com/dXOv2re.png');
background-size: cover;
position: relative;
top: 3px;
right: 7px;
float: left;
width: 22px;
height: 16px;
}
#workskin .ttyd-select.option {
display: flex;
text-align: left;
position: relative;
right: 1px;
}
/* Miscellaneous */
#workskin .ttyd-info .no-center {
text-align: center;
}
#workskin .hide {
display: none;
}
Notes:
I was thinking of doing another fic lampooning Paper Mario: The Thousand-Year Door (see also: Paper OMORI: The Four-Year Slumber), so I decided to spice things up and make a work skin recreating the game’s tutorial text boxes.
It was pretty easy to do—a lot of the code is borrowed from my Super Mario Galaxy work skin, since the text prompts there were conceptually similar to what I was trying to do. It may be simple, but I’m certain it’ll be useful in the long run for me. And hey, maybe you guys will appreciate it, too!
Chapter 2: Informational Text & TEC-XX (2024)
Summary:
The text boxes used for both informational prompts and TEC-XX’s dialogue, as they appears in the remade 2024 version of The Thousand-Year Door.
Notes:
EDIT 1/31/2024: Threw in TEC-XX’s dialogue box too, because why not.
(See the end of the chapter for more notes.)
Chapter Text
Informational Text Boxes
[ Goombella’s Abilities: A Primer ]
[ When you approach people or objects, you may see an icon appear over Goombella’s head. ]
[ If that happens, you can press 🅧 to learn more about that person or object. ]
Example HTML Code
<div class="ttyd-info-2024 press-star">
<p align="center">
<b>
<span class="hide">[</span>
Goombella’s Abilities: A Primer
<span class="hide">]</span>
</b>
</p>
</div>
<div class="ttyd-info-2024 press-star">
<p align="center">
<b>
<span class="hide">[</span>
When you approach people or objects, you may see an icon appear over Goombella’s head.
<span class="hide">]</span>
</b>
</p>
</div>
<div class="ttyd-info-2024 press-star">
<p align="center">
<b>
<span class="hide">[</span>
If that happens, you can press <span class="switch-x">🅧</span> to learn more about that person or object.
<span class="hide">]</span>
</b>
</p>
</div>
TEC-XX Dialogue Box
“[ How amusing. I am right here, before your eyes. ]”
“[ I am this laboratory’s main computer. I am the TEC-XX. Many call me TEC. You may. ]”
“[ Sir Grodus created me to be a perfect computer, one that is flawless in its reason. ]”
Example HTML Code
<div class="ttyd-tecxx-2024 press-star">
<p align="center">
<b>
<span class="hide">“[</span>
How amusing. I am right here, before your eyes.
<span class="hide">]”</span>
</b>
</p>
</div>
<div class="ttyd-tecxx-2024 press-star">
<p align="center">
<b>
<span class="hide">“[</span>
I am this laboratory’s main computer. I am the TEC-XX. Many call me TEC. You may.
<span class="hide">]”</span>
</b>
</p>
</div>
<div class="ttyd-tecxx-2024 press-star">
<p align="center">
<b>
<span class="hide">“[</span>
Sir Grodus created me to be a perfect computer, one that is flawless in its reason.
<span class="hide">]”</span>
</b>
</p>
</div>
Dialog Selection
[ Save all game progress up to this point? ]
> Yes
No
[ Saving… Do not touch the Memory Card in Slot A or the POWER Button. ]
[ Your progress was saved. ]
Example HTML Code
<div class="ttyd-info-2024 press-star">
<p align="center">
<b>
<span class="hide">[</span>
Save all game progress up to this point?
<span class="hide">]</span>
</b>
</p>
</div>
<p class="ttyd-select-2024" align="center">
<b class="option">
<span class="hide">> </span>Yes
</b>
<br />
<span class="option">No</span>
</p>
<div class="ttyd-info-2024">
<p align="center">
<b>
<span class="hide">[</span>
Saving… Do not touch the Memory Card in Slot A or the POWER Button.
<span class="hide">]</span>
</b>
</p>
</div>
<div class="ttyd-info-2024 press-star">
<p align="center">
<b>
<span class="hide">[</span>
Your progress was saved.
<span class="hide">]</span>
</b>
</p>
</div>
CSS Code
/* TTYD Tutorial Box (2024) */
#workskin .ttyd-info-2024 {
background: linear-gradient(#D3D4D3, #BDBEBD);
border-radius: 15px;
box-shadow: 0 -1px white, 0 1px #AAAAAA;
color: #B2BFE6;
margin: 25px auto;
padding: 5px 6px;
position: relative;
width: 500px;
max-width: 80%;
}
#workskin .ttyd-info-2024 p {
align-items: center;
background-image: radial-gradient(circle at 50px 15px, #FFFFFF30 20px, transparent 60px), linear-gradient(#003aff40, #003aff40), url('https://i.imgur.com/wcqnesr.png');
background-repeat: repeat;
box-shadow: 0 0 10px inset black, 0 1px rgba(255, 255, 255, 0.5);
border-radius: 10px;
display: flex;
margin: 0;
padding: 25px 15px;
text-align: left;
min-height: 60px;
}
#workskin .ttyd-info-2024 b {
font-weight: normal;
}
/* TTYD TEC-XX Dialogue (2024) */
#workskin .ttyd-tecxx-2024 {
background: linear-gradient(#A2A99F, #829288);
border-radius: 5px;
box-shadow: 0 1px inset white, 0 -1px inset #5c665d, 0 0 2px #91ff94, 0 0 2px #91ff94;
color: #069216;
margin: 25px auto;
padding: 7px 6px 8px;
position: relative;
width: 500px;
max-width: 80%;
}
#workskin .ttyd-tecxx-2024::before {
content: '';
background-image: radial-gradient(circle at 60px -10px, #FFFFFF30 20px, transparent 70px);
display: block;
transform: scaleY(0.84);
position: absolute;
top: -8%;
left: 0;
height: 124px;
width: 100%;
}
#workskin .ttyd-tecxx-2024 p {
align-items: center;
background: repeating-linear-gradient(0deg, #FFFFFF10, #FFFFFF10 1px, transparent 1px, transparent 4px), linear-gradient(#164558, #082D42 30%, #082D42 50%, #083542 60%, #176E63);
background-color: transparent;
box-shadow: 0 0 10px inset black, 0 1px #EFF3EF;
border-radius: 3px;
display: flex;
margin: 0;
padding: 25px 15px;
text-align: left;
min-height: 60px;
}
#workskin .ttyd-tecxx-2024 b {
font-weight: normal;
position: relative;
z-index: 1;
}
/* TTYD Dialog Select (2024) */
#workskin .ttyd-select-2024 {
background-color: white;
background-image: linear-gradient(#FFFFFFA0, #FFFFFF80), url('https://i.imgur.com/wcqnesr.png');
background-blend-mode: luminosity;
border-radius: 10px;
box-shadow: 0 -1px white, 0 1px #707070;
color: #5E5E5E;
margin: 25px auto;
padding: 8px 10px;
width: max-content;
max-width: 60%;
}
#workskin .ttyd-select-2024 .option {
align-items: center;
background-color: #DEE3E4;
border-top: 1px solid white;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
cursor: pointer;
display: flex;
margin: 8px auto;
padding: 3px 32px 1px 9px;
position: relative;
min-width: 40px;
}
#workskin .ttyd-select-2024 b.option,
#workskin .ttyd-select-2024 .option:hover {
background-color: white;
border-top-color: white;
border-bottom-color: white;
box-shadow: 0 0 5px #DD6F76, 0 1px 5px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.5);
color: #DD6F76;
font-weight: normal;
}
#workskin .ttyd-select-2024 b.option::before {
content: '';
background-image: url('https://i.imgur.com/YOYrXXO.png');
background-size: contain;
background-repeat: no-repeat;
cursor: default;
position: absolute;
left: -17px;
height: 20px;
width: 24px;
}
#workskin .ttyd-select-2024 br {
display: none;
}
/* TTYD Text Advance Icon */
#workskin .ttyd-info-2024.press-star::after,
#workskin .ttyd-tecxx-2024.press-star::after {
content: '';
background-image: url('https://i.imgur.com/mai9bCV.png');
background-size: contain;
cursor: pointer;
position: absolute;
bottom: -10px;
right: 15px;
height: 37px;
width: 37px;
}
/* Miscellaneous */
#workskin .switch-x {
color: #69B6FF;
font-weight: normal;
}
#workskin .hide {
display: none;
}
Notes:
This isn’t that different from the prior version, but I figured since it was so simple, I might as well do it anyway. Apologies for this being rather overdue, given that the TTYD remake came out last summer.
Sadly, it seems like no one’s ripped the little Star icon from the game itself (despite doing so for all of the dialogue boxes), so I had to borrow the one from Origami King to use instead. I would’ve included the little blue notches in the corners, too—but unfortunately, that would have required too many additional HTML elements for my liking. It’s a shame, but what can you do.