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()">
<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 lastest version of the game can be played at
<br><a href="https://spnati.net"><b>spnati.net</b></a></p>
<br><br><br><br><br><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'/>
</button>
</div>
<!-- Title Screen -->
<div id="title-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()">
<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>
<!-- Title Candy -->
<img id="left-title-candy" class="title-candy" src=""/>
<img id="right-title-candy" class="title-candy" src=""/>
<!-- Content -->
<div class="main-title-container">
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!-- 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")' style="opacity:0.4;">
</div>
<!-- Player Male Size -->
<div id='male-size-container' class='title-size-block'>
<input type='image' value='' id="small-junk-button" class='bordered title-small-button title-content-button' src='img/male_small.png' onclick='changePlayerSize("small")' style='opacity:0.4;'>
<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")' style='opacity:0.4;'>
</div>
<!-- Player Female Size -->
<div id='female-size-container' class='title-size-block' hidden>
<input type='image' value='' id="small-boobs-button" class='bordered title-small-button title-content-button' src='img/female_small.png' onclick='changePlayerSize("small")' style='opacity:0.4;'>
<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")' style='opacity:0.4;'>
</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/jacket.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/shirt.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/tshirt.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/undershirt.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/headphones.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/belt.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/pants.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/shorts.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/boxers.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/tie.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/gloves.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/shoes.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/boots.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/socks.png' onclick='selectClothing(14)'>
</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/jacket.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/shirt.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/tanktop.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/bra.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/headphones.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/belt.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/pants.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/skirt.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/panties.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/necklace.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/gloves.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/shoes.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/stockings.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/socks.png' onclick='selectClothing(14)'>
</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>
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>
</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 dialogue-centre 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 dialogue-centre 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 dialogue-centre 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 dialogue-centre arrow-down">
<span id="select-dialogue-4" class="dialogue"></span>
</div>
</div>
</div>
<!-- Opponent Images -->
<div class="image-row">
<div class="farLeft opponent-image-area">
<img id="select-image-1" class="opponent-image" src="opponents/elizabeth/start.png">
</div>
<div class="almostLeft opponent-image-area">
<img id="select-image-2" class="opponent-image" src="opponents/lilith/start.png">
</div>
<div class="almostRight opponent-image-area">
<img id="select-image-3" class="opponent-image" src="opponents/zoey/start.png">
</div>
<div class="farRight opponent-image-area">
<img id="select-image-4" class="opponent-image" src="opponents/lara/start.png">
<!-- Hide Button -->
<button class='bordered hide-table-button' onclick="hideSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
<!-- 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 smooth-button smooth-button-red' onclick="backSelectScreen()">
Back
</button>
<button id='select-group-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton()">
Select Group
</button>
<button id='select-random-group-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomGroupButton()">
Random Group
</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 -->
<button id='select-random-female-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseFemale(player) {return player.gender.toLowerCase() === 'female';})">
Random Females
</button>
<button id='select-random-male-button' class='bordered main-select-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 main-select-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton()">
<button id='select-remove-all-button' class='bordered main-select-button smooth-button smooth-button-red' onclick="clickedRemoveAllButton()">
Remove All
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
</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 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 opponent-image-area">
<img id="individual-image-1" class="opponent-image" src="opponents/elizabeth/start.png">
<img id="individual-badge-1" class="badge-icon" src="opponents/epilogue_icon.png" hidden/>
<img id="individual-layer-1" class="layer-icon" src="opponents/layers1.png" hidden/>
</div>
<div class="almostLeft opponent-image-area">
<img id="individual-image-2" class="opponent-image" src="opponents/lilith/start.png">
<img id="individual-badge-2" class="badge-icon" src="opponents/epilogue_icon.png" hidden/>
<img id="individual-layer-2" class="layer-icon" src="opponents/layers1.png" hidden/>
</div>
<div class="almostRight opponent-image-area">
<img id="individual-image-3" class="opponent-image" src="opponents/zoey/start.png">
<img id="individual-badge-3" class="badge-icon" src="opponents/epilogue_icon.png" hidden/>
<img id="individual-layer-3" class="layer-icon" src="opponents/layers1.png" hidden/>
</div>
<div class="farRight opponent-image-area">
<img id="individual-image-4" class="opponent-image" src="opponents/lara/start.png">
<img id="individual-badge-4" class="badge-icon" src="opponents/epilogue_icon.png" hidden/>
<img id="individual-layer-4" class="layer-icon" src="opponents/layers1.png" hidden/>
<!-- Hide Button -->
<button class='bordered hide-table-button' onclick="hideSingleSelectionTable()">
<span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
</button>
<!-- Dock Area -->
<div id="individual-select-table">
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
<!-- Opponent Selections -->
<div class="bordered left small-opponent-area">
<button id="select-slot-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="select-slot-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="select-slot-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="select-slot-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='select-main-back-button' class='bordered main-select-button smooth-button smooth-button-red' onclick="backToSelect()">
Back
</button>
<button id='select-group-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(1)">
Basic Info
</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="openSearchModal()">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</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='select-random-male-button' class='bordered main-select-button smooth-button smooth-button-blue individual-credits-btn' onclick="changeIndividualStats(2)">
Credits
</button>
<button id='select-random-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(3)">
More Info
</button>
</div>
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
</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 opponent-image-area">
<img id="group-image-1" class="opponent-image" src="opponents/elizabeth/start.png">
<img id="group-badge-1" class="badge-icon" src="opponents/epilogue_icon.png" hidden/>
<img id="group-layer-1" class="layer-icon" src="opponents/layers1.png" hidden/>
</div>
<div class="almostLeft opponent-image-area">
<img id="group-image-2" class="opponent-image" src="opponents/lilith/start.png">
<img id="group-badge-2" class="badge-icon" src="opponents/epilogue_icon.png" hidden/>
<img id="group-layer-2" class="layer-icon" src="opponents/layers1.png" hidden/>
</div>
<div class="almostRight opponent-image-area">
<img id="group-image-3" class="opponent-image" src="opponents/zoey/start.png">
<img id="group-badge-3" class="badge-icon" src="opponents/epilogue_icon.png" hidden/>
<img id="group-layer-3" class="layer-icon" src="opponents/layers1.png" hidden/>
</div>
<div class="farRight opponent-image-area">
<img id="group-image-4" class="opponent-image" src="opponents/lara/start.png">
<img id="group-badge-4" class="badge-icon" src="opponents/epilogue_icon.png" hidden/>
<img id="group-layer-4" class="layer-icon" src="opponents/layers1.png" hidden/>
<!-- Hide Button -->
<button id="group-hide-button" class='bordered' onclick="hideGroupSelectionTable()">
<span class="glyphicon glyphicon-eye-close" 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='select-main-back-button' class='bordered main-select-button smooth-button smooth-button-red' onclick="backToSelect()">
Back
</button>
<button id='select-group-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(1)">
Basic Info
</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='select-random-male-button' class='bordered main-select-button smooth-button smooth-button-blue group-credits-btn' onclick="changeGroupStats(2)">
Credits
</button>
<button id='select-random-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(3)">
More Info
</button>
</div>
metodLD
committed
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
<!-- 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>
</div>
</div>
</div>
<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 type="text" id="search-source" class='bordered wide-textbox'/> </td> </tr> <tr hidden> <td style="width:25%"><h4 class="modal-title modal-left">Tag Filter</h4></td> <td> <input type="text" 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> </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()">Search</button> </div> </div> </div> <!-- End of Modal Content --> </div> </div> </div> </div> </div> <!-- End of Search Modal -->
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
<!-- 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)">Default</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-4"><a href="#" onclick="setBackground(4)">Brick</a></li>
<li id="settings-background-5"><a href="#" onclick="setBackground(5)">Night</a></li>
<li id="settings-background-6"><a href="#" onclick="setBackground(6)">Roof</a></li>
<li id="settings-background-7"><a href="#" onclick="setBackground(7)">Seasonal</a></li>
<li id="settings-background-8"><a href="#" onclick="setBackground(8)">Library</a></li>
<li id="settings-background-9"><a href="#" onclick="setBackground(9)">Bathhouse</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-14"><a href="#" onclick="setBackground(14)">Showers</a></li>
<li id="settings-background-15"><a href="#" onclick="setBackground(15)">Street</a></li>
<li id="settings-background-16"><a href="#" onclick="setBackground(16)">Green Screen</a></li>
<li id="settings-background-17"><a href="#" onclick="setBackground(17)">Arcade</a></li>
<li id="settings-background-18"><a href="#" onclick="setBackground(18)">Club</a></li>
<li id="settings-background-19"><a href="#" onclick="setBackground(19)">Bedroom</a></li>
<!-- 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>