<!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">
<head>
<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">
</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()">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair substitute-version" onclick="showVersionModal()">
Unknown Version
</button>
<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>
<button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
Help / FAQ
</button>
<button id="title-credits-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showCreditModal()">
Credits
</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>
<!-- 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>
<br><br><br>
<p>Make sure to check out our list of <a href="#" onclick="showHelpModal()">Frequently-Asked Questions</a>!</p>
<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>
<!-- Start Button -->
<div id='title-start-edge' class='bordered'>
<button id='title-start-button' class='bordered smooth-button smooth-button-red' onclick="enterTitleScreen()">
<img class='title-entrance-image' src='img/enter.png'/>
</button>
</div>
</div>
</div>
</div>
<!-- Title Screen -->
<div id="title-screen" class="screen-container" hidden>
<div class="screen">
<!-- 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()">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair substitute-version" onclick="showVersionModal()">
Unknown Version
</button>
<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>
<button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
Help / FAQ
</button>
<button id="title-credits-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showCreditModal()">
Credits
</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>
<!-- 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 male">
<!-- 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>
<!-- Player Gender -->
<div id='title-gender-block'>
<input type='image' value='' id='male-gender-button' class='bordered title-content-button' src='img/male.png' onclick='changePlayerGender("male")'>
<input type='image' value='' id='female-gender-button' class='bordered title-content-button' src='img/female.png' onclick='changePlayerGender("female")'>
</div>
<!-- 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' src='img/male_small.png' onclick='changePlayerSize("small")'>
<input type='image' value='' id="medium-junk-button" class='bordered title-medium-button title-content-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' 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' src='img/female_small.png' onclick='changePlayerSize("small")'>
<input type='image' value='' id="medium-boobs-button" class='bordered title-medium-button title-content-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' 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)'>
<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)'>
<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)'>
<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)'>
</div>
</div>
<!-- Start Button -->
<div id='title-start-edge' class='bordered'>
<button id='title-start-button' class='bordered smooth-button smooth-button-red' onclick="validateTitleScreen()">
<img class='title-entrance-image' src='img/enter.png'/>
</button>
</div>
<div id='title-gallery-edge' class='bordered'>
<button id='title-gallery-button' class='bordered smooth-button smooth-button-red' onclick="loadGalleryScreen()">
<img class='title-gallery-image' src='img/gallery.svg'/>
</button>
</div>
<div id='title-tags-edge' class='bordered'>
<button id='title-tags-button' class='bordered smooth-button smooth-button-red' onclick="showPlayerTagsModal()">
<span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
</button>
</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">
<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">
<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">
<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">
<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">
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 4)">Name</button>
</div>
</div>
</div>
</div>
<div id="select-image-area-2" class="almostLeft selection-image-area">
<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">
<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">
<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">
<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">
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 4)">Name</button>
</div>
</div>
</div>
</div>
<div id="select-image-area-3" class="almostRight selection-image-area">
<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">
<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">
<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">
<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">
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 4)">Name</button>
</div>
</div>
</div>
</div>
<div id="select-image-area-4" class="farRight selection-image-area">
<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">
<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">
<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">
<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">
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 4)">Name</button>
</div>
</div>
</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>
<div id="select-table">
<!-- 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 -->
<button id='select-main-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backSelectScreen()">
Back
</button>
<button id='select-group-testing-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(1)">
Testing Tables
</button>
<button id='select-group-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(0)">
Preset Tables
</button>
<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>
<button id='select-remove-all-button' class='bordered main-select-button smooth-button smooth-button-red' onclick="clickedRemoveAllButton()" disabled="true">
Remove All
</button>
</div>
</div>
</div>
</div>
<!-- Individual Select Screen -->
<div id="individual-select-screen" class="screen-container" hidden>
<div class="screen">
<!-- Opponent Info -->
<div class="dialogue-bubble-row">
<div id="individual-stats-page-1-1" class="bordered left dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="individual-name-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="individual-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="individual-source-label-1" class="bordered stats-content"></div>
</div>
</div>
<div id="individual-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="individual-writer-label-1" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="individual-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="individual-counts-1">
<span id="individual-line-count-label-1"></span> unique lines <br />
<span id="individual-pose-count-label-1"></span> poses
</div>
</div>
</div>
</div>
<div id="individual-stats-page-1-3" class="bordered left dialogue-bubble-area" style="display:none;">
<div id="individual-description-label-1">
</div>
</div>
<div id="individual-stats-page-2-1" class="bordered halfLeft dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="individual-name-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="individual-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="individual-source-label-2" class="bordered stats-content"></div>
</div>
</div>
<div id="individual-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="individual-writer-label-2" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="individual-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="individual-counts-2">
<span id="individual-line-count-label-2"></span> unique lines <br />
<span id="individual-pose-count-label-2"></span> poses
</div>
</div>
</div>
</div>
<div id="individual-stats-page-2-3" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
<div id="individual-description-label-2">
</div>
</div>
<div id="individual-stats-page-3-1" class="bordered center dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="individual-name-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="individual-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="individual-source-label-3" class="bordered stats-content"></div>
</div>
</div>
<div id="individual-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="individual-writer-label-3" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="individual-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="individual-counts-3">
<span id="individual-line-count-label-3"></span> unique lines <br />
<span id="individual-pose-count-label-3"></span> poses
</div>
</div>
</div>
</div>
<div id="individual-stats-page-3-3" class="bordered center dialogue-bubble-area" style="display:none;">
<div id="individual-description-label-3">
</div>
</div>
<div id="individual-stats-page-4-1" class="bordered farHalfLeft dialogue-bubble-area">
<div class="stats-section">
<div class="bordered stats-label">Name</div>
<div id="individual-name-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Sex</div>
<div id="individual-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="individual-source-label-4" class="bordered stats-content"></div>
</div>
</div>
<div id="individual-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="individual-writer-label-4" class="bordered stats-content"></div>
</div>
<div class="input-group stats-section">
<div class="bordered stats-label">Artist</div>
<div id="individual-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="individual-counts-4">
<span id="individual-line-count-label-4"></span> unique lines <br />
<span id="individual-pose-count-label-4"></span> poses
</div>
</div>
</div>
</div>
<div id="individual-stats-page-4-3" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
<div id="individual-description-label-4">
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div class="farLeft selection-image-area">
<img id="individual-image-1" class="opponent-image" hidden>
<img id="individual-badge-1" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="individual-status-1" class="status-icon" src="img/testing-badge.png" hidden/>
<img id="individual-layer-1" class="layer-icon" src="img/layers1.png" hidden/>
<select id="individual-costume-select-1" class="alt-costume-dropdown" onchange="altCostumeSelected(1, false)"></select>
</div>
<div class="almostLeft selection-image-area">
<img id="individual-image-2" class="opponent-image" hidden>
<img id="individual-badge-2" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="individual-status-2" class="status-icon" src="img/testing-badge.png" hidden/>
<img id="individual-layer-2" class="layer-icon" src="img/layers1.png" hidden/>
<select id="individual-costume-select-2" class="alt-costume-dropdown" onchange="altCostumeSelected(2, false)"></select>
</div>
<div class="almostRight selection-image-area">
<img id="individual-image-3" class="opponent-image" hidden>
<img id="individual-badge-3" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="individual-status-3" class="status-icon" src="img/testing-badge.png" hidden/>
<img id="individual-layer-3" class="layer-icon" src="img/layers1.png" hidden/>
<select id="individual-costume-select-3" class="alt-costume-dropdown" onchange="altCostumeSelected(3, false)"></select>
</div>
<div class="farRight selection-image-area">
<img id="individual-image-4" class="opponent-image" hidden>
<img id="individual-badge-4" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="individual-status-4" class="status-icon" src="img/testing-badge.png" hidden/>
<img id="individual-layer-4" class="layer-icon" src="img/layers1.png" hidden/>
<select id="individual-costume-select-4" class="alt-costume-dropdown" onchange="altCostumeSelected(4, false)"></select>
</div>
</div>
<!-- Hide Button -->
<button class='bordered hide-table-button' onclick="hideSingleSelectionTable()">
<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>
<!-- Dock Area -->
<div id="individual-select-table">
<!-- Opponent Selections -->
<div class="bordered left small-opponent-area">
<button id="individual-button-1" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(1)">Select Opponent</button>
</div>
<div class="bordered halfLeft small-opponent-area">
<button id="individual-button-2" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(2)">Select Opponent</button>
</div>
<div class="bordered halfRight small-opponent-area">
<button id="individual-button-3" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(3)">Select Opponent</button>
</div>
<div class="bordered right small-opponent-area">
<button id="individual-button-4" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(4)">Select Opponent</button>
</div>
<!-- Dock Area -->
<div id='main-select-area' class='bordered'>
<!-- Buttons -->
<button id='individual-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backToSelect()">
Back
</button>
<button id='individual-search-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="openSearchModal()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
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="individual-page-indicator" type="text" class="bordered page-indicator" value="" />
<div id="individual-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="changeIndividualPage(true, -1)">
<span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button left-page-button" onclick="changeIndividualPage(false, -1)">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button go-page-button" onclick="changeIndividualPage(true, 0)">
<div style="margin-top:2px"><b>Go</b></div>
</button>
<button class="bordered smooth-button right-page-button" onclick="changeIndividualPage(false, 1)">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</button>
<button class="bordered smooth-button last-page-button" onclick="changeIndividualPage(true, 1)" style="border-right: 2px solid">
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
</button>
</div>
<!-- More Buttons -->
<button id='individual-basic-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(1)">
Basic Info
</button>
<button id='individual-credits-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(2)">
Credits
</button>
<button id='individual-more-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(3)">
More Info
</button>
</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">
<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/>
<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>
<div class="almostLeft selection-image-area">
<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/>
<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>
<div class="almostRight selection-image-area">
<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/>
<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>
<div class="farRight selection-image-area">
<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/>
<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>
</div>
</div>
<!-- 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 -->
<button id='group-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backToSelect()">
Back
</button>
<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>
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 -->
<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)">
Credits
</button>
<button id='group-more-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(3)">
More Info
</button>
</div>
</div>
</div>
</div>
<!-- Gallery Screen -->
<div id="gallery-screen" class="screen-container" hidden>
<div class="screen">
<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-main-back-button" class="bordered main-select-button smooth-button smooth-button-red" onclick="backGalleryScreen()">Back</button>
<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>
</div>
<!-- Tab completion lists shared by individual and group filter modals -->
<datalist id='sourceList'></datalist>
<datalist id='tagList'></datalist>
<!-- Start of Search Modal -->
<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">
<li id="search-gender-1" class="active"><a href="#" onclick="changeSearchGender(1)">All</a></li>
<li id="search-gender-2"><a href="#" onclick="changeSearchGender(2)">Male</a></li>
<li id="search-gender-3"><a href="#" onclick="changeSearchGender(3)">Female</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Source Filter</h4></td>
<td>
<input list='sourceList' type="text" id="search-source" class='bordered wide-textbox'/>
</td>
</tr>
<tr>
<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>
<li><a href="#">Targeted most by selected</a></li>
</ul>
</div>
</td>
</tr>
</table>
<div class="modal-body-container" style="padding-top:4%;">
<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 -->
<!-- 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">
<li id="group-search-gender-1" class="active"><a href="#" onclick="changeGroupSearchGender(1)">Any</a></li>
<li id="group-search-gender-2"><a href="#" onclick="changeGroupSearchGender(2)">Male only</a></li>
<li id="group-search-gender-3"><a href="#" onclick="changeGroupSearchGender(3)">Female only</a></li>
<li id="group-search-gender-4"><a href="#" onclick="changeGroupSearchGender(4)">Mixed</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Source Filter</h4></td>
<td>
<input list="sourceList" type="text" id="group-search-source" class='bordered wide-textbox'/>
</td>
</tr>
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Tag Filter</h4></td>
<td>
<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%;">
<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 -->
<!-- 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" style="height: 45%;">
<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()">Strip</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>Game Wide Settings</b></h3>
</div>
<div class="modal-body">
<div class="modal-body-container" style="width:100%">
<table style="width:100%">
<!-- Background Selection -->
<tr>
<td style="width:25%"><h4 class="modal-title modal-left">Background</h4></td>
<td>
<nav>
<ul class="pagination">
<li id="settings-background-1" class="active"><a href="#" onclick="setBackground(1)">The Inventory</a></li>
<li id="settings-background-2"><a href="#" onclick="setBackground(2)">Beach</a></li>
<li id="settings-background-3"><a href="#" onclick="setBackground(3)">Classroom</a></li>
<li id="settings-background-6"><a href="#" onclick="setBackground(6)">Roof</a></li>
<li id="settings-background-10"><a href="#" onclick="setBackground(10)">Poolside</a></li>
<li id="settings-background-11"><a href="#" onclick="setBackground(11)">Hot Spring</a></li>
<li id="settings-background-12"><a href="#" onclick="setBackground(12)">Mansion</a></li>
<li id="settings-background-13"><a href="#" onclick="setBackground(13)">Purple Room</a></li>
<li id="settings-background-15"><a href="#" onclick="setBackground(15)">Street</a></li>
<li id="settings-background-19"><a href="#" onclick="setBackground(19)">Bedroom</a></li>
<li id="settings-background-21"><a href="#" onclick="setBackground(21)">Locker Room</a></li>
<li id="settings-background-22"><a href="#" onclick="setBackground(22)">Haunted Forest</a></li>
<li id="settings-background-23"><a href="#" onclick="setBackground(23)">Romantic</a></li>
<li id="settings-background-24"><a href="#" onclick="setBackground(24)">Classic</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="text" id="player-masturbation-timer-box" onkeyup="changeMasturbationTimer()"> 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 Title Settings Modal -->
<!-- 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>
<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>
<!-- Auto Fade -->
<tr>
<td><h4 class="modal-title modal-left">Auto Table Fade</h4></td>
<td>
<nav>
<ul class="pagination">
<li id="options-auto-fade-1" class="active"><a href="#" onclick="setAutoFade(1)">True</a></li>
<li id="options-auto-fade-2"><a href="#" onclick="setAutoFade(2)">False</a></li>
</ul>
</nav>
</td>
</tr>
<!-- Card Suggest -->
<tr>
<td><h4 class="modal-title modal-left">Card Suggest</h4></td>
<td>
<nav>
<ul class="pagination">
<li id="options-card-suggest-1"><a href="#" onclick="setCardSuggest(1)">Enabled</a></li>
<li id="options-card-suggest-2" class="active"><a href="#" onclick="setCardSuggest(2)">Disabled</a></li>
</ul>
</nav>
</td>
</tr>
<!-- AI Turn Time -->
<tr>
<td><h4 class="modal-title modal-left">AI Turn Time</h4></td>
<td>
<nav>
<ul class="pagination">
<li id="options-ai-turn-time-1"><a href="#" onclick="setAITurnTime(1)">Very Fast</a></li>
<li id="options-ai-turn-time-2"><a href="#" onclick="setAITurnTime(2)">Fast</a></li>
<li id="options-ai-turn-time-3" class="active"><a href="#" onclick="setAITurnTime(3)">Normal</a></li>
<li id="options-ai-turn-time-4"><a href="#" onclick="setAITurnTime(4)">Slow</a></li>
<li id="options-ai-turn-time-5"><a href="#" onclick="setAITurnTime(5)">Very Slow</a></li>
</ul>
</nav>
</td>
</tr>
<!-- Deal Animation -->
<tr>
<td><h4 class="modal-title modal-left">Deal Animation</h4></td>
<td>
<nav>
<ul class="pagination">
<li id="options-deal-speed-1"><a href="#" onclick="setDealSpeed(1)">Disabled</a></li>
<li id="options-deal-speed-2"><a href="#" onclick="setDealSpeed(2)">Fast</a></li>
<li id="options-deal-speed-3" class="active"><a href="#" onclick="setDealSpeed(3)">Normal</a></li>
<li id="options-deal-speed-4"><a href="#" onclick="setDealSpeed(4)">Slow</a></li>
</ul>
</nav>
</td>
</tr>
<!-- Auto Advance -->
<tr>
<td><h4 class="modal-title modal-left">Auto-Advance during Forfeit</h4></td>
<td>
<nav>
<ul class="pagination">
<li id="options-auto-forfeit-1"><a href="#" onclick="setAutoForfeit(1)">Fast</a></li>
<li id="options-auto-forfeit-2"><a href="#" onclick="setAutoForfeit(2)">Normal</a></li>
<li id="options-auto-forfeit-3"><a href="#" onclick="setAutoForfeit(3)">Slow</a></li>
<li id="options-auto-forfeit-4" class="active"><a href="#" onclick="setAutoForfeit(4)">Off</a></li>
</ul>
</nav>
</td>
</tr>
<tr>
<td><h4 class="modal-title modal-left">Auto-Advance at End</h4></td>
<td>
<nav>
<ul class="pagination">
<li id="options-auto-ending-1"><a href="#" onclick="setAutoEnding(1)">Fast</a></li>
<li id="options-auto-ending-2"><a href="#" onclick="setAutoEnding(2)">Normal</a></li>
<li id="options-auto-ending-3"><a href="#" onclick="setAutoEnding(3)">Slow</a></li>
<li id="options-auto-ending-4" class="active"><a href="#" onclick="setAutoEnding(4)">Off</a></li>
</ul>
</nav>
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button id="options-modal-button" class="bordered smooth-button modal-button" data-dismiss="modal" onclick="saveIngameOptions()">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-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>Submit an Issue Report</b></h3>
</div>
<div class="modal-body">
<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>
<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>
</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>
</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-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">
</div>
<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>
<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>
<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>The version number is rarely updated and does not reflect what the most recent version actually is. Characters on both testing and the main roster frequently receive small dialogue and art updates, such as targeting a new character.</p>
<p>However, not all characters have authors that still actively update them. Consider adopting one of these orphaned characters!</p>
</div>
</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>
</div>
</div>
</div>
<!-- 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>
</div>
<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>
</div>
</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>
<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>
<!-- 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>
</div>
</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>
<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>
<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>
<!-- 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>
</a>
</li>
<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>
</div>
<!-- End of Help Modal -->
<!-- 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 Credits Modal -->
<div id="credit-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>Credits</b></h3>
</div>
<div class="modal-body">
<strong>Strip Poker Night at the Inventory</strong><br><br>
<i>Primary designer and coder:</i> Joseph Kantel<br>
<i>Characters:</i> click the Credits button on the character screen to see author and artist information<br>
<i>Backgrounds ("Street", "Green Screen", "Arcade", and "Club"):</i> by DrankeyKrang<br>
<i>Background ("Bedroom"):</i> by XKokone-chanX (bed) & throwaway927263 (room)<br>
<i>Backgrounds ("Beach", "Classroom", "Brick", "Night", "Roof", "Seasonal", "Library", "Bathhouse", "Poolside", "Hot Spring", "Mansion", "Purple Room", and "Showers"):</i> by u/SPNATI<br>
<i>Background ("The Inventory"):</i> by Zeuses-Swan-Song<br>
</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 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="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 -->
<!-- Game Screen -->
<div id="game-screen" class="screen-container" hidden>
<div class="screen">
<!-- Dialogue Bubbles -->
<div class="dialogue-bubble-row">
<div id="game-bubble-1" class="bordered left dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="game-dialogue-1" class="dialogue"></span>
</div>
</div>
<div id="game-bubble-2" class="bordered halfLeft dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="game-dialogue-2" class="dialogue"></span>
</div>
</div>
<div id="game-bubble-3" class="bordered center dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="game-dialogue-3" class="dialogue"></span>
</div>
</div>
<div id="game-bubble-4" class="bordered farHalfLeft dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="game-dialogue-4" class="dialogue"></span>
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div id="game-image-area-1" class="farLeft opponent-image-area">
<img id="game-image-1" class="opponent-image" hidden>
</div>
<div id="game-image-area-2" class="almostLeft opponent-image-area">
<img id="game-image-2" class="opponent-image" hidden>
</div>
<div id="game-image-area-3" class="almostRight opponent-image-area">
<img id="game-image-3" class="opponent-image" hidden>
</div>
<div id="game-image-area-4" class="farRight opponent-image-area">
<img id="game-image-4" class="opponent-image" hidden>
</div>
</div>
<!-- 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-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>
</div>
<!-- Game Table -->
<div id="game-table">
<!-- Opponent Areas -->
<div id="game-opponent-area-1" class="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="debug-button-1" class="bordered debug-button" onclick="selectDebug(1)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div id="game-opponent-area-2" class="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="debug-button-2" class="bordered debug-button" onclick="selectDebug(2)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div id="game-opponent-area-3" class="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="debug-button-3" class="bordered debug-button" onclick="selectDebug(3)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<div id="game-opponent-area-4" class="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="debug-button-4" class="bordered debug-button" onclick="selectDebug(4)" hidden>
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
</div>
<!-- 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" id="player-0-clothing-7" src="img/blankcard.jpg">
<img class="bordered clothing-float-left small-clothing-image" id="player-0-clothing-6" src="img/blankcard.jpg">
<img class="bordered clothing-float-left small-clothing-image" id="player-0-clothing-5" src="img/blankcard.jpg">
<img class="bordered clothing-float-left small-clothing-image" id="player-0-clothing-8" src="img/blankcard.jpg">
</div>
<div class="right player-clothing-container">
<img class="bordered clothing-float-right small-clothing-image" id="player-0-clothing-2" src="img/blankcard.jpg">
<img class="bordered clothing-float-right small-clothing-image" id="player-0-clothing-3" src="img/blankcard.jpg">
<img class="bordered clothing-float-right small-clothing-image" id="player-0-clothing-4" src="img/blankcard.jpg">
<img class="bordered clothing-float-right small-clothing-image" id="player-0-clothing-1" src="img/blankcard.jpg">
</div>
<div id="game-name-label-0" class="bordered player-name-label">Player</div>
<div id="game-clothing-label" class="bordered">Your Clothing</div>
</div>
<!-- Player Cards -->
<div id="player-game-card-area" class="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>
</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>
</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>
<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%">
<ul id="epilogue-list">
</ul>
</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>
<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>
<script src="js/save.js"></script>
<!-- My JavaScript -->
<script src="js/spniCore.js"></script>
<script src="js/spniDisplay.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>
<script src="js/spniGallery.js"></script>
</body>
</html>