Newer
Older
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="img/icon.ico" />
<title>Strip Poker Night at the Inventory</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/spni.css">
<link rel="stylesheet" type="text/css" href="css/spniDialogueUtilities.css">
</head>
<body onload="initialSetup()">
<!-- Warning Screen -->
<div id="warning-screen" class="screen-container" hidden>
<div class="screen">
<!-- Banner Flair -->
<button id="title-settings-button" class="bordered smooth-button smooth-button-red" onclick="showGameSettingsModal()">
FarawayVision
committed
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showVersionModal()">
<div class="substitute-version">Unknown Version</div>
<div class="substitute-version-time"></div>
<button class="bordered smooth-button smooth-button-red bug-report-button title-bug-report-button" onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
Help / FAQ
</button>
<a class="bordered reddit-button smooth-button smooth-button-red" href="https://www.reddit.com/r/spnati/">
<img class="reddit-logo" src="img/reddit.png"/>
</a>
<button id="title-load-button" class="bordered smooth-button smooth-button-red banner-flair toolbar-button" onclick="showImportModal()">
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
</button>
<!-- Banner -->
<div class="title-banner-container">
<div class="bordered title-banner-area">
<img class="bordered title-banner" src="img/title.png">
</div>
</div>
<!-- Content -->
<div class="main-title-container">
<div class="warning-text">
<p>This game contains material that is only suitable for adults. <b style="color:#DD3333">If you are under the age of 18, please leave now.</b></p>
<br>
<p><b style="color:#DD3333">Strip Poker Night at the Inventory</b> is a free, open source, and community run project. All characters represented within are 18+ and the property of their original owners.</p>
<p>The latest version of the game can be played at
<br><a href="https://spnati.net" target="_blank"><b>spnati.net</b></a></p>
<p>Make sure to check out our list of <a href="#" onclick="showHelpModal()">Frequently-Asked Questions</a>!</p>
FarawayVision
committed
<br>
<p>By clicking the button below, you are confirming that you are an adult and such material is legal in your region.</p>
<div class='title-menu-buttons-container'>
<div class='bordered title-start-edge'>
<button class='bordered smooth-button smooth-button-red title-start-button' onclick="enterTitleScreen()">
<img class='title-entrance-image' src='img/enter.png'/>
</button>
</div>
<!-- Title Screen -->
<div id="title-screen" class="screen-container" hidden>
<div class="screen">
ReformCopyright
committed
<!-- Title Candy -->
<img id="left-title-candy" class="title-candy" src=""/>
<img id="right-title-candy" class="title-candy" src=""/>
<!-- Banner Flair -->
<button id="title-settings-button" class="bordered smooth-button smooth-button-red" onclick="showGameSettingsModal()">
FarawayVision
committed
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showVersionModal()">
<div class="substitute-version">Unknown Version</div>
<div class="substitute-version-time"></div>
<button class="bordered smooth-button smooth-button-red bug-report-button title-bug-report-button" onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
Help / FAQ
</button>
<a class="bordered reddit-button smooth-button smooth-button-red" href="https://www.reddit.com/r/spnati/">
<img class="reddit-logo" src="img/reddit.png"/>
</a>
<button id="title-load-button" class="bordered smooth-button smooth-button-red banner-flair toolbar-button" onclick="showImportModal()">
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
</button>
<!-- Banner -->
<div class="title-banner-container">
<div class="bordered title-banner-area">
<img class="bordered title-banner" src="img/title.png">
</div>
</div>
<!-- Player Name -->
<div id="title-name-block">
<div class="title-label">Who are you?</div>
<input type="text" class='bordered' id='player-name-field'/>
</div>
<div class="title-gender-size-container">
<!-- Player Gender -->
<input type='image' value='' id='male-gender-button' class='bordered title-content-button title-gender-button' src='img/male.png' onclick='changePlayerGender("male")'>
<input type='image' value='' id='female-gender-button' class='bordered title-content-button title-gender-button' src='img/female.png' onclick='changePlayerGender("female")'>
<!-- Player Male Size -->
<div id='male-size-container' class='title-size-block medium'>
<input type='image' value='' id="small-junk-button" class='bordered title-small-button title-content-button title-size-button' src='img/male_small.png' onclick='changePlayerSize("small")'>
<input type='image' value='' id="medium-junk-button" class='bordered title-medium-button title-content-button title-size-button' src='img/male_medium.png' onclick='changePlayerSize("medium")'>
<input type='image' value='' id="large-junk-button" class='bordered title-large-button title-content-button title-size-button' src='img/male_large.png' onclick='changePlayerSize("large")'>
</div>
<!-- Player Female Size -->
<div id='female-size-container' class='title-size-block medium'>
<input type='image' value='' id="small-boobs-button" class='bordered title-small-button title-content-button title-size-button' src='img/female_small.png' onclick='changePlayerSize("small")'>
<input type='image' value='' id="medium-boobs-button" class='bordered title-medium-button title-content-button title-size-button' src='img/female_medium.png' onclick='changePlayerSize("medium")'>
<input type='image' value='' id="large-boobs-button" class='bordered title-large-button title-content-button title-size-button' src='img/female_large.png' onclick='changePlayerSize("large")'>
</div>
<!-- Player Wardrobe -->
<div id='title-wardrobe-block'>
<div class='title-label'>What are you wearing?</div>
<div id='title-warning-label'>Select 0 to 8 articles. Wear whatever you want.</div>
<!-- Male Clothing -->
<div id='male-clothing-container' class='title-clothing-container'>
<input type='image' value='' id="male-clothing-option-0" class='bordered title-clothing-button title-content-button titleClothing0' src='player/male/hat.png' onclick='selectClothing(0)'>
Joseph Kantel
committed
<input type='image' value='' id="male-clothing-option-1" class='bordered title-clothing-button title-content-button titleClothing1' src='player/male/headphones.png' onclick='selectClothing(1)'>
<input type='image' value='' id="male-clothing-option-2" class='bordered title-clothing-button title-content-button titleClothing2' src='player/male/jacket.png' onclick='selectClothing(2)'>
<input type='image' value='' id="male-clothing-option-3" class='bordered title-clothing-button title-content-button titleClothing3' src='player/male/shirt.png' onclick='selectClothing(3)'>
<input type='image' value='' id="male-clothing-option-4" class='bordered title-clothing-button title-content-button titleClothing4' src='player/male/tshirt.png' onclick='selectClothing(4)'>
<input type='image' value='' id="male-clothing-option-5" class='bordered title-clothing-button title-content-button titleClothing5' src='player/male/undershirt.png' onclick='selectClothing(5)'>
<input type='image' value='' id="male-clothing-option-6" class='bordered title-clothing-button title-content-button titleClothing6' src='player/male/glasses.png' onclick='selectClothing(6)'>
<input type='image' value='' id="male-clothing-option-7" class='bordered title-clothing-button title-content-button titleClothing7' src='player/male/belt.png' onclick='selectClothing(7)'>
<input type='image' value='' id="male-clothing-option-8" class='bordered title-clothing-button title-content-button titleClothing8' src='player/male/pants.png' onclick='selectClothing(8)'>
<input type='image' value='' id="male-clothing-option-9" class='bordered title-clothing-button title-content-button titleClothing9' src='player/male/shorts.png' onclick='selectClothing(9)'>
<input type='image' value='' id="male-clothing-option-10" class='bordered title-clothing-button title-content-button titleClothing10' src='player/male/kilt.png' onclick='selectClothing(10)'>
<input type='image' value='' id="male-clothing-option-11" class='bordered title-clothing-button title-content-button titleClothing11' src='player/male/boxers.png' onclick='selectClothing(11)'>
<input type='image' value='' id="male-clothing-option-12" class='bordered title-clothing-button title-content-button titleClothing12' src='player/male/necklace.png' onclick='selectClothing(12)'>
<input type='image' value='' id="male-clothing-option-13" class='bordered title-clothing-button title-content-button titleClothing13' src='player/male/tie.png' onclick='selectClothing(13)'>
<input type='image' value='' id="male-clothing-option-14" class='bordered title-clothing-button title-content-button titleClothing14' src='player/male/gloves.png' onclick='selectClothing(14)'>
<input type='image' value='' id="male-clothing-option-15" class='bordered title-clothing-button title-content-button titleClothing15' src='player/male/socks.png' onclick='selectClothing(15)'>
<input type='image' value='' id="male-clothing-option-16" class='bordered title-clothing-button title-content-button titleClothing16' src='player/male/shoes.png' onclick='selectClothing(16)'>
<input type='image' value='' id="male-clothing-option-17" class='bordered title-clothing-button title-content-button titleClothing17' src='player/male/boots.png' onclick='selectClothing(17)'>
</div>
<!-- Female Clothing -->
<div id='female-clothing-container' class='title-clothing-container' hidden>
<input type='image' value='' id="female-clothing-option-0" class='bordered title-clothing-button title-content-button titleClothing0' src='player/female/hat.png' onclick='selectClothing(0)'>
Joseph Kantel
committed
<input type='image' value='' id="female-clothing-option-1" class='bordered title-clothing-button title-content-button titleClothing1' src='player/female/headphones.png' onclick='selectClothing(1)'>
<input type='image' value='' id="female-clothing-option-2" class='bordered title-clothing-button title-content-button titleClothing2' src='player/female/jacket.png' onclick='selectClothing(2)'>
<input type='image' value='' id="female-clothing-option-3" class='bordered title-clothing-button title-content-button titleClothing3' src='player/female/shirt.png' onclick='selectClothing(3)'>
<input type='image' value='' id="female-clothing-option-4" class='bordered title-clothing-button title-content-button titleClothing4' src='player/female/tanktop.png' onclick='selectClothing(4)'>
<input type='image' value='' id="female-clothing-option-5" class='bordered title-clothing-button title-content-button titleClothing5' src='player/female/bra.png' onclick='selectClothing(5)'>
<input type='image' value='' id="female-clothing-option-6" class='bordered title-clothing-button title-content-button titleClothing6' src='player/female/glasses.png' onclick='selectClothing(6)'>
<input type='image' value='' id="female-clothing-option-7" class='bordered title-clothing-button title-content-button titleClothing7' src='player/female/belt.png' onclick='selectClothing(7)'>
<input type='image' value='' id="female-clothing-option-8" class='bordered title-clothing-button title-content-button titleClothing8' src='player/female/pants.png' onclick='selectClothing(8)'>
<input type='image' value='' id="female-clothing-option-9" class='bordered title-clothing-button title-content-button titleClothing9' src='player/female/shorts.png' onclick='selectClothing(9)'>
<input type='image' value='' id="female-clothing-option-10" class='bordered title-clothing-button title-content-button titleClothing10' src='player/female/skirt.png' onclick='selectClothing(10)'>
<input type='image' value='' id="female-clothing-option-11" class='bordered title-clothing-button title-content-button titleClothing11' src='player/female/panties.png' onclick='selectClothing(11)'>
<input type='image' value='' id="female-clothing-option-12" class='bordered title-clothing-button title-content-button titleClothing12' src='player/female/necklace.png' onclick='selectClothing(12)'>
<input type='image' value='' id="female-clothing-option-13" class='bordered title-clothing-button title-content-button titleClothing13' src='player/female/bracelet.png' onclick='selectClothing(13)'>
Joseph Kantel
committed
<input type='image' value='' id="female-clothing-option-14" class='bordered title-clothing-button title-content-button titleClothing14' src='player/female/gloves.png' onclick='selectClothing(14)'>
<input type='image' value='' id="female-clothing-option-15" class='bordered title-clothing-button title-content-button titleClothing15' src='player/female/stockings.png' onclick='selectClothing(15)'>
<input type='image' value='' id="female-clothing-option-16" class='bordered title-clothing-button title-content-button titleClothing16' src='player/female/socks.png' onclick='selectClothing(16)'>
<input type='image' value='' id="female-clothing-option-17" class='bordered title-clothing-button title-content-button titleClothing17' src='player/female/shoes.png' onclick='selectClothing(17)'>
<!-- Start Button -->
<div class='title-menu-buttons-container'>
<div class='bordered title-gallery-edge'>
<button class='bordered smooth-button smooth-button-red centered-icon-button title-menu-button title-gallery-button' onclick="loadGalleryScreen()">
<img class='centered-icon-image' src='img/gallery.svg'/>
</button>
</div>
<div class='bordered title-start-edge'>
<button class='bordered smooth-button smooth-button-red centered-icon-button title-start-button' onclick="validateTitleScreen()">
<img class='centered-icon-image title-entrance-image' src='img/enter.png'/>
</button>
</div>
<div class='bordered title-tags-edge'>
<button class='bordered smooth-button smooth-button-red centered-icon-button title-menu-button title-tags-button' onclick="showPlayerTagsModal()">
<span class="glyphicon glyphicon-tags centered-icon-glyphicon" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Main Select Screen -->
<div id="main-select-screen" class="screen-container" hidden>
<div class="screen">
<!-- Opponent Dialogues -->
<div class="dialogue-bubble-row">
<div id="select-bubble-1" class="bordered left dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="select-dialogue-1" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-2" class="bordered halfLeft dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="select-dialogue-2" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-3" class="bordered center dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="select-dialogue-3" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-4" class="bordered farHalfLeft dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="select-dialogue-4" class="dialogue"></span>
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div id="select-image-area-1" class="farLeft selection-image-area">
ReformCopyright
committed
<img id="select-image-1" class="opponent-image" hidden>
<div id="opponent-suggestions-1" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-1-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 1)">Name</button>
</div>
<div id="opponent-suggestion-1-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 2)">Name</button>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-1-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 3)">Name</button>
</div>
<div id="opponent-suggestion-1-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-2" class="almostLeft selection-image-area">
ReformCopyright
committed
<img id="select-image-2" class="opponent-image" hidden>
<div id="opponent-suggestions-2" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-2-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 1)">Name</button>
</div>
<div id="opponent-suggestion-2-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 2)">Name</button>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-2-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 3)">Name</button>
</div>
<div id="opponent-suggestion-2-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-3" class="almostRight selection-image-area">
ReformCopyright
committed
<img id="select-image-3" class="opponent-image" hidden>
<div id="opponent-suggestions-3" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-3-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 1)">Name</button>
</div>
<div id="opponent-suggestion-3-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 2)">Name</button>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-3-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 3)">Name</button>
</div>
<div id="opponent-suggestion-3-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-4" class="farRight selection-image-area">
ReformCopyright
committed
<img id="select-image-4" class="opponent-image" hidden>
<div id="opponent-suggestions-4" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-4-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 1)">Name</button>
</div>
<div id="opponent-suggestion-4-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 2)">Name</button>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-4-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 3)">Name</button>
</div>
<div id="opponent-suggestion-4-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 4)">Name</button>
</div>
</div>
</div>
<!-- Hide Button -->
<button class='bordered hide-table-button' onclick="hideSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<button class='bordered table-bug-report-button' onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
</button>
<!-- Opponent Selections -->
<div class="bordered left opponent-area">
<div id="select-name-label-1" class="bordered opponent-name-label">Opponent 1</div>
<button id="select-slot-button-1" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(1)">Select Opponent</button>
</div>
<div class="bordered halfLeft opponent-area">
<div id="select-name-label-2" class="bordered opponent-name-label">Opponent 2</div>
<button id="select-slot-button-2" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(2)">Select Opponent</button>
</div>
<div class="bordered center opponent-area">
<div id="select-name-label-3" class="bordered opponent-name-label">Opponent 3</div>
<button id="select-slot-button-3" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(3)">Select Opponent</button>
</div>
<div class="bordered farHalfLeft opponent-area">
<div id="select-name-label-4" class="bordered opponent-name-label">Opponent 4</div>
<button id="select-slot-button-4" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(4)">Select Opponent</button>
</div>
<!-- Dock Area -->
<div id='main-select-area' class='bordered'>
<!-- Select Buttons -->
ReformCopyright
committed
<button id='select-main-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backSelectScreen()">
ReformCopyright
committed
<button id='select-group-testing-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(1)">
ReformCopyright
committed
<button id='select-group-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(0)">
<button id='select-help-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="showHelpModal()">
Help & FAQ
</button>
<!-- Advance Button Casing -->
<div id='select-advance-top' class='bordered'> </div>
<div id='select-advance-bottom' class='bordered'> </div>
<!-- Advance Button -->
<button id='main-select-button' class='bordered smooth-button smooth-button-red' onclick="advanceSelectScreen()" disabled="true">
Start
</button>
<!-- More Select Buttons -->
<div class="select-random-container">
<div class="select-random-col">
<button id='select-random-female-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseFemale(player) {return player.gender.toLowerCase() === 'female';})">
Random Females
</button>
<button id='select-random-group-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomGroupButton()">
Random Table
</button>
</div>
<div class="select-random-col">
<button id='select-random-male-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseMale(player) {return player.gender.toLowerCase() === 'male';})">
Random Males
</button>
<button id='select-random-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton()">
Random Fill
</button>
</div>
</div>
ReformCopyright
committed
<button id='select-remove-all-button' class='bordered main-select-button smooth-button smooth-button-red' onclick="clickedRemoveAllButton()" disabled="true">
</button>
</div>
</div>
</div>
</div>
<div id="individual-select-screen" class="wide-screen-container" hidden>
<div class="opponent-cards-container">
(example opponent card element)
<div class="opponent-card">
<div class="selection-card-image-clip">
<div class="selection-card-image-area">
<img class="opponent-card-image-simple" src="opponents/sayori/0-calm.png">
<img class="badge-icon" src="img/epilogue_icon.png"/>
<div class="selection-card-sidebar">
<img class="layer-icon" src="img/testing-badge.png"/>
<img class="status-icon" src="img/testing-badge.png"/>
<img class="gender-icon" src="img/female.png"/>
<div class="selection-card-footer">
<div class="selection-card-label selection-card-name">Sayori</div>
<div class="selection-card-label selection-card-source">Doki Doki Literature Club!</div>
<div class="bordered selection-options-row">
FarawayVision
committed
<button type="button" class="bordered smooth-button smooth-button-red select-back-btn" onclick="backToSelect()">Back</button>
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
<div id="gender-sort-column" class="column-component">
<div class="gender-component">
<nav>
<ul class="pagination" id="search-gender">
<li class="active"><a href="#" data-value="1">All</a></li>
<li><a href="#" data-value="2">Male</a></li>
<li><a href="#" data-value="3">Female</a></li>
</ul>
</nav>
</div>
<div class="dropdown sort-component">
<button id="sort-dropdown" class="bordered btn btn-sm dropdown-toggle wide-dropdown"
type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="sort-dropdown-selection">Featured</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu sort-dropdown-options" aria-labelledby="sort-option">
<li><a href="#" data-value="roster">Featured</a></li>
<li><a href="#" data-value="date">Newest</a></li>
<li><a href="#" data-value="date-reverse">Oldest</a></li>
<li><a href="#" data-value="layers">Most Layers</a></li>
<li><a href="#" data-value="layers-reverse">Fewest Layers</a></li>
<li><a href="#" data-value="name">Name (A-Z)</a></li>
<li><a href="#" data-value="name-reverse">Name (Z-A)</a></li>
<li><a href="#" data-value="target">Targeted most by selected</a></li>
</ul>
<div id="name-creator-column" class="column-component">
<div class="option-component creator-component">
<label for="search-creator">Search Creator:</label>
<input list='creatorList' type="text" id="search-creator" class='bordered wide-textbox sort-filter-field' placeholder="Search by Creator"/>
</div>
<div class="option-component name-component">
<label for="search-name">Search Name: </label>
<input type="text" id="search-name" class='bordered wide-textbox sort-filter-field' placeholder="Name"/>
</div>
<div id="source-tag-column" class="column-component">
<div class="option-component source-component">
<label for="search-source">Search Source: </label>
<input list='sourceList' type="text" id="search-source" class='bordered wide-textbox sort-filter-field' placeholder="Search by Source"/>
<div class="option-component tag-component">
<label for="search-tag">Search Tag: </label>
<input list='tagList' type="text" id="search-tag" class='bordered wide-textbox sort-filter-field' placeholder="Search by Tag"/>
<div class="opponent-details-container">
<div class="opponent-details-image-area">
<img class="opponent-details-simple-image" />
</div>
FarawayVision
committed
<div class="opponent-details-panel bordered" hidden>
<div class="opponent-details-view opponent-details-basic show-more">
<button type="button" class="bordered smooth-button smooth-button-blue show-more-button">Show </button>
FarawayVision
committed
<select class="form-control opponent-costume-select"></select>
<div class="bordered opponent-details-field opponent-details-name">
<div class="opponent-details-value opponent-full-name"></div>
<div class="opponent-details-value opponent-source"></div>
<div class="bordered left-cap extra-details-row opponent-details-field opponent-epilogues-field">
<div class="opponent-details-label left-cap">Epilogues</div>
<button type="button" class="smooth-button smooth-button-blue opponent-nav-button opponent-details-value opponent-epilogues" data-target="epilogues"></button>
<div class="bordered left-cap extra-details-row opponent-details-field opponent-collectibles-field">
<div class="opponent-details-label left-cap">Collectibles</div>
<button type="button" class="smooth-button smooth-button-blue opponent-nav-button opponent-details-value opponent-collectibles" data-target="collectibles"></button>
<div class="bordered left-cap extra-details-row opponent-details-field opponent-writers-field">
<div class="opponent-details-label left-cap">Writer(s)</div>
<div class="opponent-details-value opponent-writer"></div>
</div>
<div class="bordered left-cap extra-details-row opponent-details-field opponent-artists-field">
<div class="opponent-details-label left-cap">Artist(s)</div>
<div class="opponent-details-value opponent-artist"></div>
</div>
<div class="extra-details-row opponent-options-row">
<div class="bordered left-cap opponent-details-field opponent-linecount-field">
<div class="opponent-details-label left-cap">Unique Lines</div>
<div class="opponent-details-value opponent-linecount"></div>
</div>
<div class="bordered left-cap opponent-details-field opponent-posecount-field">
<div class="opponent-details-label left-cap">Poses</div>
<div class="opponent-details-value opponent-posecount"></div>
<div class="bordered opponent-details-field extra-details-row opponent-details-description"></div>
<div class="opponent-details-view opponent-details-epilogues" hidden>
<div class="opponent-options-row">
<button type="button" class="bordered smooth-button smooth-button-red opponent-nav-button" data-target="main">Back</button>
<div class="opponent-epilogues-container"></div>
<div class="opponent-details-view opponent-details-collectibles" hidden>
<div class="opponent-options-row">
<button type="button" class="bordered smooth-button smooth-button-red opponent-nav-button" data-target="main">Back</button>
</div>
<div class="opponent-collectibles-container"></div>
<div class="opponent-select-button">
<button type="button" class="bordered smooth-button smooth-button-green select-button" disabled>Select Opponent</button>
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
</div>
</div>
</div>
</div>
<!-- Group Select Screen -->
<div id="group-select-screen" class="screen-container" hidden>
<div class="screen">
<!-- Opponent Info -->
<div class="dialogue-bubble-row">
<div id="group-stats-page-1-1" class="bordered left dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="group-name-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="group-sex-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="group-source-label-1" class="bordered stats-content"></div>
</div>
</div>
<div id="group-stats-page-1-2" class="bordered left dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="group-writer-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="group-artist-label-1" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="group-counts-1">
<span id="group-line-count-label-1"></span> unique lines <br />
<span id="group-pose-count-label-1"></span> poses
</div>
</div>
</div>
</div>
<div id="group-stats-page-1-3" class="bordered left dialogue-bubble-area" style="display:none;">
<div id="group-description-label-1">
</div>
</div>
<div id="group-stats-page-2-1" class="bordered halfLeft dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="group-name-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="group-sex-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="group-source-label-2" class="bordered stats-content"></div>
</div>
</div>
<div id="group-stats-page-2-2" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="group-writer-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="group-artist-label-2" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="group-counts-2">
<span id="group-line-count-label-2"></span> unique lines <br />
<span id="group-pose-count-label-2"></span> poses
</div>
</div>
</div>
</div>
<div id="group-stats-page-2-3" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
<div id="group-description-label-2">
</div>
</div>
<div id="group-stats-page-3-1" class="bordered center dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="group-name-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="group-sex-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="group-source-label-3" class="bordered stats-content"></div>
</div>
</div>
<div id="group-stats-page-3-2" class="bordered center dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="group-writer-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="group-artist-label-3" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="group-counts-3">
<span id="group-line-count-label-3"></span> unique lines <br />
<span id="group-pose-count-label-3"></span> poses
</div>
</div>
</div>
</div>
<div id="group-stats-page-3-3" class="bordered center dialogue-bubble-area" style="display:none;">
<div id="group-description-label-3">
</div>
</div>
<div id="group-stats-page-4-1" class="bordered farHalfLeft dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="group-name-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="group-sex-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section-large">
<div class="bordered stats-label">Source</div>
<div id="group-source-label-4" class="bordered stats-content"></div>
</div>
</div>
<div id="group-stats-page-4-2" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
<div class="stats-section">
<div class="bordered stats-label">Writer</div>
<div id="group-writer-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="group-artist-label-4" class="bordered stats-content"></div>
</div>
<div class="stats-section">
<div class="bordered stats-label">Stats</div>
<div class="bordered stats-content">
<div id="group-counts-4">
<span id="group-line-count-label-4"></span> unique lines <br />
<span id="group-pose-count-label-4"></span> poses
</div>
</div>
</div>
</div>
<div id="group-stats-page-4-3" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
<div id="group-description-label-4">
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div class="farLeft selection-image-area">
ReformCopyright
committed
<img id="group-image-1" class="opponent-image" hidden>
<img id="group-badge-1" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-1" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-1" class="layer-icon" src="img/layers1.png" hidden/>
<select id="group-costume-select-1" class="alt-costume-dropdown" onchange="altCostumeSelected(1, true)"></select>
<div class="almostLeft selection-image-area">
ReformCopyright
committed
<img id="group-image-2" class="opponent-image" hidden>
<img id="group-badge-2" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-2" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-2" class="layer-icon" src="img/layers1.png" hidden/>
<select id="group-costume-select-2" class="alt-costume-dropdown" onchange="altCostumeSelected(2, true)"></select>
<div class="almostRight selection-image-area">
ReformCopyright
committed
<img id="group-image-3" class="opponent-image" hidden>
<img id="group-badge-3" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-3" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-3" class="layer-icon" src="img/layers1.png" hidden/>
<select id="group-costume-select-3" class="alt-costume-dropdown" onchange="altCostumeSelected(3, true)"></select>
<div class="farRight selection-image-area">
ReformCopyright
committed
<img id="group-image-4" class="opponent-image" hidden>
<img id="group-badge-4" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-4" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-4" class="layer-icon" src="img/layers1.png" hidden/>
<select id="group-costume-select-4" class="alt-costume-dropdown" onchange="altCostumeSelected(4, true)"></select>
<!-- Hide Button -->
<button id="group-hide-button" class='bordered' onclick="hideGroupSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<button class='bordered table-bug-report-button group-bug-report-button' onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
</button>
<!-- Dock Area -->
<div id="group-select-table">
<!-- Opponent Selections -->
<div id="group-select-area" class="bordered opponent-area">
<div id="group-name-label" class="bordered opponent-name-label">Opponent 1</div>
<button id="group-button" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectGroup()">Select Group</button>
</div>
<!-- Dock Area -->
<div id='main-select-area' class='bordered'>
<!-- Buttons -->
ReformCopyright
committed
<button id='group-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backToSelect()">
ReformCopyright
committed
<button id='group-switch-testing-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="switchSelectGroupScreen()">
Preset Tables
</button>
<button id='group-search-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="openGroupSearchModal()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
ReformCopyright
committed
Filter
</button>
<!-- Advance Button Casing -->
<div class='bordered long-select-advance-top'> </div>
<div class='bordered long-select-advance-bottom'> </div>
<!-- Page Selection -->
<div class="select-page-display">
<div class="bordered page-label">Page</div>
<input id="group-page-indicator" type="text" class="bordered page-indicator" value="" />
<div id="group-max-page-indicator" class="bordered of-label">of 1</div>
</div>
<div class="select-page-selection">
<button class="bordered smooth-button first-page-button" onclick="changeGroupPage(true, -1)">
<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button left-page-button" onclick="changeGroupPage(false, -1)">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button go-page-button" onclick="changeGroupPage(true, 0)">
<div style="margin-top:2px"><b>Go</b></div>
</button>
<button class="bordered smooth-button right-page-button" onclick="changeGroupPage(false, 1)">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button last-page-button" onclick="changeGroupPage(true, 1)" style="border-right: 2px solid">
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
</button>
</div>
<!-- More Buttons -->
ReformCopyright
committed
<button id='group-basic-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(1)">
Basic Info
</button>
<button id='group-credits-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(2)">
ReformCopyright
committed
<button id='group-more-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(3)">
More Info
</button>
</div>
metodLD
committed
<!-- Gallery Screen -->
<div id="gallery-screen" class="screen-container" hidden>
<div id="collectible-gallery-screen" class="screen">
<div id="gallery-select-block">
<button class="bordered gallery-back-button gallery-select-button smooth-button smooth-button-red" onclick="backGalleryScreen()">Back</button>
<button class="bordered gallery-switch-button gallery-select-button smooth-button smooth-button-blue" onclick="goToEpiloguesScreen()">Epilogues</button>
<select id="collectible-character-filter" class="gallery-character-filter" onchange="changeCharacterFilter(true)">
<option value="" disabled selected>Filter by Character...</option>
<option value="">(no filter)</option>
<option value="__general">The Inventory</option>
</select>
<div class="collectibles-pane bordered" id="collectibles-list-pane"></div>
<div class="collectibles-pane bordered" id="collectibles-text-pane">
<h3 class="collectible-content text-center" id="collectible-title"></h3>
<h3 class="collectible-content collectible-subtitle-container text-center"><small id="collectible-subtitle"></small></h3>
<div class="collectible-content text-center collectible-character-container">
From: <i id="collectible-character"></i>
<div class="collectible-content collectible-unlock-container">
<div class="text-center">To Unlock:</div>
<div class="text-center">
<span id="collectible-unlock"></span>
<span id="collectible-progress-text"></span>
</div>
<div class="progress" id="collectible-progress">
<div id="collectible-progress-bar" class="progress-bar smooth-button-red" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
</div>
<hr/>
<div class="collectible-content collectible-text-container">
<h4 class="text-center">Description:</h4>
<div id="collectible-text"></div>
</div>
</div>
<div class="collectibles-pane bordered" id="collectibles-image-pane">
<img id="collectible-image">
</div>
</div>
<div id="epilogue-gallery-screen" class="screen" hidden>
<div id="gallery-select-block">
<button class="bordered gallery-back-button gallery-select-button smooth-button smooth-button-red" onclick="backGalleryScreen()">Back</button>
<button class="bordered gallery-switch-button gallery-select-button smooth-button smooth-button-blue" onclick="goToCollectiblesScreen()">Collectibles</button>
<select id="epilogue-character-filter" class="gallery-character-filter" onchange="changeCharacterFilter(false)">
<option value="" disabled selected>Filter by Character...</option>
<option value="">(no filter)</option>
</select>
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
<div id="gallery-gender-block">
<input type="image" id="gallery-gender-all" class="gallery-gender-button bordered" src='img/all.png' onclick="galleryGender('all')"/>
<input type="image" id="gallery-gender-any" class="gallery-gender-button bordered" src='img/any.png' style="opacity:0.4;" onclick="galleryGender('any')" />
<input type="image" id="gallery-gender-male" class="gallery-gender-button bordered" src='img/male.png' style="opacity:0.4;" onclick="galleryGender('male')" />
<input type="image" id="gallery-gender-female" class="gallery-gender-button bordered" src="img/female.png" style="opacity:0.4;" onclick="galleryGender('female')" />
</div>
<div id="gallery-endings-block">
<div class="gallery-ending" onclick="selectEnding(0)"></div>
<div class="gallery-ending" onclick="selectEnding(1)"></div>
<div class="gallery-ending" onclick="selectEnding(2)"></div>
<div class="gallery-ending" onclick="selectEnding(3)"></div>
<div class="gallery-ending" onclick="selectEnding(4)"></div>
<div class="gallery-ending" onclick="selectEnding(5)"></div>
<div class="gallery-ending" onclick="selectEnding(6)"></div>
<div class="gallery-ending" onclick="selectEnding(7)"></div>
<div class="gallery-ending" onclick="selectEnding(8)"></div>
<div class="gallery-ending" onclick="selectEnding(9)"></div>
<div class="gallery-ending" onclick="selectEnding(10)"></div>
<div class="gallery-ending" onclick="selectEnding(11)"></div>
<div class="gallery-ending" onclick="selectEnding(12)"></div>
<div class="gallery-ending" onclick="selectEnding(13)"></div>
<div class="gallery-ending" onclick="selectEnding(14)"></div>
<div class="gallery-ending" onclick="selectEnding(15)"></div>
<div class="gallery-ending" onclick="selectEnding(16)"></div>
<div class="gallery-ending" onclick="selectEnding(17)"></div>
<div class="gallery-ending" onclick="selectEnding(18)"></div>
<div class="gallery-ending" onclick="selectEnding(19)"></div>
</div>
<div id="gallery-controls-block">
<button id="gallery-prev-page-button" class="bordered main-select-button smooth-button smooth-button-blue" onclick="galleryPrevPage()" disabled="true">prev</button>
<button id="gallery-next-page-button" class="bordered main-select-button smooth-button smooth-button-blue" onclick="galleryNextPage()">next</button>
<button id="gallery-start-ending-button" class="bordered main-select-button smooth-button smooth-button-green" onclick="doEpilogueFromGallery()" disabled="true" >Start</button>
</div>
<div id="gallery-selected-ending-block">
<div id="selected-ending-previev"></div>
<label id="selected-ending-title"></label>
<label>Character: <span id="selected-ending-character"></span></label>
<label>For: <span id="selected-ending-gender"></label>
<label id="selected-ending-hint-container">To Unlock: <span id="selected-ending-hint"></label>
</div>
</div>
metodLD
committed
</div>
ReformCopyright
committed
<!-- Tab completion lists shared by individual and group filter modals -->
<datalist id='sourceList'></datalist>
<datalist id='tagList'></datalist>
<datalist id='creatorList'></datalist>
ReformCopyright
committed
<div id="search-modal" class="modal table-modal fade">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Search Options</h4>
</div>
<div class="modal-body">
<table style="width:100%">
<!-- Table Style -->
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Name Filter</h4></td>
<td>
<input type="text" id="search-name" class='bordered wide-textbox'/>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Sex Filter</h4></td>
<td>
<nav>
<ul class="pagination" id="search-gender">
<li class="active"><a href="#" data-value="1">All</a></li>
<li><a href="#" data-value="2">Male</a></li>
<li><a href="#" data-value="3">Female</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Source Filter</h4></td>
<td>
ReformCopyright
committed
<input list='sourceList' type="text" id="search-source" class='bordered wide-textbox'/>
<td style="width:25%"><h4 class="modal-title modal-left">Tag Filter</h4></td>
<td>
<input list='tagList' id="search-tag" class='bordered wide-textbox'/>
</td>
</tr>
<tr>
<td style="width: 25%"><h4 class="modal-title modal-left">Sort By</h4></td>
<td>
<div class="dropdown">
<button id="sort-dropdown" class="bordered btn btn-sm dropdown-toggle wide-dropdown"
type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="sort-dropdown-selection">Featured</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu sort-dropdown-options" aria-labelledby="sort-option">
<li><a href="#">Featured</a></li>
<li><a href="#">Newest</a></li>
<li><a href="#">Oldest</a></li>
<li><a href="#">Most Layers</a></li>
<li><a href="#">Fewest Layers</a></li>
<li><a href="#">Name (A-Z)</a></li>
<li><a href="#">Name (Z-A)</a></li>
ReformCopyright
committed
<li><a href="#">Targeted most by selected</a></li>
</ul>
</div>
</td>
</tr>
</table>
<div class="modal-body-container" style="padding-top:4%;">
ReformCopyright
committed
<button class="bordered smooth-button modal-button" data-dismiss="modal" onclick="closeSearchModal()">Filter</button>
<button class="bordered smooth-button smooth-button-red modal-button" data-dismiss="modal" onclick="clearSearch()">Clear</button>
</div>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div> <!-- End of Search Modal -->
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
<!-- Start of Group Search Modal -->
<div id="group-search-modal" class="modal table-modal fade">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Search Options</h4>
</div>
<div class="modal-body">
<table style="width:100%">
<!-- Table Style -->
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Table Name Filter</h4></td>
<td>
<input type="text" id="group-search-group-name" class='bordered wide-textbox'/>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Player Name Filter</h4></td>
<td>
<input type="text" id="group-search-name" class='bordered wide-textbox'/>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Sex Filter</h4></td>
<td>
<nav>
<ul class="pagination" id="group-search-gender">
<li class="active"><a href="#" data-value="1">Any</a></li>
<li><a href="#" data-value="2">Male only</a></li>
<li><a href="#" data-value="3">Female only</a></li>
<li><a href="#" data-value="4">Mixed</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Source Filter</h4></td>
<td>
ReformCopyright
committed
<input list="sourceList" type="text" id="group-search-source" class='bordered wide-textbox'/>
</td>
</tr>
ReformCopyright
committed
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Tag Filter</h4></td>
<td>
ReformCopyright
committed
<input list="tagList" type="text" id="group-search-tag" class='bordered wide-textbox'/>
</td>
</tr>
</table>
<div class="modal-body-container" style="padding-top:4%;">
ReformCopyright
committed
<button class="bordered smooth-button modal-button" data-dismiss="modal" onclick="closeGroupSearchModal()">Filter</button>
<button class="bordered smooth-button smooth-button-red modal-button" data-dismiss="modal" onclick="clearGroupSearch()">Clear</button>
</div>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div> <!-- End of Search Modal -->
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
<!-- Start of Restart Modal -->
<div id="restart-modal" class="modal table-modal fade">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog average-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Are you sure you want to return to the title screen?</h4>
</div>
<div class="modal-body">
<div class="modal-body-container">
<button class="bordered smooth-button modal-button" data-dismiss="modal" onclick="restartGame()">Yes</button>
<button class="bordered smooth-button modal-button" data-dismiss="modal" onclick="closeRestartModal()">No</button>
</div>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Restart Modal -->
<!-- Start of Stripping Modal -->
<div id="stripping-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog average-modal-dialog">
<div class="bordered modal-dialog-surface" style="height: 100%;">
<!-- Start of Modal Content -->
<div class="modal-content" style="height: 100%;">
<div class="modal-header">
<h4 class="modal-title text-center">Select an article of clothing to remove</h4>
</div>
<div class="modal-body">
<div id="stripping-clothing-area" class="modal-body-special-container">
</div>
</div>
<div class="modal-footer">
<button id="stripping-modal-button" class="bordered smooth-button modal-button" data-dismiss="modal" onclick="closeStrippingModal()">Select</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Stripping Modal -->
<!-- Start of Game Settings Modal -->
<div id="game-settings-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center"><b>Backgrounds</b></h3>
</div>
<div class="modal-body">
<div class="modal-body-container" style="width:100%">
<nav id="settings-background-container">
<ul class="pagination" id="settings-background">
<li><a href="#" data-value="inventory">The Inventory</a></li>
<li><a href="#" data-value="beach">Beach</a></li>
<li><a href="#" data-value="classroom">Classroom</a></li>
<li><a href="#" data-value="roof">Roof</a></li>
<li><a href="#" data-value="poolside">Poolside</a></li>
<li><a href="#" data-value="hot spring">Hot Spring</a></li>
<li><a href="#" data-value="mansion">Mansion</a></li>
<li><a href="#" data-value="purple room">Purple Room</a></li>
<li><a href="#" data-value="street">Street</a></li>
<li><a href="#" data-value="bedroom">Bedroom</a></li>
<li><a href="#" data-value="locker room">Locker Room</a></li>
<li><a href="#" data-value="haunted forest">Haunted Forest</a></li>
<li><a href="#" data-value="romantic">Romantic</a></li>
<li><a href="#" data-value="classic">Classic</a></li>
</ul>
</nav>
FarawayVision
committed
<h4>Background Credits</h4>
<div class="background-credits-container">
<ul>
<li>"Street", "Green Screen", "Arcade", and "Club": by DrankeyKrang</li>
<li>"Bedroom": by XKokone-chanX (bed) & throwaway927263 (room)</li>
<li>"Beach", "Classroom", "Brick", "Night", "Roof", "Seasonal", "Library", "Bathhouse", "Poolside", "Hot Spring", "Mansion", "Purple Room", and "Showers": u/SPNATI</li>
<li>"The Inventory": by Zeuses-Swan-Song</li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button id="options-modal-button" class="bordered smooth-button modal-button" data-dismiss="modal" onclick="saveSettings()">Close</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Title Settings Modal -->
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
<!-- Start of in-game Collectibles Info modal -->
<div id="collectibles-info-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="transparent-modal-dialog collectibles-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header modal-thin-padding">
<h3 class="modal-title text-center"><b>Collectible Obtained!</b></h3>
</div>
<div class="modal-body modal-thin-padding">
<div id="collectible-info-container" class="modal-body-container">
<img id="collectible-info-thumbnail" src="img/unknown.svg">
<div class="collectible-info-text">
<div id="collectible-info-title">Collectible Title</div>
<p id="collectible-info-subtitle">Collectible Subtitle</p>
</div>
</div>
</div>
<div class="modal-footer">
<button id="options-modal-button" class="bordered smooth-button modal-button modal-thin-padding" data-dismiss="modal">Close</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- Start of Log Modal -->
<div id="log-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog very-wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center"><b>Dialogue Transcript</b></h3>
<p class="text-center">Click on any line of dialogue to re-view it in-game.</p>
</div>
<div class="modal-body">
<div id="log-container" class="modal-body-container">
</div>
</div>
<div class="modal-footer">
<button id="options-modal-button" class="bordered smooth-button modal-button" data-dismiss="modal">Close</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- Start of Options Modal -->
<div id="options-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center"><b>Options</b></h3>
</div>
<div class="modal-body">
<div class="modal-body-container" style="width:100%">
<table style="width:100%">
<!-- Table Style -->
<tr hidden>
ReformCopyright
committed
<td><h4 class="modal-title modal-left">Table Style</h4></td>
<td>
<nav>
<ul class="pagination">
<li id="options-table-style-1" class="active"><a href="#">Standard</a></li>
</ul>
</nav>
</td>
</tr>
ReformCopyright
committed
<td><h4 class="modal-title modal-left">Auto Table Fade</h4></td>
<ul class="pagination" id="options-auto-fade">
<li><a href="#" data-value="true">Enabled</a></li>
<li><a href="#" data-value="false">Disabled</a></li>
</ul>
</nav>
</td>
</tr>
ReformCopyright
committed
<td><h4 class="modal-title modal-left">Card Suggest</h4></td>
<ul class="pagination" id="options-card-suggest">
<li><a href="#" data-value="true">Enabled</a></li>
<li><a href="#" data-value="false">Disabled</a></li>
</ul>
</nav>
</td>
</tr>
ReformCopyright
committed
<td><h4 class="modal-title modal-left">AI Turn Time</h4></td>
<ul class="pagination" id="options-ai-turn-time">
<li><a href="#" data-value="0">Very Fast</a></li>
<li><a href="#" data-value="400">Fast</a></li>
<li><a href="#" data-value="800">Normal</a></li>
<li><a href="#" data-value="1200">Slow</a></li>
<li><a href="#" data-value="1600">Very Slow</a></li>
</ul>
</nav>
</td>
</tr>
ReformCopyright
committed
<td><h4 class="modal-title modal-left">Deal Animation</h4></td>
<ul class="pagination" id="options-deal-speed">
<li><a href="#" data-value="0">Disabled</a></li>
<li><a href="#" data-value="200">Fast</a></li>
<li><a href="#" data-value="500">Normal</a></li>
<li><a href="#" data-value="1000">Slow</a></li>
</ul>
</nav>
</td>
</tr>
ReformCopyright
committed
<!-- Auto Advance -->
ReformCopyright
committed
<td><h4 class="modal-title modal-left">Auto-Advance during Forfeit</h4></td>
<ul class="pagination" id="options-auto-forfeit">
<li><a href="#" data-value="4000">Fast</a></li>
<li><a href="#" data-value="7500">Normal</a></li>
<li><a href="#" data-value="10000">Slow</a></li>
ReformCopyright
committed
</ul>
</nav>
</td>
</tr>
<tr>
<td><h4 class="modal-title modal-left">Auto-Advance at End</h4></td>
<td>
<nav>
<ul class="pagination" id="options-auto-ending">
<li><a href="#" data-value="4000">Fast</a></li>
<li><a href="#" data-value="7500">Normal</a></li>
<li><a href="#" data-value="10000">Slow</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td><h4 class="modal-title modal-left">Minimal UI</h4></td>
<td>
<nav>
<ul class="pagination" id="options-minimal-ui">
<li class="active"><a href="#" data-value="false">Disabled</a></li>
<li><a href="#" data-value="true">Enabled</a></li>
</ul>
</nav>
</td>
</tr>
<!-- Player Masturbation Timer -->
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">How long do you... last?</h4></td>
<td>
<input type="number" min="1" id="player-masturbation-timer-box"> Phases
</td>
</tr>
<tr id='masturbation-warning-label'>
<td><!-- blank table entry --></td>
<td>
<h4 class="modal-title modal-body" style="color:FireBrick;">Please enter a positive number.</h4>
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button id="options-modal-button" class="bordered smooth-button modal-button" data-dismiss="modal" onclick="saveOptions()">Close</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Options Modal -->
<!-- Start of Bug Report Modal -->
<div id="bug-report-modal" class="modal table-modal fade" role="dialog">
<div class="modal-flex-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center"><b>Submit an Issue Report</b></h3>
</div>
<div class="bug-report-form">
<form>
<div class="form-group">
<label for="bug-report-type">Issue Type</label>
<select class="form-control" id="bug-report-type"></select>
</div>
<div class="form-group">
<label for="bug-report-desc">Issue Description (required):</label>
<textarea class="form-control" id="bug-report-desc" rows="5" cols="80"></textarea>
</div>
</form>
</div>
<div class="bug-report-out-wrapper">
<label>
Issue Report Data
<span id="bug-report-copy-btn" class="glyphicon glyphicon-scissors" data-toggle="tooltip" data-placement="right" title="Copy Report Text"></span>
</label>
<textarea rows="4" cols="80" readonly="true" id="bug-report-output"></textarea>
<div class="bug-report-out-explanation">
Please, don't include the report data in the description!
</div>
<div class="bug-report-out-explanation">
To submit a bug report, just hit 'Send', below.
</div>
<div class="bug-report-out-explanation">
To submit an issue report <em>manually</em>:
<ol>
<li>Copy the Issue Report Data above into a text-sharing service such as <a href="https://pastebin.com/">Pastebin</a> or <a href="https://gist.github.com">Gist</a>.</li>
<li>Submit your issue report (with the Data above!) to the developers on our subreddit, <a href="https://www.reddit.com/r/spnati">/r/spnati</a> or through our <a href="https://reddit.com/r/spnati/comments/98k7s4/reminder_95_percent_of_the_discussion_about_this/">Discord server</a>.</li>
</ol>
Keep in mind that bug reports sent to us are publically viewable!
</div>
</div>
</div>
<div class="modal-footer">
<div id="bug-report-status"></div>
<button id="bug-report-modal-send-button" class="bordered smooth-button modal-button" onclick="sendBugReport()" disabled>Send</button>
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
<button id="bug-report-modal-button" class="bordered smooth-button modal-button" onclick="closeBugReportModal()">Close</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
<!-- End of Bug Report Modal -->
<!-- Start of Usage Reporting Modal -->
<div id="usage-reporting-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center"><b>Anonymous Character Usage Tracking</b></h3>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<p class="col-md-12">We would like to collect anonymous information to help make the game better and more enjoyable for everyone.</p>
</div>
<div class="row">
<p class="col-md-12">The exact information collected includes:</p>
</div>
<div class="row">
<div class="col-md-6">
<ul>
<li>Your browser type and operating system</li>
<li>The website you are accessing this game from</li>
<li>Your selected player gender and size</li>
</ul>
</div>
<div class="col-md-6">
<ul>
<li>The characters you play with</li>
<li>Any game script errors you encounter</li>
<li>The current date and time</li>
<li>Your selected player tags, if any</li>
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
</ul>
</div>
</div>
</div>
<div class="row">
<p class="col-md-12">We would like to emphasize that this information will be <em>completely anonymous</em>: we won't be able to identify you using this info.</p>
</div>
<br>
<div class="row">
<p class="col-md-12">Do you consent to this data being recorded?</p>
</div>
</div>
<div class="modal-footer">
<button id="usage-reporting-accept" class="bordered smooth-button modal-button" onclick="enableUsageTracking()" data-dismiss="modal">Yes</button>
<button id="usage-reporting-deny" class="bordered smooth-button-red modal-button" onclick="disableUsageTracking()" data-dismiss="modal">No</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Usage Reporting Modal -->
<!-- Start of Help Modal -->
<div id="help-modal" class="modal table-modal fade" role="dialog">
<div class="modal-flex-container">
<div class="bordered modal-dialog very-wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-body">
<!-- general meta questions -->
<div class="help-page" data-page="1">
<h2>FAQ - General</h2>
<div class="faq-question-container">
<h4 class="faq-question">Who made this game?</h4>
<div class="faq-answer">
<p>Strip Poker Night at the Inventory (SPNATI) was first developed by Joseph Kantel, who designed a small Javascript mockup game based on a choose-your-own-adventure fanfiction work. The original version of the project appeared in August 2015 featuring the four video game characters Lilith (Borderlands), Lara Croft (Tomb Raider), Elizabeth (BioShock Infinite), and Zoey (Left 4 Dead), who were the girls featured in the fanfiction story.</p>
<p>The project died out, but it was rediscovered in August 2016 and exploded in popularity, with new characters being added and the community you see today being formed. To date, over 200 characters (in various states of completion) have been made for SPNATI.</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">What does "At the Inventory" mean?</h4>
<p class="faq-answer">"The Inventory" is the name of a fictional bar that SPNATI takes place in. The name itself comes from SPNATI's other inspiration, Poker Night at the Inventory--a series of two games by TellTale wherein a nameless player plays Texas Hold 'Em Poker with four video game/webcomic characters and watches them interact.</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Did Joseph Kantel make all the characters?</h4>
<div class="faq-answer">
<p>Not at all! SPNATI is an open-source game, and over 100 different people have contributed to not only the creation of its many characters, but also its codebase, community, moderation, hosting, documentation, background art, etc. You can see who's credited for a character by clicking the "Credits" button on the character selection screen.</p>
<p>Anyone can make a character and add them to SPNATI, so if you don't see your favorite character, you should try to make them yourself!</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">How often is the game updated?</h4>
<div class="faq-answer">
<p>Because each author is responsible for their own characters, the game receives multiple small and large updates almost every day! The social Discord server has a channel, #gitlab-updates, that lists the full changelog.</p>
<p>However, not all characters have authors that still actively update them. Consider adopting one of these orphaned characters!</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can I donate to the game via a Patreon or something similar?</h4>
<p class="faq-answer">Nope! SPNATI has remained, and will always remain, separate from any issues of money besides the small amount needed to host the spnati.net domain. There will never be any advertisements or sponsors, nor the need to support the game financially in any way. This keeps the game free of copyright concerns.</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">If Lilith, Lara, Elizabeth, and Zoey were the first characters made, why aren't they the first on the list?</h4>
<div class="faq-answer">
<p>Every few months, the character roster is reshuffled based on the results of polls held on the SPNATI subreddit. This gives newer characters the chance to move from the back of the roster and be in the spotlight, and the order is determined by factoring in both how many votes each character received in the poll and how many total lines of dialogue each character has.</p>
<p>One male is always included on page 1 to let players know that male characters exist, and characters that share a franchise are grouped together (except on pages 1 and 2).</p>
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
<!-- character creation questions -->
<div class="help-page container-fluid" data-page="2" style="display:none">
<h2>FAQ - Character Creation</h2>
<div class="faq-question-container">
<h4 class="faq-question">How can I make a character for the game?</h4>
<div class="faq-answer">
<p>Making a character for SPNATI requires no prior artistic skills or knowledge of coding.</p>
<p>The art for characters, which includes their model and the poses that make up their sprites, is made in a Japanese paper doll program called Kisekae, which is based on the K-On anime art style and was developed by a user named Pochi. Kisekae has both an online and offline version; the offline version is the one used with other SPNATI character creation software to make sprites. Pochi continues to update Kisekae with new features to this day.</p>
<p>Many characters' sprites also utilize image editing and other forms of post-processing, such as Photoshop. Additionally, to save file space, character sprites are compressed using a web tool known as TinyPNG.</p>
<p>A character's dialogue, mechanics, metadata/information, and pose-to-line assignments are found in their "behaviour.xml" files, which are essentially text documents. Creating a .xml file can be done one of two ways: the old-fashioned way, which involves manually filling out a .txt file template and converting it to .xml with a Python script included in the game files, or by using the SPNATI Character Editor program ("CE") to write dialogue.</p>
<p>The CE also has built-in support for the Python script that helps you convert Kisekae scenes ("codes") into character sprites, which would otherwise also be done manually.</p>
<p>
Information on how to find these programs can be found on Page 5 under "Can I download the game?" For advice on how to use them, try interacting with other users on the official subreddit and Discord servers:
<ul>
<li><a href="https://old.reddit.com/r/spnati/">https://old.reddit.com/r/spnati/</a></li>
<li><a href="https://old.reddit.com/r/spnati/comments/afad5j/discussion_and_suggestion_thread/">https://old.reddit.com/r/spnati/comments/afad5j/discussion_and_suggestion_thread/</a></li>
</ul>
</p>
<p>The majority of community and development discussion takes place on the Discord servers, while the subreddit is the site of official requests for character entry into the game.</p>
<p>The following is a Google Doc containing documentation on all the contributors, characters, works-in-progress, and other information of SPNATI. It is community-run/maintained and completely unofficial; none of the moderators for SPNATI have editing privileges, and being listed on it is not a rite-of-passage.</p>
<p><a href="https://docs.google.com/spreadsheets/d/e/2PACX-1vRejQBHSnenImBLUEX5qlmxdopG0c_O9uWklerYr6v5yJ00_UUcQiOvqC6t6CUeKsRAkd2769YzA67P/pubhtml#">https://docs.google.com/spreadsheets/d/e/2PACX-1vRejQBHSnenImBLUEX5qlmxdopG0c_O9uWklerYr6v5yJ00_UUcQiOvqC6t6CUeKsRAkd2769YzA67P/pubhtml#</a></p>
<div class="faq-question-container">
<h4 class="faq-question">Are there any rules about what characters can be in the game?</h4>
<div class="faq-answer">
<p>Yes, but only a few. Characters in SPNATI:</p>
<ol>
<li>
<p><em>Must be at or above the age of 18.</em> They also must look like they could plausibly be adults to someone who knows nothing about the character, which means no 500-year-old vampire lolis.</p>
<p>If a character is at least 12 in some version of their canon source material, they can be added in if some effort is made to age them up to 18, such as changing their proportions to be more adultlike and/or referencing the passage of time in their dialogue.</p>
</li>
<li>
<p><em>Must be fictional.</em> No real people can be added to SPNATI. This includes fictionalized "personas" that real people put on, such as wrestlers and certain entertainers/show hosts.</p>
<p>However, fictional characters from live-action sources can be added, such as Buffy from Buffy the Vampire Slayer.</p>
</li>
<li>
<p><em>Must be humanoid/have basic human anatomy.</em> A character can't be three Corgis in a trenchcoat, have an insect face, or have a trombone for a penis, for instance. Some exceptions for "monstergirls" and similar sorts of characters may be allowed, but they should still look mostly recognizably human.</p>
<p>Both male and female characters are allowed in SPNATI, even though the majority of characters are female. Original characters are also allowed, but please do not submit your self-insert OC in an attempt to circumvent the "no real people" rule. You will not succeed.</p>
</li>
</ol>
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
</div>
<div class="faq-question-container">
<h4 class="faq-question">What happens after I make a character? How do they get into the game?</h4>
<div class="faq-answer">
<p>Once you think your character is ready, you can submit their files either as a .zip file to the moderation team on the subreddit or, for a more elegant long-term approach, make a merge request on GitLab (ask other users how to do this).</p>
<p>If your character meets basic requirements (obeys the rules; 300 total lines of dialogue, some of which are targeted or have other conditions; and a set of working images for their sprites), then they will enter what's called the "Testing Tables," which you can see via the Testing Tables button on the character select screen. You can check how many lines a character has via the CE or the "Credits" button ingame.</p>
<p>Once on testing, people can play your character online and download their files as part of the overall game, as well as give feedback through bug reports (the triangle icon ingame), the subreddit, and the Discord servers. One user cannot have more than two characters on testing at once.</p>
<p>When you feel your character is ready for the main roster (and they have at least 400 lines of dialogue), you can make a post on the subreddit asking for people to "sponsor" them. If at least five people reply with approval and/or feedback that you then address, a mod will put your character through QA, which is a basic test to make sure they function properly. Pass that, and you will have made a character for SPNATI's main roster!</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Why did X get moved to the Testing Tables?</h4>
<div class="faq-answer">
<p>
Sometimes main-roster characters are moved back to testing (and must be sponsored again) for certain updates made to them. These updates usually consist of either:
<ol type="a">
<li>A substantial dialogue/art update by someone other than the original writer(s)/artist(s) of the character.</li>
<li>An art update by their original artist(s) that is substantial enough to change something significant about the character, such as their model's silhouette or the majority of their poses/expressions/mechanics.</li>
</ol>
</p>
<p>(b) is usually more up to moderator discretion as far as whether they go back to testing or not; art updates are often put up for a "quickpass" vote among developers to skip this process if they feel it is unnecessary.</p>
<p>Characters looking for re-sponsorship only need 3 sponsors instead of the normal 5.</p>
</div>
</div>
</div>
<!-- Gameplay questions -->
<div class="help-page container-fluid" data-page="3" style="display:none">
<h2>FAQ - Gameplay</h2>
<div class="faq-question-container">
<h4 class="faq-question">How do I play poker?</h4>
<div class="faq-answer">
<p>SPNATI uses a simplified version of Five-Card Draw Poker where there is no betting. Instead, whoever has the worst hand each round is the loser and must strip.</p>
<p>To learn which poker hands beat which, see the graphic below. Try using Card Suggest in the options menu for the game to exchange cards for you, but be aware that this is imperfect by design. The best strategy is usually to aim for pairs: keep the ones you have, or just keep the highest card you have if you have no pairs, and exchange the rest.</p>
<p>Remember, your goal is not to have the best hand--only to not have the worst hand.</p>
</div>
<div class="faq-poker-hands-container">
<img class="faq-poker-hands-infographic" src="img/poker-hands-help.jpg" alt="Poker hands infographic">
</div>
<div class="faq-question-container">
<h4 class="faq-question">Is there a way to win every time?</h4>
<div class="faq-answer">
<p>No. Poker is a game of chance, and your luck can turn around at any moment. The best way to win is to wear more clothing and pick opponents who wear less clothing. Otherwise, you are on an even playing field with the computer opponents. The characters themselves each have different levels of intelligence, but they are at the mercy of luck as much as you are.</p>
<p>However, if you are playing offline, then you can cheat by enabling debug mode in <code>config.xml</code>. Pressing <kbd>Q</kbd> in a game will then allow you to select which character loses the round by clicking the "X" next to their name.</p>
<p>And remember: even if you lose, all but one of your opponents will still end up naked anyway. In fact, they all might!</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">What is the triangle icon with the exclamation point for?</h4>
<div class="faq-answer">
<p>Clicking that icon will bring up SPNATI's built-in bug report feature, which allows you to send detailed bug reports directly to the corresponding Discord channel. Using it on the main menu allows you to report general game issues; using it during a game allows you to do the same, or also note specific character issues (typos, broken images, etc.) This is especially useful for characters on the testing tables!</p>
<p>Bug reports for characters come with extra information such as the table you're playing on, what layer of clothing everyone is down to, and what's going on in the game. This includes the current text for the character in question, so you don't need to copy/paste their entire line just to report a typo.</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">I heard that you can input cheat codes using the bug reporter. Is this true?</h4>
<div class="faq-answer">
<p>No. The bug reporter is only for reporting bugs. Spamming it will only result in reports from your IP being muted.</p>
<p>If you want to cheat, download and play the offline version of SPNATI and change settings in <code>config.xml</code>, such as debug mode.</p>
<p>Also, please do not use the bug reporter to role-play with the characters. Again, you will be muted, and the reports are publically readable. You will be mocked.</p>
</div>
</div>
</div>
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
<!-- Epilogue questions -->
<div class="help-page container-fluid" data-page="4" style="display:none">
<h2>FAQ - Endings</h2>
<div class="faq-question-container">
<h4 class="faq-question">How do I unlock endings? Who has an ending?</h4>
<div class="faq-answer">
<p>You unlock endings by winning the game against one or more characters with an ending, i.e. being the only one who doesn't have to masturbate. You can then select which character's ending you'd like to view, and your selection is then unlocked in the gallery.</p>
<p>However, not all characters have endings. Those that do have a big yellow "SPNATI Epilogue Available" badge near their head on the Character Selection Screen.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">It says a character has an ending, but they don't.</h4>
<div class="faq-answer">
<p>Check their ending's entry in the gallery (the trophy icon on the main menu) for hints. Some endings require more conditions than simply winning the game against the character, such as being a certain gender or playing with them and another character present.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">My endings aren't saving. Why?</h4>
<div class="faq-answer">
<p>This is a known issue that has no consistent fix at the moment. Try enabling cookies, clearing cache, and avoid using incognito mode while playing the game.</p>
<p>If all else fails, changing certain settings in <code>config.xml</code> can unlock all endings instantly or activate debug mode in the offline version of SPNATI.</p>
</div>
</div>
</div>
<!-- Offline version questions -->
<div class="help-page container-fluid" data-page="5" style="display:none">
<h2>FAQ - Offline and Rehosted Game Versions</h2>
<div class="faq-question-container">
<h4 class="faq-question">Where did X go? They used to be in the game.</h4>
<div class="faq-answer">
<p>The consequence of avoiding money is that SPNATI is limited to free hosting space, which on GitLab is 1 GB. The total data of all the characters submitted to the game exceeds this, so characters are removed from the online version of the game every so often to make room for new ones.</p>
<p>However, you can still play with the removed characters by downloading and playing the offline version of SPNATI.</p>
<p>The criteria for which characters get removed has changed over time. In the past, whichever character had the fewest unique lines of dialogue was removed whenever more space was necessary. This ended when all online characters had more than 500 lines of dialogue. Several popularity polls have also been held on the subreddit, and those characters with the fewest votes were also prioritized when it came time for removal.</p>
<p>At present, the culling order is determined by which character has the fewest targeted lines (lines directed to other specific characters). However, if a character on testing does not receive an update in over a month, they will be removed first instead (testing characters also take up online space).</p>
<p>New characters cannot be chosen for culling until 3 months after their release to the main roster.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Why does the game have different numbers of characters on different sites, even with the same version number?</h4>
<div class="faq-answer">
<p>Versions of SPNATI with more characters tend to be rehosted versions on proprietary porn sites. While <a href="https://spnati.net/">spnati.net</a> uses free hosting space, many porn sites that rehost it pay for their own server space through advertisements, so they can afford to host all of the characters online.</p>
<p>However, rehosted versions are slow to update, meaning brand-new characters and bugfixes might not be present there. <a href="https://spnati.net/">spnati.net</a> is the official version of the game and will always be the most up-to-date (including changes to this FAQ), and you can still download the offline version to play with the older and incomplete characters. The version number rarely updates and usually does not reflect the most recent version of the game.</p>
<p><a href="https://spnati.gitlab.io/">spnati.gitlab.io</a> is a mirror of <a href="https://spnati.net/">spnati.net</a>.</p>
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can you put X in the game?</h4>
<div class="faq-answer">
<p>You can request that certain characters be made on the Discord servers or the following discussion thread:</p>
<p><a href="https://old.reddit.com/r/spnati/comments/afad5j/discussion_and_suggestion_thread/">https://old.reddit.com/r/spnati/comments/afad5j/discussion_and_suggestion_thread/</a></p>
<p>However, because of the time and effort making a character requires, you are very unlikely to find someone willing to make a character for you. Instead, you should ask if someone is interested in making a character and offer to do it yourself or to help them.</p>
<p>Remember: you don't need artistic or coding skills to make a character. Don't be afraid to try and do it yourself!</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can I download the game?</h4>
<div class="faq-answer">
<p>SPNATI is hosted and updated on a group worksite called GitLab. The link to the project is here:</p>
<p><a href="https://gitlab.com/spnati/spnati.gitlab.io">https://gitlab.com/spnati/spnati.gitlab.io</a></p>
<p>Once there, find the cloud icon near the top right and select "Download zip" from its dropdown menu. This will allow you to download the entire game and all its files; note that this is a several-GB download thanks to all the character sprites!</p>
<p>Extract all the files, and you'll have offline SPNATI. Opening <code>config.xml</code> in the main folder (use Notepad) will allow you to change some settings, such as enabling debug mode and unlocking all endings. Open <code>index.html</code> in your browser to play the game!</p>
<p>The <kbd>tools</kbd> folder of offline SPNATI is where you can find offline Kisekae and the Character Editor.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Opening index.html in my browser doesn't work. Why?</h4>
<div class="faq-answer">
<p>Are you using Google Chrome? Chrome is too restrictive with its subfolders access, so SPNATI can't retrieve character data. Try using Firefox instead.</p>
<p>It's also possible you forgot to extract the game files from the .zip you downloaded.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">How do I keep my offline version updated?</h4>
<div class="faq-answer">
<p>You can do this very easily without redownloading the game every time. Follow the instructions here:</p>
<p><a href="https://old.reddit.com/r/spnati/comments/824j7p/keep_your_offline_version_up_to_date_with_github/">https://old.reddit.com/r/spnati/comments/824j7p/keep_your_offline_version_up_to_date_with_github/</a></p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can I play the offline version on mobile?</h4>
<div class="faq-answer">
<p>Unfortunately, no. There is no way to play the offline version on mobile at this time. SPNATI is primarily built for computer use, and its mobile version is a straight port.</p>
</div>
</div><div class="faq-question-container">
<h4 class="faq-question">Can you make a mobile app?</h4>
<div class="faq-answer">
<p>There are no plans to make a mobile app for SPNATI at this time, and because of copyright reasons, certainly not one that would appear in any official app stores.</p>
</div>
</div>
</div>
<!-- Common issues -->
<div class="help-page container-fluid" data-page="6" style="display:none">
<h2>FAQ - Common Issues</h2>
<div class="faq-question-container">
<h4 class="faq-question">Why isn't X loading?</h4>
<p class="faq-answer">Are you playing on mobile? Some characters' behavior files are very large, and your phone may be unable to process them. Try playing on a computer instead.</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Why doesn't the offline version show all the characters?</h4>
<div class="faq-answer">
<p>Characters come in several designations: "online" for characters on the online main roster at spnati.net, "testing" for characters on the online testing tables, "offline" for characters that used to be on the online main roster but were removed for space, and "incomplete." "Incomplete" is for characters who were submitted to testing but fell off due to lack of updates or author request, and it is used regardless of their quality or actual "completeness."</p>
<p>Incomplete characters are not by default available offline, even though they are included in the offline version download. To use them, open config.xml and copy/paste the following line of code with the others like it:</p>
<p><code><include-status>incomplete</include-status></code></p>
<p>You can also activate alternate costumes to be selectable offline using config.xml. These are different skins for characters that are usually holiday-themed.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">My characters/text/game started glitching out. What's going on?</h4>
<p class="faq-answer">Are you playing with Monika from Doki Doki Literature Club? Monika uses special code in her behavior files to achieve these effects deliberately, much like in her source material.</p>
<div class="faq-question-container">
<h4 class="faq-question">I clicked the triangle icon Monika mentioned and sent a report, but nothing happened.</h4>
<p class="faq-answer">That icon is for the ingame bug report feature, which only has the function of submitting bug reports. She means the triangle icon that appears in her speech bubble.</p>
</div>
</div>
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865
<!-- Common feature requests -->
<div class="help-page container-fluid" data-page="7" style="display:none">
<h2>FAQ - Commonly Requested Features</h2>
<div class="faq-question-container">
<h4 class="faq-question">Can I give the player character more details than penis/breast size and clothes?</h4>
<div class="faq-answer">
<p>Yes, you can! The icon to the right of the "Enter the Inventory" button on the player clothing selection screen will bring up the list of tags that is used for the characters. You can choose these to apply to the player, as well, and characters will treat you as if you have those attributes.</p>
<p>Keep in mind that this is a more recent feature, so many characters do not have dialogue tailored for it.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can I see the player character?</h4>
<div class="faq-answer">
<p>Unfortunately, the many combinations of clothing and stripping orders the player has makes the image space necessary for this unfeasibly large. There is also no space on the UI to show the player character.</p>
<p>Most developers for SPNATI will encourage you to simply use your imagination, or to strip along in real life. SPNATI is built around watching crossover characters interact, not detailed role-playing.</p>
<p>You can always make yourself in Kisekae and/or for SPNATI if you really want to--you just can't submit them to the online version of the game. No real people.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can I play as one of the characters?</h4>
<div class="faq-answer">
<p>You can name yourself after them, but the other characters will still treat you as the player. This is because dialogue is coded to reference character folders, not their names.</p>
<p>Lots of targeted dialogue also assumes the responses of the computer versions of each character will play, so the role-play would not make much sense anyway.</p>
</div>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can you add voice acting or background music?</h4>
<p class="faq-answer">Unfortunately, the audio files needed for music and voice acting would take up even more of SPNATI's limited space than the sprites do. Since the game is silent, however, you can always play your own music.</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can you make the models 3D?</h4>
<p class="faq-answer">No. This would require even more file space and a completely different art program and interface, and likely a steeper learning curve.</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">Can you add multiplayer?</h4>
<p class="faq-answer">No. SPNATI is meant to be a single-player experience.</p>
</div>
<div class="faq-question-container">
<h4 class="faq-question">What happened to the Swimsuit Edition?</h4>
<div class="faq-answer">
<p>The Swimsuit Edition was an unofficial offshoot of SPNATI. The users maintaining it have since left the community and let it become defunct, and there is little interest in reviving it among the current developers.</p>
<p>If you'd like to see the Swimsuit Edition return, consider making it yourself!</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="help-page-select">
<a href="#" aria-label="Previous" data-select-page="prev">
<span aria-hidden="true" style="pointer-events:none">«</span>
<li class="help-page-select active" data-page="1"><a href="#" data-select-page="1">1</a></li>
<li class="help-page-select" data-page="2"><a href="#" data-select-page="2">2</a></li>
<li class="help-page-select" data-page="3"><a href="#" data-select-page="3">3</a></li>
<li class="help-page-select" data-page="4"><a href="#" data-select-page="4">4</a></li>
<li class="help-page-select" data-page="5"><a href="#" data-select-page="5">5</a></li>
<li class="help-page-select" data-page="6"><a href="#" data-select-page="6">6</a></li>
<li class="help-page-select" data-page="7"><a href="#" data-select-page="7">7</a></li>
<li class="help-page-select">
<a href="#" aria-label="Next" data-select-page="next">
<span aria-hidden="true" style="pointer-events:none">»</span>
</a>
</li>
</ul>
</nav>
<div>
<button id="credit-modal-button" class="bordered smooth-button modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
<!-- End of Help Modal -->
FarawayVision
committed
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
<!-- Start of Select Screen Heads-Up modal -->
<div id="select-headsup-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog -average-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center"><b>Looking for Someone?</b></h3>
</div>
<div class="modal-body">
<p>If you're looking for a character who seems to have disappeared, they may have been moved offline or onto the Testing Tables.</p>
<p>For more information, check out our <a href="#" data-dismiss="modal" onclick="showHelpModal();">FAQ</a>.</p>
<div><input id="select-headsup-hide" type="checkbox"><label style="margin-left:1%" for="select-headsup-hide">Don't show this again.</label></div>
</div>
<div class="modal-footer">
<button id="headsup-modal-button" class="bordered smooth-button modal-button" data-dismiss="modal">Close</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Credits Modal -->
<!-- Start of Version Modal -->
<div id="version-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center"><b>Version Details</b></h3>
</div>
<div class="modal-body">
<table id="changelog-container" class="modal-body-stretch-container" style="margin: 0 auto;"></table>
</div>
<div class="modal-footer">
<button id="credit-modal-button" class="bordered smooth-button modal-button" data-dismiss="modal">Close</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Version Modal -->
<!-- Start of Player Tags Modal -->
<div id="player-tags-modal" class="modal table-modal fade">
<div class="modal-flex-container">
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Add Descriptive Tags to Your Character for a More Customized Experience!</h4>
<h5 class='text-center'>*There is still no graphical representation of your character, this just allows characters who have dialogue written towards these traits to know more about you when commenting. Not all characters will comment.</h5>
</div>
<div class="modal-body">
<form id='player-tags'>
<label class='player-tag-select'>
Choose a hair color:
<div class='colorAndLabel'>
<input type='text' name='hair_color' disabled/>
<input type='color' id='hair_color_picker' value='#502d26'>
</div>
</label>
<label class='player-tag-select'>
Choose an eye color:
<div class='colorAndLabel'>
<input type='text' name='eye_color' disabled/>
<input type='color' id='eye_color_picker' value='#0b0d6c'>
</div>
</label>
<label class='player-tag-select'>
Choose a skin tone:
<div class='colorAndLabel range'>
<input type='text' name='skin_color_tag' disabled/>
<input type='range' name='skin_color' value='50'>
</div>
</label>
</form>
<div class="modal-body-container" style="padding-top:4%;">
<button id="player-tags-confirm" class="bordered smooth-button modal-button" data-dismiss="modal">Confirm</button>
<button class="bordered smooth-button modal-button clearSelections smooth-button-red">Clear Selections</button>
</div>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div> <!-- End of Player Tags Modal -->
<!-- Import/Export Modal -->
<div id="io-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Save or Restore Your Progress</h4>
<h5 class='text-center'>When playing in Incognito Mode, your progress will not be preserved upon closing the browser.<br/>Copy the code below to store off your progress for a later session.<br/>Paste a code into the box and click Import to restore your progress.</h5>
</div>
<div class="modal-body">
<form id='load'>
<textarea class="form-control" id='export-code' rows="15"></textarea>
</form>
<div class="modal-body-container" style="padding-top:4%;">
<div class="import-restriction-warning">
Please play through at least one full game before loading a save code.
</div>
<button class="bordered smooth-button modal-button" data-dismiss="modal">Close</button>
<button id="import-progress" class="bordered smooth-button modal-button" data-dismiss="modal">Import</button>
</div>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- shhhh -->
<script>document.addEventListener('keyup',function(){var i=0;var c=[2,2,0,0,3,1,3,1,5,4].map(function(j){return ['ArrowDown','ArrowRight','ArrowUp','ArrowLeft',String.fromCharCode(97),String.fromCharCode(98)][j]});return function(e){if(inGame) return;if(e.key === c[i]){i++;if(i>=c.length){codeImportEnabled=true;i=0;showImportModal()}} else i=0}}(),false);</script>
<!-- End of Import/Export Modal -->
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
<!-- DevMode Export Modal -->
<div id="dev-export-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog wide-modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Export Dev Mode Edits</h4>
<h5 class='text-center'>This code will allow you to import any edits you've made to your character's dialogue into the Character Editor.</h5>
</div>
<div class="modal-body">
<form>
<textarea class="form-control" id='export-edit-log' rows="15" readonly></textarea>
</form>
<div class="modal-body-container" style="padding-top:4%;">
<button class="bordered smooth-button modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of DevMode Export Modal -->
<div id="game-screen" class="screen-container ui-minimal" hidden>
<div class="screen">
<!-- Dialogue Bubbles -->
<div class="dialogue-bubble-row">
<div id="game-bubble-1" class="bordered left dialogue-bubble-area" data-slot="1">
<div class="dialogue-bubble arrow-down">
<span id="game-dialogue-1" class="dialogue"></span>
<textarea class="dialogue-edit dialogue-edit-entry"></textarea>
<div class="dialogue-edit dialogue-edit-status"></div>
<div class="edit-options-row">
<button type="button" class="bordered smooth-button dialogue-entry-button edit-confirm"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-cancel"><span class="glyphicon glyphicon-remove"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-preview"><span class="glyphicon glyphicon-eye-open"></span></button>
<button type="button" class="bordered smooth-button dialogue-init-button dialogue-respond-button"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="bordered smooth-button dialogue-init-button dialogue-edit-button"><span class="glyphicon glyphicon-pencil"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-pose">Pose...</button>
</div>
<div class="bordered edit-pose-row">
<input type="text" class="dialogue-pose-entry" list="edit-pose-list-1">
<datalist id="edit-pose-list-1" class="edit-pose-list"></datalist>
<div id="game-bubble-2" class="bordered halfLeft dialogue-bubble-area" data-slot="2">
<div class="dialogue-bubble arrow-down">
<span id="game-dialogue-2" class="dialogue"></span>
<textarea class="dialogue-edit dialogue-edit-entry"></textarea>
<div class="dialogue-edit dialogue-edit-status"></div>
<div class="edit-options-row">
<button type="button" class="bordered smooth-button dialogue-entry-button edit-confirm"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-cancel"><span class="glyphicon glyphicon-remove"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-preview"><span class="glyphicon glyphicon-eye-open"></span></button>
<button type="button" class="bordered smooth-button dialogue-init-button dialogue-respond-button"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="bordered smooth-button dialogue-init-button dialogue-edit-button"><span class="glyphicon glyphicon-pencil"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-pose">Pose...</button>
</div>
<div class="bordered edit-pose-row">
<input type="text" class="dialogue-pose-entry" list="edit-pose-list-2">
<datalist id="edit-pose-list-2" class="edit-pose-list"></datalist>
<div id="game-bubble-3" class="bordered center dialogue-bubble-area" data-slot="3">
<div class="dialogue-bubble arrow-down">
<span id="game-dialogue-3" class="dialogue"></span>
<textarea class="dialogue-edit dialogue-edit-entry"></textarea>
<div class="dialogue-edit dialogue-edit-status"></div>
<div class="edit-options-row">
<button type="button" class="bordered smooth-button dialogue-entry-button edit-confirm"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-cancel"><span class="glyphicon glyphicon-remove"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-preview"><span class="glyphicon glyphicon-eye-open"></span></button>
<button type="button" class="bordered smooth-button dialogue-init-button dialogue-respond-button"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="bordered smooth-button dialogue-init-button dialogue-edit-button"><span class="glyphicon glyphicon-pencil"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-pose">Pose...</button>
</div>
<div class="bordered edit-pose-row">
<input type="text" class="dialogue-pose-entry" list="edit-pose-list-3">
<datalist id="edit-pose-list-3" class="edit-pose-list"></datalist>
<div id="game-bubble-4" class="bordered farHalfLeft dialogue-bubble-area" data-slot="4">
<div class="dialogue-bubble arrow-down">
<span id="game-dialogue-4" class="dialogue"></span>
<textarea class="dialogue-edit dialogue-edit-entry"></textarea>
<div class="dialogue-edit dialogue-edit-status"></div>
<div class="edit-options-row">
<button type="button" class="bordered smooth-button dialogue-entry-button edit-confirm"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-cancel"><span class="glyphicon glyphicon-remove"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-preview"><span class="glyphicon glyphicon-eye-open"></span></button>
<button type="button" class="bordered smooth-button dialogue-init-button dialogue-respond-button"><span class="glyphicon glyphicon-comment"></span></button>
<button type="button" class="bordered smooth-button dialogue-init-button dialogue-edit-button"><span class="glyphicon glyphicon-pencil"></span></button>
<button type="button" class="bordered smooth-button dialogue-entry-button edit-pose">Pose...</button>
</div>
<div class="bordered edit-pose-row">
<input type="text" class="dialogue-pose-entry" list="edit-pose-list-4">
<datalist id="edit-pose-list-4" class="edit-pose-list"></datalist>
<!-- Opponent Images -->
<div class="image-row">
<div id="game-image-area-1" class="farLeft opponent-image-area">
ReformCopyright
committed
<img id="game-image-1" class="opponent-image" hidden>
<div id="game-image-area-2" class="almostLeft opponent-image-area">
ReformCopyright
committed
<img id="game-image-2" class="opponent-image" hidden>
<div id="game-image-area-3" class="almostRight opponent-image-area">
ReformCopyright
committed
<img id="game-image-3" class="opponent-image" hidden>
<div id="game-image-area-4" class="farRight opponent-image-area">
ReformCopyright
committed
<img id="game-image-4" class="opponent-image" hidden>
<!-- Option Buttons -->
<button class='bordered hide-table-button' onclick="toggleTableVisibility()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<button class='bordered table-bug-report-button' onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
</button>
<button id="debug-button-0" class="bordered player-debug-button" onclick="selectDebug(0)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
<div class="btn-group dropup game-menu-dropup" data-toggle="tooltip" data-placement="right" title="Game Menu">
<button type="button" class="bordered smooth-button smooth-button-red dropdown-toggle menu-dropdown-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span></button>
<ul class="dropdown-menu">
<button id="game-dev-export-button" class="dropdown-button-item bordered smooth-button smooth-button-red" onclick="showDevExportModal()">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
<span class="game-menu-label">Export Dialogue Edits</span>
</button>
<button id="game-log-button" class="dropdown-button-item bordered smooth-button smooth-button-red" onclick="showHelpModal()">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="game-menu-label">Help and FAQ</span>
</button>
<button id="game-log-button" class="dropdown-button-item bordered smooth-button smooth-button-red" onclick="showLogModal()">
<span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
<span class="game-menu-label">Dialogue Log</span>
</button>
<button id="game-home-button" class="dropdown-button-item bordered smooth-button smooth-button-red" onclick="showRestartModal()"><!-- doEpilogueModal -->
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<span class="game-menu-label">Return to Title</span>
</button>
<button id="game-settings-button" class="dropdown-button-item bordered smooth-button smooth-button-red" onclick="showOptionsModal()">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
<span class="game-menu-label">Options</span>
</button>
</ul>
<!-- Game Table -->
<div id="game-table">
<div id="game-opponent-area-1" class="optional-bordered left opponent-area">
<div id="game-name-label-1" class="bordered opponent-name-label">Opponent 1</div>
<div class="opponent-card-area">
<img id="player-1-card-1" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-1-card-2" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-1-card-3" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-1-card-4" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-1-card-5" class="bordered small-card-image" src="img/blankcard.jpg">
</div>
<button id="dev-select-button-1" class="bordered dev-select-button" onclick="setDevModeTarget(1)" hidden>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button id="debug-button-1" class="bordered debug-button" onclick="selectDebug(1)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
FarawayVision
committed
<button id="collectible-button-1" class="bordered collectible-button">
<img src="img/gallery.svg" alt="Collectible unlocked! Click to view.">
</button>
<div id="game-opponent-area-2" class="optional-bordered halfLeft opponent-area">
<div id="game-name-label-2" class="bordered opponent-name-label">Opponent 2</div>
<div class="opponent-card-area">
<img id="player-2-card-1" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-2-card-2" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-2-card-3" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-2-card-4" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-2-card-5" class="bordered small-card-image" src="img/blankcard.jpg">
</div>
<button id="dev-select-button-2" class="bordered dev-select-button" onclick="setDevModeTarget(2)" hidden>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button id="debug-button-2" class="bordered debug-button" onclick="selectDebug(2)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
FarawayVision
committed
<button id="collectible-button-2" class="bordered collectible-button" >
<img src="img/gallery.svg" alt="Collectible unlocked! Click to view.">
</button>
<div id="game-opponent-area-3" class="optional-bordered halfRight opponent-area">
<div id="game-name-label-3" class="bordered opponent-name-label">Opponent 3</div>
<div class="opponent-card-area">
<img id="player-3-card-1" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-3-card-2" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-3-card-3" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-3-card-4" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-3-card-5" class="bordered small-card-image" src="img/blankcard.jpg">
</div>
<button id="dev-select-button-3" class="bordered dev-select-button" onclick="setDevModeTarget(3)" hidden>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button id="debug-button-3" class="bordered debug-button" onclick="selectDebug(3)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
FarawayVision
committed
<button id="collectible-button-3" class="bordered collectible-button">
<img src="img/gallery.svg" alt="Collectible unlocked! Click to view.">
</button>
<div id="game-opponent-area-4" class="optional-bordered right opponent-area">
<div id="game-name-label-4" class="bordered opponent-name-label">Opponent 4</div>
<div class="opponent-card-area">
<img id="player-4-card-1" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-4-card-2" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-4-card-3" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-4-card-4" class="bordered small-card-image" src="img/blankcard.jpg">
<img id="player-4-card-5" class="bordered small-card-image" src="img/blankcard.jpg">
</div>
<button id="dev-select-button-4" class="bordered dev-select-button" onclick="setDevModeTarget(4)" hidden>
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
<button id="debug-button-4" class="bordered debug-button" onclick="selectDebug(4)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
FarawayVision
committed
<button id="collectible-button-4" class="bordered collectible-button">
<img src="img/gallery.svg" alt="Collectible unlocked! Click to view.">
</button>
<!-- Player Clothing and Label -->
<div id="player-game-clothing-area" class="bordered">
<div class="left player-clothing-container">
<img class="bordered clothing-float-left small-clothing-image player-0-clothing-7" src="img/blankcard.jpg">
<img class="bordered clothing-float-left small-clothing-image player-0-clothing-6" src="img/blankcard.jpg">
<img class="bordered clothing-float-left small-clothing-image player-0-clothing-5" src="img/blankcard.jpg">
<img class="bordered clothing-float-left small-clothing-image player-0-clothing-8" src="img/blankcard.jpg">
</div>
<div class="right player-clothing-container">
<img class="bordered clothing-float-right small-clothing-image player-0-clothing-2" src="img/blankcard.jpg">
<img class="bordered clothing-float-right small-clothing-image player-0-clothing-3" src="img/blankcard.jpg">
<img class="bordered clothing-float-right small-clothing-image player-0-clothing-4" src="img/blankcard.jpg">
<img class="bordered clothing-float-right small-clothing-image player-0-clothing-1" src="img/blankcard.jpg">
<div class="game-name-label-0 bordered player-name-label">Player</div>
<div id="game-clothing-label" class="bordered">Your Clothing</div>
</div>
<div id="player-game-clothing-area-minimal" class="">
<div class="minimal-clothing-area-row">
<div class="small-clothing-image-container"><img class="bordered small-clothing-image player-0-clothing-8" src="img/blankcard.jpg" data-slot="8"></div>
<div class="small-clothing-image-container"><img class="bordered small-clothing-image player-0-clothing-7" src="img/blankcard.jpg" data-slot="7"></div>
<div class="small-clothing-image-container"><img class="bordered small-clothing-image player-0-clothing-6" src="img/blankcard.jpg" data-slot="6"></div>
<div class="small-clothing-image-container"><img class="bordered small-clothing-image player-0-clothing-5" src="img/blankcard.jpg" data-slot="5"></div>
</div>
<div class="minimal-clothing-area-row">
<div class="small-clothing-image-container"><img class="bordered small-clothing-image player-0-clothing-4" src="img/blankcard.jpg" data-slot="4"></div>
<div class="small-clothing-image-container"><img class="bordered small-clothing-image player-0-clothing-3" src="img/blankcard.jpg" data-slot="3"></div>
<div class="small-clothing-image-container"><img class="bordered small-clothing-image player-0-clothing-2" src="img/blankcard.jpg" data-slot="2"></div>
<div class="small-clothing-image-container"><img class="bordered small-clothing-image player-0-clothing-1" src="img/blankcard.jpg" data-slot="1"></div>
<div id="player-game-card-area" class="optional-bordered player-card-area">
<input type="image" id="player-0-card-1" class="bordered large-card-image" src="img/blankcard.jpg" onclick="selectCard(0)"/>
<input type="image" id="player-0-card-2" class="bordered large-card-image" src="img/blankcard.jpg" onclick="selectCard(1)"/>
<input type="image" id="player-0-card-3" class="bordered large-card-image" src="img/blankcard.jpg" onclick="selectCard(2)"/>
<input type="image" id="player-0-card-4" class="bordered large-card-image" src="img/blankcard.jpg" onclick="selectCard(3)"/>
<input type="image" id="player-0-card-5" class="bordered large-card-image" src="img/blankcard.jpg" onclick="selectCard(4)"/>
</div>
<!-- Main Game Button -->
<div id="game-hidden-area" class="centred-deck-area">
<img class="bordered dock-card large-card-image" src="img/unknown.jpg">
<img id="hidden-large-card" class="bordered large-card-image dock-card hidden-large-card" src="img/unknown.jpg">
</div>
<div id="player-countdown" class="bordered" hidden>1</div>
<button id="main-game-button" class="bordered smooth-button smooth-button-red" onclick="advanceGame()">Deal</button>
<div class="player-name-label-container">
<div class="game-name-label-0 bordered player-name-label-minimal">Player</div>
</div>
</div>
</div>
<!-- Start of Epilogue Screen -->
<div id="epilogue-screen" role="dialog" hidden>
<div id='epilogue-container' data-background='-1' data-scene='-1'>
<div id="epilogue-spinner" class="spinner" style="display: none">
<div class="spinner-pip"></div>
<div class="spinner-pip"></div>
<div class="spinner-pip"></div>
<div id="epilogue-progress">0%</div>
</div>
<div id='epilogue-buttons'>
<button type="button" id='epilogue-next' class="bordered smooth-button">
Next
</button>
<button type="button" id='epilogue-previous' class="bordered smooth-button">
Previous
</button>
<button type="button" id='epilogue-restart' class="bordered smooth-button">
Restart?
</button>
</div>
</div>
<!-- End of Epilogue Screen -->
<!-- Start of Epilogue Choice Modal -->
<div id="epilogue-modal" class="modal table-modal fade" role="dialog">
<div class="modal-table-container">
<div class="modal-cell-container">
<div class="bordered modal-dialog">
<div class="bordered modal-dialog-surface">
<!-- Start of Modal Content -->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title text-center">The game is now over...</h3>
<h5 id="epilogue-header-text" class="modal-title text-center"></h5>
</div>
<div class="modal-body">
<div class="modal-body-container" style="width:100%">
</div>
</div>
<div class="modal-footer">
<button id="epilogue-modal-accept-button" class="bordered smooth-button modal-button epilogue-modal-button" onclick="doEpilogue()">Choose</button>
</div>
<div class="modal-footer">
<button id="epilogue-modal-restart-button" class="bordered smooth-button modal-button epilogue-modal-button" onclick="showRestartModal()" data-dismiss="modal">Restart?</button>
</div>
</div>
<!-- End of Modal Content -->
</div>
</div>
</div>
</div>
</div>
<!-- End of Options Modal -->
<!-- Third Party JavaScript -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
metodLD
committed
<script src="js/js.cookie.js"></script>
<script src="js/pako.min.js"></script>
<!-- JavaScript Definitions -->
<script src="js/player.js"></script>
<script src="js/table.js"></script>
metodLD
committed
<script src="js/save.js"></script>
<!-- My JavaScript -->
<script src="js/spniCore.js"></script>
<script src="js/spniDevMode.js"></script>
<script src="js/spniTitle.js"></script>
<script src="js/spniSelect.js"></script>
<script src="js/spniGame.js"></script>
<script src="js/spniPoker.js"></script>
<script src="js/spniClothing.js"></script>
<script src="js/spniForfeit.js"></script>
<script src="js/spniBehaviour.js"></script>
<script src="js/spniAI.js"></script>
<script src="js/spniOption.js"></script>
<script src="js/spniEpilogue.js"></script>
metodLD
committed
<script src="js/spniGallery.js"></script>
<!-- shhhh -->
<script>document.addEventListener('keyup',function(){var i=0;var c=[2,2,0,0,3,1,3,1,5,4].map(function(j){return ['ArrowDown','ArrowRight','ArrowUp','ArrowLeft',String.fromCharCode(97),String.fromCharCode(98)][j]});return function(e){if(inGame) return;if(e.key === c[i]){i++;if(i>=c.length){codeImportEnabled=true;i=0;showImportModal()}} else i=0}}(),false);</script>