JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<<run Dialog.setup("PEAKY BINDERS: MY WAY — Content Warning", { classes: "warningDialog" }); Dialog.wiki(` <p><strong>This game contains explicit sexual content, adult themes, strong language, and fetish-related material. It is intended for mature audiences only (18+).</strong></p> <p><strong>This game does <u>not</u> contain:</strong> child sexual abuse (real or fictional), bestiality, necrophilia, incest, non-consensual sex, or any other form of illegal or extreme prohibited material.</p> <p>If you are under 18 or uncomfortable with adult content, please exit now.</p> <p>By clicking "I Agree", you confirm that you are 18 years of age or older and consent to view adult content.</p> <center> <<link "I Agree">> <<run Dialog.close()>> <</link>> <<link "I Do Not Agree">> <<run Dialog.close()>> <<goto "ExitScreen">> <</link>> </center> `); Dialog.open(); >>
<!-- Root UI wrapper: contains the whole custom interface --> <div id="ui"> <!-- Top bar: game title and main menu button --> <div id="ui-top"> <!-- Top bar left side: title + subtitle --> <div> <div id="ui-title">PEAKY BINDERS</div> <div id="ui-subtitle">MY WAY</div> </div> <!-- Top bar right side: button to open in-game menu overlay --> <div id="ui-top-right"> <button class="ui-top-button" onclick="$('#menu-overlay').addClass('open')"> Menu </button> </div> </div> <!-- Main content area: stage (passages) + right HUD --> <div id="content"> <!-- Stage: SugarCube will render story passages here --> <main id="stage"> <div id="passages"></div> </main> <<if !Story.get(State.passage).tags.includes("no-ui")>> <!-- Right side: context HUD (location, stats, phone, inventory) --> <aside id="context"> <!-- Location banner wrapper (extra container kept as in original code) --> <div class="pb-location-bar"> <!-- Location banner with background image class --> <div class="pb-location-bar bg-shelby"> <!-- Location text overlay on top of the image --> <div class="pb-location-text"> <div class="pb-location-label">Location</div> <div class="pb-location-name">Shelby District</div> </div> </div> </div> <!-- Stats and appearance main grid wrapper --> <div class="pb-stats-wrapper"> <!-- Left stats column: physical stats, personality, corruption --> <div class="pb-stats-column"> <!-- Physical stats block: multiple bar rows --> <div> <div class="pb-section-heading">Physical</div> <!-- Physical rows: label + bar + numeric value (no list wrapper in this version) --> <!-- Energy row --> <div class="pb-phys-row"> <span class="pb-phys-label">Energy</span> <div class="pb-phys-bar"> <div class="pb-phys-bar-fill" style="transform: scaleX(<print $energy / 100>);"></div> </div> <span class="pb-phys-value"><print $energy></span> </div> <!-- Stamina row --> <div class="pb-phys-row"> <span class="pb-phys-label">Stamina</span> <div class="pb-phys-bar"> <div class="pb-phys-bar-fill" style="transform: scaleX(<print $stamina / 100>);"></div> </div> <span class="pb-phys-value"><print $stamina></span> </div> <!-- Strength row --> <div class="pb-phys-row"> <span class="pb-phys-label">Strength</span> <div class="pb-phys-bar"> <div class="pb-phys-bar-fill" style="transform: scaleX(<print $strength / 100>);"></div> </div> <span class="pb-phys-value"><print $strength></span> </div> <!-- Potency row --> <div class="pb-phys-row"> <span class="pb-phys-label">Potency</span> <div class="pb-phys-bar"> <div class="pb-phys-bar-fill" style="transform: scaleX(<print $mainPlayer.stats.physical.potency / 100>);"></div> </div> <span class="pb-phys-value"><print $mainPlayer.stats.physical.potency></span> </div> <!-- Appeal row (overall attractiveness) --> <div class="pb-phys-row"> <span class="pb-phys-label">APPEAL</span> <div class="pb-phys-bar"> <div class="pb-phys-bar-fill" style="transform: scaleX(<print $attractiveness / 100>);"></div> </div> <span class="pb-phys-value"><print $attractiveness></span> </div> </div> <!-- Personality block: four horizontal sliders --> <div> <div class="pb-section-heading">Personality</div> <!-- Personality container: each trait is a slider row --> <div class="pb-personality-block"> <!-- Honesty vs Deceit trait slider --> <div> <div class="pb-trait-row"> <span class="pb-trait-label active">Honesty</span> <span class="pb-trait-value"><print $honesty></span> <span class="pb-trait-label">Deceit</span> </div> <div class="pb-trait-bar"> <div class="pb-trait-marker" style="left: <print $honesty>%;"></div> </div> </div> <!-- Lust vs Restraint trait slider --> <div> <div class="pb-trait-row"> <span class="pb-trait-label active">Lust</span> <span class="pb-trait-value"><print $lust></span> <span class="pb-trait-label">Restraint</span> </div> <div class="pb-trait-bar"> <div class="pb-trait-marker" style="left: <print $lust>%;"></div> </div> </div> <!-- Confidence vs Insecurity trait slider --> <div> <div class="pb-trait-row"> <span class="pb-trait-label active">Confidence</span> <span class="pb-trait-value"><print $confidence></span> <span class="pb-trait-label">Insecurity</span> </div> <div class="pb-trait-bar"> <div class="pb-trait-marker" style="left: <print $confidence>%;"></div> </div> </div> <!-- Dominance vs Submission trait slider --> <div> <div class="pb-trait-row"> <span class="pb-trait-label active">Dominance</span> <span class="pb-trait-value"><print $dominance></span> <span class="pb-trait-label">Submission</span> </div> <div class="pb-trait-bar"> <div class="pb-trait-marker" style="left: <print $dominance>%;"></div> </div> </div> </div> </div> <!-- Corruption block: short label + corruption level tag --> <div> <div class="pb-section-heading">Corruption</div> <div class="pb-corruption"> <span class="pb-corruption-label">Level</span> <span class="pb-corruption-tag" title="<print $corruptionPoints> pts"> <print $corruptionLevelName> </span> </div> </div> </div> <!-- Right column: style label, portrait, gender expression --> <div class="pb-appearance-column"> <!-- Style line: shows current clothing / vibe text --> <div class="pb-style-line"> <span class="pb-style-label">Style</span> <span class="pb-style-value"><print $heroStyle></span> </div> <!-- Portrait frame: character image preview --> <div class="pb-portrait-frame"> <img class="pb-portrait-img" src="<print $heroPortraitSrc>" alt="Hero portrait"> </div> <!-- Gender expression slider: feminine ↔ masculine --> <div class="pb-gender-block"> <div class="pb-gender-row"> <span class="pb-gender-label active">Feminine</span> <span class="pb-gender-value"><print $genderExpression></span> <span class="pb-gender-label">Masculine</span> </div> <div class="pb-gender-bar"> <div class="pb-gender-marker" style="left: <print $genderExpression>%;"></div> </div> </div> </div> </div> <!-- Bottom row: phone info and inventory preview --> <div class="pb-bottom-row"> <!-- Phone column: small in-game phone widget --> <div class="pb-phone-card"> <section class="pb-card pb-card-phone"> <div class="pb-section-title">Phone</div> <!-- Phone mini-panel with day/time/location/money --> <div class="pb-phone-mini"> <div class="pb-phone-row"> <span class="pb-phone-label">Day</span> <span class="pb-phone-value">1</span> </div> <div class="pb-phone-row"> <span class="pb-phone-label">Time</span> <span class="pb-phone-value">Night</span> </div> <div class="pb-phone-row"> <span class="pb-phone-label">Location</span> <span class="pb-phone-value">Shelby District</span> </div> <div class="pb-phone-row"> <span class="pb-phone-label">£</span> <span class="pb-phone-value">0</span> </div> <!-- Phone hint text: explains gameplay impact --> <div class="pb-phone-hint"> Choices will change time, money & stats. </div> </div> </section> </div> <!-- Inventory column: simple 2x2 grid of empty slots --> <div class="pb-inventory-card"> <section class="pb-card pb-card-inventory"> <div class="pb-section-title">Inventory</div> <!-- Inventory slots (placeholders for now) --> <div class="pb-inventory-grid"> <div class="pb-inv-slot"><span>Empty</span></div> <div class="pb-inv-slot"><span>Empty</span></div> <div class="pb-inv-slot"><span>Empty</span></div> <div class="pb-inv-slot"><span>Empty</span></div> </div> <!-- Inventory note: future content explanation --> <div class="pb-inventory-note"> Later: weapons, cigarettes, keys, notes, etc. </div> </section> </div> </div> </aside> <</if>> </div> <!-- Fullscreen menu overlay: opened from the top bar "Menu" button --> <div id="menu-overlay"> <!-- Centered menu panel with actions and external links --> <div id="menu-panel"> <!-- Small heading text at the top of the menu --> <div id="menu-heading">Game Menu</div> <!-- Menu logo / game title --> <div id="menu-logo">Peaky Binders</div> <!-- List of main menu buttons (Save/Load, Restart, Exit) --> <div id="menu-options"> <!-- SugarCube dialog for Save/Load slots --> <button class="menu-option" onclick="Dialog.open(); Save.show();"> <span>Save / Load</span> <span>Slots</span> </button> <!-- Restart the entire story --> <button class="menu-option" onclick="Restart();"> <span>Restart</span> <span>Begin again</span> </button> <!-- Go back to Start passage (danger-style action) --> <button class="menu-option danger" onclick="Engine.play('Start');"> <span>Exit to Start</span> <span>Back to intro</span> </button> </div> <!-- External links row: community / support --> <div id="menu-links"> <div class="menu-pill">Discord</div> <div class="menu-pill">Patreon</div> </div> <!-- Small footer note under the menu --> <div id="menu-footer"> UI Prototype — Peaky Binders </div> </div> </div> </div> <div id="passages"> <div id="passage"> <<print Story>> </div> </div>
:: StoryInit <<set $mainPlayer = { meta: { id: "player", name: "John", surname: "Potter", startAge: 19 }, stats: { physical: { energy: 100, stamina: 10, strength: 10, appeal: 5, potency: 30 }, personality: { honesty: 0, lust: 10, confidence: 0, dominance: 0, corruption: 0, femininity: 0 }, limits: { physical: { min: 0, max: 100 }, personality: { min: -100, max: 100 }, potency: { min: 0, max: 100 } } } } >>
<p><strong>Thank you for your conscious and responsible choice.</strong><br> Please close this page to exit the game.</p>