Newer
Older
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="img/icon.ico" />
<title>Strip Poker Night at the Inventory</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/spni.css">
</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" onclick="showVersionModal()">
<div class="substitute-version">Unknown Version</div>
<div class="substitute-version-time"></div>
<button class="bordered smooth-button smooth-button-red bug-report-button title-bug-report-button" onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
Help / FAQ
</button>
<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">
<p>This game contains material that is only suitable for adults. <b style="color:#DD3333">If you are under the age of 18, please leave now.</b></p>
<br>
<p><b style="color:#DD3333">Strip Poker Night at the Inventory</b> is a free, open source, and community run project. All characters represented within are 18+ and the property of their original owners.</p>
<p>The latest version of the game can be played at
<br><a href="https://spnati.net" target="_blank"><b>spnati.net</b></a></p>
<p>Make sure to check out our list of <a href="#" onclick="showHelpModal()">Frequently-Asked Questions</a>!</p>
FarawayVision
committed
<br>
<p>By clicking the button below, you are confirming that you are an adult and such material is legal in your region.</p>
<!-- 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'/>
<!-- Title Screen -->
<div id="title-screen" class="screen-container" hidden>
<div class="screen">
ReformCopyright
committed
<!-- Title Candy -->
<img id="left-title-candy" class="title-candy" src=""/>
<img id="right-title-candy" class="title-candy" src=""/>
<!-- Banner Flair -->
<button id="title-settings-button" class="bordered smooth-button smooth-button-red" onclick="showGameSettingsModal()">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
<button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showVersionModal()">
<div class="substitute-version">Unknown Version</div>
<div class="substitute-version-time"></div>
<button class="bordered smooth-button smooth-button-red bug-report-button title-bug-report-button" onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
<button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
Help / FAQ
</button>
<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>
<!-- 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)'>
Joseph Kantel
committed
<input type='image' value='' id="male-clothing-option-1" class='bordered title-clothing-button title-content-button titleClothing1' src='player/male/headphones.png' onclick='selectClothing(1)'>
<input type='image' value='' id="male-clothing-option-2" class='bordered title-clothing-button title-content-button titleClothing2' src='player/male/jacket.png' onclick='selectClothing(2)'>
<input type='image' value='' id="male-clothing-option-3" class='bordered title-clothing-button title-content-button titleClothing3' src='player/male/shirt.png' onclick='selectClothing(3)'>
<input type='image' value='' id="male-clothing-option-4" class='bordered title-clothing-button title-content-button titleClothing4' src='player/male/tshirt.png' onclick='selectClothing(4)'>
<input type='image' value='' id="male-clothing-option-5" class='bordered title-clothing-button title-content-button titleClothing5' src='player/male/undershirt.png' onclick='selectClothing(5)'>
<input type='image' value='' id="male-clothing-option-6" class='bordered title-clothing-button title-content-button titleClothing6' src='player/male/glasses.png' onclick='selectClothing(6)'>
<input type='image' value='' id="male-clothing-option-7" class='bordered title-clothing-button title-content-button titleClothing7' src='player/male/belt.png' onclick='selectClothing(7)'>
<input type='image' value='' id="male-clothing-option-8" class='bordered title-clothing-button title-content-button titleClothing8' src='player/male/pants.png' onclick='selectClothing(8)'>
<input type='image' value='' id="male-clothing-option-9" class='bordered title-clothing-button title-content-button titleClothing9' src='player/male/shorts.png' onclick='selectClothing(9)'>
<input type='image' value='' id="male-clothing-option-10" class='bordered title-clothing-button title-content-button titleClothing10' src='player/male/kilt.png' onclick='selectClothing(10)'>
<input type='image' value='' id="male-clothing-option-11" class='bordered title-clothing-button title-content-button titleClothing11' src='player/male/boxers.png' onclick='selectClothing(11)'>
<input type='image' value='' id="male-clothing-option-12" class='bordered title-clothing-button title-content-button titleClothing12' src='player/male/necklace.png' onclick='selectClothing(12)'>
<input type='image' value='' id="male-clothing-option-13" class='bordered title-clothing-button title-content-button titleClothing13' src='player/male/tie.png' onclick='selectClothing(13)'>
<input type='image' value='' id="male-clothing-option-14" class='bordered title-clothing-button title-content-button titleClothing14' src='player/male/gloves.png' onclick='selectClothing(14)'>
<input type='image' value='' id="male-clothing-option-15" class='bordered title-clothing-button title-content-button titleClothing15' src='player/male/socks.png' onclick='selectClothing(15)'>
<input type='image' value='' id="male-clothing-option-16" class='bordered title-clothing-button title-content-button titleClothing16' src='player/male/shoes.png' onclick='selectClothing(16)'>
<input type='image' value='' id="male-clothing-option-17" class='bordered title-clothing-button title-content-button titleClothing17' src='player/male/boots.png' onclick='selectClothing(17)'>
</div>
<!-- Female Clothing -->
<div id='female-clothing-container' class='title-clothing-container' hidden>
<input type='image' value='' id="female-clothing-option-0" class='bordered title-clothing-button title-content-button titleClothing0' src='player/female/hat.png' onclick='selectClothing(0)'>
Joseph Kantel
committed
<input type='image' value='' id="female-clothing-option-1" class='bordered title-clothing-button title-content-button titleClothing1' src='player/female/headphones.png' onclick='selectClothing(1)'>
<input type='image' value='' id="female-clothing-option-2" class='bordered title-clothing-button title-content-button titleClothing2' src='player/female/jacket.png' onclick='selectClothing(2)'>
<input type='image' value='' id="female-clothing-option-3" class='bordered title-clothing-button title-content-button titleClothing3' src='player/female/shirt.png' onclick='selectClothing(3)'>
<input type='image' value='' id="female-clothing-option-4" class='bordered title-clothing-button title-content-button titleClothing4' src='player/female/tanktop.png' onclick='selectClothing(4)'>
<input type='image' value='' id="female-clothing-option-5" class='bordered title-clothing-button title-content-button titleClothing5' src='player/female/bra.png' onclick='selectClothing(5)'>
<input type='image' value='' id="female-clothing-option-6" class='bordered title-clothing-button title-content-button titleClothing6' src='player/female/glasses.png' onclick='selectClothing(6)'>
<input type='image' value='' id="female-clothing-option-7" class='bordered title-clothing-button title-content-button titleClothing7' src='player/female/belt.png' onclick='selectClothing(7)'>
<input type='image' value='' id="female-clothing-option-8" class='bordered title-clothing-button title-content-button titleClothing8' src='player/female/pants.png' onclick='selectClothing(8)'>
<input type='image' value='' id="female-clothing-option-9" class='bordered title-clothing-button title-content-button titleClothing9' src='player/female/shorts.png' onclick='selectClothing(9)'>
<input type='image' value='' id="female-clothing-option-10" class='bordered title-clothing-button title-content-button titleClothing10' src='player/female/skirt.png' onclick='selectClothing(10)'>
<input type='image' value='' id="female-clothing-option-11" class='bordered title-clothing-button title-content-button titleClothing11' src='player/female/panties.png' onclick='selectClothing(11)'>
<input type='image' value='' id="female-clothing-option-12" class='bordered title-clothing-button title-content-button titleClothing12' src='player/female/necklace.png' onclick='selectClothing(12)'>
<input type='image' value='' id="female-clothing-option-13" class='bordered title-clothing-button title-content-button titleClothing13' src='player/female/bracelet.png' onclick='selectClothing(13)'>
<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'/>
metodLD
committed
</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>
metodLD
committed
</div>
</div>
<!-- Main Select Screen -->
<div id="main-select-screen" class="screen-container" hidden>
<div class="screen">
<!-- Opponent Dialogues -->
<div class="dialogue-bubble-row">
<div id="select-bubble-1" class="bordered left dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="select-dialogue-1" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-2" class="bordered halfLeft dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="select-dialogue-2" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-3" class="bordered center dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="select-dialogue-3" class="dialogue"></span>
</div>
</div>
<div id="select-bubble-4" class="bordered farHalfLeft dialogue-bubble-area">
<div class="dialogue-bubble arrow-down">
<span id="select-dialogue-4" class="dialogue"></span>
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div id="select-image-area-1" class="farLeft selection-image-area">
ReformCopyright
committed
<img id="select-image-1" class="opponent-image" hidden>
<div id="opponent-suggestions-1" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-1-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 1)">Name</button>
</div>
<div id="opponent-suggestion-1-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 2)">Name</button>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-1-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 3)">Name</button>
</div>
<div id="opponent-suggestion-1-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-2" class="almostLeft selection-image-area">
ReformCopyright
committed
<img id="select-image-2" class="opponent-image" hidden>
<div id="opponent-suggestions-2" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-2-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 1)">Name</button>
</div>
<div id="opponent-suggestion-2-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 2)">Name</button>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-2-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 3)">Name</button>
</div>
<div id="opponent-suggestion-2-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-3" class="almostRight selection-image-area">
ReformCopyright
committed
<img id="select-image-3" class="opponent-image" hidden>
<div id="opponent-suggestions-3" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-3-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 1)">Name</button>
</div>
<div id="opponent-suggestion-3-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 2)">Name</button>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-3-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 3)">Name</button>
</div>
<div id="opponent-suggestion-3-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 4)">Name</button>
</div>
</div>
</div>
<div id="select-image-area-4" class="farRight selection-image-area">
ReformCopyright
committed
<img id="select-image-4" class="opponent-image" hidden>
<div id="opponent-suggestions-4" class="opponent-suggestion-container" hidden>
<div class="bordered opponent-suggestion-header">Suggested Opponents</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-4-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 1)">Name</button>
</div>
<div id="opponent-suggestion-4-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 2)">Name</button>
</div>
</div>
<div class="opponent-suggestion-row">
<div id="opponent-suggestion-4-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 3)">Name</button>
</div>
<div id="opponent-suggestion-4-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
<img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
ReformCopyright
committed
<button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 4)">Name</button>
</div>
</div>
</div>
<!-- Hide Button -->
<button class='bordered hide-table-button' onclick="hideSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<button class='bordered table-bug-report-button' onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
</button>
<!-- Opponent Selections -->
<div class="bordered left opponent-area">
<div id="select-name-label-1" class="bordered opponent-name-label">Opponent 1</div>
<button id="select-slot-button-1" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(1)">Select Opponent</button>
</div>
<div class="bordered halfLeft opponent-area">
<div id="select-name-label-2" class="bordered opponent-name-label">Opponent 2</div>
<button id="select-slot-button-2" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(2)">Select Opponent</button>
</div>
<div class="bordered center opponent-area">
<div id="select-name-label-3" class="bordered opponent-name-label">Opponent 3</div>
<button id="select-slot-button-3" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(3)">Select Opponent</button>
</div>
<div class="bordered farHalfLeft opponent-area">
<div id="select-name-label-4" class="bordered opponent-name-label">Opponent 4</div>
<button id="select-slot-button-4" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(4)">Select Opponent</button>
</div>
<!-- Dock Area -->
<div id='main-select-area' class='bordered'>
<!-- Select Buttons -->
ReformCopyright
committed
<button id='select-main-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backSelectScreen()">
ReformCopyright
committed
<button id='select-group-testing-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(1)">
ReformCopyright
committed
<button id='select-group-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(0)">
<button id='select-help-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="showHelpModal()">
Help & FAQ
</button>
<!-- Advance Button Casing -->
<div id='select-advance-top' class='bordered'> </div>
<div id='select-advance-bottom' class='bordered'> </div>
<!-- Advance Button -->
<button id='main-select-button' class='bordered smooth-button smooth-button-red' onclick="advanceSelectScreen()" disabled="true">
Start
</button>
<!-- More Select Buttons -->
<div class="select-random-container">
<div class="select-random-col">
<button id='select-random-female-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseFemale(player) {return player.gender.toLowerCase() === 'female';})">
Random Females
</button>
<button id='select-random-group-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomGroupButton()">
Random Table
</button>
</div>
<div class="select-random-col">
<button id='select-random-male-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseMale(player) {return player.gender.toLowerCase() === 'male';})">
Random Males
</button>
<button id='select-random-button' class='bordered select-quadrant-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton()">
Random Fill
</button>
</div>
</div>
ReformCopyright
committed
<button id='select-remove-all-button' class='bordered main-select-button smooth-button smooth-button-red' onclick="clickedRemoveAllButton()" disabled="true">
</button>
</div>
</div>
</div>
</div>
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
<div id="individual-select-screen" class="wide-screen-container" hidden>
<div class="screen">
<div class="opponent-cards-container">
<!--
(example opponent card element)
<div class="opponent-card">
<div class="selection-card-image-clip">
<div class="selection-card-image-area">
<img class="opponent-card-image-simple" src="opponents/sayori/0-calm.png">
</div>
</div>
<img class="badge-icon" src="img/epilogue_icon.png"/>
<div class="selection-card-sidebar">
<img class="layer-icon" src="img/testing-badge.png"/>
<img class="status-icon" src="img/testing-badge.png"/>
<img class="gender-icon" src="img/female.png"/>
</div>
<div class="selection-card-footer">
<div class="selection-card-label selection-card-name">Sayori</div>
<div class="selection-card-label selection-card-source">Doki Doki Literature Club!</div>
</div>
</div>
-->
</div>
<div class="opponent-details-container">
<div class="opponent-details-image-area">
<img class="opponent-details-simple-image" />
</div>
<div class="opponent-details-panel bordered">
<div class="opponent-details-view opponent-details-basic">
<div class="bordered opponent-details-field opponent-details-name">
<div class="opponent-details-value opponent-full-name"></div>
<div class="opponent-details-value opponent-source"></div>
</div>
<div class="bordered left-cap opponent-details-field opponent-epilogues-field">
<div class="opponent-details-label left-cap">Epilogues</div>
<div class="opponent-details-value opponent-epilogues"></div>
</div>
<div class="bordered left-cap opponent-details-field opponent-collectibles-field" hidden>
<div class="opponent-details-label left-cap">Collectibles</div>
<div class="opponent-details-value opponent-collectibles"></div>
</div>
<div class="bordered left-cap opponent-details-field opponent-writers-field">
<div class="opponent-details-label left-cap">Writer(s)</div>
<div class="opponent-details-value opponent-writer"></div>
</div>
<div class="bordered left-cap opponent-details-field opponent-artists-field">
<div class="opponent-details-label left-cap">Artist(s)</div>
<div class="opponent-details-value opponent-artist"></div>
</div>
<div class="bordered opponent-details-field opponent-details-description"></div>
</div>
<div class="opponent-details-view opponent-details-epilogues" hidden></div>
<div class="opponent-details-view opponent-details-collectibles" hidden></div>
</div>
<div class="opponent-select-button">
<button type="button" class="bordered smooth-button smooth-button-green select-button" disabled>Select Opponent</button>
</div>
</div>
</div>
</div>
<!-- Individual Select Screen -->
<div id="individual-select-screen-old" class="screen-container" hidden>
<div class="screen" hidden>
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
<!-- 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 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 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 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 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">
ReformCopyright
committed
<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/>
ReformCopyright
committed
<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 class="almostLeft selection-image-area">
ReformCopyright
committed
<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/>
ReformCopyright
committed
<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 class="almostRight selection-image-area">
ReformCopyright
committed
<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/>
ReformCopyright
committed
<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 class="farRight selection-image-area">
ReformCopyright
committed
<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/>
ReformCopyright
committed
<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>
<!-- 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">
ReformCopyright
committed
<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">
ReformCopyright
committed
<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">
ReformCopyright
committed
<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">
ReformCopyright
committed
<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 -->
ReformCopyright
committed
<button id='individual-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backToSelect()">
ReformCopyright
committed
<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>
ReformCopyright
committed
Filter
</button>
<!-- Advance Button Casing -->
<div class='bordered long-select-advance-top'> </div>
<div class='bordered long-select-advance-bottom'> </div>
<!-- Page Selection -->
<div class="select-page-display">
<div class="bordered page-label">Page</div>
<input id="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>
ReformCopyright
committed
<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 -->
ReformCopyright
committed
<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)">
ReformCopyright
committed
<button id='individual-more-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(3)">
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
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">
ReformCopyright
committed
<img id="group-image-1" class="opponent-image" hidden>
<img id="group-badge-1" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-1" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-1" class="layer-icon" src="img/layers1.png" hidden/>
<select id="group-costume-select-1" class="alt-costume-dropdown" onchange="altCostumeSelected(1, true)"></select>
<div class="almostLeft selection-image-area">
ReformCopyright
committed
<img id="group-image-2" class="opponent-image" hidden>
<img id="group-badge-2" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-2" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-2" class="layer-icon" src="img/layers1.png" hidden/>
<select id="group-costume-select-2" class="alt-costume-dropdown" onchange="altCostumeSelected(2, true)"></select>
<div class="almostRight selection-image-area">
ReformCopyright
committed
<img id="group-image-3" class="opponent-image" hidden>
<img id="group-badge-3" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-3" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-3" class="layer-icon" src="img/layers1.png" hidden/>
<select id="group-costume-select-3" class="alt-costume-dropdown" onchange="altCostumeSelected(3, true)"></select>
<div class="farRight selection-image-area">
ReformCopyright
committed
<img id="group-image-4" class="opponent-image" hidden>
<img id="group-badge-4" class="badge-icon" src="img/epilogue_icon.png" hidden/>
<img id="group-status-4" class="status-icon" src="img/testing-badge.png" hidden/>
ReformCopyright
committed
<img id="group-layer-4" class="layer-icon" src="img/layers1.png" hidden/>
<select id="group-costume-select-4" class="alt-costume-dropdown" onchange="altCostumeSelected(4, true)"></select>
<!-- Hide Button -->
<button id="group-hide-button" class='bordered' onclick="hideGroupSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<button class='bordered table-bug-report-button group-bug-report-button' onclick="showBugReportModal()">
<span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
</button>
<!-- Dock Area -->
<div id="group-select-table">
<!-- Opponent Selections -->
<div id="group-select-area" class="bordered opponent-area">
<div id="group-name-label" class="bordered opponent-name-label">Opponent 1</div>