JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<<nobr>> <div class="SB_mainCont"> <div class="SB_version">Version _</div> <div class="SB_videologoCont"> <video muted autoplay loop> <source src="ressources/maingui/logos/logo.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <hr> <div class="SB_topInfo"> <div class="SB_partOfDayIllustrCont"> <images> <img src="ressources/maingui/sidebar/evening.webp"> <img src="ressources/maingui/sidebar/night.webp"> <img src="ressources/maingui/sidebar/morning.webp"> <img src="ressources/maingui/sidebar/afternoon.webp"> <img src="ressources/maingui/sidebar/evening.webp"> <img src="ressources/maingui/sidebar/night.webp"> <img src="ressources/maingui/sidebar/morning.webp"> <img src="ressources/maingui/sidebar/afternoon.webp"> </images> <arrow>Δ</arrow> </div> <div class="SB_timeDayLocationCont"> <div> <name>Time</name> <desc>_</desc> </div> <div> <name>Day</name> <desc>_</desc> </div> <div> <name>Location</name> <desc>_</desc> </div> </div> </div> <hr> <div class="SB_playerInfo"> <div class="SB_playerImageCont"> <div class="SB_playerImage"> <img src="_"> </div> <name>_</name> </div> </div> <hr> <div class="SB_buttomAttribute"> <div class="SB_playerDominanceCont SB_playerAttributeCont"> <div> <qty>_</qty> <img src="./ressources/maingui/attributes/dominance_icon.webp"> </div> <name>Dominance</name> </div> <div class="SB_playerVirusCont SB_playerAttributeCont"> <div> <qty>_</qty> <img src="./ressources/maingui/attributes/virus_icon.webp"> </div> <name>Virus</name> </div> </div> <hr> <div class="SB_buttomAttribute"> <div class="SB_playerTiredCont SB_playerAttributeCont"> <div> <qty>_</qty> <img src="./ressources/maingui/attributes/tired_icon.webp"> </div> <name>Tiredness</name> </div> <div class="SB_playerNutriCont SB_playerAttributeCont"> <div> <qty>_</qty> <img src="./ressources/maingui/attributes/nutritionalvalue.webp"> </div> <name>Food</name> </div> </div> <hr style="margin-bottom: auto;"> <div class="SB_buttomButtons"> <div class="SB_inventory"> <div><img src="ressources/maingui/sidebar/backpack.webp"></div> <name>Inventory</name> </div> <div class="SB_cheats"> <div><img src="ressources/icons/13A4.webp"></div> <name>Cheats</name> </div> <div class="SB_save"> <div><img src="ressources/maingui/sidebar/save.svg" ></div> <name>Save</name> </div> </div> <hr> <div class="SB_linksCont"> <!-- img src="ressources/maingui/medias/patreon.webp" onclick="window.open('https://www.patreon.com/fapocalypse')" --> <img src="ressources/maingui/medias/ko-fi.webp" onclick="window.open('https://subscribestar.adult/fap-online-creation')"> <!-- img src="ressources/maingui/medias/buymeacoffee.webp" onclick="window.open('https://www.buymeacoffee.com/faponlinecreation')" --> <img src="ressources/maingui/medias/itchio.webp" onclick="window.open('https://fap-online-creation.itch.io/the-fapocalypse')" style="filter: invert(1)"> <img src="ressources/maingui/medias/discord.webp" onclick="window.open('https://discord.gg/Vuray76pS8','_blank')"> </div> </div> <!-- OVERLAYS START --> <div class="ScreenOverlayCont"> <!--div id="quest" class="ScreenOverlay ScreenOverlayActiveVisibility ScreenOverlayActiveOpacity"></div> <div id="lowFood" class="ScreenOverlay"></div> <div id="achievement" class="ScreenOverlay"></div--> </div> <div class="ScreenOverlayContPopup"> <!--top center--> <div id="achievementPopUp" class="ScreenOverlayPopUp" style="justify-content:flex-start; align-items:center;"> </div> <!--buttom right--> <div id="WarningPopUp" class="ScreenOverlayPopUp" style="justify-content:flex-end; align-items:flex-end;"> <!--div class="WarningPopUpDiv"> <div class="WarningPopUpDivTitle">WARNING</div> <div class="WarningPopUpDivDesc">LOW FOOD LEVEL</div> </div--> </div> <!--buttom left--> <div id="RewardPopUp" class="ScreenOverlayPopUp" style="justify-content:flex-end; align-items:flex-start;"> <div class="RewardPopUpDiv"> <!--div class="RewardPopUpDivReward"> <div class="RewardPopUpDivRewardimg"> <img src="./ressources/maingui/ui/angela.webp"> </div> <div class="RewardPopUpDivRewardDescription"> This is the reward description </div> </div--> </div> </div> <!--center--> <div id="BigRewardPopUp" class="ScreenOverlayPopUp"> <!-- js dynamic css --> <style> .BigReward reward { height: 0; /* set dynamicallly */ } .BigReward reward.small { height: 0; /* set dynamicallly */ } .BigReward reward.hovered { height: 0; /* set dynamicallly */ } .BigReward reward > img { height: 0; /* set dynamicallly */ } </style> <div class="BigReward"> <name>REWARDS</name> <rewards> <!-- item example --> <!--reward class=""> <overlay></overlay> <underlay></underlay> <img src="./ressources/icons/I1EA5.webp"> <info> <left> <qty>10x</qty> <desc>This is the item description that is very long and will be cut if it is too long.</desc> </left> <hr> <middle> <top> <rarity>Mythical</rarity> <tier>Tier 1</tier> </top> <name>wand-ering fantasy</name> <qty>10x</qty> </middle> <hr> <bonusList class="hideScrollBar"> <boost> <img src="ressources/maingui/attributes/dominance_icon.webp"> <div> <name>Dominance</name> <div>Bonus: <qty class="set">+1</qty> <qty class="get">+1</qty> </div> </div> </boost> </bonusList> </info> </reward--> <!-- attribute example --> <!--reward class="hovered"> <overlay></overlay> <img src="./ressources/icons/I1EA5.webp"> <info> <left> <qty>10x</qty> </left> <middle> <name>Dominance</name> <qty>10x</qty> </middle> <bonusList class="hideScrollBar"> </bonusList> </info> </reward--> </rewards> </div> <claim onclick="BPopupR_claimButton()">CLAIM</claim> </div> <!--center--> <div id="RoadMapPopUp" class="ScreenOverlayPopUp"> <exit onclick="RoadM_exit()">EXIT</exit> <div class="RoadMapPopUp"> <left> <div class="nameCont"> <div class="imgCont"> <img src="./ressources/maingui/attributes/lust_icon.webp"> </div> <div class="name">TEST</div> </div> <div class="meter"></div> <div class="phase"> <!-- <img src="./ressources/maingui/sexuals/beginning.webp"> <name>Beginning</name> --> </div> </left> <Rmap> <!--phase nextLocked right> <corner> <div></div> </corner> <bobble> <div> TEST </div> </bobble> </phase--> </Rmap> <right> <div> <div class="arrowCont"><arrow></arrow></div> <div class="imageCont"><img src="./ressources/maingui/logos/logo3.webp"></div> <div class="name">$GameVersionAbsolute<br>LIMIT</div> </div> </right> </div> </div> </div> <div class="ScreenOverlayContPerma"> <div id="overlayAngelaButton"> <img src="./ressources/icons/13A21.webp"> </div> <!--div id="overlayMapButton"> <img src="./ressources/maingui/maps/map.webp"> </div--> <div id="overlayFilter" style="display: none;"></div> </div> <div class="mouseFollowerCont"> <arrow></arrow> <div></div> </div> <!-- OVERLAYS END --> <</nobr>>\ <script> window.SB_setupHover = function() { let SB_mainCont = document.querySelector('.SB_mainCont'); let uiBar = document.querySelector('#ui-bar'); SB_mainCont.addEventListener('mouseover', () => { uiBar.classList.add('hovered'); }); SB_mainCont.addEventListener('mouseout', () => { uiBar.classList.remove('hovered'); }); } // ----------------------- Side Bar ----------------------- window.SB_setVersion = function() { let version = document.querySelector('.SB_version'); version.innerHTML = "Early Alpha - " + gameData.GameVersionAbsolute; } window.SB_setupVideoLoop = function() { let video = document.querySelector('.SB_videologoCont').querySelector('video'); video.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false); } window.SB_setPartOfDayIllustration = function() { if (typeof oldPartOfDayKey === 'undefined') { window.oldPartOfDayKey = SugarCube.State.variables.gameTime.partOfDayKey; } if (!oldPartOfDayKey) { window.oldPartOfDayKey = "morning"; } var imgIndexPerPartOfDay = { "night": 1, "morning": 2, "afternoon": 3, "evening": 4, } let images = document.querySelector('.SB_partOfDayIllustrCont').querySelectorAll('img'); let partOfDayKey = SugarCube.State.variables.gameTime.partOfDayKey; let currentImgIndex = imgIndexPerPartOfDay[partOfDayKey]; let oldImgIndex = imgIndexPerPartOfDay[oldPartOfDayKey]; function setImgIndex(imgIndex) { images.forEach(img => { img.classList.remove('side'); img.classList.remove('active'); }); images[imgIndex - 1].classList.add('side'); images[imgIndex].classList.add('active'); images[imgIndex + 1].classList.add('side'); } setImgIndex(oldImgIndex); //console.log("oldImgIndex: " + oldImgIndex); setTimeout(() => { setImgIndex(currentImgIndex); //console.log("currentImgIndex: " + currentImgIndex); }, 1000); oldPartOfDayKey = partOfDayKey; } window.SB_setGeneralInfo = function() { let time = document.querySelector('.SB_timeDayLocationCont').querySelectorAll('desc')[0]; let day = document.querySelector('.SB_timeDayLocationCont').querySelectorAll('desc')[1]; let location = document.querySelector('.SB_timeDayLocationCont').querySelectorAll('desc')[2]; time.innerHTML = SugarCube.State.variables.gameTime.partOfDay; day.innerHTML = SugarCube.State.variables.gameTime.day; location.innerHTML = SugarCube.State.variables.section.currentSectionName; } window.SB_setPlayerImage = function() { let SB_playerInfo = document.querySelector('.SB_playerInfo'); let SB_playerImage = SB_playerInfo.querySelector('.SB_playerImageCont').querySelector('.SB_playerImage').querySelector('img'); let SB_playerName = SB_playerInfo.querySelector('.SB_playerImageCont').querySelector('name'); let imageIndex = SugarCube.State.variables.characters.mc.image_set; let image = SugarCube.State.variables.characters.mc.image[imageIndex]; let name = SugarCube.State.variables.characters.mc.name; SB_playerImage.src = image; SB_playerName.innerHTML = name; } window.SB_setupAttribute = function() { let SB_playerDominanceCont = document.querySelector('.SB_playerDominanceCont'); let SB_playerVirusCont = document.querySelector('.SB_playerVirusCont'); let SB_playerTiredCont = document.querySelector('.SB_playerTiredCont'); let SB_playerNutriCont = document.querySelector('.SB_playerNutriCont'); let SB_playerAttributeCont = document.querySelectorAll('.SB_playerAttributeCont'); SB_playerDominanceCont.addEventListener('click', (e) => { mouseFollowerCreateInfo([{ title : "Current Dominance" }], e) }); SB_playerVirusCont.addEventListener('click', (e) => { mouseFollowerCreateInfo([{ title : "Current Virus", desc : "Maximun virus is 100." }], e) }); SB_playerTiredCont.addEventListener('click', (e) => { mouseFollowerCreateInfo([{ title : "Current Tiredness", desc : "Maximun tiredness is 20." }], e) }); SB_playerNutriCont.addEventListener('click', (e) => { mouseFollowerCreateInfo([{ title : "Current Food", desc : "The total amount of food in the fridge." }], e) }); SB_playerAttributeCont.forEach(attribute => { attribute.addEventListener('mouseout' , () => { mouseFollowerRemoveInfo(); }); }); } window.SB_setAttribute = function() { let SB_playerDominanceQty = document.querySelector('.SB_playerDominanceCont').querySelector('qty'); let SB_playerVirusQty = document.querySelector('.SB_playerVirusCont').querySelector('qty'); let SB_playerTiredQty = document.querySelector('.SB_playerTiredCont').querySelector('qty'); let SB_playerNutriQty = document.querySelector('.SB_playerNutriCont').querySelector('qty'); SB_playerDominanceQty.innerHTML = num_abreviation(modVariable("get","stat","dominance")); SB_playerVirusQty.innerHTML = num_abreviation(SugarCube.State.variables.stats.virus); SB_playerTiredQty.innerHTML = num_abreviation(SugarCube.State.variables.stats.tiredness); SB_playerNutriQty.innerHTML = num_abreviation(SugarCube.State.variables.food.currentStock); } window.SB_setupButtomButtons = function() { let SB_buttomButtons = document.querySelector('.SB_buttomButtons'); let SB_inventory = SB_buttomButtons.querySelector('.SB_inventory').querySelector('div'); let SB_cheats = SB_buttomButtons.querySelector('.SB_cheats').querySelector('div'); let SB_save = SB_buttomButtons.querySelector('.SB_save').querySelector('div'); SB_inventory.onclick = function() { console.log("inventory"); //appendInventoryOverlay(); //BRUH accessInventory("equipment") } SB_cheats.onclick = function() { console.log("cheats"); accessAngela_cheats(); } SB_save.onclick = function() { SugarCube.UI.saves(); } } window.SB_setButtomButtons = function() { let SB_buttomButtons = document.querySelector('.SB_buttomButtons'); let SB_inventory = SB_buttomButtons.querySelector('.SB_inventory'); let SB_cheats = SB_buttomButtons.querySelector('.SB_cheats'); //let SB_save = SB_buttomButtons.querySelector('.SB_save'); if (SugarCube.State.variables.gui_interface.inventoryButtonEnable) { SB_inventory.classList.remove("disabled"); SB_cheats.classList.remove("disabled"); } else { SB_inventory.classList.add("disabled"); SB_cheats.classList.add("disabled"); } } // ----------------------- Overlays ----------------------- window.SB_setupOverlays = function() { //let ScreenOverlayCont = document.querySelector('.ScreenOverlayCont'); //let ScreenOverlayContPopup = document.querySelector('.ScreenOverlayContPopup'); let ScreenOverlayContPerma = document.querySelector('.ScreenOverlayContPerma'); let overlayAngelaButton = ScreenOverlayContPerma.querySelector('#overlayAngelaButton'); let overlayMapButton = ScreenOverlayContPerma.querySelector('#overlayMapButton'); overlayAngelaButton.onclick = function() { accessAngela(); } /*overlayMapButton.onclick = function() { accessMap(); }*/ } window.SB_setOverlays = function() { //ScreenOverlayCont = document.querySelector('.ScreenOverlayCont'); //ScreenOverlayContPopup = document.querySelector('.ScreenOverlayContPopup'); ScreenOverlayContPerma = document.querySelector('.ScreenOverlayContPerma'); overlayAngelaButton = ScreenOverlayContPerma.querySelector('#overlayAngelaButton'); if (SugarCube.State.variables.gui_interface.angelaButtonEnable) { overlayAngelaButton.style.display = "block"; } else { overlayAngelaButton.style.display = "none"; } /*overlayMapButton = ScreenOverlayContPerma.querySelector('#overlayMapButton'); if (SugarCube.State.variables.gui_interface.mapButtonEnable) { overlayMapButton.style.display = "block"; } else { overlayMapButton.style.display = "none"; }*/ } // ----------------------- Main ----------------------- window.SB_mainRefresh = function() { // Side Bar SB_setVersion(); SB_setPartOfDayIllustration(); SB_setGeneralInfo(); SB_setPlayerImage(); SB_setAttribute(); SB_setButtomButtons(); // Overlays SB_setOverlays(); } window.SB_Init = function() { SB_setupHover(); // Side Bar SB_setupButtomButtons(); SB_setupAttribute(); // Overlays SB_setupOverlays(); SB_mainRefresh(); setTimeout(SB_mainRefresh, 100); // hack setTimeout(SB_mainRefresh, 200); // hack #2 } var test = 0; // do not delete or shit break in half. idk wtf going on here // Function to check if the document is loaded (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { SB_Init(); } })(); </script>\ <style> #ui-bar-body { margin: 0; height: 100%; padding: 0; } #ui-bar-body * { box-sizing: border-box; } #story-caption { position: relative; height: 100%; color: rgb(255, 208, 208); font-family: 'Century Gothic', sans-serif; font-weight: bold; box-sizing: border-box; display: flex; flex-direction: column; } .SB_mainCont { position: relative; height: 100%; color: rgb(255, 208, 208); font-family: 'Century Gothic', sans-serif; font-weight: bold; box-sizing: border-box; padding: 0.4em 0.8em; display: flex; flex-direction: column; } #ui-bar.hovered { /* set to #ui-bar when .SB_mainCont is hovered */ box-shadow: 0 0 0.5vw var(--neon-color-hover), 0 0 1.5vw var(--neon-color-hover), inset 0 0 0.5vw var(--neon-color-hover), inset 0 0 1.5vw var(--neon-color-hover); background-color: rgba(0, 0, 0, 0.9); } .SB_version { text-align: left; } .SB_videologoCont { /*background-color: rgba(0, 0, 0, 0.8);*/ position: relative; width: 100%; height: 0; padding-bottom: 32%; /* hack to set the aspect ratio */ } .SB_videologoCont > video { /*background-color: rgba(255, 0, 0, 0.083);*/ position: absolute; top: 47%; left: 50%; transform: translate(-50.6%, -46%); width: 108%; max-width: unset; /* Twine overwrite */ } .SB_mainCont > hr { width: 100%; margin: 0.5em 0; border-width: 0px; /*height: 0.1em;*/ height: 2px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.4), rgba(0, 0, 0, 0)); } /* ----------------------- Top Info ----------------------- */ .SB_topInfo { width: 100%; margin: 0.5em 0; display: flex; align-items: center; justify-content: space-around; } .SB_partOfDayIllustrCont { width: 50%; } .SB_partOfDayIllustrCont > images { width: 100%; display: flex; justify-content: center; align-items: flex-end; } .SB_partOfDayIllustrCont > images > img { width: 0%; opacity: 0; border-width: 0; border-style: solid; border-color: rgb(126, 30, 30); border-radius: 0.3em; transition: width 0.3s ease, opacity 0.3s ease; } .SB_partOfDayIllustrCont > images > img.side { width: 30%; opacity: 0.7; border-width: 0.2em; } .SB_partOfDayIllustrCont > images > img.active { width: 38%; opacity: 1; border-width: 0.2em; } .SB_partOfDayIllustrCont > arrow { width: 100%; text-align: center; font-size: 2em; font-weight: normal; line-height: 1em; color: rgb(126, 30, 30); text-shadow: 0 0 0.1em rgb(0, 0, 0); } .SB_timeDayLocationCont { color: rgb(127, 28, 28); min-width: 40%; max-width: 50%; padding: 0.3em; display: flex; flex-direction: column; justify-content: space-evenly; } .SB_timeDayLocationCont > div > name { text-shadow: 0 0 0.1em rgb(0, 0, 0); } .SB_timeDayLocationCont > div > desc { color: rgb(255, 208, 208); display: block; width: 100%; margin: 0 auto; text-align: center; border: solid 0.2em rgb(126, 30, 30); background-color: rgba(0, 0, 0, 0.25); border-radius: 0.3em; padding: 0 0.3em; text-align: center; } .SB_timeDayLocationCont > div:not(:last-child) > desc { margin-bottom: 0.5em; } /* ----------------------- Player Info ----------------------- */ .SB_playerInfo { width: 100%; margin: 0.5em 0; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } .SB_playerImageCont { width: 50%; } .SB_playerImageCont > .SB_playerImage { margin: 0.3em; border: solid 0.2em rgb(126, 30, 30); border-radius: 0.6em; width: auto; aspect-ratio: 1; overflow: hidden; } .SB_playerImageCont > .SB_playerImage > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.6em; } .SB_playerImageCont > .SB_playerImage:active { transform: scale(1.01); } .SB_playerImageCont > name { color: rgb(255, 208, 208); text-shadow: 0 0 0.1em rgb(0, 0, 0); text-align: center; } /* ----------------------- Buttom Attribute ----------------------- */ .SB_buttomAttribute { width: 100%; margin: 0.5em 0; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } .SB_playerAttributeCont { display: flex; flex-direction: column; align-items: center; min-width: 9vh; } .SB_playerAttributeCont > div { position: relative; width: 4em; height: 4em; border: solid 0.2em rgb(126, 30, 30); border-radius: 50%; transition: transform 0.3s ease, filter 0.3s ease; } .SB_playerAttributeCont > div:hover { background-color: rgb(19, 19, 19); filter: drop-shadow(0 0 0.2em rgb(19, 19, 19)); } .SB_playerAttributeCont > div > img { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1/1; border-radius: 50%; transition: opacity 0.3s ease; } .SB_playerAttributeCont > div:hover > img { opacity: 0; } .SB_playerAttributeCont > div > qty { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1.5em; color: transparent; text-shadow: 0 0 0.1em rgb(0, 0, 0); } .SB_playerAttributeCont > div:hover > qty { color: inherit; } .SB_playerAttributeCont > name { color: rgb(255, 208, 208); text-shadow: 0 0 0.1em rgb(0, 0, 0); } /* ----------------------- Buttom Buttons ----------------------- */ .SB_buttomButtons { width: 100%; margin: 0.5em 0; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; } .SB_buttomButtons > div { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; } .SB_buttomButtons > div > div { width: 4em; height: 4em; border: solid 0.2em rgb(126, 30, 30); border-radius: 50%; transition: transform 0.3s ease, filter 0.3s ease; display: flex; justify-content: center; align-items: center; overflow: hidden; } .SB_buttomButtons > div:not(.disabled) > div:hover { transform: translate(0.1em, -0.2em) rotate(3deg); filter: drop-shadow(0 0 0.2em rgba(255, 255, 255, 0.429)); } .SB_buttomButtons > div.disabled { cursor: default; color: rgb(139, 139, 139); } .SB_buttomButtons > div.disabled > div { border-color: rgb(139, 139, 139); } .SB_buttomButtons > div.disabled > div > img { filter: grayscale(100%); } .SB_buttomButtons > div > div > img { width: 70%; } .SB_buttomButtons > div.SB_save > div > img { width: 80%; filter: drop-shadow(0 200vh 0 rgb(126, 30, 30)); transform: translateY(-200vh); } /* ----------------------- Links ----------------------- */ .SB_linksCont { /*position: absolute; bottom: 0; left: 0;*/ width: 100%; height: 4.5vh; display: flex; justify-content: space-evenly; float: left; margin-bottom: 1em; } .SB_linksCont > img { height: 100%; /*width: 20%;*/ transition: opacity 0.3s ease; } .SB_linksCont > img:hover { opacity: 0.6; cursor: pointer; } /* ----------------------- Twine Overwrite ----------------------- */ #menu, #title, #ui-bar-history { /* remove default Twine */ display: none; } #ui-bar-body>:not(:first-child) { margin-top: unset; } #ui-bar { font-size: 1.5vh; /*font-size: 3vh;*/ background-color: rgba(0, 0, 0, 0.8); /*transition: all 0.3s ease;*/ transition-property: background-color, box-shadow, left; transition-duration: 0.3s; transition-timing-function: ease; box-shadow: 0 0 0.25vw var(--neon-color), 0 0 0.5vw var(--neon-color), inset 0 0 0.25vw var(--neon-color), inset 0 0 0.5vw var(--neon-color); /*width: 17.5em;*/ width: 26vh; z-index: 50; /* was 50 */ } #ui-bar-toggle:hover { background-color: transparent; } #ui-bar.stowed~#story { margin-left: 2.5em; } #ui-bar-toggle { position: absolute; right: -12%; background-image: url('ressources/maingui/ui/ui-arrow.webp'); background-size: 100%; background-repeat: no-repeat; background-position: center; height: 5vh; width: 3vh; transform: rotate(180deg); transition: opacity 0.5s ease, rotate 0s ease; border: none; padding: 50vh 0; filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(61deg) brightness(105%) contrast(101%); opacity: 0.4; } #ui-bar-toggle:hover { opacity: 1; } #ui-bar-toggle:before { content: ""; /* content: "\e81d"; */ } #ui-bar.stowed #ui-bar-toggle:before { content: ""; /* content: "\e81d"; */ } #ui-bar.stowed #ui-bar-toggle { transform: rotate(360deg); transition: opacity 0.5s ease, rotate 0s ease; padding: 50vh 0; } #ui-bar.stowed { left: -17.5em; } #ui-bar.stowed #ui-bar-body, #ui-bar.stowed #ui-bar-history { visibility: visible; /* was hidden */ /* for map and overlays */ } #story-title { display: none; } #ui-bar-body>:not(:first-child) { margin-top: unset; /* was 2em */ } </style>\
<<nobr>> <div class="MenuS_mainCont"> <style> </style> <div class="MenuS_title"> <name class="MenuS_applyTextColor" id="titlechange">MENU</name> <subname> <underline class="MenuS_applyDivColor"></underline> <back class="MenuS_applyTextColorWithHover" onclick="exitAngela()">exit</back> </subname> </div> <div class="MenuS_boby"> <div class="MenuS_list"> <div type="goals_TODO" onclick="appendWipWarning()" class="MenuS_applyTextColorWithHover"> Goals </div> <hr> <div type="women" onclick="titleWomen()" class="MenuS_applyTextColorWithHover"> Women & Scenes </div> <hr> <div type="achievements" onclick="titleAchievements()" class="MenuS_applyTextColorWithHover"> Achi­evements </div> <hr> <div type="market_TODO" onclick="appendWipWarning()" class="MenuS_applyTextColorWithHover"> Market </div> <hr> <div type="cheats" onclick="titleCheats()" class="MenuS_applyTextColorWithHover"> Cheats </div> <hr> <div type="settings" onclick="titleSettings()" class="MenuS_applyTextColorWithHover"> Settings </div> <hr> <div onclick="MenuF_Back()" class="MenuS_applyTextColorWithHover"> <!-- type="default" --> Back </div> </div> <div class="MenuS_content"> <!-- state: default, goals, women, achievements, market, cheats, settings --> <div type="default" class="MenuS_illustrations active"> <!--div class="MenuS_illustrations" style="display: none;"--> <img src="ressources/maingui/menu_screen/cherie.webp"> <img src="ressources/maingui/menu_screen/lana.webp"> <img src="ressources/maingui/menu_screen/elfie.webp"> <img src="ressources/maingui/menu_screen/gabbie.webp"> <img src="ressources/maingui/menu_screen/angela.webp"> <img src="ressources/maingui/menu_screen/johny.webp"> </div> <div type="goals" class=""> Goals - WIP </div> <div type="women" class=""> <div class="character_selection_center_block"> <div type="women.women" class="character_selection_main_buttons character"> <!-- onclick="SugarCube.Engine.play('MENU main interface')" --> <img src="ressources/icons/13DB7.webp"> <div class="shadow less"></div> <div>Women</div> </div> <div type="women_TODO.fights" onclick="SugarCube.Engine.play('FIGHT SCENES')" class="character_selection_main_buttons swords"> <!-- onclick="/*SugarCube.Engine.play('MENU main interface')*/; appendWipWarning()" --> <img src="ressources/icons/13DB6.webp"> <div class="shadow less"></div> <div>Fights Scenes</div> </div> <div type="women_TODO.groups" onclick="SugarCube.Engine.play('GROUP SCENES')" class="character_selection_main_buttons groups"> <!-- onclick="SugarCube.Engine.play('MENU main interface')" --> <img src="ressources/icons/13DB3.webp"> <div class="shadow less"></div> <div>Groups Scenes</div> </div> <div type="women_TODO.solo" onclick="SugarCube.Engine.play('SOLO SCENES')" class="character_selection_main_buttons character"> <!-- onclick="SugarCube.Engine.play('MENU main interface')" --> <img src="ressources/icons/13DB5.webp"> <div class="shadow less"></div> <div>Solo Scenes</div> </div> </div> </div> <div type="women.women"> <!-- <div class="woman_and_scenes_button_container"> <div id="woman_and_scenes_button"> <img src="ressources/icons/13DA1.webp"> </div> <div onclick="SugarCube.Engine.play('MENU main interface')" id="woman_and_scenes_goback_button"> Back </div> </div> --> <div class="women_and_scenes_holy_div"> <div class="women_and_scenes_arrow_left"></div> <div class="parent_woman_and_scenes_template"></div> <div class="women_and_scenes_arrow_right"></div> </div> </div> <div type="women.fights"> women.fights </div> <div type="women.groups"> women.groups </div> <div type="women.solo"> women.solo </div> <div type="achievements" class=""> <div class="achievements_upper_buttons"> <div class="achievements_upper_left"> <div class="achievements_upper_left_1"> <img src="ressources/icons/13A18.webp"> </div> <div class="achievements_upper_left_2"> <p></p> </div> </div> <div class="achievements_upper_mid"> <div class="achievements_upper_mid_top"> <p>Achievements Rarity</p> </div> <div class="achievements_upper_mid_bottom"> <div class="achievements_rarity_display common"> <p>Common</p> </div> <div class="achievements_rarity_display uncommon"> <p>Uncommon</p> </div> <div class="achievements_rarity_display rare"> <p>Rare</p> </div> <div class="achievements_rarity_display epic"> <p>Epic</p> </div> <div class="achievements_rarity_display legendary"> <p>Legendary</p> </div> <div class="achievements_rarity_display mythical"> <p>Mythical</p> </div> </div> </div> </div> <div class="achievements"> <div class="achievements_scoll_menu"> <div class="achievements_arrow_up"></div> <div class="achievements_scrollwidth_block"> <!--div class="achievements_clickable_block_locked"> <img src="image_fapo/vecteezy_locked-and-unlocked-solid-icon-in-black-and-white-colors_8350867.webp"> </div--> </div> <div class="achievements_arrow_down"></div> </div> <div class="achievements_template_parent"> <!--div class="achievements_template"> <div class="achievements_title"> <p>TITRE</p> </div> <div class="achievements_title_description"> <p>Description Description Description</p> </div> <div class="achievements_requirements"> <div class="achievements_requirements_box"> <div class="achievements_requirements_box_icon"> <img src="image_fapo/vecteezy_locked-and-unlocked-solid-icon-in-black-and-white-colors_8350867.webp"> </div> <p>bfjshdbghbasdshgjdhfj sdigjfnjsndfjn anfnf</p> </div> <div class="achievements_requirements_box"> <div class="achievements_requirements_box_icon"> <img src="image_fapo/vecteezy_locked-and-unlocked-solid-icon-in-black-and-white-colors_8350867.webp"> </div> <p>dont min me</p> </div> <div class="achievements_requirements_box"> <div class="achievements_requirements_box_icon"> <img src="image_fapo/vecteezy_locked-and-unlocked-solid-icon-in-black-and-white-colors_8350867.webp"> </div> <p>jhnjnasj asjnjasnd aJINSDIJAS</p> </div> </div> </div--> </div> <div class="achievements_trophy_counter"> <p></p> <img src="ressources/icons/13A18.webp"> </div> </div> </div> <div type="market" class=""> Market - WIP </div> <div type="cheats" class="cheats_main"> <div class="cheatboxcontainer"> <div class="cheatbox green"> <div class="cheatboxThanks"> <h1 style="margin-bottom: 5vh; margin-top: 20vh;">Thank you for your support!</h1> <h3>Loading cheats...</h3> <img class="cheatslogo" src="ressources/maingui/logos/logo3.webp"> </div> <div class="cheatboxActive"> <div class="cheatboxActiveFlex"> <img src="ressources/icons/I1MA1.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/icons/I1MA3.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/icons/I1MA2.webp" style="height: 110%; width: 17.5%"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/maingui/attributes/nutritionalvalue.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> </div> <h1>Resources Control</h1> <div class="iconcontainer"> <img src="ressources/icons/I1MA1.webp"> <img src="ressources/icons/I1MA2.webp"> <img src="ressources/icons/I1MA3.webp"> </div> <div class="codecontainer"> <input class="labelcheats" type="text" id="cheatsResources" value="Enter Code Here" maxlength="10" onfocus="clearInputValue(this)" onblur="resetInputValue(this)"> <div class="buttoncheats">➤</div> </div> <h3>REQUIRED SUBSCRIPTION:</h3> <div class="rankcontainer"> <img src="ressources/maingui/ranks/rank2.webp"> <p>+</p> </div> <div class="buycheats" id="buycheatslvl1">SUBSCRIBE</div> <div class="infocheatsbox"> <h3>ADDITIONAL INFORMATION</h3> <p>Resources Control allows you to control the amount of resources you posess in the game. This includes: the wood, plastic, metal, food and any upcoming resources.</p> </div> <div class="infocheats" onclick="infocheatspu1();">ⓘ</div> </div> <div class="cheatbox blue"> <h1>Gallery Bypass</h1> <div class="cheatboxThanks"> <h1 style="margin-bottom: 5vh; margin-top: 20vh;">Thank you for your support!</h1> <h3>Loading cheats...</h3> <img class="cheatslogo" src="ressources/maingui/logos/logo3.webp"> </div> <div class="cheatboxActive"> <div class="cheatboxActiveFlex"> <img src="ressources/icons/8.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen">Cherie's Scenes</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/icons/9.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen">Lana's Scenes</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/icons/10.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen">Elfie's Scenes</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/icons/11.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen">Gabbie's Scenes</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/icons/12.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen">Angela's Scenes</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/icons/13H5.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen" onclick="">Group Scenes</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;"> <img src="ressources/maingui/ui/mcicon2.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen" onclick="">Solo Scenes</div> </div> </div> </div> <div class="iconcontainer"> <img src="ressources/maingui/sexuals/boobjob.webp"> <img src="ressources/maingui/sexuals/anal.webp"> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="codecontainer"> <input class="labelcheats" type="text" id="cheatsGallery" value="Enter Code Here" maxlength="10" onfocus="clearInputValue(this)" onblur="resetInputValue(this)"> <div class="buttoncheats">➤</div> </div> <h3>REQUIRED SUBSCRIPTION:</h3> <div class="rankcontainer"> <img src="ressources/maingui/ranks/rank3.webp"> <p>+</p> </div> <div class="buycheats" id="buycheatslvl2">SUBSCRIBE</div> <div class="infocheatsbox"> <h3>ADDITIONAL INFORMATION</h3> <p>Gallery Bypass allows you to see every scene that is currently available in the game, with every women, immediately.</p> </div> <div class="infocheats" onclick="infocheatspu2();">ⓘ</div> </div> <div class="cheatbox purple"> <div class="cheatboxThanks"> <h1 style="margin-bottom: 5vh; margin-top: 20vh;">Thank you for your support!</h1> <h3>Loading cheats...</h3> <img class="cheatslogo" src="ressources/maingui/logos/logo3.webp"> </div> <div class="cheatboxActive"> <div class="cheatboxActiveFlex" data-type="stat" data-type2="dominance"> <img src="ressources/maingui/attributes/dominance_icon.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="stat" data-type2="virus"> <img src="ressources/maingui/attributes/virus_icon.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="time"> <img src="ressources/maingui/ui/time2.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen">Freeze Time</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="loot"> <p class="textCheats" style="height: 110%;">LUCKY LOOT</p> <div class="codecontainer" style="margin-top: 0;"> <div class="labelcheatsWomen">Turn On</div> </div> </div> <h3>Lust Control <img class="cheatsTLicons" src="ressources/maingui/attributes/lust_icon.webp"></h3> <div class="cheatboxActiveFlex" data-type="girl_stat" data-type2="lust" data-type3="cherie"> <img src="ressources/icons/8.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="girl_stat" data-type2="lust" data-type3="lana"> <img src="ressources/icons/9.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="girl_stat" data-type2="lust" data-type3="elfie"> <img src="ressources/icons/10.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="girl_stat" data-type2="lust" data-type3="gabbie"> <img src="ressources/icons/11.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="girl_stat" data-type2="lust" data-type3="angela"> <img src="ressources/icons/12.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <h3>Trust Control <img class="cheatsTLicons" src="ressources/maingui/attributes/trust_icon.webp"></h3> <div class="cheatboxActiveFlex" data-type="girl_stat" data-type2="trust" data-type3="cherie"> <img src="ressources/icons/8.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="girl_stat" data-type2="trust" data-type3="lana"> <img src="ressources/icons/9.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="girl_stat" data-type2="trust" data-type3="elfie"> <img src="ressources/icons/10.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="girl_stat" data-type2="trust" data-type3="gabbie"> <img src="ressources/icons/11.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> <div class="cheatboxActiveFlex" style="margin-top: 2vh;" data-type="girl_stat" data-type2="trust" data-type3="angela"> <img src="ressources/icons/12.webp" style="height: 110%;"> <div class="codecontainer" style="margin-top: 0;"> <input class="labelcheats" type="text"> <div class="buttoncheats">➤</div> </div> </div> </div> <h1>Gamebreaker Mode</h1> <div class="iconcontainer"> <img src="ressources/maingui/ui/time.webp"> <img src="ressources/maingui/ui/map.webp"> <img src="ressources/maingui/attributes/dominance_icon_2.webp"> </div> <div class="codecontainer"> <input class="labelcheats" type="text" id="cheatsGamebreaker" value="Enter Code Here" maxlength="10" onfocus="clearInputValue(this)" onblur="resetInputValue(this)"> <div class="buttoncheats">➤</div> </div> <h3>REQUIRED SUBSCRIPTION:</h3> <div class="rankcontainer"> <img src="ressources/maingui/ranks/rank4.webp"> <p>+</p> </div> <div class="buycheats" id="buycheatslvl3">SUBSCRIBE</div> <div class="infocheatsbox"> <h3>ADDITIONAL INFORMATION</h3> <p>Gamebreaker Mode basically allows you to completely modify the game's mechanics, as it is the highest tier cheat: it allows you to control time, virus level, the loot drops' rarities and lust/trust levels with the women. You are also given the Founder's Set.</p> </div> <div class="infocheats" onclick="infocheatspu3();">ⓘ</div> </div> </div> </div> <div type="settings" class="settings_main"> <div class="settings_A_mid"> <div class="settings_B_mid"> <div category="audio" class="settings_D_categories active">AUDIO</div> </div> <div class="settings_B_mid"> <div category="video" class="settings_D_categories">VIDEO</div> </div> <div class="settings_B_mid"> <div category="story" class="settings_D_categories">STORY</div> </div> <div class="settings_B_mid"> <div category="save" class="settings_D_categories">SAVE</div> </div> <div class="settings_B_mid"> <div category="aboutUs" class="settings_D_categories">ABOUT US</div> </div> </div> <div class="settings_A_bot"> <div settingtype="audio" class="settings_B_bot"> <div class="settings_B_bot2" audioSlider="music"> <div class="settings_C_audio"> <div class="settings_D_music_txt">Music</div> <div class="settings_D_music_button on">ON</div> </div> <div class="settings_C_jauge"> <input type="range" min="0" max="100" step="0.2" value="50" class="slider" id="myRange" /> </div> </div> <div class="settings_B_bot2" audioSlider="voice"> <div class="settings_C_audio"> <div class="settings_D_music_txt">Voices</div> <div class="settings_D_music_button on">ON</div> </div> <div class="settings_C_jauge"> <input type="range" min="0" max="100" step="0.2" value="50" class="slider" id="myRange1" /> </div> </div> <div class="settings_B_bot2" audioSlider="sfx"> <div class="settings_C_audio"> <div class="settings_D_music_txt">Audio <mini>(VFX)</mini> </div> <div class="settings_D_music_button on">ON</div> </div> <div class="settings_C_jauge"> <input type="range" min="0" max="100" step="0.2" value="50" class="slider" id="myRange2" /> </div> </div> </div> <div settingtype="save" class="settings_B_bot"> <div class="settings_B_bot2 save"> <div class="settings_srl_buttons" onclick="SugarCube.UI.saves()">SAVE</div> <div class="settings_srl_buttons" onclick="SugarCube.UI.restart()">RESTART</div> <div class="settings_srl_buttons" onclick="SugarCube.UI.saves()">LOAD</div> </div> </div> <div settingtype="aboutUs" class="settings_B_bot"> <div class="settings_B_bot2 aboutUs"> <div class="settings_aboutUs_C1"> <fapoimage><img src="ressources/maingui/logos/logo3.webp" /></fapoimage> </div> <div class="settings_aboutUs_C2">FAP Online Creation</div> <!-- div onclick="window.open('https://www.patreon.com/fapocalypse/membership');" class="settings_aboutUs_C3 patreon"> <reseaux><img src="ressources/maingui/medias/patreon.webp" /></reseaux> </div --> <div onclick="window.open('https://fap-online-creation.itch.io/the-fapocalypse');" class="settings_aboutUs_C3 patreon"> <reseaux><img src="ressources/maingui/medias/itchio.webp" style="filter: invert(1)"></reseaux> </div> <div onclick="window.open('https://subscribestar.adult/fap-online-creation');" class="settings_aboutUs_C3 kofi"> <reseaux><img src="ressources/maingui/medias/ko-fi.webp"></reseaux> </div> <div onclick="window.open('https://discord.com/channels/1048358082276769792/1107475310192107563');" class="settings_aboutUs_C3 discord"> <reseaux><img src="ressources/maingui/medias/discord.webp"></reseaux> </div> <div onclick="window.open('https://f95zone.to/threads/the-fapocalypse-v0-0-3-fap-online-creation.144115/');" class="settings_aboutUs_C3 f95"> <reseaux><img src="ressources/maingui/medias/F95zone.webp"></reseaux> </div> </div> <div class="settings_B_bot2 aboutUs"> <div class="settings_aboutUs_C4"> <p> FAP Online Creation or FAP OC is a new group of adult games creator aiming to deliver the best of what an HTML based game can offer. </p> <p class="meet_team"> Meet our team. FapMat, our creative content creator and world builder. FapLaf, the friendly graphic designer, game designer, and programmer. PaqFap manages Communications, Marketing and helps with programming. And FixFap, our lead programmer handling the data and R&D. </p> <p> The Fapocalypse being FAP OC first game, the team will make sure to stay very attentive to the users recommandations and concerns. Our goal is to deliver the best product in the eyes of the people that play it. </p> </div> <!--a href="https://mega.nz/file/7Jl2XQaJ#_iP6VcX7X9w8R5-Zme6EFoGp85zN-OUChaDUksR1Et4" download target="_blank" class="download-button">Download Fapocalypse</a--> </div> </div> </div> </div> </div> </div> </div> <</nobr>>\ <!-- STYLE - 1 - Menu -->\ <style> #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: calc(26vh + 2.5em); height: 100vh; font-size: 1.75vh; } #ui-bar.stowed { left: -26vh; } #ui-bar.stowed~#story { margin-left: 2.5em; } #passages { margin: 0; height: 100%; width: 100%; max-width: 100%; } .passage { height: 100%; width: 100%; } .passage * { box-sizing: border-box; } .MenuS_mainCont { font-family: Arial, sans-serif; font-size: 1.25vh; color: white; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; /*padding: 0 2vh;*/ overflow: hidden; /* default */ --MenuS_color_D_0: hsl(360, 40%, 45%); --MenuS_color_D_1: hsl(360, 50%, 40%); --MenuS_color_D_0_hover: hsl(360, 45%, 65%); --MenuS_color_D_1_hover: hsl(360, 55%, 50%); /* goals - Angela */ --MenuS_color_0_0: hsl(360, 50%, 45%); /* main color */ --MenuS_color_0_1: hsl(360, 70%, 40%); /* shadow color */ --MenuS_color_0_0_hover: hsl(360, 75%, 75%); --MenuS_color_0_1_hover: hsl(360, 85%, 50%); /* women - Lana */ --MenuS_color_1_0: hsl(290, 50%, 45%); --MenuS_color_1_1: hsl(290, 70%, 40%); --MenuS_color_1_0_hover: hsl(290, 75%, 75%); --MenuS_color_1_1_hover: hsl(290, 85%, 50%); /* achievement - Elfie */ --MenuS_color_2_0: hsl(050, 50%, 45%); --MenuS_color_2_1: hsl(050, 70%, 40%); --MenuS_color_2_0_hover: hsl(050, 75%, 75%); --MenuS_color_2_1_hover: hsl(050, 85%, 50%); /* market - Gabbie */ --MenuS_color_3_0: hsl(235, 50%, 45%); --MenuS_color_3_1: hsl(235, 70%, 40%); --MenuS_color_3_0_hover: hsl(235, 75%, 75%); --MenuS_color_3_1_hover: hsl(235, 85%, 50%); /* cheats - Angela */ --MenuS_color_4_0: hsl(120, 50%, 35%); --MenuS_color_4_1: hsl(120, 70%, 30%); --MenuS_color_4_0_hover: hsl(120, 75%, 65%); --MenuS_color_4_1_hover: hsl(120, 85%, 40%); /* settings - Johny */ --MenuS_color_5_0: hsl(000, 0%, 75%); --MenuS_color_5_1: hsl(000, 0%, 85%); --MenuS_color_5_0_hover: hsl(000, 0%, 85%); --MenuS_color_5_1_hover: hsl(000, 0%, 95%); /* MENU */ --MenuS_color_M_0: var(--MenuS_color_D_0); --MenuS_color_M_1: var(--MenuS_color_D_1); --MenuS_color_M_0_hover: var(--MenuS_color_D_0_hover); --MenuS_color_M_1_hover: var(--MenuS_color_D_1_hover); } .MenuS_applyTextColor, .MenuS_applyTextColorWithHover { font-weight: bold; color: transparent; -webkit-text-stroke-width: 0.02em; -webkit-text-stroke-color: var(--MenuS_color_M_0); text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.568), 0 0 0.2em var(--MenuS_color_M_1), 0 0 0.2em var(--MenuS_color_M_1); transition-property: -webkit-text-stroke-color, text-shadow; transition-duration: 0.3s; transition-timing-function: ease; } .MenuS_applyTextColorWithHover:hover { text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.238), 0 0 0.2em var(--MenuS_color_M_1), 0 0 0.2em var(--MenuS_color_M_1), 0 0 0.4em var(--MenuS_color_M_1); } .MenuS_applyDivColor { background-color: color-mix(var(--MenuS_color_M_0) alpha(1), transparent alpha(0.5)); border-color: var(--MenuS_color_M_1); box-shadow: 0 0 0.2em var(--MenuS_color_M_1), 0 0 0.2em var(--MenuS_color_M_1), inset 0 0 0.1em var(--MenuS_color_M_1); transition-property: background-color, border-color, text-shadow; transition-duration: 0.3s; transition-timing-function: ease; } .MenuS_title { min-height: 0; /* firefox does not set automatically */ display: flex; flex-direction: column; align-items: center; width: 160vh; max-width: 100%; margin-top: 2em; margin-bottom: 3em; } .MenuS_title>name { font-family: 'Stereofunk', sans-serif; font-size: 4em; line-height: 1; margin-bottom: 0.2em; } .MenuS_title>subname { font-size: 2.5em; font-family: 'Stereofunk', sans-serif; font-weight: bold; width: 100%; display: flex; align-items: center; height: 0.2em; } .MenuS_title>subname>underline { width: 100%; height: 100%; margin-top: 0.1em; border-radius: 1em; border-style: solid; border-width: 0.05em; } .MenuS_title>subname>back { padding: 0.2em 0.5em; cursor: pointer; transition: transform 0.5s ease, text-shadow 0.5s ease; } .MenuS_title>subname>back:hover { transform: translateX(0.2em); } .MenuS_boby { min-height: 0; /* firefox does not set automatically */ display: flex; flex-direction: row; align-items: center; justify-content: center; /*height: 80vh;*/ width: 160vh; max-width: 100%; aspect-ratio: 1.4; } .MenuS_list { --MenuS_list_width: clamp(20vh, calc(80vw - 100vh), 36vh); /* --MenuS_list_width: clamp(22vh, calc(100% - 100vh), 36vh); */ /*font size by its width*/ font-size: calc(var(--MenuS_list_width) / 28); display: flex; flex-direction: column; align-items: center; justify-content: space-around; height: 90%; /* min: 22vh */ /* max: 36vh */ width: var(--MenuS_list_width); margin-right: 1em; } .MenuS_list>div { width: 100%; height: 3em; display: flex; align-items: center; justify-content: flex-start; font-family: 'Stereofunk', sans-serif; font-size: 2.5em; line-height: 1.2em; font-weight: bold; text-align: center; color: transparent; -webkit-text-stroke-width: 0.02em; word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; cursor: pointer; transition-property: -webkit-text-stroke-color, text-shadow, transform; transition-duration: 0.3s; transition-timing-function: ease; } .MenuS_list>div:not(:last-child)::before { content: "+\00a0"; } .MenuS_list>div:last-child::before { content: "-\00a0"; } .MenuS_list>div:hover { transform: translateX(0.6em); } .MenuS_list>hr { width: 100%; height: 0.1em; border: none; background-color: var(--MenuS_color_M_0); } .MenuS_content { /*background-color: #0a69055c;*/ /*border: solid 1px #000;*/ /* DEV */ position: relative; flex: 1; height: 100%; display: flex; align-items: center; justify-content: flex-end; transition: opacity 0.5s ease-in-out; } .MenuS_content>div { display: none; position: absolute; top: 0; right: 0; width: 100%; height: 95%; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out; } .MenuS_content>div.active { opacity: 1; pointer-events: all; display: block; margin-top: 5%; } /*.MenuS_illustrations { background-color: #ff000012; }*/ .MenuS_illustrations>img { position: absolute; top: 0; right: 0; height: 100%; opacity: 0; transition: opacity 0.5s ease; } </style>\ <!-- SCRIPT - 1 - Menu -->\ <script> if (!window.MenuV_State) { window.MenuV_State = "default"; }; var tchange = document.getElementById('titlechange'); // Get the div element function titleAchievements() { tchange.textContent = 'Achievements'; // Change the text of the div } function titleWomen() { tchange.textContent = 'Scenes'; // Change the text of the div } function titleCheats() { tchange.textContent = 'Cheats'; // Change the text of the div } function titleSettings() { tchange.textContent = 'Settings'; // Change the text of the div } function MenuF_sideButton_setColor(el, i) { el.style.webkitTextStrokeColor = `var(--MenuS_color_${i}_0_hover)`; el.style.textShadow = ` 0 0 0.1em rgba(0, 0, 0, 0.568), 0 0 0.2em var(--MenuS_color_${i}_1_hover), 0 0 0.2em var(--MenuS_color_${i}_1_hover) `; } function MenuF_sideButton_removeColor(el) { el.style.webkitTextStrokeColor = ""; el.style.textShadow = ""; } function MenuF_set_menuColor(type) { let type_split = type.split("."); type = type_split[0]; console.log('color set to', type); let MenuS_mainCont = document.querySelector(".MenuS_mainCont"); let index = MenuV_colorMap[type] || "D"; MenuS_mainCont.style.setProperty("--MenuS_color_M_0", `var(--MenuS_color_${index}_0)`); MenuS_mainCont.style.setProperty("--MenuS_color_M_1", `var(--MenuS_color_${index}_1`); MenuS_mainCont.style.setProperty("--MenuS_color_M_0_hover", `var(--MenuS_color_${index}_0_hover)`); MenuS_mainCont.style.setProperty("--MenuS_color_M_1_hover", `var(--MenuS_color_${index}_1_hover)`); } function MenuF_init_illustrations() { let MenuS_list = document.querySelectorAll(".MenuS_list > div[type]"); let MenuS_illustrations = document.querySelectorAll(".MenuS_illustrations > img"); MenuS_list.forEach((el, i) => { el.addEventListener("mouseover", () => { if (!MenuS_illustrations[i]) return; MenuS_illustrations[i].style.opacity = 1; MenuF_sideButton_setColor(el, i); }); el.addEventListener("mouseout", () => { if (!MenuS_illustrations[i]) return; MenuS_illustrations[i].style.opacity = 0; MenuF_sideButton_removeColor(el); }); }); } var MenuV_colorMap = { "default": 'D', "goals": 0, "women": 1, "achievements": 2, "market": 3, "cheats": 4, "settings": 5 }; function MenuF_click_menu(type) { playAudio("sfx", "menu1.mp3"); let MenuS_contents = document.querySelectorAll(".MenuS_content > div"); let content = document.querySelector(`.MenuS_content > div[type="${type}"]`); if (!content) return; MenuS_contents.forEach((el2) => { // hide all el2.classList.remove("active"); el2.style.display = "block"; setTimeout(() => { el2.removeAttribute("style"); }, 500); }); content.classList.add("active"); // show the selected MenuF_set_menuColor(type); MenuV_State = type; } function MenuF_Init_MenuSelection() { let MenuS_list_buttons = document.querySelectorAll(".MenuS_list > div[type]"); MenuS_list_buttons.forEach((el) => { let type = el.getAttribute("type"); if (!type) return; el.addEventListener("click", () => { MenuV_State = type; MenuF_click_menu(type); }); }); // hard code the women menu let women_buttons = document.querySelectorAll(".character_selection_center_block > .character_selection_main_buttons"); women_buttons.forEach((el) => { let type = el.getAttribute("type"); if (!type) return; el.addEventListener("click", () => { MenuV_State = type; MenuF_click_menu(type); }); }); } function MenuF_Back() { let MenuV_State_split = MenuV_State.split("."); let l = MenuV_State_split.length; let new_state; let new_state_color; tchange.textContent = 'Menu'; // Change the text of the div if (MenuV_State === "default") { console.log("EXIT"); exitAngela(); return; } if (l === 1) { new_state = "default"; } else { new_state = MenuV_State_split.slice(0, l - 1).join("."); //ex: women.groups.test -> women.groups } MenuV_State = new_state; MenuF_click_menu(new_state); } MenuF_init_illustrations(); MenuF_Init_MenuSelection(); MenuF_click_menu(MenuV_State); // init </script>\ \ \ <!-- STYLE - 1 - Women & Scenes -->\ <style> button { color: white; } .character_selection_center_block { margin-left: auto; margin-right: auto; width: 100vh; margin-top: 3vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-end; justify-content: center; font-family: 'Teko', sans-serif; } .character_selection_main_buttons { height: 28vh; width: 28vh; margin: 6vh; border-radius: 3vh; display: flex; border: solid 1vh rgba(73, 0, 0, 0.973); flex-direction: column; justify-content: center; flex-wrap: NOwrap; /*(❁´◡`❁)(❁´◡`❁)(❁´◡`❁)(❁´◡`❁)(❁´◡`❁)*/ align-items: center; transition: all 0.1s ease-in-out; cursor: pointer; position: relative; z-index: 3; border: 3px solid var(--MenuS_color_M_0); text-shadow: var(--MenuS_color_M_0); box-shadow: inset 0 0 0.5vw var(--MenuS_color_M_0), 0 0 0.5vw var(--MenuS_color_M_0), 0 0 1vw var(--MenuS_color_M_0); background-color: rgba(0, 0, 0, 0.8); background-image: none; border-radius: 2vh; } .character_selection_main_buttons:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--MenuS_color_M_0_hover), 0 0 1vw var(--MenuS_color_M_0_hover), 0 0 1.5vw var(--MenuS_color_M_0_hover), 0 0 2vw var(--MenuS_color_M_0_hover); text-shadow: 0 0 1vw var(--MenuS_color_M_0_hover), 0 0 1.5vw var(--MenuS_color_M_0_hover), 0 0 2vw var(--MenuS_color_M_0_hover); transition: all ease 0.3s; } .character_selection_main_buttons img { height: 99%; border-radius: 2.3vh; position: absolute; z-index: 1; } .swords img { height: 100%; width: 100%; border-radius: 2.3vh; position: absolute; z-index: 1; } .groups img { height: 60%; border-radius: 2.3vh; position: absolute; z-index: 1; } .character_selection_main_buttons div { font-size: 3.6vh; text-align: center; margin: 5% 5% 2% 5%; font-size: 3.5vh; z-index: 3; } .character_selection_main_buttons .shadow { height: 100%; width: 100%; border-radius: 2vh; position: absolute; top: -1.4vh; box-shadow: inset 0 0 7vh 3vh rgba(0, 0, 0, 1); z-index: 2; } .character_selection_main_buttons .less { border-radius: 2vh; position: absolute; box-shadow: inset 0 0 4vh 1vh rgba(0, 0, 0, 1); z-index: 2; } #character_selection_upper_left_block { height: 100%; left: 9vh; top: 3vh; aspect-ratio: 1/1; position: relative; border: solid 0.75vh rgba(73, 0, 0, 0.973); border-radius: 50%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); /* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #character_selection_upper_left_block img { height: 65%; } #character_selection_upper_right_block { height: 38%; width: 22vh; padding-top: 0.5vh; top: 7vh; right: 7vh; position: relative; border-radius: 2vh; font-size: 5vh; border: solid 0.75vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); /* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #character_selection_upper_right_block:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 0.5vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6); transition: all ease 0.3s; } .character_selection_upperblocks_container { height: 20%; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-between; } .character img { height: 90%; border-radius: 2.3vh; position: absolute; z-index: 1; } </style>\ <!-- SCRIPT - 1 - Women & Scenes -->\ <script> </script>\ \ \ <!-- STYLE - 2 - Women -->\ <style> /* body { overflow: hidden; } */ /* #passages { margin: 0; max-width: 100%; } */ /* #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } */ /* #ui-bar.stowed~#story { margin-left: 0; } */ /* .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-weight: bold; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Teko', sans-serif; } */ /* * { -webkit-user-select: none; -ms-user-select: none; user-select: none; } */ .woman_and_scenes_button_container { height: 20%; width: 100%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: space-between; font-family: 'Teko', sans-serif; position: relative; color: rgb(163, 162, 162); position: relative; top: 8vh; } #woman_and_scenes_button { height: 100%; /*width: 20vh;*/ aspect-ratio: 1; border: solid 1vh rgb(83, 0, 0); border-radius: 50%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin: 2vh; position: relative; left: 2vh; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); /* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #woman_and_scenes_button img { height: 12vh; width: 12vh; border-radius: 50%; } #woman_and_scenes_goback_button { height: 40%; width: 22vh; padding-top: 0.5vh; top: 7vh; right: 8vh; position: relative; border-radius: 2vh; font-size: 5vh; border: solid 0.75vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; background-color: #2c2c2c; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); /* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #woman_and_scenes_goback_button:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .women_and_scenes_holy_div { height: 95%; display: flex; justify-content: center; /* position: relative; top: -5vh; */ color: rgb(163, 162, 162); } .parent_woman_and_scenes_template { height: 100%; width: 89vh; display: flex; transition: opacity 0.3s ease-in-out; flex-wrap: nowrap; overflow-x: scroll; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; font-family: 'Teko', sans-serif; } .parent_woman_and_scenes_template::-webkit-scrollbar { display: none; } .woman_and_scenes_template { background-color: rgba(250, 128, 114, 0); height: 100%; width: 120vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .woman_and_scenes_icon_presentation { height: 40%; width: 65%; display: flex; position: relative; left: 1.5vh; } .plus_button { height: 20%; width: 11%; border-radius: 50%; border: solid 0.5vh; display: flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; left: 40vh; top: 4vh; z-index: 4; background-color: #2c2c2c; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color); box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .plus_button img { height: 180%; } .plus_button:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .icon_presentation_bubble { background-color: rgb(6, 0, 0); height: 100%; aspect-ratio: 1; border-radius: 50%; display: flex; position: relative; justify-content: center; right: 1vh; border: solid 1vh black; z-index: 1; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color); /* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; margin-top: 3vh; margin-left: 12vh; } .icon_presentation_bubble img { height: 100%; width: 100%; border-radius: 50%; position: relative; top: 0.1vh; left: 0.05vh; z-index: 0; object-fit: contain; } .shadow { position: absolute; width: 101%; height: 101%; border-radius: 50%; z-index: 2; } .icon_stats_1 { height: 50%; width: 10vh; display: flex; flex-wrap: wrap; position: relative; left: 5vh; top: 2vh; } .icon_stats_1_img { height: 9vh; width: 9vh; border-radius: 50%; position: relative; top: 4vh; } .icon_stats_1_img img { height: 9vh; width: 9vh; border-radius: 50%; } .icon_stats_1_txt { height: 5vh; width: 9vh; position: relative; top: 2vh; background-color: transparent; text-align: center; font-size: 4vh; color: white; } .icon_stats_2 { height: 50%; width: 10vh; display: flex; flex-wrap: wrap; position: relative; left: -5vh; top: 18vh; } .icon_stats_2_img { height: 9vh; width: 9vh; border-radius: 50%; position: relative; top: 4vh; } .icon_stats_2_img img { height: 9vh; width: 9vh; border-radius: 50%; } .icon_stats_2_txt { height: 5vh; width: 9vh; position: relative; top: 2vh; text-align: center; font-size: 4vh; color: white; } .woman_and_scenes_scenes_button { height: 20%; width: 23%; display: flex; flex-wrap: wrap; position: relative; cursor: pointer; border-radius: 3.5vh; border: solid 0.6vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color); /* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; margin-right: 7vh; top: 5.5vh; } .woman_and_scenes_scenes_button:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .woman_and_scenes_scenes_button_img { height: 12vh; width: 25vh; border: solid 0.6vh rgba(3, 0, 0, 0); background-color: rgba(152, 18, 18, w0); display: flex; justify-content: center; } .woman_and_scenes_scenes_button_img img { height: 82%; position: relative; top: 1vh; } .woman_and_scenes_scenes_button_txt { height: 30%; width: 25vh; border: solid 0.6vh rgba(3, 0, 0, 0); background-color: rgba(152, 18, 18, 0); font-size: 3vh; position: relative; top: -1vh; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } .woman_trust_button { height: 20%; width: 23%; display: flex; flex-wrap: wrap; position: relative; cursor: pointer; border-radius: 3.5vh; border: solid 0.6vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color); /* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; left: 37.5vh; top: 22.5vh; } .woman_trust_button:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .woman_trust_button_img { height: 12vh; width: 25vh; border: solid 0.6vh rgba(3, 0, 0, 0); background-color: rgba(152, 18, 18, w0); display: flex; justify-content: center; } .woman_trust_button_img img { height: 82%; position: relative; top: 1vh; } .woman_trust_button_txt { height: 30%; width: 25vh; border: solid 0.6vh rgba(3, 0, 0, 0); background-color: rgba(152, 18, 18, 0); font-size: 3vh; position: relative; top: -1vh; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } .woman_lust_button { height: 20%; width: 23%; display: flex; flex-wrap: wrap; position: relative; cursor: pointer; border-radius: 3.5vh; border: solid 0.6vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color); /* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; left: 16vh; top: 2vh; } .woman_lust_button:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .woman_lust_button_img { height: 12vh; width: 25vh; border: solid 0.6vh rgba(3, 0, 0, 0); background-color: rgba(152, 18, 18, w0); display: flex; justify-content: center; } .woman_lust_button_img img { height: 82%; position: relative; top: 1vh; } .woman_lust_button_txt { height: 30%; width: 25vh; border: solid 0.6vh rgba(3, 0, 0, 0); background-color: rgba(152, 18, 18, 0); font-size: 3vh; position: relative; top: -1vh; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } .woman_and_scenes_description { background-color: rgba(255, 255, 255, 0); height: 55vh; display: flex; align-items: center; margin-left: 4.5vh; } .description_bubble { height: 70%; width: 60%; display: flex; position: relative; border-radius: 6vh; border: solid 0.5vh rgb(152, 18, 18); border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color); /* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; bottom: 16vh; } .description_bubble_left { height: 38.5vh; width: 65%; border-radius: 6vh 0 0 6vh; display: flex; flex-wrap: wrap; align-content: flex-start; } .description_bubble_name { height: 11vh; font-size: 5vh; display: flex; justify-content: center; align-items: center; margin-left: 4vh; position: relative; margin-right: 3vh; } .description_bubble_role { height: 1vh; font-size: 4vh; position: relative; display: flex; justify-content: center; align-items: center; margin-left: 4vh; } .description_bubble_age { height: 11vh; font-size: 4vh; position: relative; display: flex; justify-content: center; align-items: center; } .description_bubble_right { height: 2vh; width: 27.8vh; border-radius: 0 6vh 6vh 0; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; } .description_bubble_prsentationtxt { width: 50vh; font-size: 2.8vh; display: flex; justify-content: space-between; align-items: center; margin-left: 10vh; position: relative; left: -6vh; } .description_bubble_prsentationtxt p { width: 44.5vh; } .description_bubble_right_top { height: 40%; width: 100%; display: flex; flex-wrap: wrap; align-content: space-between; justify-content: center; } .description_bubble_right_top_image { top: -1vh; right: 2, 5vh; height: 12vh; width: 12vh; border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; } .description_bubble_right_top_image img { height: 5vh; /* make the image grey instead of black */ filter: invert(25%) sepia(5%) saturate(0%) hue-rotate(15deg) brightness(84%) contrast(89%); } .description_bubble_right_top_size { height: 5vh; width: 9vh; position: relative; display: flex; justify-content: center; align-items: center; font-size: 4vh; bottom: 3.2vh; } .description_bubble_right_top_text { height: 5vh; width: 28vh; position: relative; top: 1vh; left: 0vh; display: flex; justify-content: center; align-items: center; font-size: 3vh; } .description_bubble_right_bottom { height: 60%; width: 100%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; } .women_and_scenes_arrow_left { width: 0; height: 0; margin-left: 8; top: 38vh; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid rgb(163, 162, 162); position: relative; margin-right: 1vh; } .women_and_scenes_arrow_left:hover { transform: translate(0.25vh, -0.25vh); box-shadow: 15vh rgba(255, 255, 255, 0.5); border-color: transparent rgba(255, 255, 255, 0.987) transparent transparent; } .women_and_scenes_arrow_right { width: 0; height: 0; margin-left: 8; top: 37vh; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid rgb(163, 162, 162); position: relative; margin-left: 1vh; } .women_and_scenes_arrow_right:hover { transform: translate(0.25vh, -0.25vh); box-shadow: 15vh rgba(255, 255, 255, 0.5); border-color: transparent transparent transparent rgba(255, 255, 255, 0.987); } .disabled { opacity: 0.5; pointer-events: none; } .position_list { height: 80%; width: 70%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; border: solid 0.5vh rgb(161, 160, 160); border-radius: 1vh; } .morning_position { height: 20%; width: 90%; text-align: center; border-radius: 1vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; } .morning_position_txt { height: 100%; width: 50%; font-size: 1.8vh; display: flex; justify-content: center; align-items: center; } .morning_position_value { height: 100%; width: 50%; font-size: 1.8vh; display: flex; justify-content: center; align-items: center; } .evening_position { height: 20%; width: 90%; text-align: center; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; } .evening_position_txt { height: 100%; width: 50%; font-size: 1.8vh; display: flex; justify-content: center; align-items: center; } .evening_position_value { height: 100%; width: 50%; font-size: 1.8vh; display: flex; justify-content: center; align-items: center; } .afternoon_position { height: 20%; width: 90%; text-align: center; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; } .afternoon_position_txt { height: 100%; width: 50%; font-size: 1.8vh; display: flex; justify-content: center; align-items: center; } .afternoon_position_value { height: 100%; width: 50%; font-size: 1.8vh; display: flex; justify-content: center; align-items: center; } .night_position { height: 20%; width: 90%; text-align: center; border-radius: 1vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; } .night_position_txt { height: 100%; width: 50%; font-size: 1.8vh; display: flex; justify-content: center; align-items: center; } .night_position_value { height: 100%; width: 50%; font-size: 1.8vh; display: flex; justify-content: center; align-items: center; } </style>\ <!-- SCRIPT - 2 - Women -->\ <script> var characters = [ { name: "cherie" }, { name: "lana" }, { name: "elfie" }, { name: "gabbie" }, { name: "angela" } ]; var parent_woman_and_scenes_template = document.querySelector(".parent_woman_and_scenes_template") // --------- Functions --------------------------------------------------------------- function getimageSet(obj) { function getimageSetIndex(obj) { var characterName = obj.name; var avatars = SugarCube.State.variables.avatar.list; function findUnderIndex(index) { //when index: 0, first is selected //for (var i = 0; i < avatars.length; i++) { //var avatar = avatars[i]; for (avatar in avatars) { if (avatars[avatar].character_name != characterName) { continue } if (avatars[avatar].bought == false) { continue } if (index >= avatars[avatar].image_index) { continue } return avatars[avatar].image_index; } return -1; } var currentImageSetIndex = SugarCube.State.variables.characters[obj.name].image_set; var index2 = findUnderIndex(currentImageSetIndex) //if (index2 == -1) { index2 = findUnderIndex(0) } if (index2 == -1) { index2 = 0 } return index2; } var plusButton = document.querySelector("#plus_button_" + obj.name); plusButton.addEventListener("click", function () { /*var imageSet = SugarCube.State.variables.characters[obj.name].image_set; if (imageSet < SugarCube.State.variables.characters[obj.name].image.length - 1) { imageSet++; } else { imageSet = 0; }*/ var imageSet = getimageSetIndex(obj); SugarCube.State.variables.characters[obj.name].image_set = imageSet; var icon_presentation_bubble = this.parentNode.querySelector(".icon_presentation_bubble"); icon_presentation_bubble.innerHTML = '<img src="' + SugarCube.State.variables.characters[obj.name].image[imageSet] + '">'; icon_presentation_bubble.innerHTML += '<div class="shadow"></div>'; applyStylesToShadows() }); } function applyStylesToShadows() { var characterKey = Object.keys(characters); // obj to array for (var i = 0; i < characterKey.length; i++) { var character = characters[characterKey[i]]; var bordercolor = SugarCube.State.variables.characters[character.name].bordercolor; //--theme-color var shadows = document.querySelectorAll('.icon_presentation_bubble > .shadow'); shadows.forEach(function (shadow, index) { if (index === i) { shadow.style.boxShadow = 'inset 0 0 4vh 1.5vh ' + bordercolor; shadow.style.color = bordercolor; } }); } } function create_template(obj) { var templateId = "plus_button_" + obj.name; var template = `<div class="woman_and_scenes_template" style="--theme-color: ${SugarCube.State.variables.characters[obj.name].bordercolor}">` + '<div class="woman_and_scenes_icon_presentation">' + '<div class="plus_button" id="' + templateId + '" style="border-color:' + SugarCube.State.variables.characters[obj.name].bordercolor + '">' + '<img src="ressources/icons/13A7.webp"style = "filter: drop-shadow(0 200vh 0 ' + SugarCube.State.variables.characters[obj.name].bordercolor + ');transform: translateY(-200vh);">' + '</div>' + '<div class="icon_presentation_bubble"style="border-color:' + SugarCube.State.variables.characters[obj.name].bordercolor + '">' + '<img src="' + SugarCube.State.variables.characters[obj.name].image[SugarCube.State.variables.characters[obj.name].image_set] + '">' + '<div class="shadow"></div> ' + '</div>' + '</div>' + '<div onclick="getscenePage(\'' + obj.name + '\')" class="woman_and_scenes_scenes_button"style="background-color:' + SugarCube.State.variables.characters[obj.name].backgroundcolor + '; border-color:' + SugarCube.State.variables.characters[obj.name].bordercolor + ';">' + '<div class="woman_and_scenes_scenes_button_img">' + '<img src="ressources/icons/13C16.webp">' + '</div>' + '<div class="woman_and_scenes_scenes_button_txt">' + '<p>Scenes</p>' + '</div>' + '</div>' + '<div onclick="getTrustPage(\'' + obj.name + '\')" class="woman_trust_button"style="background-color:' + SugarCube.State.variables.characters[obj.name].backgroundcolor + '; border-color:' + SugarCube.State.variables.characters[obj.name].bordercolor + ';">' + '<div class="woman_trust_button_img">' + '<img src="ressources/maingui/attributes/trust_icon.webp">' + '<div class="icon_stats_1_txt">' + SugarCube.State.variables.characters[obj.name].stats.trust + '</div>' + '</div>' + '<div class="woman_trust_button_txt">' + '<p>Trust Progress</p>' + '</div>' + '</div>' + '<div onclick="getLustPage(\'' + obj.name + '\')" class="woman_lust_button"style="background-color:' + SugarCube.State.variables.characters[obj.name].backgroundcolor + '; border-color:' + SugarCube.State.variables.characters[obj.name].bordercolor + ';">' + '<div class="woman_lust_button_img">' + '<img src="ressources/maingui/attributes/lust_icon.webp">' + '<div class="icon_stats_1_txt">' + SugarCube.State.variables.characters[obj.name].stats.lust + '</div>' + '</div>' + '<div class="woman_lust_button_txt">' + '<p>Lust Progress</p>' + '</div>' + '</div>' + '<div class="woman_and_scenes_description">' + '<div class="description_bubble"style="background-color:' + SugarCube.State.variables.characters[obj.name].backgroundcolor + '; border-color:' + SugarCube.State.variables.characters[obj.name].bordercolor + '">' + '<div class="description_bubble_left">' + '<div class="description_bubble_name">' + '<p>' + SugarCube.State.variables.characters[obj.name].name + '</p>' + '</div>' + '<div class="description_bubble_age">' + '<p>' + SugarCube.State.variables.characters[obj.name].age + ' y/o</p>' + '</div>' + '<div class="description_bubble_role">' + '<p>' + SugarCube.State.variables.characters[obj.name].role + '</p>' + '</div>' + '<div class="description_bubble_prsentationtxt">' + '<p>' + SugarCube.State.variables.characters[obj.name].desc + '</p>' + '</div>' + '</div>' + '<div class="description_bubble_right">' + '<div class="description_bubble_right_top">' + '<div class="description_bubble_right_top_image">' + '<img src="ressources/maingui/sexuals/boobjob.webp">' + '</div>' + '<div class="description_bubble_right_top_size">' + SugarCube.State.variables.characters[obj.name].cup_size + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>'; return template; } characters.forEach(function (character) { parent_woman_and_scenes_template.innerHTML += create_template(character); }); applyStylesToShadows(); //document.addEventListener("DOMContentLoaded", function() { characters.forEach(function (character) { getimageSet(character, "plus_button_" + character.name); }); // Get the scrollable element var scrollableElement = document.querySelector('.parent_woman_and_scenes_template'); // Get the arrow elements var leftArrow = document.querySelector('.women_and_scenes_arrow_left'); // Replace with your actual class var rightArrow = document.querySelector('.women_and_scenes_arrow_right'); // Replace with your actual class // Define the widht of the scrollable element var mainelement = document.querySelector('.woman_and_scenes_template') var scrollStep; function getscenestats() { } function calculatedwidth() { var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; // Width var marginLeft = computedStyle.marginLeft; // Left margin var marginRight = computedStyle.marginRight; // Right margin var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); // Define the scrolling step (how many pixels to scroll per click) scrollStep = widthInt + marginLeftInt + marginRightInt; } function fadeOut(i) { if (leftArrow.classList.contains('disabled') || rightArrow.classList.contains('disabled')) { return; // Exit early if the arrow is disabled } // Small margin of error to consider as the "end" or "start" var errorMargin = scrollableElement.scrollWidth * 0.05; // Check if scrolling is possible to the left or right var canScrollLeft = (i < 0 && scrollableElement.scrollLeft > errorMargin); var canScrollRight = (i > 0 && (scrollableElement.scrollLeft + scrollableElement.offsetWidth + errorMargin) < scrollableElement.scrollWidth); // If scrolling is possible in the chosen direction, then perform the fade out and scrolling if (canScrollLeft || canScrollRight) { leftArrow.classList.add('disabled'); rightArrow.classList.add('disabled'); scrollableElement.style.opacity = "0"; setTimeout(function () { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); }, 100); setTimeout(function () { scrollableElement.style.opacity = "1"; // Wait for an additional half-second before enabling the arrows again setTimeout(function () { leftArrow.classList.remove('disabled'); rightArrow.classList.remove('disabled'); }, 250); }, 300); } // Else, do nothing (i.e., make scroll impossible) else { return; } } // Attach event listeners to the arrows leftArrow.addEventListener('click', function () { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function () { calculatedwidth(); fadeOut(1); }); //}); function getWomenStats(trust, lust) { var trust = document.querySelector(".icon_stats_1_txt"); var lust = document.querySelector(".icon_stats_2_txt"); let trustvalue = SugarCube.State.variables.characters[obj.name].trust; let lustvalue = SugarCube.State.variables.characters[obj.name].lust; trust.innerHTML = trustvalue; lust.innerHTML = lustvalue; } // make a function that detects the scene button knowin the character name /*function getscenePage(characterName) { var character = characters[characterName]; console.log("nextBloc function called"); for (character in characters){ var characterName = characters[character].name; } if (characterName == "cherie") { SugarCube.Engine.play("CHERIE SCENES"); } else if (characterName == "lana") { SugarCube.Engine.play("LANA SCENES"); } else if (characterName == "elfie") { SugarCube.Engine.play("ELFIE SCENES"); } else if (characterName == "gabbie") { SugarCube.Engine.play("GABBIE SCENES"); } }*/ // make the function that detects the which scenes button knowin the character name function getscenePage(characterName) { if (characterName == "cherie") { SugarCube.Engine.play("CHERIE SCENES"); } else if (characterName == "lana") { SugarCube.Engine.play("LANA SCENES"); } else if (characterName == "elfie") { SugarCube.Engine.play("ELFIE SCENES"); } else if (characterName == "gabbie") { SugarCube.Engine.play("GABBIE SCENES"); } else if (characterName == "angela") { SugarCube.Engine.play("ANGELA SCENES"); } } function getTrustPage(characterName) { if (characterName == "cherie") { RoadM_appear("cherie","trust"); } else if (characterName == "lana") { RoadM_appear("lana","trust") } else if (characterName == "elfie") { RoadM_appear("elfie","trust") } else if (characterName == "gabbie") { //RoadM_appear("gabbie","trust") } } function getLustPage(characterName) { if (characterName == "cherie") { RoadM_appear("cherie","lust"); } else if (characterName == "lana") { RoadM_appear("lana","lust") } else if (characterName == "elfie") { RoadM_appear("elfie","lust") } else if (characterName == "gabbie") { //RoadM_appear("gabbie","lust") } } </script>\ \ \ <!-- STYLE - 2 - Fights Scenes -->\ <style> </style>\ <!-- SCRIPT - 2 - Fights Scenes -->\ <script> </script>\ \ \ <!-- STYLE - 2 - Groups Scenes -->\ <style> </style>\ <!-- SCRIPT - 2 - Groups Scenes -->\ <script> </script>\ \ \ <!-- STYLE - 2 - Solo Scenes -->\ <style> </style>\ <!-- SCRIPT - 2 - Solo Scenes -->\ <script> </script>\ \ \ <!-- STYLE - 1 - Achievements -->\ <style> .achievements_upper_buttons { width: 100%; height: 15%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; align-content: center; } .achievements_upper_mid { width: 40vh; height: 17vh; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; align-content: center; border: 3px solid var(--MenuS_color_2_0); border-radius: 2vh; position: relative; top: 3.5vh; margin-right: 2vh; box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1), 0 0 0.5vw var(--MenuS_color_2_1), 0 0 1vw var(--MenuS_color_2_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .achievements_upper_mid_top { width: 80%; /* height: 3.9vh; */ color: rgb(223, 216, 216); text-align: center; border-bottom: 3px solid var(--MenuS_color_2_0); } .achievements_upper_mid_top p { font-size: 3.5vh; margin: 0; line-height: 1; /* padding-bottom: 2vh; */ font-family: "Teko"; } .achievements_upper_mid_bottom { width: 100%; height: 11vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-evenly; align-items: center; align-content: center; font-family: "Teko"; font-size: 3vh; } .achievements_rarity_display { width: 20vh; height: 2.8vh; text-align: center; display: flex; justify-content: center; align-items: center; align-content: center; } .achievements_rarity_display p { font-size: 2.5vh; margin: 0; } .common { color: rgb(89, 97, 102); } .uncommon { color: rgb(60, 128, 0); } .rare { color: rgb(36, 36, 178); } .epic { color: rgb(112, 36, 166); } .legendary { color: rgb(255, 215, 0); } .mythical { color: red; } .achievements_upper_right { width: 40vh; height: 100%; margin-right: 5vh; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; align-content: center; font-size: 4vh; text-align: center; align-items: center; } .achievements_upper_right_1 { width: 22vh; display: flex; justify-content: center; align-items: center; height: 6vh; border: 3px solid var(--MenuS_color_2_0); border-radius: 2vh; cursor: pointer; padding-top: 1vh; transition: all 0.1s ease-in-out; margin-top: 5vh; padding-bottom: 1vh; color: rgb(223, 216, 216); text-shadow: 0px 0px 8px var(--MenuS_color_2_1), 0px 0px 16px var(--MenuS_color_2_1), 0px 0px 24px var(--MenuS_color_2_1); box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1), 0 0 0.5vw var(--MenuS_color_2_1), 0 0 1vw var(--MenuS_color_2_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .achievements_upper_right_1:hover { background-color: rgba(44, 43, 43, 0.5); border-color: rgb(164, 163, 162); } .achievements_upper_left { width: 40vh; height: 100%; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; align-content: center; } .achievements_upper_left_1 { width: 16vh; height: 16vh; border: 3px solid var(--MenuS_color_2_0); border-radius: 50%; cursor: pointer; transition: all 0.1s ease-in-out; margin-top: 5vh; display: flex; justify-content: center; align-items: center; align-content: center; text-shadow: 0px 0px 8px var(--MenuS_color_2_1), 0px 0px 16px var(--MenuS_color_2_1), 0px 0px 24px var(--MenuS_color_2_1); box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1), 0 0 0.5vw var(--MenuS_color_2_1), 0 0 1vw var(--MenuS_color_2_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .achievements_upper_left_1 img { width: 65%; height: 65%; margin-top: 1vh; } .achievements_upper_left_2 { width: 16vh; height: 8vh; border: 3px solid rgb(173, 49, 49); border-radius: 2vh; transition: all 0.1s ease-in-out; margin-top: 5vh; color: rgb(223, 216, 216); border-color: var(--MenuS_color_2_0); text-shadow: 0px 0px 8px var(--MenuS_color_2_1), 0px 0px 16px var(--MenuS_color_2_1), 0px 0px 24px var(--MenuS_color_2_1); box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1), 0 0 0.5vw var(--MenuS_color_2_1), 0 0 1vw var(--MenuS_color_2_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .achievements_upper_left_2 p { font-size: 4.5vh; text-align: center; margin: 0; } .achievements { width: 100%; height: 85%; display: flex; align-content: center; justify-content: center; align-items: center; } .achievements_scoll_menu { width: 55vh; height: 92%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } .achievements_arrow_up { width: 0; height: 0; margin-left: 0.53vh; border-left: 5vh solid transparent; border-right: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-bottom: 5vh solid var(--MenuS_color_2_0); position: relative; left: -0.3vh; top: 0.1vh; transition: all ease 0.3s; } .achievements_arrow_up:hover { border-bottom: 5vh solid var(--MenuS_color_2_0_hover); transition: all ease 0.3s; } .achievements_scrollwidth_block { width: 80%; height: 69.1%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; overflow-y: hidden; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; } .achievements_clickable_block { width: 13vh; height: 13vh; border: 2px solid rgb(173, 49, 49); cursor: pointer; transition: all 0.1s ease-in-out; border-radius: 2vh; margin: 1.1vh; font-size: 2vh; font-weight: bold; text-align: center; display: flex; justify-content: center; align-items: center; text-shadow: 0px 0px 8px var(--MenuS_color_2_1), 0px 0px 16px var(--MenuS_color_2_1), 0px 0px 24px var(--MenuS_color_2_1); box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1), 0 0 0.5vw var(--MenuS_color_2_1), 0 0 1vw var(--MenuS_color_2_1); background-color: rgba(0, 0, 0, 0.3); background-image: none; } .achievements_clickable_block:hover { background-color: rgba(100, 99, 99, 0.5) !important; border-color: var(--MenuS_color_2_0); } .achievements_clickable_block_locked { border: 3px solid var(--MenuS_color_2_0); width: 13vh; height: 13vh; transition: all 0.1s ease-in-out; border-radius: 2vh; margin: 1.1vh; display: flex; justify-content: center; align-items: center; align-content: center; text-shadow: 0px 0px 8px var(--MenuS_color_2_1), 0px 0px 16px var(--MenuS_color_2_1), 0px 0px 24px var(--MenuS_color_2_1); box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1), 0 0 0.5vw var(--MenuS_color_2_1), 0 0 1vw var(--MenuS_color_2_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; transition: all ease 0.3s; } .achievements_clickable_block_locked:hover { cursor: pointer; transition: all ease 0.3s; border: 3px solid var(--MenuS_color_2_0_hover); text-shadow: 0px 0px 8px var(--MenuS_color_2_1_hover), 0px 0px 16px var(--MenuS_color_2_1_hover), 0px 0px 24px var(--MenuS_color_2_1_hover); box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1_hover), 0 0 0.5vw var(--MenuS_color_2_1_hover), 0 0 1vw var(--MenuS_color_2_1_hover); } .achievements_clickable_block_locked img { width: 40%; height: 50%; } .achievements_arrow_down { width: 0; height: 0; margin-left: 0.53vh; border-left: 5vh solid transparent; border-right: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-top: 5vh solid var(--MenuS_color_2_0); position: relative; left: -0.3vh; transition: all ease 0.3s; } .achievements_arrow_down:hover { border-top: 5vh solid var(--MenuS_color_2_0_hover); transition: all ease 0.3s; } .achievements_template_parent { width: 55vh; height: 85%; display: flex; justify-content: center; align-items: center; align-content: center; transition: all 0.1s ease-in-out; } .achievements_template { width: 55vh; height: 85%; border: 3px solid rgb(173, 49, 49); border-radius: 4vh; color: rgb(223, 216, 216); display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1), 0 0 0.5vw var(--MenuS_color_2_1), 0 0 1vw var(--MenuS_color_2_1); background-image: none; } .achievements_title { width: 100%; /* height: 16%; */ border-radius: 4vh 4vh 0 0; display: flex; justify-content: center; align-items: center; font-size: 5vh; font-weight: bold; margin-top: 3vh; padding-left: 1vh; padding-right: 1vh; } .achievements_title p { text-align: center; margin: 0; } .achievements_title_description { width: 85%; height: 47%; border-radius: 0 0 4vh 4vh; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 2.5vh; } .achievements_title_description p { margin: 1vh; } .achievements_requirements { width: 100%; height: 33%; border-radius: 0 0 8vh 8vh; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } .achievements_requirements_box { width: 33.3333333333333%; height: 110%; border-radius: 0 0 4vh 4vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .achievements_requirements_box_icon { width: 10vh; height: 10vh; display: flex; justify-content: center; align-items: center; border: 3px solid var(--MenuS_color_2_0); border-radius: 50%; display: flex; justify-content: center; align-items: center; text-shadow: 0px 0px 8px var(--MenuS_color_2_1), 0px 0px 16px var(--MenuS_color_2_1), 0px 0px 24px var(--MenuS_color_2_1); box-shadow: inset 0 0 0.5vw var(--MenuS_color_2_1), 0 0 0.5vw var(--MenuS_color_2_1), 0 0 1vw var(--MenuS_color_2_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .achievements_requirements_box_icon img { height: 80%; aspect-ratio: 1/1; border-radius: 28%; object-fit: fill; } .achievements_requirements_box p { font-size: 2vh; margin: 1vh; max-width: 80%; height: 50%; display: flex; flex-wrap: wrap; object-fit: contain; text-align: center; overflow: hidden; } .achievements_trophy_counter { opacity: 0; height: 10vh; aspect-ratio: 1/1; border: 3px solid var(--MenuS_color_2_0); border-radius: 50%; position: relative; top: -26vh; left: -59.75vh; display: flex; justify-content: center; align-items: center; align-content: center; text-align: center; background-color: #0a0a0a; transition: all 0.1s ease-in-out; } .achievements_trophy_counter p { font-size: 3vh; margin: 0; position: relative; } .achievements_trophy_counter img { width: 40%; height: 40%; object-fit: fill; position: relative; left: 0.5vh; } </style>\ <!-- SCRIPT - 1 - Achievements -->\ <script> function achievementPageSetup() { var arrowUp = document.querySelector(".achievements_arrow_up"); var arrowDown = document.querySelector(".achievements_arrow_down"); var mainelement = document.querySelector(".achievements_scrollwidth_block"); var achievementsScrollBlock = document.querySelector(".achievements_scrollwidth_block"); var mainelementright = document.querySelector(".achievements_template_parent") var unlockedAchievementsCount = 0; var counter = document.querySelector(".achievements_trophy_counter"); function calculateScrollStep() { var computedStyle = window.getComputedStyle(mainelement); var height = computedStyle.height; var borderTopWidth = computedStyle.borderTopWidth; var borderBottomWidth = computedStyle.borderBottomWidth; var marginTop = computedStyle.marginTop; var marginBottom = computedStyle.marginBottom; var heightInt = parseInt(height, 10); var marginTopInt = parseInt(marginTop, 10); var marginBottomInt = parseInt(marginBottom, 10); var borderTopWidthInt = parseInt(borderTopWidth, 10); var borderBottomWidthInt = parseInt(borderBottomWidth, 10); return (heightInt + marginTopInt + marginBottomInt + borderTopWidthInt + borderBottomWidthInt) * 1; } arrowUp.addEventListener("click", function () { mainelement.scrollTop -= calculateScrollStep(); }); arrowDown.addEventListener("click", function () { mainelement.scrollTop += calculateScrollStep(); }); //for (let i = 0; i < SugarCube.State.variables.achievements.list.lenght; i++) { for (let achievement in SugarCube.State.variables.achievements.list) { let achievementBlock = document.createElement("div"); if (SugarCube.State.variables.achievements.list[achievement].unlocked === 0) { achievementBlock.classList.add("achievements_clickable_block_locked"); let lockedImg = document.createElement("img"); lockedImg.setAttribute("src", "ressources/icons/13F1.webp"); achievementBlock.appendChild(lockedImg); } else { switch (SugarCube.State.variables.achievements.list[achievement].rarity) { case 0: // Common achievementBlock.classList.add("achievements_clickable_block"); achievementBlock.style.borderColor = "rgba(54, 69, 79, 0.8)"; achievementBlock.style.boxShadow = "0 0 0.5vw rgba(54, 69, 79, 0.5), 0 0 0.5vw rgba(54, 69, 79, 0.5), 0 0 1vw rgba(54, 69, 79, 0.5)"; achievementBlock.style.textShadow = "0 0 0.5vw rgba(54, 69, 79, 0.5), 0 0 0.5vw rgba(54, 69, 79, 0.5), 0 0 1vw rgba(54, 69, 79, 0.5)"; achievementBlock.style.color = "rgb(223, 216, 216)"; achievementBlock.textContent = SugarCube.State.variables.achievements.list[achievement].name; break; case 1: // Uncommon achievementBlock.classList.add("achievements_clickable_block"); achievementBlock.style.borderColor = "rgba(60, 128, 0, 0.8)"; achievementBlock.style.boxShadow = "0 0 0.5vw rgba(60, 128, 0, 0.8), 0 0 0.5vw rgba(60, 128, 0, 0.5), 0 0 1vw rgba(60, 128, 0, 0.5)"; achievementBlock.style.textShadow = "0 0 0.5vw rgba(60, 128, 0, 0.8), 0 0 0.5vw rgba(60, 128, 0, 0.5), 0 0 1vw rgba(60, 128, 0, 0.5)"; achievementBlock.style.color = "rgb(223, 216, 216)"; achievementBlock.textContent = SugarCube.State.variables.achievements.list[achievement].name; break; case 2: // Rare achievementBlock.classList.add("achievements_clickable_block"); achievementBlock.style.borderColor = "rgba(36, 36, 178, 0.8)"; achievementBlock.style.boxShadow = "0 0 0.5vw rgba(36, 36, 178, 0.8), 0 0 0.5vw rgba(36, 36, 178, 0.5), 0 0 1vw rgba(36, 36, 178, 0.5)"; achievementBlock.style.textShadow = "0 0 0.5vw rgba(36, 36, 178, 0.8), 0 0 0.5vw rgba(36, 36, 178, 0.5), 0 0 1vw rgba(36, 36, 178, 0.5)"; achievementBlock.style.color = "rgb(223, 216, 216)"; achievementBlock.textContent = SugarCube.State.variables.achievements.list[achievement].name; break; case 3: // Epic achievementBlock.classList.add("achievements_clickable_block"); achievementBlock.style.borderColor = "rgba(112, 13, 166, 0.8)"; achievementBlock.style.boxShadow = "0 0 0.5vw rgba(112, 13, 166, 0.8), 0 0 0.5vw rgba(112, 13, 166, 0.5), 0 0 1vw rgba(112, 13, 166, 0.5)"; achievementBlock.style.textShadow = "0 0 0.5vw rgba(112, 13, 166, 0.8), 0 0 0.5vw rgba(112, 13, 166, 0.5), 0 0 1vw rgba(112, 13, 166, 0.5)"; achievementBlock.style.color = "rgb(223, 216, 216)"; achievementBlock.textContent = SugarCube.State.variables.achievements.list[achievement].name; break; case 4: // Legendary achievementBlock.classList.add("achievements_clickable_block"); achievementBlock.style.borderColor = "rgba(255, 215, 0, 0.8)"; achievementBlock.style.boxShadow = "0 0 0.5vw rgba(255, 215, 0, 0.8), 0 0 0.5vw rgba(255, 215, 0, 0.5), 0 0 1vw rgba(255, 215, 0, 0.5)"; achievementBlock.style.textShadow = "0 0 0.5vw rgba(255, 215, 0, 0.8), 0 0 0.5vw rgba(255, 215, 0, 0.5), 0 0 1vw rgba(255, 215, 0, 0.5)"; achievementBlock.style.color = "rgb(223, 216, 216)"; achievementBlock.textContent = SugarCube.State.variables.achievements.list[achievement].name; break; case 5: // Mythical achievementBlock.classList.add("achievements_clickable_block"); achievementBlock.style.borderColor = "rgba(255, 0, 0, 0.8)"; achievementBlock.style.boxShadow = "0 0 0.5vw rgba(255, 0, 0, 0.8), 0 0 0.5vw rgba(255, 0, 0, 0.8), 0 0 1vw rgba(204, 85, 0, 0.5)"; achievementBlock.style.textShadow = "0 0 0.5vw rgba(255, 0, 0, 0.8), 0 0 0.5vw rgba(255, 0, 0, 0.8), 0 0 1vw rgba(204, 85, 0, 0.5)"; achievementBlock.style.color = "rgb(223, 216, 216)"; achievementBlock.textContent = SugarCube.State.variables.achievements.list[achievement].name; break; } } var timeTransition = 300; // ms achievementBlock.addEventListener('click', function () { displayAchievementDetails(achievement); }); achievementsScrollBlock.appendChild(achievementBlock); if (SugarCube.State.variables.achievements.list[achievement].unlocked === 1) { unlockedAchievementsCount++; } } function displayAchievementPoints(achievement) { // Retrieve the rarity of the clicked achievement let rarity = SugarCube.State.variables.achievements.list[achievement].rarity; var trophyBorderColor = document.querySelector(".achievements_trophy_counter"); var trophyboxShadow = document.querySelector(".achievements_trophy_counter"); trophyBorderColor.style.borderColor = raritycolor[rarity].borderColor; trophyboxShadow.style.boxShadow = raritycolor[rarity].boxShadow; // Determine point value based on rarity using the provided mapping let points = SugarCube.State.variables.achievements.rarityToPointValue[rarity]; // Update the achievements_trophy_counter div with the point value let counterDiv = counter.querySelector("p"); counterDiv.textContent = points; } var raritycolor = { 0: { borderColor: "rgba(54, 69, 79, 0.5)", backgroundColor: "rgba(0, 0, 0, 0.4)", textColor: "rgb(223, 216, 216)", boxShadow: "0 0 0.5vw rgba(54, 69, 79, 0.5), 0 0 0.5vw rgba(54, 69, 79, 0.5), 0 0 1vw rgba(54, 69, 79, 0.5)" }, 1: { borderColor: "rgb(60, 128, 0)", backgroundColor: "rgba(0, 0, 0, 0.4)", boxShadow: "0 0 0.5vw rgba(60, 128, 0, 0.5), 0 0 0.5vw rgba(60, 128, 0, 0.5), 0 0 1vw rgba(60, 128, 0, 0.5)", textColor: "rgb(223, 216, 216)" }, 2: { borderColor: "rgb(36, 36, 178)", backgroundColor: "rgba(0, 0, 0, 0.4)", boxShadow: "0 0 0.5vw rgba(36, 36, 178, 0.5), 0 0 0.5vw rgba(36, 36, 178, 0.5), 0 0 1vw rgba(36, 36, 178, 0.5)", textColor: "rgb(223, 216, 216)" }, 3: { borderColor: "rgb(112, 13, 166)", backgroundColor: "rgba(0, 0, 0, 0.4)", boxShadow: "0 0 0.5vw rgba(112, 13, 166, 0.8), 0 0 0.5vw rgba(112, 13, 166, 0.5), 0 0 1vw rgba(112, 13, 166, 0.5)", textColor: "rgb(223, 216, 216)" }, 4: { borderColor: "rgb(255, 215, 0)", backgroundColor: "rgba(0, 0, 0, 0.4)", boxShadow: "0 0 0.5vw rgba(255, 215, 0, 0.8), 0 0 0.5vw rgba(255, 215, 0, 0.5), 0 0 1vw rgba(255, 215, 0, 0.5)", textColor: "rgb(223, 216, 216)" }, 5: { borderColor: "red", backgroundColor: "rgba(0, 0, 0, 0.4)", boxShadow: "0 0 0.5vw rgba(255, 0, 0, 0.8), 0 0 0.5vw rgba(255, 0, 0, 0.8), 0 0 1vw rgba(204, 85, 0, 0.5)", textColor: "rgb(223, 216, 216)" } } function displayAchievementDetails(achievement) { var requirementBox = ""; var borderColor = ""; var boxShadow = ""; borderColor = raritycolor[SugarCube.State.variables.achievements.list[achievement].rarity].borderColor; backgroundColor = raritycolor[SugarCube.State.variables.achievements.list[achievement].rarity].backgroundColor; boxShadow = raritycolor[SugarCube.State.variables.achievements.list[achievement].rarity].boxShadow; for (let i = 0; i < SugarCube.State.variables.achievements.list[achievement].requirements.length; i++) { requirementBox += `<div class="achievements_requirements_box">` + `<div class="achievements_requirements_box_icon">` + `<img src="${SugarCube.State.variables.achievements.list[achievement].requirements[i].image}">` + `</div>` + //`<p>` + SugarCube.State.variables.achievements.list[achievement].requirements[i].description + `</p>` + `<p>` + SugarCube.State.variables.achievements.list[achievement].requirements[i].name + `</p>` + `</div>`; } var template = `<div class="achievements_template" style="border-color: ${borderColor}; background-color: ${backgroundColor}; box-shadow: ${boxShadow};">` + // Apply the border color here `<div class="achievements_title">` + `<p>` + SugarCube.State.variables.achievements.list[achievement].name + `</p>` + `</div>` + `<div class="achievements_title_description">` + `<p>` + SugarCube.State.variables.achievements.list[achievement].description + `</p>` + `</div>` + `<div class="achievements_requirements">` + requirementBox + `</div>` + `</div>`; mainelementright.style.opacity = "0"; counter.style.opacity = "0"; setTimeout(function () { mainelementright.innerHTML = template; displayAchievementPoints(achievement); mainelementright.style.opacity = "1"; counter.style.opacity = "1"; }, timeTransition); } for (achievement in SugarCube.State.variables.achievements.list) { if (SugarCube.State.variables.achievements.list[achievement].unlocked === 1) { displayAchievementDetails(achievement); break; } } const pointsDisplay = document.querySelector(".achievements_upper_left_2 p"); pointsDisplay.textContent = `${SugarCube.State.variables.achievements.totalAchievementPoints}`; }; achievementPageSetup(); </script>\ \ \ <!-- STYLE - 1 - Cheats -->\ <style> .cheatboxcontainer { width: 100%; height: 100%; display: flex; justify-content: space-evenly; align-items: center; } .cheatbox { width: 35vh; /* Reduced cheatbox size */ height: 60vh; /* Reduced cheatbox size */ background-color: #111111; border-radius: 2vh; box-shadow: 0 0 1vh rgba(0, 0, 0, 0.2); } .cheatbox { border: none; font-size: 2vh; /* Reduced font size */ color: #fff; border-radius: 2vh; letter-spacing: 0.4vh; /* Reduced letter spacing */ font-weight: 700; transition: 0.5s; transition-property: box-shadow; z-index: 1; position: relative; padding: 1.5vh; /* Reduced padding */ } .cheatbox.green { box-shadow: 0 0 3vh rgb(246, 249, 255); /* Reduced shadow intensity */ /* Adjusted green color */ border: 0.4vh rgb(246, 249, 255) solid; /* Reduced border width */ } .cheatbox.blue { box-shadow: 0 0 3vh rgb(0, 162, 255); /* Reduced shadow intensity */ /* Adjusted blue color */ border: 0.4vh rgb(0, 162, 255) solid; /* Reduced border width */ } .cheatbox.purple { box-shadow: 0 0 3vh rgb(136, 0, 255); /* Reduced shadow intensity */ /* Adjusted purple color */ border: 0.4vh rgb(136, 0, 255) solid; /* Reduced border width */ } .cheatbox.green:hover { box-shadow: 0 0 0.8vh rgb(246, 249, 255), /* Reduced shadow intensity */ 0 0 3vh rgb(246, 249, 255), /* Reduced shadow intensity */ 0 0 6vh rgb(246, 249, 255), /* Reduced shadow intensity */ 0 0 12vh rgb(246, 249, 255); /* Reduced shadow intensity */ z-index: 0; } .cheatbox.blue:hover { box-shadow: 0 0 0.8vh rgb(0, 162, 255), /* Reduced shadow intensity */ 0 0 3vh rgb(0, 162, 255), /* Reduced shadow intensity */ 0 0 6vh rgb(0, 162, 255), /* Reduced shadow intensity */ 0 0 12vh rgb(0, 162, 255); /* Reduced shadow intensity */ z-index: 0; } .cheatbox.purple:hover { box-shadow: 0 0 0.8vh rgb(136, 0, 255), /* Reduced shadow intensity */ 0 0 3vh rgb(136, 0, 255), /* Reduced shadow intensity */ 0 0 6vh rgb(136, 0, 255), /* Reduced shadow intensity */ 0 0 12vh rgb(136, 0, 255); /* Reduced shadow intensity */ z-index: 0; } .cheatbox { position: relative; z-index: 1; } .cheatboxThanks { position: absolute; font-size: 2vh; /* Reduced font size */ color: #fff; letter-spacing: 0.4vh; /* Reduced letter spacing */ font-weight: 700; transition: 0.5s; transition-property: box-shadow; border-radius: 2vh; z-index: 0; padding: 1.5vh; /* Reduced padding */ width: 100%; /* Reduced cheatbox size */ height: 100%; /* Reduced cheatbox size */ background-color: #111111; position: absolute; z-index: 5; left: 0; bottom: 0; opacity: 0; pointer-events: none; overflow: hidden; display: flex; align-items: center; flex-direction: column; } .cheatbox.green .cheatboxThanks { outline: 0.4vh rgb(246, 249, 255) solid; /* Reduced border width */ } .cheatbox.blue .cheatboxThanks { outline: 0.4vh rgb(0, 162, 255) solid; /* Reduced border width */ } .cheatbox.purple .cheatboxThanks { outline: 0.4vh rgb(136, 0, 255) solid; /* Reduced border width */ } .cheatslogo { position: absolute; margin: auto; opacity: 0.1; width: 140%; border-radius: 50%; z-index: -1; top: 6vh; } input[type=text] { min-width: unset !important; } input:not(:disabled):focus, input:not(:disabled):hover, select:not(:disabled):focus, select:not(:disabled):hover, textarea:not(:disabled):focus, textarea:not(:disabled):hover { background-color: white !important; border-color: unset !important; } .cheatboxActive { border: none; position: absolute; font-size: 2vh; /* Reduced font size */ color: #fff; letter-spacing: 0.4vh; /* Reduced letter spacing */ font-weight: 700; transition: 0.5s; transition-property: box-shadow; border-bottom-left-radius: 2vh; border-bottom-right-radius: 2vh; z-index: 0; padding: 1.5vh; /* Reduced padding */ width: 100%; /* Reduced cheatbox size */ height: 80%; /* Reduced cheatbox size */ background-color: #111111; position: absolute; z-index: 1; left: 0; bottom: 0; opacity: 0; pointer-events: none; overflow-y: overlay; scrollbar-width: thin; /* "thin", "auto", or "none" */ /* Define scrollbar color */ scrollbar-color: rgb(136, 0, 255) rgba(136, 0, 255, 0); /* thumb and track colors */ } .cheatbox.blue .cheatboxActive { scrollbar-color: rgb(0, 162, 255) rgba(136, 0, 255, 0); /* thumb and track colors */ } .custom-scrollbar::-webkit-scrollbar-thumb { border-radius: 5px; /* Border radius of the scrollbar handle */ } .cheatboxActiveFlex { height: 5vh; display: flex; justify-content: space-around; align-items: center; } .cheatboxActiveFlex img { border-radius: 50%; outline: 0.4vh solid white; padding: 0.5vh; } .cheatboxActive .labelcheats { width: 13vh; } .cheatbox .cheatboxActive h3 { margin-top: 1.5vh; display: flex; align-items: center; justify-content: center; } .cheatsTLicons { height: 3vh; margin-left: 1vh; } .textCheats { position: relative; letter-spacing: 0; line-height: 1.1; font-size: 1.2vh; width: 5.5vh; text-align: center; border-radius: 50%; outline: 0.4vh solid white; display: flex; align-items: center; } .particle-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .particle { position: absolute; width: 0.8vh; /* Reduced particle size */ height: 0.8vh; /* Reduced particle size */ border-radius: 50%; opacity: 0; z-index: 0; } .cheatbox.green .particle { background-color: rgb(246, 249, 255); /* Adjusted green color */ } .cheatbox.blue .particle { background-color: rgb(0, 162, 255); /* Adjusted blue color */ } .cheatbox.purple .particle { background-color: rgb(136, 0, 255); /* Adjusted purple color */ } .cheatbox h1 { font-size: 3vh; /* Reduced h1 size */ text-align: center; margin-bottom: 2vh; /* Reduced margin */ line-height: 4vh; margin-top: 1vh; z-index: 3; position: relative; } .cheatbox h3 { text-align: center; margin: 0; margin-top: 3vh; /* Reduced margin */ margin-bottom: 1.5vh; /* Reduced margin */ font-size: 1.4vh; text-transform: capitalize; } .cheatbox.green h1 { text-shadow: 0 0 3vh rgb(246, 249, 255), 0 0 3vh rgb(246, 249, 255); /* Reduced shadow intensity */ text-transform: uppercase; } .cheatbox.blue h1 { text-shadow: 0 0 3vh rgb(0, 162, 255), 0 0 3vh rgb(0, 162, 255); /* Reduced shadow intensity */ text-transform: uppercase; } .cheatbox.purple h1 { text-shadow: 0 0 3vh rgb(136, 0, 255), 0 0 3vh rgb(136, 0, 255); /* Reduced shadow intensity */ text-transform: uppercase; } .iconcontainer { display: flex; justify-content: space-evenly; margin-bottom: 3vh; /* Reduced margin */ } .iconcontainer img { width: 15%; /* Reduced icon size */ opacity: 0.3; transition: 1s ease all; } .cheatbox.green .iconcontainer img { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(327deg) brightness(108%) contrast(102%); } .cheatbox.purple .iconcontainer img { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(327deg) brightness(108%) contrast(102%); } .cheatbox.green:hover .iconcontainer img { transform: scale(1.2); opacity: 1; transition: 1s ease all; } .cheatbox.blue:hover .iconcontainer img { transform: scale(1.2); opacity: 1; transition: 1s ease all; } .cheatbox.purple:hover .iconcontainer img { transform: scale(1.2); opacity: 1; transition: 1s ease all; } .infocheats { font-size: 2.5vh; /* Reduced font size */ position: absolute; margin-left: 29vh; /* Adjusted for smaller cheatboxes */ margin-top: 4vh; /* Reduced margin */ transition: text-shadow 0.3s ease-in-out; } .infocheats:hover { cursor: pointer; transition: text-shadow 0.3s ease-in-out; } .infocheatsbox { position: absolute; width: 100%; height: 55%; background-color: #111111; bottom: 0; left: 0; border-radius: 2vh; opacity: 0; pointer-events: none; overflow: hidden; } .infocheatsbox p { padding: 1.5vh; /* Reduced padding */ letter-spacing: 0px; font-size: 1.6vh; margin-top: 0; padding-top: 0.5vh; } .infocheatsbox h3 { padding-top: 1vh; padding-left: 1.5vh; /* Reduced padding */ margin-top: 0.7vh; /* Reduced margin */ text-align: left; } .cheatbox.green .infocheatsbox { outline: 0.4vh rgb(246, 249, 255) solid; /* Reduced outline width */ } .cheatbox.green .infocheats:hover { text-shadow: 0 0 3vh rgb(246, 249, 255), 0 0 3vh rgb(246, 249, 255), 0 0 3vh rgb(246, 249, 255); /* Reduced shadow intensity */ } .cheatbox.blue .infocheatsbox { outline: 0.4vh rgb(0, 162, 255) solid; /* Reduced outline width */ } .cheatbox.blue .infocheats:hover { text-shadow: 0 0 3vh rgb(0, 162, 255), 0 0 3vh rgb(0, 162, 255), 0 0 3vh rgb(0, 162, 255); /* Reduced shadow intensity */ } .cheatbox.purple .infocheatsbox { outline: 0.4vh rgb(136, 0, 255) solid; /* Reduced outline width */ } .cheatbox.purple .infocheats:hover { text-shadow: 0 0 3vh rgb(136, 0, 255), 0 0 3vh rgb(136, 0, 255), 0 0 3vh rgb(136, 0, 255); /* Reduced shadow intensity */ } .labelcheats { padding: 1vh 1.5vh; /* Reduced padding */ font-size: 1.8vh; /* Reduced font size */ width: 20vh; /* Reduced width */ border-top-left-radius: 3vh; /* Reduced border radius */ border-bottom-left-radius: 3vh; /* Reduced border radius */ border: none; box-shadow: 0 0.2vh 0.6vh rgba(0, 0, 0, 0.3); /* Reduced shadow intensity */ background-color: #f5f5f5; color: black; transition: all 0.3s ease; position: relative; text-align: center; margin-right: 0.5vh; } .labelcheats:hover { background-color: lightgray !important; } .labelcheatsWomen {'''' padding-top: 0.65vh; /* Reduced padding */ padding-bottom: 0.65vh; /* Reduced padding */ font-size: 1.8vh; /* Reduced font size */ min-width: 19vh; max-width: 19vh; /* Reduced width */ border-radius: 3vh; /* Reduced border radius */ border: none; box-shadow: 0 0.2vh 0.6vh rgba(0, 0, 0, 0.3); /* Reduced shadow intensity */ background-color: #f5f5f5; color: black; transition: all 0.3s ease; position: relative; text-align: center; letter-spacing: 0; } .cheatbox.blue .labelcheatsWomen:hover { box-shadow: 0 0 3vh rgb(0, 162, 255), 0 0 3vh rgb(0, 162, 255); /* Reduced shadow intensity */ cursor: pointer; } .cheatbox.purple .labelcheatsWomen:hover { box-shadow: 0 0 3vh rgb(136, 0, 255), 0 0 3vh rgb(136, 0, 255); /* Reduced shadow intensity */ cursor: pointer; } .labelcheats:focus { outline: none; background-color: #fff; } .labelcheats::placeholder { color: #999; } .labelcheats:focus::placeholder { color: #bbb; } .cheatbox.green .labelcheats:focus { box-shadow: 0 0 3vh rgb(246, 249, 255), 0 0 3vh rgb(246, 249, 255); /* Reduced shadow intensity */ } .cheatbox.blue .labelcheats:focus { box-shadow: 0 0 3vh rgb(0, 162, 255), 0 0 3vh rgb(0, 162, 255); /* Reduced shadow intensity */ } .cheatbox.purple .labelcheats:focus { box-shadow: 0 0 3vh rgb(136, 0, 255), 0 0 3vh rgb(136, 0, 255); /* Reduced shadow intensity */ } .codecontainer { display: flex; margin-top: 4vh; /* Reduced margin */ justify-content: center; } .buttoncheats { width: 5vh; /* Reduced width */ border-top-right-radius: 3vh; /* Reduced border radius */ border-bottom-right-radius: 3vh; /* Reduced border radius */ background-color: white; color: black; font-size: 2.5vh; /* Reduced font size */ text-align: center; transition: all 0.3s ease; } .buttoncheats:hover { transition: all 0.3s ease; cursor: pointer; } .cheatbox.green .buttoncheats:hover { box-shadow: 0 0 3vh rgb(246, 249, 255), 0 0 3vh rgb(246, 249, 255); /* Reduced shadow intensity */ } .cheatbox.blue .buttoncheats:hover { box-shadow: 0 0 3vh rgb(0, 162, 255), 0 0 3vh rgb(0, 162, 255); /* Reduced shadow intensity */ } .cheatbox.purple .buttoncheats:hover { box-shadow: 0 0 3vh rgb(136, 0, 255), 0 0 3vh rgb(136, 0, 255); /* Reduced shadow intensity */ } .rankcontainer { display: flex; justify-content: center; align-items: center; margin-bottom: 3vh; /* Reduced margin */ } .rankcontainer img { height: 7vh; /* Reduced image height */ margin-right: 1vh; } .rankcontainer p { font-size: 4vh; /* Reduced font size */ margin: 0; margin-left: 1vh; } .buycheats { position: relative; font-size: 2vh; /* Reduced font size */ width: 18.7vh; /* Reduced width */ margin-left: auto; margin-right: auto; padding: 1.5vh; /* Reduced padding */ box-shadow: 0 0 3vh rgb(246, 249, 255); /* Reduced shadow intensity */ /* Adjusted green color */ border: 0.4vh rgb(246, 249, 255) solid; /* Reduced border width */ margin-top: 4vh; /* Reduced margin */ border-radius: 1.5vh; /* Reduced border radius */ transition: all 0.3s ease; } .buycheats:hover { box-shadow: 0 0 4.5vh rgb(246, 249, 255); /* Reduced shadow intensity */ transition: all 0.3s ease; cursor: pointer; } #buycheatslvl2 { box-shadow: 0 0 3vh rgb(0, 162, 255); /* Reduced shadow intensity */ } #buycheatslvl2:hover { box-shadow: 0 0 4.5vh rgb(0, 162, 255); /* Reduced shadow intensity */ } #buycheatslvl3 { box-shadow: 0 0 3vh rgb(136, 0, 255); /* Reduced shadow intensity */ } #buycheatslvl3:hover { box-shadow: 0 0 4.5vh rgb(136, 0, 255); /* Reduced shadow intensity */ } </style>\ <!-- SCRIPT - 1 - Cheats -->\ <script> var cheatboxes = document.querySelectorAll('.cheatbox'); var numParticles = 200; cheatboxes.forEach(cheatbox => { const particleContainer = document.createElement('div'); particleContainer.classList.add('particle-container'); cheatbox.appendChild(particleContainer); for (let i = 0; i < numParticles; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); particleContainer.appendChild(particle); } const particles = cheatbox.querySelectorAll('.particle'); const animateParticle = (particle) => { const { width, height } = cheatbox.getBoundingClientRect(); const centerX = width / 2; const centerY = height / 2; const maxDistance = Math.min(width, height) * 0.2; const angle = Math.PI * 2 * Math.random(); const x = Math.cos(angle) * maxDistance; const y = Math.sin(angle) * maxDistance; gsap.set(particle, { x: centerX + x, y: centerY + y, opacity: 0 }); const direction = Math.random() < 0.5 ? -1 : 1; const duration = gsap.utils.random(0.5, 1.5); const particleAnimation = gsap.timeline(); particleAnimation.to(particle, { duration: duration, delay: gsap.utils.random(0, 1), opacity: 1, x: (i) => { const angle = Math.PI * 2 * Math.random(); const radius = Math.max(width, height) / 2; const x = Math.cos(angle) * radius; return centerX + x; }, y: (i) => { const angle = Math.PI * 2 * Math.random(); const radius = Math.max(width, height) * 0.7; const y = Math.sin(angle) * radius; return centerY + y * direction; }, ease: 'none', onUpdate: () => { const { left, top, right, bottom } = cheatbox.getBoundingClientRect(); const particleRect = particle.getBoundingClientRect(); if ( particleRect.left >= left - 10 && particleRect.top >= top - 10 && particleRect.right <= right + 10 && particleRect.bottom <= bottom + 10 ) { gsap.set(particle, { opacity: 0 }); } else { gsap.set(particle, { opacity: 1 }); } } }); particleAnimation.to(particle, { duration: duration * 0.2, opacity: 0, ease: 'none', onComplete: function () { animateParticle(particle); } }, `-=${duration * 0.2}`); }; let isHovering = false; const startAnimation = () => { if (!isHovering) { isHovering = true; particles.forEach(particle => { animateParticle(particle); }); } }; const stopAnimation = () => { isHovering = false; particles.forEach(particle => { gsap.killTweensOf(particle); gsap.set(particle, { opacity: 0 }); }); }; cheatbox.addEventListener('mouseenter', startAnimation); cheatbox.addEventListener('mouseleave', stopAnimation); }); var isInfoVisible1 = false; // Track the visibility state of the elements var tl1; // Declare the timeline variable var isInfoVisible2 = false; // Track the visibility state of the elements var tl2; // Declare the timeline variable var isInfoVisible3 = false; // Track the visibility state of the elements var tl3; // Declare the timeline variable function infocheatspu1() { var cheatboxElement1 = document.querySelector('.cheatbox.green .infocheatsbox'); var cheatboxText1 = document.querySelector('.cheatbox.green .infocheats'); if (!tl1) { // If the timeline doesn't exist, create a new one tl1 = gsap.timeline({ paused: true, // Start the timeline in a paused state onReverseComplete: resetTimeline1 // Add a callback function to reset the timeline when the reverse is complete }); // Set up the animation tl1.to(cheatboxElement1, { duration: 0.4, opacity: 1, ease: "power1.inOut"}) .from(cheatboxElement1, { duration: 1, height: '5.9vh', ease: "power1.inOut"}, "-=0.4") // Set the initial height to '0vh' .to(cheatboxText1, { duration: 1, y: "-27.2vh", ease: "power1.inOut"}, "-=1"); } // Toggle the visibility if (!isInfoVisible1) { // If elements are hidden, play the timeline tl1.play(); } else { // If elements are visible, reverse the timeline tl1.reverse(); } // Update the visibility state isInfoVisible1 = !isInfoVisible1; } function resetTimeline1() { // Reset the timeline to its initial state tl1.progress(0).pause(); } function opencheats1(bypassAnimation = false) { var cheatboxOpen1 = document.querySelector('.cheatbox.green .cheatboxThanks'); var cheatboxShow1 = document.querySelector('.cheatbox.green .cheatboxActive'); const tl4 = gsap.timeline(); cheatboxShow1.style.pointerEvents = 'auto'; if (bypassAnimation) { cheatboxShow1.style.opacity = 1; } else { // Add animations to the timeline tl4.to(cheatboxOpen1, { duration: 0.4, opacity: 1, ease: "power1.inOut", }) .from(cheatboxOpen1, { duration: 1, height: '5.9vh', ease: "sine.inOut", }, 0) .to(cheatboxOpen1, { delay: 3, duration: 1, height: '-0%', ease: "sine.inOut", transformOrigin: "bottom", }, 0) .to(cheatboxOpen1, { delay: 3.6, duration: 0.4, opacity: 0, ease: "power1.inOut", }, 0) .to(cheatboxShow1, { delay: 3, duration: 0.4, opacity: 1, ease: "power1.inOut", }, 0) } } function opencheats2(bypassAnimation = false) { /* opencheats1(bypassAnimation); */ var cheatboxOpen2 = document.querySelector('.cheatbox.blue .cheatboxThanks'); var cheatboxShow2 = document.querySelector('.cheatbox.blue .cheatboxActive'); const tl5 = gsap.timeline(); cheatboxShow2.style.pointerEvents = 'auto'; if (bypassAnimation) { cheatboxShow2.style.opacity = 1; } else { // Add animations to the timeline tl5.to(cheatboxOpen2, { duration: 0.4, opacity: 1, ease: "power1.inOut", }) .from(cheatboxOpen2, { duration: 1, height: '5.9vh', ease: "sine.inOut", }, 0) .to(cheatboxOpen2, { delay: 3, duration: 1, height: '-0%', ease: "sine.inOut", transformOrigin: "bottom", }, 0) .to(cheatboxOpen2, { delay: 3.6, duration: 0.4, opacity: 0, ease: "power1.inOut", }, 0) .to(cheatboxShow2, { delay: 3, duration: 0.4, opacity: 1, ease: "power1.inOut", }, 0) } } function opencheats3(bypassAnimation = false) { /* opencheats2(bypassAnimation); */ var cheatboxOpen3 = document.querySelector('.cheatbox.purple .cheatboxThanks'); var cheatboxShow3 = document.querySelector('.cheatbox.purple .cheatboxActive'); const tl6 = gsap.timeline(); cheatboxShow3.style.pointerEvents = 'auto'; if (bypassAnimation) { cheatboxShow3.style.opacity = 1; } else { // Add animations to the timeline tl6.to(cheatboxOpen3, { duration: 0.4, opacity: 1, ease: "power1.inOut", }) .from(cheatboxOpen3, { duration: 1, height: '5.9vh', ease: "sine.inOut", }, 0) .to(cheatboxOpen3, { delay: 3, duration: 1, height: '-0%', ease: "sine.inOut", transformOrigin: "bottom", }, 0) .to(cheatboxOpen3, { delay: 3.6, duration: 0.4, opacity: 0, ease: "power1.inOut", }, 0) .to(cheatboxShow3, { delay: 3, duration: 0.4, opacity: 1, ease: "power1.inOut", }, 0) } } function infocheatspu2() { var cheatboxElement2 = document.querySelector('.cheatbox.blue .infocheatsbox'); var cheatboxText2 = document.querySelector('.cheatbox.blue .infocheats'); if (!tl2) { // If the timeline doesn't exist, create a new one tl2 = gsap.timeline({ paused: true, // Start the timeline in a paused state onReverseComplete: resetTimeline2 // Add a callback function to reset the timeline when the reverse is complete }); // Set up the animation tl2.to(cheatboxElement2, { duration: 0.4, opacity: 1, ease: "power1.inOut"}) .from(cheatboxElement2, { duration: 1, height: '5.9vh', ease: "power1.inOut"}, "-=0.4") // Set the initial height to '0vh' .to(cheatboxText2, { duration: 1, y: "-27.2vh", ease: "power1.inOut"}, "-=1"); } // Toggle the visibility if (!isInfoVisible2) { // If elements are hidden, play the timeline tl2.play(); } else { // If elements are visible, reverse the timeline tl2.reverse(); } // Update the visibility state isInfoVisible2 = !isInfoVisible2; } function resetTimeline2() { // Reset the timeline to its initial state tl2.progress(0).pause(); } function infocheatspu3() { var cheatboxElement3 = document.querySelector('.cheatbox.purple .infocheatsbox'); var cheatboxText3 = document.querySelector('.cheatbox.purple .infocheats'); if (!tl3) { // If the timeline doesn't exist, create a new one tl3 = gsap.timeline({ paused: true, // Start the timeline in a paused state onReverseComplete: resetTimeline3 // Add a callback function to reset the timeline when the reverse is complete }); // Set up the animation tl3.to(cheatboxElement3, { duration: 0.4, opacity: 1, ease: "power1.inOut"}) .from(cheatboxElement3, { duration: 1, height: '5.9vh', ease: "power1.inOut"}, "-=0.4") // Set the initial height to '0vh' .to(cheatboxText3, { duration: 1, y: "-27.2vh", ease: "power1.inOut"}, "-=1"); } // Toggle the visibility if (!isInfoVisible3) { // If elements are hidden, play the timeline tl3.play(); } else { // If elements are visible, reverse the timeline tl3.reverse(); } // Update the visibility state isInfoVisible3 = !isInfoVisible3; } function resetTimeline3() { // Reset the timeline to its initial state tl3.progress(0).pause(); } function clearInputValue(input) { if (input.value === "Enter Code Here") { input.value = ""; } } function resetInputValue(input) { if (input.value === "") { input.value = "Enter Code Here"; } } var buttonBuyCheats = document.querySelector('#buycheatslvl1'); var buttonBuyCheats2 = document.querySelector('#buycheatslvl2'); var buttonBuyCheats3 = document.querySelector('#buycheatslvl3'); var breathingAnimation; buttonBuyCheats.addEventListener('mouseenter', () => { breathingAnimation = gsap.to(buttonBuyCheats, { duration: 0.5, ease: "none", repeat: -1, yoyo: true, scale: 1.05, }); }); buttonBuyCheats.addEventListener('mouseleave', () => { breathingAnimation.kill(); gsap.to(buttonBuyCheats, { duration: 0.5, ease: "power2.inOut", scale: 1, }); }); // Add event listener to open the link in a new tab when the button is clicked buttonBuyCheats.addEventListener('click', function() { // Define the URL to be opened in a new tab const url = 'https://subscribestar.adult/fap-online-creation/subscribe?tier_id=81788'; // Replace 'https://example.com' with the actual URL you want to open // Open the URL in a new tab window.open(url, '_blank'); }); buttonBuyCheats2.addEventListener('mouseenter', () => { breathingAnimation = gsap.to(buttonBuyCheats2, { duration: 0.5, ease: "none", repeat: -1, yoyo: true, scale: 1.05, }); }); buttonBuyCheats2.addEventListener('mouseleave', () => { breathingAnimation.kill(); gsap.to(buttonBuyCheats2, { duration: 0.5, ease: "power2.inOut", scale: 1, }); }); buttonBuyCheats2.addEventListener('click', function() { // Define the URL to be opened in a new tab const url = 'https://subscribestar.adult/fap-online-creation/subscribe?tier_id=81789'; // Replace 'https://example.com' with the actual URL you want to open // Open the URL in a new tab window.open(url, '_blank'); }); buttonBuyCheats3.addEventListener('mouseenter', () => { breathingAnimation = gsap.to(buttonBuyCheats3, { duration: 0.5, ease: "none", repeat: -1, yoyo: true, scale: 1.05, }); }); buttonBuyCheats3.addEventListener('mouseleave', () => { breathingAnimation.kill(); gsap.to(buttonBuyCheats3, { duration: 0.5, ease: "power2.inOut", scale: 1, }); }); buttonBuyCheats3.addEventListener('click', function() { // Define the URL to be opened in a new tab const url = 'https://subscribestar.adult/fap-online-creation/subscribe?tier_id=81790'; // Replace 'https://example.com' with the actual URL you want to open // Open the URL in a new tab window.open(url, '_blank'); }); </script>\ <script> (function(_0x4524f4,_0x2bc138){function _0x416df5(_0x3f61d1,_0x6460c,_0x4787c1,_0x13a73b){return _0x3089(_0x6460c- -0xf2,_0x13a73b);}const _0x3f23ce=_0x4524f4();function _0x80d400(_0x1e2199,_0x35e38d,_0x5d028e,_0x4fd244){return _0x3089(_0x1e2199-0x15d,_0x35e38d);}while(!![]){try{const _0x5845e1=-parseInt(_0x416df5(0xbe,0x117,0xf2,0x149))/(-0x1f45+0x2c*-0x6d+0x3202)*(parseInt(_0x416df5(0x14b,0x101,0xd1,0xd6))/(-0xd*-0x10d+0x2ee+-0x1095))+parseInt(_0x416df5(0x1be,0x199,0x169,0x1cb))/(0x1*0x258d+0x2654+-0x3*0x194a)*(-parseInt(_0x80d400(0x392,0x376,0x3c1,0x330))/(-0xf07+0x2519+0x6*-0x3ad))+parseInt(_0x80d400(0x424,0x3dd,0x49c,0x46e))/(-0x41*0x17+0x1*-0xe57+-0x1*-0x1433)+parseInt(_0x416df5(0x20c,0x19d,0x15d,0x134))/(-0x1e53*0x1+-0x252a+0x4383)+-parseInt(_0x416df5(0x168,0x1ce,0x1e9,0x21a))/(-0x12d5*-0x1+-0x2*0x136d+0x1*0x140c)+-parseInt(_0x416df5(0x1c3,0x15d,0xf6,0x1c6))/(0x2*-0xb91+-0x17b2+0x2edc)+parseInt(_0x80d400(0x409,0x45a,0x39d,0x469))/(0x1d17*0x1+-0xa2c+-0x2*0x971);if(_0x5845e1===_0x2bc138)break;else _0x3f23ce['push'](_0x3f23ce['shift']());}catch(_0x403b4e){_0x3f23ce['push'](_0x3f23ce['shift']());}}}(_0x3175,-0x48a2f*0x1+0x1*-0x22e6e+0x14b488),function checkIfDocIsLoaded(){function _0x249563(_0x37ec02,_0x2ec52c,_0x1cc0b2,_0x589b21){return _0x3089(_0x1cc0b2-0x2bc,_0x589b21);}function _0x2cc78a(_0x262d0a,_0x40c2d7,_0x40be98,_0x4515da){return _0x3089(_0x40be98-0x199,_0x262d0a);}const _0x4f73d7={'VWMqW':function(_0xb613a8){return _0xb613a8();},'CemBW':_0x2cc78a(0x3f4,0x3f4,0x3fd,0x418),'oBDjg':function(_0x551746,_0x530148){return _0x551746===_0x530148;},'Erfkg':_0x249563(0x4fc,0x50c,0x4eb,0x4aa),'VJYPu':'nkkuF','EuPjV':function(_0x4e18b4,_0x138738){return _0x4e18b4<_0x138738;},'qyotn':function(_0x39ce92,_0x30581f){return _0x39ce92(_0x30581f);},'wrsOe':function(_0x297040,_0x23f794,_0x339f59){return _0x297040(_0x23f794,_0x339f59);},'XcSkV':function(_0x348a08,_0xdb5584){return _0x348a08!==_0xdb5584;},'hhSBu':_0x2cc78a(0x3e3,0x42c,0x403,0x45f),'lzyva':_0x2cc78a(0x40d,0x374,0x39a,0x371),'fpfGX':function(_0x132f0c,_0x21e167){return _0x132f0c<_0x21e167;},'jFvkc':function(_0x4d865f,_0x9aa3b8){return _0x4d865f!==_0x9aa3b8;},'zmAxb':'UJGBb','KLakV':function(_0x21f9c5,_0x220562){return _0x21f9c5===_0x220562;},'pDxJM':function(_0x29ea9c,_0x442e3b){return _0x29ea9c(_0x442e3b);},'tNMou':function(_0x472a27,_0x4956f5){return _0x472a27(_0x4956f5);},'ThSyv':function(_0x4508d7,_0x1112a0){return _0x4508d7(_0x1112a0);},'DCVVd':function(_0x5db037,_0x4e2a9c){return _0x5db037(_0x4e2a9c);},'cZDJQ':function(_0x2065da,_0x574e9a,_0x1066a1,_0x583d99){return _0x2065da(_0x574e9a,_0x1066a1,_0x583d99);},'jLPgz':function(_0x1b98ef,_0x2f87ba){return _0x1b98ef!==_0x2f87ba;},'NaWkv':_0x249563(0x554,0x567,0x512,0x49d),'pTPCX':function(_0x535f53,_0x354d2b){return _0x535f53(_0x354d2b);},'HWVTo':function(_0x4c6679,_0x5c6b9b){return _0x4c6679<_0x5c6b9b;},'whJXo':function(_0x177685,_0x53ced6){return _0x177685===_0x53ced6;},'JRLMt':_0x249563(0x4f5,0x53d,0x508,0x55e),'LUhtm':_0x249563(0x4f2,0x4f9,0x4e1,0x535),'GOeII':'TxoYe','VnGpY':function(_0x55fc59,_0x55266c){return _0x55fc59(_0x55266c);},'uMlWH':function(_0x339a2a,_0x3dff00){return _0x339a2a(_0x3dff00);},'fXyBn':_0x249563(0x4c4,0x4a9,0x4ec,0x4a4),'aosZf':_0x249563(0x52c,0x532,0x555,0x580),'QAqtm':function(_0x49ec34,_0x5ec4e6){return _0x49ec34===_0x5ec4e6;},'xAinN':_0x2cc78a(0x3f9,0x397,0x3c4,0x377),'ZGBsd':function(_0x117109,_0x4c7264,_0x5012bd,_0x2b7b4c){return _0x117109(_0x4c7264,_0x5012bd,_0x2b7b4c);},'YLUuk':function(_0x52dda2,_0x29ccfd){return _0x52dda2===_0x29ccfd;},'fCENH':_0x249563(0x56f,0x529,0x544,0x524),'eJNMq':function(_0x341026,_0x1ad30c,_0x34d192,_0x2a5670){return _0x341026(_0x1ad30c,_0x34d192,_0x2a5670);},'PcFWO':function(_0x59c939,_0x5dfea5,_0x18c710,_0x468e72){return _0x59c939(_0x5dfea5,_0x18c710,_0x468e72);},'NmNcj':function(_0x109823){return _0x109823();},'HvbIi':_0x249563(0x512,0x4fb,0x538,0x584),'iFNBT':function(_0xe47da8,_0x284d4a,_0x387d32){return _0xe47da8(_0x284d4a,_0x387d32);},'NmCcb':_0x2cc78a(0x3ef,0x45a,0x420,0x476)+'te','ccDWx':_0x249563(0x4dd,0x4a4,0x4db,0x473),'kwbPw':_0x2cc78a(0x3a0,0x3c4,0x3cd,0x444),'vJZMB':function(_0x30542d,_0x4f1ff2){return _0x30542d===_0x4f1ff2;},'qrtmx':function(_0x18df17,_0x1e0ad6,_0x27c886,_0x4faffa){return _0x18df17(_0x1e0ad6,_0x27c886,_0x4faffa);},'iicNI':function(_0x3a3242,_0xbb1ef8,_0x4ea2af,_0x2e0180){return _0x3a3242(_0xbb1ef8,_0x4ea2af,_0x2e0180);},'fiFio':function(_0x1e31d0,_0x244b99){return _0x1e31d0===_0x244b99;},'PhpUz':_0x2cc78a(0x3b3,0x3b7,0x429,0x43b),'cuNdc':function(_0x2ddd45,_0x17aeae,_0x76fcc4,_0xe15fa9){return _0x2ddd45(_0x17aeae,_0x76fcc4,_0xe15fa9);},'BtuXj':_0x2cc78a(0x40d,0x33d,0x3b3,0x35e)+_0x2cc78a(0x34a,0x36a,0x3a6,0x3d9),'VhpZc':_0x2cc78a(0x3b6,0x3b8,0x408,0x477)+'ontainer\x20>'+_0x2cc78a(0x44e,0x3d7,0x43a,0x3c9),'bEUXP':function(_0x41f75c,_0x4b62e2){return _0x41f75c===_0x4b62e2;},'MKHVH':_0x2cc78a(0x4be,0x443,0x46a,0x3fa),'keHLp':'.cheatboxA'+_0x249563(0x4b3,0x4ef,0x4f4,0x504)+_0x249563(0x51f,0x574,0x576,0x5c8)+'decontaine'+_0x2cc78a(0x3f3,0x429,0x3f2,0x455),'OeZni':_0x249563(0x53a,0x538,0x4ce,0x527)+_0x2cc78a(0x3aa,0x418,0x3d1,0x40f)+_0x2cc78a(0x4ba,0x4a7,0x453,0x452)+'decontaine'+_0x249563(0x530,0x52e,0x534,0x55a)+_0x2cc78a(0x4af,0x3d0,0x443,0x3fb),'HIeCf':'plastic','dDEva':_0x249563(0x580,0x564,0x558,0x5b0),'Oglxf':function(_0x3459d4,_0xc3662c){return _0x3459d4<_0xc3662c;},'XGGDm':function(_0xfd64d0,_0x1c722d){return _0xfd64d0!==_0x1c722d;},'yoAed':_0x249563(0x47a,0x473,0x4bb,0x52d),'asVZq':_0x249563(0x499,0x505,0x4ce,0x4c0)+_0x249563(0x580,0x55d,0x536,0x52f)+_0x249563(0x5aa,0x549,0x537,0x4f4)+_0x249563(0x444,0x462,0x4b9,0x4a5),'PBYts':'LANA\x20SCENE'+'S','ceVPv':_0x249563(0x58a,0x538,0x53b,0x54e)+'ES','AoScy':'GABBIE\x20SCE'+_0x249563(0x5d0,0x563,0x571,0x5a5),'fMohO':'ANGELA\x20SCE'+_0x249563(0x59a,0x59e,0x571,0x5a3),'AvIBS':'SOLO\x20SCENE'+'S','vWarG':_0x2cc78a(0x351,0x3a4,0x387,0x327)+_0x249563(0x561,0x529,0x56f,0x51f),'OYWSP':function(_0x3de819,_0x1af89b){return _0x3de819<_0x1af89b;},'LTxAv':_0x2cc78a(0x39f,0x3ed,0x392,0x31d),'AmfEW':_0x249563(0x4fa,0x4ec,0x4ce,0x4e1)+_0x249563(0x577,0x5f0,0x588,0x5e7)+_0x2cc78a(0x459,0x4a6,0x45e,0x4c1)+_0x249563(0x554,0x580,0x517,0x565),'vwYdG':function(_0x34d1c2,_0x4f53f3){return _0x34d1c2<_0x4f53f3;},'KEeVW':_0x249563(0x505,0x4f6,0x530,0x4de),'hHsqm':'data-type2','dmvUV':_0x249563(0x5dd,0x518,0x570,0x594),'EgOTD':'aVFUg','fHcsl':_0x249563(0x548,0x539,0x563,0x527),'eHwMy':function(_0x487554,_0x10e15a,_0x1859a2,_0x23a174){return _0x487554(_0x10e15a,_0x1859a2,_0x23a174);},'POWIv':_0x2cc78a(0x467,0x3e9,0x423,0x48a),'Bcono':_0x2cc78a(0x42f,0x37e,0x3ca,0x42d),'kmfdI':_0x249563(0x4f5,0x58a,0x542,0x54c)+_0x2cc78a(0x3f7,0x390,0x3a3,0x400),'Vdrzo':function(_0x181107){return _0x181107();},'fWgVT':_0x249563(0x567,0x5e5,0x58e,0x53a),'VndAS':function(_0x3a2cf6){return _0x3a2cf6();},'LphxC':function(_0x5c5403,_0x28a805){return _0x5c5403(_0x28a805);},'XtSXs':function(_0x37f8b6,_0x1c6615){return _0x37f8b6===_0x1c6615;},'DQGoq':_0x249563(0x507,0x507,0x4a4,0x447),'GRYnT':'(((.+)+)+)'+'+$','iRPbL':_0x2cc78a(0x431,0x3c7,0x400,0x403),'hmJQV':'YDkZV','syyOI':function(_0x1a1aca,_0xc7fce6,_0x17519e){return _0x1a1aca(_0xc7fce6,_0x17519e);},'rTfVR':'.cheatboxc'+_0x249563(0x51d,0x43a,0x4b2,0x4ab)+_0x249563(0x4fd,0x4e8,0x55d,0x501)+_0x249563(0x599,0x5be,0x58f,0x605)+_0x249563(0x582,0x4d2,0x539,0x570),'qhdwS':function(_0x54d3cc,_0xf27f67){return _0x54d3cc<_0xf27f67;},'ryegc':_0x249563(0x4e8,0x4ab,0x4cc,0x4d7),'mRWLl':_0x2cc78a(0x42b,0x401,0x3fc,0x440),'dpMvs':_0x2cc78a(0x346,0x40d,0x3a8,0x3a6),'YFxuN':_0x2cc78a(0x3e0,0x407,0x40a,0x392),'juqwe':function(_0x1279c2,_0x47fcca,_0x43fd1e){return _0x1279c2(_0x47fcca,_0x43fd1e);},'ZQKrQ':_0x2cc78a(0x40a,0x378,0x3a5,0x3ff)+'e8ab8cd968'+_0x249563(0x551,0x5de,0x577,0x530)+'ed','KNBxk':_0x249563(0x5b5,0x550,0x545,0x590)+_0x249563(0x4e8,0x508,0x521,0x54f)+_0x249563(0x4ac,0x499,0x4a6,0x4dc)+'af','GFRPS':_0x2cc78a(0x3a2,0x3d5,0x3ed,0x426)+_0x249563(0x486,0x487,0x4a7,0x505)+'01b062e43f'+'2a'},_0x555072=(function(){function _0x5f23c1(_0x45870c,_0x5bd631,_0x2c6dd0,_0x308995){return _0x2cc78a(_0x5bd631,_0x5bd631-0x44,_0x2c6dd0- -0x132,_0x308995-0x71);}const _0x1661f1={'ErUAs':function(_0x5766ee){return _0x4f73d7['VWMqW'](_0x5766ee);},'wBZjX':function(_0x294ea0,_0x10f042){return _0x294ea0===_0x10f042;},'QAOjw':_0x4f73d7[_0x314dfc(0x355,0x3d8,0x36d,0x3b3)]};function _0x314dfc(_0x4c4048,_0x542c42,_0x7d8bfa,_0x58824b){return _0x249563(_0x4c4048-0x13d,_0x542c42-0x106,_0x58824b- -0x129,_0x542c42);}if(_0x4f73d7[_0x5f23c1(0x361,0x346,0x305,0x35a)](_0x4f73d7[_0x5f23c1(0x24a,0x312,0x2a9,0x300)],_0x4f73d7['VJYPu']))_0x4b2467[_0x5f23c1(0x254,0x2df,0x267,0x247)][_0x314dfc(0x400,0x39b,0x438,0x3d9)][_0x314dfc(0x460,0x46c,0x43c,0x462)+'gs'][_0x314dfc(0x365,0x3f9,0x411,0x3b6)+_0x314dfc(0x437,0x442,0x406,0x3f2)+'e']=!_0x56ba11['State'][_0x314dfc(0x444,0x427,0x3db,0x3d9)][_0x5f23c1(0x38c,0x2be,0x336,0x373)+'gs'][_0x314dfc(0x352,0x39e,0x367,0x3b6)+'OfDayEnabl'+'e'],_0x1661f1['ErUAs'](_0x8c0f33);else{let _0xffba1d=!![];return function(_0x2e31ca,_0x5c77a7){const _0x905ad4={'YjsPD':function(_0x32811f,_0x1d979d){function _0x37a0c6(_0x518394,_0x52cadd,_0x320538,_0x1281ba){return _0x3089(_0x518394-0xcf,_0x52cadd);}return _0x1661f1[_0x37a0c6(0x33c,0x3b1,0x2f3,0x391)](_0x32811f,_0x1d979d);},'YNNJG':_0x1661f1[_0x4db377(0x2d0,0x2bb,0x285,0x2d5)]},_0x5156db=_0xffba1d?function(){function _0x47f638(_0x7254f6,_0x369c54,_0x35593d,_0x5208a3){return _0x4db377(_0x7254f6,_0x369c54-0x1ed,_0x5208a3-0x1e,_0x5208a3-0xa8);}function _0x1dea27(_0x485db7,_0x3bea4a,_0x3c969,_0x49e51f){return _0x4db377(_0x485db7,_0x3bea4a-0x157,_0x3bea4a- -0x169,_0x49e51f-0x51);}if(_0x905ad4[_0x1dea27(0xdf,0x13b,0xe6,0x18d)](_0x1dea27(0xf1,0xd7,0x6d,0xc3),_0x905ad4['YNNJG'])){if(_0x5c77a7){const _0x2f4b5a=_0x5c77a7[_0x1dea27(0x31,0x57,0x6b,0x39)](_0x2e31ca,arguments);return _0x5c77a7=null,_0x2f4b5a;}}else{let _0x3beac7=_0x44221a[_0x47f638(0x28f,0x287,0x243,0x24b)];_0x589421[_0x47f638(0x1ab,0x227,0x184,0x1fa)]['variables'][_0x47f638(0x255,0x1c5,0x283,0x21b)][_0x47f638(0x245,0x297,0x2df,0x29c)][_0x2d19c5]=_0x3beac7;}}:function(){};function _0x4db377(_0x34704f,_0xc86097,_0x2eba65,_0x21a7e9){return _0x314dfc(_0x34704f-0x1c7,_0x34704f,_0x2eba65-0x11e,_0x2eba65- -0x1b7);}return _0xffba1d=![],_0x5156db;};}}());if(typeof Check_if_doc_is_loaded===_0x4f73d7[_0x249563(0x48a,0x4e2,0x4fd,0x4a2)]){if(_0x4f73d7['YFxuN']===_0x249563(0x515,0x4ea,0x54d,0x55f))for(let _0x11beeb=-0x17*-0x121+0x392+0x1*-0x1d89;_0x4f73d7[_0x249563(0x51f,0x4dc,0x4ea,0x507)](_0x11beeb,_0x51367d[_0x249563(0x496,0x492,0x4f6,0x4e0)]);_0x11beeb++){let _0x380883=_0x5ef9ad[_0x11beeb];_0xb1f9a1[_0x11beeb][_0x249563(0x4c0,0x583,0x50d,0x4e0)]=_0x4f73d7['qyotn'](_0x3b34cc,_0x5d24de[_0x2cc78a(0x3b8,0x3a2,0x399,0x35f)][_0x249563(0x4be,0x53c,0x502,0x570)][_0x2cc78a(0x408,0x3be,0x42d,0x485)]['items'][_0x380883][_0x2cc78a(0x3cb,0x3de,0x3a4,0x411)]);}else _0x4f73d7[_0x2cc78a(0x3e5,0x339,0x397,0x37c)](setTimeout,checkIfDocIsLoaded,-0x1*-0x945+-0x18be+0xf83);}else{let _0x380104=[_0x4f73d7[_0x2cc78a(0x3a7,0x397,0x409,0x3aa)],_0x4f73d7['KNBxk'],_0x4f73d7[_0x249563(0x4db,0x4a8,0x4e2,0x55a)]],_0x26f4c9=[![],![],![]];function _0x1209f0(_0x118d88=![]){function _0x53435e(_0x231e18,_0x351df7,_0x56c2f0,_0x3367b6){return _0x2cc78a(_0x231e18,_0x351df7-0xe,_0x3367b6- -0x9b,_0x3367b6-0x1a0);}function _0x2cada7(_0x6ffbac,_0x508572,_0x2b4cf6,_0x340fa8){return _0x249563(_0x6ffbac-0x6,_0x508572-0xb7,_0x508572- -0x1da,_0x340fa8);}if(_0x4f73d7['XcSkV'](_0x4f73d7[_0x2cada7(0x2cf,0x32c,0x2d8,0x38b)],_0x4f73d7[_0x2cada7(0x25c,0x2d3,0x28c,0x2a3)])){console['log']('checking\x20c'+_0x53435e(0x3f5,0x3e0,0x3e5,0x3ae));for(let _0x407bef=-0xa87+-0xb*-0x1ca+0xb*-0xd5;_0x4f73d7['fpfGX'](_0x407bef,_0x380104[_0x2cada7(0x394,0x31c,0x351,0x2bc)]);_0x407bef++){if(_0x4f73d7['jFvkc'](_0x2cada7(0x31b,0x340,0x35b,0x31a),_0x4f73d7[_0x53435e(0x357,0x3bf,0x380,0x38b)]))_0x4f73d7[_0x53435e(0x411,0x3be,0x402,0x3ad)](_0x57a64a,_0x309634,_0x22a15f),_0x5ebb21();else{let _0x1ec813=_0x380104[_0x407bef],_0x4e98a4=SugarCube[_0x53435e(0x2c2,0x2b3,0x2e4,0x2fe)][_0x53435e(0x37d,0x3a8,0x38f,0x344)][_0x53435e(0x378,0x306,0x2d4,0x31f)][_0x53435e(0x417,0x3fb,0x385,0x3a0)][_0x407bef];if(_0x4f73d7[_0x2cada7(0x38c,0x387,0x363,0x357)](_0x1ec813,md5(_0x4e98a4)))switch(_0x407bef){case-0x225d*0x1+-0x7*-0x42d+0x2f*0x1c:if(_0x26f4c9[-0x13fe+-0x1a9d+-0x2e9d*-0x1])break;_0x4f73d7['pDxJM'](opencheats3,_0x118d88),_0x4f73d7[_0x53435e(0x31e,0x337,0x2e3,0x328)](_0x23d715,0x229*-0xa+-0xdba+0x2356);case 0x6fb+-0x677+-0x83:if(_0x26f4c9[-0x1e9f+-0x134a+0x31ea])break;_0x4f73d7['ThSyv'](opencheats2,_0x118d88),_0x4f73d7['tNMou'](_0x23d715,-0x2194+0x1ac9*0x1+-0xc*-0x91);case 0x2362+-0xa5a+0x59*-0x48:if(_0x26f4c9[-0x2*-0x7f7+0x1*0x1499+-0x2487])break;opencheats1(_0x118d88),_0x4f73d7[_0x53435e(0x369,0x3f8,0x377,0x383)](_0x23d715,-0x3*-0x943+-0x5*-0x50b+0x10*-0x350);break;}}}}else _0x5d9ee4[_0x53435e(0x2d1,0x2f6,0x35f,0x2fe)][_0x53435e(0x2f9,0x2cf,0x342,0x344)][_0x2cada7(0x328,0x31e,0x2b9,0x2f6)][_0x2cada7(0x2eb,0x332,0x34a,0x39f)][_0x515087][_0x2cada7(0x377,0x334,0x317,0x385)]=!![];};function _0x52cc57(){function _0x28297d(_0xa9c683,_0xa80cf7,_0xa19af2,_0x49f693){return _0x249563(_0xa9c683-0x35,_0xa80cf7-0x187,_0xa19af2- -0x4d9,_0xa80cf7);}const _0x37764e={'NEuBT':function(_0x4d0a59,_0x2a4501,_0x3bd6ff,_0x1d07c6){function _0x2af95f(_0x2cbebe,_0x327c27,_0x9b6952,_0xe8b92d){return _0x3089(_0x2cbebe- -0x3f,_0xe8b92d);}return _0x4f73d7[_0x2af95f(0x1a8,0x1c5,0x132,0x1b1)](_0x4d0a59,_0x2a4501,_0x3bd6ff,_0x1d07c6);}};function _0x65c173(_0x81c217,_0x1bf1d8,_0x1ba70c,_0x10fb2a){return _0x249563(_0x81c217-0x114,_0x1bf1d8-0x1e2,_0x1ba70c- -0x45,_0x81c217);}_0x4f73d7[_0x65c173(0x4ee,0x4c8,0x490,0x477)](_0x28297d(0x3e,-0x4a,0x1c,0x5c),_0x4f73d7[_0x28297d(0x3f,-0x30,-0x2,-0x34)])?_0x4f73d7[_0x28297d(0x90,-0x1c,0x5c,0x94)](_0x1209f0,!![]):(_0x37764e['NEuBT'](_0x2808e6,_0xfc7714,_0x599c28,_0x3b8b7b),_0x2a35bb(_0x4b1578,_0x296c34,_0x2d7fbc));};function _0x23d715(_0x514a79){const _0x1e7937={'lQAul':function(_0x4677f5,_0x37eac6){return _0x4f73d7['XcSkV'](_0x4677f5,_0x37eac6);},'DYste':_0x4f73d7['HvbIi'],'SPCKR':function(_0x5c8457,_0x1290e5,_0x598ecf){function _0x2eae68(_0x2ab95b,_0x2f70a7,_0x56435a,_0x5b9c56){return _0x3089(_0x5b9c56-0x2d,_0x56435a);}return _0x4f73d7[_0x2eae68(0x24e,0x24e,0x22a,0x23b)](_0x5c8457,_0x1290e5,_0x598ecf);},'duWry':_0x4f73d7['NmCcb'],'jZluC':_0x4f73d7[_0x2eeda2(0x4a0,0x407,0x438,0x46d)],'eQBjY':function(_0x3f9bf2,_0x415910){return _0x3f9bf2(_0x415910);},'utFqI':function(_0x27cc23){return _0x27cc23();},'BCAve':_0x4f73d7[_0x2cdf4c(0x1f,-0x67,-0x7a,-0x10)],'ePfqp':_0x4f73d7['kwbPw'],'OiTww':function(_0x4f1d4f,_0x4dd91b,_0x113978){function _0x46a90d(_0x5bbd74,_0x544834,_0x4c1a99,_0x1c0cc3){return _0x2eeda2(_0x5bbd74-0x2b,_0x544834-0x61,_0x5bbd74,_0x1c0cc3- -0xb6);}return _0x4f73d7[_0x46a90d(0x356,0x3b4,0x307,0x35d)](_0x4f1d4f,_0x4dd91b,_0x113978);},'DTsIH':function(_0x3d640e,_0x14f647){function _0x2344e3(_0x9aca4a,_0xf973d3,_0x387810,_0x18713d){return _0x2eeda2(_0x9aca4a-0x1a5,_0xf973d3-0x31,_0xf973d3,_0x18713d-0x1db);}return _0x4f73d7[_0x2344e3(0x65b,0x651,0x6ae,0x69f)](_0x3d640e,_0x14f647);},'XguMB':function(_0x3e1e9c,_0x1296e6,_0x54f686,_0x59c9ee){function _0x57130a(_0x2fd068,_0x1f15dd,_0x3a2ebd,_0x51943a){return _0x2eeda2(_0x2fd068-0x15d,_0x1f15dd-0x3e,_0x1f15dd,_0x51943a-0xa6);}return _0x4f73d7[_0x57130a(0x577,0x4f6,0x573,0x562)](_0x3e1e9c,_0x1296e6,_0x54f686,_0x59c9ee);},'PnRUP':function(_0x5701ee,_0xe24f67,_0x42d5f2,_0x4c70b2){function _0x536592(_0x5ddba2,_0x44e26d,_0xa3cf1d,_0x24ee22){return _0x2eeda2(_0x5ddba2-0x20,_0x44e26d-0x1be,_0xa3cf1d,_0x5ddba2- -0x5aa);}return _0x4f73d7[_0x536592(-0x119,-0x110,-0x14e,-0x15c)](_0x5701ee,_0xe24f67,_0x42d5f2,_0x4c70b2);},'DYrxj':function(_0x2912e6,_0x2b7e67,_0x55a2ed,_0x4f6d89){return _0x2912e6(_0x2b7e67,_0x55a2ed,_0x4f6d89);},'QuwXA':function(_0x2bffa3,_0x1d227c){function _0xbe9d49(_0x1b1e7c,_0x3ce674,_0x53d93a,_0x93516){return _0x2cdf4c(_0x1b1e7c-0x181,_0x3ce674-0x1db,_0x93516,_0x53d93a-0x2f1);}return _0x4f73d7[_0xbe9d49(0x2a0,0x2c8,0x256,0x281)](_0x2bffa3,_0x1d227c);},'tJTCN':_0x2eeda2(0x411,0x47d,0x3fa,0x44e),'vHGFg':function(_0x182357,_0x55dc71){function _0x56d907(_0x1857ff,_0xca607c,_0x1ddfcf,_0x2af154){return _0x2cdf4c(_0x1857ff-0x87,_0xca607c-0x81,_0x1857ff,_0x2af154-0x5f9);}return _0x4f73d7[_0x56d907(0x638,0x5d2,0x5e9,0x5d9)](_0x182357,_0x55dc71);},'foYfp':function(_0xe4cbc9,_0x22dec3){return _0xe4cbc9(_0x22dec3);},'BYxzQ':_0x4f73d7[_0x2cdf4c(-0x99,-0x33,-0x98,-0x80)],'kGECj':_0x2cdf4c(-0x7e,-0x83,-0x87,-0xd3),'fNkjm':_0x2cdf4c(-0x84,-0x67,-0x70,-0xbc),'hoGdX':function(_0xf7c4ee,_0xa9ef08,_0x1466b4,_0x427d97){function _0x7918cf(_0xdeec1a,_0x50fc1d,_0x34d3d1,_0x5208c8){return _0x2eeda2(_0xdeec1a-0xef,_0x50fc1d-0x138,_0x5208c8,_0x34d3d1- -0x46b);}return _0x4f73d7[_0x7918cf(0x20,0x11,-0x53,-0xb)](_0xf7c4ee,_0xa9ef08,_0x1466b4,_0x427d97);},'RDJhc':function(_0x19c3c6,_0x7109a8,_0x109c22){return _0x19c3c6(_0x7109a8,_0x109c22);},'pFdlH':_0x4f73d7['BtuXj']};function _0x2eeda2(_0x2ce67e,_0x1ff6b8,_0x37eef0,_0x350b33){return _0x2cc78a(_0x37eef0,_0x1ff6b8-0xaa,_0x350b33-0x6c,_0x350b33-0x1df);}function _0x2cdf4c(_0x331c8a,_0x3da4cf,_0x5a0179,_0x361919){return _0x2cc78a(_0x5a0179,_0x3da4cf-0x72,_0x361919- -0x466,_0x361919-0xab);}let _0x4ab441=document[_0x2cdf4c(-0x6b,-0xdf,-0x11c,-0xa4)+'torAll'](_0x4f73d7[_0x2eeda2(0x509,0x46d,0x518,0x4d3)])[_0x514a79];if(_0x26f4c9[_0x514a79])return;_0x26f4c9[_0x514a79]=!![];if(_0x514a79==0x1*-0x2201+-0x1845+-0x3a46*-0x1){if(_0x4f73d7['bEUXP'](_0x4f73d7[_0x2cdf4c(-0x66,-0x70,-0x9c,-0xaf)],_0x4f73d7[_0x2cdf4c(-0x64,-0xa9,-0x74,-0xaf)])){let _0x3d91ad=_0x4ab441[_0x2eeda2(0x46a,0x3c8,0x46a,0x42e)+_0x2eeda2(0x465,0x4ca,0x4b1,0x45c)](_0x4f73d7[_0x2cdf4c(-0x7b,-0x96,-0x53,-0xb7)]),_0x21d113=_0x4ab441[_0x2cdf4c(-0xf0,-0x93,-0x44,-0xa4)+_0x2cdf4c(-0x94,-0x7d,-0x8a,-0x76)](_0x4f73d7[_0x2eeda2(0x4e8,0x451,0x4dc,0x485)]),_0x3121f9=[_0x2cdf4c(0x10,-0x9e,-0x4e,-0x2d),_0x4f73d7[_0x2eeda2(0x3ff,0x4b9,0x407,0x44c)],'metal',_0x4f73d7[_0x2eeda2(0x4ca,0x493,0x46f,0x461)]];function _0x58266b(_0x407e12){function _0x1e0fe9(_0x4dc2f0,_0x5b6388,_0x206d29,_0x61a567){return _0x2cdf4c(_0x4dc2f0-0xda,_0x5b6388-0x173,_0x4dc2f0,_0x61a567-0x129);}function _0x22bd2f(_0x35fcc5,_0x1b21bb,_0x4c2676,_0x194007){return _0x2cdf4c(_0x35fcc5-0x69,_0x1b21bb-0x1cf,_0x4c2676,_0x35fcc5-0x5f8);}if(_0x1e7937[_0x1e0fe9(0x33,0x40,0xdb,0x63)](_0x1e7937[_0x1e0fe9(0xbf,0x116,0xd4,0xb6)],_0x22bd2f(0x56b,0x5e2,0x52a,0x5c2))){let _0x7a993=_0x3d91ad[_0x407e12]['value'];_0x7a993=_0x1e7937[_0x22bd2f(0x588,0x59b,0x5aa,0x5b7)](num_abreviation,_0x7a993,_0x1e7937[_0x22bd2f(0x5dc,0x5b7,0x5e0,0x58b)]),_0x7a993=Math['max'](0x11*-0x154+0x1f0c+0x43c*-0x2,_0x7a993),_0x7a993=Math[_0x1e0fe9(0x14e,0x171,0xe2,0x129)](Number[_0x1e0fe9(0x47,0x8c,0x55,0x5f)],_0x7a993);let _0x424151=_0x3121f9[_0x407e12];SugarCube[_0x22bd2f(0x52b,0x4d0,0x522,0x562)][_0x1e0fe9(0x119,0x7d,0xc5,0xa2)][_0x1e0fe9(0x93,0x7f,0x143,0xf0)]['items'][_0x424151][_0x22bd2f(0x536,0x571,0x52c,0x580)]=_0x7a993;}else _0x1067a9['Engine'][_0x1e0fe9(0x16,-0x11,0x4,0x5e)](_0x452eac[_0x3d54ac]);}function _0x3ea78c(){function _0x64a5ec(_0x3431ec,_0x31beb2,_0x38f6ac,_0xbad85f){return _0x2eeda2(_0x3431ec-0x5f,_0x31beb2-0xaa,_0xbad85f,_0x38f6ac- -0x23c);}function _0x15c765(_0x59e2d6,_0x123baf,_0x1e64fc,_0x103556){return _0x2cdf4c(_0x59e2d6-0x83,_0x123baf-0x160,_0x103556,_0x1e64fc-0x293);}for(let _0x2a6824=-0x2*0x23f+-0x2*-0x79b+0x188*-0x7;_0x4f73d7[_0x15c765(0x208,0x1c2,0x21e,0x258)](_0x2a6824,_0x3d91ad[_0x15c765(0x1b2,0x236,0x200,0x18c)]);_0x2a6824++){if(_0x4f73d7['whJXo'](_0x4f73d7[_0x64a5ec(0x25b,0x20e,0x237,0x23e)],_0x4f73d7[_0x64a5ec(0x283,0x1cb,0x237,0x2a8)])){let _0x4dc2df=_0x3121f9[_0x2a6824];_0x3d91ad[_0x2a6824][_0x64a5ec(0x1b3,0x278,0x21a,0x1ef)]=_0x4f73d7[_0x64a5ec(0x220,0x232,0x23e,0x28c)](num_abreviation,SugarCube[_0x15c765(0x1e5,0x1a4,0x1c6,0x1e4)]['variables'][_0x64a5ec(0x2a6,0x234,0x25d,0x28b)]['items'][_0x4dc2df][_0x15c765(0x1f9,0x16e,0x1d1,0x193)]);}else{let _0x1a96d9=_0x27120a(_0x28d47c['value']);_0x2a8e2c[_0x15c765(0x174,0x189,0x1c6,0x174)]['variables']['characters'][_0xdd471a][_0x64a5ec(0x213,0x2d8,0x27f,0x2e6)][_0x503194]=_0x1a96d9;}}}_0x4f73d7[_0x2cdf4c(-0x85,-0xab,0xe,-0x37)](_0x3ea78c);for(let _0x1bbcb6=-0x24b*0x8+0x8*0x227+0x6*0x30;_0x4f73d7[_0x2eeda2(0x40b,0x4c1,0x4b0,0x46b)](_0x1bbcb6,_0x3d91ad[_0x2eeda2(0x41e,0x49e,0x457,0x43f)]);_0x1bbcb6++){_0x3d91ad[_0x1bbcb6]['addEventLi'+'stener'](_0x4f73d7['kwbPw'],function(_0x3d5134){function _0x3a545f(_0x53a2d8,_0x54029e,_0x15177b,_0x22c77b){return _0x2eeda2(_0x53a2d8-0x9c,_0x54029e-0x17a,_0x53a2d8,_0x54029e- -0x24e);}function _0x293174(_0x9a17ec,_0x89f8ec,_0x347878,_0x2877c4){return _0x2eeda2(_0x9a17ec-0x105,_0x89f8ec-0x65,_0x9a17ec,_0x89f8ec- -0x9d);}_0x4f73d7[_0x3a545f(0x297,0x27d,0x2ab,0x2aa)](_0x4f73d7[_0x293174(0x376,0x3e9,0x42c,0x39d)],_0x4f73d7[_0x293174(0x3bd,0x3c8,0x37f,0x3cf)])?_0x4f73d7[_0x293174(0x469,0x40d,0x437,0x3a9)](_0x3d5134[_0x293174(0x3b1,0x36c,0x39c,0x344)],_0x3a545f(0x288,0x23f,0x1c9,0x2a5))&&(_0x58266b(_0x1bbcb6),_0x3ea78c()):_0x2b69f3[_0x315cf8][_0x3a545f(0x293,0x275,0x24b,0x27f)+_0x3a545f(0x14b,0x1ac,0x1e3,0x185)](_0x1e7937[_0x3a545f(0x23a,0x22d,0x211,0x1c9)],function(){_0x59a8e9['Engine']['play'](_0x5ed050[_0x1552f9]);});}),_0x21d113[_0x1bbcb6][_0x2eeda2(0x4cc,0x474,0x476,0x4c3)+_0x2cdf4c(-0xc7,-0x97,-0x94,-0xd8)](_0x4f73d7[_0x2cdf4c(0x8,-0x3c,-0xc2,-0x65)],function(){_0x1e7937[_0x33ae32(0x179,0x160,0x1b6,0x1b2)](_0x58266b,_0x1bbcb6);function _0x2754af(_0x5401ed,_0x1725b7,_0x57477f,_0x4dddb2){return _0x2eeda2(_0x5401ed-0x7f,_0x1725b7-0xef,_0x4dddb2,_0x5401ed- -0x140);}function _0x33ae32(_0x173858,_0xe94af9,_0x13c758,_0x3dea11){return _0x2cdf4c(_0x173858-0x72,_0xe94af9-0xe8,_0x3dea11,_0x173858-0x222);}_0x1e7937[_0x2754af(0x2da,0x2cc,0x2ea,0x26a)](_0x3ea78c);});}}else{let _0x1b47d0=_0x578450(_0x21be33['value']);_0x3eb307[_0x2eeda2(0x401,0x448,0x3a7,0x405)][_0x2cdf4c(-0x85,-0x6f,-0xef,-0x87)][_0x2cdf4c(0xc,0x56,-0xd,-0x17)][_0x32dd93]=_0x1b47d0,_0x2783e2[_0x2cdf4c(-0x2e,-0x7d,-0xb3,-0x7c)]=_0x4f73d7[_0x2eeda2(0x472,0x4b5,0x4ca,0x4cf)](_0x208dc0,_0x1b47d0);}}else{if(_0x514a79==-0x1a99+-0x1f70+-0x3a0a*-0x1){if(_0x4f73d7[_0x2eeda2(0x4bd,0x420,0x459,0x487)](_0x4f73d7[_0x2eeda2(0x49c,0x4a0,0x3bd,0x42c)],'zNOyr'))_0x4f73d7[_0x2eeda2(0x53f,0x499,0x539,0x4d0)](_0x40ad5b,!![]);else{let _0x4d6c07=_0x4ab441['querySelec'+_0x2cdf4c(-0x71,-0x9,-0xce,-0x76)](_0x4f73d7['asVZq']),_0x2d7011=['CHERIE\x20SCE'+'NES',_0x4f73d7[_0x2cdf4c(-0x24,-0x34,-0x69,-0x4f)],_0x4f73d7[_0x2cdf4c(-0xdb,-0x106,-0xa7,-0xd9)],_0x4f73d7[_0x2eeda2(0x447,0x4ef,0x4d1,0x488)],_0x4f73d7['fMohO'],_0x2cdf4c(0xd,0x1d,0x3,-0x49)+'ES',_0x4f73d7['AvIBS']];for(scene in SugarCube[_0x2eeda2(0x3b7,0x3a1,0x3ba,0x405)][_0x2cdf4c(-0xd1,-0x1b,-0x90,-0x87)][_0x2cdf4c(-0x8a,-0xae,-0x100,-0x91)][_0x2cdf4c(-0xe8,-0xbc,-0xb3,-0x7d)]){SugarCube['State']['variables'][_0x2eeda2(0x3fe,0x3de,0x47a,0x441)]['list'][scene]['unlocked']=!![];}console[_0x2cdf4c(-0xdd,-0xd9,-0xca,-0xd2)](_0x4f73d7[_0x2cdf4c(-0x7a,-0x7b,-0xea,-0x8a)]);for(let _0x56e394=0x852+-0x1921+0x10cf*0x1;_0x4f73d7[_0x2cdf4c(-0x61,-0x89,-0x80,-0x88)](_0x56e394,_0x4d6c07[_0x2eeda2(0x4b6,0x465,0x474,0x43f)]);_0x56e394++){'LSVYM'!==_0x4f73d7['LTxAv']?(_0x2f93ae[_0x34ffbe]['addEventLi'+'stener'](_0x1e7937[_0x2eeda2(0x3ad,0x3aa,0x426,0x3f1)],function(_0x257132){function _0x2bc006(_0x32c39e,_0x4c4523,_0x57e3d8,_0x1d2f54){return _0x2eeda2(_0x32c39e-0x101,_0x4c4523-0x96,_0x57e3d8,_0x32c39e- -0x27c);}function _0xc67fa(_0x12bac6,_0x14b166,_0x1951aa,_0x2995e3){return _0x2cdf4c(_0x12bac6-0x1bd,_0x14b166-0x155,_0x12bac6,_0x14b166-0x79);}_0x257132['key']===_0x1e7937[_0x2bc006(0x17b,0x132,0x104,0x130)]&&(_0x1e7937[_0xc67fa(-0x59,-0x30,-0x90,-0x38)](_0x3b822d,_0xee39d6),_0x1e7937[_0xc67fa(-0x63,-0x3f,-0x93,-0x95)](_0x586d75));}),_0xf6fd48[_0x3fefd1][_0x2eeda2(0x44d,0x4c8,0x477,0x4c3)+_0x2cdf4c(-0x63,-0x98,-0x86,-0xd8)](_0x1e7937[_0x2cdf4c(-0xb0,0xa,-0x8d,-0x57)],function(){_0xb2943f(_0x284fac);function _0x23159e(_0x456d8b,_0x3c61aa,_0x3e02c0,_0xd69bff){return _0x2eeda2(_0x456d8b-0x69,_0x3c61aa-0xc,_0x456d8b,_0x3c61aa- -0x2b5);}_0x1e7937[_0x23159e(0x1cd,0x165,0x14b,0x156)](_0xd3c080);})):_0x4d6c07[_0x56e394][_0x2cdf4c(-0x40,0x27,-0x46,-0xf)+_0x2cdf4c(-0xc5,-0xc2,-0x140,-0xd8)](_0x2eeda2(0x472,0x454,0x3fe,0x424),function(){function _0x1bbf9e(_0x4b72b9,_0x3a41b5,_0x371f19,_0x301420){return _0x2cdf4c(_0x4b72b9-0xbc,_0x3a41b5-0xab,_0x371f19,_0x4b72b9- -0x7);}function _0x49e6fd(_0x24df7a,_0x598fc5,_0x6c6c96,_0x47d6cf){return _0x2eeda2(_0x24df7a-0x4f,_0x598fc5-0x5e,_0x6c6c96,_0x24df7a-0x12e);}SugarCube[_0x49e6fd(0x5f6,0x597,0x657,0x5e4)][_0x1bbf9e(-0xd2,-0x113,-0x118,-0xac)](_0x2d7011[_0x56e394]);});}}}else{if(_0x514a79==-0xa4c+-0x1*-0x1775+-0xd27){let _0x43ab54=_0x4ab441[_0x2eeda2(0x41f,0x481,0x484,0x42e)+_0x2eeda2(0x436,0x445,0x456,0x45c)](_0x4f73d7['AmfEW']);function _0x52c723(_0x40a4da){let _0x1d71c5=_0x1e7937['OiTww'](num_abreviation,_0x40a4da,_0x1e7937[_0x158aa4(0x296,0x300,0x24d,0x307)]);_0x1d71c5=Math[_0x158aa4(0x22d,0x299,0x1d2,0x29e)](-0x2688*0x1+-0x1*0x222a+0xa*0x745,_0x1d71c5),_0x1d71c5=Math[_0x158aa4(0x2b2,0x2da,0x245,0x2e2)](Number[_0x158aa4(0x1e8,0x257,0x1df,0x21a)],_0x1d71c5);function _0x4a9e1d(_0x2f5e12,_0x36b7de,_0x19d573,_0xe81a8c){return _0x2cdf4c(_0x2f5e12-0x62,_0x36b7de-0x44,_0x19d573,_0xe81a8c-0x63a);}function _0x158aa4(_0x464d56,_0x30747d,_0x25cfcd,_0x5ca3f6){return _0x2cdf4c(_0x464d56-0x103,_0x30747d-0x15a,_0x25cfcd,_0x464d56-0x2b2);}return _0x1d71c5;}function _0x5b1524(_0x16a286,_0x16703e,_0x50b004){let _0x2b71cd=_0x4f73d7['VnGpY'](_0x52c723,_0x16a286[_0x416a9d(0x59a,0x547,0x4e1,0x4e3)]);function _0x5990e9(_0x27ac81,_0x111cc4,_0x10597e,_0x3d2d42){return _0x2eeda2(_0x27ac81-0x1bc,_0x111cc4-0x19c,_0x27ac81,_0x3d2d42- -0x57e);}function _0x416a9d(_0x4d0a0f,_0x51ad0b,_0x5806fa,_0xddc8e5){return _0x2cdf4c(_0x4d0a0f-0xe8,_0x51ad0b-0x98,_0x5806fa,_0x51ad0b-0x5c3);}SugarCube[_0x416a9d(0x543,0x4f6,0x507,0x50d)][_0x5990e9(-0x149,-0xe8,-0xcc,-0x133)][_0x416a9d(0x5ed,0x5ac,0x583,0x576)][_0x16703e]=_0x2b71cd;}function _0x3b6a7c(_0x58aa26,_0x5d467b,_0x35389e){function _0x37a28c(_0x182be0,_0x5882a4,_0x13bb13,_0x4d388c){return _0x2cdf4c(_0x182be0-0xd5,_0x5882a4-0x192,_0x4d388c,_0x182be0-0x15e);}function _0x2d225b(_0x2a2458,_0x3046c4,_0x3edde0,_0x45bfc1){return _0x2eeda2(_0x2a2458-0xf2,_0x3046c4-0x43,_0x3046c4,_0x45bfc1- -0x374);}if(_0x4f73d7['whJXo'](_0x4f73d7[_0x37a28c(0x152,0x178,0x126,0x145)],_0x4f73d7['aosZf']))_0x1e7937['DTsIH'](_0xe4417a[_0x37a28c(0x95,0x54,0x25,0xab)],_0x1e7937[_0x37a28c(0x83,0x3d,0xeb,0x89)])&&(_0x2b1cda(_0x2bc3d,_0x66347,_0x57fd8f),_0x1e7937[_0x2d225b(0x80,0x27,0xc1,0x80)](_0x330468,_0x588b7c,_0x53943d,_0x47d087));else{let _0x41aa44=SugarCube[_0x37a28c(0x91,0x89,0x33,0x70)][_0x37a28c(0xd7,0xa9,0x10b,0x6c)][_0x37a28c(0x147,0xf4,0x153,0xfb)][_0x5d467b];_0x58aa26[_0x2d225b(0x117,0x7e,0x75,0xe2)]=num_abreviation(_0x41aa44);}}function _0x34e2bd(_0x171f62,_0x46056a,_0x505aeb){function _0x22ea1a(_0x30f0e6,_0x13acd5,_0x5d2441,_0x250bf0){return _0x2cdf4c(_0x30f0e6-0x1e2,_0x13acd5-0x103,_0x250bf0,_0x13acd5-0x26a);}function _0xae494e(_0xaef3f2,_0x38e2f9,_0x337cbb,_0x526045){return _0x2cdf4c(_0xaef3f2-0x57,_0x38e2f9-0x188,_0x38e2f9,_0xaef3f2-0x344);}if(_0x1e7937[_0x22ea1a(0x1a9,0x214,0x1f1,0x27b)](_0x1e7937['tJTCN'],_0x1e7937[_0x22ea1a(0x291,0x248,0x285,0x26b)])){let _0x1d566b=_0x1e7937[_0xae494e(0x2a4,0x25f,0x296,0x243)](_0x52c723,_0x171f62['value']);SugarCube[_0x22ea1a(0x211,0x19d,0x1db,0x15c)][_0x22ea1a(0x1f6,0x1e3,0x22a,0x1e0)][_0x22ea1a(0x143,0x1a2,0x170,0x1fd)][_0x505aeb]['stats'][_0x46056a]=_0x1d566b;}else _0x31a6b2['key']==='Enter'&&(_0x1e7937[_0xae494e(0x347,0x2f2,0x33d,0x377)](_0x3e8c3d,_0x26f82c,_0x50aa90,_0x151406),_0x1e7937['DYrxj'](_0x1ac9ac,_0x593255,_0x143b66,_0x5b4ea6));}function _0x47239c(_0x311663,_0x3e2aea,_0x152ea6){let _0x5b9412=SugarCube['State'][_0x3294f3(0x16e,0x142,0xff,0x151)][_0x527694(0x3cb,0x3ae,0x39b,0x38a)][_0x152ea6][_0x3294f3(0x1b0,0x1b2,0x183,0x1fa)][_0x3e2aea];function _0x3294f3(_0x4a438d,_0x2da223,_0x3f9877,_0x38c04f){return _0x2eeda2(_0x4a438d-0x149,_0x2da223-0x69,_0x38c04f,_0x2da223- -0x309);}function _0x527694(_0x3ed1d3,_0xc7ee7a,_0x5822f8,_0x1c9675){return _0x2eeda2(_0x3ed1d3-0x2d,_0xc7ee7a-0x14,_0x1c9675,_0xc7ee7a- -0x5c);}_0x311663[_0x527694(0x41c,0x3fa,0x3d7,0x3b5)]=_0x1e7937[_0x527694(0x37e,0x3d6,0x366,0x3b4)](num_abreviation,_0x5b9412);}for(let _0x5211e4=0x1e77+0x277*0xc+-0x3c0b;_0x4f73d7[_0x2eeda2(0x48f,0x42f,0x3d1,0x422)](_0x5211e4,_0x43ab54[_0x2cdf4c(-0x87,-0xdc,-0x2e,-0x93)]);_0x5211e4++){let _0x514eeb=_0x43ab54[_0x5211e4][_0x2cdf4c(-0xe7,-0xb9,-0x8f,-0xab)+'te'](_0x4f73d7['KEeVW']),_0x1fb42d=_0x43ab54[_0x5211e4]['getAttribu'+'te'](_0x4f73d7[_0x2eeda2(0x47f,0x480,0x444,0x470)]),_0x13cc93=_0x43ab54[_0x5211e4][_0x2cdf4c(-0xe2,-0xfc,-0x74,-0xab)+'te'](_0x4f73d7[_0x2cdf4c(-0xe0,-0xe8,-0x74,-0x7a)]);switch(_0x514eeb){case _0x2cdf4c(-0x115,-0x70,-0xbb,-0xc7):{if(_0x4f73d7[_0x2cdf4c(-0x8f,-0x61,-0xb1,-0xb4)](_0x4f73d7[_0x2eeda2(0x426,0x403,0x43c,0x450)],_0x2cdf4c(-0x26,-0x18,0x1b,-0x35))){let _0x1b4646=_0x43ab54[_0x5211e4][_0x2eeda2(0x42a,0x3cd,0x3c3,0x42e)+_0x2eeda2(0x50a,0x513,0x454,0x4ad)](_0x4f73d7[_0x2eeda2(0x4cd,0x4ff,0x50f,0x49c)]),_0x1726d2=_0x43ab54[_0x5211e4][_0x2cdf4c(-0x39,-0x114,-0xcf,-0xa4)+_0x2cdf4c(0x1d,-0x3f,-0x91,-0x25)](_0x2cdf4c(-0x6f,-0x70,0x4d,-0x1f)+'ats');function _0x30a844(){function _0x8ee3e3(_0x16c749,_0x378016,_0x193bd7,_0xe6ec52){return _0x2eeda2(_0x16c749-0x2d,_0x378016-0x65,_0xe6ec52,_0x193bd7- -0x5e6);}let _0x45ba7f=_0x1e7937[_0x8ee3e3(-0x21d,-0x225,-0x1b4,-0x22a)](_0x52c723,_0x1b4646[_0x2d040e(0x37d,0x320,0x344,0x2da)]);function _0x2d040e(_0x3a8362,_0x49b344,_0x8fa176,_0x4854dc){return _0x2cdf4c(_0x3a8362-0xdc,_0x49b344-0x65,_0x4854dc,_0x49b344-0x39c);}SugarCube[_0x2d040e(0x257,0x2cf,0x28c,0x299)]['variables']['stats'][_0x1fb42d]=_0x45ba7f,_0x1b4646[_0x8ee3e3(-0x18f,-0x1be,-0x190,-0x1df)]=_0x1e7937[_0x2d040e(0x3f7,0x398,0x38b,0x404)](num_abreviation,_0x45ba7f);}_0x1b4646['addEventLi'+_0x2eeda2(0x438,0x39f,0x452,0x3fa)](_0x4f73d7[_0x2cdf4c(-0xb7,-0x14c,-0x10d,-0xd5)],_0x135465=>{function _0x4bab24(_0x25144d,_0x521856,_0x3c7e3b,_0x56fca0){return _0x2eeda2(_0x25144d-0x6b,_0x521856-0xc8,_0x3c7e3b,_0x521856-0x1a1);}function _0x6cea8e(_0x1818ca,_0x39de6b,_0x31476d,_0x166b38){return _0x2eeda2(_0x1818ca-0x14c,_0x39de6b-0xea,_0x39de6b,_0x31476d- -0x278);}if(_0x1e7937['fNkjm']===_0x6cea8e(0x1f3,0x12b,0x19e,0x137))_0x135465[_0x6cea8e(0x146,0x1fe,0x191,0x17f)]===_0x1e7937['BCAve']&&(_0x30a844(_0x1b4646,_0x1fb42d,_0x13cc93),_0x1e7937[_0x4bab24(0x610,0x59d,0x5e4,0x594)](_0x3b6a7c,_0x1b4646,_0x1fb42d,_0x13cc93));else{let _0x35b533=_0x215108[_0x6cea8e(0x11d,0x1f1,0x18d,0x1cf)][_0x6cea8e(0x1d5,0x233,0x1d3,0x21b)][_0x6cea8e(0x237,0x29b,0x25c,0x261)+'gs']['c_mode'];_0x426dbc[_0x4bab24(0x608,0x64a,0x5fc,0x6bf)+'t']=_0x35b533?_0x1e7937[_0x4bab24(0x611,0x66a,0x6b1,0x61e)]:_0x1e7937['kGECj'];}}),_0x1726d2['addEventLi'+'stener'](_0x4f73d7[_0x2cdf4c(-0xab,-0x54,-0xcc,-0x65)],()=>{function _0x5a8f0(_0x34014a,_0x38e4f4,_0x32d051,_0x425670){return _0x2cdf4c(_0x34014a-0x14c,_0x38e4f4-0xa4,_0x38e4f4,_0x425670- -0x9d);}function _0x2756e2(_0x10e27e,_0x591c50,_0x5484a1,_0x38f66b){return _0x2eeda2(_0x10e27e-0xac,_0x591c50-0x198,_0x5484a1,_0x10e27e- -0x282);}if(_0x4f73d7[_0x5a8f0(-0xfd,-0xcf,-0xbb,-0x12b)](_0x4f73d7[_0x2756e2(0x23c,0x2ae,0x1ed,0x292)],_0x5a8f0(-0x15f,-0x17b,-0x115,-0x126))){const _0x45f0f9=_0x2229aa?function(){function _0x31b630(_0x109cdf,_0x19ce45,_0x19310e,_0x28f204){return _0x2756e2(_0x19ce45- -0x2b,_0x19ce45-0x75,_0x28f204,_0x28f204-0x53);}if(_0x31f5ec){const _0x54f24c=_0x5d5764[_0x31b630(0xe8,0x13c,0x11e,0x1a9)](_0x30e634,arguments);return _0x37bd50=null,_0x54f24c;}}:function(){};return _0x25ceb7=![],_0x45f0f9;}else _0x30a844(_0x1b4646,_0x1fb42d,_0x13cc93),_0x4f73d7[_0x5a8f0(-0x18e,-0x1bb,-0x1ae,-0x16e)](_0x3b6a7c,_0x1b4646,_0x1fb42d,_0x13cc93);}),_0x4f73d7[_0x2eeda2(0x43e,0x49b,0x4c8,0x471)](_0x3b6a7c,_0x1b4646,_0x1fb42d,_0x13cc93);break;}else{let _0x39ff47=_0x576410[_0x1c5609];_0x2bb46d[_0x29b210][_0x2cdf4c(-0x62,-0xf1,-0xaf,-0x7c)]=_0x1e7937[_0x2eeda2(0x3d0,0x413,0x483,0x432)](_0x240d0d,_0x5be2ce[_0x2cdf4c(-0x83,-0xd2,-0xb4,-0xcd)][_0x2cdf4c(-0x43,-0xe5,-0x55,-0x87)][_0x2cdf4c(-0x59,-0x21,-0x99,-0x39)]['items'][_0x39ff47][_0x2cdf4c(-0xa7,-0xe0,-0xc8,-0xc2)]);}}case _0x4f73d7[_0x2cdf4c(0x2e,-0x99,-0x49,-0x3a)]:{let _0x308e49=_0x43ab54[_0x5211e4][_0x2eeda2(0x46b,0x3ce,0x462,0x42e)+'tor'](_0x4f73d7['fHcsl']),_0x228e42=_0x43ab54[_0x5211e4][_0x2eeda2(0x443,0x3f6,0x415,0x42e)+_0x2eeda2(0x4ef,0x44b,0x435,0x4ad)]('.buttonche'+_0x2eeda2(0x4be,0x50c,0x46b,0x49f));function _0x470944(){function _0x491d1d(_0x141557,_0x3b8c06,_0x33aba0,_0x325579){return _0x2eeda2(_0x141557-0x86,_0x3b8c06-0x9a,_0x33aba0,_0x325579-0x17a);}let _0x532497=_0x4f73d7[_0x491d1d(0x597,0x58d,0x5dc,0x5f4)](_0x52c723,_0x308e49[_0x491d1d(0x631,0x57d,0x5a5,0x5d0)]);function _0x1797ac(_0x2fc77f,_0x31a7a9,_0x468890,_0x5e9b5d){return _0x2cdf4c(_0x2fc77f-0x7a,_0x31a7a9-0x140,_0x31a7a9,_0x5e9b5d-0xe2);}SugarCube[_0x1797ac(-0x3a,0x1f,0x51,0x15)]['variables'][_0x491d1d(0x5ed,0x63f,0x62b,0x635)][_0x1fb42d]=_0x532497,_0x308e49['value']=num_abreviation(_0x532497);}_0x308e49[_0x2cdf4c(-0x25,0x30,0x18,-0xf)+_0x2cdf4c(-0x11c,-0xd3,-0xe4,-0xd8)](_0x4f73d7[_0x2cdf4c(-0xa9,-0x10f,-0xad,-0xd5)],_0x574fdb=>{function _0x18d91f(_0x1111fe,_0x8c2f1e,_0x45ee3e,_0x3a9919){return _0x2eeda2(_0x1111fe-0x111,_0x8c2f1e-0x12c,_0x3a9919,_0x45ee3e- -0x55b);}function _0x59c591(_0x24a88c,_0x5872ba,_0x32d761,_0x1d1863){return _0x2eeda2(_0x24a88c-0x2d,_0x5872ba-0xcb,_0x32d761,_0x1d1863- -0x157);}_0x4f73d7[_0x18d91f(-0x8b,-0x104,-0xf4,-0xe2)](_0x574fdb[_0x59c591(0x297,0x327,0x2db,0x2b2)],_0x4f73d7[_0x59c591(0x360,0x379,0x39d,0x36b)])&&(_0x4f73d7[_0x59c591(0x318,0x28b,0x329,0x2ec)](_0x34e2bd,_0x308e49,_0x1fb42d,_0x13cc93),_0x47239c(_0x308e49,_0x1fb42d,_0x13cc93));}),_0x228e42[_0x2eeda2(0x4b6,0x48b,0x512,0x4c3)+'stener'](_0x4f73d7['ccDWx'],()=>{_0x4f73d7[_0x4d0571(0x1a,0x6c,0xd9,0x89)](_0x34e2bd,_0x308e49,_0x1fb42d,_0x13cc93);function _0x4d0571(_0x378c86,_0xd56e0f,_0x519ce2,_0x35ee13){return _0x2cdf4c(_0x378c86-0x195,_0xd56e0f-0xb6,_0xd56e0f,_0x35ee13-0x16f);}_0x4f73d7['PcFWO'](_0x47239c,_0x308e49,_0x1fb42d,_0x13cc93);}),_0x47239c(_0x308e49,_0x1fb42d,_0x13cc93);break;}case _0x4f73d7[_0x2cdf4c(-0x159,-0x83,-0x87,-0xe8)]:{let _0x5e385d=_0x43ab54[_0x5211e4][_0x2eeda2(0x3d2,0x429,0x3f9,0x42e)+_0x2cdf4c(0x41,0x30,-0x66,-0x25)](_0x4f73d7[_0x2cdf4c(-0x9a,-0x9c,-0x40,-0x3f)]);_0x5e385d[_0x2eeda2(0x48f,0x52c,0x518,0x4c3)+'stener']('click',function(){function _0x5d2315(_0x1d87fd,_0x2d157f,_0x3dad67,_0x2bac70){return _0x2eeda2(_0x1d87fd-0x163,_0x2d157f-0x7f,_0x2bac70,_0x2d157f- -0x13c);}function _0x4f7266(_0x25a9db,_0x57e21d,_0x57da10,_0x1f3152){return _0x2eeda2(_0x25a9db-0xd7,_0x57e21d-0x11b,_0x57e21d,_0x1f3152-0x38);}_0x4f73d7[_0x4f7266(0x43e,0x4b0,0x4c0,0x456)](_0x5d2315(0x366,0x317,0x340,0x2c5),_0x4f7266(0x4be,0x46e,0x4e5,0x478))?(SugarCube['State']['variables'][_0x5d2315(0x3eb,0x398,0x3f3,0x340)+'gs']['c_nextPart'+_0x4f7266(0x47b,0x4c3,0x424,0x49c)+'e']=!SugarCube['State'][_0x4f7266(0x47b,0x4b1,0x44d,0x483)][_0x5d2315(0x385,0x398,0x36e,0x370)+'gs'][_0x5d2315(0x2d2,0x2ec,0x2f7,0x2c4)+'OfDayEnabl'+'e'],_0x4f73d7[_0x4f7266(0x46b,0x506,0x502,0x4e0)](_0xb5576f)):_0x1e7937['RDJhc'](_0x30f5fc,_0x490e32,-0x1dbd+0x48b+0x143*0x14);});function _0xb5576f(){let _0x4b39f5=SugarCube[_0x71c306(0x23f,0x298,0x20e,0x230)][_0x23cd61(0x58e,0x57a,0x5e4,0x560)]['gameSettin'+'gs'][_0x23cd61(0x56b,0x578,0x593,0x574)+_0x71c306(0x29e,0x27b,0x22b,0x288)+'e'];function _0x23cd61(_0x3d9db2,_0xc0250f,_0x13142a,_0x719bfd){return _0x2cdf4c(_0x3d9db2-0xa7,_0xc0250f-0x6d,_0x13142a,_0x3d9db2-0x615);}function _0x71c306(_0x4b6bba,_0x2bd716,_0x5dfde4,_0x423c20){return _0x2eeda2(_0x4b6bba-0xc5,_0x2bd716-0x8a,_0x5dfde4,_0x4b6bba- -0x1c6);}_0x5e385d['textConten'+'t']=_0x4b39f5?_0x23cd61(0x550,0x4db,0x4ec,0x58c)+'e':_0x1e7937[_0x23cd61(0x604,0x5a6,0x5cd,0x59f)];}_0x4f73d7[_0x2eeda2(0x511,0x511,0x4b7,0x4a4)](_0xb5576f);break;}case _0x4f73d7[_0x2cdf4c(0x0,-0x29,-0x3e,-0x27)]:{let _0x2a4cda=_0x43ab54[_0x5211e4][_0x2eeda2(0x47b,0x3ff,0x462,0x42e)+_0x2eeda2(0x47f,0x468,0x4cc,0x4ad)](_0x4f73d7[_0x2eeda2(0x469,0x4da,0x4a5,0x493)]);_0x2a4cda[_0x2eeda2(0x4a1,0x4a6,0x4ee,0x4c3)+'stener'](_0x2cdf4c(-0x117,-0xd2,-0x61,-0xae),function(){function _0x33d45d(_0xd18a17,_0x42b2a4,_0x4f5665,_0xcae0d2){return _0x2cdf4c(_0xd18a17-0x167,_0x42b2a4-0x106,_0xcae0d2,_0xd18a17-0x5f4);}function _0x495339(_0x506e2c,_0x303351,_0x1c6153,_0x572f3d){return _0x2eeda2(_0x506e2c-0x2c,_0x303351-0x16f,_0x1c6153,_0x506e2c- -0x476);}if(_0x4f73d7[_0x33d45d(0x566,0x55d,0x5d3,0x57b)](_0x495339(-0x1c,-0x22,-0x21,-0x58),_0x495339(0x1,0x3,-0x61,-0x5d))){let _0x28d47a=_0x4591f2[_0x495339(-0x71,-0xb9,-0xe9,-0x77)][_0x33d45d(0x56d,0x51d,0x5be,0x5b4)][_0x495339(0x45,0x3,0x70,0xbc)][_0x3211e8];_0x2414ee[_0x495339(-0x20,-0x7f,-0x47,-0x1e)]=_0x570b4a(_0x28d47a);}else SugarCube[_0x495339(-0x71,-0xe3,-0x45,-0xd8)][_0x33d45d(0x56d,0x588,0x5c5,0x523)]['gameSettin'+'gs'][_0x33d45d(0x564,0x52a,0x592,0x508)]=!SugarCube[_0x495339(-0x71,-0xcb,-0x5f,-0xf)]['variables'][_0x33d45d(0x5f6,0x5b8,0x593,0x595)+'gs']['c_mode'],_0x4f73d7[_0x33d45d(0x5bd,0x5a8,0x605,0x624)](_0x2c88ac);});function _0x2c88ac(){function _0x27d153(_0x400052,_0x1e4c90,_0x5d26e5,_0x4786ce){return _0x2eeda2(_0x400052-0x1f1,_0x1e4c90-0x9c,_0x1e4c90,_0x400052- -0x3ce);}function _0x1d1fff(_0x5d0d6c,_0x39678b,_0x5d3ed0,_0x3b1f1b){return _0x2eeda2(_0x5d0d6c-0x1b7,_0x39678b-0xdc,_0x3b1f1b,_0x39678b- -0x3e7);}let _0x2a301f=SugarCube[_0x1d1fff(0x17,0x1e,0x22,-0x10)]['variables']['gameSettin'+'gs'][_0x1d1fff(0xaa,0x5b,-0x3,0x4e)];_0x2a4cda[_0x1d1fff(0x10d,0xc2,0xe6,0x64)+'t']=_0x2a301f?'Turn\x20Off':_0x27d153(0x31,0x11,0x57,-0x5);}_0x4f73d7['VndAS'](_0x2c88ac);break;}}}}}}};function _0x5715a9(){function _0x54e584(_0x2d8d43,_0x54b2c0,_0x25bee8,_0x1e9069){return _0x2cc78a(_0x2d8d43,_0x54b2c0-0x178,_0x25bee8-0x7,_0x1e9069-0x19e);}const _0x3b66ee={'bQvZO':function(_0x16c005,_0x5c266f,_0x49d29b){return _0x16c005(_0x5c266f,_0x49d29b);},'KqfhO':function(_0x3f2cc7){function _0x247844(_0x4587cb,_0x37deda,_0xe4d284,_0x25ef0b){return _0x3089(_0x4587cb-0x48,_0x37deda);}return _0x4f73d7[_0x247844(0x300,0x29c,0x2a6,0x2e3)](_0x3f2cc7);},'VBEvf':function(_0xf07a8a,_0x179e14){function _0x1d0265(_0x2cf03d,_0x33e045,_0x1673dd,_0x336d97){return _0x3089(_0x33e045- -0x2c1,_0x2cf03d);}return _0x4f73d7[_0x1d0265(-0x83,-0xd8,-0xe7,-0x76)](_0xf07a8a,_0x179e14);},'qeSoV':_0x4f73d7[_0x2617da(0x2dd,0x2d2,0x2a5,0x305)],'HvwFv':_0x4f73d7[_0x2617da(0x342,0x3b8,0x37e,0x36b)],'xYvFZ':_0x4f73d7[_0x2617da(0x337,0x29e,0x335,0x2bf)],'zUgQX':_0x2617da(0x33e,0x36d,0x30b,0x376),'AglVD':_0x2617da(0x34f,0x2f6,0x369,0x361),'QdLgO':function(_0x599912){return _0x4f73d7['VndAS'](_0x599912);},'FkjVg':_0x4f73d7[_0x2617da(0x2e3,0x334,0x35d,0x2f5)]},_0x48b2dd=_0x4f73d7[_0x54e584(0x460,0x46f,0x401,0x3e0)](_0x555072,this,function(){function _0x39c11e(_0x4bb1c8,_0x27635f,_0x4c10d1,_0x29d8a2){return _0x2617da(_0x27635f,_0x27635f-0x1c1,_0x4c10d1-0x175,_0x4c10d1-0x157);}function _0xeba3f7(_0x4b754b,_0x20d343,_0x3c496b,_0x371da5){return _0x2617da(_0x3c496b,_0x20d343-0xad,_0x3c496b-0x10,_0x20d343-0x24a);}if(_0x3b66ee[_0x39c11e(0x47f,0x3db,0x447,0x478)]('jUPAQ',_0x3b66ee['qeSoV']))_0x3b66ee[_0xeba3f7(0x57f,0x537,0x5a5,0x50b)](_0x34f250,_0xa2432b,_0x62eb60),_0x3b66ee[_0x39c11e(0x424,0x448,0x41d,0x3be)](_0x144b5f);else return _0x48b2dd[_0xeba3f7(0x4f7,0x53b,0x4e2,0x592)]()[_0xeba3f7(0x5bb,0x58c,0x5f7,0x570)](_0x3b66ee[_0xeba3f7(0x4d4,0x513,0x53c,0x534)])[_0x39c11e(0x40e,0x41d,0x448,0x4a5)]()['constructo'+'r'](_0x48b2dd)[_0x39c11e(0x476,0x4fc,0x499,0x49a)](_0x3b66ee[_0x39c11e(0x3dd,0x3ff,0x420,0x3e2)]);});_0x4f73d7[_0x54e584(0x3ef,0x46b,0x443,0x413)](_0x48b2dd);function _0x2617da(_0x5dc1ed,_0x2fb9c2,_0x259aec,_0x4bb092){return _0x249563(_0x5dc1ed-0x152,_0x2fb9c2-0x153,_0x4bb092- -0x1e3,_0x5dc1ed);}function _0x199fea(_0x4a7e13,_0x134344){let _0x5a44f9=_0x4a7e13['value'];function _0xb90f43(_0x1b25cf,_0x2a9600,_0x2dd20c,_0x1b0e90){return _0x54e584(_0x1b0e90,_0x2a9600-0xd5,_0x2dd20c- -0x2ea,_0x1b0e90-0x1a0);}function _0x190959(_0x3863d4,_0x26ff9b,_0x58639f,_0xa3aaf9){return _0x54e584(_0xa3aaf9,_0x26ff9b-0x12a,_0x3863d4- -0x2d7,_0xa3aaf9-0x160);}SugarCube[_0xb90f43(0xe9,0x9d,0xb6,0xa7)]['variables'][_0x190959(0xea,0x98,0x15b,0x154)][_0xb90f43(0x10d,0x162,0x158,0x1c1)][_0x134344]=_0x5a44f9;}let _0x28a3e1=document[_0x2617da(0x37a,0x314,0x373,0x302)+_0x2617da(0x377,0x384,0x2e5,0x330)](_0x4f73d7[_0x2617da(0x365,0x376,0x2d0,0x30c)]);for(let _0x431eb1=0x2*-0x160+0x498*-0x8+0x13c*0x20;_0x4f73d7[_0x54e584(0x465,0x3f3,0x413,0x463)](_0x431eb1,_0x28a3e1[_0x54e584(0x426,0x3ac,0x3da,0x3b4)]);_0x431eb1++){if(_0x4f73d7[_0x54e584(0x410,0x40f,0x422,0x488)](_0x4f73d7[_0x2617da(0x348,0x3e7,0x343,0x39b)],_0x4f73d7['mRWLl'])){let _0x3e56f8=_0x28a3e1[_0x431eb1][_0x2617da(0x2e0,0x2a6,0x2fa,0x302)+_0x54e584(0x3e8,0x484,0x448,0x40a)](_0x4f73d7[_0x54e584(0x486,0x407,0x437,0x483)]),_0x4c35e3=_0x28a3e1[_0x431eb1][_0x54e584(0x39b,0x3fd,0x3c9,0x433)+'tor'](_0x2617da(0x33a,0x344,0x329,0x387)+'ats');console['log'](_0x3e56f8,_0x4c35e3),_0x3e56f8[_0x54e584(0x49c,0x49c,0x45e,0x4c0)+_0x54e584(0x406,0x34d,0x395,0x341)](_0x4f73d7[_0x2617da(0x290,0x33d,0x32d,0x2d1)],function(_0x19493f){const _0x3a6f1a={'XFDlH':function(_0x1cecbe){return _0x1cecbe();}};function _0x52751b(_0x3eb1bb,_0x474b3e,_0x518ab2,_0x10ca71){return _0x2617da(_0x474b3e,_0x474b3e-0x175,_0x518ab2-0x80,_0x3eb1bb-0x236);}function _0x3df7a0(_0x1086f3,_0x1398d6,_0x1e37dc,_0x36ef98){return _0x54e584(_0x36ef98,_0x1398d6-0x17a,_0x1e37dc- -0x3b9,_0x36ef98-0x55);}_0x3b66ee[_0x52751b(0x5aa,0x5c0,0x5dd,0x60c)]!==_0x3b66ee[_0x52751b(0x546,0x5bd,0x5ab,0x4f2)]?_0x3b66ee['VBEvf'](_0x19493f[_0x3df7a0(-0x88,0x1d,-0x15,0x1a)],_0x3b66ee[_0x52751b(0x5c1,0x57c,0x5ec,0x5cf)])&&(_0x3b66ee[_0x3df7a0(-0x2a,0x3c,-0x5,-0x11)](_0x199fea,_0x3e56f8,_0x431eb1),_0x3b66ee['QdLgO'](_0x1209f0)):(_0x1fb66a(_0x64c11c),_0x3a6f1a[_0x3df7a0(0xb6,0x8f,0x7c,0x32)](_0x431caa));}),_0x4c35e3[_0x2617da(0x399,0x3a9,0x3c2,0x397)+_0x2617da(0x2ec,0x315,0x2fc,0x2ce)](_0x4f73d7[_0x54e584(0x47b,0x3fd,0x408,0x478)],function(){function _0x5cd12b(_0x3caf06,_0x1ef76f,_0x5034a0,_0x30b371){return _0x54e584(_0x5034a0,_0x1ef76f-0x1cd,_0x1ef76f-0x145,_0x30b371-0x17d);}function _0x141974(_0x324d35,_0x4c6022,_0x38e3b6,_0x5e69b3){return _0x54e584(_0x38e3b6,_0x4c6022-0x50,_0x5e69b3-0x132,_0x5e69b3-0x69);}_0x3b66ee[_0x5cd12b(0x508,0x4fc,0x4cf,0x562)](_0x3b66ee[_0x5cd12b(0x4c9,0x50d,0x55d,0x508)],_0x5cd12b(0x4e8,0x51b,0x4f0,0x552))?(_0x2265d5[_0x5cd12b(0x517,0x4e5,0x51d,0x490)][_0x141974(0x527,0x4a5,0x4c8,0x518)][_0x5cd12b(0x5bb,0x5b4,0x562,0x5c1)+'gs'][_0x5cd12b(0x57b,0x522,0x4aa,0x4bb)]=!_0x1c8540[_0x5cd12b(0x537,0x4e5,0x484,0x4cf)][_0x5cd12b(0x4fc,0x52b,0x4ca,0x574)][_0x5cd12b(0x554,0x5b4,0x5d9,0x5fb)+'gs']['c_mode'],_0x281346()):(_0x3b66ee['bQvZO'](_0x199fea,_0x3e56f8,_0x431eb1),_0x1209f0());});}else{let _0x12d783=_0x4f73d7['LphxC'](_0x8bb7ed,_0x5a3b36[_0x2617da(0x356,0x329,0x313,0x32a)]);_0x58e897[_0x54e584(0x3b6,0x32a,0x3a0,0x353)][_0x54e584(0x432,0x3d6,0x3e6,0x3a6)][_0x2617da(0x352,0x34f,0x3df,0x38f)][_0x2af4e7]=_0x12d783;}}}_0x4f73d7[_0x2cc78a(0x448,0x3ec,0x438,0x47f)](_0x5715a9),_0x4f73d7[_0x249563(0x552,0x515,0x552,0x5bc)](_0x52cc57);}}());function _0x3089(_0x3175c1,_0x308959){const _0x27040d=_0x3175();return _0x3089=function(_0x4db49f,_0x188166){_0x4db49f=_0x4db49f-(0xd8e+-0x5ab+-0x5ff);let _0x5e45fa=_0x27040d[_0x4db49f];return _0x5e45fa;},_0x3089(_0x3175c1,_0x308959);}function _0x3175(){const _0x41c309=['VBEvf','toString','jLPgz','Unfreeze\x20T','NaWkv','hmJQV','vwYdG','MKHVH','click','CemBW','cheatsV2','getAttribu','c_nextPart','eQBjY','UWikn','GFRPS','yoAed','FkjVg','querySelec','tNMou','bBZXB','DQGoq','vHGFg','EuPjV','mTJYp','fXhUy','time','fiFio','rTfVR','keypress','64BEybSz','LFoJW','zUgQX','ctive\x20>\x20di','BxdKz','length','sTPeJ','scenes','c_mode','eJNMq','QAqtm','jZrLR','dpMvs','Erfkg','vWarG','nhaKf','OYWSP','variables','HIeCf','max','hkKcU','hhSBu','EgOTD','DaGut','PhpUz','mZFmp','5182200MHGpUE','list','value','unlocked','dmvUV','25fa8d7155','YNvRU','LfliD','torAll','HWVTo','r\x20>\x20input','DYste','eFlex','dDEva','SPCKR','UJGBb','OfDayEnabl','GOeII','syyOI','YLUuk','XCDuC','qaxPT','b50e750001','Oglxf','trcTd','ccDWx','search','bRPfO','hHsqm','eHwMy','wBZjX','JRLMt','.cheatboxc','ZQKrQ','ZkOwS','RnYZN','qhdwS','data-type','pDxJM','jZluC','QuwXA','r\x20>\x20.butto','pTPCX','ctive\x20.lab','elcheatsWo','cjYSX','ntainer','PBYts','ELFIE\x20SCEN','OeZni','LUhtm','XGGDm','AoScy','GROUP\x20SCEN','DCVVd','.codeconta','unabbrevia','Enter','72a8a850a9','girl_stat','88629dHttjI','iicNI','zmAxb','kmfdI','145398NyuSFP','Turn\x20Off','myzNM','GRYnT','POWIv','inventory','XFDlH','NmNcj','fHcsl','SAKiP','RmACK','ats','xYvFZ','carp','wCegL','oBDjg','Vdrzo','wood','\x20.cheatbox','savedCodes','VWMqW','textConten','KLakV','fWgVT','input','tor','QAOjw','ncheats','tJTCN','37854108mHIAaP','qyotn','.buttonche','wrsOe','odes','duWry','AglVD','ll\x20scenes','data-type3','NES','stats','qrtmx','VndAS','xAinN','v\x20>\x20div.co','7cad520fbb','pFdlH','fCENH','addEventLi','vJZMB','5969061ZqJeqv','fXyBn','ryegc','Engine','BYxzQ','atboxActiv','jFvkc','1094780ZIzNPV','YjsPD','foYfp','VnGpY','uMlWH','ctive\x20.che','min','VhpZc','gameSettin','PnRUP','XVLjd','loot','\x20>\x20.codeco','apply','Bcono','iRPbL','cZDJQ','AYisc','XtSXs','074959849b','9ad49247fd','ePfqp','KqfhO','unlocked\x20a','XguMB','HvwFv','lzyva','BCAve','1039704gKUVZP','ceVPv','stener','ontainer\x20>','hoGdX','kwbPw','LSVYM','Turn\x20On','log','ZGBsd','men','juqwe','zNOyr','State','ZwGgp','play','MAX_VALUE','key','characters','stat','lQAul','Freeze\x20Tim','3RAuiWt','iner\x20>\x20div','qty','2aeafecb70','ime','iFNBT','undefined','QaNLE','jQCCv','.cheatboxA','cuNdc','bQvZO','utFqI','keHLp'];_0x3175=function(){return _0x41c309;};return _0x3175();} </script>\ \ \ <!-- STYLE - 1 - Settings -->\ <style> .settings_main { display: flex; flex-direction: column; margin-top: 14%; } .settings_A_top { display: flex; flex-direction: row; justify-content: center; align-content: center; align-items: center; width: 100%; height: 22vh; color: white; font-family: "Teko"; } .settings_A_mid { display: flex; flex-direction: row; justify-content: center; width: 70vh; max-width: 70%; height: 5%; user-select: none; font-family: "Teko"; margin-left: auto; margin-right: auto; } .settings_A_bot { display: flex; flex-direction: row; justify-content: center; width: 95vh; max-width: 90%; height: 80%; color: white; position: relative; user-select: none; font-family: "Teko"; margin-left: auto; margin-right: auto; } .settings_B_top_left { width: 15%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; user-select: none; } .settings_B_top_mid { width: 38vh; height: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 9vh; padding-top: 1.5vh; border: solid 0.75vh var(--MenuS_color_5_0); border-radius: 3vh; user-select: none; border: 3px solid var(--MenuS_color_5_0); text-shadow: 0px 0px 8px var(--MenuS_color_5_1), 0px 0px 16px var(--MenuS_color_5_1), 0px 0px 24px var(--MenuS_color_5_1); /* For centering text */ box-shadow: inset 0 0 0.5vw var(--MenuS_color_5_1), 0 0 0.5vw var(--MenuS_color_5_1), 0 0 1vw var(--MenuS_color_5_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .settings_B_top_right { width: 15%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .settings_B_mid { width: 15%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 2vh; line-height: 1em; } .settings_B_bot { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: absolute; border-radius: 6vh; border: solid 0.75vh var(--MenuS_color_5_0); background-color: rgba(0, 7, 26, 0.281); border: 3px solid var(--MenuS_color_5_0); box-shadow: inset 0 0 0.5vw var(--MenuS_color_5_1), 0 0 0.5vw var(--MenuS_color_5_1), 0 0 1vw var(--MenuS_color_5_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .settings_C_audio { width: 80%; height: 30%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; text-align: center; border-top: solid 0.5vh var(--MenuS_color_5_0); } .settings_C_jauge { width: 80%; height: 30%; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; } .settings_D_categories { width: 95%; height: 100%; display: flex; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-size: 2.5vh; border-radius: 2vh 2vh 0 0; background-color: rgb(212, 209, 209); color: rgb(8, 8, 8); padding-top: 0.5vh; transform: translateY(0.6vh); transition: all 0.1s ease-in-out; } .settings_D_categories:hover { background-color: gray; color: white; cursor: pointer; transform: translateY(0); } .settings_C_settingsbutton { height: 20vh; width: 20vh; border: solid 1vh var(--MenuS_color_5_0); border-radius: 50%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; border: 3px solid var(--MenuS_color_5_0); text-shadow: 0px 0px 8px var(--MenuS_color_5_1), 0px 0px 16px var(--MenuS_color_5_1), 0px 0px 24px var(--MenuS_color_5_1); /* For centering text */ box-shadow: inset 0 0 0.5vw var(--MenuS_color_5_1), 0 0 0.5vw var(--MenuS_color_5_1), 0 0 1vw var(--MenuS_color_5_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .settings_C_settingsbutton img { height: 15vh; width: 15vh; position: relative; left: 0.2vh; } .settings_C_backbutton { height: 6.5vh; width: 22vh; border: solid 1vh var(--MenuS_color_5_0); border-radius: 2vh; font-size: 4vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; text-align: center; padding-top: 0.5vh; cursor: pointer; background-color: #3c3c3c; border: 3px solid var(--MenuS_color_5_0); text-shadow: 0px 0px 8px var(--MenuS_color_5_1), 0px 0px 16px var(--MenuS_color_5_1), 0px 0px 24px var(--MenuS_color_5_1); /* For centering text */ box-shadow: inset 0 0 0.5vw var(--MenuS_color_5_1), 0 0 0.5vw var(--MenuS_color_5_1), 0 0 1vw var(--MenuS_color_5_1); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .settings_C_backbutton:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--MenuS_color_5_1), 0 0 1vw var(--MenuS_color_5_1), 0 0 1.5vw var(--MenuS_color_5_1), 0 0 2vw var(--MenuS_color_5_1); text-shadow: 0 0 1vw var(--MenuS_color_5_1), 0 0 1.5vw var(--MenuS_color_5_1), 0 0 2vw var(--MenuS_color_5_1); transition: all ease 0.3s; } .settings_B_bot2 { width: 100%; height: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .settings_D_music_txt { width: 70%; height: 100%; text-align: left; font-size: 4vh; padding-left: 1vh; margin-bottom: 2vh; } .settings_D_music_txt>mini { font-size: 0.6em; } .settings_D_music_txt>img { height: 70% } .settings_D_music_button { width: 4.5vh; height: 4vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: solid 0.75vh var(--MenuS_color_5_0); margin-right: 1vh; border-radius: 1.5vh; background-color: #3c3c3c; font-size: 2.5vh; padding-top: 0.5vh; cursor: pointer; transition: all 0.1s ease-in-out; } .settings_D_music_button:hover { transform: translate(0.25vh, -0.25vh); box-shadow: -0.1vh 0.1vh 0.5vh rgba(255, 255, 255, 0.5); } .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; appearance: none; width: 80%; height: 1vh; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: 0.2s; transition: opacity 0.2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.5vh; height: 5vh; background-color: var(--MenuS_color_5_0); cursor: pointer; } .slider.inactive::-webkit-slider-thumb { background-color: rgb(58, 58, 58); cursor: default; } .slider::-moz-range-thumb { width: 1.5vh; height: 5vh; background-color: var(--MenuS_color_5_0); cursor: pointer; } .slider.inactive::-moz-range-thumb { background-color: rgb(58, 58, 58); cursor: default; } .slider.inactive:hover { opacity: 0.7; } .settings_srl_buttons { height: 8vh; width: 20vh; border: solid 1vh var(--MenuS_color_5_0); border-radius: 2vh; background-color: #3c3c3c; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; text-align: center; padding-top: 0.5vh; cursor: pointer; margin: 3vh; transition: box-shadow, transform; transition-duration: 0.2s; transition-timing-function: ease-in-out; } .settings_srl_buttons:hover { transform: translate(0.25vh, -0.25vh); box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5); } .settings_B_bot2.save { display: flex; flex-direction: row; justify-content: center; font-size: 3.5vh; } .inactive { background-color: rgba(255, 255, 255, 0.5); } .settings_aboutUs_C1 { height: 40%; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; position: relative; top: -1.5vh; } .settings_aboutUs_C2 { height: 15%; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; font-size: 3vh; position: relative; } .settings_aboutUs_C1>fapoimage { height: 100%; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border: solid 0.5vh var(--MenuS_color_5_0); border-radius: 2vh; margin-bottom: 2vh; } .settings_aboutUs_C1>fapoimage>img { height: 100%; aspect-ratio: 1/1; border-radius: 2vh; } .aboutUs { display: flex; flex-direction: column; justify-content: center; font-size: 3.5vh; } .settings_aboutUs_C3 { height: 15%; width: 9%; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; position: absolute; margin: 1vh; transition: box-shadow, transform; transition-duration: 0.2s; transition-timing-function: ease-in-out; border-radius: 50%; } .settings_aboutUs_C4 { height: 100%; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; text-align: left; font-size: 2.3vh; padding-left: 1vh; padding-top: 0.5vh; position: relative; top: -7vh; } .settings_aboutUs_C4>p { width: 27%; margin: 2vh; } .settings_aboutUs_C3>reseaux { height: 100%; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; text-align: center; position: absolute; } .settings_aboutUs_C3>reseaux>img { height: 100%; aspect-ratio: 1/1; border-radius: 50%; cursor: pointer; } .settings_aboutUs_C3:hover { transform: translate(0.25vh, -0.25vh); box-shadow: -0.3vh 0.3vh 0.7vh rgba(255, 255, 255, 0.5); } .patreon { left: 5vh; top: 5vh; } .kofi { left: 20vh; top: 5vh; } .discord { right: 5vh; top: 5vh; } .f95 { right: 20vh; top: 5vh; } .meet_team { font-size: 2.05vh; } .download-button { height: 8vh; width: 20vh; border: solid 1vh var(--MenuS_color_5_0); border-radius: 2vh; background-color: #3c3c3c; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; text-align: center; padding-top: 0.5vh; cursor: pointer; margin: 3vh; position: absolute; color: white; line-height: 1em; font-size: 3vh; left: 3.5vh; bottom: 2vh; text-decoration: none; transition: box-shadow, transform; transition-duration: 0.2s; transition-timing-function: ease-in-out; } .download-button:hover { transform: translate(0.25vh, -0.25vh); box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5); } </style>\ <!-- SCRIPT - 1 - Settings -->\ <script> function initAudioPage() { var sliders = document.querySelectorAll("[audioSlider]"); function gaugeOnOff(type, onOffButton) { var sliderParent = document.querySelector(`[audioSlider="${type}"]`); if (!sliderParent) { return } var slider = sliderParent.querySelector(".slider"); if (!slider) { return } if (slider.disabled == true) { // if slider is active slider.classList.remove("inactive"); slider.disabled = false; //SugarCube.State.variables.gameSettings.volume[type] = slider.value / 100; setVolumeByUser(type, slider.value / 100); onOffButton.classList.remove("inactive"); onOffButton.innerHTML = "ON"; } else { slider.classList.add("inactive"); slider.disabled = true; //SugarCube.State.variables.gameSettings.volume[type] = 0; setVolumeByUser(type, 0); onOffButton.classList.add("inactive"); onOffButton.innerHTML = "OFF"; } } function playSliderAudio(type) { switch (type) { case "music": //stopAudio(type); //playAudio(type, "ressources/sounds/13G1.webm", {loop: false}) break; case "voice": stopAudio(type); playAudio(type, "13G2.mp3", { loop: false }) break; case "sfx": stopAudio(type); playAudio(type, "13G1.webm", { loop: false }) break; } } /*function sliderToVolume(value) { return Math.pow(value, 3); } function volumeToSlider(value) { return Math.pow(value, 1/3); }*/ for (let i = 0; i < sliders.length; i++) { let type = sliders[i].getAttribute("audioSlider"); let onOffButton = sliders[i].querySelector(".settings_D_music_button"); onOffButton.onclick = function () { gaugeOnOff(type, onOffButton); }; let slider = sliders[i].querySelector(".slider"); slider.value = SugarCube.State.variables.audio.volume[type] * 100; slider.oninput = function () { setVolumeByUser(type, this.value / 100); playSliderAudio(type); }; } } initAudioPage(); function addCategoriesOnClick(element) { var categories = document.getElementsByClassName("settings_D_categories"); for (var i = 0; i < categories.length; i++) { let type = categories[i].getAttribute("category"); let Wip_cat = ["video", "story"] categories[i].onclick = function () { if (Wip_cat.includes(type)) { appendWipWarning(); return; } for (var j = 0; j < categories.length; j++) { categories[j].classList.remove("active"); } this.classList.add("active"); changePanel(type); }; } } addCategoriesOnClick(); function changePanel(type) { var panels = document.querySelectorAll(".settings_B_bot"); var panel = document.querySelector( `.settings_B_bot[settingtype="${type}"]` ); for (var i = 0; i < panels.length; i++) { panels[i].style.visibility = "hidden"; } panel.style.visibility = "visible"; } changePanel("audio"); // default panel </script>\
<<nobr>> <div class="scenes_upper_div"> <div id="woman_and_scenes_button_scenes"> <img src="ressources/icons/13DA1.webp"> </div> <div class="parent_upper_mid"> <div class="scenes_character_image"> <img character="mc"> <div class="shadow"></div> </div> <div class="parent_counter"> <div class="total_scenes_counter"> <p counterScene="all">0/0</p> <img src="ressources/icons/13C16.webp"> </div> <div class="scenes_counter"> <div class="scenes_counter_type"> <p counterScene="beginning">0/0</p> <img src="ressources/maingui/sexuals/beginning.webp"> </div> <div class="scenes_counter_type"> <p counterScene="tease">0/0</p> <img src="ressources/maingui/sexuals/tease.webp"> </div> <div class="scenes_counter_type"> <p counterScene="handjob">0/0</p> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="titsjob">0/0</p> <img src="ressources/maingui/sexuals/boobjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="blowjob">0/0</p> <img src="ressources/maingui/sexuals/blowjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="vaginal">0/0</p> <img src="ressources/maingui/sexuals/vaginal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="anal">0/0</p> <img src="ressources/maingui/sexuals/anal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="extreme">0/0</p> <img src="ressources/maingui/sexuals/extreme.webp"> </div> </div> </div> </div> <div class="parent_upper_right"> <div onclick="SugarCube.Engine.play('MENU main interface')" id="scenes_goback_button"> Back </div> </div> </div> <div class="cheats_parent_bottom"> <div class="get_cheats_here"> <div class="get_cheats_here_txt"> To unlock content instantly get the Tier 3 Cheat </div> <!-- div onclick="SugarCube.Engine.play('Cheats')" class="get_cheats_here_button" --> <div onclick="accessAngela_cheats()" class="get_cheats_here_button"> GET CHEAT </div> </div> <div class="scenes_holy_div"> <div class="scenes_arrow_left"></div> <div class="scenes_template_container"> <!--div class="scenes_icons scenes_icon_unseen"> <img src="image_fapo/pngimg.com - face_PNG5646.webp"> <div class="shadow_1"></div> <div class="mech_icons"> <img src="image_fapo/ass.webp"> </div--> </div> <div class="scenes_arrow_right"></div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; position: relative; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-family: 'Teko', sans-serif; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-weight: bold; } .scenes_upper_div { height: 32vh; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: center; } #woman_and_scenes_button_scenes{ height: 20vh; aspect-ratio: 1/1; border: solid 1vh ; border-radius: 125vh; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin-left: 5vh; border-color: rgb(73, 0, 0); position: relative; left : 7vh; } #woman_and_scenes_button_scenes img{ height: 65%; width: auto; display: flex; } .parent_upper_mid{ height: 32vh; width: 90vh; position: relative; display: flex; justify-content: space-between; } .scenes_character_image{ height: 23vh; aspect-ratio: 1/1; border: solid 1vh var(--theme-color); border-radius: 10%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; top: 7.5vh; left: 4.2vh; } .scenes_character_image img{ height: 100%; border-radius: 10%; position: relative; top: 11.5vh; } .shadow{ height: 100%; width: 100%; border-radius: 7%; box-shadow: inset 0 0 3vh 2vh #000000; z-index: 1; position: relative; top: -11.5vh; } .parent_upper_right { height: 30vh; width: 27vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; align-items: center; margin-right: 5vh; position: relative; } #scenes_goback_button{ height: 25%; width: 22vh; padding-top: 0.5vh; right: 4vh; position:relative; top: -1vh; border-radius: 2vh; font-size: 5vh; border:solid 0.7vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; background-color: #3c3c3c; } #scenes_goback_button:hover{ transform: translate(0.25vh, -0.25vh); box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5); } .scenes_fight_button { height: 16vh; width: 20vh; border: solid 0.75vh; border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 3.5vh; cursor: pointer; padding-top: 0.5vw; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: 2vh; } .scenes_fight_button:hover{ background-color: rgba(44, 43, 43, 0.5); border: solid 0.75vh rgb(164, 163, 162); } .scenes_fight_button img{ height: 10vh; width: auto; display: flex; margin-bottom: 1vh; } .scenes_fight_button p{ width: 15vh; margin: 0; } .parent_counter{ height: 32vh; width: 45vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; } .total_scenes_counter{ background-color: rgb(17, 17, 17); height: 8vh; width: 18vh; border-radius: 1.5vh; border: solid 0.75vh var(--theme-color); z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 4vh; position: relative; top: 5vh; } .total_scenes_counter img{ height: 50%; width: auto; display: flex; margin-left: 1vh; padding-bottom: 0.5vh; } .total_scenes_counter p { margin-top: 4.6vh; } .scenes_counter{ height: 20vh; width: 45vh; align-content: flex-end; justify-content: center; border-radius: 2.5vh; border: solid 0.75vh var(--theme-color); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .scenes_counter_type{ height: 40%; width: 23%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; font-size: 2.5vh; position: relative; top: -1vh; } .scenes_counter_type p{ padding-top: 0.4vh; } .scenes_counter_type img{ height: 45%; width: auto; margin-right: 1vh; display: flex; margin-left: 1vh; } .scenes_holy_div{ height: 70vh; width: 120vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .scenes_arrow_left{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid var(--theme-color); position: relative; right: 1vh; bottom: 0.75vh } .scenes_arrow_left:hover{ transform: translatey(0.375vh); border-color: transparent rgba(255, 255, 255, 0.509) transparent transparent; } .scenes_arrow_right{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid var(--theme-color); position: relative; left: 1vh; bottom: 0.75vh } .scenes_arrow_right:hover{ transform: translatey(0.375vh); border-color: transparent transparent transparent rgba(255, 255, 255, 0.509); } .scenes_template_container{ height: 70vh; width: 93vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scenes_icons{ height: 25vh; width: 25vh; border: solid 0.75vh var(--theme-color); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; } .scenes_icons:hover{ transform: translate(0.25vh, -0.25vh); box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5); } .scenes_icons img{ height: 100%; width: 100%; object-fit: contain; border-radius: 3vh; } .mech_icons{ height: 6vh; width: auto; position: absolute; bottom: 16vh; right: 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; } .shadow_1{ height: 100%; width: 100%; border-radius: 2.5vh; box-shadow: inset 0 0 3vh 2vh #000000; position: absolute; z-index: 4; } .scenes_icon_unseen{ height: 25vh; width: 25vh; border: solid 0.75vh rgb(60, 59, 59); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; box-sizing: border-box; } .scenes_icon_unseen img{ height: 100%; width: 100%; object-fit: contain; opacity: 0.5; filter: blur(0.4vh); -webkit-filter: blur(0.75vh); } .lock_icon{ height: 100%; width: 100%; position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; bottom: 0vh; } .lock_icon img{ height: 100%; object-fit: contain; opacity: 1; filter: blur(0px); } .cheats_parent_bottom { height: 70vh; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; } .get_cheats_here { height: 15vh; width: 15vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: absolute; top: 26vh; left: 8vh; border: solid 0.75vh var(--theme-color); border-radius: 3vh; } .get_cheats_here_txt { height: 10vh; width: 15vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 1.6vh; text-align: center; position: relative; top: -1vh; } .get_cheats_here_button { background-color: #3c3c3c; height: 3vh; width: 8vh; border: solid 0.5vh var(--theme-color); border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 1.7vh; cursor: pointer; padding-top: 0.3vh; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: -1vh; } .get_cheats_here_button:hover { transform: translate(0.2vh, -0.2vh); box-shadow: -0.25vh 0.25vh 0.5vh rgba(255, 255, 255, 0.5); } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { var themeCharacterName = "mc"; // which character for Bordercolor var categoryKey = "solo"; // which character for scenes // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[themeCharacterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[themeCharacterName].bordercolor); } else { //console.warn(`Character "${themeCharacterName}" is not defined in the characters object.`); } var scenes_template_container = document.querySelector('.scenes_template_container'); var illustration = { beginning: "ressources/maingui/sexuals/beginning.webp", tease: "ressources/maingui/sexuals/tease.webp", handjob: "ressources/maingui/sexuals/handjob.webp", titsjob: "ressources/maingui/sexuals/boobjob.webp", blowjob: "ressources/maingui/sexuals/blowjob.webp", vaginal : "ressources/maingui/sexuals/vaginal.webp", anal : "ressources/maingui/sexuals/anal.webp", extreme : "ressources/maingui/sexuals/extreme.webp", } function createelement(scene, type) { let divScenes_icons = document.createElement("div"); if (scene.seen === true || scene.unlocked === true) { divScenes_icons.classList.add("scenes_icons"); divScenes_icons.setAttribute('data-sceneP', scene.passageName); divScenes_icons.onclick = function() { //SugarCube.Engine.play(scene.passageName); explorePassage(scene); }; let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="mech_icons">' + '<img src="'+illustration[type]+'">'; divScenes_icons.innerHTML = inner; } else { divScenes_icons.classList.add("scenes_icon_unseen"); let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="lock_icon">' + '<img src="ressources/icons/13DB4.webp">'; divScenes_icons.innerHTML = inner; } return divScenes_icons; } var counter = { all: [0, 0], // seen/total beginning: [0, 0], tease: [0, 0], handjob: [0, 0], titsjob: [0, 0], blowjob: [0, 0], vaginal: [0, 0], anal: [0, 0], extreme: [0, 0], }; // Function to count scenes function countScenes2(scene, type) { if (counter[type]) { counter.all[1] += 1; counter[type][1] += 1; if (scene.seen === true || scene.unlocked === true) { counter.all[0] += 1; counter[type][0] += 1; } } } console.log("allo") function seen_scene(scene, type) { let constructedTemplate = createelement(scene, type); //scenes_template_container.innerHTML += constructedTemplate; scenes_template_container.appendChild(constructedTemplate) } /*var characterName = "solo"; // which caharcter for scenes if (SugarCube.State.variables.scenes.list[characterName]) { // Check if character scenes exist for (let type in SugarCube.State.variables.scenes.list[characterName]) { for (let scene in SugarCube.State.variables.scenes.list[characterName][type]) { var sceneObject = SugarCube.State.variables.scenes.list[characterName][type][scene] seen_scene(sceneObject, type); countScenes2(sceneObject, type); } } }*/ for (let scene in SugarCube.State.variables.scenes.list) { let sceneObject = SugarCube.State.variables.scenes.list[scene]; let type = sceneObject.stage; if (sceneObject.category != categoryKey) { continue; } seen_scene(sceneObject, type); countScenes2(sceneObject, type); } // Update the UI with the counter values var counterElements = document.querySelectorAll("[counterScene]"); for (let element of counterElements) { let type = element.getAttribute("counterScene"); if (counter[type]) { // Check if the type exists in the counter element.innerHTML = `${counter[type][0]}/${counter[type][1]}`; } else { console.warn(`Counter element type "${type}" is not defined in the counter.`); } } //scenes_template_container.innerHTML = "" //'+SugarCube.State.variables.characters[obj.name].image[SugarCube.State.variables.characters[obj.name].image_set]+' //scenes_template_container.innerHTML = "" //scenes_template_container.innerHTML += create_template({ // name : "cherie", //}); //scenes_template_container.innerHTML += create_template({ // name : "cherie", //}); var scrollableElement = document.querySelector('.scenes_template_container'); var leftArrow = document.querySelector('.scenes_arrow_left'); var rightArrow = document.querySelector('.scenes_arrow_right'); //var mainelement = document.querySelector('.scenes_icons') var mainelement = document.querySelector('.scenes_template_container>div') var scrollStep; function calculatedwidth(){ var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; console.log(width); var borderRightWidth = computedStyle.borderRightWidth; var borderLeftWidth = computedStyle.borderLeftWidth; var marginLeft = computedStyle.marginLeft; var marginRight = computedStyle.marginRight; var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); var borderRightWidthInt = parseInt(borderRightWidth, 10); var borderLeftWidthInt = parseInt(borderLeftWidth, 10); scrollStep = (widthInt + marginLeftInt + marginRightInt)*3.025; } function fadeOut(i) { var errorMargin = scrollableElement.scrollWidth * 0.05; var canScrollLeft = (i < 0); var canScrollRight = (i > 0); if (canScrollLeft || canScrollRight) { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); } else { return; } } leftArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(1); }); } </script>\
<<nobr>> <div class="scenes_upper_div"> <div id="woman_and_scenes_button_scenes"> <img src="ressources/icons/13DA1.webp"> </div> <div class="parent_upper_mid"> <div class="scenes_character_image"> <img src="ressources/icons/13A3.webp"> <div class="shadow"></div> </div> <div class="parent_counter"> <div class="total_scenes_counter"> <p counterScene="all">0/0</p> <img src="ressources/icons/13C16.webp"> </div> <div class="scenes_counter"> <div class="scenes_counter_type"> <p counterScene="beginning">0/0</p> <img src="ressources/maingui/sexuals/beginning.webp"> </div> <div class="scenes_counter_type"> <p counterScene="tease">0/0</p> <img src="ressources/maingui/sexuals/tease.webp"> </div> <div class="scenes_counter_type"> <p counterScene="handjob">0/0</p> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="titsjob">0/0</p> <img src="ressources/maingui/sexuals/boobjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="blowjob">0/0</p> <img src="ressources/maingui/sexuals/blowjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="vaginal">0/0</p> <img src="ressources/maingui/sexuals/vaginal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="anal">0/0</p> <img src="ressources/maingui/sexuals/anal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="extreme">0/0</p> <img src="ressources/maingui/sexuals/extreme.webp"> </div> </div> </div> </div> <div class="parent_upper_right"> <div onclick="SugarCube.Engine.play('MENU main interface')" id="scenes_goback_button"> Back </div> </div> </div> <div class="cheats_parent_bottom"> <div class="get_cheats_here"> <div class="get_cheats_here_txt"> To unlock content instantly get the Tier 3 Cheat </div> <!-- div onclick="SugarCube.Engine.play('Cheats')" class="get_cheats_here_button" --> <div onclick="accessAngela_cheats()" class="get_cheats_here_button"> GET CHEAT </div> </div> <div class="scenes_holy_div"> <div class="scenes_arrow_left"></div> <div class="scenes_template_container"> <!--div class="scenes_icons scenes_icon_unseen"> <img src="image_fapo/pngimg.com - face_PNG5646.webp"> <div class="shadow_1"></div> <div class="mech_icons"> <img src="image_fapo/ass.webp"> </div--> </div> <div class="scenes_arrow_right"></div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; position: relative; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-weight: bold; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Teko', sans-serif; } .scenes_upper_div { height: 32vh; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: center; } #woman_and_scenes_button_scenes{ height: 20vh; aspect-ratio: 1/1; border: solid 1vh ; border-radius: 125vh; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin-left: 5vh; border-color: rgb(73, 0, 0); position: relative; left : 7vh; } #woman_and_scenes_button_scenes img{ height: 65%; width: auto; display: flex; } .parent_upper_mid{ height: 32vh; width: 90vh; position: relative; display: flex; justify-content: space-between; } .scenes_character_image{ height: 23vh; aspect-ratio: 1/1; border: solid 1vh var(--theme-color); border-radius: 10%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; top: 7.5vh; left: 4.2vh; } .scenes_character_image img{ height: 90%; border-radius: 10%; position: relative; top: 11.5vh; } .shadow{ height: 100%; width: 100%; border-radius: 7%; box-shadow: inset 0 0 3vh 2vh #000000; z-index: 1; position: relative; top: -10.2vh; } .parent_upper_right { height: 30vh; width: 27vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; align-items: center; margin-right: 5vh; position: relative; } #scenes_goback_button{ height: 25%; width: 22vh; padding-top: 0.5vh; right: 4vh; position:relative; top: -1vh; border-radius: 2vh; font-size: 5vh; border:solid 0.7vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; background-color: #3c3c3c; } #scenes_goback_button:hover{ transform: translate(0.25vh, -0.25vh); box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5); } .scenes_fight_button { height: 16vh; width: 20vh; border: solid 0.75vh; border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 3.5vh; cursor: pointer; padding-top: 0.5vw; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: 2vh; } .scenes_fight_button:hover{ background-color: rgba(44, 43, 43, 0.5); border: solid 0.75vh rgb(164, 163, 162); } .scenes_fight_button img{ height: 10vh; width: auto; display: flex; margin-bottom: 1vh; } .scenes_fight_button p{ width: 15vh; margin: 0; } .parent_counter{ height: 32vh; width: 45vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; } .total_scenes_counter{ background-color: rgb(17, 17, 17); height: 8vh; width: 18vh; border-radius: 1.5vh; border: solid 0.75vh var(--theme-color); z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 4vh; position: relative; top: 5vh; } .total_scenes_counter img{ height: 50%; width: auto; display: flex; margin-left: 1vh; padding-bottom: 0.5vh; } .total_scenes_counter p { margin-top: 4.6vh; } .scenes_counter{ height: 20vh; width: 45vh; align-content: flex-end; justify-content: center; border-radius: 2.5vh; border: solid 0.75vh var(--theme-color); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .scenes_counter_type{ height: 40%; width: 23%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; font-size: 2.5vh; position: relative; top: -1vh; } .scenes_counter_type p{ padding-top: 0.4vh; } .scenes_counter_type img{ height: 45%; width: auto; margin-right: 1vh; display: flex; margin-left: 1vh; } .scenes_holy_div{ height: 70vh; width: 120vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .scenes_arrow_left{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid var(--theme-color); position: relative; right: 1vh; bottom: 0.75vh } .scenes_arrow_left:hover{ transform: translatey(0.375vh); border-color: transparent rgba(255, 255, 255, 0.509) transparent transparent; } .scenes_arrow_right{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid var(--theme-color); position: relative; left: 1vh; bottom: 0.75vh } .scenes_arrow_right:hover{ transform: translatey(0.375vh); border-color: transparent transparent transparent rgba(255, 255, 255, 0.509); } .scenes_template_container{ height: 70vh; width: 93vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scenes_icons{ height: 25vh; width: 25vh; border: solid 0.75vh var(--theme-color); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; } .scenes_icons:hover{ transform: translate(0.25vh, -0.25vh); box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5); } .scenes_icons img{ height: 100%; width: 100%; object-fit: contain; border-radius: 3vh; } .mech_icons{ height: 6vh; width: auto; position: absolute; bottom: 16vh; right: 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; } .shadow_1{ height: 100%; width: 100%; border-radius: 2.5vh; box-shadow: inset 0 0 3vh 2vh #000000; position: absolute; z-index: 4; } .scenes_icon_unseen{ height: 25vh; width: 25vh; border: solid 0.75vh rgb(60, 59, 59); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; box-sizing: border-box; } .scenes_icon_unseen img{ height: 100%; width: 100%; object-fit: contain; opacity: 0.5; filter: blur(0.4vh); -webkit-filter: blur(0.75vh); } .lock_icon{ height: 100%; width: 100%; position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; bottom: 0vh; } .lock_icon img{ height: 100%; object-fit: contain; opacity: 1; filter: blur(0px); } .cheats_parent_bottom { height: 70vh; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; } .get_cheats_here { height: 15vh; width: 15vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: absolute; top: 26vh; left: 8vh; border: solid 0.75vh var(--theme-color); border-radius: 3vh; } .get_cheats_here_txt { height: 10vh; width: 15vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 1.6vh; text-align: center; position: relative; top: -1vh; } .get_cheats_here_button { background-color: #3c3c3c; height: 3vh; width: 8vh; border: solid 0.5vh var(--theme-color); border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 1.7vh; cursor: pointer; padding-top: 0.3vh; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: -1vh; } .get_cheats_here_button:hover { transform: translate(0.2vh, -0.2vh); box-shadow: -0.25vh 0.25vh 0.5vh rgba(255, 255, 255, 0.5); } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { /*var characterName = "mc"; // which character for Bordercolor // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[characterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[characterName].bordercolor); } else { console.warn(`Character "${characterName}" is not defined in the characters object.`); }*/ var themeCharacterName = "mc"; // which character for Bordercolor var categoryKey = "mc"; // which character for scenes // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[themeCharacterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[themeCharacterName].bordercolor); } else { //console.warn(`Character "${themeCharacterName}" is not defined in the characters object.`); } var scenes_template_container = document.querySelector('.scenes_template_container'); var illustration = { beginning: "ressources/maingui/sexuals/beginning.webp", tease: "ressources/maingui/sexuals/tease.webp", handjob: "ressources/maingui/sexuals/handjob.webp", titsjob: "ressources/maingui/sexuals/boobjob.webp", blowjob: "ressources/maingui/sexuals/blowjob.webp", vaginal : "ressources/maingui/sexuals/vaginal.webp", anal : "ressources/maingui/sexuals/anal.webp", extreme : "ressources/maingui/sexuals/extreme.webp", } function createelement(scene, type) { let divScenes_icons = document.createElement("div"); if (scene.seen === true || scene.unlocked === true) { divScenes_icons.classList.add("scenes_icons"); divScenes_icons.setAttribute('data-sceneP', scene.passageName); divScenes_icons.onclick = function() { //SugarCube.Engine.play(scene.passageName); explorePassage(scene); }; let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="mech_icons">' + '<img src="'+illustration[type]+'">'; divScenes_icons.innerHTML = inner; } else { divScenes_icons.classList.add("scenes_icon_unseen"); let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="lock_icon">' + '<img src="ressources/icons/13DB4.webp">'; divScenes_icons.innerHTML = inner; } return divScenes_icons; } var counter = { all: [0, 0], // seen/total beginning: [0, 0], tease: [0, 0], handjob: [0, 0], titsjob: [0, 0], blowjob: [0, 0], vaginal: [0, 0], anal: [0, 0], extreme: [0, 0], }; // Function to count scenes function countScenes2(scene, type) { if (counter[type]) { counter.all[1] += 1; counter[type][1] += 1; if (scene.seen === true || scene.unlocked === true) { counter.all[0] += 1; counter[type][0] += 1; } } } console.log("allo") function seen_scene(scene, type) { let constructedTemplate = createelement(scene, type); //scenes_template_container.innerHTML += constructedTemplate; scenes_template_container.appendChild(constructedTemplate) } /*var characterName = "solo"; // which caharcter for scenes if (SugarCube.State.variables.scenes.list[characterName]) { // Check if character scenes exist for (let type in SugarCube.State.variables.scenes.list[characterName]) { for (let scene in SugarCube.State.variables.scenes.list[characterName][type]) { var sceneObject = SugarCube.State.variables.scenes.list[characterName][type][scene] seen_scene(sceneObject, type); countScenes2(sceneObject, type); } } }*/ for (let scene in SugarCube.State.variables.scenes.list) { let sceneObject = SugarCube.State.variables.scenes.list[scene]; let type = sceneObject.stage; if (sceneObject.category != categoryKey) { continue; } seen_scene(sceneObject, type); countScenes2(sceneObject, type); } // Update the UI with the counter values var counterElements = document.querySelectorAll("[counterScene]"); for (let element of counterElements) { let type = element.getAttribute("counterScene"); if (counter[type]) { // Check if the type exists in the counter element.innerHTML = `${counter[type][0]}/${counter[type][1]}`; } else { console.warn(`Counter element type "${type}" is not defined in the counter.`); } } var scrollableElement = document.querySelector('.scenes_template_container'); var leftArrow = document.querySelector('.scenes_arrow_left'); var rightArrow = document.querySelector('.scenes_arrow_right'); //var mainelement = document.querySelector('.scenes_icons') var mainelement = document.querySelector('.scenes_template_container>div') var scrollStep; function calculatedwidth(){ var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; console.log(width); var borderRightWidth = computedStyle.borderRightWidth; var borderLeftWidth = computedStyle.borderLeftWidth; var marginLeft = computedStyle.marginLeft; var marginRight = computedStyle.marginRight; var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); var borderRightWidthInt = parseInt(borderRightWidth, 10); var borderLeftWidthInt = parseInt(borderLeftWidth, 10); scrollStep = (widthInt + marginLeftInt + marginRightInt)*3.025; } function fadeOut(i) { var errorMargin = scrollableElement.scrollWidth * 0.05; var canScrollLeft = (i < 0); var canScrollRight = (i > 0); if (canScrollLeft || canScrollRight) { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); } else { return; } } leftArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(1); }); } </script>\
<<nobr>> <div class="scenes_upper_div"> <div id="woman_and_scenes_button_scenes"> <img src="ressources/icons/13DA1.webp"> </div> <div class="parent_upper_mid"> <div class="scenes_character_image"> <img src="ressources/icons/13DB3.webp"> <div class="shadow"></div> </div> <div class="parent_counter"> <div class="total_scenes_counter"> <p counterScene="all">0/0</p> <img src="ressources/icons/13C16.webp"> </div> <div class="scenes_counter"> <div class="scenes_counter_type"> <p counterScene="beginning">0/0</p> <img src="ressources/maingui/sexuals/beginning.webp"> </div> <div class="scenes_counter_type"> <p counterScene="tease">0/0</p> <img src="ressources/maingui/sexuals/tease.webp"> </div> <div class="scenes_counter_type"> <p counterScene="handjob">0/0</p> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="titsjob">0/0</p> <img src="ressources/maingui/sexuals/boobjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="blowjob">0/0</p> <img src="ressources/maingui/sexuals/blowjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="vaginal">0/0</p> <img src="ressources/maingui/sexuals/vaginal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="anal">0/0</p> <img src="ressources/maingui/sexuals/anal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="extreme">0/0</p> <img src="ressources/maingui/sexuals/extreme.webp"> </div> </div> </div> </div> <div class="parent_upper_right"> <div onclick="SugarCube.Engine.play('MENU main interface')" id="scenes_goback_button"> Back </div> </div> </div> <div class="cheats_parent_bottom"> <div class="get_cheats_here"> <div class="get_cheats_here_txt"> To unlock content instantly get the Tier 3 Cheat </div> <!-- div onclick="SugarCube.Engine.play('Cheats')" class="get_cheats_here_button" --> <div onclick="accessAngela_cheats()" class="get_cheats_here_button"> GET CHEAT </div> </div> <div class="scenes_holy_div"> <div class="scenes_arrow_left"></div> <div class="scenes_template_container"> <!--div class="scenes_icons scenes_icon_unseen"> <img src="image_fapo/pngimg.com - face_PNG5646.webp"> <div class="shadow_1"></div> <div class="mech_icons"> <img src="image_fapo/ass.webp"> </div--> </div> <div class="scenes_arrow_right"></div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; position: relative; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-weight: bold; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Teko', sans-serif; } .scenes_upper_div { height: 32vh; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: center; } #woman_and_scenes_button_scenes{ height: 20vh; aspect-ratio: 1/1; border: solid 1vh ; border-radius: 125vh; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin-left: 5vh; border-color: rgb(73, 0, 0); position: relative; left : 7vh; } #woman_and_scenes_button_scenes img{ height: 65%; width: auto; display: flex; } .parent_upper_mid{ height: 32vh; width: 90vh; position: relative; display: flex; justify-content: space-between; } .scenes_character_image{ height: 23vh; aspect-ratio: 1/1; border: solid 1vh var(--theme-color); border-radius: 10%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; top: 7.5vh; left: 4.2vh; } .scenes_character_image img{ height: 60%; border-radius: 10%; position: relative; top: 11.5vh; } .shadow{ height: 100%; width: 100%; border-radius: 7%; box-shadow: inset 0 0 3vh 2vh #000000; z-index: 1; position: relative; top: -6.8vh; } .parent_upper_right { height: 30vh; width: 27vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; align-items: center; margin-right: 5vh; position: relative; } #scenes_goback_button{ height: 25%; width: 22vh; padding-top: 0.5vh; right: 4vh; position:relative; top: -1vh; border-radius: 2vh; font-size: 5vh; border:solid 0.7vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; background-color: #3c3c3c; } #scenes_goback_button:hover{ transform: translate(0.25vh, -0.25vh); box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5); } .scenes_fight_button { height: 16vh; width: 20vh; border: solid 0.75vh; border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 3.5vh; cursor: pointer; padding-top: 0.5vw; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: 2vh; } .scenes_fight_button:hover{ background-color: rgba(44, 43, 43, 0.5); border: solid 0.75vh rgb(164, 163, 162); } .scenes_fight_button img{ height: 10vh; width: auto; display: flex; margin-bottom: 1vh; } .scenes_fight_button p{ width: 15vh; margin: 0; } .parent_counter{ height: 32vh; width: 45vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; } .total_scenes_counter{ background-color: rgb(17, 17, 17); height: 8vh; width: 18vh; border-radius: 1.5vh; border: solid 0.75vh var(--theme-color); z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 4vh; position: relative; top: 5vh; } .total_scenes_counter img{ height: 50%; width: auto; display: flex; margin-left: 1vh; padding-bottom: 0.5vh; } .total_scenes_counter p { margin-top: 4.6vh; } .scenes_counter{ height: 20vh; width: 45vh; align-content: flex-end; justify-content: center; border-radius: 2.5vh; border: solid 0.75vh var(--theme-color); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .scenes_counter_type{ height: 40%; width: 23%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; font-size: 2.5vh; position: relative; top: -1vh; } .scenes_counter_type p{ padding-top: 0.4vh; } .scenes_counter_type img{ height: 45%; width: auto; margin-right: 1vh; display: flex; margin-left: 1vh; } .scenes_holy_div{ height: 70vh; width: 120vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .scenes_arrow_left{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid var(--theme-color); position: relative; right: 1vh; bottom: 0.75vh } .scenes_arrow_left:hover{ transform: translatey(0.375vh); border-color: transparent rgba(255, 255, 255, 0.509) transparent transparent; } .scenes_arrow_right{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid var(--theme-color); position: relative; left: 1vh; bottom: 0.75vh } .scenes_arrow_right:hover{ transform: translatey(0.375vh); border-color: transparent transparent transparent rgba(255, 255, 255, 0.509); } .scenes_template_container{ height: 70vh; width: 93vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scenes_icons{ height: 25vh; width: 25vh; border: solid 0.75vh var(--theme-color); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; } .scenes_icons:hover{ transform: translate(0.25vh, -0.25vh); box-shadow: -0.5vh 0.5vh 1vh rgba(255, 255, 255, 0.5); } .scenes_icons img{ height: 100%; width: 100%; object-fit: contain; border-radius: 3vh; } .mech_icons{ height: 6vh; width: auto; position: absolute; bottom: 16vh; right: 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; } .shadow_1{ height: 100%; width: 100%; border-radius: 2.5vh; box-shadow: inset 0 0 3vh 2vh #000000; position: absolute; z-index: 4; } .scenes_icon_unseen{ height: 25vh; width: 25vh; border: solid 0.75vh rgb(60, 59, 59); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; box-sizing: border-box; } .scenes_icon_unseen img{ height: 100%; width: 100%; object-fit: contain; opacity: 0.5; filter: blur(0.4vh); -webkit-filter: blur(0.75vh); } .lock_icon{ height: 100%; width: 100%; position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; bottom: 0vh; } .lock_icon img{ height: 100%; object-fit: contain; opacity: 1; filter: blur(0px); } .cheats_parent_bottom { height: 70vh; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; } .get_cheats_here { height: 15vh; width: 15vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: absolute; top: 26vh; left: 8vh; border: solid 0.75vh var(--theme-color); border-radius: 3vh; } .get_cheats_here_txt { height: 10vh; width: 15vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 1.6vh; text-align: center; position: relative; top: -1vh; } .get_cheats_here_button { background-color: #3c3c3c; height: 3vh; width: 8vh; border: solid 0.5vh var(--theme-color); border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 1.7vh; cursor: pointer; padding-top: 0.3vh; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: -1vh; } .get_cheats_here_button:hover { transform: translate(0.2vh, -0.2vh); box-shadow: -0.25vh 0.25vh 0.5vh rgba(255, 255, 255, 0.5); } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { /*var characterName = "mc"; // which character for Bordercolor // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[characterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[characterName].bordercolor); } else { console.warn(`Character "${characterName}" is not defined in the characters object.`); }*/ var themeCharacterName = "mc"; // which character for Bordercolor var categoryKey = "group"; // which character for scenes // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[themeCharacterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[themeCharacterName].bordercolor); } else { //console.warn(`Character "${themeCharacterName}" is not defined in the characters object.`); } var scenes_template_container = document.querySelector('.scenes_template_container'); var illustration = { beginning: "ressources/maingui/sexuals/beginning.webp", tease: "ressources/maingui/sexuals/tease.webp", handjob: "ressources/maingui/sexuals/handjob.webp", titsjob: "ressources/maingui/sexuals/boobjob.webp", blowjob: "ressources/maingui/sexuals/blowjob.webp", vaginal : "ressources/maingui/sexuals/vaginal.webp", anal : "ressources/maingui/sexuals/anal.webp", extreme : "ressources/maingui/sexuals/extreme.webp", } function createelement(scene, type) { let divScenes_icons = document.createElement("div"); if (scene.seen === true || scene.unlocked === true) { divScenes_icons.classList.add("scenes_icons"); divScenes_icons.setAttribute('data-sceneP', scene.passageName); divScenes_icons.onclick = function() { //SugarCube.Engine.play(scene.passageName); explorePassage(scene); }; let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="mech_icons">' + '<img src="'+illustration[type]+'">'; divScenes_icons.innerHTML = inner; } else { divScenes_icons.classList.add("scenes_icon_unseen"); let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="lock_icon">' + '<img src="ressources/icons/13DB4.webp">'; divScenes_icons.innerHTML = inner; } return divScenes_icons; } var counter = { all: [0, 0], // seen/total beginning: [0, 0], tease: [0, 0], handjob: [0, 0], titsjob: [0, 0], blowjob: [0, 0], vaginal: [0, 0], anal: [0, 0], extreme: [0, 0], }; // Function to count scenes function countScenes2(scene, type) { if (counter[type]) { counter.all[1] += 1; counter[type][1] += 1; if (scene.seen === true || scene.unlocked === true) { counter.all[0] += 1; counter[type][0] += 1; } } } console.log("allo") function seen_scene(scene, type) { let constructedTemplate = createelement(scene, type); //scenes_template_container.innerHTML += constructedTemplate; scenes_template_container.appendChild(constructedTemplate) } /*var characterName = "group"; // which caharcter for scenes if (SugarCube.State.variables.scenes.list[characterName]) { // Check if character scenes exist for (let type in SugarCube.State.variables.scenes.list[characterName]) { for (let scene in SugarCube.State.variables.scenes.list[characterName][type]) { var sceneObject = SugarCube.State.variables.scenes.list[characterName][type][scene] seen_scene(sceneObject, type); countScenes2(sceneObject, type); } } }*/ for (let scene in SugarCube.State.variables.scenes.list) { let sceneObject = SugarCube.State.variables.scenes.list[scene]; let type = sceneObject.stage; if (sceneObject.category != categoryKey) { continue; } seen_scene(sceneObject, type); countScenes2(sceneObject, type); } // Update the UI with the counter values var counterElements = document.querySelectorAll("[counterScene]"); for (let element of counterElements) { let type = element.getAttribute("counterScene"); if (counter[type]) { // Check if the type exists in the counter element.innerHTML = `${counter[type][0]}/${counter[type][1]}`; } else { console.warn(`Counter element type "${type}" is not defined in the counter.`); } } var scrollableElement = document.querySelector('.scenes_template_container'); var leftArrow = document.querySelector('.scenes_arrow_left'); var rightArrow = document.querySelector('.scenes_arrow_right'); //var mainelement = document.querySelector('.scenes_icons') var mainelement = document.querySelector('.scenes_template_container>div') var scrollStep; function calculatedwidth(){ var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; console.log(width); var borderRightWidth = computedStyle.borderRightWidth; var borderLeftWidth = computedStyle.borderLeftWidth; var marginLeft = computedStyle.marginLeft; var marginRight = computedStyle.marginRight; var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); var borderRightWidthInt = parseInt(borderRightWidth, 10); var borderLeftWidthInt = parseInt(borderLeftWidth, 10); scrollStep = (widthInt + marginLeftInt + marginRightInt)*3.025; } function fadeOut(i) { var errorMargin = scrollableElement.scrollWidth * 0.05; var canScrollLeft = (i < 0); var canScrollRight = (i > 0); if (canScrollLeft || canScrollRight) { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); } else { return; } } leftArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(1); }); } </script>\
<<nobr>> <div class="scenes_upper_div"> <div id="woman_and_scenes_button_scenes"> <img src="ressources/icons/13DA1.webp"> </div> <div class="parent_upper_mid"> <div class="scenes_character_image"> <img character="cherie"> <div class="shadow"></div> </div> <div class="parent_counter"> <div class="total_scenes_counter"> <p counterScene="all">0/0</p> <img src="ressources/icons/13C16.webp"> </div> <div class="scenes_counter"> <div class="scenes_counter_type"> <p counterScene="beginning">0/0</p> <img src="ressources/maingui/sexuals/beginning.webp"> </div> <div class="scenes_counter_type"> <p counterScene="tease">0/0</p> <img src="ressources/maingui/sexuals/tease.webp"> </div> <div class="scenes_counter_type"> <p counterScene="titsjob">0/0</p> <img src="ressources/maingui/sexuals/boobjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="vaginal">0/0</p> <img src="ressources/maingui/sexuals/vaginal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="handjob">0/0</p> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="blowjob">0/0</p> <img src="ressources/maingui/sexuals/blowjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="anal">0/0</p> <img src="ressources/maingui/sexuals/anal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="extreme">0/0</p> <img src="ressources/maingui/sexuals/extreme.webp"> </div> </div> </div> </div> <div class="parent_upper_right"> <div onclick="SugarCube.Engine.play('MENU main interface')" id="scenes_goback_button"> Back </div> </div> </div> <div class="cheats_parent_bottom"> <div class="scenes_holy_div"> <div class="scenes_arrow_left"></div> <div class="scenes_template_container"> <!--div class="scenes_icons scenes_icon_unseen"> <img src="image_fapo/pngimg.com - face_PNG5646.webp"> <div class="shadow_1"></div> <div class="mech_icons"> <img src="image_fapo/ass.webp"> </div--> </div> <div class="scenes_arrow_right"></div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; position: relative; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-weight: bold; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Teko', sans-serif; } .scenes_upper_div { height: 32vh; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: center; } #woman_and_scenes_button_scenes{ height: 20vh; aspect-ratio: 1/1; border: solid 1vh ; border-radius: 125vh; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin-left: 5vh; border-color: rgb(73, 0, 0); position: relative; left : 7vh; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #woman_and_scenes_button_scenes img{ height: 65%; width: auto; display: flex; } .parent_upper_mid{ height: 32vh; width: 90vh; position: relative; display: flex; justify-content: space-between; } .scenes_character_image{ height: 23vh; aspect-ratio: 1/1; border: solid 1vh var(--theme-color); border-radius: 10%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; top: 7.5vh; left: 4.2vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_character_image img{ height: 100%; border-radius: 10%; position: relative; top: 11.5vh; } .shadow{ height: 100%; width: 100%; border-radius: 10%; box-shadow: inset 0 0 3vh 2vh #000000; z-index: 1; position: relative; top: -11.5vh; } .parent_upper_right { height: 30vh; width: 27vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; align-items: center; margin-right: 5vh; position: relative; } #scenes_goback_button{ height: 25%; width: 22vh; padding-top: 0.5vh; right: 4vh; position:relative; top: -1vh; border-radius: 2vh; font-size: 5vh; border:solid 0.7vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #scenes_goback_button:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .scenes_fight_button { height: 16vh; width: 20vh; border: solid 0.75vh; border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 3.5vh; cursor: pointer; padding-top: 0.5vw; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: 2vh; } .scenes_fight_button:hover{ background-color: rgba(44, 43, 43, 0.5); border: solid 0.75vh rgb(164, 163, 162); } .scenes_fight_button img{ height: 10vh; width: auto; display: flex; margin-bottom: 1vh; } .scenes_fight_button p{ width: 15vh; margin: 0; } .parent_counter{ height: 32vh; width: 45vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; } .total_scenes_counter{ background-color: rgb(17, 17, 17); height: 8vh; width: 18vh; border-radius: 1.5vh; z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 4vh; position: relative; top: 5vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 1); background-image: none; } .total_scenes_counter img{ height: 50%; width: auto; display: flex; margin-left: 1vh; padding-bottom: 0.5vh; } .total_scenes_counter p { margin-top: 4.6vh; } .scenes_counter{ height: 20vh; width: 45vh; align-content: flex-end; justify-content: center; border-radius: 2.5vh; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_counter_type{ height: 40%; width: 23%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; font-size: 2.5vh; position: relative; top: -1vh; } .scenes_counter_type p{ padding-top: 0.4vh; } .scenes_counter_type img{ height: 45%; width: auto; margin-right: 1vh; display: flex; margin-left: 1vh; } .scenes_holy_div{ height: 70vh; width: 120vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .scenes_arrow_left{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid var(--theme-color); position: relative; right: 1vh; bottom: 0.75vh } .scenes_arrow_left:hover{ transform: translatey(0.375vh); border-color: transparent rgba(255, 255, 255, 0.509) transparent transparent; } .scenes_arrow_right{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid var(--theme-color); position: relative; left: 1vh; bottom: 0.75vh } .scenes_arrow_right:hover{ transform: translatey(0.375vh); border-color: transparent transparent transparent rgba(255, 255, 255, 0.509); } .scenes_template_container{ height: 70vh; width: 93vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scenes_icons{ height: 25vh; width: 25vh; border: solid 0.75vh var(--theme-color); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icons:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .scenes_icons img{ height: 100%; width: 100%; object-fit: contain; border-radius: 3vh; } .mech_icons{ height: 6vh; width: auto; position: absolute; bottom: 16vh; right: 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; } .shadow_1{ height: 100%; width: 100%; border-radius: 2.5vh; box-shadow: inset 0 0 3vh 2vh #000000; position: absolute; z-index: 4; } .scenes_icon_unseen{ height: 25vh; width: 25vh; border: solid 0.75vh rgb(60, 59, 59); margin: 1vh; border-radius: 2.5vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icon_unseen img{ height: 100%; width: 100%; object-fit: contain; opacity: 0.5; filter: blur(0.4vh); -webkit-filter: blur(0.75vh); } .lock_icon{ height: 100%; width: 100%; position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; bottom: 0vh; } .lock_icon img{ height: 100%; object-fit: contain; opacity: 1; filter: blur(0px); } .cheats_parent_bottom { height: 70vh; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { /*var characterName = "lana"; // which character for Bordercolor // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[characterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[characterName].bordercolor); } else { console.warn(`Character "${characterName}" is not defined in the characters object.`); }*/ var themeCharacterName = "cherie"; // which character for Bordercolor var categoryKey = "cherie"; // which character for scenes // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[themeCharacterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[themeCharacterName].bordercolor); } else { //console.warn(`Character "${themeCharacterName}" is not defined in the characters object.`); } var scenes_template_container = document.querySelector('.scenes_template_container'); var illustration = { beginning: "ressources/maingui/sexuals/beginning.webp", tease: "ressources/maingui/sexuals/tease.webp", handjob: "ressources/maingui/sexuals/handjob.webp", titsjob: "ressources/maingui/sexuals/boobjob.webp", blowjob: "ressources/maingui/sexuals/blowjob.webp", vaginal : "ressources/maingui/sexuals/vaginal.webp", anal : "ressources/maingui/sexuals/anal.webp", extreme : "ressources/maingui/sexuals/extreme.webp", } function createelement(scene, type) { let divScenes_icons = document.createElement("div"); if (scene.seen === true || scene.unlocked === true) { divScenes_icons.classList.add("scenes_icons"); divScenes_icons.setAttribute('data-sceneP', scene.passageName); divScenes_icons.onclick = function() { //SugarCube.Engine.play(scene.passageName); explorePassage(scene); }; let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="mech_icons">' + '<img src="'+illustration[type]+'">'; divScenes_icons.innerHTML = inner; } else { divScenes_icons.classList.add("scenes_icon_unseen"); let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="lock_icon">' + '<img src="ressources/icons/13DB4.webp">'; divScenes_icons.innerHTML = inner; } return divScenes_icons; } var counter = { all: [0, 0], // seen/total beginning: [0, 0], tease: [0, 0], handjob: [0, 0], titsjob: [0, 0], blowjob: [0, 0], vaginal: [0, 0], anal: [0, 0], extreme: [0, 0], }; // Function to count scenes function countScenes2(scene, type) { if (counter[type]) { counter.all[1] += 1; counter[type][1] += 1; if (scene.seen === true || scene.unlocked === true) { counter.all[0] += 1; counter[type][0] += 1; } } } console.log("allo") function seen_scene(scene, type) { let constructedTemplate = createelement(scene, type); //scenes_template_container.innerHTML += constructedTemplate; scenes_template_container.appendChild(constructedTemplate) } /*var characterName = "lana"; // which caharcter for scenes if (SugarCube.State.variables.scenes.list[characterName]) { // Check if character scenes exist for (let type in SugarCube.State.variables.scenes.list[characterName]) { for (let scene in SugarCube.State.variables.scenes.list[characterName][type]) { var sceneObject = SugarCube.State.variables.scenes.list[characterName][type][scene] seen_scene(sceneObject, type); countScenes2(sceneObject, type); } } }*/ for (let scene in SugarCube.State.variables.scenes.list) { let sceneObject = SugarCube.State.variables.scenes.list[scene]; let type = sceneObject.stage; if (sceneObject.category != categoryKey) { continue; } seen_scene(sceneObject, type); countScenes2(sceneObject, type); } // Update the UI with the counter values var counterElements = document.querySelectorAll("[counterScene]"); for (let element of counterElements) { let type = element.getAttribute("counterScene"); if (counter[type]) { // Check if the type exists in the counter element.innerHTML = `${counter[type][0]}/${counter[type][1]}`; } else { console.warn(`Counter element type "${type}" is not defined in the counter.`); } } var scrollableElement = document.querySelector('.scenes_template_container'); var leftArrow = document.querySelector('.scenes_arrow_left'); var rightArrow = document.querySelector('.scenes_arrow_right'); //var mainelement = document.querySelector('.scenes_icons') var mainelement = document.querySelector('.scenes_template_container>div') var scrollStep; function calculatedwidth(){ var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; console.log(width); var borderRightWidth = computedStyle.borderRightWidth; var borderLeftWidth = computedStyle.borderLeftWidth; var marginLeft = computedStyle.marginLeft; var marginRight = computedStyle.marginRight; var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); var borderRightWidthInt = parseInt(borderRightWidth, 10); var borderLeftWidthInt = parseInt(borderLeftWidth, 10); scrollStep = (widthInt + marginLeftInt + marginRightInt)*3.025; } function fadeOut(i) { var errorMargin = scrollableElement.scrollWidth * 0.05; var canScrollLeft = (i < 0); var canScrollRight = (i > 0); if (canScrollLeft || canScrollRight) { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); } else { return; } } leftArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(1); }); function goback(event){ event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("MENU main interface"); } } </script>\
<<nobr>> <div class="scenes_upper_div"> <div id="woman_and_scenes_button_scenes"> <img src="ressources/icons/13DA1.webp"> </div> <div class="parent_upper_mid"> <div class="scenes_character_image"> <img character="lana"> <div class="shadow"></div> </div> <div class="parent_counter"> <div class="total_scenes_counter"> <p counterScene="all">0/0</p> <img src="ressources/icons/13C16.webp"> </div> <div class="scenes_counter"> <div class="scenes_counter_type"> <p counterScene="beginning">0/0</p> <img src="ressources/maingui/sexuals/beginning.webp"> </div> <div class="scenes_counter_type"> <p counterScene="tease">0/0</p> <img src="ressources/maingui/sexuals/tease.webp"> </div> <div class="scenes_counter_type"> <p counterScene="titsjob">0/0</p> <img src="ressources/maingui/sexuals/boobjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="vaginal">0/0</p> <img src="ressources/maingui/sexuals/vaginal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="handjob">0/0</p> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="blowjob">0/0</p> <img src="ressources/maingui/sexuals/blowjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="anal">0/0</p> <img src="ressources/maingui/sexuals/anal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="extreme">0/0</p> <img src="ressources/maingui/sexuals/extreme.webp"> </div> </div> </div> </div> <div class="parent_upper_right"> <div onclick="SugarCube.Engine.play('MENU main interface')" id="scenes_goback_button"> Back </div> </div> </div> <div class="cheats_parent_bottom"> <div class="scenes_holy_div"> <div class="scenes_arrow_left"></div> <div class="scenes_template_container"> <!--div class="scenes_icons scenes_icon_unseen"> <img src="image_fapo/pngimg.com - face_PNG5646.webp"> <div class="shadow_1"></div> <div class="mech_icons"> <img src="image_fapo/ass.webp"> </div--> </div> <div class="scenes_arrow_right"></div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; position: relative; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-weight: bold; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Teko', sans-serif; } .scenes_upper_div { height: 32vh; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: center; } #woman_and_scenes_button_scenes{ height: 20vh; aspect-ratio: 1/1; border: solid 1vh ; border-radius: 125vh; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin-left: 5vh; border-color: rgb(73, 0, 0); position: relative; left : 7vh; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #woman_and_scenes_button_scenes img{ height: 65%; width: auto; display: flex; } .parent_upper_mid{ height: 32vh; width: 90vh; position: relative; display: flex; justify-content: space-between; } .scenes_character_image{ height: 23vh; aspect-ratio: 1/1; border: solid 1vh var(--theme-color); border-radius: 10%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; top: 7.5vh; left: 4.2vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_character_image img{ height: 100%; border-radius: 10%; position: relative; top: 11.5vh; } .shadow{ height: 100%; width: 100%; border-radius: 10%; box-shadow: inset 0 0 3vh 2vh #000000; z-index: 1; position: relative; top: -11.5vh; } .parent_upper_right { height: 30vh; width: 27vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; align-items: center; margin-right: 5vh; position: relative; } #scenes_goback_button{ height: 25%; width: 22vh; padding-top: 0.5vh; right: 4vh; position:relative; top: -1vh; border-radius: 2vh; font-size: 5vh; border:solid 0.7vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #scenes_goback_button:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .scenes_fight_button { height: 16vh; width: 20vh; border: solid 0.75vh; border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 3.5vh; cursor: pointer; padding-top: 0.5vw; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: 2vh; } .scenes_fight_button:hover{ background-color: rgba(44, 43, 43, 0.5); border: solid 0.75vh rgb(164, 163, 162); } .scenes_fight_button img{ height: 10vh; width: auto; display: flex; margin-bottom: 1vh; } .scenes_fight_button p{ width: 15vh; margin: 0; } .parent_counter{ height: 32vh; width: 45vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; } .total_scenes_counter{ background-color: rgb(17, 17, 17); height: 8vh; width: 18vh; border-radius: 1.5vh; z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 4vh; position: relative; top: 5vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 1); background-image: none; } .total_scenes_counter img{ height: 50%; width: auto; display: flex; margin-left: 1vh; padding-bottom: 0.5vh; } .total_scenes_counter p { margin-top: 4.6vh; } .scenes_counter{ height: 20vh; width: 45vh; align-content: flex-end; justify-content: center; border-radius: 2.5vh; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_counter_type{ height: 40%; width: 23%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; font-size: 2.5vh; position: relative; top: -1vh; } .scenes_counter_type p{ padding-top: 0.4vh; } .scenes_counter_type img{ height: 45%; width: auto; margin-right: 1vh; display: flex; margin-left: 1vh; } .scenes_holy_div{ height: 70vh; width: 120vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .scenes_arrow_left{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid var(--theme-color); position: relative; right: 1vh; bottom: 0.75vh } .scenes_arrow_left:hover{ transform: translatey(0.375vh); border-color: transparent rgba(255, 255, 255, 0.509) transparent transparent; } .scenes_arrow_right{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid var(--theme-color); position: relative; left: 1vh; bottom: 0.75vh } .scenes_arrow_right:hover{ transform: translatey(0.375vh); border-color: transparent transparent transparent rgba(255, 255, 255, 0.509); } .scenes_template_container{ height: 70vh; width: 93vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scenes_icons{ height: 25vh; width: 25vh; border: solid 0.75vh var(--theme-color); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icons:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .scenes_icons img{ height: 100%; width: 100%; object-fit: contain; border-radius: 3vh; } .mech_icons{ height: 6vh; width: auto; position: absolute; bottom: 16vh; right: 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; } .shadow_1{ height: 100%; width: 100%; border-radius: 2.5vh; box-shadow: inset 0 0 3vh 2vh #000000; position: absolute; z-index: 4; } .scenes_icon_unseen{ height: 25vh; width: 25vh; border: solid 0.75vh rgb(60, 59, 59); margin: 1vh; border-radius: 2.5vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icon_unseen img{ height: 100%; width: 100%; object-fit: contain; opacity: 0.5; filter: blur(0.4vh); -webkit-filter: blur(0.75vh); } .lock_icon{ height: 100%; width: 100%; position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; bottom: 0vh; } .lock_icon img{ height: 100%; object-fit: contain; opacity: 1; filter: blur(0px); } .cheats_parent_bottom { height: 70vh; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { /*var characterName = "lana"; // which character for Bordercolor // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[characterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[characterName].bordercolor); } else { console.warn(`Character "${characterName}" is not defined in the characters object.`); }*/ var themeCharacterName = "lana"; // which character for Bordercolor var categoryKey = "lana"; // which character for scenes // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[themeCharacterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[themeCharacterName].bordercolor); } else { //console.warn(`Character "${themeCharacterName}" is not defined in the characters object.`); } var scenes_template_container = document.querySelector('.scenes_template_container'); var illustration = { beginning: "ressources/maingui/sexuals/beginning.webp", tease: "ressources/maingui/sexuals/tease.webp", handjob: "ressources/maingui/sexuals/handjob.webp", titsjob: "ressources/maingui/sexuals/boobjob.webp", blowjob: "ressources/maingui/sexuals/blowjob.webp", vaginal : "ressources/maingui/sexuals/vaginal.webp", anal : "ressources/maingui/sexuals/anal.webp", extreme : "ressources/maingui/sexuals/extreme.webp", } function createelement(scene, type) { let divScenes_icons = document.createElement("div"); if (scene.seen === true || scene.unlocked === true) { divScenes_icons.classList.add("scenes_icons"); divScenes_icons.setAttribute('data-sceneP', scene.passageName); divScenes_icons.onclick = function() { //SugarCube.Engine.play(scene.passageName); explorePassage(scene); }; let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="mech_icons">' + '<img src="'+illustration[type]+'">'; divScenes_icons.innerHTML = inner; } else { divScenes_icons.classList.add("scenes_icon_unseen"); let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="lock_icon">' + '<img src="ressources/icons/13DB4.webp">'; divScenes_icons.innerHTML = inner; } return divScenes_icons; } var counter = { all: [0, 0], // seen/total beginning: [0, 0], tease: [0, 0], handjob: [0, 0], titsjob: [0, 0], blowjob: [0, 0], vaginal: [0, 0], anal: [0, 0], extreme: [0, 0], }; // Function to count scenes function countScenes2(scene, type) { if (counter[type]) { counter.all[1] += 1; counter[type][1] += 1; if (scene.seen === true || scene.unlocked === true) { counter.all[0] += 1; counter[type][0] += 1; } } } console.log("allo") function seen_scene(scene, type) { let constructedTemplate = createelement(scene, type); //scenes_template_container.innerHTML += constructedTemplate; scenes_template_container.appendChild(constructedTemplate) } /*var characterName = "lana"; // which caharcter for scenes if (SugarCube.State.variables.scenes.list[characterName]) { // Check if character scenes exist for (let type in SugarCube.State.variables.scenes.list[characterName]) { for (let scene in SugarCube.State.variables.scenes.list[characterName][type]) { var sceneObject = SugarCube.State.variables.scenes.list[characterName][type][scene] seen_scene(sceneObject, type); countScenes2(sceneObject, type); } } }*/ for (let scene in SugarCube.State.variables.scenes.list) { let sceneObject = SugarCube.State.variables.scenes.list[scene]; let type = sceneObject.stage; if (sceneObject.category != categoryKey) { continue; } seen_scene(sceneObject, type); countScenes2(sceneObject, type); } // Update the UI with the counter values var counterElements = document.querySelectorAll("[counterScene]"); for (let element of counterElements) { let type = element.getAttribute("counterScene"); if (counter[type]) { // Check if the type exists in the counter element.innerHTML = `${counter[type][0]}/${counter[type][1]}`; } else { console.warn(`Counter element type "${type}" is not defined in the counter.`); } } var scrollableElement = document.querySelector('.scenes_template_container'); var leftArrow = document.querySelector('.scenes_arrow_left'); var rightArrow = document.querySelector('.scenes_arrow_right'); //var mainelement = document.querySelector('.scenes_icons') var mainelement = document.querySelector('.scenes_template_container>div') var scrollStep; function calculatedwidth(){ var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; console.log(width); var borderRightWidth = computedStyle.borderRightWidth; var borderLeftWidth = computedStyle.borderLeftWidth; var marginLeft = computedStyle.marginLeft; var marginRight = computedStyle.marginRight; var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); var borderRightWidthInt = parseInt(borderRightWidth, 10); var borderLeftWidthInt = parseInt(borderLeftWidth, 10); scrollStep = (widthInt + marginLeftInt + marginRightInt)*3.025; } function fadeOut(i) { var errorMargin = scrollableElement.scrollWidth * 0.05; var canScrollLeft = (i < 0); var canScrollRight = (i > 0); if (canScrollLeft || canScrollRight) { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); } else { return; } } leftArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(1); }); function goback(event){ event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("MENU main interface"); } } </script>\
<<nobr>> <div class="scenes_upper_div"> <div id="woman_and_scenes_button_scenes"> <img src="ressources/icons/13DA1.webp"> </div> <div class="parent_upper_mid"> <div class="scenes_character_image"> <img character="elfie"> <div class="shadow"></div> </div> <div class="parent_counter"> <div class="total_scenes_counter"> <p counterScene="all">0/0</p> <img src="ressources/icons/13C16.webp"> </div> <div class="scenes_counter"> <div class="scenes_counter_type"> <p counterScene="beginning">0/0</p> <img src="ressources/maingui/sexuals/beginning.webp"> </div> <div class="scenes_counter_type"> <p counterScene="tease">0/0</p> <img src="ressources/maingui/sexuals/tease.webp"> </div> <div class="scenes_counter_type"> <p counterScene="titsjob">0/0</p> <img src="ressources/maingui/sexuals/boobjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="vaginal">0/0</p> <img src="ressources/maingui/sexuals/vaginal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="handjob">0/0</p> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="blowjob">0/0</p> <img src="ressources/maingui/sexuals/blowjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="anal">0/0</p> <img src="ressources/maingui/sexuals/anal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="extreme">0/0</p> <img src="ressources/maingui/sexuals/extreme.webp"> </div> </div> </div> </div> <div class="parent_upper_right"> <div onclick="SugarCube.Engine.play('MENU main interface')" id="scenes_goback_button"> Back </div> </div> </div> <div class="cheats_parent_bottom"> <div class="scenes_holy_div"> <div class="scenes_arrow_left"></div> <div class="scenes_template_container"> <!--div class="scenes_icons scenes_icon_unseen"> <img src="image_fapo/pngimg.com - face_PNG5646.webp"> <div class="shadow_1"></div> <div class="mech_icons"> <img src="image_fapo/ass.webp"> </div--> </div> <div class="scenes_arrow_right"></div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; position: relative; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-weight: bold; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Teko', sans-serif; } .scenes_upper_div { height: 32vh; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: center; } #woman_and_scenes_button_scenes{ height: 20vh; aspect-ratio: 1/1; border: solid 1vh ; border-radius: 125vh; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin-left: 5vh; border-color: rgb(73, 0, 0); position: relative; left : 7vh; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #woman_and_scenes_button_scenes img{ height: 65%; width: auto; display: flex; } .parent_upper_mid{ height: 32vh; width: 90vh; position: relative; display: flex; justify-content: space-between; } .scenes_character_image{ height: 23vh; aspect-ratio: 1/1; border: solid 1vh var(--theme-color); border-radius: 10%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; top: 7.5vh; left: 4.2vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_character_image img{ height: 100%; border-radius: 10%; position: relative; top: 11.5vh; } .shadow{ height: 100%; width: 100%; border-radius: 10%; box-shadow: inset 0 0 3vh 2vh #000000; z-index: 1; position: relative; top: -11.5vh; } .parent_upper_right { height: 30vh; width: 27vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; align-items: center; margin-right: 5vh; position: relative; } #scenes_goback_button{ height: 25%; width: 22vh; padding-top: 0.5vh; right: 4vh; position:relative; top: -1vh; border-radius: 2vh; font-size: 5vh; border:solid 0.7vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #scenes_goback_button:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .scenes_fight_button { height: 16vh; width: 20vh; border: solid 0.75vh; border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 3.5vh; cursor: pointer; padding-top: 0.5vw; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: 2vh; } .scenes_fight_button:hover{ background-color: rgba(44, 43, 43, 0.5); border: solid 0.75vh rgb(164, 163, 162); } .scenes_fight_button img{ height: 10vh; width: auto; display: flex; margin-bottom: 1vh; } .scenes_fight_button p{ width: 15vh; margin: 0; } .parent_counter{ height: 32vh; width: 45vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; } .total_scenes_counter{ background-color: rgb(17, 17, 17); height: 8vh; width: 18vh; border-radius: 1.5vh; z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 4vh; position: relative; top: 5vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 1); background-image: none; } .total_scenes_counter img{ height: 50%; width: auto; display: flex; margin-left: 1vh; padding-bottom: 0.5vh; } .total_scenes_counter p { margin-top: 4.6vh; } .scenes_counter{ height: 20vh; width: 45vh; align-content: flex-end; justify-content: center; border-radius: 2.5vh; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_counter_type{ height: 40%; width: 23%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; font-size: 2.5vh; position: relative; top: -1vh; } .scenes_counter_type p{ padding-top: 0.4vh; } .scenes_counter_type img{ height: 45%; width: auto; margin-right: 1vh; display: flex; margin-left: 1vh; } .scenes_holy_div{ height: 70vh; width: 120vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .scenes_arrow_left{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid var(--theme-color); position: relative; right: 1vh; bottom: 0.75vh } .scenes_arrow_left:hover{ transform: translatey(0.375vh); border-color: transparent rgba(255, 255, 255, 0.509) transparent transparent; } .scenes_arrow_right{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid var(--theme-color); position: relative; left: 1vh; bottom: 0.75vh } .scenes_arrow_right:hover{ transform: translatey(0.375vh); border-color: transparent transparent transparent rgba(255, 255, 255, 0.509); } .scenes_template_container{ height: 70vh; width: 93vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scenes_icons{ height: 25vh; width: 25vh; border: solid 0.75vh var(--theme-color); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icons:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .scenes_icons img{ height: 100%; width: 100%; object-fit: contain; border-radius: 3vh; } .mech_icons{ height: 6vh; width: auto; position: absolute; bottom: 16vh; right: 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; } .shadow_1{ height: 100%; width: 100%; border-radius: 2.5vh; box-shadow: inset 0 0 3vh 2vh #000000; position: absolute; z-index: 4; } .scenes_icon_unseen{ height: 25vh; width: 25vh; border: solid 0.75vh rgb(60, 59, 59); margin: 1vh; border-radius: 2.5vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icon_unseen img{ height: 100%; width: 100%; object-fit: contain; opacity: 0.5; filter: blur(0.4vh); -webkit-filter: blur(0.75vh); } .lock_icon{ height: 100%; width: 100%; position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; bottom: 0vh; } .lock_icon img{ height: 100%; object-fit: contain; opacity: 1; filter: blur(0px); } .cheats_parent_bottom { height: 70vh; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { /*var characterName = "elfie"; // which character for Bordercolor // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[characterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[characterName].bordercolor); } else { console.warn(`Character "${characterName}" is not defined in the characters object.`); }*/ var themeCharacterName = "elfie"; // which character for Bordercolor var categoryKey = "elfie"; // which character for scenes // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[themeCharacterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[themeCharacterName].bordercolor); } else { //console.warn(`Character "${themeCharacterName}" is not defined in the characters object.`); } var scenes_template_container = document.querySelector('.scenes_template_container'); var illustration = { beginning: "ressources/maingui/sexuals/beginning.webp", tease: "ressources/maingui/sexuals/tease.webp", handjob: "ressources/maingui/sexuals/handjob.webp", titsjob: "ressources/maingui/sexuals/boobjob.webp", blowjob: "ressources/maingui/sexuals/blowjob.webp", vaginal : "ressources/maingui/sexuals/vaginal.webp", anal : "ressources/maingui/sexuals/anal.webp", extreme : "ressources/maingui/sexuals/extreme.webp", } function createelement(scene, type) { let divScenes_icons = document.createElement("div"); if (scene.seen === true || scene.unlocked === true) { divScenes_icons.classList.add("scenes_icons"); divScenes_icons.setAttribute('data-sceneP', scene.passageName); divScenes_icons.onclick = function() { //SugarCube.Engine.play(scene.passageName); explorePassage(scene); }; let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="mech_icons">' + '<img src="'+illustration[type]+'">'; divScenes_icons.innerHTML = inner; } else { divScenes_icons.classList.add("scenes_icon_unseen"); let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="lock_icon">' + '<img src="ressources/icons/13DB4.webp">'; divScenes_icons.innerHTML = inner; } return divScenes_icons; } var counter = { all: [0, 0], // seen/total beginning: [0, 0], tease: [0, 0], handjob: [0, 0], titsjob: [0, 0], blowjob: [0, 0], vaginal: [0, 0], anal: [0, 0], extreme: [0, 0], }; // Function to count scenes function countScenes2(scene, type) { if (counter[type]) { counter.all[1] += 1; counter[type][1] += 1; if (scene.seen === true || scene.unlocked === true) { counter.all[0] += 1; counter[type][0] += 1; } } } console.log("allo") function seen_scene(scene, type) { let constructedTemplate = createelement(scene, type); //scenes_template_container.innerHTML += constructedTemplate; scenes_template_container.appendChild(constructedTemplate) } /*var characterName = "elfie"; // which caharcter for scenes if (SugarCube.State.variables.scenes.list[characterName]) { // Check if character scenes exist for (let type in SugarCube.State.variables.scenes.list[characterName]) { for (let scene in SugarCube.State.variables.scenes.list[characterName][type]) { var sceneObject = SugarCube.State.variables.scenes.list[characterName][type][scene] seen_scene(sceneObject, type); countScenes2(sceneObject, type); } } }*/ for (let scene in SugarCube.State.variables.scenes.list) { let sceneObject = SugarCube.State.variables.scenes.list[scene]; let type = sceneObject.stage; if (sceneObject.category != categoryKey) { continue; } seen_scene(sceneObject, type); countScenes2(sceneObject, type); } // Update the UI with the counter values var counterElements = document.querySelectorAll("[counterScene]"); for (let element of counterElements) { let type = element.getAttribute("counterScene"); if (counter[type]) { // Check if the type exists in the counter element.innerHTML = `${counter[type][0]}/${counter[type][1]}`; } else { console.warn(`Counter element type "${type}" is not defined in the counter.`); } } var scrollableElement = document.querySelector('.scenes_template_container'); var leftArrow = document.querySelector('.scenes_arrow_left'); var rightArrow = document.querySelector('.scenes_arrow_right'); //var mainelement = document.querySelector('.scenes_icons') var mainelement = document.querySelector('.scenes_template_container>div') var scrollStep; function calculatedwidth(){ var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; console.log(width); var borderRightWidth = computedStyle.borderRightWidth; var borderLeftWidth = computedStyle.borderLeftWidth; var marginLeft = computedStyle.marginLeft; var marginRight = computedStyle.marginRight; var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); var borderRightWidthInt = parseInt(borderRightWidth, 10); var borderLeftWidthInt = parseInt(borderLeftWidth, 10); scrollStep = (widthInt + marginLeftInt + marginRightInt)*3.025; } function fadeOut(i) { var errorMargin = scrollableElement.scrollWidth * 0.05; var canScrollLeft = (i < 0); var canScrollRight = (i > 0); if (canScrollLeft || canScrollRight) { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); } else { return; } } leftArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(1); }); function goback(event){ event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("MENU main interface"); } } </script>\
<<nobr>> <div class="scenes_upper_div"> <div id="woman_and_scenes_button_scenes"> <img src="ressources/icons/13DA1.webp"> </div> <div class="parent_upper_mid"> <div class="scenes_character_image"> <img character="gabbie"> <div class="shadow"></div> </div> <div class="parent_counter"> <div class="total_scenes_counter"> <p counterScene="all">0/0</p> <img src="ressources/icons/13C16.webp"> </div> <div class="scenes_counter"> <div class="scenes_counter_type"> <p counterScene="beginning">0/0</p> <img src="ressources/maingui/sexuals/beginning.webp"> </div> <div class="scenes_counter_type"> <p counterScene="tease">0/0</p> <img src="ressources/maingui/sexuals/tease.webp"> </div> <div class="scenes_counter_type"> <p counterScene="titsjob">0/0</p> <img src="ressources/maingui/sexuals/boobjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="vaginal">0/0</p> <img src="ressources/maingui/sexuals/vaginal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="handjob">0/0</p> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="blowjob">0/0</p> <img src="ressources/maingui/sexuals/blowjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="anal">0/0</p> <img src="ressources/maingui/sexuals/anal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="extreme">0/0</p> <img src="ressources/maingui/sexuals/extreme.webp"> </div> </div> </div> </div> <div class="parent_upper_right"> <div onclick="SugarCube.Engine.play('MENU main interface')" id="scenes_goback_button"> Back </div> </div> </div> <div class="cheats_parent_bottom"> <div class="scenes_holy_div"> <div class="scenes_arrow_left"></div> <div class="scenes_template_container"> <!--div class="scenes_icons scenes_icon_unseen"> <img src="image_fapo/pngimg.com - face_PNG5646.webp"> <div class="shadow_1"></div> <div class="mech_icons"> <img src="image_fapo/ass.webp"> </div--> </div> <div class="scenes_arrow_right"></div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; position: relative; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-weight: bold; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Teko', sans-serif; } .scenes_upper_div { height: 32vh; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: center; } #woman_and_scenes_button_scenes{ height: 20vh; aspect-ratio: 1/1; border: solid 1vh ; border-radius: 125vh; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin-left: 5vh; border-color: rgb(73, 0, 0); position: relative; left : 7vh; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #woman_and_scenes_button_scenes img{ height: 65%; width: auto; display: flex; } .parent_upper_mid{ height: 32vh; width: 90vh; position: relative; display: flex; justify-content: space-between; } .scenes_character_image{ height: 23vh; aspect-ratio: 1/1; border: solid 1vh var(--theme-color); border-radius: 10%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; top: 7.5vh; left: 4.2vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_character_image img{ height: 100%; border-radius: 10%; position: relative; top: 11.5vh; } .shadow{ height: 100%; width: 100%; border-radius: 10%; box-shadow: inset 0 0 3vh 2vh #000000; z-index: 1; position: relative; top: -11.5vh; } .parent_upper_right { height: 30vh; width: 27vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; align-items: center; margin-right: 5vh; position: relative; } #scenes_goback_button{ height: 25%; width: 22vh; padding-top: 0.5vh; right: 4vh; position:relative; top: -1vh; border-radius: 2vh; font-size: 5vh; border:solid 0.7vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #scenes_goback_button:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .scenes_fight_button { height: 16vh; width: 20vh; border: solid 0.75vh; border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 3.5vh; cursor: pointer; padding-top: 0.5vw; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: 2vh; } .scenes_fight_button:hover{ background-color: rgba(44, 43, 43, 0.5); border: solid 0.75vh rgb(164, 163, 162); } .scenes_fight_button img{ height: 10vh; width: auto; display: flex; margin-bottom: 1vh; } .scenes_fight_button p{ width: 15vh; margin: 0; } .parent_counter{ height: 32vh; width: 45vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; } .total_scenes_counter{ background-color: rgb(17, 17, 17); height: 8vh; width: 18vh; border-radius: 1.5vh; z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 4vh; position: relative; top: 5vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 1); background-image: none; } .total_scenes_counter img{ height: 50%; width: auto; display: flex; margin-left: 1vh; padding-bottom: 0.5vh; } .total_scenes_counter p { margin-top: 4.6vh; } .scenes_counter{ height: 20vh; width: 45vh; align-content: flex-end; justify-content: center; border-radius: 2.5vh; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_counter_type{ height: 40%; width: 23%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; font-size: 2.5vh; position: relative; top: -1vh; } .scenes_counter_type p{ padding-top: 0.4vh; } .scenes_counter_type img{ height: 45%; width: auto; margin-right: 1vh; display: flex; margin-left: 1vh; } .scenes_holy_div{ height: 70vh; width: 120vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .scenes_arrow_left{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid var(--theme-color); position: relative; right: 1vh; bottom: 0.75vh } .scenes_arrow_left:hover{ transform: translatey(0.375vh); border-color: transparent rgba(255, 255, 255, 0.509) transparent transparent; } .scenes_arrow_right{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid var(--theme-color); position: relative; left: 1vh; bottom: 0.75vh } .scenes_arrow_right:hover{ transform: translatey(0.375vh); border-color: transparent transparent transparent rgba(255, 255, 255, 0.509); } .scenes_template_container{ height: 70vh; width: 93vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scenes_icons{ height: 25vh; width: 25vh; border: solid 0.75vh var(--theme-color); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icons:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .scenes_icons img{ height: 100%; width: 100%; object-fit: contain; border-radius: 3vh; } .mech_icons{ height: 6vh; width: auto; position: absolute; bottom: 16vh; right: 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; } .shadow_1{ height: 100%; width: 100%; border-radius: 2.5vh; box-shadow: inset 0 0 3vh 2vh #000000; position: absolute; z-index: 4; } .scenes_icon_unseen{ height: 25vh; width: 25vh; border: solid 0.75vh rgb(60, 59, 59); margin: 1vh; border-radius: 2.5vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icon_unseen img{ height: 100%; width: 100%; object-fit: contain; opacity: 0.5; filter: blur(0.4vh); -webkit-filter: blur(0.75vh); } .lock_icon{ height: 100%; width: 100%; position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; bottom: 0vh; } .lock_icon img{ height: 100%; object-fit: contain; opacity: 1; filter: blur(0px); } .cheats_parent_bottom { height: 70vh; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { /*var characterName = "gabbie"; // which character for Bordercolor // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[characterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[characterName].bordercolor); } else { console.warn(`Character "${characterName}" is not defined in the characters object.`); }*/ var themeCharacterName = "gabbie"; // which character for Bordercolor var categoryKey = "gabbie"; // which character for scenes // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[themeCharacterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[themeCharacterName].bordercolor); } else { //console.warn(`Character "${themeCharacterName}" is not defined in the characters object.`); } var scenes_template_container = document.querySelector('.scenes_template_container'); var illustration = { beginning: "ressources/maingui/sexuals/beginning.webp", tease: "ressources/maingui/sexuals/tease.webp", handjob: "ressources/maingui/sexuals/handjob.webp", titsjob: "ressources/maingui/sexuals/boobjob.webp", blowjob: "ressources/maingui/sexuals/blowjob.webp", vaginal : "ressources/maingui/sexuals/vaginal.webp", anal : "ressources/maingui/sexuals/anal.webp", extreme : "ressources/maingui/sexuals/extreme.webp", } function createelement(scene, type) { let divScenes_icons = document.createElement("div"); if (scene.seen === true || scene.unlocked === true) { divScenes_icons.classList.add("scenes_icons"); divScenes_icons.setAttribute('data-sceneP', scene.passageName); divScenes_icons.onclick = function() { //SugarCube.Engine.play(scene.passageName); explorePassage(scene); }; let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="mech_icons">' + '<img src="'+illustration[type]+'">'; divScenes_icons.innerHTML = inner; } else { divScenes_icons.classList.add("scenes_icon_unseen"); let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="lock_icon">' + '<img src="ressources/icons/13DB4.webp">'; divScenes_icons.innerHTML = inner; } return divScenes_icons; } var counter = { all: [0, 0], // seen/total beginning: [0, 0], tease: [0, 0], handjob: [0, 0], titsjob: [0, 0], blowjob: [0, 0], vaginal: [0, 0], anal: [0, 0], extreme: [0, 0], }; // Function to count scenes function countScenes2(scene, type) { if (counter[type]) { counter.all[1] += 1; counter[type][1] += 1; if (scene.seen === true || scene.unlocked === true) { counter.all[0] += 1; counter[type][0] += 1; } } } console.log("allo") function seen_scene(scene, type) { let constructedTemplate = createelement(scene, type); //scenes_template_container.innerHTML += constructedTemplate; scenes_template_container.appendChild(constructedTemplate) } /*var characterName = "gabbie"; // which caharcter for scenes if (SugarCube.State.variables.scenes.list[characterName]) { // Check if character scenes exist for (let type in SugarCube.State.variables.scenes.list[characterName]) { for (let scene in SugarCube.State.variables.scenes.list[characterName][type]) { var sceneObject = SugarCube.State.variables.scenes.list[characterName][type][scene] seen_scene(sceneObject, type); countScenes2(sceneObject, type); } } }*/ for (let scene in SugarCube.State.variables.scenes.list) { let sceneObject = SugarCube.State.variables.scenes.list[scene]; let type = sceneObject.stage; if (sceneObject.category != categoryKey) { continue; } seen_scene(sceneObject, type); countScenes2(sceneObject, type); } // Update the UI with the counter values var counterElements = document.querySelectorAll("[counterScene]"); for (let element of counterElements) { let type = element.getAttribute("counterScene"); if (counter[type]) { // Check if the type exists in the counter element.innerHTML = `${counter[type][0]}/${counter[type][1]}`; } else { console.warn(`Counter element type "${type}" is not defined in the counter.`); } } var scrollableElement = document.querySelector('.scenes_template_container'); var leftArrow = document.querySelector('.scenes_arrow_left'); var rightArrow = document.querySelector('.scenes_arrow_right'); //var mainelement = document.querySelector('.scenes_icons') var mainelement = document.querySelector('.scenes_template_container>div') var scrollStep; function calculatedwidth(){ var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; console.log(width); var borderRightWidth = computedStyle.borderRightWidth; var borderLeftWidth = computedStyle.borderLeftWidth; var marginLeft = computedStyle.marginLeft; var marginRight = computedStyle.marginRight; var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); var borderRightWidthInt = parseInt(borderRightWidth, 10); var borderLeftWidthInt = parseInt(borderLeftWidth, 10); scrollStep = (widthInt + marginLeftInt + marginRightInt)*3.025; } function fadeOut(i) { var errorMargin = scrollableElement.scrollWidth * 0.05; var canScrollLeft = (i < 0); var canScrollRight = (i > 0); if (canScrollLeft || canScrollRight) { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); } else { return; } } leftArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(1); }); function goback(event){ event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("MENU main interface"); } } </script>\
<<nobr>> <div class="scenes_upper_div"> <div id="woman_and_scenes_button_scenes"> <img src="ressources/icons/13DA1.webp"> </div> <div class="parent_upper_mid"> <div class="scenes_character_image"> <img character="angela"> <div class="shadow"></div> </div> <div class="parent_counter"> <div class="total_scenes_counter"> <p counterScene="all">0/0</p> <img src="ressources/icons/13C16.webp"> </div> <div class="scenes_counter"> <div class="scenes_counter_type"> <p counterScene="beginning">0/0</p> <img src="ressources/maingui/sexuals/beginning.webp"> </div> <div class="scenes_counter_type"> <p counterScene="tease">0/0</p> <img src="ressources/maingui/sexuals/tease.webp"> </div> <div class="scenes_counter_type"> <p counterScene="titsjob">0/0</p> <img src="ressources/maingui/sexuals/boobjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="vaginal">0/0</p> <img src="ressources/maingui/sexuals/vaginal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="handjob">0/0</p> <img src="ressources/maingui/sexuals/handjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="blowjob">0/0</p> <img src="ressources/maingui/sexuals/blowjob.webp"> </div> <div class="scenes_counter_type"> <p counterScene="anal">0/0</p> <img src="ressources/maingui/sexuals/anal.webp"> </div> <div class="scenes_counter_type"> <p counterScene="extreme">0/0</p> <img src="ressources/maingui/sexuals/extreme.webp"> </div> </div> </div> </div> <div class="parent_upper_right"> <div onclick="SugarCube.Engine.play('MENU main interface')" id="scenes_goback_button"> Back </div> </div> </div> <div class="cheats_parent_bottom"> <div class="scenes_holy_div"> <div class="scenes_arrow_left"></div> <div class="scenes_template_container"> <!--div class="scenes_icons scenes_icon_unseen"> <img src="image_fapo/pngimg.com - face_PNG5646.webp"> <div class="shadow_1"></div> <div class="mech_icons"> <img src="image_fapo/ass.webp"> </div--> </div> <div class="scenes_arrow_right"></div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; position: relative; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; font-weight: bold; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Teko', sans-serif; } .scenes_upper_div { height: 32vh; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-between; align-items: center; } #woman_and_scenes_button_scenes{ height: 20vh; aspect-ratio: 1/1; border: solid 1vh ; border-radius: 125vh; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; margin-left: 5vh; border-color: rgb(73, 0, 0); position: relative; left : 7vh; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #woman_and_scenes_button_scenes img{ height: 65%; width: auto; display: flex; } .parent_upper_mid{ height: 32vh; width: 90vh; position: relative; display: flex; justify-content: space-between; } .scenes_character_image{ height: 23vh; aspect-ratio: 1/1; border: solid 1vh var(--theme-color); border-radius: 10%; background-color: rgba(44, 133, 160, 0); transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; position: relative; top: 7.5vh; left: 4.2vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_character_image img{ height: 100%; border-radius: 10%; position: relative; top: 11.5vh; } .shadow{ height: 100%; width: 100%; border-radius: 10%; box-shadow: inset 0 0 3vh 2vh #000000; z-index: 1; position: relative; top: -11.5vh; } .parent_upper_right { height: 30vh; width: 27vh; display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-around; justify-content: center; align-items: center; margin-right: 5vh; position: relative; } #scenes_goback_button{ height: 25%; width: 22vh; padding-top: 0.5vh; right: 4vh; position:relative; top: -1vh; border-radius: 2vh; font-size: 5vh; border:solid 0.7vh rgba(73, 0, 0, 0.973); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-family: 'Teko', sans-serif; transition: all 0.1s ease-in-out; cursor: pointer; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; } #scenes_goback_button:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .scenes_fight_button { height: 16vh; width: 20vh; border: solid 0.75vh; border-radius: 1vh; transition: all 0.1s ease-in-out; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; font-size: 3.5vh; cursor: pointer; padding-top: 0.5vw; border-color: var(--theme-color); flex-direction: row; text-align: center; position: relative; top: 2vh; } .scenes_fight_button:hover{ background-color: rgba(44, 43, 43, 0.5); border: solid 0.75vh rgb(164, 163, 162); } .scenes_fight_button img{ height: 10vh; width: auto; display: flex; margin-bottom: 1vh; } .scenes_fight_button p{ width: 15vh; margin: 0; } .parent_counter{ height: 32vh; width: 45vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; align-items: center; } .total_scenes_counter{ background-color: rgb(17, 17, 17); height: 8vh; width: 18vh; border-radius: 1.5vh; z-index: 2; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; font-size: 4vh; position: relative; top: 5vh; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 1); background-image: none; } .total_scenes_counter img{ height: 50%; width: auto; display: flex; margin-left: 1vh; padding-bottom: 0.5vh; } .total_scenes_counter p { margin-top: 4.6vh; } .scenes_counter{ height: 20vh; width: 45vh; align-content: flex-end; justify-content: center; border-radius: 2.5vh; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_counter_type{ height: 40%; width: 23%; display: flex; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; font-size: 2.5vh; position: relative; top: -1vh; } .scenes_counter_type p{ padding-top: 0.4vh; } .scenes_counter_type img{ height: 45%; width: auto; margin-right: 1vh; display: flex; margin-left: 1vh; } .scenes_holy_div{ height: 70vh; width: 120vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; } .scenes_arrow_left{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-right: 5vh solid var(--theme-color); position: relative; right: 1vh; bottom: 0.75vh } .scenes_arrow_left:hover{ transform: translatey(0.375vh); border-color: transparent rgba(255, 255, 255, 0.509) transparent transparent; } .scenes_arrow_right{ width: 0; height: 0; margin-left: 8; border-bottom: 5vh solid transparent; border-top: 5vh solid transparent; transition: all 0.1s ease-in-out; cursor: pointer; border-left: 5vh solid var(--theme-color); position: relative; left: 1vh; bottom: 0.75vh } .scenes_arrow_right:hover{ transform: translatey(0.375vh); border-color: transparent transparent transparent rgba(255, 255, 255, 0.509); } .scenes_template_container{ height: 70vh; width: 93vh; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; overflow-x: hidden; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scenes_icons{ height: 25vh; width: 25vh; border: solid 0.75vh var(--theme-color); margin: 1vh; border-radius: 3vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; cursor: pointer; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icons:hover{ background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw var(--theme-color), 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); text-shadow: 0 0 1vw var(--theme-color), 0 0 1.5vw var(--theme-color), 0 0 2vw var(--theme-color); } .scenes_icons img{ height: 100%; width: 100%; object-fit: contain; border-radius: 3vh; } .mech_icons{ height: 6vh; width: auto; position: absolute; bottom: 16vh; right: 16vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; } .shadow_1{ height: 100%; width: 100%; border-radius: 2.5vh; box-shadow: inset 0 0 3vh 2vh #000000; position: absolute; z-index: 4; } .scenes_icon_unseen{ height: 25vh; width: 25vh; border: solid 0.75vh rgb(60, 59, 59); margin: 1vh; border-radius: 2.5vh; margin: 3vh; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; box-sizing: border-box; border: 3px solid var(--theme-color); text-shadow: 0px 0px 8px var(--theme-color), 0px 0px 16px var(--theme-color), 0px 0px 24px var(--theme-color);/* For centering text */ box-shadow: inset 0 0 0.5vw var(--theme-color), 0 0 0.5vw var(--theme-color), 0 0 1vw var(--theme-color); background-color: rgba(0, 0, 0, 0.8); background-image: none; } .scenes_icon_unseen img{ height: 100%; width: 100%; object-fit: contain; opacity: 0.5; filter: blur(0.4vh); -webkit-filter: blur(0.75vh); } .lock_icon{ height: 100%; width: 100%; position: absolute; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; z-index: 5; margin-top: 1vh; bottom: 0vh; } .lock_icon img{ height: 100%; object-fit: contain; opacity: 1; filter: blur(0px); } .cheats_parent_bottom { height: 70vh; width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; position: relative; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { /*var characterName = "lana"; // which character for Bordercolor // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[characterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[characterName].bordercolor); } else { console.warn(`Character "${characterName}" is not defined in the characters object.`); }*/ var themeCharacterName = "angela"; // which character for Bordercolor var categoryKey = "angela"; // which character for scenes // set root var(--theme-color) to character color if (SugarCube.State.variables.characters[themeCharacterName]) { document.documentElement.style.setProperty('--theme-color', SugarCube.State.variables.characters[themeCharacterName].bordercolor); } else { //console.warn(`Character "${themeCharacterName}" is not defined in the characters object.`); } var scenes_template_container = document.querySelector('.scenes_template_container'); var illustration = { beginning: "ressources/maingui/sexuals/beginning.webp", tease: "ressources/maingui/sexuals/tease.webp", handjob: "ressources/maingui/sexuals/handjob.webp", titsjob: "ressources/maingui/sexuals/boobjob.webp", blowjob: "ressources/maingui/sexuals/blowjob.webp", vaginal : "ressources/maingui/sexuals/vaginal.webp", anal : "ressources/maingui/sexuals/anal.webp", extreme : "ressources/maingui/sexuals/extreme.webp", } function createelement(scene, type) { let divScenes_icons = document.createElement("div"); if (scene.seen === true || scene.unlocked === true) { divScenes_icons.classList.add("scenes_icons"); divScenes_icons.setAttribute('data-sceneP', scene.passageName); divScenes_icons.onclick = function() { //SugarCube.Engine.play(scene.passageName); explorePassage(scene); }; let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="mech_icons">' + '<img src="'+illustration[type]+'">'; divScenes_icons.innerHTML = inner; } else { divScenes_icons.classList.add("scenes_icon_unseen"); let inner = '<img src="'+scene.screenShot+'">'+ '<div class="shadow_1"></div>' + '<div class="lock_icon">' + '<img src="ressources/icons/13DB4.webp">'; divScenes_icons.innerHTML = inner; } return divScenes_icons; } var counter = { all: [0, 0], // seen/total beginning: [0, 0], tease: [0, 0], handjob: [0, 0], titsjob: [0, 0], blowjob: [0, 0], vaginal: [0, 0], anal: [0, 0], extreme: [0, 0], }; // Function to count scenes function countScenes2(scene, type) { if (counter[type]) { counter.all[1] += 1; counter[type][1] += 1; if (scene.seen === true || scene.unlocked === true) { counter.all[0] += 1; counter[type][0] += 1; } } } console.log("allo") function seen_scene(scene, type) { let constructedTemplate = createelement(scene, type); //scenes_template_container.innerHTML += constructedTemplate; scenes_template_container.appendChild(constructedTemplate) } /*var characterName = "lana"; // which caharcter for scenes if (SugarCube.State.variables.scenes.list[characterName]) { // Check if character scenes exist for (let type in SugarCube.State.variables.scenes.list[characterName]) { for (let scene in SugarCube.State.variables.scenes.list[characterName][type]) { var sceneObject = SugarCube.State.variables.scenes.list[characterName][type][scene] seen_scene(sceneObject, type); countScenes2(sceneObject, type); } } }*/ for (let scene in SugarCube.State.variables.scenes.list) { let sceneObject = SugarCube.State.variables.scenes.list[scene]; let type = sceneObject.stage; if (sceneObject.category != categoryKey) { continue; } seen_scene(sceneObject, type); countScenes2(sceneObject, type); } // Update the UI with the counter values var counterElements = document.querySelectorAll("[counterScene]"); for (let element of counterElements) { let type = element.getAttribute("counterScene"); if (counter[type]) { // Check if the type exists in the counter element.innerHTML = `${counter[type][0]}/${counter[type][1]}`; } else { console.warn(`Counter element type "${type}" is not defined in the counter.`); } } var scrollableElement = document.querySelector('.scenes_template_container'); var leftArrow = document.querySelector('.scenes_arrow_left'); var rightArrow = document.querySelector('.scenes_arrow_right'); //var mainelement = document.querySelector('.scenes_icons') var mainelement = document.querySelector('.scenes_template_container>div') var scrollStep; function calculatedwidth(){ var computedStyle = window.getComputedStyle(mainelement); var width = computedStyle.width; console.log(width); var borderRightWidth = computedStyle.borderRightWidth; var borderLeftWidth = computedStyle.borderLeftWidth; var marginLeft = computedStyle.marginLeft; var marginRight = computedStyle.marginRight; var widthInt = parseInt(width, 10); var marginLeftInt = parseInt(marginLeft, 10); var marginRightInt = parseInt(marginRight, 10); var borderRightWidthInt = parseInt(borderRightWidth, 10); var borderLeftWidthInt = parseInt(borderLeftWidth, 10); scrollStep = (widthInt + marginLeftInt + marginRightInt)*3.025; } function fadeOut(i) { var errorMargin = scrollableElement.scrollWidth * 0.05; var canScrollLeft = (i < 0); var canScrollRight = (i > 0); if (canScrollLeft || canScrollRight) { scrollableElement.scrollBy({ left: scrollStep * i, behavior: "smooth" }); } else { return; } } leftArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(-1); }); rightArrow.addEventListener('click', function() { calculatedwidth(); fadeOut(1); }); function goback(event){ event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("MENU main interface"); } } </script>\
<<nobr>> <div class="A_left"> <div class="B_Ltop"> <div class="C_cible"> <img src="./ressources/angela/goals/target.webp"> </div> <div class="C_trophy"> <graph> <img src="./ressources/angela/goals/trophy.webp"> </graph> <desc>PLACE-HOLDER</desc> </div> <div class="C_quest"> <graph> <img src="./ressources/angela/goals/quest.webp"> </graph> <desc>PLACE-HOLDER</desc> </div> </div> <div class="B_Lbottom"> <div class="C_wastelands"> <div class="D_wastelands"> <div class="E_wastelands E_wastelandsBottom"> <bar></bar> </div> <div class="E_wastelands E_wastelandsTop"> <bob class="Big_bob"></bob> <bob></bob><bob></bob><bob></bob><bob></bob> </div> </div> <div class="D_Lbottom_texte_Wastelands">Wastelands</div> </div> <div class="C_forest"> <div class="D_forest"> <div class="E_forest E_forestBottom"> <bar></bar> </div> <div class="E_forest E_forestTop"> <bob class="Big_bob"></bob> <bob></bob><bob></bob><bob></bob><bob></bob> </div> </div> <div class="D_Lbottom_texte_Forest">Forest</div> </div> </div> </div> <div class="A_right"> <div class="B_Rtop"> <div class="C_progress"> <div class="D_progress"> </div> <desc>Districts Built</desc> </div> <div class="C_back"> <button type="button" id="D_button" data-passage="New">Go Back</button> </div> </div> <div class="B_Rbottom"> <div class="D_womenStats"> <div class="DE_womenStats"> <div class="E_womenStats E_womenStatsBottom"> <bar></bar> </div> <div class="E_womenStats E_womenStatsTop"> <bob></bob><bob></bob><bob></bob> <bob></bob><bob></bob><bob></bob> </div> </div> <div class="DE_womenStatsImg"></div> </div> <div class="D_womenStats"> <div class="DE_womenStats"> <div class="E_womenStats E_womenStatsBottom"> <bar></bar> </div> <div class="E_womenStats E_womenStatsTop"> <bob></bob><bob></bob><bob></bob> <bob></bob><bob></bob><bob></bob> </div> </div> <div class="DE_womenStatsImg"></div> </div> <div class="D_womenStats"> <div class="DE_womenStats"> <div class="E_womenStats E_womenStatsBottom"> <bar></bar> </div> <div class="E_womenStats E_womenStatsTop"> <bob></bob><bob></bob><bob></bob> <bob></bob><bob></bob><bob></bob> </div> </div> <div class="DE_womenStatsImg"></div> </div> <div class="D_womenStats"> <div class="DE_womenStats"> <div class="E_womenStats E_womenStatsBottom"> <bar></bar> </div> <div class="E_womenStats E_womenStatsTop"> <bob></bob><bob></bob><bob></bob> <bob></bob><bob></bob><bob></bob> </div> </div> <div class="DE_womenStatsImg"></div> </div> </div> </div> <</nobr>>\ <style> /*body{ margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; background-color: rgba(0, 0, 0, 0.88); overflow: hidden; color: white; font-size: 2vh; font-family: 'Roboto', sans-serif; }*/ #passages{ margin: 0; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 18em; } .passage{ margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; overflow: hidden; color: white; font-size: 2vh; font-family: 'Roboto', sans-serif; } .A_left{ height: 100%; width: 50%; display: flex; flex-direction: column; } .B_Ltop{ height: 23%; width: 100%; display: flex; justify-content: space-evenly; flex-direction: row; align-items: center; } .C_cible{ height: 70%; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; border: solid 0.5vh #e14900; border-radius: 50%; } .C_cible img{ aspect-ratio: 1/1; height: 80%; max-width: 100%; object-fit: cover; } .C_trophy, .C_quest{ height: 70%; /*aspect-ratio: 4/5;*/ /*firefox going nuts with this one YAHOO*/ width: 13vh; text-align: center; } /*.C_trophy{ }*/ graph{ display: block; background-color: rgb(110, 69, 69); width: 100%; aspect-ratio: 1/1; box-sizing: border-box; border-radius: 50%; /*background: conic-gradient(yellow 0%, rgb(26, 26, 26) 0%);*/ /*TODO transition to fill the background*/ display: flex; justify-content: center; align-items: center; } graph img{ aspect-ratio: 1/1; height: 80%; object-fit: cover; border-radius: 20%; mix-blend-mode: hard-light; } .C_trophy desc, .C_quest desc{ margin: 0.3vh; display: block; } .B_Lbottom{ height: 77%; width: 100%; display: flex; justify-content: space-evenly; flex-direction: row; flex-wrap: nowrap; } .C_wastelands{ height: 100%; width: 20vh; } .D_wastelands, .D_forest{ height: 90%; width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; } .E_wastelands, .E_forest{ height: 100%; width: 100%; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; } /*.E_wastelandsBottom{ }*/ .E_wastelandsBottom bar, .E_forestBottom bar{ /*background-image: linear-gradient(to top, #EE7876 20%, #5C5C5C 20%);*/ height: 80%; width: 4.5vh; } .E_wastelandsTop, .E_forestTop{ justify-content: space-around; } .E_wastelandsTop bob, .E_forestTop bob{ width: 9vh; aspect-ratio: 1/1; margin: 0.5vh; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.40) 0px 5px 15px; display: flex; justify-content: center; align-items: center; } .Big_bob{ width: 11vh !important; } .E_wastelands bob img, .E_forest bob img{ aspect-ratio: 1/1; height: 90%; max-width: 100%; object-fit: cover; border-radius: 50%; } .Big_bob img{ aspect-ratio: 1/1; height: 90%; max-width: 100%; object-fit: cover; border-radius: 50%; } .D_Lbottom_texte_Wastelands, .D_Lbottom_texte_Forest{ /*height: 17%;*/ width: 100%; display: flex; justify-content: center; margin-top: 1vh; font-size: 1.2em; font-weight: bold; } .C_forest{ height: 100%; width: 20vh; } .A_right{ height: 100%; width: 50%; display: flex; flex-direction: column; } .B_Rtop{ height: 18%; width: 100%; display: flex; } .C_progress{ height: 100%; width: 60%; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; } .C_progress desc{ margin: 0.9vh; display: block; font-size: 1.2em; } .D_progress{ max-width: 100%; background-color: #262626; height: 50%; padding: 0 0.3vh; border: solid 0.5vh #BFBFBF; border-radius: 1vh; box-sizing: border-box; /*outline: solid 0.5vh #BFBFBF;*/ display: flex; justify-content: start; align-items: center; } .D_progress div{ background-color: #BFBFBF; height: 85%; width: 3vh; margin: 0.3vh; border-radius: 0.5vh; } .locked{ background-color: rgba(191, 191, 191, 0.1) !important; } .C_back{ height: 100%; width: 40%; display: flex; justify-content: end; } #D_button{ background-color: #262626; border: solid 0.5vh #C00000; height: 8vh; aspect-ratio: 5/2; margin-top: 1.5vh; margin-right: 1.5vh; border-radius: 1vh; color: inherit; font-size: 1.5em; font-weight: bold; cursor: pointer; } .B_Rbottom{ height: 100%; width: 100%; max-width: 60vh; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-evenly; } .D_womenStats{ height: 100%; margin: 0 1vh; width: 80%; position: relative; display: flex; flex-direction: column; align-items: center; } .DE_womenStats{ height: 86%; width: 100%; position: relative; } .DE_womenStatsImg{ height: 13%; width: 100%; text-align: center; } .DE_womenStatsImg img{ aspect-ratio: 1/1; height: 100%; max-width: 100%; object-fit: cover; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.40) 0px 5px 15px; } .E_womenStats{ position: absolute; height: 100%; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; flex-direction: column-reverse !important; } /*.E_womenStatsBottom{ }*/ .E_womenStatsBottom bar{ /*background-image: linear-gradient(to top, #EE7876 0%, #5C5C5C 0%);*/ height: 84%; width: 4.5vh; } .E_womenStatsTop{ align-content: space-around; flex-direction: column; } .E_womenStatsTop bob{ /*background-color: rgba(255, 255, 255, 0.534);*/ width: 9vh; aspect-ratio: 1/1; margin: 0.5vh; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.40) 0px 5px 15px; display: flex; justify-content: center; align-items: center; } .E_womenStats bob img{ aspect-ratio: 1/1; height: 80%; max-width: 100%; object-fit: cover; border-radius: 20%; } </style>\ <script> // ------- Data ------- var womenStats = [ { name: "cherie", infill_color : "#EE7876", }, { name: "lana", infill_color : "#AB8FD3", }, { name: "elfie", infill_color : "#AE00AE", }, { name: "gabbie", infill_color : "#7EADEF", } ] var emptycolor = "#5C5C5C"; // var womenStatsImages = [ "./ressources/angela/goals/eye.webp", "./ressources/angela/goals/handjob.webp", "./ressources/angela/goals/boobs.webp", "./ressources/angela/goals/blowjob.webp", "./ressources/angela/goals/pussy.webp", "./ressources/angela/goals/ass.webp", ] var wastelandsProgress = 5; //0 to 5 var wastelandsColor = "#FE9E42"; var wastelandsCharacters = [ "peta", "eva", "abella", "lisa", //"johny", "ava", ] var forestProgress = 5; //0 to 5 var forestColor = "#B0D861"; var forestCharacters = [ "dimitrescu", "alexsraza", "sylvanas", //"gaia", "athena", "lilith", ] var DistrictsBuiltProgress = 7; var DistrictsBuiltTotal = 9; // ------- functions ------- function checkScenes(name){ if (name == undefined || name == null) {return;} if (SugarCube.State.variables.characters[name].scenes == undefined || SugarCube.State.variables.characters[name].scenes == null) {return;} let arr = []; for (key in SugarCube.State.variables.characters[name].scenes) { arr[key] = 0; for (key2 in SugarCube.State.variables.characters[name].scenes[key]) { if (SugarCube.State.variables.characters[name].scenes[key][key2] > 0) { arr[key] = 1; break; } } } return arr; } // ------- Trophy ------- var trophyTotal = Object.keys(SugarCube.State.variables.trophy.list).length; var trophyProgress = 0; for (key in SugarCube.State.variables.trophy.list) { if (SugarCube.State.variables.trophy.list[key].unlocked == 2) { // 0 = locked, 1 = unlocked, 2 = completed trophyProgress++; } } var C_trophy = document.querySelector(".C_trophy") var trophy_percent = (trophyProgress / trophyTotal )*100; C_trophy.querySelector("graph").style.background = `conic-gradient(rgb(255,180,0) ${trophy_percent}%, rgb(26, 26, 26) ${trophy_percent}%)`; C_trophy.querySelector("desc").innerHTML = `${trophyProgress}/${trophyTotal}`; // ------- Quest ------- var questTotal = Object.keys(SugarCube.State.variables.quest.list).length; var questProgress = 0; for (key in SugarCube.State.variables.quest.list) { if (SugarCube.State.variables.quest.list[key].unlocked == 2) { questProgress++; } } var C_quest = document.querySelector(".C_quest") var quest_percent = (questProgress / questTotal )*100; C_quest.querySelector("graph").style.background = `conic-gradient(rgb(255,180,0) ${quest_percent}%, rgb(26, 26, 26) ${quest_percent}%)`; C_quest.querySelector("desc").innerHTML = `${questProgress}/${questTotal}`; // ------- Disctricts Progress ------- var D_progress = document.querySelector(".D_progress"); for (let i = 0; i < DistrictsBuiltTotal; i++) { let div = document.createElement('div'); if (i >= DistrictsBuiltProgress) { div.classList.add("locked"); } D_progress.appendChild(div); } // ------- WomenStats ------- // --- Bottom bar --- var womenStatsBottom = document.querySelectorAll(".E_womenStatsBottom"); womenStatsBottom.forEach((element, index) => { let obj = checkScenes(womenStats[index].name) let obj_lenght = Object.keys(obj).length; let progress_max = 0; for (let i = obj_lenght; i >= 0; i--) { // find the highest progress value if (Object.values(obj)[i] == 1) { progress_max = i; break; } } var barElement = element.querySelector("bar"); let fillcolor = womenStats[index].infill_color; let percentage = (progress_max / (obj_lenght - 1)) * 100; barElement.style.backgroundImage = `linear-gradient(to top, ${fillcolor} ${percentage}%, ${emptycolor} ${percentage}%)`; }); // --- Top bobbles --- var womenStatsTop = document.querySelectorAll(".E_womenStatsTop"); womenStatsTop.forEach((element, index) => { let progress = womenStats[index].progress; let progress2 = checkScenes(womenStats[index].name); let bobElements = element.querySelectorAll("bob"); let parentIndex = index; bobElements.forEach((element, index) => { if (Object.values(progress2)[index]) { element.style.backgroundColor = womenStats[parentIndex].infill_color; let imgElement = document.createElement('img'); imgElement.src = womenStatsImages[index]; element.appendChild(imgElement); } else { element.style.backgroundColor = emptycolor; } }); }); // --- Bottom Images --- var DE_womenStatsImg = document.querySelectorAll(".DE_womenStatsImg"); DE_womenStatsImg.forEach((element, index) => { let imgElement = document.createElement('img'); imgElement.src = SugarCube.State.variables.characters[womenStats[index].name].image; element.appendChild(imgElement); }); // ------- WASTELANDS ------- var E_wastelandsBottomBar = document.querySelector(".E_wastelandsBottom bar"); var fillcolor = wastelandsColor; var percentage = (wastelandsProgress - 1) * 25; E_wastelandsBottomBar.style.backgroundImage = `linear-gradient(to top, ${fillcolor} ${percentage}%, ${emptycolor} ${percentage}%)`; document.querySelector(".D_Lbottom_texte_Wastelands").style.color = wastelandsColor; var E_wastelandsTop = document.querySelector(".E_wastelandsTop"); var wastelandsbobElements = E_wastelandsTop.querySelectorAll("bob") // Iterate through the wastelandsImages array and apply the image wastelandsbobElements.forEach((element, index) => { index = wastelandsbobElements.length - 1 - index; if (index < wastelandsProgress) { element.style.backgroundColor = wastelandsColor; let imgElement = document.createElement('img'); //imgElement.src = wastelandsImages[index]; imgElement.src = SugarCube.State.variables.characters[wastelandsCharacters[index]].image; element.appendChild(imgElement); } else { element.style.backgroundColor = emptycolor; } }); // ------- FOREST ------- var E_forestBottomBar = document.querySelector(".E_forestBottom bar"); fillcolor = forestColor; percentage = (forestProgress - 1) * 25; E_forestBottomBar.style.backgroundImage = `linear-gradient(to top, ${fillcolor} ${percentage}%, ${emptycolor} ${percentage}%)`; document.querySelector(".D_Lbottom_texte_Forest").style.color = forestColor; var E_forestTop = document.querySelector(".E_forestTop"); var forestbobElements = E_forestTop.querySelectorAll("bob") // Iterate through the forestImages array and apply the image forestbobElements.forEach((element, index) => { index = forestbobElements.length - 1 - index; if (index < forestProgress) { element.style.backgroundColor = forestColor; let imgElement = document.createElement('img'); imgElement.src = SugarCube.State.variables.characters[forestCharacters[index]].image; element.appendChild(imgElement); } else { element.style.backgroundColor = emptycolor; } }); </script>\
<<nobr>> <div class="INVS_back"> <div class="INVS_main"> <div class="INVS_main_inventory"> <div class="INVS_main_inventory_out"> <div class="INVS_title_cont"> <div class="INVS_title">INVENTORY</div> <div class="INVS_exit_button" onclick="exitInventory()">Exit</div> <div class="INVS_sort_cont">Sort by  <div class="INVS_sort" sort_inv_type="inventory">Sample text</div> </div> </div> <div class="INVS_inventory_item_cont INVS_scroll" inv_type="inventory"> Something went wrong, contact devs via discord <!--div class="INVS_item_break">Crafting</div> <item class="INVS_inventory_item_div"> <img class="INVS_item_img" draggable="false" src="ressources/main_game_gui/items/equipments/sword_of_the_unfallen.webp" > <div class="INVS_item_text"> Sword of the Unfallen<br>1 </div> </item--> </div> </div> <div class="INVS_main_inventory_desc"></div> <!--iframe style="width:40vh;height:30vh" src="https://www.youtube.com/embed/itEk-XktfV4?autoplay=1;controls=0" title="YouTube video player" frameborder="0" allow="autoplay;"></iframe--> </div> <div class="INVS_main_bank"> <div class="INVS_title_cont"> <div class="INVS_title">BANK</div> <div class="INVS_sort_cont">Sort by  <div class="INVS_sort" sort_inv_type="bank">Sample text</div> </div> </div> <div class="INVS_bank_item_cont INVS_scroll" inv_type="bank"> <div class="INVS_item_break INVS_scroll">Crafting</div> <item class="INVS_inventory_item_div"> <img class="INVS_item_img" draggable="false" src="ressources/main_game_gui/items/equipments/sword_of_the_unfallen.webp" > <div class="INVS_item_text"> Sword of the Unfallen<br>1 </div> </item> <!--item class="INVS_equip_item_div"> <img draggable="false" class="INVS_item_img" src=""> </item--> </div> </div> <div class="INVS_mouse_item_cont" inv_type="mouse"> <item> <!--img draggable="false" class="INVS_item_img" src="ressources/main_game_gui/items/equipments/sword_of_the_unfallen.webp"> <INVS_qty>1000</INVS_qty--> </item> </div> </div> </div> <</nobr>>\ <style> :root { --INVS_Font_Color: rgb(255, 255, 255); --INVS_desc_heigth: 15vh; } *{ box-sizing: border-box; } body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage); }, 40); } else { /* to include: inventoryGui.js */ /** TODO * - implement exit button * - implement the food scripts TO CHECK * - implement help button to feed the dragon ?? wtf did i meant by that */ // ------------------ Main Calls ------------------ function INVF_updateLvl1Functions() { // update everything except the externalInv.inventory //INVF_retrieveItemFromMouse(); INVF_setMainInvQty(); INVF_createListFromDB(SugarCube.State.variables.inventory.menuInv.inventory.list); INVF_checkQtyAllMenuInv(); // for all menuInv, if INVS_qty = 0, set to {} INVF_updateLvl2Functions(); } function INVF_updateLvl2Functions() { // update everything except the externalInv.inventory INVF_removeListeners(); INVF_clearAllInvGui(); // clear all the inventory GUI INVF_setSortButtonInnerHTML(); INVF_sortAllMenuInv(); INVF_fillAllInvGui(); //INVF_checkEquipmentBonus(); INVF_addListeners(); } var sort_list = ["quantity", "name", "type"]; // list of all the sorting options. see sort_inv() var invDivs = document.querySelectorAll('[inv_type]') var inv_desc = document.querySelector(".INVS_main_inventory_desc"); INVF_addSortListeners(); INVF_setupCoolThing(); INVF_addMouseFollow(); INVF_createListFromDB(SugarCube.State.variables.inventory.menuInv.inventory.list); INVF_updateLvl1Functions(); } </script>\
<<nobr>> <div class="INVS_back"> <div class="INVS_main"> <div class="INVS_main_consume"> <div class="INVS_consume_item_cont" inv_type="consume"> <!--item class="INVS_equip_item_div"> <img draggable="false" class="INVS_item_img" src=""> </item--> </div> <div class="INVS_consume_button" onclick="INVF_consumeItem()">CONSUME</div> </div> <div class="INVS_main_inventory"> <div class="INVS_main_inventory_out"> <div class="INVS_title_cont"> <div class="INVS_title">INVENTORY</div> <div class="INVS_exit_button" onclick="exitInventory()">Exit</div> <div class="INVS_sort_cont">Sort by  <div class="INVS_sort" sort_inv_type="inventory">Sample text</div> </div> </div> <div class="INVS_inventory_item_cont INVS_scroll" inv_type="inventory"> Something went wrong, contact devs via discord <!--div class="INVS_item_break">Crafting</div> <item class="INVS_inventory_item_div"> <img class="INVS_item_img" draggable="false" src="ressources/main_game_gui/items/equipments/sword_of_the_unfallen.webp" > <div class="INVS_item_text"> Sword of the Unfallen<br>1 </div> </item--> </div> </div> <div class="INVS_main_inventory_desc"></div> <!--iframe style="width:40vh;height:30vh" src="https://www.youtube.com/embed/itEk-XktfV4?autoplay=1;controls=0" title="YouTube video player" frameborder="0" allow="autoplay;"></iframe--> </div> <div class="INVS_main_equipment"> <div class="INVS_title_cont"> <div class="INVS_title">EQUIPMENT</div> </div> <div class="INVS_equipment_item_cont" inv_type="equipment"> <!--item class="INVS_equip_item_div"> <img draggable="false" class="INVS_item_img" src=""> </item--> </div> <div class="INVS_equip_separation"></div> <div class="INVS_equip_bonus_cont INVS_scroll"> <!--boost> <img src="ressources/main_game_gui/items/materials/wood.png"> <div> <name>TEST</name><br> <o>+2</o> AND <o>2x</o> boost </div> </boost--> </div> </div> <div class="INVS_mouse_item_cont" inv_type="mouse"> <item> <!--img draggable="false" class="INVS_item_img" src="ressources/main_game_gui/items/equipments/sword_of_the_unfallen.webp"> <INVS_qty>1000</INVS_qty--> </item> </div> </div> </div> <</nobr>>\ <style> :root { --INVS_Font_Color: rgb(255, 255, 255); --INVS_desc_heigth: 15vh; } *{ box-sizing: border-box; } body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; overflow: hidden; color: white; font-family: 'Roboto', sans-serif; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage); }, 10); } else { /** TODO * - implement exit button * - implement help button to feed the dragon ?? wtf did i meant by that */ // ------------------ Main Calls ------------------ function INVF_updateLvl1Functions() { // update everything except the externalInv.inventory //INVF_retrieveItemFromMouse(); INVF_setMainInvQty(); INVF_createListFromDB(SugarCube.State.variables.inventory.menuInv.inventory.list); INVF_checkQtyAllMenuInv(); // for all menuInv, if INVS_qty = 0, set to {} INVF_updateLvl2Functions(); typeof window.SB_mainRefresh !== 'undefined' && SB_mainRefresh(); //external function } function INVF_updateLvl2Functions() { // update everything except the externalInv.inventory INVF_removeListeners(); INVF_clearAllInvGui(); // clear all the inventory GUI INVF_setSortButtonInnerHTML(); INVF_sortAllMenuInv(); INVF_fillAllInvGui(); INVF_checkEquipmentBonus(); INVF_addListeners(); } var sort_list = ["quantity", "name", "type"]; // list of all the sorting options. see sort_inv() var invDivs = document.querySelectorAll('[inv_type]') var inv_desc = document.querySelector(".INVS_main_inventory_desc"); INVF_addSortListeners(); INVF_setupCoolThing(); INVF_addMouseFollow(); INVF_createListFromDB(SugarCube.State.variables.inventory.menuInv.inventory.list); INVF_updateLvl1Functions(); } </script>\
<<nobr>> <div class="INVS_back"> <div class="INVS_main"> <div class="INVS_main_inventory"> <div class="INVS_main_inventory_out"> <div class="INVS_title_cont"> <div class="INVS_title">INVENTORY</div> <div class="INVS_exit_button" onclick="exitInventory()">Exit</div> <div class="INVS_sort_cont">Sort by  <div class="INVS_sort" sort_inv_type="inventory">Sample text</div> </div> </div> <div class="INVS_inventory_item_cont INVS_scroll" inv_type="inventory"> Something went wrong, contact devs via discord <div class="INVS_item_break">Crafting</div> <item class="INVS_inventory_item_div"> <img class="INVS_item_img" draggable="false" src="ressources/main_game_gui/items/equipments/sword_of_the_unfallen.webp" > <div class="INVS_item_text"> Sword of the Unfallen<br>1 </div> </item> </div> </div> <div class="INVS_main_inventory_desc"></div> <!--iframe style="width:40vh;height:30vh" src="https://www.youtube.com/embed/itEk-XktfV4?autoplay=1;controls=0" title="YouTube video player" frameborder="0" allow="autoplay;"></iframe--> </div> <div class="INVS_main_food"> <div class="INVS_title_cont"> <div class="INVS_title">THE FRIDGE</div> </div> <div class="INVS_food_item_cont" inv_type="food"> <item class="INVS_food_item_div"> <img class="INVS_item_img" draggable="false" src="ressources/main_game_gui/items/equipments/sword_of_the_unfallen.webp" > <INVS_qty>1000</INVS_qty> </item> </div> <div class="INVS_food_separation"></div> <div class="INVS_food_info_cont"> <div>Consumption</div> <div> <qty class="INVS_QTY_total_consuption">20</qty> <img src="ressources/icons/IFA8.webp"> / Day <img src="ressources/maingui/ui/time.webp" style="height:3vh;filter:drop-shadow(0 200vh 0 rgb(180, 180, 180));transform:translateY(-200vh);"> </div> <div class="INVS_QTY_food_current"></div> <div>Current Storage</div> <div> <qty class="INVS_QTY_current_stock">20</qty> <img src="ressources/icons/IFA8.webp"> <qty class="INVS_QTY_days_until_empty" style="margin-left: 4vh;">20</qty> <img src="ressources/maingui/ui/time.webp" style="filter:drop-shadow(0 200vh 0 rgb(180, 180, 180));transform:translateY(-200vh);"> </div> </div> </div> <div class="INVS_mouse_item_cont" inv_type="mouse"> <item> <!--img draggable="false" class="INVS_item_img" src="ressources/main_game_gui/items/equipments/sword_of_the_unfallen.webp"> <INVS_qty>1000</INVS_qty--> </item> </div> </div> </div> <</nobr>>\ <style> :root { --INVS_Font_Color: rgb(255, 255, 255); --INVS_desc_heigth: 15vh; } *{ box-sizing: border-box; } body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 10); } else { // ------------------ Main Calls ------------------ function INVF_updateLvl1Functions() { // update everything except the externalInv.inventory INVF_setMainInvQty(); INVF_createListFromDB(SugarCube.State.variables.inventory.menuInv.inventory.list); INVF_checkQtyAllMenuInv(); // for all menuInv, if INVS_qty = 0, set to {} INVF_updateLvl2Functions(); } function INVF_updateLvl2Functions() { // update everything except the externalInv.inventory INVF_removeListeners(); INVF_clearAllInvGui(); // clear all the inventory GUI INVF_setSortButtonInnerHTML(); INVF_sortAllMenuInv(); INVF_fillAllInvGui(); //INVF_checkEquipmentBonus(); // equipment INVF_updateFoodInfo(); // food INVF_addListeners(); } var sort_list = ["quantity", "name", "type"]; // list of all the sorting options. see sort_inv() var invDivs = document.querySelectorAll('[inv_type]') var inv_desc = document.querySelector(".INVS_main_inventory_desc"); INVF_addSortListeners(); INVF_setupCoolThing(); INVF_addMouseFollow(); INVF_createListFromDB(SugarCube.State.variables.inventory.menuInv.inventory.list); INVF_updateLvl1Functions(); } </script>\
<!-- NEW INTRO -->\ <<script>> UIBar.stow(true); SugarCube.State.variables.gui_interface.angelaButtonEnable = false; /*SugarCube.State.variables.gui_interface.mapButtonEnable = false;*/ SugarCube.State.variables.gui_interface.inventoryButtonEnable = false; <</script>>\ <<nobr>> <div class="mainCont" style="top: 0; width: 100%; height: 100%;"> <video muted loop id="videobg1" class="videoback" preload="auto"> <source src="ressources/backgrounds/BA.webm" type="video/webm"> Your browser does not support the video tag. </video> <video muted loop id="videobg2" class="videofront" preload="auto"> <source src="ressources/backgrounds/BA2.webm" type="video/webm"> Your browser does not support the video tag. </video> <div class="text active" voiceId="1" unclickable> <div class="thetext"> <h1>Welcome</h1> <p style="text-align: center;"><b>PLEASE NOTE: THIS GAME IS IN EARLY ALPHA</b></p><br> <p>Dear adventurer, come warm yourself by the fire.</p><br> <p>We,</p> <p><img class="texticon3" src="ressources/maingui/logos/fapmat.webp">FapMat : Creator and Writer<br> <img class="texticon3" src="ressources/maingui/logos/faplaf.webp">FapLaf : Designer and Coder<br> <img class="texticon3" src="ressources/maingui/logos/fixfap.webp">FixFap : Lead Coder and R&D<br> <img class="texticon3" src="ressources/maingui/logos/paqfap.webp">˚₊‧✩𝓒𝓻𝔂𝓼𝓽𝓪𝓵𝓵𝓲𝓪✩‧₊˚ : Community Driver </p> <p>Welcome you to this post-apocalyptic world that will become your epic tale.</p> <p>This game is made to be played with just one hand, leaving the other free to...pet your cat.</p> <p>We encourage you to join our <a class="textgroupicon" href="https://discord.gg/jEpjVQdXkX" target="_blank">Discord <img class="texticon2" src="ressources/maingui/medias/discord.webp"></a> community and help shape the dawn of The Fapocalypse.</p> <p>Please support us on <a class="textgroupicon" href="https://subscribestar.adult/fap-online-creation" target="_blank">Subscribestar <img class="texticon2" src="ressources/maingui/medias/ko-fi.webp"></a> so together we can mold this new world to your liking.</p> <p style="text-align: center; padding-top: 1vh;">Press Enter <img class="texticon" src="ressources/icons/BA1.webp"> / Click <img class="texticon" src="ressources/icons/7B.webp"> to continue</p> </div> </div> <div class="text" voiceId="2"> <div class="thetext"> <h1>What to expect?</h1> <p>If you're new here, let us summarize the essence of the game for you.</p> <p>This is a survival game in which you are the last man standing on earth following the arrival of a powerful, sexual virus.</p> <p>You are taken to a mysterious, remote island that serves as a confinement site where strange events and interesting encounters await you.</p> <p>It will be your role to care for the women dear to you and build yourself a harem worthy of the name.</p> <p>Also, it will be essential to defend yourself against and uncover the secrets surrounding this virus and the mysterious evil organization "the MAD."</p> <p>Masturbation and prosperity, my friends!</p> <p style="text-align: center; padding-top: 1vh;">Press Enter <img class="texticon" src="ressources/icons/BA1.webp"> / Click <img class="texticon" src="ressources/icons/7B.webp"> to continue</p> </div> </div> <div class="text" voiceId="3"> <div class="thetext"> <h1>Let's dive in</h1> <p>It's now time for you to take the big leap and join the world of The Fapocalypse.</p> <p>Get ready for a hardcore RPG with battles, items, attributes, epic locations and of course, relationships.</p> <p>Before you start your adventure, would you like to play the prologue or skip it? (We recommend playing the prologue on your first playthrough so you don't miss context).</p> <br> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick='SugarCube.State.variables.newGame.newgame=1; SugarCube.Engine.play("1SA");'> Skip the Prologue </div> <div class="neon-button2 prevent-default" onclick='SugarCube.Engine.play("BB1")'> Play the Prologue </div> </div> </div> </div> </div> <</nobr>>\ <style> #passages { margin: 0; max-width: 100%; } #story { overflow: hidden; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; max-width: 100%; font-size: 0.9vw; line-height: 0.2vw; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } .videofront { width: 100%; height: 100%; position: absolute; object-fit: cover; z-index: 3; pointer-events: none; } .videoback { width: 100%; height: 100%; position: absolute; object-fit: cover; z-index: 1; transform: scale(1.3); } .mainCont { position: relative; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; } .text { width: 60%; top: 50%; position: absolute; transform: translate(-50%, -60%); left: 50%; z-index: 2; background-color: rgba(0, 0, 0, 0.8); transition: transform 1s ease-in-out, background 1s ease-in-out, color 1s ease-in-out, box-shadow 0.3s ease; /* Add any other properties you want to transition */ box-shadow: 0 0 0.25vw var(--neon-color), 0 0 0.5vw var(--neon-color), inset 0 0 0.25vw var(--neon-color), inset 0 0 0.5vw var(--neon-color); /* margin: auto; */ border-radius: 1vw; pointer-events: none; font-size: 2.5vh; } .text:hover { box-shadow: 0 0 0.5vw var(--neon-color-hover), 0 0 1.5vw var(--neon-color-hover), inset 0 0 0.5vw var(--neon-color-hover), inset 0 0 1.5vw var(--neon-color-hover); background-color: rgba(0, 0, 0, 0.9); } .text { opacity: 0; transform: translateX(100%) rotateY(90deg); /* Initialize off-screen with a 3D rotation */ transform-style: preserve-3d; perspective: 1000px; } .text.active { animation: slideInFromRight 1s forwards; opacity: 1; transition: box-shadow 0.3s ease; pointer-events: auto; } .text.out { animation: slideOutToLeft 1s forwards; opacity: 1; transition: box-shadow 0.3s ease; } @keyframes slideInFromRight { from { transform: translate(100%, -60%); } to { transform: translate(-50%, -60%); } } @keyframes slideOutToLeft { from { transform: translate(-50%, -60%); } to { transform: translate(-200%, -60%); } } :root { --neon-color: rgba(255, 0, 0, 0.4); --neon-color-hover: rgba(255, 0, 0, 0.6); --scrollbar-thumb-color: rgba(255, 0, 0, 0.4); --scrollbar-track-color: rgba(0, 0, 0, 0.4); } @keyframes glow-animation { 0% { /* Increased glow size at 0% */ box-shadow: 0 0 8px rgba(255, 0, 0, 0.4), 0 0 16px rgba(255, 0, 0, 0.4), 0 0 24px rgba(255, 0, 0, 0.4); } 100% { /* Increased glow size at 100% */ box-shadow: 0 0 12px rgba(255, 0, 0, 0.4), 0 0 24px rgba(255, 0, 0, 0.4), 0 0 36px rgba(255, 0, 0, 0.4); } } .thetext { padding: 2vw; text-align: left; } .thetext p { margin-top: 0.5em; margin-bottom: 0.5em; } .texticon { width: 1%; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(188deg) brightness(102%) contrast(105%); transform: scale(4); padding-left: 0.7vw; padding-right: 0.7vw; margin: auto; margin-bottom: 0.2vh; } .texticon2 { height: 0.25em; transform: scale(4); padding-left: 0.7vw; padding-right: 0.7vw; margin: auto; margin-bottom: 0.2em; } .texticon3 { width: 1.2em; border-radius: 50%; padding: 0.5vh; margin-bottom: -0.4em; } .textgroupicon { transition: 0.3s ease all; } .textgroupicon:hover { opacity: 0.7; cursor: pointer; } </style>\ <script> //better ish checker: if (typeof Check_if_doc_is_loaded === 'undefined') { (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 50); } else { SugarCube.Engine.play(SugarCube.State.passage); } })(); } else { var currentPassageId = 'BA'; var nextPassageName = 'BB1'; var currentPassageKey = SugarCube.State.passage; var currentPassage = document.querySelector(".passage"); //=== background videos === var videobg1 = document.getElementById('videobg1'); var videobg2 = document.getElementById('videobg2'); var video1Ready = false; var video2Ready = false; function tryPlayVideos() { if (video1Ready && video2Ready) { videobg1.play(); videobg2.play(); } } videobg1.oncanplaythrough = function() { video1Ready = true; tryPlayVideos(); }; videobg2.oncanplaythrough = function() { video2Ready = true; tryPlayVideos(); }; videobg1.onended = function() { videobg1.currentTime = 0; videobg2.currentTime = 0; tryPlayVideos(); }; videobg2.onended = function() { videobg1.currentTime = 0; videobg2.currentTime = 0; tryPlayVideos(); }; //=== audio === /*function playAudioIntro(index) { playAudio("voice", `${currentPassageId}${index}.mp3`); }*/ //=== messages === var messages = document.querySelectorAll('.text'); var callCount = 0; var cooldownActive = false; var cooldownDuration = 2000; function showNextMessageIntro(event) { if (cooldownActive) { return; } cooldownActive = true; setTimeout(() => { cooldownActive = false; }, cooldownDuration); if (currentPassageKey != SugarCube.State.passage) { //edge case currentPassage.removeEventListener('click', showNextMessageIntro); document.removeEventListener('keydown', handleKeyDown); return; } // click condition if (event) { var message = event.target.closest('.text'); if (message) { if (message.hasAttribute('unclickable')) { return; } } if (event.target.closest('#nameModal')) { return; } } messages[callCount].classList.add('out'); //slide out callCount++; setTimeout((callCount) => { if (callCount < messages.length) { messages[callCount].classList.add('active'); //slide in //console.log('callCount', callCount); } else { stopAudio("voice"); setTimeout(() => { //console.log('next passage'); SugarCube.Engine.play(nextPassageName); }, 10); } }, 1000, callCount); // This should match the duration of the slide-out animation if (callCount >= messages.length) { currentPassage.removeEventListener('click', showNextMessageIntro); document.removeEventListener('keydown', handleKeyDown); return; } } function handleKeyDown(event) { if (event.key === "Enter") { showNextMessageIntro(event); } } currentPassage.addEventListener('click', showNextMessageIntro); document.addEventListener('keydown', handleKeyDown); function stopPropagationFunc(event) { event.stopPropagation(); // This prevents the click from reaching the document listener } // input condition currentPassage.querySelectorAll('.inline_Input').forEach((element) => { element.addEventListener('click', stopPropagationFunc); }); /*currentPassage.querySelector('#playerName').addEventListener('input', function () { this.style.width = this.value.length + 1 + 'ch'; SugarCube.State.variables.characters.mc.name = this.value; }); currentPassage.querySelector('#labelMother').addEventListener('input', function () { this.style.width = this.value.length + 1 + 'ch'; SugarCube.State.variables.characters.cherie.role = this.value; }); currentPassage.querySelector('#labelSister1').addEventListener('input', function () { this.style.width = this.value.length + 1 + 'ch'; SugarCube.State.variables.characters.lana.role = this.value; }); currentPassage.querySelector('#labelSister2').addEventListener('input', function () { this.style.width = this.value.length + 1 + 'ch'; SugarCube.State.variables.characters.elfie.role = this.value; });*/ } </script>\
<<nobr>> <<script>> playAudio("music", "prologue_BB2"); stopAudio("voice"); <</script>> <div id="responsive-polygon-base"> <<if $specpass.BB2 is 1 && $specpass.BB3 is 1 && $specpass.BB4 is 1>> <div style="bottom: 30%; left: 19%"><pguider mapCheck="1"><img src="./ressources/icons/13A11.webp"></pguider></div> <!-- living room --> <</if>> <div style="bottom: 82%; left: 62%"><pguider mapCheck="2"><img src="./ressources/icons/13A11.webp"></pguider></div> <!-- Elfie room --> <div style="bottom: 83%; left: 20%"><pguider mapCheck="3"><img src="./ressources/icons/13A11.webp"></pguider></div> <!-- John and Cherie --> <div style="bottom: 86%; left: 84%"><pguider mapCheck="6"><img src="./ressources/icons/13A11.webp"></pguider></div> <!-- Lana room --> </div> <div id="responsive-polygon" onclick="SugarCube.Engine.play('BB7')" class="resize"></div> <!-- kitchen --> <<if $specpass.BB2 is 0 || $specpass.BB3 is 0 || $specpass.BB4 is 0>> <div id="responsive-polygon2" onclick="SugarCube.Engine.play('BB5')" class="resize"></div> <!-- living room --> <</if>> <<if $specpass.BB2 is 1 && $specpass.BB3 is 1 && $specpass.BB4 is 1>> <div id="responsive-polygon2" onclick="setTrueMapCheck(1); SugarCube.Engine.play('BB13')" class="resize"></div> <!-- living room --> <</if>> <<if $specpass.BB4 is 0>> <div id="responsive-polygon3" onclick="setTrueMapCheck(2); SugarCube.Engine.play('BB4')" class="resize"></div> <!-- Elfie room --> <<else>> <div id="responsive-polygon3" onclick="SugarCube.Engine.play('BB11')" class="resize"></div> <!-- Elfie room --> <</if>> <<if $specpass.BB2 is 0>> <div id="responsive-polygon4" onclick="setTrueMapCheck(3); SugarCube.Engine.play('BB2')" class="resize"></div> <!-- John and Cherie --> <<else>> <div id="responsive-polygon4" onclick="SugarCube.Engine.play('BB9')" class="resize"></div> <!-- John and Cherie --> <</if>> <div id="responsive-polygon5" onclick="SugarCube.Engine.play('BB8')" class="resize"></div> <!-- Abella room --> <div id="responsive-polygon6" onclick="SugarCube.Engine.play('BB6')" class="resize"></div> <!-- bathroom --> <<if $specpass.BB3 is 0>> <div id="responsive-polygon7" onclick="setTrueMapCheck(6); SugarCube.Engine.play('BB3')" class="resize"></div> <!-- Lana room --> <<else>> <div id="responsive-polygon7" onclick="SugarCube.Engine.play('BB10')" class="resize"></div> <!-- Lana room --> <</if>> <div id="responsive-polygon8" onclick="SugarCube.Engine.play('BB12')" class="resize"></div> <!-- your room --> <</nobr>>\ <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; color: white; /*MAYBEE*/ font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; } #responsive-polygon-base { height: 80vh; position: relative; width: calc(80vh * 1.193); transition: background-color 0.3s ease; /* Smooth transition for hover effect */ background-image: url("ressources/maingui/maps/prologue/oldhouse.webp"); background-size: cover; } #responsive-polygon-base > div { position: absolute; } .resize { opacity: 0; background-image: url("ressources/maingui/maps/prologue/hover.webp"); background-size: cover; height: 80vh; position: absolute; width: calc(80vh * 1.193); transition: all 0.3s ease; /* Smooth transition for hover effect */ cursor: pointer; } .resize:hover { opacity: 1; } #responsive-polygon { clip-path: polygon(32.5% 89.5%, 32.5% 98.5%, 53.5% 98.5%, 53.5% 89%, 84% 89%, 84% 71.5%, 62% 71.5%, 62% 45.5%, 54% 45.5%, 54% 32%, 35% 32%, 35% 89.5%); } #responsive-polygon2 { clip-path: polygon(10.5% 89%, 34.25% 89%, 34.25% 32%, 10.5% 32%); } #responsive-polygon3 { clip-path: polygon(54.5% 2%, 77% 2%, 77% 23%, 54.5% 23%); } #responsive-polygon4 { clip-path: polygon(10.25% 2%, 10.25% 31.75%, 34.25% 31.75%, 34.25% 2%); } #responsive-polygon5 { clip-path: polygon(83.5% 71%, 83.5% 45.5%, 62.5% 45.5%, 62.5% 71%); } #responsive-polygon6 { clip-path: polygon(35% 2%, 54% 2%, 54% 31.75%, 35% 31.75%); } #responsive-polygon7 { clip-path: polygon(77.25% 2%, 98.75% 2%, 98.75% 45%, 77.25% 45%); } #responsive-polygon8 { clip-path: polygon(54.5% 23.5%, 77% 23.5%, 77% 45%, 54.5% 45%); } /* pguider - see: main_style.css */ </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { SugarCube.State.variables.prologue = SugarCube.State.variables.prologue ?? {}; SugarCube.State.variables.prologue.mapCheck = SugarCube.State.variables.prologue.mapCheck ?? []; for (let i = 0; i < SugarCube.State.variables.prologue.mapCheck.length; i++) { if (SugarCube.State.variables.prologue.mapCheck[i] === true) { console.log("mapCheck", i, "is true"); document.querySelector(`#responsive-polygon-base > div > pguider[mapCheck="${i}"]`).style.display = "none"; } } function setTrueMapCheck(id) { SugarCube.State.variables.prologue.mapCheck[id] = true; } } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } .input-group input { text-align: center; } .input-group { margin-bottom: 0; } </style>\ <<nobr>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB1.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You wake up in your bedroom, blinking your eyes open as sunlight streams in through the window. Looking around, you take in the familiar surroundings - the messy desk covered in books and papers, the poster of your favorite band on the wall, the pile of clothes in the corner waiting to be washed.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You are a 20 year old man who just finished college. </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_anticlick"> <div class="DIAS_text"> <p style="text-align: center;">Enter your name here: <div id="nameModal"> <div class="input-group"> <input type="text" id="playerName" value="Alex" maxlength="20"> </div> </div> </p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Glance at the clock on your nightstand</action> <inner>Oh no, I can't believe I slept in this late!</inner> <p>I'm going to be so late for Lawn mowing. Cherie is going to kill me this time. Wait a minute, I can hear the rain pouring down outside.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <action>Sighs in relief</action> <p>At least I won't have to mow the lawn in this weather. Cherie can't get mad at me for that.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you try to sit up, a wave of dizziness washes over you. You put a hand to your throbbing forehead and squint against the bright light, which seems to stab at your eyes. This is the third time in the past month you've woken up feeling like this - head foggy, vision blurry, body heavy and sluggish.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Wince and rub temples</action> <inner>Ugh, what is going on with me lately?</inner> <p>This is getting worse. I really need to talk to Cherie about this.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With some effort, you manage to haul yourself into a sitting position. As you do, you become aware of the massive erection tenting your pajama pants. Looking down, you're shocked at just how huge it seems - much bigger than you remember being normal.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Stare wide-eyed at the bulge</action> <inner>Whoa, when did that start happening?</inner> <p>Is it normal for it to continue growing and get this big at 20? Man, I really hope this isn't going to be a regular thing now. Definitely not mentioning this one to Cherie.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You know there's no way it's going to subside anytime soon, so you get dressed in your tightest jeans to try and conceal it. As uncomfortable as that feels, it's better than the alternative. You take a deep breath and head for the bedroom door, ready to face Cherie and the others.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You remember your dad and Abella left for some kind of biology conference. You've never really cared about their work in the field. But at least you don't have to deal with them this morning on top of everything else.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Time to start the day.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB1'); //current passage id } })(); if (document.querySelector('#playerName')) { document.querySelector('#playerName').addEventListener('input', function () { SugarCube.State.variables.characters.mc.name = this.value; console.log('Input changed:', this.value); // This line is for debugging. }); } function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } .input-group input { text-align: center; } .input-group { margin-bottom: 0; } </style>\ <<nobr>> <<script>> playAudio("music", "prologue_BB2"); <</script>> <<set $specpass.BB2 to 1>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB2.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter Cherie and Johny's bedroom. Compared to your room, the view outside is beautiful and quite sunny,the weather seems to split right in the middle of the house. Cherie is lying on the bed, and her face lightsup with a mix of joy at seeing you and disappointment that you've woken up so late again.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Scratching your head sheepishly</action> <inner>I really should start getting up earlier</inner> <p>"Morning, Cherie."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Sits up with a concerned look</action> <p>"Good morning, sweetheart. Are you feeling alright? You look a little dizzy."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/BB2A.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Swaying slightly as the room spins</action> <inner>Ugh, not this again</inner> <p>"I'm okay. I just got up too fast. I've been feeling kind of foggy and lightheaded lately, but it's no big deal."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"If you didn't sleep in so late, you wouldn't feel dizzy getting up. You need to start going to bed earlier." </p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Cherie, I've grown up now. You don't need to worry so much about me. I can handle things on my own."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie is a mature (40 years old), authoritative woman with a kind heart. She is tall and fit with longblonde hair, blue eyes, and a shapely rear end. She is the matriach of the household and a medical doctor. </p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/BB2B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_anticlick"> <div class="DIAS_text"> <p style="text-align: center;">Enter Cherie's relationship to you: <div id="nameModal"> <div class="input-group"> <input class="labelnames" type="text" id="labelMother" value="Landlady" maxlength="20"> </div> </div> </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_anticlick"> <div class="DIAS_text"> <p style="text-align: center;">Enter your relationship to Cherie: <div id="nameModal"> <div class="input-group"> <input class="labelnames" type="text" id="labelMother-2" value="Tennant" maxlength="20"> </div> </div> </p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"I know, sweetheart. But I can't help feeling concerned. And being a doctor, I must check that you're healthyand well. I've always been a bit of a mother hen!"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I know, I know, and I appreciate you looking out for me."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Puts her hands on your shoulders</action> <p>"But nevermind that now. I made your favorite breakfast if you're hungry!"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Hell yeah, you won't have to ask me twice, your cooking sounds great!"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"No matter how big you get, you'll always be my precious boy."</p> <action>Pulls you into a tight hug</action> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Hugs Cherie back, feeling your erection press against her</action> <inner>Whoa, what the...I shouldn't be getting turned on right now!</inner> <action>Pulls back abruptly, embarrassed</action> <p>"Um, I gotta use the bathroom."</p> <action>Hurries out of the room</action> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Watches you leave with confusion</action> <inner>Young men, always so moody and awkward.</inner> <action>Shakes her head and chuckles</action> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)">Leave</div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB2'); //current passage id } })(); document.querySelector('#labelMother').addEventListener('input', function () { SugarCube.State.variables.characters.cherie.role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelMother-2').addEventListener('input', function () { SugarCube.State.variables.characters.cherie.player_role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } .input-group input { text-align: center; } .input-group { margin-bottom: 0; } </style>\ <<nobr>> <<set $specpass.BB3 to 1>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB3.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter Lana's room. A darker view of the other side of the city lurks in the background. The weather seems to be messy here. Lana is sitting there, sweating, having clearly just finished one of her daily home workouts. She looks at you with an annoyed expression and asks what you want.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB3A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smiling kindly</action> <p>"I just wanted to say good morning and see how you're doing today."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scoffs dismissively</action> <p>"It's not morning anymore and it's not by waking up this late that you'll accomplish anything."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>She's as abrasive as always</inner> <p>"Well, I was up late last night and..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Before you can finish, you stumble slightly. Lana reaches out and catches you, steadying you on your feet with a hint of concern on her face - rare for her. It's clear she noticed you didn't just trip clumsily, but are very dizzy and blurry-eyed.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Regaining composure</action> <p>"I'm fine, don't worry about me."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Rolling her eyes</action> <p>"You're just a weak kid and you've always needed my protection."</p> <action>Puts hand on hip condescendingly</action> <p>"Isn't that right, little dweeb?"</p> </div> </div> <!-- Lana info box --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana is a 24 year old professional fighter and ex-army. She has dark brown hair and piercing blue eyes. Physically she is very athletic with a toned, muscular yet feminine body. Personality-wise, Lana is tough, dominant, and bratty. She is the eldest daughter of Cherie.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB3B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_anticlick"> <div class="DIAS_text"> <p style="text-align: center;">Enter Lana's relationship to you: <div id="nameModal"> <div class="input-group"> <input class="labelnames" type="text" id="labelSister1" value="Older Friend" maxlength="20"> </div> </div> </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_anticlick"> <div class="DIAS_text"> <p style="text-align: center;">Enter your relationship to Lana: <div id="nameModal"> <div class="input-group"> <input class="labelnames" type="text" id="labelSister1-2" value="Friend" maxlength="20"> </div> </div> </p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Scowling</action> <p>"There's more to life than physical strength. Brains matter too."</p> <action>Pointing at her</action> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Even in brains, Abella leaves you in the dust. We all know dad favors her for a reason."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"You underestimate me, Lana. There's more to intellect than book smarts. Mental toughness and emotional intelligence matter too."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Laughs mockingly</action> <p>"My mental toughness is leagues beyond yours. I've survived and thrived in situations that would crush you."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Trying to shove her</action> <p>"Oh yeah? We'll see about..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>At that moment, Lana notices your prominent erection straining against your tight jeans. She swiftly pins you to the ground.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Angry and disgusted</action> <p>"What the hell do you think you're doing? You pervert! What have you stuffed down there?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Utterly embarrassed, still dizzy and defeated, you hurriedly leave the room.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB3'); //current passage id } })(); document.querySelector('#labelSister1').addEventListener('input', function () { SugarCube.State.variables.characters.lana.role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelSister1-2').addEventListener('input', function () { SugarCube.State.variables.characters.lana.player_role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<script>> playAudio("music", "prologue_BB4_1"); <</script>> <<set $specpass.BB4 to 1>> <video class="bgvid" autoplay muted loop src="ressources/backgrounds/BB4.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter Elfie's room and find her lying on her bed, completely absorbed in reading one of her fantasy novels. Her room is filled with bookshelves lined with novels, manga, and stacks of video games. Posters of anime characters and fantastical landscapes cover the walls. Her eyes light up when she sees you and she excitedly motions for you to come sit with her.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB4A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smiling as you sit next to her</action> <p>"Good morning Elfie! What are you reading today?"</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Bounces eagerly as she shows you the cover</action> <p>"It's the new book in the Dragonlance series! I've been dying to get my hands on it."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You notice the book is titled 'The haunting of Palmer house' and depicts a seemingly normal family with a very shady house.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Giggles</action> <p>"I know the covers look a little dull, but the story and relationships are amazing! Here, let me read you a passage..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As Elfie enthusiastically narrates a steamy scene between the main characters, you feel your manhood beginning to swell even more. Flustered, you subtly adjust your pants to hide your erection.</p> </div> </div> <!-- Relationship --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie is an 18-year-old enthusiastic, innocent, and naive girl. She is quite nerdy and geeky, and makes a little money by streaming when she is gaming. Physically she has pale hair, pale eyes, and a very delicate, pure look. She is Cherie's youngest daughter.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB4B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_anticlick"> <div class="DIAS_text"> <p style="text-align: center;">Enter Elfie's relationship to you: <div id="nameModal"> <div class="input-group"> <input class="labelnames" type="text" id="labelSister2" value="Younger Friend" maxlength="20"> </div> </div> </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_anticlick"> <div class="DIAS_text"> <p style="text-align: center;">Enter your relationship to Elfie: <div id="nameModal"> <div class="input-group"> <input class="labelnames" type="text" id="labelSister2-2" value="Friend" maxlength="20"> </div> </div> </p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>What is wrong with me? It's Elfie, why am I getting aroused listening to her read a novel? I shouldn't be feeling this way. Ugh, I feel so dizzy and confused right now.</inner> <action>Ashamed</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Oblivious as always, Elfie continues reading the suggestive material out loud. You squirm uncomfortably next to her, arousal and shame conflicting within you.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Notices your odd behavior</action> <p>"What's wrong? Are you not feeling well?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Averting your eyes</action> <p>"N-no, I'm fine! Just got a bit dizzy for a second hehe..."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Concerned</action> <p>"Hmm, you do look kind of flushed. Here, let me feel your forehead to check for a fever."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She innocently reaches for your head. Panicked, you jump up from the bed.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I-I just remembered I have to help Cherie with something! See you later!"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Before Elfie can respond, you hurriedly leave the room, willing your shameful erection to subside.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB4'); //current passage id } })(); document.querySelector('#labelSister2').addEventListener('input', function () { SugarCube.State.variables.characters.elfie.role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelSister2-2').addEventListener('input', function () { SugarCube.State.variables.characters.elfie.player_role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<script>> playAudio("music", "prologue_BB13_1"); <</script>> <video class="bgvid" muted autoplay loop src="ressources/backgrounds/BB13.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter the living room. The TV is on, tuned to a news channel. The female reporter is talking about a new, potentially alarming virus discovered in a lab. You think to yourself that this would probably interest your father and Abella, but you don't pay it much mind.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Glancing at the TV as you walk by</action> <inner>Hmm, dad would want to hear about this.</inner> <action>Turning away from the TV and heading for the doorway</action> <inner>But I've got more important things to do right now.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You leave the room, intent on finding the girls to have a chat. The news report drones on faintly behind you as you make your way down the hall.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB5'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB6.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter the bathroom, determined to empty your full bladder from the night. As you go to pull down your pants, you remember they are tightly belted and much too tight given your massive erection.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Looks down at the tented front of your pants and sighs</action> <inner>There's no way I'm getting these off easily like this. I'll have to wait until I've calmed down.</inner> <p>I guess it's not an emergency. I'll take care of it after I've talked to the girls.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You turn and look in the mirror, taking in your disheveled hair and flushed face. The pressure in your bladder combined with the morning wood arousal makes it hard to focus.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Splashes some cold water on your face</action> <inner>Get it together. Just relax and think of something else.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Leaning on the counter, you take some deep breaths. But the sound of running water only makes you more aware of your urgent need for both type of release. You shift your stance, thighs pressed together.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Crosses legs and bounces slightly</action> <inner>Ugh, I really have to go. But with this thing at full mast, my pants are not budging.</inner> <p>Calm down already! The girls are waiting.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Despite your best efforts at distraction, your erection remains rigid. The tight confines of your pants provide some pressure and stimulation. You let out an exasperated groan. This is going to be a difficult morning.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB6'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB7.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter the kitchen, momentarily confused as to why you came in here. As you look around at the counters, appliances, and sink, you remember this is traditionally seen as the domain of women.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Chuckles and shakes head</action> <p>What was I thinking coming in here? The kitchen is no place for a man like me.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You spot an apron hanging by the pantry, presumably for the woman of the house to wear while cooking and cleaning. The frilly trim and floral pattern emphasize that this is not your territory.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Laughs louder</action> <p>Can you imagine me wearing that thing? I'd look ridiculous!</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you turn to leave, a lingering aroma of freshly baked bread reminds you of the breakfast the girls are surely preparing. Your stomach rumbles, eager to fill up on their homemade cooking.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Mmm, something sure smells good. I'd better get out of here and let them work their magic. This is Cherie's workshop afterall.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With one last amused look around the space, you head for the door. The kitchen is a comfortable domain for the fairer sex, not a brute like yourself. You jokingly make a mental note to wait in the dining room for your meal like a proper gentleman.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Shakes head and chuckles as he exits</action> <inner>But first, I need to go talk to girls</inner> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB7'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB8.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You open the door to your twin sister Abella's room. The weather is similar to Cherie's room, what a weird phenomenon, you hope it doesn't mean bad luck. As expected, everything is tidy and organized. You shake your head slightly.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Looks around and sighs</action> <p>We may share the same face, Abella, but we are nothing alike.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You pick up a science trophy from her shelf, running your fingers over the engraving. Abella, always the perfect student. Another award to make Dad proud.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Replaces the trophy gently</action> <p>You excel at academics, while my interests lie elsewhere. But each of us has our strengths.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You pace slowly around the room, glancing at the books and memorabilia representing Abella's achievements. She works hard, you'll give her that much. But you know in your heart your talents surpass hers.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Stops and smiles confidently</action> <p>One day Father will recognize my potential. Until then, I'll let Abella have the spotlight. It's only a matter of time before I eclipse her.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a final assured nod, you turn and exit the room, leaving everything undisturbed. You have no need for jealousy or anger. Soon, your time will come to shine even brighter than perfect Abella. For you know deep down you are destined for greatness.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB8'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<script>> playAudio("music", "prologue_BB2"); <</script>> <video muted class="bgvid" autoplay loop src="ressources/backgrounds/BB2.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter Cherie's room again. She looks up at you and asks if you're feeling any better.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nodding</action> <p>Yes, much better now, thank you.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Looking relieved</action> <p>I'm so glad to hear that. You really had me worried earlier. I'd like to examine you more thoroughly later to make sure you're okay, but I just got an urgent call that I need to take right now.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Waving your hand dismissively</action> <p>Of course, I understand. Don't worry about me, I'm fine now. Go take your call.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Smiling gratefully</action> <p>Thanks for understanding. Why don't you go chat with the girls for a bit, and meet me in the living room when I'm done with this call?</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nodding in agreement</action> <p>Sounds good, I'll see you in a little while then.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB9'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB3.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter Lana's room. She's doing push-ups on the floor and doesn't even look up at you when you walk in.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Hey Lana.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Continuing her push-ups without missing a beat</action> <p>What do you want?</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Just wanted to see how you're doing.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Annoyed</action> <p>I'm busy right now. I need to finish this workout.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Oh okay. Want me to come back later?</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Curtly</action> <p>I'll join you later in the living room, go talk to Cherie and Elfie.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Got it. See you there, don't forget.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Impatiently</action> <p>Whatever. Just close the door on your way out kiddo.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>Wow, she really has an attitude problem. The same as always.</inner> <p>Alright, see you later Lana.</p> <action>You leave the room, closing the door behind you.</action> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB10'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<script>> playAudio("music", "prologue_BB4_1"); <</script>> <<set $specpass.BB4 to 1>> <video class="bgvid" autoplay muted loop src="ressources/backgrounds/BB4.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter Elfie's room. She is sitting on her bed, completely absorbed in the novel she is reading.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Hey Elfie.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <inner>Distracted</inner> <p>Oh, hi.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She continues reading, barely acknowledging your presence.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Looking up</action> <p>Sorry about that. I'm just at a really good part in my book. What's up?</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Nothing much, I just wanted to see what you were up to. I'll let you get back to your book. See you in the living room later?</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Nodding</action> <p>Yeah for sure. I'll head out there when I'm done with this chapter. See ya!</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB11'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB1.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter your bedroom, closing the door behind you. Looking around, you realize you don't really have anything to do in here. The thought of masturbating briefly crosses your mind, but you remember you have a lot of stuff to do.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You glance over at your collection of Naruto manga sitting on the shelf. You've read through them all multiple times already. With a sigh, you decide you should probably just head out.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB12A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Glancing around the empty room</action> <inner>I've got nothing to do in here anyway</inner> <p>I should just go meet up with the girls. No point sticking around.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB12'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("PROLOGUE MAP"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } #story { transition: all 0.5s ease; margin: 0; } #ui-bar.stowed~#story { margin-left: 0; } #ui-bar.stowed ~ #story { margin-left: 0; } </style>\ <<nobr>> <<script>> playAudio("music", "prologue_BB13_1"); <</script>> <video class="bgvid" muted autoplay loop src="ressources/backgrounds/BB13.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You walk into the living room and sit down on the couch. Noticing the terrible weather outside, with heavy rain, you feel increasingly dizzy and your headache intensifies. This is an ominous sign.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You decide to turn on the TV which is set to a news channel reporting on the severe weather making communications difficult.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Suddently, the TV goes into static and starts making a glitching sound..</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Confused</action> <p>What the hell is going on?</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB13A.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The girls rush into the room alerted by the alarm sound.</p> <audio loop> <source src="./ressources/sounds/BB13A.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Looking concerned</action> <p>What's all this about?</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Frowning sadly</action> <p>Oh no, I hope this is not serious matter, I wanted to finish my chapter.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scanning the room cautiously</action> <p>An alarm? Is something wrong?</p> </div> </div> <!-- Video --> <div class="DIAS_message centered trigger1"> <video class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB13B.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Gasping in shock</action> <p>My god... could it be what Johny feared?</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Tensely</action> <p>An outbreak? Here? This can't be happening...</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Eyes wide with fear</action> <p>But we're supposed to be safe at home, aren't we?</p> </div> </div> <!-- Video --> <div class="DIAS_message centered trigger2"> <video class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB13C.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>With a clinical concern</action> <p>This is exactly what he was working on. We need to stay calm and follow the procedures.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>With a steely resolve</action> <p>What the hell... We need to secure the house then. No one in or out until we know more.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>With naive concern</action> <p>But, what about everyone else outside? We have to help them, right?</p> </div> </div> <!-- Video --> <div class="DIAS_message centered trigger3"> <video class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB13D.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The TV and lights abruptly shut off, power gone.</p> <p>Elfie jumps, becoming upset. Lana wonders what the hell is going on. Cherie seems to understand what's happening.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Jumping in fright</action> <p>Eek! The power...!</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB13E.webp"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Looking around angrily</action> <p>Dammit, now what's going on?</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Clutching your pounding head</action> <inner>Everything's going fuzzy...</inner> <p>Ch-Cherie, can you explain?</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Speaking calmly and slowly</action> <p>A few months ago, Johny told me about a dangerous lab-made sexual virus...with his expertise, he thought it could end the world.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered trigger4"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB13F.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You try to focus on her words but everything seems blurry and unintelligible. You gather that Johny's expertise in biology and genetics made him paranoid about a virus causing the end of the world. He registered the family for a rescue program in case it happened. It seems he was right.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>You struggle to follow Cherie's words as your vision blurs</action> <inner>I can barely understand her...</inner> </div> </div> <!-- Cherie --> <div class="DIAS_message left trigger5"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>He registered us for a protection program...in case this happened. I guess he was right to be so paranoid. </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You struggle to listen but understand nothing. You hear Lana and Elfie talking too but it's all mixed up. At some point Cherie and the girls notice your distress and frantically ask if you're okay but you can't respond.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Shouting worriedly</action> <p>Hey! Are you alright? Say something!</p> </div> </div> <!-- Image --> <div class="DIAS_message centered trigger6"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB13G.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>On the verge of tears</action> <p>Oh no, I think something's really wrong!</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left trigger7"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>Honey? Honey!!!</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered trigger8"> <div class="DIAS_text"> <p>Everything goes fuzzy and you hear a distant plane or helicopter approaching. Everything spirals into blackness.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> What's going on? </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB13'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("BB14"); //next passage id } var observer = new MutationObserver(list => { //console.log('mutation list', list); let DIAS_container = document.querySelector('.DIAS_container'); let messages = DIAS_container.querySelectorAll('.DIAS_message'); for (let i = 0; i < messages.length; i++) { let message = messages[i]; if (!(message.classList.contains('DIAS_active'))) return; if (message.classList.contains('trigger1')) { trigger1(); } if (message.classList.contains('trigger2')) { trigger2(); } if (message.classList.contains('trigger3')) { trigger3(); } if (message.classList.contains('trigger4')) { trigger4(); } if (message.classList.contains('trigger5')) { trigger5(); } if (message.classList.contains('trigger6')) { trigger6(); } if (message.classList.contains('trigger7')) { trigger7(); } if (message.classList.contains('trigger8')) { trigger8(); } } }); observer.observe(document.querySelector('.DIAS_container'), { attributes: true, childList: true, subtree: true }); var storyElement = document.getElementById('story'); var trigger1_ran = false; function trigger1() { // Apply the box shadow to the element storyElement.style.boxShadow = 'inset 0 0 10vh 5vh black'; if (trigger1_ran) return; trigger1_ran = true; SugarCube.State.variables.audio.volume.voice = 0.35; } var trigger2_ran = false; function trigger2() { storyElement.style.boxShadow = 'inset 0 0 20vh 10vh black'; if (trigger2_ran) return; trigger2_ran = true; SugarCube.State.variables.audio.volume.voice = 0.30; } var trigger3_ran = false; function trigger3() { storyElement.style.boxShadow = 'inset 0 0 40vh 20vh black'; if (trigger3_ran) return; trigger3_ran = true; SugarCube.State.variables.audio.volume.voice = 0.25; } var trigger4_ran = false; function trigger4() { storyElement.style.boxShadow = 'inset 0 0 60vh 30vh black'; if (trigger4_ran) return; trigger4_ran = true; SugarCube.State.variables.audio.volume.voice = 0.25; } var trigger5_ran = false; function trigger5() { storyElement.style.boxShadow = 'inset 0 0 70vh 35vh black'; if (trigger5_ran) return; trigger5_ran = true; SugarCube.State.variables.audio.volume.voice = 0.20; } var trigger6_ran = false; function trigger6() { storyElement.style.boxShadow = 'inset 0 0 90vh 45vh black'; if (trigger6_ran) return; trigger6_ran = true; SugarCube.State.variables.audio.volume.voice = 0.15; } var trigger7_ran = false; function trigger7() { storyElement.style.boxShadow = 'inset 0 0 110vh 55vh black'; if (trigger7_ran) return; trigger7_ran = true; SugarCube.State.variables.audio.volume.voice = 0.10; } var trigger8_ran = false; function trigger8() { storyElement.style.boxShadow = 'inset 0 0 150vh 75vh black'; if (trigger8_ran) return; trigger8_ran = true; SugarCube.State.variables.audio.volume.voice = 0.05; } </script>\ <<script>> UIBar.hide(); <</script>>\
<style> body { background-image: url('ressources/backgrounds/BB14.webp'); } </style>\ <<script>> stopAudio("music"); UIBar.show(); <</script>>\ <<nobr>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Feeling yourself sinking deeper into darkness, the voices of Lana, Cherie, and Elfie fading away</action> <inner>Where am I going? What's happening?</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The surroundings shift, morphing into a dimly lit cavern with a blue glow. Warmth spreads through your body as your head spins, comparable to being drunk. Heat concentrates heavily in your groin.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Looking around the cavern, eyes struggling to focus</action> <inner>Everything is so hazy, this feels so strange, yet somehow pleasant...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The blue light of the cavern overstimulates your senses. Dizziness and confusion grip your mind tighter, but an underlying excitement grows.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>I've never felt like this before...it's sexual arousal, but so intense!</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A certain power thrums through you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Suddenly, a noise echoes from the small pond ahead. Still disoriented, you struggle to make out the source of the sound. Ripples spread across the surface of the water as a humanoid, blue-tinged figure rises from the depths.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She emerges predatorily from the pond. As your vision clarifies, a fiery surge rushes down to your groin. You tremble uncontrollably with exhilaration despite your perplexity. The raw sensations are almost too much to take.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB14A.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stare in awe at the sight before you. Rising from the shimmering blue waters is a dark elf-like humanoid, her voluptuous form seeming to defy gravity. Luscious curves that could bring any man to his knees accentuate her ample bosom and hips. This must be a dream, you think to yourself with a sly smile. The raging horniness brought on by the virus makes you forget everything else - your body screams to give in to carnal urges and indulge in this vision of beauty.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Trembling, hands shaking</action> <inner>What's happening to me? I can't look away...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you open your mouth to speak, you realize no words escape you. The alluring creature emerges further, swaying her hips seductively. Her legendary posterior seems to call to you, begging you to bury yourself within it and never leave. Overwhelming sensations of power course through you, both sexual and physical. This euphoric intensity fuels your fever dream state.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Backing away slightly</action> <inner>I'm terrified...but so turned on. I want her, I need this!</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your heart races as you watch her move, mesmerized by every curve and angle of her body.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB14B.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>By the gods, she's the most beautiful creature I've ever laid eyes on!</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her ample breasts bounce tantalizingly with each graceful movement, and you feel yourself growing hotter and more aroused by the second. It's as if there is no limit to the heights of lust this ethereal beauty can awaken within you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She locks eyes with you, full ruby lips turned up in a sultry smile as she slowly approaches. With feline grace, she lifts her breasts toward you, an offering, and you reach out trembling hands to cup their soft warmth.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Trembling</action> <inner>I'm about to explode just looking at her!</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Then, in one fluid motion, she bends down and takes your aching manhood between her breasts. The sensation is indescribable, beyond any earthly pleasure. You are lost, drowned in bliss, as she begins to move upon you. Her skin is like cool silk, her caresses masterful.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB14C.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stare down at the throbbing mass between your legs, its sheer size and girth unlike anything you've ever seen before. The creature's tentacles continue their relentless assault, caressing and squeezing every inch of your engorged manhood.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your breaths come in ragged gasps as the pressure continues building within you, the creature skillfully edging you towards a climax of unimaginable proportions but somehow, you don't feel it coming. You clench your fists and throw back your head, utterly lost in the hypnotic rhythm of the creature's manipulations.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Getting light-headed</action> <inner>This is too much. I can't withstand much more of this.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Just when you feel you can't possibly take any more stimulation, the creature opens its mouth wide and takes your swollen cock inside. Its mouth is searingly hot and overflowing with slick juices. Its tongue, long and dexterous, laps and twirls around your length as the creature bobs its head up and down. The suction is incredible, unlike anything a human mouth could replicate.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB14D.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The pleasure ratchets up to newer, more insane heights as the creature works you expertly with its mouth. This newfound power.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>Holy shit! Her mouth feels so warm and wet. The way she's working her tongue is driving me wild.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She bobs her head slowly, taking more of you in. The intense sucking sensation makes your toes curl. You feel your cock swelling even larger in her mouth.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Sensing you are losing grip with reality</action> <inner>Something isn't right. This feels too good. I'm losing control of my body! I have to stop this before it's too late...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Just as you think you might break free from the spell, the woman changes her technique. Her head bobs faster, her tongue swirling as she sucks you with fervor. Your knees finally give out and you sink to the floor.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The mysterious woman mounts you, still latched onto your engorged cock. She lifts herself up and guides you inside her, enveloping your massive girth. A mind-blowing rush of pleasure hits you.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB14E.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stare down at the curvaceous elf writhing in ecstasy on top of you. Her hips undulate rhythmically, grinding your swollen manhood deep inside her alien folds. Your mind swims in a haze of primal lust as waves of pleasure radiate through your body.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>Fuck! She's so tight and wet! I can feel her squeezing every inch of my swollen cock.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Shaking your head in an attempt to clear it, you meet the creature's hypnotic gaze. Her eyes seem to pierce your very soul, and you feel your resolve weakening once more. She smiles coyly, clearly sensing the effect she is having on you. With feline grace, she turns and presents her round, perfect ass to you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Vision blurring out but no orgasm in sight</action> <inner>She's making this difficult! I must break free of her spell.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Yet despite your inner misgivings, you cannot help but drink in the sight of her supple backside as she lowers herself onto you again. Your swollen manhood throbs almost painfully as it is enveloped by her tight, slick walls. She begins to bounce vigorously up and down, fucking you with abandon. The view of your enormous cock pistoning in and out of her dripping snatch is indecently arousing.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB14F.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You feel lightheaded and disoriented, your vision blurring at the edges. It is clear that too much blood has rushed to your groin, leaving your brain starved. This experience is becoming dangerous, but the creature seems intent on pushing you past the point of no return. You must act now if you hope to free yourself from her seductions.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She rises up and slams down over and over, she seems to be getting so high at times, yet you never slip out of her. A numbness spreads through your limbs as the elf rides you relentlessly. Your climax builds, but there's no telltale sign of its impending arrival. The sensation is incredible, yet something in you knows this isn't right.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Summoning your strength, you flip the blue-skinned creature onto her back</action> <inner>I have to take control. This feels too good to stop, but I know I shouldn't be here.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With surprising ease, you lift her weightless body and begin thrusting into her with focused intensity. It's absolute ecstasy, but you know it's time to end this fever dream. As memories flash through your mind, you pick up the pace, driving toward orgasm.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/BB14G.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The creature slick walls grip you tightly as you pound into her. Her cries echo off the cave walls, spurring you onward.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>I've got her under my control now, this feels incredible! I could stay here in this moment forever, but I must push onward.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With great effort, you pull yourself away from the alluring darkness trying to keep you trapped in this realm.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>I can't let it consume me, I have to break free!</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your thrusts become more urgent as a powerful climax begins building within you. Gripping the elf tightly in all your limbs, the dreamy surroundings start to dissolve as your passion crests.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>Just a little more! I'm so close!</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The pleasure becomes almost unbearable, your bodies fused together in writhing ecstasy. A blinding light envelops you both as the peak hits, an orgasm like you've never felt before ripping through every fiber of your being. You feel yourself hurtling forward, the light getting brighter and brighter until...</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Open your eyes </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB14'); //current passage id } })(); SugarCube.State.variables.audio.volume.voice=0.4; function nextBloc(event) { SugarCube.Engine.play("BB15"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1RS.webp'); } </style>\ <<nobr>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Groggily opening your eyes, squinting at the dim light filtering through the dusty barn windows</action> <inner>Ugh, my head is pounding...where am I?</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The old shed creaks and groans around you as you try to get your bearings. You're lying on a lumpy cot, covered only by a thin, stained sheet. The air is musty and you can barely make out stacks of tools and farming equipment lining the walls in the shadows.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15A.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Bursting into the shed, her face lighting up</action> <p>Oh my god! You're awake!</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She rushes over and kneels by the cot, tears of joy and relief spilling down her cheeks. Her hands flutter over you anxiously like a mother hen.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Confused, sitting up slowly</action> <p>Cherie? What happened? Where are we?</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Voice cracking</action> <p>We almost lost you! You've been in a coma for six months...I can't believe you finally woke up!</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As if on cue, the room's energy shifts, and Elfie, your *[Elfie relationship]*, dances into the room. Her presence is a burst of color against the sterile backdrop, her usual exuberance undimmed even here.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15B.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Bounding onto the bed, her embrace all-encompassing</action> <inner>She hasn't changed a bit.</inner> <p>"You're back! You're really, really back!"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She jumps onto the cot and tackles you in a hug, sobbing happily.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The moment is punctuated by a squelching sound as Elfie shifts, a puzzled look crossing her face. She glances down at the now evidently wet sheets.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Making a face, pulling back to inspect the dampness</action> <p>"What's this? Did you spill water or something? So goey..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Before you have a chance to respond, Lana enters the room. She stands in stark contrast to Elfie, her demeanor cool and collected. Her eyes, however, betray a flicker of concern that she quickly masks with her usual indifference.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15C.webp"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Following behind Elfie, trying to act nonchalant but unable to hide her relief completely</action> <p>Took you long enough, dumbass. We thought you'd never wake up.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her attempt at humor doesn't quite hide the relief that you detect in the slight upturn of her lips. Cherie, ever the peacemaker, steps in before the banter can escalate.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Swatting Lana's arm gently</action> <p>Oh hush, don't pretend you weren't worried sick about him!</p> <action>Turning attention back to you</action> <p>How are you feeling sweetie? Are you in any pain?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She proceeds to do a medical examination, checking your pulse, eyes, and reflexes. As she moves the blanket, you both gasp as you notice your body.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Staring down at your ripped, muscular physique</action> <inner>Woah, I'm jacked! What the hell happened to me?</inner> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Everything seems normal, better than normal actually. How do you feel?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Feeling a suddent surge of energy and strenght, you throw off the sheet and stand up resolutely</action> <p>Better than ever!</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The girls gasp and blush at your sudden nakedness and the impressive size of your cock.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Glancing sheepishly at the women</action> <inner>Oh no, did I just flash them?</inner> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Her eyes dart down, then flash with anger, her fists clenching at her sides as she spins on her heel to leave the room, her voice laced with disgust</action> <p>"You're unbelievable, such a perv!"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Glancing sheepishly at the women</action> <inner>Oh no, did I just flash them?</inner> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana storms out, the door slamming shut with a resounding echo that marks her departure, leaving a tense silence hanging in the air.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Covering her eyes with her hands, cheeks flushed with shock, she stumbles toward the exit, her voice a trembling mix of innocence and haste</action> <p>"I should not see this."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The sound of Elfie's hurried footsteps fades as she escapes the room, leaving you standing there, more exposed than ever.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>You glance down, the reality of your condition sinking in as you spot the undeniable evidence of your arousal</action> <inner>Well, that's just great. Perfect timing.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie blinked in shock, her eyes drawn momentarily to your massive length before she composed herself. She picked up the soiled blanket, stepping forward to wrap it around your waist.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15F.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>She calmly offers you the damp sheet with a hint of a blush</action> <inner>What in the world is that? I don't think it's supposed to get to that size</inner> <p>"You should cover up."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Blushing hard, wrapping the blanket around your waist, you turn to Cherie, changing the subject</action> <p>"Cherie, what happened while I was out? Where are we and how did we get here?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Her expression turns grave</action> <p>"It's...it's a long story. The world has changed so much since you fell ill."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She motions for you to sit back down on the cot as she pulls up a stool. Her hands twist together in her lap as she gathers her thoughts.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"It started the day after your father and Abella left for that conference. There was an announcement on the news about a dangerous new virus called D-Pox that was spreading fast. It...it makes people go crazy with lust."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Yeah, I kinda remember that announcement.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Within minutes, civilization collapsed. Your father had warned me something like this might happen. He said he signed us up for an emergency evacuation called The MAD if disaster struck."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Eyes widening</action> <p>"The MAD? I think I remember Dad mentioning that once or twice over the years. But he always sounded half-serious about it, like it was all just speculation."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"I know, I thought so too at first. But he was right."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She goes on to explain how just as society crumbled around them, a private plane arrived to whisk them away to a secret island base run by The MAD. But when they arrived, it was not exactly the safe haven they hoped for.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"All the men rapidly deteriorated. Within days, they were all dead, except for you. The few women left were put to work, scavenging and building. Since you were the last, we had to hide you from the other girls."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>I took my seat, lending a keen ear to each measured verse</action> <p>Wait what, the last?</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"We were told this island has the only source of a rare compound called D-Root that can keep the virus at bay in women."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Sitting on the cot, your head spinning as you try to process everything</action> <p>"This virus...what exactly does it do?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Hesitating</action> <p>"Well, it affects people in different ways, but the core symptoms are the same. It sends the libido into overdrive, making people crazed with lust."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Blushing slightly</action> <p>"In men, it causes the genitals to swell to extremes. The arousal is constant and unbearable, driving them mad. Most die from heart failure within days, as the virus pushes their bodies beyond the breaking point." </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You shift uncomfortably as Cherie's description hits uncomfortably close to home, your own swollen length twitching under the blanket.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"For women, the effects manifest differently. Our desires grow steadily, and our bodies transform over time - enlarging the breasts, hips and backside. The sensitivity in those areas becomes unbearable."</p> <action>Her breathing grows slightly heavier as she describes the changes, a bead of sweat trailing down her neck. She quickly composes herself before continuing.</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15G.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Without the D-Root antidote, we eventually succumb to the madness just like the men. But it takes much longer, up to several months."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nodding slowly as you take it all in</action> <p>"My god, it sounds horrific. I can't believe you all endured this."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"We had no choice. When society collapsed, it was follow The MAD or die. At least here in the wilderness we have some freedom, even if each day is a struggle."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>What do you mean some freedom? The new society of the MAD is not a free one?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You see Cherie's hands tremble and her eyes glisten with unshed tears as she recounts what they endured.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"The women who survived were put to work immediately by The MAD officers. They rule this place with an iron fist. We're slaves, forced to scavenge and toil day and night just to earn enough D-Root to live another day."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Jaw tightening, fists clenching with rage</action> <p>How did you escape these bastards?</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"One night, we decided we'd rather take our chances in the wilderness than remain under The MAD's thumb. Lana, Elfie and I stole away into the forest with you. By some miracle, we made it here untouched."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"But without the D-Root, how did you survive the virus?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Blushing slightly</action> <p>"Oddly enough, we found that we can keep the worst effects at bay by...taking matters into our own hands, so to speak."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Eyes widening in realization</action> <p>"You mean...?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Nodding</action> <p>"It's worked so far, though the urges are getting stronger. We may not last much longer without D-Root."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>A shiver runs down your spine as you process her words</action> <inner>Wait... Dying... men are dying. Am I infected? Is that why my body feels so alien?</inner> <p>"Am I... am I going to die, Cherie? Why am I alive?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Her eyes are brimming with an unspoken emotion, but she maintains her composure</action> <p>"No. That's the strangest part. You should have, by all accounts. But you're still here, and you're awake. And you're not just surviving, you seem to be... stronger."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15H.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You fall silent, taking in the enormity of all she has revealed. This island is more dangerous than you could have imagined, but you know you will do whatever it takes to protect your family.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Sickened, reaching out to squeeze Cherie's hand</action> <p>"My god, I can't believe you all went through that. I'm so sorry I wasn't there to protect you."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Shaking her head</action> <p>"You were fighting your own battle, we're just thankful to have you back now. Out here, we don't have D-Root, but somehow we've survived. I don't know how much longer we can last though."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Jaw clenching with determination</action> <p>"I promise you, I'm going to fix this. We're going to find Dad, Abella, and get off this damned island. Just point me where to start."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Jumping up from her seat, reaching out to grab your arm</action> <p>"Wait! You can't just rush out there. It's too dangerous without knowing what you're getting into."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Pausing, turning back to face Cherie</action> <p>"What do you mean? What's out there?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Letting out a weary sigh, her eyes filled with concern</action> <p>"The wastelands. A barren, lifeless landscape as far as the eye can see. We're on the very edge of it here." </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She moves to the small window, peering out at the bleak vista beyond. You join her, gazing out on a desert of cracked earth and dust, broken only by jagged rock formations jutting at odd angles. In the distance, strange wisps of colored smoke curl into the air.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB15I.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"The MAD dumped us out there when we first arrived. It's their domain, where they send the women to scavenge and toil. It's too dangerous..."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Squeezing her shoulder reassuringly</action> <p>"I understand but I must see. Tell me what I'm up against out there."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Nodding</action> <p>"The MAD army is vast, and their soldiers are cruel. They wield a terrible power - seduction through pheromones. None can resist their charms for long. The more virus they withstand without breaking, the more sexually dominant they are, which created a hierarchy in the new MAD society."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You see a haunted look in her eyes and know she speaks from experience. Your fists clench with rage at the thought.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Let's just say their depravity knows no bounds. They feed off the suffering of others. So promise me, promise you won't take any unnecessary risks out there."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Pulling Cherie into a fierce, protective hug</action> <p>"I promise I'll be careful. And I swear to you, someday we'll make them pay for what they've done."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stride toward the shed door, your footfalls echoing off the bare wood walls. As your hand touches the doorknob, you pause and look back at Cherie. She sits wringing her hands, equal parts gratitude and worry etched on her face.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go outside </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB15'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("BB16"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } .DIAS_button { height: 20vh; width: 20vh; min-width: 0; margin: 5vh; border-radius: 50%; transition: 0.3s all ease; } .DIAS_button:hover { opacity: 0.7; } #lanabutton { background-image: url('ressources/icons/9.webp'); background-size: cover; } #elfiebutton { background-image: url('ressources/icons/10.webp'); background-size: cover; } .DIAS_buttonCont img { width: 30%; opacity: 0.7; margin-left: 10vh; margin-bottom: 10vh; } </style>\ <<nobr>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB16.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you step outside the old shed, the sunlight is almost blinding after months spent in darkness. You raise a hand to shield your eyes as they adjust. The sounds of birdsong and the breeze rustling through leaves fills your ears. As your vision clears, you gaze in wonder at the landscape before you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A beautiful river flows past, its waters sparkling in the midday sun. On one bank is a lush, green forest, the trees dense with leaves of every shade. You can almost smell the earthy richness from where you stand. On the other side of the river are barren wastelands, scrubby vegetation dotting the rocky terrain and mountains as far as you can see.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Beyond the wastelands, you spot buildings, it must be the MAD new society, the part behind the shed is the district where you want to build the new shelter and utilitaries. The contrast is stark on either side of the winding river—abundant life and depleted earth side by side. You find yourself drawn to the water's edge, a cool breeze kissing your skin. You breathe in the sweet air, feeling truly alive for the first time in months as you take in the view. The beauty of this place soothes your soul after so long spent in darkness. You are overwhelmed with gratitude for the simple gifts of nature laid out before you.</p> </div> </div> <<if $specpass.BB16lana is 1 && $specpass.BB16elfie is 1>> <script>prologueStartExplore(true)</script> <</if>> <!-- option buttons --> <div class="DIAS_buttonCont"> <<if $specpass.BB16lana is 1>> <div class="DIAS_button" id="lanabutton"> <img class="DIAS_image" src="./ressources/icons/13A10.webp"> </div> <<else>> <div class="DIAS_button" id="lanabutton" onclick="option1(event)"> <img class="DIAS_image" src="./ressources/icons/13A11.webp"> </div> <</if>> <<if $specpass.BB16elfie is 1>> <div class="DIAS_button" id="elfiebutton"> <img class="DIAS_image" src="./ressources/icons/13A10.webp"> </div> <<else>> <div class="DIAS_button" id="elfiebutton" onclick="option2(event)"> <img class="DIAS_image" src="./ressources/icons/13A11.webp"> </div> <</if>> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB16'); //current passage id } })(); function option1(event) { SugarCube.Engine.play("BB17"); //next passage id } function option2(event) { SugarCube.Engine.play("BB18"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<set $specpass.BB16lana to 1>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB16.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You look around, taking in your lush green surroundings. The trees tower over you, branches rustling gently in the breeze. In the distance, you can hear the calls of exotic birds.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your eyes settle on Lana, who is leaning against a tree, sharpening a dagger. Even in this new world, she still carries herself with a quiet strength and confidence.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Stepping outside the shed, breathing in the fresh forest air</action> <inner>Time to get some answers</inner> <p>"Hey Lana, got a minute?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Leaning against a tree, arms crossed</action> <p>"What do you want?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB17A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Walking over casually</action> <p>"I was hoping you could tell me more about this place. Cherie mentioned the forest is dangerous?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scowling</action> <p>"Tch, that's putting it lightly. The deeper you go, the weirder it gets."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You gaze towards the treeline, a cool breeze rustling the leaves. There's a palpable energy in the air, both alluring and foreboding.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Crosses her arms, her biceps bulging slightly, the setting sun casting her face in shadow</action> <p>"We don't know much about it, but there's something in there that makes the virus worse. People get feverish, paranoid...like it's messing with their heads."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nodding</action> <p>"Right, Cherie said even you haven't gone far in?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Steps closer, the intensity in her gaze never faltering</action> <p>"No, too dangerous, plants that move, almost think. They react to the virus, to us. And there's an energy in the air—thick, almost tangible. It heightens the virus's effects, makes the symptoms... unpredictable."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She pauses, her jaw clenching as she recalls the past.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Before we escaped, I saw what it did to the others in that damned city. The virus drove them mad, turned them into animals. They'd tear each other apart for a hit of D-Root just to take the edge off."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Eyes widening</action> <p>"D-Root?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Nods</action> <p>"It's some kind of plant extract the MAD higher-ups controlled. Seemed to counteract the virus, at least for a while. But it was never enough. The pitiful wretches sold their souls just to get their next fix."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She spits on the ground in disgust.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nod solemnly, the gravity of her words weighing heavily</action> <inner>This is no ordinary mission. It's a battle against the very nature of this place.</inner> <p>"Thanks, Lana. I'll keep my guard up."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Gives a rare, tight-lipped smile, her fierce demeanor softening just slightly</action> <p>"Good. And remember, the virus might make you feel powerful at times, but don't let it fool you. It's a predator, and we're all prey."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB17B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You watch her for a moment, her words echoing in your mind as you turn to face the darkening woods. The Forest, with its mysterious energy and virus-induced dangers, waits silently for you to enter.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB17'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("BB16"); //next passage id } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<set $specpass.BB16elfie to 1>> <video class="bgvid" autoplay loop src="ressources/backgrounds/BB16.webm"></video> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Leaning against the Shed, the texture of aged wood against your back</action> <p>"Quite the view, huh, Elfie?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie's silhouette is framed by the fading light, her youthful gaze bright with an unwavering sense of hope.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB18A.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>With a soft smile</action> <p>"It's perfect. A fresh start, right?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you discuss the future, her optimism is infectious.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Eyes on a nearby clearing</action> <p>"That could be our new district. A place to call home."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Pointing towards the forest</action> <p>"And with the fish from the ponds, we won't go hungry."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Food is the priority. But we need to think about storage too, or we will have to fish day to day."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie's energy is a stark contrast to the Shed's somber tone, her readiness to face the new world's challenges evident.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Nodding with confidence</action> <p>"We could use the wasteland's scraps—metals and plastics to build something lasting."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Heartened by her practicality</action> <p>"And the forest has strong trees. We can handle the work."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Laughter echoes, a defiant sound against the uncertainty of the world.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Resolved</action> <p>"We can make a home, Elfie. A real one."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Stepping closer, her smile unwavering</action> <p>"With you? Everything's possible."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB18B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You smile as you get ready for the challenge ahead.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB18'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("BB16"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right DIAS_active"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Walking through the Wastelands, scavenging for materials</action> <inner>I need to find anything useful to improve our shelter...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Suddenly, you hear a noise behind you and turn around quickly. Standing there is a woman dressed in a tight black latex suit, a mask covering her face. She seems startled to see you.</p> </div> </div> <!-- Mad Dummy --> <div class="DIAS_message left"> <img character="mad_dummy" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mad Dummy</name> <p>A...a man? I haven't seen a man in months!</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB19A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Raising your hands cautiously</action> <p>Easy there. I'm not looking for any trouble.</p> </div> </div> <!-- Mad Dummy --> <div class="DIAS_message left"> <img character="mad_dummy" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mad Dummy</name> <action>Moving closer, eyeing you hungrily</action> <p>Mmm I've missed men so much. Come with me back to the MAD headquarters, I'm sure the Queens would love to meet you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Backing up slowly</action> <inner>Crap, Cherie warned me about women like this!</inner> <p>Thanks but no thanks, I should really get going.</p> </div> </div> <!-- Mad Dummy --> <div class="DIAS_message left"> <img character="mad_dummy" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mad Dummy</name> <action>Lunging forward suddenly, grabbing your arm</action> <p>I insist! We must bring you in.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Struggling against her grip</action> <inner>She's stronger than she looks!</inner> <p>Let me go!</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The Mad Dummy tightens her grip, squeezing your muscular arm. She breathes heavily, her eyes filled with lust behind her mask.</p> </div> </div> <!-- Mad Dummy --> <div class="DIAS_message left"> <img character="mad_dummy" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mad Dummy</name> <p>Don't fight me boy. Just relax and let me take you to the Queens. I'm sure we can come to an... arrangement.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB19B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her other hand reaches down and grabs your crotch firmly. You gasp at the sudden intimate contact. She starts to rub and massage you through your pants.</p> <p>As the Mad Dummy tightens her grip on your arm, you can feel the intensity of the virus surging through her. Her lustful aura envelops you, heightening your own viral urges.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Moaning involuntarily</action> <inner>No! I can't let her take control!</inner> <p>I can play this game too!</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Mustering your willpower, you focus your mind and let your own viral energy flow, magnifying your sexual power. You feel your dominance rising to match hers.</p> <p>Making direct eye contact, you project your intensified virile energy towards the Mad Dummy. Caught off guard, she loosens her grip in surprise. Seizing the moment, you grab her forcefully and pin her against a wall, asserting your control.</p> </div> </div> <!-- Mad Dummy --> <div class="DIAS_message left"> <img character="mad_dummy" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mad Dummy</name> <action>Smirk, visibly excited</action> <p>This is about to get interesting.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB19C.webp"> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Let the dominance game begin </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB19'); //current passage id } })(); function nextBloc(event) { /* SugarCube.Engine.play("FIGHT FWA scavenging prologue"); */ //next passage id let fightOptions = { wheelType: "demo", winReturnPassage: "6B", lossReturnPassage: "6B", noRewards: true, noNextPartOfDay: true, }; FGF_enterFight("FWA", fightOptions); } </script>\
<style> body { background-image: url('ressources/backgrounds/1R2.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right DIAS_active"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Walking along the riverbank, shirtless and glistening with sweat</action> <inner>That was some hard work building the shelter and storage, but it'll be worth it to see the girls' faces when they find out</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The sun beats down intensely as you make your way back from completing construction on the new shelter and storage area. The physical exertion has left your muscular torso dripping with sweat. You can't wait to tell the girls the good news.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you approach the shed near the river, you spot Cherie, Lana and Elfie heading your way.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Rushing over with a look of concern</action> <p>Oh honey, are you alright? We were so worried when we didn't see you for hours!</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB20A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Grinning with pride</action> <p>Everything's great, don't worry! I got the shelter and storage built all by myself. And that's not all - I defeated a MAD Dummy in combat on the way back too. I'm feeling stronger than ever!</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Rolling her eyes sarcastically</action> <p>A MAD Dummy? Right...and I suppose you built the Taj Mahal while you were at it too?</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Jumping up and down eagerly</action> <p>Wow really?? You finished the whole shelter? I wanna see it now! Did you really fight a MAD Dummy too? That's amazing!</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB20B.webp"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scoffing</action> <p>Come on Elfie, you can't actually believe he did all that in one day. He's obviously exaggerating.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Flexing your biceps with a sly grin</action> <p>It's all true. This MAD Dummy was no match for my newfound strength. And just wait until you see the shelter!</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Studying you with concern</action> <p>I don't know dear, it does seem hard to believe. But you do look different somehow - so strong and vibrant! Still, don't overexert yourself, okay?</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Bouncing excitedly</action> <p>Pleeease can we go see the shelter now? I wanna see if he really did finish it! This is so cool!</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Rolling her eyes again</action> <p>Fine, let's go check out this "magical shelter" then. I'm sure it's just a pile of sticks.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB20C.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Catching her gaze, the truth of your achievements glinting in your eyes</action> <p>"Believe it or not, it happened. And I'm eager to show you the fruits of today's labor."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Still stunned, the girls follow as you lead them towards the amazing shelter you somehow managed to build in record time. Lana steals glances at your bare, muscular back and finds herself admiring, she shakes her head and tell herself you are still just a weak kid. Elfie skips happily along, her innocence blending with curious surprise at your transformation. Cherie follows protectively behind, relief washing over her at seeing you awake and better than ever.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go to the Shelter </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB20'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("BB21"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } .DIAS_button img { width: 5vh; padding: 1vh; filter: invert(9%) sepia(92%) saturate(6754%) hue-rotate(7deg) brightness(84%) contrast(98%); } .DIAS_button { margin-bottom: 2vh; } </style>\ <<nobr>> <<set $newGame.newgameprol to 1>> <div class="DIAS_container"> <style></style> <!-- Do not delete stupid ass --> <!-- User --> <div class="DIAS_message right DIAS_active"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Leading the way to my room, the first stop on the tour</action> <inner>They have no idea what's in store for them.</inner> <p>"Welcome to the heart of our new sanctuary."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The door creaks open to reveal a spacious chamber, bathed in serene blue, the wooden walls giving it an earthy warmth. Sunlight dances through the open window, casting a welcoming glow over everything.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie, Lana, and Elfie, Their eyes widen, taking in the grandeur of the space, each reacting in their own unique way.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Her hand covers her mouth, tears glistening at the edge of her eyes</action> <p>"Oh my... it's beautiful."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Bouncing on the balls of her feet, barely able to contain her excitement</action> <p>"I can't believe this is ours!"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Crossing her arms, her gaze sweeping the room, a subtle softness in her eyes she tries to hide, she's moved, but she'd never admit it outright.</action> <inner>Wow, can't believe it was not a lie.</inner> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smiling at their reactions, then gesturing towards the next destination</action> <p>"Cherie, your room awaits."</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="changeBackgroundCherie()"> <img class="arrowbackground" src="ressources/maingui/ui/chevron-arrow2.webp"> <!-- right arrow icon --> </div> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_stopper" id="stopper1"> <div class="DIAS_text"> <p>Cherie's room emerges in a palette of warm, reddish hues, a stark contrast to the cool tranquility of the hallway. She steps inside, the soft carpet caressing her feet, and the room seems to embrace her.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB21A.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Her voice trembles with emotion</action> <p>"I never dreamed of having something like this again."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Moving along, the anticipation buzzes through the air as Elfie practically skips towards her room.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="changeBackgroundElfie()"> <img class="arrowbackground" src="ressources/maingui/ui/chevron-arrow2.webp"> <!-- right arrow icon --> </div> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_stopper" id="stopper2"> <div class="DIAS_text"> <p>The door swings open to a pink paradise, a reflection of her youthful exuberance.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Her eyes sparkle with unshed tears of joy as she explores every nook and cranny</action> <p>"It's perfect!"</p> <action>She launches into your arms</action> <p>"Thank you, thank you!"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB21B.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Hugging her back, a sense of pride swelling within</action> <inner>I'm glad they're happy. This is what it's all for.</inner> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Beaming at you, a look of admiration clear on her face</action> <p>"You've done so well."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana's room is next.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="changeBackgroundLana()"> <img class="arrowbackground" src="ressources/maingui/ui/chevron-arrow2.webp"> <!-- right arrow icon --> </div> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_stopper" id="stopper3"> <div class="DIAS_text"> <p>A mysterious purple enclave, both dark and inviting. She steps over the threshold, the ambiance aligning with her enigmatic aura.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Her voice is steady, betraying none of her inner delight</action> <p>"I suppose it's suitable."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The slight twitch of her lips, however, betrays her true feelings. She tours her domain, touching the fabric of her new reality.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/BB21C.webp"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>With a dry humor that lightens the mood</action> <p>"It'll do, for now."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Laughter bubbles up from the group, the tension melting away into genuine affection.</p> <p>The final stop is the bathroom.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="changeBackgroundBathroom()"> <img class="arrowbackground" src="ressources/maingui/ui/chevron-arrow2.webp"> <!-- right arrow icon --> </div> </div> <!-- Narrator --> <div class="DIAS_message centered DIAS_stopper" id="stopper4"> <div class="DIAS_text"> <p>A pristine white oasis that seems alien after so long without such luxuries. They wander through, already dreaming of the comfort it promises.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Noticing the time, feeling the weight of the day's work</action> <inner>I could use a break.</inner> <p>"I'm going to rest for a bit, but make yourselves at home. There's more to come."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>They nod, understanding the need for solitude after the excitement.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Her smile is as bright as the light filtering through the windows</action> <p>"I can't wait to see what's next!"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With farewells exchanged, you retreat to your room, the door closing with a soft click behind you, leaving you alone with your thoughts and the satisfaction of a new beginning.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> The Fapocalypse Begins </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof DIAF_initDialogPassage === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('BB21'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("1SA"); //next passage id } //var body = document.querySelector("body"); var styleEl = document.querySelector('.DIAS_container>style') var imageUrlCherie = 'ressources/backgrounds/1SC3.webp'; var imageUrlElfie = 'ressources/backgrounds/1SE1.webp'; var imageUrlLana = 'ressources/backgrounds/1SL.webp'; var imageUrlBathroom = 'ressources/backgrounds/1SB2.webp'; function changeBackgroundCherie() { // Set the background image of the body //body.style.backgroundImage = 'url(' + imageUrlCherie + ')'; styleEl.innerHTML = 'body {background-image: url(' + imageUrlCherie + ');}'; var stopper1 = document.getElementById('stopper1'); stopper1.classList.remove('DIAS_stopper'); } function changeBackgroundElfie() { // Set the background image of the body //body.style.backgroundImage = 'url(' + imageUrlElfie + ')'; styleEl.innerHTML = 'body {background-image: url(' + imageUrlElfie + ');}'; var stopper2 = document.getElementById('stopper2'); stopper2.classList.remove('DIAS_stopper'); } function changeBackgroundLana() { // Set the background image of the body //body.style.backgroundImage = 'url(' + imageUrlLana + ')'; styleEl.innerHTML = 'body {background-image: url(' + imageUrlLana + ');}'; var stopper3 = document.getElementById('stopper3'); stopper3.classList.remove('DIAS_stopper'); } function changeBackgroundBathroom() { // Set the background image of the body //body.style.backgroundImage = 'url(' + imageUrlBathroom + ')'; styleEl.innerHTML = 'body {background-image: url(' + imageUrlBathroom + ');}'; var stopper4 = document.getElementById('stopper4'); stopper4.classList.remove('DIAS_stopper'); } </script>\
<<script>> stopAudio("voice"); /* resetTracksTime("music"); */ playAudio("music", "overallMap"); SugarCube.UIBar.unstow(); /* meh */ SugarCube.State.variables.gui_interface.angelaButtonEnable = true; /*SugarCube.State.variables.gui_interface.mapButtonEnable = false;*/ SugarCube.State.variables.gui_interface.inventoryButtonEnable = true; <</script>>\ <<nobr>> <div class="MS_mainContainer"> <img class="MS_mainImage" src="./ressources/maingui/maps/map.webp"> <!-- hover images --> <img class="MS_hoverImage" type="district" src="./ressources/maingui/maps/map_city.webp"> <img class="MS_hoverImage" type="wasteland" src="./ressources/maingui/maps/map_wasteland.webp"> <img class="MS_hoverImage" type="forest" src="./ressources/maingui/maps/map_forest.webp"> <!-- triggers --> <img class="MS_triggerImage" src="./ressources/maingui/maps/map_blank.webp" type="district" onclick="SugarCube.Engine.play('DISTRICT MAP')" style="clip-path: polygon(56.0% 5.1%, 57.6% 20.3%, 59.8% 34.7%, 62.5% 47.5%, 66.3% 60.9%, 61.4% 54.4%, 56.1% 49.4%, 50.9% 45.8%, 45.2% 43.2%, 39.5% 41.8%, 34.0% 42.6%, 29.5% 45.5%, 24.8% 52.1%, 21.9% 57.9%, 19.1% 64.6%, 16.0% 72.3%, 12.3% 79.3%, 8.8% 79.5%, 4.2% 75.1%, 2.9% 69.8%, 3.8% 67.1%, 3.2% 61.4%, 3.6% 56.6%, 11.1% 49.4%, 12.0% 47.1%, 12.3% 41.9%, 17.7% 28.1%, 20.9% 22.3%, 22.1% 19.4%, 23.7% 18.1%, 25.8% 19.3%, 35.1% 9.1%, 41.4% 6.3%, 41.4% 3.1%, 43.8% 2.9%, 44.2% 5.8%, 46.5% 6.1%, 46.5% 3.3%, 48.6% 3.1%, 49.7% 5.6%);"> <img class="MS_triggerImage" src="./ressources/maingui/maps/map_blank.webp" type="wasteland" onclick="SugarCube.Engine.play('WASTELAND MAP')" style="clip-path: polygon(14.6% 79.6%, 17.1% 74.3%, 20.0% 67.3%, 23.7% 58.4%, 27.6% 51.5%, 31.8% 46.8%, 35.5% 44.9%, 38.8% 44.4%, 43.9% 45.6%, 49.7% 48.1%, 55.9% 52.4%, 61.4% 58.0%, 65.5% 63.6%, 69.5% 69.8%, 73.4% 77.2%, 76.0% 81.8%, 79.2% 86.2%, 71.9% 92.3%, 67.3% 94.1%, 61.8% 94.1%, 57.6% 93.4%, 50.9% 95.3%, 42.9% 90.9%, 34.7% 86.0%, 19.5% 79.4%);"> <img class="MS_triggerImage" src="./ressources/maingui/maps/map_blank.webp" type="forest" onclick="SugarCube.Engine.play('FOREST MAP')" style="clip-path: polygon(58.0% 5.2%, 74.1% 4.7%, 81.0% 3.3%, 84.6% 5.6%, 87.9% 15.7%, 89.1% 19.6%, 89.9% 21.2%, 93.6% 27.0%, 96.0% 34.1%, 95.8% 47.6%, 97.0% 64.7%, 96.1% 70.8%, 93.4% 75.4%, 88.3% 81.2%, 81.1% 84.6%, 76.8% 78.6%, 72.2% 70.5%, 68.1% 60.0%, 64.3% 47.6%, 60.9% 30.5%, 59.0% 16.3%);"> <!-- girl location indicator --> <div class="MS_divAreasCont"> <div class="GLMS_markerCont" section="district" style="bottom: 61%; left: 31%; width: 25%"> <!-- <div class="GLMS_marker"><img src="./ressources/icons/10.webp"></div> <div class="GLMS_marker"><img src="./ressources/icons/8.webp"></div> --> </div> <div class="GLMS_markerCont" section="wastelands" style="top: 55%; left: 25%; width: 45%"></div> <div class="GLMS_markerCont" section="forest" style="top: 26%; left: 65%; width: 31%"></div> </div> </div> <</nobr>>\ <style> /* * { box-sizing: border-box; } */ body { overflow: hidden; background-color: rgb(6, 123, 169); } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed ~ #story{ /*margin-left: 0;*/ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } .MS_mainContainer { position: relative; width: 100%; max-height: 100%; } .MS_mainContainer > .MS_mainImage { width: 100%; } .MS_mainContainer > .MS_hoverImage, .MS_mainContainer > .MS_triggerImage { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.3s ease-in-out; } .MS_mainContainer > .MS_triggerImage { cursor: pointer; } .MS_mainContainer > .MS_hoverImage { pointer-events: none; z-index: 2; } .MS_divAreasCont{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } </style>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { setCurrentSection({name: "World Map"}); //setCurrentSection({keys: "district.sub.workshop"}); //eg var trigerZones = document.querySelectorAll(".MS_triggerImage"); trigerZones.forEach(function(zone) { let type = zone.getAttribute("type"); let hoverImage = document.querySelector(`.MS_hoverImage[type='${type}']`); if (!hoverImage) return; zone.addEventListener("mouseover", function() { hoverImage.style.opacity = 1; }); zone.addEventListener("mouseout", function() { hoverImage.style.opacity = 0; }); }); } })(); </script>\
<!-- District -->\ <<script>> /* resetTracksTime("music"); */ playAudio("music", "overallMap"); SugarCube.State.variables.gui_interface.angelaButtonEnable = true; /*SugarCube.State.variables.gui_interface.mapButtonEnable = true;*/ SugarCube.State.variables.gui_interface.inventoryButtonEnable = true; <</script>>\ <<nobr>> <div class="previousmap">[["MAIN MAP"|MAIN MAP]]</div> <div class="MS_mapContainer"> <img class="MS_mainImage" src="./ressources/maingui/maps/city/city.webp" > <img section="workshop" class="IMGa lockedmap" src="./ressources/maingui/maps/city/city_workshop_locked.webp"> <img section="workshop" class="IMGa unlockedmap" src="./ressources/maingui/maps/city/city_workshop_bought.webp"> <!-- img section="workshop" class="IMGa hoverInfo" src="./ressources/maingui/maps/city/city_workshop.webp" --> <!-- TODO --> <img section="shelter" class="IMGa lockedmap" src="./ressources/maingui/maps/city/city_shelter_locked.webp"> <!--img section="shelter" class="IMGa unlockedmap" src="./ressources/maingui/maps/city/city_shelter_bought.webp"--> <!-- unlocked from the start --> <img section="shelter" class="IMGa hoverInfo" src="./ressources/maingui/maps/city/city_shelter.webp"> <img section="greenhouse" class="IMGa lockedmap" src="./ressources/maingui/maps/city/city_greenhouse_locked.webp"> <img section="greenhouse" class="IMGa unlockedmap" src="./ressources/maingui/maps/city/city_greenhouse_bought.webp"> <!-- img section="greenhouse" class="IMGa hoverInfo" src="./ressources/maingui/maps/city/city_greenhouse.webp" --> <!-- TODO --> <img section="storage" class="IMGa lockedmap" src="./ressources/maingui/maps/city/city_storage_locked.webp"> <img section="storage" class="IMGa unlockedmap" src="./ressources/maingui/maps/city/city_storage_bought.webp"> <img section="storage" class="IMGa hoverInfo" src="./ressources/maingui/maps/city/city_storage.webp"> <img section="river" class="IMGa lockedmap" src="./ressources/maingui/maps/city/city_river_locked.webp"> <img section="river" class="IMGa unlockedmap" src="./ressources/maingui/maps/city/city_river_bought.webp"> <img section="river" class="IMGa hoverInfo" src="./ressources/maingui/maps/city/city_river.webp"> <img section="prison" class="IMGa lockedmap" src="./ressources/maingui/maps/city/city_prison_locked.webp"> <img section="prison" class="IMGa unlockedmap" src="./ressources/maingui/maps/city/city_prison_bought.webp"> <!-- img section="prison" class="IMGa hoverInfo" src="./ressources/maingui/maps/city/city_prison.webp" --> <!-- TODO --> <img section="gates" class="IMGa lockedmap" src="./ressources/maingui/maps/city/city_gates_locked.webp"> <img section="gates" class="IMGa unlockedmap" src="./ressources/maingui/maps/city/city_gates_bought.webp"> <img section="gates" class="IMGa hoverInfo" src="./ressources/maingui/maps/city/city_gates.webp"> <!-- hover Triggers --> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/city/city_blank.webp" section="workshop" style="clip-path: polygon(0.0% 0.0%, 49.7% 0.0%, 49.7% 23.5%, 46.5% 24.4%, 44.0% 25.6%, 41.8% 27.9%, 39.8% 30.9%, 0.0% 30.7%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/city/city_blank.webp" section="shelter" style="clip-path: polygon(0.0% 31.7%, 39.2% 31.7%, 36.8% 37.7%, 35.8% 42.2%, 35.1% 48.7%, 35.4% 55.8%, 36.8% 62.5%, 39.2% 68.0%, 0.0% 68.0%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/city/city_blank.webp" section="greenhouse" style="clip-path: polygon(0.0% 69.0%, 39.7% 69.0%, 41.8% 71.8%, 44.2% 74.3%, 46.8% 75.8%, 49.7% 76.3%, 49.7% 100.0%, 0.0% 100.0%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/city/city_blank.webp" section="storage" style="clip-path: polygon(49.9% 24.2%, 45.6% 25.4%, 42.3% 28.5%, 40.0% 31.7%, 38.0% 35.9%, 36.3% 41.8%, 35.6% 48.5%, 36.0% 55.2%, 37.3% 61.9%, 39.8% 67.6%, 42.7% 71.9%, 46.1% 74.5%, 49.9% 75.5%, 53.6% 74.8%, 56.7% 72.6%, 59.3% 69.6%, 61.3% 65.8%, 63.1% 60.4%, 64.2% 54.1%, 64.3% 47.8%, 63.6% 41.7%, 62.2% 36.1%, 60.0% 31.7%, 57.6% 28.3%, 54.2% 25.2%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/city/city_blank.webp" section="river" style="clip-path: polygon(50.2% 0.0%, 100.0% 0.0%, 100.0% 30.7%, 60.1% 30.7%, 58.2% 28.1%, 56.1% 25.8%, 53.2% 24.0%, 50.2% 23.5%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/city/city_blank.webp" section="prison" style="clip-path: polygon(60.6% 31.6%, 100.0% 31.6%, 100.0% 68.0%, 60.8% 68.0%, 62.7% 63.9%, 63.9% 59.1%, 64.7% 53.1%, 64.8% 47.1%, 64.0% 41.6%, 62.9% 36.5%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/city/city_blank.webp" section="gates" style="clip-path: polygon(60.2% 68.8%, 100.0% 69.0%, 100.0% 100.0%, 50.2% 100.0%, 50.2% 76.3%, 52.6% 76.1%, 55.3% 74.7%, 57.8% 72.4%);"> <!-- girl location indicator --> <div class="MS_divAreasCont"> <div class="GLMS_markerCont" section="district.sub.workshop" style="bottom: 70%; left: 1%; width: 40%"></div> <div class="GLMS_markerCont" section="district.sub.shelter" style="bottom: 35%; left: 1%; width: 35%"></div> <div class="GLMS_markerCont" section="district.sub.greenhouse" style="bottom: 1%; left: 1%; width: 45%"></div> <div class="GLMS_markerCont" section="district.sub.storage" style="bottom: 40%; left: 40%; width: 20%"></div> <div class="GLMS_markerCont" section="district.sub.river" style="bottom: 70%; right: 1%; max-width: 40%"></div> <div class="GLMS_markerCont" section="district.sub.prison" style="bottom: 35%; right: 1%; max-width: 35%"></div> <div class="GLMS_markerCont" section="district.sub.gates" style="bottom: 1%; right: 1%; max-width: 45%"></div> </div> </div> <div class="MS_popupOverlayCont"> <!---div class="popupOverlay"> <div class="popupDiv"> <name>The Namesdddd<br>(Here)</name> <hr> <div class="popupDiv_requirements"> <div> <img src="./ressources/icons/13A12.webp"> <qty>80</qty> </div> <div> <img src="./ressources/icons/13A12.webp"> <qty>80</qty> </div> </div> <hr> <div class="popupDiv_buyDiv locked"> <div><img src="./ressources/maingui/ui/build.webp"></div> <desc>Requirements not met</desc> </div> <exit> x </exit> </div> </div--> </div> <</nobr>>\ <style> body { background-color: rgb(20,20,20); overflow: hidden; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ /*body{*/ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; position: relative; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-family: 'Roboto', sans-serif; } #passages { display: flex; justify-content: center; margin: 0; max-width: 100%; } .previousmap { position: absolute;; z-index: 3; font-size: 1.8em; display: flex; align-content: center; top: 3vh; left: 3vh; } .previousmap .link-internal { position: sticky; height: 15vh; width: 15vh; border-radius: 50%; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4); background-image: none; padding: 1vh 1vh; min-width: 15vh; display: flex; align-items: center; } .previousmap .link-internal:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .MS_mapContainer { position: relative; width: 100%; max-height: 100%; display: table; /* center */ } .MS_mapContainer > .MS_mainImage { width: 100%; } .MS_mapContainer > .IMGa { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.3s ease-in-out; } .MS_mapContainer > .IMGa.hoverTrigger { cursor: pointer; } img.IMGa.hoverInfo { z-index: 2; pointer-events: none; } .MS_divAreasCont{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { window.SugarCube.Engine.play(window.SugarCube.State.passage);}, 40); } else { //window.MS_secKey = "district"; //let { lastObject: TheObj, lastKey: TheLastKey } = setObjByKeys(SugarCube.State.variables.section, MS_secKey); //window.MS_subSec = TheObj[TheLastKey].sub; setCurrentSection({keys: "district"}); MS_Init(); } </script>\
<!--Storage-->\ <<nobr>> <<script>>playAudio("music", "shelter")<</script>> <style> body { overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; background-image: url('ressources/backgrounds/1B.webp'); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } .character-button { height: 79vh; margin-top: 21vh; z-index: 10; position: absolute; top: 0vh; } #story .bed { width: 45%; height: 70%; background-color: transparent; position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); /* z-index: 5; */ cursor: pointer; } #story .cherieopen, .lanaopen, .elfieopen, .gabbieopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #404040; border: 2vmin solid #c1500a; display: none; opacity: 0; transform: scale(0.5); transform-origin: right; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 15%; } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; } .passage { width: 100%; } .button-container { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; margin: 20px; flex-grow: 1; margin-top: -22vh; } .circle-button { width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 2vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #404040; border: 2vmin solid #c1500a; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #c1500a; } .circle-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .exit-button { margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #404040; border: 2vmin solid #c1500a; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(32%) sepia(96%) saturate(3486%) hue-rotate(19deg) brightness(93%) contrast(92%); } .circle-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(32%) sepia(96%) saturate(3486%) hue-rotate(19deg) brightness(93%) contrast(92%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .dialog-options-container { position: absolute; display: none; flex-wrap: wrap; width: 25vw; top: 38vh; right: 15vw; z-index: 1000; } .dialog-option { width: 9vw; /* Adjust the width based on your preferences with some spacing */ height: 60px; /* Adjust the height based on your preferences */ background-color: #404040; border: 2vmin solid #c1500a; color: #c1500a; border-radius: 5px; margin-bottom: 5px; /* Adjust the margin between options */ display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; /* Initially set opacity to 0 for fade-in effect */ transform: scale(0.8); /* Initially set scale to 0.8 for small-to-big effect */ transition: transform 0.5s ease, background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease; /* Add smooth transitions */ margin: 0.5vw; } .dialog-option:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ color: #c1500a; /* Change text color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #ccc; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ background-color: #404040; border: 2vmin solid #c1500a; color: #c1500a; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } </style> <div class="exit-button" onclick='SugarCube.Engine.play("DISTRICT MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="button-container"> <div class="circle-button" onclick='accessInventory("storage")'> <img src="ressources/icons/IDK1.webp" width="70%" alt="Button 1"> </div> <div class="circle-button" id="dialogOpen" onclick='accessInventory("fridge")'> <img src="ressources/icons/IDK2.webp" width="70%" alt="Button 2"> </div> <div class="circle-button"> <b><p>NOT AVAILABLE</p> <p>IN THIS VERSION</p></b> </div> </div> <div class="character-button-container" section="district.sub.storage"></div> <</nobr>> <script> </script>
<!-- Shelter -->\ <<nobr>> <<script>> playAudio("music", "shelter"); SugarCube.State.variables.gui_interface.angelaButtonEnable = true; /*SugarCube.State.variables.gui_interface.mapButtonEnable = true;*/ SugarCube.State.variables.gui_interface.inventoryButtonEnable = true; <</script>> <div class="previousmap">[["DISTRICT MAP"|DISTRICT MAP]]</div> <div class="MS_mapContainer"> <img class="MS_mainImage" src="./ressources/maingui/maps/shelter/shelter.webp"> <!--img class="image-main" src="./ressources/maingui/maps/shelter/shelter-night.webp"--> <img section="bedroomMc" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_mcroom_hover.webp"> <img section="bedroomElfie" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_younger_hover.webp"> <img section="bedroomLana" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_older_hover.webp"> <!-- img section="bathroom1" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_bathroom.webp" --> <img section="bathroom1" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_bathroom_hover.webp"> <img section="bedroomCherie" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_mom_hover.webp"> <img section="gym" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_gym.webp"> <img section="gym" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_gym_hover.webp"> <img section="kitchen" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_kitchen.webp"> <img section="kitchen" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_kitchen_hover.webp"> <img section="livingroom" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_livingroom.webp"> <img section="livingroom" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_livingroom_hover.webp"> <img section="bathroom2" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_bathroom2.webp"> <img section="bathroom2" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_bathroom2_hover.webp"> <img section="backyard" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_backyard.webp"> <img section="backyard" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_backyard_hover.webp"> <img section="pool" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_pool.webp"> <img section="pool" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_pool_hover.webp"> <img section="spa" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_spa.webp"> <img section="spa" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_spa_hover.webp"> <img section="guest1" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_guestroom1.webp"> <img section="guest1" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_guestroom1_hover.webp"> <img section="guest2" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_guestroom2.webp"> <img section="guest2" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_guestroom2_hover.webp"> <img section="guest3" class="IMGa unlockedmap" src="./ressources/maingui/maps/shelter/shelter_guestroom3.webp"> <img section="guest3" class="IMGa hoverInfo" src="./ressources/maingui/maps/shelter/shelter_guestroom3_hover.webp"> <!-- hover Triggers --> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="bedroomMc" style="clip-path: polygon(59.2% 12.9%, 25.9% 22.7%, 74.1% 22.6%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="bedroomElfie" style="clip-path: polygon(25.6% 24.6%, 25.9% 36.9%, 50.1% 36.8%, 50.0% 24.4%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="bedroomLana" style="clip-path: polygon(51.3% 24.5%, 72.8% 24.5%, 72.8% 36.8%, 51.1% 36.8%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="bathroom1" style="clip-path: polygon(26.1% 38.5%, 26.4% 50.2%, 50.2% 50.1%, 50.1% 38.7%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="bedroomCherie" style="clip-path: polygon(51.1% 38.8%, 50.9% 50.0%, 72.9% 50.0%, 72.9% 39.0%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="gym" style="clip-path: polygon(5.1% 51.9%, 25.5% 52.0%, 25.4% 63.3%, 5.2% 62.9%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="kitchen" style="clip-path: polygon(26.1% 52.3%, 50.0% 52.3%, 49.9% 62.8%, 26.1% 63.1%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="livingroom" style="clip-path: polygon(50.8% 52.3%, 72.8% 52.2%, 72.9% 63.2%, 50.9% 62.5%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="bathroom2" style="clip-path: polygon(73.4% 52.0%, 93.8% 52.0%, 93.6% 63.1%, 73.5% 63.3%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="backyard" style="clip-path: polygon(0.0% 33.6%, 26.4% 33.6%, 26.5% 50.5%, 0.0% 50.5%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="pool" style="clip-path: polygon(73.4% 33.5%, 100.0% 33.5%, 100.0% 50.5%, 73.4% 50.4%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="spa" style="clip-path: polygon(5.2% 64.8%, 25.4% 65.0%, 25.1% 76.4%, 5.3% 76.2%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="guest1" style="clip-path: polygon(26.1% 64.6%, 49.9% 64.8%, 49.7% 76.1%, 25.9% 76.4%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="guest2" style="clip-path: polygon(50.7% 64.9%, 72.4% 65.0%, 72.6% 75.8%, 50.7% 76.1%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/shelter/shelter_blank.webp" section="guest3" style="clip-path: polygon(73.6% 65.0%, 93.7% 64.8%, 93.7% 76.2%, 73.6% 76.5%);"> <div class="MS_divAreasCont"> <div class="GLMS_markerCont" section="district.sub.shelter.sub.bedroomElfie" style="bottom: 63.3%; left: 26%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.bedroomLana" style="bottom: 63.2%; left: 51%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.bathroom1" style="bottom: 50%; left: 26.3%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.bedroomCherie" style="bottom: 50.2%; left: 51%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.backyard" style="bottom: 49.8%; left: 0"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.pool" style="bottom: 49.8%; left: 73.8%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.gym" style="bottom: 37.2%; left: 5.3%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.kitchen" style="bottom: 37.2%; left: 26%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.livingroom" style="bottom: 37.5%; left: 51%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.bathroom2" style="bottom: 36.9%; left: 73.8%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.spa" style="bottom: 24%; left: 5.3%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.guest1" style="bottom: 24%; left: 26%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.guest2" style="bottom: 24%; left: 50.8%"></div> <div class="GLMS_markerCont" section="district.sub.shelter.sub.guest3" style="bottom: 24%; left: 73.8%"></div> </div> </div> <div class="MS_popupOverlayCont"></div> <</nobr>>\ <style> body { background-color: rgb(20,20,20); /*overflow: hidden;*/ } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed ~ #story{ /*margin-left: 0;*/ margin-left: 0; } .passage{ /*body{*/ position: relative; user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; /*overflow: hidden;*/ margin: 0; /*padding: 0;*/ /*height: 100vh;*/ width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-family: 'Roboto', sans-serif; } #passages { display: flex; justify-content: center; margin: 0; max-width: 100%; } .previousmap { position: absolute;; z-index: 3; font-size: 1.6em; display: flex; align-content: center; top: 3vh; left: 3vh; } .previousmap .link-internal { position: sticky; height: 15vh; width: 15vh; border-radius: 50%; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4); background-image: none; padding: 1vh 1vh; min-width: 15vh; display: flex; align-items: center; } .previousmap .link-internal:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .MS_mapContainer { position: relative; width: 100%; max-height: 100%; display: table; /* center */ } .MS_mapContainer > .MS_mainImage { width: 100%; } .MS_mapContainer > .IMGa { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.3s ease-in-out; } .MS_mapContainer > .IMGa.hoverTrigger { cursor: pointer; } .MS_mapContainer > .IMGa.hoverInfo { pointer-events: none; z-index: 2; } .MS_divAreasCont{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { window.SugarCube.Engine.play(window.SugarCube.State.passage);}, 40); } else { //window.MS_secKey = "shelter" //window.MS_subSec = SugarCube.State.variables.section[MS_secKey].sub; // shortcut if not already set //window.MS_secKey = "district.sub.shelter"; //let { lastObject: TheObj, lastKey: TheLastKey } = setObjByKeys(SugarCube.State.variables.section, MS_secKey); //window.MS_subSec = TheObj[TheLastKey].sub; setCurrentSection({keys: "district.sub.shelter"}); var MS_secKey = "district.sub.shelter"; MS_Init(); var MS_mainImage = MS_mapContainer.querySelector(".MS_mainImage"); switch (SugarCube.State.variables.gameTime.partOfDayKey) { case "morning": case "afternoon": MS_mainImage.src = "./ressources/maingui/maps/shelter/shelter.webp"; break; case "evening": case "night": MS_mainImage.src = "./ressources/maingui/maps/shelter/shelter-night.webp"; break; default: break; } /* window.MS_divAreasCont = document.querySelector(".MS_divAreasCont"); window.MS_divAreasContDivs = MS_divAreasCont.querySelectorAll('[section]'); */ //debugger; /* for (character in SugarCube.State.variables.characters) { //if (!SugarCube.State.variables.characters[character].location) { continue; } // if character has no location, skip var characterLocInfo = getCharaterLocationInfo(character); if (!characterLocInfo.section) { continue; } // if character has no section, skip var section = characterLocInfo.section; var filter = `${MS_secKey}.sub.`; //check if if section starts with `${MS_secKey}.sub.` (e.g. "district.sub.shelter.sub.") if (!section.startsWith(filter)) { continue; } // if section does not start with filter, skip section = section.replace(filter, ""); // remove filter from section var imgIndex = SugarCube.State.variables.characters[character].image_set; var imgLink = SugarCube.State.variables.characters[character].image[imgIndex]; for (var i = 0; i < MS_divAreasContDivs.length; i++) { if (MS_divAreasContDivs[i].getAttribute("section") == section) { var Cimg = document.createElement("img"); Cimg.src = imgLink; //Create the EventListener on the element: let info = [{ title : SugarCube.State.variables.characters[character].name, }]; Cimg.addEventListener("mouseover", function() { mouseFollowerCreateInfo(info) }); Cimg.addEventListener("mouseout", function() { mouseFollowerRemoveInfo() }); MS_divAreasContDivs[i].appendChild(Cimg); } } } */ } </script>\
<!--River-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "river"); <</script>> <div class="exit-button" onclick='SugarCube.Engine.play("DISTRICT MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="MRS_backgroundImagesCont"> <img class="MRS_base" src="ressources/backgrounds/1R.webp"> <!-- base --> <img class="MRS_clip" src="ressources/backgrounds/1R.webp" onclick='SugarCube.Engine.play("1RS")'> <!-- clip path --> <img class="MRS_hover" src="ressources/backgrounds/1R1.webp"> <!-- hover --> </div> <div class="character-button-container" section="district.sub.river"></div> <</nobr>>\ <script> /* nothin */ </script>\ <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; /* overflow: hidden; */ margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } .exit-button { position: absolute; z-index: 1; margin: 3vmin; width: 20vmin; height: 20vmin; border-radius: 50%; margin: 3vmin; display: flex; align-items: center; justify-content: center; background-color: #0f7bea; border: 2vmin solid #7bce51; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; } .exit-button img { max-width: 80%; max-height: 80%; border-radius: 50%; filter: invert(72%) sepia(93%) saturate(305%) hue-rotate(47deg) brightness(86%) contrast(91%); } .exit-button:hover { transform: translateY(-5px); background-color: gray; } .MRS_backgroundImagesCont { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .MRS_backgroundImagesCont img { position: absolute; top: 0; height: 100%; left: calc(50%); /* 26vh/4 */ transform: translateX(-50%); pointer-events: none; } .MRS_backgroundImagesCont img.MRS_base { opacity: 1; } .MRS_backgroundImagesCont img.MRS_hover { opacity: 0; transition: opacity 0.5s ease; } .MRS_backgroundImagesCont img.MRS_clip { opacity: 0; pointer-events: all; clip-path: polygon(24.7% 73.0%, 26.4% 51.1%, 25.2% 51.5%, 25.0% 50.3%, 33.9% 30.4%, 43.8% 27.0%, 54.3% 22.2%, 58.7% 35.5%, 63.7% 47.7%, 63.2% 48.7%, 62.0% 48.7%, 61.9% 50.0%, 61.6% 51.1%, 61.2% 70.6%, 42.2% 73.4%); cursor: pointer; } .MRS_backgroundImagesCont img.MRS_clip:hover ~ img.MRS_hover { opacity: 1; } </style>\
<!--Shed-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "river"); <</script>> <style> body { overflow: hidden; background-image: url('ressources/backgrounds/1RS.webp'); } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; /* background-image: url('ressources/backgrounds/1RS.webp') !important; */ background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } .centerbox { z-index: 0; position: fixed; width: 100%; height: 100%; top: 0; } .bed { width: 40%; height: 53%; background-color: transparent; position: absolute; top: 48%; left: 36%; transform: translate(-50%, -50%); z-index: 5; cursor: pointer; } #story.fade-background::before { opacity: 1; } .circle-button { width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 2vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #9b3b25; border: 2vmin solid #f5d192; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #f5d192; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #9b3b25; border: 2vmin solid #f5d192; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(88%) sepia(21%) saturate(839%) hue-rotate(334deg) brightness(101%) contrast(92%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #ccc; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ background-color: #9b3b25; border: 2vmin solid #f5d192; color: #f5d192; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #9b3b25; border: 2vmin solid #f5d192; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #9b3b25; border: 0.5vmin solid #f5d192; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(88%) sepia(21%) saturate(839%) hue-rotate(334deg) brightness(101%) contrast(92%); } .informations_info { margin: 4vh; font-size: 2vh; color: #f5d192 } #mainButton_right { background-color: #9b3b25; outline: solid 0.67vh #f5d192; } #mainButton_right img { filter: invert(88%) sepia(21%) saturate(839%) hue-rotate(334deg) brightness(101%) contrast(92%); } #mainButton_right { background-color: #9b3b25; outline: solid 0.67vh #f5d192; } .textNA { color: #f5d192; } .small-button_right { outline: solid 0.67vh #f5d192; /* Only one outline declaration needed */ background-color: #9b3b25; } .small-button_right span { color: #f5d192; } </style> <div class="centerbox"></div> <div class="exit-button" onclick='SugarCube.Engine.play("1R")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="character-button-container" section="district.sub.river.sub.shed"></div> <</nobr>>\ <script> var currentPassage = document.querySelector(".passage"); //-------Slider-------// //-------Shed-------// var Scenes = { //F: River Talk, W Shed Talk cherieW: ['CW1', 'CW2', 'CW3', 'CW4', 'CW5', 'CW6', 'CW7', 'CW8', 'CW9', 'CW10', 'CW11', 'CW12', 'CW13', 'CW14', 'CW15', 'CW16'], elfieW: ['EW1', 'EW2', 'EW3', 'EW4', 'EW5', 'EW6', 'EW7', 'EW8', 'EW9', 'EW10', 'EW11', 'EW12', 'EW13', 'EW14', 'EW15', 'EW16'], lanaW: ['LW1', 'LW2', 'LW3', 'LW4', 'LW5', 'LW6', 'LW7', 'LW8', 'LW9', 'LW10', 'LW11', 'LW12', 'LW13', 'LW14', 'LW15', 'LW16'], } function setSceneButton(button, sceneKey) { let scene = SugarCube.State.variables.scenes.list[sceneKey]; //let requirementsflex = button.querySelector('.req'); //if (!requirementsflex) {throw new Error(`Requirementsflex not found in button ${button}`)} //requirementsflex.querySelector('p').innerHTML = scene.name; // TODO, set the width dynamically //debugger; let requirements = button.querySelector('.req'); if (!requirements) { requirements = button.querySelector('.requirements'); } if (!requirements) {throw new Error(`Requirements not found in button ${button}`)} let requirementMet = checkRequirements(scene.requirements); if (requirementMet) { button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.style.cursor = "default"; button.style.backgroundColor = "grey"; } getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: requirements.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); requirements.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } var ScenesButtons = document.querySelectorAll('.small-button_right'); for (let i = 0; i < ScenesButtons.length; i++) { let character = ScenesButtons[i].getAttribute('character'); if (!Scenes[character]) {throw new Error(`Character ${character} not found in Scenes`)} for (let j = 0; j < Scenes[character].length; j++) { let sceneKey = Scenes[character][j]; let scene = SugarCube.State.variables.scenes.list[sceneKey]; if (scene) { if (scene.seen === false) { setSceneButton(ScenesButtons[i], sceneKey); break; } } } } var isButtonsRightVisible = false; // State to track visibility function toggleButtons() { var smallButtonsRight = document.getElementById('smallButtons_right'); var buttonsRight = Array.from(smallButtonsRight.children); if (!isButtonsRightVisible) { smallButtonsRight.style.opacity = '1'; buttonsRight.forEach((button) => { button.classList.remove('animate-out'); button.classList.add('animate-in'); }); } else { buttonsRight.forEach((button) => { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); // Set a timeout to match the duration of the animations plus the delay of the last button setTimeout(() => { smallButtonsRight.style.opacity = '0'; }, (buttonsRight.length - 1) * 1.33 + 4); // 0.3s is the duration of the animation } isButtonsRightVisible = !isButtonsRightVisible; } currentPassage.addEventListener('click', function (event) { var mainButtonRight = document.getElementById('mainButton_right'); var smallButtonsRight = document.getElementById('smallButtons_right'); // Check if the elements exist before trying to use them if (mainButtonRight && smallButtonsRight) { // Check if the click is outside the main button and small buttons if (!mainButtonRight.contains(event.target) && !smallButtonsRight.contains(event.target) && isButtonsRightVisible) { toggleButtons(); } } }); function removeSmall() { var smallButtonsRight = document.querySelectorAll('.small-button_right'); smallButtonsRight.forEach(function (button) { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); isButtonsRightVisible = !isButtonsRightVisible; } </script>\
<!--PlayerRoom-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "shelter"); <</script>> <style> #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; background-image: url('ressources/backgrounds/1SA1.webp'); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } span { color: #d7a103; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; color: white; font-family: 'Roboto', sans-serif; position: relative; } /*when hover #bed. change background #story image to 1SA1.webp*/ #passage-bloc-1sa:hover #story { background-image: url('ressources/backgrounds/1SA1.webp'); } .informations_info{ margin: 4vh; font-size: 2vh; } .centerbox { z-index: 0; position: fixed; width: 100%; height: 100%; top: 0; } .bed { width: 40%; height: 70%; background-color: transparent; position: absolute; top: 53%; left: 42%; transform: translate(-50%, -50%); z-index: 5; cursor: pointer; } #story.fade-background::before { opacity: 1; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #203864; border: 2vmin solid #d7a103; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(62%) sepia(30%) saturate(1791%) hue-rotate(10deg) brightness(96%) contrast(98%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #ccc; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ background-color: #203864; border: 2vmin solid #d7a103; color: #d7a103; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #203864; border: 2vmin solid #d7a103; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #203864; border: 0.5vmin solid #d7a103; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(78%) sepia(48%) saturate(4047%) hue-rotate(5deg) brightness(91%) contrast(98%); } .startbox { position: absolute; margin: auto; width: 44%; height: 85%; border: 3px solid rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.9); background-image: none; transition: all ease 0.3s; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; padding: 3vh; border-radius: 5vh; overflow-y: auto; } .startbox:hover { box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 0.5vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .DIAS_button { width: 20vh; margin-top: 2vh; margin-left: auto; margin-right: auto; } ::-webkit-scrollbar { width: 2vw; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); width: 2vw; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgb(214, 211, 211); } input[type=text] { min-width: 11em; } #labelMother-2 { margin-left: 3vh; } #labelSister1-2 { margin-left: 4.05vh; } #labelSister2-2 { margin-left: 4.4vh; } </style> <<if $newGame.newgame is 1>> <<set $newGame.newgame to 0>> <div class="startbox"> <div class="thetext"> <h1>Before you start</h1> <h2>Choose your name and relationships with the characters:</h2> <div id="nameModal"> <div class="input-group"> <input type="text" id="playerName" value="Alex" maxlength="20"> </div> </div> <div id="nameModal2"> <div class="input-group"> <input class="labelnames" type="text" id="labelMother" value="Landlady" maxlength="20"> Cherie <input class="labelnames" type="text" id="labelMother-2" value="Tennant" maxlength="20"> You </div> <div class="input-group"> <input class="labelnames" type="text" id="labelSister1" value="Older Friend" maxlength="20"> Lana <input class="labelnames" type="text" id="labelSister1-2" value="Friend" maxlength="20"> You </div> <div class="input-group"> <input class="labelnames" type="text" id="labelSister2" value="Younger Friend" maxlength="20"> Elfie <input class="labelnames" type="text" id="labelSister2-2" value="Friend" maxlength="20"> You </div> </div> <h2>Also, before you dive into the chaos, here's what you need to know:</h2> <h3 style="color: red;">Sidebar (Left Side):</h3> - <b>Dominance Value:</b> Your sexual power level. <p></p> - <b>Virus Value:</b> Keep this below 100% to avoid a fatal outcome.<p></p> - <b>Sleepyness:</b> Rest is crucial, don't let fatigue take over.<p></p> - <b>Food:</b> Monitor your fridge! Keep some in the storage to prevent starvation for you and the girls.<p></p> - <b>Time & Location:</b> Track the time of day (Morning, Afternoon, Evening, Night) and your current location.<p> </p> - <b>Inventory:</b> All collected (not-stored) items are here. Equip gear to enhance your strength.<p></p> <h3 style="color: red; padding-top: 2vh;">Top-Right Menu:</h3> - <b>Options:</b> Access cheats, view the gallery, settings and more. <h3 style="color: red; padding-top: 2vh;">Bottom-Right Map:</h3> - <b>Navigate through the game's zones:</b> district areas, wastelands, or the forest.<p></p> - <b>Combat & Scenes:</b> Get ready for action, interesting scenes and adventures.<p></p> - <b>Main Scenes Indicators:</b> Red exclamation (!) for Trust, Purple for Lust, and Yellow for Lore. <h3 style="color: red; padding-top: 2vh;">Relationship Metrics:</h3> - <b>Trust:</b> Gauge of love and romance with the girls.<p></p> - <b>Lust:</b> Level of sexuality and depravity. <h3 style="color: red; padding-top: 2vh;">Dangers:</h3> - <b>Virus:</b> If your virus level reaches 100, you will die. Masturbate in your room accordingly.<p></p> - <b>Food:</b> If you run out of food, you and the girls will die. Make sure you place food in the fridge, at the Storage.<p></p> - <b>Fights:</b> If you lose a fight, you will lose all your items and gain a lot of virus.<p></p> - <b>Zones:</b> The Wastelands are full of danger and the Forest will make virus management a real challenge.<p></p> <p></p> Ready to take on the world and build your harem? Your journey awaits! <p></p> <div class="DIAS_button" onclick="closeStart()">Start Playing</div> </div> </div> <</if>> <<if $newGame.newgameprol is 1>> <<set $newGame.newgameprol to 0>> <div class="startbox"> <div class="thetext"> <h1>Before you dive into the chaos, here's what you need to know:</h1> <h3 style="color: red;">Sidebar (Left Side):</h3> - <b>Dominance Value:</b> Your sexual power level. <p></p> - <b>Virus Value:</b> Keep this below 100% to avoid a fatal outcome.<p></p> - <b>Sleepyness:</b> Rest is crucial, don't let fatigue take over.<p></p> - <b>Food:</b> Monitor your fridge! Keep some in the storage to prevent starvation for you and the girls.<p> </p> - <b>Time & Location:</b> Track the time of day (Morning, Afternoon, Evening, Night) and your current location.<p></p> - <b>Inventory:</b> All collected (not-stored) items are here. Equip gear to enhance your strength.<p></p> <h3 style="color: red; padding-top: 2vh;">Top-Right Menu:</h3> - <b>Options:</b> Access cheats, view the gallery, settings and more. <h3 style="color: red; padding-top: 2vh;">Bottom-Right Map:</h3> - <b>Navigate through the game's zones:</b> district areas, wastelands, or the forest.<p></p> - <b>Combat & Scenes:</b> Get ready for action, interesting scenes and adventures.<p></p> - <b>Main Scenes Indicators:</b> Red exclamation (!) for Trust, Purple for Lust, and Yellow for Lore. <h3 style="color: red; padding-top: 2vh;">Relationship Metrics:</h3> - <b>Trust:</b> Gauge of love and romance with the girls.<p></p> - <b>Lust:</b> Level of sexuality and depravity. <h3 style="color: red; padding-top: 2vh;">Dangers:</h3> - <b>Virus:</b> If your virus level reaches 100, you will die. Masturbate in your room accordingly.<p></p> - <b>Food:</b> If you run out of food, you and the girls will die. Make sure you place food in the fridge, at the Storage.<p></p> - <b>Fights:</b> If you lose a fight, you will lose all your items and gain a lot of virus.<p></p> - <b>Zones:</b> The Wastelands are full of danger and the Forest will make virus management a real challenge. <p></p> <p></p> Ready to take on the world and build your harem? Your journey awaits! <p></p> <div class="DIAS_button" onclick="closeStart()">Start Playing</div> </div> </div> <</if>> <div class="centerbox"> <div class="bed" id="bed" onclick="toggleBed()"></div> </div> <div class="exit-button" onclick='SugarCube.Engine.play("SHELTER MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="mainboutondiv"> <div class="boutondiv_topright"> <div class="placeholder_right"></div> <div id="mainButton_topright" onmouseover="removeSmall()" onclick="toggleMast()"> <img src='ressources/icons/1SA4.webp' alt='Icon'> <span>Masturbate</span> <!-- Add this line --> </div> </div> <div class="boutondiv_bottomright_elfie hidden"> <div class="placeholder_right_elfie hidden"></div> <div id="mainButton_bottomright_elfie hidden"> <p class="textNAelfie hidden"></p> </div> </div> <div class="boutondiv_bottomright_elfie hidden"> <div class="placeholder_right_elfie hidden"></div> <div id="mainButton_bottomright_elfie hidden"> <p class="textNAelfie hidden"></p> </div> </div> </div> <</nobr>> <script> setCurrentSection({keys: "district.sub.shelter.sub.bedroomMc"}); var currentPassage = document.querySelector(".passage"); var isButtonsRightVisible = false; // State to track visibility function toggleButtons() { var smallButtonsRight = document.getElementById('smallButtons_right'); var buttonsRight = Array.from(smallButtonsRight.children); if (!isButtonsRightVisible) { smallButtonsRight.style.opacity = '1'; buttonsRight.forEach((button) => { button.classList.remove('animate-out'); button.classList.add('animate-in'); }); } else { buttonsRight.forEach((button) => { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); // Set a timeout to match the duration of the animations plus the delay of the last button setTimeout(() => { smallButtonsRight.style.opacity = '0'; }, (buttonsRight.length - 1) * 1.33 + 4); // 0.3s is the duration of the animation } isButtonsRightVisible = !isButtonsRightVisible; } currentPassage.addEventListener('click', function (event) { var mainButtonRight = document.getElementById('mainButton_right'); var smallButtonsRight = document.getElementById('smallButtons_right'); // Check if the elements exist before trying to use them if (mainButtonRight && smallButtonsRight) { // Check if the click is outside the main button and small buttons if (!mainButtonRight.contains(event.target) && !smallButtonsRight.contains(event.target) && isButtonsRightVisible) { toggleButtons(); } } }); function removeSmall() { var smallButtonsRight = document.querySelectorAll('.small-button_right'); smallButtonsRight.forEach(function (button) { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); isButtonsRightVisible = !isButtonsRightVisible; } //-------Slider-------// //-------Player Room-------// var Scenes = { cherie : ['CC1','CC2','CC3','CC4','CC5','CC6','CC7','CC8','CC9','CC10','CC11','CC12','CC13','CC14','CC15','CC16'], elfie : ['EC1','EC2','EC3','EC4','EC5','EC6','EC7','EC8','EC9','EC10','EC11','EC12','EC13','EC14','EC15','EC16'], lana : ['LC1','LC2','LC3','LC4','LC5','LC6','LC7','LC8','LC9','LC10','LC11','LC12','LC13','LC14','LC15','LC16'], } function setSceneButton(button, sceneKey) { let scene = SugarCube.State.variables.scenes.list[sceneKey]; //let requirementsflex = button.querySelector('.req'); //if (!requirementsflex) {throw new Error(`Requirementsflex not found in button ${button}`)} //requirementsflex.querySelector('p').innerHTML = scene.name; // TODO, set the width dynamically //debugger; let requirements = button.querySelector('.req'); if (!requirements) { requirements = button.querySelector('.requirements'); } if (!requirements) {throw new Error(`Requirements not found in button ${button}`)} let requirementMet = checkRequirements(scene.requirements); if (requirementMet) { button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.style.cursor = "default"; button.style.backgroundColor = "grey"; } getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: requirements.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); requirements.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } var ScenesButtons = document.querySelectorAll('.small-button_right'); for (let i = 0; i < ScenesButtons.length; i++) { let character = ScenesButtons[i].getAttribute('character'); if (!Scenes[character]) {throw new Error(`Character ${character} not found in Scenes`)} for (let j = 0; j < Scenes[character].length; j++) { let sceneKey = Scenes[character][j]; let scene = SugarCube.State.variables.scenes.list[sceneKey]; if (scene) { if (scene.seen === false) { setSceneButton(ScenesButtons[i], sceneKey); break; } } } } //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/1SA_1.webp'; var newImagePath = 'ressources/backgrounds/1SA1.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('story'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); //-------PASSAGE CHANGE TOGGLES-------// function toggleBed() { SugarCube.Engine.play("BLOC FOR SLEEP SA"); } function toggleMast() { SugarCube.Engine.play("BLOC FOR MASTURBATE SB"); } if (document.querySelector('#playerName')) { document.querySelector('#playerName').addEventListener('input', function () { SugarCube.State.variables.characters.mc.name = this.value; console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelMother').addEventListener('input', function () { SugarCube.State.variables.characters.cherie.role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelSister1').addEventListener('input', function () { SugarCube.State.variables.characters.lana.role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelSister2').addEventListener('input', function () { SugarCube.State.variables.characters.elfie.role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelMother-2').addEventListener('input', function () { SugarCube.State.variables.characters.cherie.player_role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelSister1-2').addEventListener('input', function () { SugarCube.State.variables.characters.lana.player_role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); document.querySelector('#labelSister2-2').addEventListener('input', function () { SugarCube.State.variables.characters.elfie.player_role = this.value; //console.log('Input changed:', this.value); // This line is for debugging. }); } function closeStart() { // Get the element with the class 'startbox' var startBox = document.querySelector('.startbox'); // Check if the startbox element exists if (startBox) { // Hide the startbox by setting its style display property to 'none' startBox.style.display = 'none'; } } </script>
<!--BathRoom-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "shelter"); <</script>> <style> body { overflow: hidden; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #d0cece; border: 2vmin solid #2e6ca4; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; color: #2e6ca4; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #d0cece; border: 0.5vmin solid #2e6ca4; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(43%) sepia(5%) saturate(6104%) hue-rotate(168deg) brightness(89%) contrast(98%); } .informations_info{ margin: 4vh; font-size: 2vh; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; background-image: url('ressources/backgrounds/1SB.webp'); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #ui-bar.stowed ~ #story{ margin-left: 0; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } #story .bed { width: 30%; height: 40%; background-color: transparent; position: absolute; top: 72%; left: 48%; transform: translate(-50%, -50%); /* z-index: 1000; */ cursor: pointer; } #story .cherieopen, .lanaopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #d0cece; border: 2vmin solid #2e6ca4; display: none; opacity: 0; transform: scale(0.5); transform-origin: right; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .elfieopen, .gabbieopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #d0cece; border: 2vmin solid #2e6ca4; display: none; opacity: 0; transform: scale(0.5); transform-origin: top right; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .peekopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #d0cece; border: 2vmin solid #2e6ca4; display: none; opacity: 0; transform: scale(0.5); transform-origin: bottom left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .bedopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #d0cece; border: 2vmin solid #2e6ca4; display: none; opacity: 0; transform: scale(0.5); transform-origin: bottom; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; } .passage { width: 100%; position: relative; } .button-container { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; margin: 20px; flex-grow: 1; margin-top: -22vh; } .circle-button { width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 2vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #d0cece; border: 2vmin solid #2e6ca4; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #2e6ca4; } .circle-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .bottom-left-button { position: relative; width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #d0cece; border: 2vmin solid #2e6ca4; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #2e6ca4; } .bottom-left-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .bottom-left-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: brightness(0) saturate(100%) invert(34%) sepia(90%) saturate(396%) hue-rotate(167deg) brightness(92%) contrast(94%); } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #d0cece; border: 2vmin solid #2e6ca4; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(34%) sepia(90%) saturate(396%) hue-rotate(167deg) brightness(92%) contrast(94%); } .circle-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(34%) sepia(90%) saturate(396%) hue-rotate(167deg) brightness(92%) contrast(94%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .game-options-container { position: absolute; display: none; flex-wrap: wrap; width: 13vw; top: 38vh; right: 15vw; z-index: 1000; } .dialog-options-container { position: absolute; display: none; flex-wrap: wrap; width: 13vw; top: 10vh; right: 15vw; z-index: 1000; } .dialog-option, .game-option { width: 9vw; /* Adjust the width based on your preferences with some spacing */ height: 60px; /* Adjust the height based on your preferences */ background-color: #d0cece; border: 2vmin solid #2e6ca4; color: #2e6ca4; border-radius: 5px; margin-bottom: 5px; /* Adjust the margin between options */ display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; /* Initially set opacity to 0 for fade-in effect */ transform: scale(0.8); /* Initially set scale to 0.8 for small-to-big effect */ transition: transform 0.5s ease, background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease; /* Add smooth transitions */ margin: 0.5vw; } .dialog-option:hover, .game-option:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #d0cece; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 2vmin solid #2e6ca4; color: #2e6ca4; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .girlicon img { width: 5vw; height: 5vw; transform: translate(150%, -250%); border-radius: 5vw; outline: 1vmin solid #2e6ca4; pointer-events: none; } .girlicon { height: 0; } .iconcontainer { position: absolute; margin-top: auto; margin: 4vmin; /* Adjust margin for the exit button */ bottom: 0; } .girlsimages { border: 1vh solid #d0cece; } .girlsimages:hover { outline: 1vh solid #2e6ca4; } </style> <div class="bed" id="bed"></div> <div class="girlscontainer"> <img class="girlsimages" id="imgcheriebutton" src="ressources/icons/8.webp" onclick="GLMF_gotoSecondaryScene('CCB');"> <img class="girlsimages" id="imglanabutton" src="ressources/icons/9.webp" onclick="GLMF_gotoSecondaryScene('LCB');"> <img class="girlsimages" id="imgelfiebutton" src="ressources/icons/10.webp" onclick="GLMF_gotoSecondaryScene('ECB');"> </div> <div class="exit-button" onclick='SugarCube.Engine.play("SHELTER MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="character-button-container" section="district.sub.shelter.sub.bathroom1"></div> <</nobr>>\ <script> var currentPassage = document.querySelector(".passage"); //-------Slider-------// //-------Cherie Bathroom-------// var Scenes = { cherie : ['CI1','CI2','CI3','CI4','CI5','CI6','CI7','CI8','CI9','CI10','CI11','CI12','CI13','CI14','CI15','CI16'], } function setSceneButton(button, sceneKey) { let scene = SugarCube.State.variables.scenes.list[sceneKey]; //let requirementsflex = button.querySelector('.req'); //if (!requirementsflex) {throw new Error(`Requirementsflex not found in button ${button}`)} //requirementsflex.querySelector('p').innerHTML = scene.name; // TODO, set the width dynamically //debugger; let requirements = button.querySelector('.req'); if (!requirements) { requirements = button.querySelector('.requirements'); } if (!requirements) {throw new Error(`Requirements not found in button ${button}`)} let requirementMet = checkRequirements(scene.requirements); if (requirementMet) { button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.style.cursor = "default"; button.style.backgroundColor = "grey"; } getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: requirements.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); requirements.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } var ScenesButtons = document.querySelectorAll('#sliderButton_bottomleft'); for (let i = 0; i < ScenesButtons.length; i++) { let character = ScenesButtons[i].getAttribute('character'); if (!Scenes[character]) {throw new Error(`Character ${character} not found in Scenes`)} for (let j = 0; j < Scenes[character].length; j++) { let sceneKey = Scenes[character][j]; let scene = SugarCube.State.variables.scenes.list[sceneKey]; if (scene) { if (scene.seen === false) { setSceneButton(ScenesButtons[i], sceneKey); break; } } } } //-------Multi option buttons-------// var buttons = document.querySelectorAll('[sceneid]'); for (button of buttons) { let sceneid = button.getAttribute('sceneid'); if (sceneid == null) { continue; } let idFound = false; for (let i in SugarCube.State.variables.scenes.list) { let scene = SugarCube.State.variables.scenes.list[i]; //console.log("scene" + scene); if (sceneid == scene.passageName) { idFound = true; console.log("found"); requirementMet = checkRequirements(scene.requirements); if (requirementMet) { console.log("met"); button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.classList.add('disabled'); getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: button.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); button.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } break; //stop the loop } } if (!idFound) { button.classList.add('disabled'); } } //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/1SB.webp'; var newImagePath = 'ressources/backgrounds/1SB3.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('story'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); //-------MULTIPLE OPTIONS BUTTON-------// var bed = document.getElementById('bed'); var girlsContainer = document.querySelector('.girlscontainer'); var girlsImages = document.querySelectorAll('.girlsimages'); var animationRunning = false; var imagesVisible = false; bed.addEventListener('click', function() { if (!animationRunning) { if (!imagesVisible) { animationRunning = true; girlsContainer.style.pointerEvents = 'auto'; // Enable pointer events on the girls container girlsImages.forEach(function(image, index) { setTimeout(function() { image.style.opacity = '1'; image.style.transform = 'scale(1)'; if (index === girlsImages.length - 1) { animationRunning = false; imagesVisible = true; } }, index * 200); // Adjust the delay between each image appearance (in milliseconds) }); } else { girlsImages.forEach(function(image) { image.style.opacity = '0'; image.style.transform = 'scale(0)'; }); girlsContainer.style.pointerEvents = 'none'; // Disable pointer events on the girls container imagesVisible = false; } } }); document.addEventListener('click', function(event) { if (!girlsContainer.contains(event.target) && event.target !== bed) { girlsImages.forEach(function(image) { image.style.opacity = '0'; image.style.transform = 'scale(0)'; }); girlsContainer.style.pointerEvents = 'none'; // Disable pointer events on the girls container imagesVisible = false; } }); </script>\
<!--CherieRoom-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "shelter"); <</script>> <style> #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; background-image: url('ressources/backgrounds/1SC_1.webp'); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: none; } span { color: #d7a103; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; color: white; font-family: 'Roboto', sans-serif; } /*when hover #bed. change background #story image to 1SA1.webp*/ #passage-bloc-1sa:hover #story { background-image: url('ressources/backgrounds/1SA1.webp'); } #story .bed { width: 37%; height: 40%; background-color: transparent; position: absolute; top: 70%; left: 60%; transform: translate(-50%, -50%); /* z-index: 5; */ cursor: pointer; } .bedopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #bf0000; border: 2vmin solid #ede8ed; display: none; opacity: 0; transform: scale(0.5); transform-origin: bottom; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #bf0000; border: 2vmin solid #ede8ed; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } #story.fade-background::before { opacity: 1; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #bf0000; border: 0.5vmin solid #ede8ed; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(74deg) brightness(103%) contrast(103%); } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #bf0000; border: 2vmin solid #ede8ed; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(97%) sepia(9%) saturate(182%) hue-rotate(237deg) brightness(92%) contrast(102%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .iconcontainer { position: absolute; margin-top: auto; margin: 4vmin; /* Adjust margin for the exit button */ bottom: 0; } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #bf0000; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 2vmin solid #ede8ed; color: #ede8ed; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .informations_info { margin: 4vh; font-size: 2vh; } </style> <div class="bed" id="bed" onclick="GLMF_gotoSecondaryScene('CCA');"></div> <div class="exit-button" onclick='SugarCube.Engine.play("SHELTER MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="mainboutondiv"> <div class="boutondiv_topright_cherie"> <div class="placeholder_topright_cherie"></div> <div id="mainButton_topright_cherie" onclick="FGF_enterFight('CL1');"> <img src='ressources/maingui/attributes/lust_icon.webp' alt='Icon'> <span>Practice Lust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_topright_cherie"> <div class="placeholder_topright_cherie"></div> <div id="mainButton_topright_cherie" onclick="window.accessTrustGame('cherie');"> <img src='ressources/maingui/attributes/trust_icon.webp' alt='Icon'> <span>Practice Trust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_bottomright_cherie hidden"> <div class="placeholder_right_cherie hidden"></div> <div id="mainButton_bottomright_cherie hidden"> <p class="textNAcherie hidden"></p> </div> </div> </div> <div class="character-button-container" section="district.sub.shelter.sub.bedroomCherie"></div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------Slider-------// //-------Cherie Room-------// var Scenes = { //A: Trust, B: Lust, J: Peep cherieA : ['CA1','CA2','CA3','CA4','CA5','CA6','CA7','CA8','CA9','CA10','CA11','CA12','CA13','CA14','CA15','CA16'], cherieB : ['CB1','CB2','CB3','CB4','CB5','CB6','CB7','CB8','CB9','CB10','CB11','CB12','CB13','CB14','CB15','CB16'], cherieJ : ['CJ1','CJ2','CJ3','CJ4','CJ5','CJ6','CJ7','CJ8','CJ9','CJ10','CJ11','CJ12','CJ13','CJ14','CJ15','CJ16'], } function setSceneButton(button, sceneKey) { let scene = SugarCube.State.variables.scenes.list[sceneKey]; //let requirementsflex = button.querySelector('.req'); //if (!requirementsflex) {throw new Error(`Requirementsflex not found in button ${button}`)} //requirementsflex.querySelector('p').innerHTML = scene.name; // TODO, set the width dynamically //debugger; let requirements = button.querySelector('.req'); if (!requirements) { requirements = button.querySelector('.requirements'); } if (!requirements) {throw new Error(`Requirements not found in button ${button}`)} let requirementMet = checkRequirements(scene.requirements); if (requirementMet) { button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.style.cursor = "default"; button.style.backgroundColor = "grey"; } getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: requirements.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); requirements.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } var ScenesButtons = document.querySelectorAll('#sliderButton_bottomleft, .small-button_topright_cherie'); for (let i = 0; i < ScenesButtons.length; i++) { let character = ScenesButtons[i].getAttribute('character'); if (!Scenes[character]) {throw new Error(`Character ${character} not found in Scenes`)} for (let j = 0; j < Scenes[character].length; j++) { let sceneKey = Scenes[character][j]; let scene = SugarCube.State.variables.scenes.list[sceneKey]; if (scene) { if (scene.seen === false) { setSceneButton(ScenesButtons[i], sceneKey); break; } } } } //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/1SC_1.webp'; var newImagePath = 'ressources/backgrounds/1SC1.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('story'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); </script>
<!--ElfieRoom-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "shelter"); <</script>> <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; background-image: url('ressources/backgrounds/1SE.webp'); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } #story .bed { width: 37%; height: 40%; background-color: transparent; position: absolute; top: 77%; left: 58%; transform: translate(-50%, -50%); /* z-index: 5; */ cursor: pointer; } .bedopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #7030a0; border: 2vmin solid #deb04c; display: none; opacity: 0; transform: scale(0.5); transform-origin: bottom; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } #story.fade-background::before { opacity: 1; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #7030a0; border: 2vmin solid #deb04c; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(93%) sepia(98%) saturate(4513%) hue-rotate(316deg) brightness(90%) contrast(92%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #7030a0; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 2vmin solid #deb04c; color: #deb04c; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #7030a0; border: 2vmin solid #deb04c; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #7030a0; border: 0.5vmin solid #deb04c; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(71%) sepia(58%) saturate(421%) hue-rotate(1deg) brightness(91%) contrast(93%); } .informations_info { margin: 4vh; font-size: 2vh; color: #deb04c; } .iconcontainer { position: absolute; margin-top: auto; margin: 4vmin; /* Adjust margin for the exit button */ bottom: 0; } </style> <div class="bed" id="bed" onclick="GLMF_gotoSecondaryScene('ECA');"></div> <div class="exit-button" onclick='SugarCube.Engine.play("SHELTER MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="mainboutondiv"> <div class="boutondiv_topright_elfie"> <div class="placeholder_topright_elfie"></div> <div id="mainButton_topright_elfie" onclick="FGF_enterFight('EL1');"> <img src='ressources/maingui/attributes/lust_icon.webp' alt='Icon'> <span>Practice Lust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_topright_elfie"> <div class="placeholder_topright_elfie"></div> <div id="mainButton_topright_elfie" onclick="window.accessTrustGame('elfie');"> <img src='ressources/maingui/attributes/trust_icon.webp' alt='Icon'> <span>Practice Trust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_bottomright_elfie hidden"> <div class="placeholder_right_elfie hidden"></div> <div id="mainButton_bottomright_elfie hidden"> <p class="textNAelfie hidden"></p> </div> </div> </div> <div class="character-button-container" section="district.sub.shelter.sub.bedroomElfie"></div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------SET 1-------// var isButtonsRightVisible = false; // State to track visibility function toggleButtons() { var smallButtonsRight = document.getElementById('smallButtons_right_elfie'); var buttonsRight = Array.from(smallButtonsRight.children); if (!isButtonsRightVisible) { smallButtonsRight.style.opacity = '1'; buttonsRight.forEach((button) => { button.classList.remove('animate-out'); button.classList.add('animate-in'); }); } else { buttonsRight.forEach((button) => { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); // Set a timeout to match the duration of the animations plus the delay of the last button setTimeout(() => { smallButtonsRight.style.opacity = '0'; }, (buttonsRight.length - 1) * 1.33 + 4); // 0.3s is the duration of the animation } isButtonsRightVisible = !isButtonsRightVisible; } currentPassage.addEventListener('click', function (event) { var mainButtonRight = document.getElementById('mainButton_right_elfie'); var smallButtonsRight = document.getElementById('smallButtons_right_elfie'); // Check if the elements exist before trying to use them if (mainButtonRight && smallButtonsRight) { // Check if the click is outside the main button and small buttons if (!mainButtonRight.contains(event.target) && !smallButtonsRight.contains(event.target) && isButtonsRightVisible) { toggleButtons(); } } }); function removeSmall() { var smallButtonsRight = document.querySelectorAll('.small-button_right_elfie'); smallButtonsRight.forEach(function (button) { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); isButtonsRightVisible = !isButtonsRightVisible; } //-------SET 2-------// var isButtonsRightVisible2 = false; // State to track visibility function toggleButtons2() { var smallButtonsRight2 = document.getElementById('smallButtons_topright_elfie'); var buttonsRight2 = Array.from(smallButtonsRight2.children); if (!isButtonsRightVisible2) { smallButtonsRight2.style.opacity = '1'; buttonsRight2.forEach((button) => { button.classList.remove('animate-out'); button.classList.add('animate-in'); }); } else { buttonsRight2.forEach((button) => { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); // Set a timeout to match the duration of the animations plus the delay of the last button setTimeout(() => { smallButtonsRight2.style.opacity = '0'; }, (buttonsRight2.length - 1) * 1.33 + 4); // 0.3s is the duration of the animation } isButtonsRightVisible2 = !isButtonsRightVisible2; } currentPassage.addEventListener('click', function (event) { var mainButtonRight2 = document.getElementById('mainButton_topright_elfie'); var smallButtonsRight2 = document.getElementById('smallButtons_topright_elfie'); // Check if the elements exist before trying to use them if (mainButtonRight2 && smallButtonsRight2) { // Check if the click is outside the main button and small buttons if (!mainButtonRight2.contains(event.target) && !smallButtonsRight2.contains(event.target) && isButtonsRightVisible2) { toggleButtons2(); } } }); function removeSmall2() { var smallButtonsRight = document.querySelectorAll('.small-button_topright_elfie'); smallButtonsRight.forEach(function (button) { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); isButtonsRightVisible2 = !isButtonsRightVisible2; } //-------Slider-------// //-------Elfie Room-------// var Scenes = { //A: Trust, B: Lust, J: Peep elfieA : ['EA1','EA2','EA3','EA4','EA5','EA6','EA7','EA8','EA9','EA10','EA11','EA12','EA13','EA14','EA15','EA16'], elfieB : ['EB1','EB2','EB3','EB4','EB5','EB6','EB7','EB8','EB9','EB10','EB11','EB12','EB13','EB14','EB15','EB16'], elfieJ : ['EJ1','EJ2','EJ3','EJ4','EJ5','EJ6','EJ7','EJ8','EJ9','EJ10','EJ11','EJ12','EJ13','EJ14','EJ15','EJ16'], } function setSceneButton(button, sceneKey) { let scene = SugarCube.State.variables.scenes.list[sceneKey]; //let requirementsflex = button.querySelector('.req'); //if (!requirementsflex) {throw new Error(`Requirementsflex not found in button ${button}`)} //requirementsflex.querySelector('p').innerHTML = scene.name; // TODO, set the width dynamically //debugger; let requirements = button.querySelector('.req'); if (!requirements) { requirements = button.querySelector('.requirements'); } if (!requirements) {throw new Error(`Requirements not found in button ${button}`)} let requirementMet = checkRequirements(scene.requirements); if (requirementMet) { button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.style.cursor = "default"; button.style.backgroundColor = "grey"; } getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: requirements.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); requirements.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } var ScenesButtons = document.querySelectorAll('#sliderButton_bottomleft, .small-button_topright_elfie'); for (let i = 0; i < ScenesButtons.length; i++) { let character = ScenesButtons[i].getAttribute('character'); if (!Scenes[character]) {throw new Error(`Character ${character} not found in Scenes`)} for (let j = 0; j < Scenes[character].length; j++) { let sceneKey = Scenes[character][j]; let scene = SugarCube.State.variables.scenes.list[sceneKey]; if (scene) { if (scene.seen === false) { setSceneButton(ScenesButtons[i], sceneKey); break; } } } } //-------Multi option buttons-------// var buttons = document.querySelectorAll('[sceneid]'); for (button of buttons) { let sceneid = button.getAttribute('sceneid'); if (sceneid == null) { continue; } let idFound = false; for (let i in SugarCube.State.variables.scenes.list) { let scene = SugarCube.State.variables.scenes.list[i]; //console.log("scene" + scene); if (sceneid == scene.passageName) { idFound = true; console.log("found"); requirementMet = checkRequirements(scene.requirements); if (requirementMet) { console.log("met"); button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.classList.add('disabled'); getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: button.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); button.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } break; //stop the loop } } if (!idFound) { button.classList.add('disabled'); } } //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/1SE.webp'; var newImagePath = 'ressources/backgrounds/1SE2.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('story'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); </script>
<!--Kitchen-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "shelter"); <</script>> <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; background-image: url('ressources/backgrounds/1SK.webp'); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; position: relative; } .table { width: 100%; height: 100%; position: absolute; z-index: 15; background-image: url('ressources/backgrounds/1SK4.webp'); background-size: cover; pointer-events: none; background-position: center; } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; } .passage { width: 100%; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #5e3e3e; border: 2vmin solid #f2a36e; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(64%) sepia(91%) saturate(336%) hue-rotate(329deg) brightness(101%) contrast(90%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #5e3e3e; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 2vmin solid #f2a36e; color: #f2a36e; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #5e3e3e; border: 2vmin solid #f2a36e; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #5e3e3e; border: 0.5vmin solid #f2a36e; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(92%) sepia(7%) saturate(6012%) hue-rotate(309deg) brightness(97%) contrast(96%); } .informations_info { margin: 4vh; font-size: 2vh; color: #f2a36e; } .girlicon img { width: 5vw; height: 5vw; transform: translate(150%, -250%); border-radius: 5vw; outline: 1vmin solid #2e6ca4; pointer-events: none; } .girlicon { height: 0; } .iconcontainer { position: absolute; margin-top: auto; margin: 3vmin; /* Adjust margin for the exit button */ bottom: 0; } #mainButton_topright { background-color: #5e3e3e; outline: solid 0.67vh #f2a36e; } #mainButton_topright img { filter: invert(92%) sepia(7%) saturate(6012%) hue-rotate(309deg) brightness(97%) contrast(96%); } #mainButton_bottomright { background-color: #5e3e3e; outline: solid 0.67vh #f2a36e; } .textNA { color: #f2a36e; } #story .bed { width: 100%; height: 25%; background-color: transparent; position: absolute; top: 89%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; cursor: pointer; } .girlsimages { border: 1vh solid #5e3e3e; } .girlsimages:hover { outline: 1vh solid #f2a36e; } </style> <div class="table" id="table"></div> <div class="bed" id="bed" onclick="SugarCube.Engine.play('CCD')"></div> <div class="exit-button" onclick='SugarCube.Engine.play("SHELTER MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="character-button-container" section="district.sub.shelter.sub.kitchen"></div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------Slider-------// //-------Cherie Kitchen-------// var Scenes = { //E: Kitchen Talk, XA: Group Family Diner cherieE: ['CE1', 'CE2', 'CE3', 'CE4', 'CE5', 'CE6', 'CE7', 'CE8', 'CE9', 'CE10', 'CE11', 'CE12', 'CE13', 'CE14', 'CE15', 'CE16'], XA: ['XA1', 'XA2', 'XA3', 'XA4', 'XA5', 'XA6', 'XA7', 'XA8', 'XA9', 'XA10', 'XA11', 'XA12', 'XA13', 'XA14', 'XA15', 'XA16'], } function setSceneButton(button, sceneKey) { let scene = SugarCube.State.variables.scenes.list[sceneKey]; //let requirementsflex = button.querySelector('.req'); //if (!requirementsflex) {throw new Error(`Requirementsflex not found in button ${button}`)} //requirementsflex.querySelector('p').innerHTML = scene.name; // TODO, set the width dynamically //debugger; let requirements = button.querySelector('.req'); if (!requirements) { requirements = button.querySelector('.requirements'); } if (!requirements) {throw new Error(`Requirements not found in button ${button}`)} let requirementMet = checkRequirements(scene.requirements); if (requirementMet) { button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.style.cursor = "default"; button.style.backgroundColor = "grey"; } getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: requirements.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); requirements.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } var ScenesButtons = document.querySelectorAll('#sliderButton_bottomleft, #mainButton_topright'); for (let i = 0; i < ScenesButtons.length; i++) { let character = ScenesButtons[i].getAttribute('character'); if (!Scenes[character]) {throw new Error(`Character ${character} not found in Scenes`)} for (let j = 0; j < Scenes[character].length; j++) { let sceneKey = Scenes[character][j]; let scene = SugarCube.State.variables.scenes.list[sceneKey]; if (scene) { if (scene.seen === false) { setSceneButton(ScenesButtons[i], sceneKey); break; } } } } //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/1SK4.webp'; var newImagePath = 'ressources/backgrounds/1SK3.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('table'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); </script>
<!--LanaRoom-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "shelter"); <</script>> <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; background-image: url(ressources/backgrounds/1SL.webp); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } .centerbox { z-index: 0; position: fixed; width: 100%; height: 100%; top: 0; } #story .bed { width: 40%; height: 36%; background-color: transparent; position: absolute; top: 66%; left: 52%; transform: translate(-50%, -50%); /* z-index: 5; */ cursor: pointer; } .bedopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #012060; border: 2vmin solid #be3ae8; display: none; opacity: 0; transform: scale(0.5); transform-origin: bottom; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .peekopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #012060; border: 2vmin solid #be3ae8; display: none; opacity: 0; transform: scale(0.5); transform-origin: bottom left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .iconcontainer { position: absolute; margin-top: auto; margin: 4vmin; /* Adjust margin for the exit button */ bottom: 0; } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; } .passage { width: 100%; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #012060; border: 2vmin solid #be3ae8; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(39%) sepia(83%) saturate(3602%) hue-rotate(265deg) brightness(90%) contrast(102%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #012060; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 2vmin solid #be3ae8; color: #be3ae8; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #012060; border: 2vmin solid #be3ae8; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #012060; border: 0.5vmin solid #be3ae8; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(51%) sepia(77%) saturate(6344%) hue-rotate(268deg) brightness(92%) contrast(97%); } .informations_info { margin: 4vh; font-size: 2vh; color: #be3ae8; } </style> <div class="bed" id="bed" onclick="GLMF_gotoSecondaryScene('LCA');"></div> <div class="exit-button" onclick='SugarCube.Engine.play("SHELTER MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="mainboutondiv"> <div class="boutondiv_topright_lana"> <div class="placeholder_topright_lana"></div> <div id="mainButton_topright_lana" onclick="FGF_enterFight('LL1');"> <img src='ressources/maingui/attributes/lust_icon.webp' alt='Icon'> <span>Practice Lust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_topright_lana"> <div class="placeholder_topright_lana"></div> <div id="mainButton_topright_lana" onclick="window.accessTrustGame('lana');"> <img src='ressources/maingui/attributes/trust_icon.webp' alt='Icon'> <span>Practice Trust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_bottomright_lana hidden"> <div class="placeholder_right_lana hidden"></div> <div id="mainButton_bottomright_lana hidden"> <p class="textNAlana hidden"></p> </div> </div> </div> <div class="character-button-container" section="district.sub.shelter.sub.bedroomLana"></div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------SET 1-------// var isButtonsRightVisible = false; // State to track visibility function toggleButtons() { var smallButtonsRight = document.getElementById('smallButtons_right_lana'); var buttonsRight = Array.from(smallButtonsRight.children); if (!isButtonsRightVisible) { smallButtonsRight.style.opacity = '1'; buttonsRight.forEach((button) => { button.classList.remove('animate-out'); button.classList.add('animate-in'); }); } else { buttonsRight.forEach((button) => { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); // Set a timeout to match the duration of the animations plus the delay of the last button setTimeout(() => { smallButtonsRight.style.opacity = '0'; }, (buttonsRight.length - 1) * 1.33 + 4); // 0.3s is the duration of the animation } isButtonsRightVisible = !isButtonsRightVisible; } currentPassage.addEventListener('click', function (event) { var mainButtonRight = document.getElementById('mainButton_right_lana'); var smallButtonsRight = document.getElementById('smallButtons_right_lana'); // Check if the elements exist before trying to use them if (mainButtonRight && smallButtonsRight) { // Check if the click is outside the main button and small buttons if (!mainButtonRight.contains(event.target) && !smallButtonsRight.contains(event.target) && isButtonsRightVisible) { toggleButtons(); } } }); function removeSmall() { var smallButtonsRight = document.querySelectorAll('.small-button_right_lana'); smallButtonsRight.forEach(function (button) { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); isButtonsRightVisible = !isButtonsRightVisible; } //-------SET 2-------// var isButtonsRightVisible2 = false; // State to track visibility function toggleButtons2() { var smallButtonsRight2 = document.getElementById('smallButtons_topright_lana'); var buttonsRight2 = Array.from(smallButtonsRight2.children); if (!isButtonsRightVisible2) { smallButtonsRight2.style.opacity = '1'; buttonsRight2.forEach((button) => { button.classList.remove('animate-out'); button.classList.add('animate-in'); }); } else { buttonsRight2.forEach((button) => { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); // Set a timeout to match the duration of the animations plus the delay of the last button setTimeout(() => { smallButtonsRight2.style.opacity = '0'; }, (buttonsRight2.length - 1) * 1.33 + 4); // 0.3s is the duration of the animation } isButtonsRightVisible2 = !isButtonsRightVisible2; } currentPassage.addEventListener('click', function (event) { var mainButtonRight2 = document.getElementById('mainButton_topright_lana'); var smallButtonsRight2 = document.getElementById('smallButtons_topright_lana'); // Check if the elements exist before trying to use them if (mainButtonRight2 && smallButtonsRight2) { // Check if the click is outside the main button and small buttons if (!mainButtonRight2.contains(event.target) && !smallButtonsRight2.contains(event.target) && isButtonsRightVisible2) { toggleButtons2(); } } }); function removeSmall2() { var smallButtonsRight = document.querySelectorAll('.small-button_topright_lana'); smallButtonsRight.forEach(function (button) { button.classList.remove('animate-in'); button.classList.add('animate-out'); }); isButtonsRightVisible2 = !isButtonsRightVisible2; } //-------Slider-------// //-------Lana Room-------// var Scenes = { //A: Trust, B: Lust, J: Peep lanaA : ['LA1','LA2','LA3','LA4','LA5','LA6','LA7','LA8','LA9','LA10','LA11','LA12','LA13','LA14','LA15','LA16'], lanaB : ['LB1','LB2','LB3','LB4','LB5','LB6','LB7','LB8','LB9','LB10','LB11','LB12','LB13','LB14','LB15','LB16'], lanaJ : ['LJ1','LJ2','LJ3','LJ4','LJ5','LJ6','LJ7','LJ8','LJ9','LJ10','LJ11','LJ12','LJ13','LJ14','LJ15','LJ16'], } function setSceneButton(button, sceneKey) { let scene = SugarCube.State.variables.scenes.list[sceneKey]; //let requirementsflex = button.querySelector('.req'); //if (!requirementsflex) {throw new Error(`Requirementsflex not found in button ${button}`)} //requirementsflex.querySelector('p').innerHTML = scene.name; // TODO, set the width dynamically //debugger; let requirements = button.querySelector('.req'); if (!requirements) { requirements = button.querySelector('.requirements'); } if (!requirements) {throw new Error(`Requirements not found in button ${button}`)} let requirementMet = checkRequirements(scene.requirements); if (requirementMet) { button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.style.cursor = "default"; button.style.backgroundColor = "grey"; } getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: requirements.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); requirements.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } var ScenesButtons = document.querySelectorAll('#sliderButton_bottomleft, .small-button_topright_lana'); for (let i = 0; i < ScenesButtons.length; i++) { let character = ScenesButtons[i].getAttribute('character'); if (!Scenes[character]) {throw new Error(`Character ${character} not found in Scenes`)} for (let j = 0; j < Scenes[character].length; j++) { let sceneKey = Scenes[character][j]; let scene = SugarCube.State.variables.scenes.list[sceneKey]; if (scene) { if (scene.seen === false) { setSceneButton(ScenesButtons[i], sceneKey); break; } } } } //-------Multi option buttons-------// var buttons = document.querySelectorAll('[sceneid]'); for (button of buttons) { let sceneid = button.getAttribute('sceneid'); if (sceneid == null) { continue; } let idFound = false; for (let i in SugarCube.State.variables.scenes.list) { let scene = SugarCube.State.variables.scenes.list[i]; //console.log("scene" + scene); if (sceneid == scene.passageName) { idFound = true; console.log("found"); requirementMet = checkRequirements(scene.requirements); if (requirementMet) { console.log("met"); button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.classList.add('disabled'); getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: button.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); button.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } break; //stop the loop } } if (!idFound) { button.classList.add('disabled'); } } //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/1SL_1.webp'; var newImagePath = 'ressources/backgrounds/1SL1.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('story'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); </script>
<!--LivingRoom-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "shelter"); <</script>> <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; background-image: url('ressources/backgrounds/1SR.webp'); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; position: relative; } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; } .passage { width: 100%; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #333f50; border: 2vmin solid #4472c4; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(48%) sepia(15%) saturate(2805%) hue-rotate(183deg) brightness(83%) contrast(81%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } #story .bed { width: 45%; height: 30%; background-color: transparent; position: absolute; top: 78%; left: 56%; transform: translate(-50%, -50%); /* z-index: 1000; */ cursor: pointer; } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #333f50; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 2vmin solid #4472c4; color: #4472c4; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #333f50; border: 2vmin solid #4472c4; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #333f50; border: 0.5vmin solid #4472c4; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(44%) sepia(98%) saturate(358%) hue-rotate(179deg) brightness(82%) contrast(96%); } .informations_info { margin: 4vh; font-size: 2vh; color: #4472c4; } .girlicon img { width: 5vw; height: 5vw; transform: translate(150%, -250%); border-radius: 5vw; outline: 1vmin solid #2e6ca4; pointer-events: none; } .girlicon { height: 0; } .iconcontainer { position: absolute; margin-top: auto; margin: 4vmin; /* Adjust margin for the exit button */ bottom: 0; } #mainButton_topright { background-color: #333f50; outline: solid 0.67vh #4472c4; } #mainButton_topright img { filter: invert(44%) sepia(98%) saturate(358%) hue-rotate(179deg) brightness(82%) contrast(96%); } #mainButton_bottomright { background-color: #333f50; outline: solid 0.67vh #4472c4; } .textNA { color: #4472c4; } .girlsimages { border: 1vh solid #333f50; } .girlsimages:hover { outline: 1vh solid #4472c4; } </style> <div class="bed" id="bed"></div> <div class="girlscontainer"> <img class="girlsimages" id="imgcheriebutton" src="ressources/icons/8.webp" onclick="GLMF_gotoSecondaryScene('CCC');"> <img class="girlsimages" id="imglanabutton" src="ressources/icons/9.webp" onclick="GLMF_gotoSecondaryScene('LCC');"> <img class="girlsimages" id="imgelfiebutton" src="ressources/icons/10.webp" onclick="GLMF_gotoSecondaryScene('ECC');"> </div> <div class="exit-button" onclick='SugarCube.Engine.play("SHELTER MAP")'> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="character-button-container" section="district.sub.shelter.sub.livingroom"></div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------Slider-------// //-------Cherie Living Room-------// var Scenes = { //L: Living Room, M: Movie, D: Reverse Pom Peep cherieL: ['CL1', 'CL2', 'CL3', 'CL4', 'CL5', 'CL6', 'CL7', 'CL8', 'CL9', 'CL10', 'CL11', 'CL12', 'CL13', 'CL14', 'CL15', 'CL16'], cherieM: ['CM1', 'CM2', 'CM3', 'CM4', 'CM5', 'CM6', 'CM7', 'CM8', 'CM9', 'CM10', 'CM11', 'CM12', 'CM13', 'CM14', 'CM15', 'CM16'], cherieD: ['CD1', 'CD2', 'CD3', 'CD4', 'CD5', 'CD6', 'CD7', 'CD8', 'CD9', 'CD10', 'CD11', 'CD12', 'CD13', 'CD14', 'CD15', 'CD16'], } function setSceneButton(button, sceneKey) { let scene = SugarCube.State.variables.scenes.list[sceneKey]; //let requirementsflex = button.querySelector('.req'); //if (!requirementsflex) {throw new Error(`Requirementsflex not found in button ${button}`)} //requirementsflex.querySelector('p').innerHTML = scene.name; // TODO, set the width dynamically //debugger; let requirements = button.querySelector('.req'); if (!requirements) { requirements = button.querySelector('.requirements'); } if (!requirements) {throw new Error(`Requirements not found in button ${button}`)} let requirementMet = checkRequirements(scene.requirements); if (requirementMet) { button.addEventListener('click', function () { SugarCube.Engine.play(scene.passageName); }); } else { button.style.cursor = "default"; button.style.backgroundColor = "grey"; } getRequirementsInfo(scene.requirements); //fill missing requirements info let desc = ""; for (requirement of scene.requirements) { switch (requirement.type) { case "item": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "girl_stat": desc += `${requirement.name}: ${requirement.conditionValue}`; break; case "scene": desc += `Scene: ${requirement.name}`; break; default: desc += `Unknown requirement type: ${requirement.type}`; break; } if (scene.requirements.indexOf(requirement) != scene.requirements.length - 1) { desc += "<br>"; } } //-Create the info array: let info = [ { title: `${scene.name}`, }, { title: `Requirements:`, desc: desc, } ]; //-Create the EventListener on the element: requirements.addEventListener("mouseover", function () { mouseFollowerCreateInfo(info) }); requirements.addEventListener("mouseout", function () { mouseFollowerRemoveInfo() }); } var ScenesButtons = document.querySelectorAll('#sliderButton_bottomleft, #mainButton_topright'); for (let i = 0; i < ScenesButtons.length; i++) { let character = ScenesButtons[i].getAttribute('character'); if (!Scenes[character]) {throw new Error(`Character ${character} not found in Scenes`)} for (let j = 0; j < Scenes[character].length; j++) { let sceneKey = Scenes[character][j]; let scene = SugarCube.State.variables.scenes.list[sceneKey]; if (scene) { if (scene.seen === false) { setSceneButton(ScenesButtons[i], sceneKey); break; } } } } //-------MULTIPLE OPTIONS BUTTON-------// var bed = document.getElementById('bed'); var girlsContainer = document.querySelector('.girlscontainer'); var girlsImages = document.querySelectorAll('.girlsimages'); var animationRunning = false; var imagesVisible = false; bed.addEventListener('click', function() { if (!animationRunning) { if (!imagesVisible) { animationRunning = true; girlsContainer.style.pointerEvents = 'auto'; // Enable pointer events on the girls container girlsImages.forEach(function(image, index) { setTimeout(function() { image.style.opacity = '1'; image.style.transform = 'scale(1)'; if (index === girlsImages.length - 1) { animationRunning = false; imagesVisible = true; } }, index * 200); // Adjust the delay between each image appearance (in milliseconds) }); } else { girlsImages.forEach(function(image) { image.style.opacity = '0'; image.style.transform = 'scale(0)'; }); girlsContainer.style.pointerEvents = 'none'; // Disable pointer events on the girls container imagesVisible = false; } } }); document.addEventListener('click', function(event) { if (!girlsContainer.contains(event.target) && event.target !== bed) { girlsImages.forEach(function(image) { image.style.opacity = '0'; image.style.transform = 'scale(0)'; }); girlsContainer.style.pointerEvents = 'none'; // Disable pointer events on the girls container imagesVisible = false; } }); //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/1SR.webp'; var newImagePath = 'ressources/backgrounds/1SR2.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('story'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); </script>\
<!--The Forest-->\ <<nobr>> <<script>> playAudio("music", "forestPeacewood"); SugarCube.State.variables.gui_interface.angelaButtonEnable = true; /*SugarCube.State.variables.gui_interface.mapButtonEnable = true;*/ SugarCube.State.variables.gui_interface.inventoryButtonEnable = true; <</script>> <div class="previousmap">[["MAIN MAP"|MAIN MAP]]</div> <div class="MS_mapContainer"> <img class="MS_mainImage" src="./ressources/maingui/maps/forest/forest.webp"> <img section="peacewood" class="IMGa lockedmap" src="./ressources/maingui/maps/forest/forest_peacewoods_locked.webp"> <img section="peacewood" class="IMGa hoverInfo" src="./ressources/maingui/maps/forest/forest_peacewoods.webp"> <img section="crimsonwood" class="IMGa lockedmap" src="./ressources/maingui/maps/forest/forest_crimsonwoods_locked.webp"> <img section="crimsonwood" class="IMGa hoverInfo" src="./ressources/maingui/maps/forest/forest_crimsonwoods.webp"> <img section="deepwood" class="IMGa lockedmap" src="./ressources/maingui/maps/forest/forest_deepwoods_locked.webp"> <img section="deepwood" class="IMGa hoverInfo" src="./ressources/maingui/maps/forest/forest_deepwoods.webp"> <!-- hover Triggers --> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/forest/forest_blank.webp" section="peacewood" style="clip-path: polygon(0.0% 0.0%, 53.8% 0.0%, 53.8% 12.2%, 52.9% 21.4%, 49.3% 30.0%, 44.0% 37.5%, 34.0% 38.4%, 25.7% 52.8%, 15.8% 56.2%, 11.9% 58.6%, 5.5% 59.4%, 0.0% 58.6%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/forest/forest_blank.webp" section="crimsonwood" style="clip-path: polygon(0.0% 59.6%, 5.3% 60.3%, 12.0% 59.4%, 16.0% 57.1%, 25.9% 53.5%, 34.2% 39.2%, 41.6% 38.6%, 51.2% 66.8%, 56.2% 70.6%, 59.1% 78.4%, 56.2% 86.6%, 56.3% 100.0%, 0.0% 100.0%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/forest/forest_blank.webp" section="deepwood" style="clip-path: polygon(54.3% 0.0%, 80.1% 0.0%, 89.2% 2.2%, 100.0% 6.8%, 100.0% 54.0%, 98.6% 58.7%, 98.8% 74.0%, 97.6% 85.3%, 95.5% 90.4%, 88.1% 98.7%, 77.9% 100.0%, 56.8% 100.0%, 56.8% 86.7%, 59.6% 78.6%, 56.6% 70.0%, 51.5% 66.1%, 42.2% 38.8%, 44.1% 38.3%, 49.7% 30.7%, 53.3% 21.7%, 54.3% 11.8%);"> <!-- girl location indicator --> <div class="MS_divAreasCont"> <div class="GLMS_markerCont" section="forest.sub.peacewood" style="bottom: 68%; left: 16%; width: 30%;"></div> <div class="GLMS_markerCont" section="forest.sub.crimsonwood" style="bottom: 8%; left: 5%; width: 45%"></div> <div class="GLMS_markerCont" section="forest.sub.deepwood" style="top: 26%; left: 65%; width: 31%"></div> </div> </div> <div class="MS_popupOverlayCont"></div> <</nobr>>\ <style> body { background-color: rgb(20,20,20); overflow: hidden; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } .passage{ /*body{*/ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; position: relative; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-family: 'Roboto', sans-serif; } #passages { display: flex; justify-content: center; margin: 0; max-width: 100%; } .previousmap { position: absolute;; z-index: 3; font-size: 1.8em; display: flex; align-content: center; top: 3vh; left: 3vh; } .previousmap .link-internal { position: sticky; height: 15vh; width: 15vh; border-radius: 50%; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4); background-image: none; padding: 1vh 1vh; min-width: 15vh; display: flex; align-items: center; } .previousmap .link-internal:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .MS_mapContainer { position: relative; width: 100%; max-height: 100%; display: table; /* center */ } .MS_mapContainer > .MS_mainImage { width: 100%; } .MS_mapContainer > .IMGa { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.3s ease-in-out; } .MS_mapContainer > .IMGa.hoverTrigger { cursor: pointer; } .MS_mainContainer > .MS_hoverImage { pointer-events: none; z-index: 2; } .MS_divAreasCont{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { window.SugarCube.Engine.play(window.SugarCube.State.passage);}, 40); } else { //window.MS_secKey = "forest" //window.MS_subSec = SugarCube.State.variables.section[MS_secKey].sub; // shortcut if not already set //window.MS_secKey = "forest"; //let { lastObject: TheObj, lastKey: TheLastKey } = setObjByKeys(SugarCube.State.variables.section, MS_secKey); //window.MS_subSec = TheObj[TheLastKey].sub; setCurrentSection({keys: "forest"}); MS_Init(); } </script>\
<<nobr>> <<script>> playAudio("music", "forestPeacewood"); SugarCube.State.variables.gui_interface.angelaButtonEnable = false; /*SugarCube.State.variables.gui_interface.mapButtonEnable = false;*/ SugarCube.State.variables.gui_interface.inventoryButtonEnable = false; <</script>> <style> body { background-image: url('ressources/backgrounds/2A_1.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; position: relative; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } .passage { position: relative; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #2ecc71; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; overflow: hidden; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .icon1 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon2 { max-width: 65%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon3 { max-width: 70%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon4 { max-width: 70%; } .icon5 { max-width: 75%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .half { position: absolute; width: 100%; height: 50%; transition: all 0.6s ease; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; /* Start with a base z-index */ } .top-half { top: 0; border-bottom-right-radius: 200px; border-bottom-left-radius: 200px; background-color: #666; /* Slightly lighter gray */ } .bottom-half { bottom: 0; border-top-right-radius: 200px; border-top-left-radius: 200px; background-color: #666; /* Slightly lighter gray */ } .half img { max-width: 70%; max-height: 70%; transition: all 0.3s ease; } .half:hover { height: 100%; border-radius: 0; z-index: 5; } .half:hover img { max-width: 70%; max-height: 70%; } .horizontal-line { position: absolute; top: 50%; left: 0; width: 100%; height: 0.8vh; background-color: #2ecc71; transform: translateY(-50%); z-index: 3; } </style> <div class="peacewood-container"> <div class="peacewood-line"></div> <div class="peacewood-circle peacewood-large"> <img src="ressources/icons/2B.webp" alt="Zone 1"> </div> <div class="peacewood-circle"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="peacewood-circle"> <img src="ressources/icons/3A3.webp" alt="Zone 9"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 10"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()" id="arrow-left"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> <div class="dropdown-rectangle"> <b>+5</b> <img class="icon5" src="ressources/maingui/attributes/better_virus.webp"> </div> </div> <div> <div onclick="accessHuntingGame(1)" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="accessGatheringGame(1)" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="SugarCube.Engine.play('YA1D')" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> </div> <div class="button big-circular-button"> <div class="horizontal-line"></div> <div class="half top-half" onclick="nextBloc2()"> <img src="ressources/icons/2L.webp" alt="Top Image"> </div> <div class="half bottom-half" onclick="nextBloc3()"> <img src="ressources/icons/2M.webp" alt="Bottom Image"> </div> </div> <div class="button rectangular-button" onclick="nextBloc()" id="arrow-right"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> </div> </div> <</nobr>>\ <script> function nextBloc() { SugarCube.Engine.play("2A2"); } function nextBloc2() { SugarCube.Engine.play("4A"); } function nextBloc3() { SugarCube.Engine.play("5A"); } function previousBloc() { SugarCube.Engine.play("FOREST MAP"); modVariable("add", "stat", "virus", 5); } </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <style> body { background-image: url('ressources/backgrounds/2A_1.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #2ecc71; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .icon1 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon2 { max-width: 65%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon3 { max-width: 70%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon4 { max-width: 70%; } .icon5 { max-width: 75%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } </style> <div class="peacewood-container"> <div class="peacewood-line"></div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/2B.webp" alt="Zone 1"> </div> <div class="peacewood-circle peacewood-large"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="peacewood-circle"> <img src="ressources/icons/3A3.webp" alt="Zone 9"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 10"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()" id="arrow-left"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> <div class="dropdown-rectangle"> <b>+5</b> <img class="icon5" src="ressources/maingui/attributes/better_virus.webp"> </div> </div> <div> <div onclick="accessHuntingGame(2)" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="accessGatheringGame(2);" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="SugarCube.Engine.play('YA2D');" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> </div> <div class="button big-circular-button" onclick="SugarCube.Engine.play('2ACE')"><img class="icon4" src="ressources/icons/2A3.webp"></div> <<if $specpass.TWOA2 is 0>> <div class="button rectangular-button" onclick="appendNotReadyWarning()" d="arrow-right" > <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> </div> <<else>> <div class="button rectangular-button" onclick="nextBloc2()" d="arrow-right" > <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> </div> <</if>> </div> <</nobr>>\ <script> function nextBloc() { SugarCube.Engine.play("5A"); } function nextBloc2() { SugarCube.Engine.play("2A3"); } function previousBloc() { SugarCube.Engine.play("2A1"); modVariable("add", "stat", "virus", 5) } </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <style> body { background-image: url('ressources/backgrounds/2A_1.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #2ecc71; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .icon1 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon2 { max-width: 65%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon3 { max-width: 70%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon4 { max-width: 60%; } .icon5 { max-width: 75%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } </style> <div class="peacewood-container"> <div class="peacewood-line"></div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/2B.webp" alt="Zone 1"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="peacewood-circle peacewood-large"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="peacewood-circle"> <img src="ressources/icons/3A3.webp" alt="Zone 9"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 10"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()" id="arrow-left"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> <div class="dropdown-rectangle"> <b>+5</b> <img class="icon5" src="ressources/maingui/attributes/better_virus.webp"> </div> </div> <div> <<if $specpass.TWOA3 is 1>> <div onclick="accessHuntingGame(3)" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="accessGatheringGame(3);" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="SugarCube.Engine.play('YA3D');" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <<else>> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> </div> <div class="button big-circular-button" onclick="FGF_enterFight('FFA')"> <div class="FIGHT_successRate" data-fightId="FFA">yo</div> <img class="icon4" src="ressources/icons/13A3.webp"> </div> <div onclick="nextBloc()" class="button rectangular-button" id="arrow-right"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> </div> </div> <</nobr>>\ <script> function nextBloc() { if (SugarCube.State.variables.specpass.TWOA3 === 1) SugarCube.Engine.play('2A4'); else appendNotReadyWarning(); }; function previousBloc() { SugarCube.Engine.play("2A2"); modVariable("add", "stat", "virus", 5) }; FGF_checkFoSuccessIndicator(); </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <style> body { background-image: url('ressources/backgrounds/2A_1.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #2ecc71; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .icon1 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon2 { max-width: 65%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon3 { max-width: 70%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon4 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon5 { max-width: 75%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } </style> <div class="peacewood-container"> <div class="peacewood-line"></div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/2B.webp" alt="Zone 1"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="peacewood-circle peacewood-large"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="peacewood-circle"> <img src="ressources/icons/3A3.webp" alt="Zone 9"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 10"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()" id="arrow-left"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> <div class="dropdown-rectangle"> <b>+5</b> <img class="icon5" src="ressources/maingui/attributes/better_virus.webp"> </div> </div> <div> <<if $specpass.TWOA4 is 1>> <div onclick="accessHuntingGame(4)" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="accessGatheringGame(4);" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="SugarCube.Engine.play('YA4D');" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <<else>> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> </div> <div class="button big-circular-button" onclick="GLMF_tryScene('AAT1','angela','trust')"> <img class="icon4" src="ressources/maingui/sexuals/beginning.webp"> </div> <div onclick="nextBloc();" class="button rectangular-button" id="arrow-right" > <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> </div> </div> <</nobr>>\ <script> function nextBloc() { if (SugarCube.State.variables.specpass.TWOA4 === 1) SugarCube.Engine.play('2A5'); else appendNotReadyWarning(); }; function previousBloc() { SugarCube.Engine.play("2A3"); modVariable("add", "stat", "virus", 5); }; //FGF_checkFoSuccessIndicator(); </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <style> body { background-image: url('ressources/backgrounds/2A_1.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #2ecc71; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .icon1 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon2 { max-width: 65%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon3 { max-width: 70%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon4 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon5 { max-width: 75%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } </style> <div class="peacewood-container"> <div class="peacewood-line"></div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/2B.webp" alt="Zone 1"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="peacewood-circle peacewood-large"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="peacewood-circle"> <img src="ressources/icons/3A3.webp" alt="Zone 9"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 10"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <<set $specpass.TWOA5 to 1>> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()" id="arrow-left"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> <div class="dropdown-rectangle"> <b>+5</b> <img class="icon5" src="ressources/maingui/attributes/better_virus.webp"> </div> </div> <div> <<if $specpass.TWOA5 is 1>> <div onclick="accessHuntingGame(5)" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="accessGatheringGame(5);" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="SugarCube.Engine.play('YA5D');" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <<else>> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> </div> <div class="button big-circular-button" onclick="appendWipWarning() /*GLMF_tryScene('AAL1','angela','lust')*/"> <img class="icon4" src="ressources/maingui/sexuals/beginning.webp"> </div> <div onclick="nextBloc();" class="button rectangular-button" id="arrow-right" > <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> </div> </div> <</nobr>>\ <script> function nextBloc() { if (SugarCube.State.variables.specpass.TWOA5 === 1) SugarCube.Engine.play('2A6'); else appendNotReadyWarning(); }; function previousBloc() { SugarCube.Engine.play("2A4"); modVariable("add", "stat", "virus", 5); }; //FGF_checkFoSuccessIndicator(); </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <style> body { background-image: url('ressources/backgrounds/2A_1.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #2ecc71; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } #arrow-right:active { background-color: red; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .icon1 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon2 { max-width: 65%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon3 { max-width: 70%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon4 { max-width: 60%; } .icon5 { max-width: 75%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } </style> <div class="peacewood-container"> <div class="peacewood-line"></div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/2B.webp" alt="Zone 1"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="peacewood-circle peacewood-active"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="peacewood-circle peacewood-large"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="peacewood-circle"> <img src="ressources/icons/3A3.webp" alt="Zone 9"> </div> <div class="peacewood-circle"> <img src="ressources/icons/2D.webp" alt="Zone 10"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="peacewood-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()" id="arrow-left"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> <div class="dropdown-rectangle"> <b>+5</b> <img class="icon5" src="ressources/maingui/attributes/better_virus.webp"> </div> </div> <div> <<if $specpass.TWOA6 is 1>> <div onclick="accessHuntingGame(6)" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="accessGatheringGame(6);" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="SugarCube.Engine.play('YA6D');" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <<else>> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon1" src="ressources/icons/2N.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon2" src="ressources/icons/2O.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> </div> <div class="button big-circular-button" onclick="FGF_enterFight('FFB')"> <div class="FIGHT_successRate" data-fightId="FFB">yo</div> <img class="icon4" src="ressources/icons/13A3.webp"> </div> <div onclick="nextBloc();" class="button rectangular-button" id="arrow-right" > <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> </div> </div> <</nobr>>\ <script> function nextBloc() { appendWipWarning(); }; function previousBloc() { SugarCube.Engine.play("2A5"); modVariable("add", "stat", "virus", 5); }; FGF_checkFoSuccessIndicator(); </script>\
<<nobr>> <<script>> stopAudio("voice"); playAudio("music", "forestPeacewood"); <</script>> <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } .bed { width: 33%; height: 80%; background-color: transparent; position: absolute; top: 44%; left: 56%; transform: translate(-50%, -50%); z-index: 1000; cursor: pointer; } .bed2 { width: 34%; height: 86%; background-color: transparent; position: absolute; top: 52%; left: 17%; transform: translate(-50%, -50%); z-index: 1000; cursor: pointer; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #9ec82f; border: 2vmin solid #43311b; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ z-index: 100; } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: brightness(0) saturate(100%) invert(15%) sepia(42%) saturate(750%) hue-rotate(353deg) brightness(89%) contrast(85%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #ccc; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 2; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ background-color: #9ec82f; border: 2vmin solid #43311b; color: #43311b; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .bgvideo { z-index: 0; position: fixed; } video { width: 100%; } .imgvid1 { position: absolute; pointer-events: none; width: 100%; background-size: cover; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #9ec82f; border: 2vmin solid #43311b; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #9ec82f; border: 0.5vmin solid #43311b; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: brightness(0) saturate(100%) invert(15%) sepia(42%) saturate(750%) hue-rotate(353deg) brightness(89%) contrast(85%); } .informations_info { margin: 4vh; font-size: 2vh; color: #43311b; } .iconcontainer { position: absolute; margin-top: auto; margin: 4vmin; /* Adjust margin for the exit button */ bottom: 0; } #mainButton_topright { background-color: #9ec82f; outline: solid 0.67vh #43311b; } #mainButton_topright img { filter: brightness(0) saturate(100%) invert(15%) sepia(42%) saturate(750%) hue-rotate(353deg) brightness(89%) contrast(85%); } #mainButton_bottomright { background-color: #9ec82f; outline: solid 0.67vh #43311b; } .textNA { color: #43311b; } .hidden { display: none; } </style> <<if $specpass.TWOA2 is 0>> <<goto "AUA1">> <</if>> <div class="bgvideo" style="top: 0; width: 100%; height: 100%;"> <video muted autoplay loop src="ressources/backgrounds/2ACE.webm" width="100%"> Your browser does not support the video tag. </video> <div class="bed" id="bed" onclick="toggleBed()"></div> <div class="bed2" id="bed2" onclick="GLMF_gotoSecondaryScene('ACA');"></div> </div> <img id="imgvid1" class="imgvid1" src="ressources/backgrounds/2ACE1.webp"> <img id="imgvid2" class="imgvid1" src="ressources/backgrounds/2ACE3.webp"> <div class="exit-button" onclick="previousBloc()"> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="iconcontainer hidden"> <div class="boutondiv_bottomleft"> <div id="sliderButton_bottomleft" character="gabbieJ" class="gabbieexterior_color"> <img class="gabbieexterior_color_image" src='ressources/maingui/sexuals/tease.webp' alt='Icon'> <span>Peek</span> <!-- Add this line --> <div class="req">?</div> </div> </div> </div> <div class="mainboutondiv hidden"> <div class="boutondiv_topright"> <div class="placeholder_right"></div> <div id="mainButton_topright" character="gabbieE"> <img class="gabbieexterior_color_image" src="ressources/icons/GE1.webp" alt="Icon"> <span>Eat<br>outside</span> <div class="req">?</div> </div> </div> <div class="boutondiv_topright hidden"> <div class="placeholder_right"></div> <div id="mainButton_topright" character="gabbieS"> <img class="gabbieexterior_color_image" src="ressources/icons/GS1.webp" alt="Icon"> <span>Go<br>swimming</span> <div class="req">?</div> </div> </div> <div class="boutondiv_bottomright hidden"> <div class="placeholder_right"></div> <div id="mainButton_bottomright"> <p class="textNA">NOT AVAILABLE IN THIS VERSION</p> </div> </div> </div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/2ACE1.webp'; var newImagePath = 'ressources/backgrounds/2ACE2.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('imgvid1'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath2 = 'ressources/backgrounds/2ACE3.webp'; var newImagePath2 = 'ressources/backgrounds/2ACE4.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('imgvid2'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed2').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath2); }); // Event listener for mouseleave on the trigger element document.getElementById('bed2').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath2); }); //-------PASSAGE CHANGE TOGGLES-------// function toggleBed() { SugarCube.Engine.play("2ACI"); } function previousBloc() { SugarCube.Engine.play("2A2"); } </script>
<!--GabbieRoom-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "forestPeacewood"); <</script>> <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } #story .bed { width: 52%; height: 34%; background-color: transparent; position: absolute; top: 83%; left: 26.5%; transform: translate(-50%, -50%); /* z-index: 1000; */ cursor: pointer; } .bedopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #f9d642; border: 2vmin solid #4e5d2c; display: none; opacity: 0; transform: scale(0.5); transform-origin: center; /* Add this line */ transition: all 0.3s ease; left: 26.5%; top: 13%; } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; } .passage { width: 100%; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #f9d642; border: 2vmin solid #4e5d2c; cursor: pointer; position: absolute; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ z-index: 10000; } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(32%) sepia(18%) saturate(1122%) hue-rotate(37deg) brightness(96%) contrast(89%); } .circle-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(32%) sepia(18%) saturate(1122%) hue-rotate(37deg) brightness(96%) contrast(89%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #f9d642; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 2vmin solid #4e5d2c; color: #4e5d2c; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .bgvideo { z-index: 0; position: fixed; } video { width: 100%; } .imgvid1 { position: absolute; pointer-events: none; width: 100%; background-size: cover; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #f9d642; border: 2vmin solid #4e5d2c; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #f9d642; border: 0.5vmin solid #4e5d2c; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(32%) sepia(18%) saturate(1122%) hue-rotate(37deg) brightness(96%) contrast(89%); } .informations_info { margin: 4vh; font-size: 2vh; color: #4e5d2c; } </style> <div class="bgvideo" style="top: 0; width: 100%; height: 100%;"> <video muted autoplay loop src="ressources/backgrounds/2ACI.webm" width="100%"> Your browser does not support the video tag. </video> <div class="bed" id="bed" onclick="GLMF_gotoSecondaryScene('ACB');"></div> </div> <img id="imgvid1" class="imgvid1" src="ressources/backgrounds/2ACI1.webp"> <div class="exit-button" onclick="previousBloc()"> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="mainboutondiv"> <div class="boutondiv_topright_angela"> <div class="placeholder_topright_angela"></div> <div id="mainButton_topright_angela" onclick="FGF_enterFight('AL1');"> <img src='ressources/maingui/attributes/lust_icon.webp' alt='Icon'> <span>Practice Lust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_topright_angela"> <div class="placeholder_topright_angela"></div> <div id="mainButton_topright_angela" onclick="window.accessTrustGame('angela');"> <img src='ressources/maingui/attributes/trust_icon.webp' alt='Icon'> <span>Practice Trust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_bottomright_elfie hidden"> <div class="placeholder_right_elfie hidden"></div> <div id="mainButton_bottomright_elfie hidden"> <p class="textNAelfie hidden"></p> </div> </div> </div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/2ACI1.webp'; var newImagePath = 'ressources/backgrounds/2ACI2.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('imgvid1'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); function previousBloc() { SugarCube.Engine.play("2ACE"); } </script>\
<!-- Wastelands --> <<nobr>> <<script>> playAudio("music", "wastelandsTheborder"); SugarCube.State.variables.gui_interface.angelaButtonEnable = true; /*SugarCube.State.variables.gui_interface.mapButtonEnable = true;*/ SugarCube.State.variables.gui_interface.inventoryButtonEnable = true; <</script>> <div class="previousmap">[["MAIN MAP"|MAIN MAP]]</div> <div class="MS_mapContainer"> <img class="MS_mainImage" src="./ressources/maingui/maps/wastelands/wastelands.webp"> <img section="border" class="IMGa lockedmap" src="./ressources/maingui/maps/wastelands/wastelands_border_locked.webp"> <img section="border" class="IMGa hoverInfo" src="./ressources/maingui/maps/wastelands/wastelands_border.webp"> <img section="green" class="IMGa lockedmap" src="./ressources/maingui/maps/wastelands/wastelands_green_locked.webp"> <img section="green" class="IMGa hoverInfo" src="./ressources/maingui/maps/wastelands/wastelands_green.webp"> <img section="blue" class="IMGa lockedmap" src="./ressources/maingui/maps/wastelands/wastelands_blue_locked.webp"> <img section="blue" class="IMGa hoverInfo" src="./ressources/maingui/maps/wastelands/wastelands_blue.webp"> <img section="red" class="IMGa lockedmap" src="./ressources/maingui/maps/wastelands/wastelands_red_locked.webp"> <img section="red" class="IMGa hoverInfo" src="./ressources/maingui/maps/wastelands/wastelands_red.webp"> <img section="black" class="IMGa lockedmap" src="./ressources/maingui/maps/wastelands/wastelands_black_locked.webp"> <img section="black" class="IMGa hoverInfo" src="./ressources/maingui/maps/wastelands/wastelands_black.webp"> <!-- hover Triggers --> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/wastelands/wastelands_blank.webp" section="border" style="clip-path: polygon(0.0% 0.0%, 34.0% 0.0%, 31.0% 11.3%, 29.4% 11.7%, 22.4% 15.1%, 21.6% 16.7%, 19.8% 13.4%, 18.4% 16.4%, 17.3% 17.8%, 17.3% 23.2%, 17.8% 23.7%, 16.7% 25.3%, 17.7% 32.0%, 12.9% 36.2%, 10.9% 37.2%, 6.1% 38.3%, 0.0% 37.0%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/wastelands/wastelands_blank.webp" section="green" style="clip-path: polygon(0.0% 37.1%, 5.9% 38.6%, 10.2% 37.6%, 12.9% 36.4%, 18.1% 32.1%, 17.1% 25.5%, 17.9% 23.5%, 19.8% 25.3%, 20.6% 24.6%, 22.7% 26.2%, 23.5% 25.1%, 21.7% 23.6%, 22.5% 22.8%, 22.5% 17.3%, 21.7% 16.7%, 22.2% 15.6%, 29.6% 11.5%, 31.5% 11.6%, 33.0% 4.5%, 33.5% 4.7%, 35.8% 20.1%, 38.0% 24.2%, 40.2% 26.7%, 40.5% 36.6%, 38.6% 45.5%, 26.8% 53.5%, 27.1% 59.2%, 23.9% 62.2%, 26.4% 64.3%, 25.2% 66.0%, 22.5% 63.8%, 19.0% 67.3%, 18.1% 66.6%, 16.3% 77.7%, 16.9% 83.4%, 19.7% 89.8%, 21.9% 95.0%, 21.7% 100.0%, 0.0% 100.0%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/wastelands/wastelands_blank.webp" section="blue" style="clip-path: polygon(38.8% 45.2%, 55.0% 56.4%, 58.8% 63.9%, 61.0% 76.3%, 61.6% 76.1%, 63.9% 77.8%, 64.0% 84.1%, 60.8% 87.2%, 63.4% 89.4%, 62.1% 90.9%, 59.5% 88.7%, 57.1% 91.2%, 55.6% 94.6%, 55.6% 100.0%, 21.6% 100.0%, 21.5% 94.6%, 16.7% 83.3%, 16.2% 77.6%, 18.0% 66.1%, 18.9% 67.1%, 22.3% 63.6%, 25.0% 65.7%, 26.2% 64.4%, 23.6% 62.3%, 26.9% 59.1%, 26.9% 53.5%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/wastelands/wastelands_blank.webp" section="red" style="clip-path: polygon(55.6% 100.0%, 55.6% 94.2%, 56.9% 91.0%, 59.4% 88.5%, 62.0% 90.7%, 63.2% 89.3%, 60.6% 87.2%, 64.0% 83.8%, 63.9% 77.9%, 61.6% 75.9%, 60.7% 76.5%, 58.9% 64.1%, 54.7% 56.5%, 65.9% 58.7%, 70.3% 55.3%, 69.3% 54.2%, 69.4% 49.3%, 70.0% 47.7%, 70.4% 48.1%, 70.4% 49.2%, 71.5% 48.1%, 71.5% 42.0%, 72.9% 40.4%, 74.4% 37.0%, 76.0% 40.4%, 77.0% 41.6%, 77.6% 40.4%, 79.8% 42.4%, 79.8% 44.2%, 80.2% 43.5%, 90.1% 39.9%, 100.0% 39.9%, 100.0% 100.0%);"> <img class="IMGa hoverTrigger" src="./ressources/maingui/maps/wastelands/wastelands_blank.webp" section="black" style="clip-path: polygon(47.6% 0.0%, 46.4% 1.6%, 43.0% 14.5%, 43.0% 31.6%, 46.2% 45.1%, 54.6% 56.9%, 66.2% 58.7%, 70.4% 55.3%, 69.5% 54.2%, 69.5% 49.2%, 70.1% 47.9%, 70.5% 48.3%, 70.4% 49.3%, 71.5% 48.3%, 71.6% 42.2%, 72.9% 40.6%, 74.4% 37.2%, 75.9% 40.6%, 77.2% 41.9%, 77.2% 40.9%, 77.6% 40.4%, 79.9% 42.5%, 79.9% 44.2%, 80.3% 43.5%, 90.3% 39.9%, 100.0% 40.2%, 100.0% 6.8%, 90.2% 6.8%, 80.1% 2.9%, 78.0% 0.0%);"> <!-- girl location indicator --> <div class="MS_divAreasCont"> <div class="GLMS_markerCont" section="wastelands.sub.border" style="top: 4%;left: 1%;width: 25%"></div> <div class="GLMS_markerCont" section="wastelands.sub.green" style="top: 40%;left: 2%;width: 30%;"></div> <div class="GLMS_markerCont" section="wastelands.sub.blue" style="bottom: 15%;left: 20%;width: 35%;"></div> <div class="GLMS_markerCont" section="wastelands.sub.red" style="bottom: 15%;left: 65%;width: 31%"></div> <div class="GLMS_markerCont" section="wastelands.sub.black" style="top: 15%;left: 50%;width: 35%;"></div> </div> </div> <div class="MS_popupOverlayCont"></div> <</nobr>>\ <style> body { background-color: rgb(20,20,20); overflow: hidden; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed~#story { margin-left: 0; } .passage{ /*body{*/ user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; position: relative; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; font-family: 'Roboto', sans-serif; } #passages { display: flex; justify-content: center; margin: 0; max-width: 100%; } .previousmap { position: absolute;; z-index: 3; font-size: 1.8em; display: flex; align-content: center; top: 3vh; left: 3vh; } .previousmap .link-internal { position: sticky; height: 15vh; width: 15vh; border-radius: 50%; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4);/* For centering text */ box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.4); background-image: none; padding: 1vh 1vh; min-width: 15vh; display: flex; align-items: center; } .previousmap .link-internal:hover { background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1.5vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .MS_mapContainer { position: relative; width: 100%; max-height: 100%; display: table; /* center */ } .MS_mapContainer > .MS_mainImage { width: 100%; } .MS_mapContainer > .IMGa { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transition: opacity 0.3s ease-in-out; } .MS_mapContainer > .IMGa.hoverTrigger { cursor: pointer; } .MS_mainContainer > .MS_hoverImage { pointer-events: none; z-index: 2; } .MS_divAreasCont{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { window.SugarCube.Engine.play(window.SugarCube.State.passage);}, 40); } else { //window.MS_secKey = "wastelands" //window.MS_subSec = SugarCube.State.variables.section[MS_secKey].sub; // shortcut if not already set //window.MS_secKey = "wastelands"; //let { lastObject: TheObj, lastKey: TheLastKey } = setObjByKeys(SugarCube.State.variables.section, MS_secKey); //window.MS_subSec = TheObj[TheLastKey].sub; setCurrentSection({keys: "wastelands"}); MS_Init(); } </script>\
<<nobr>> <<script>> playAudio("music", "wastelandsTheborder"); SugarCube.State.variables.gui_interface.angelaButtonEnable = false; /*SugarCube.State.variables.gui_interface.mapButtonEnable = false;*/ SugarCube.State.variables.gui_interface.inventoryButtonEnable = false; <</script>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; color: #fff; border: 8px solid red; border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; color: #df6d3f; border: 8px solid red; border-radius: 0 0 30px 30px; transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; border: 8px solid red; border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; border: 8px solid red; border-radius: 50%; margin: 2vh 0; margin-left: -14vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; overflow: hidden; } .big-circular-button:hover { animation: breathe 1s infinite alternate; } @keyframes breathe { to { transform: scale(1.1); } } .icon1 { max-width: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon2 { max-width: 65%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon3 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon4 { max-width: 60%; } .icon5 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon6 { display: block; width: 100%; height: auto; } .image-container { position: absolute; display: inline-flex; justify-content: center; align-items: center; width: 11.5vw; left: 0; bottom: 0; } .centered-text { position: absolute; color: white; font-size: 2vw; text-align: center; color: #e9693a; } /* .half { SPLIT THING position: absolute; width: 100%; height: 50%; transition: all 0.6s ease; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; } .top-half { top: 0; border-bottom-right-radius: 200px; border-bottom-left-radius: 200px; background-color: #666; } .bottom-half { bottom: 0; border-top-right-radius: 200px; border-top-left-radius: 200px; background-color: #666; } .half img { max-width: 50%; max-height: 50%; transition: all 0.3s ease; } .half:hover { height: 100%; border-radius: 0; z-index: 5; } .half:hover img { max-width: 60%; max-height: 60%; } .horizontal-line { position: absolute; top: 50%; left: 0; width: 100%; height: 0.8vh; background-color: red; transform: translateY(-50%); z-index: 3; } */ </style> <div class="border-container"> <div class="border-line"></div> <div class="border-circle border-large"> <img src="ressources/icons/3A2.webp" alt="Zone 1"> </div> <div class="border-circle"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 9"> </div> <div class="border-circle"> <img src="ressources/icons/2E.webp" alt="Zone 10"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <<set $misc.dangerlevel to 3>> <<set $ambush to random(1,100)>> <<if $ambush lte 3>> /* <<goto "FIGHT FWA">> */ <<script>> if (SugarCube.State.variables.prologue.isExploring !== true) { FGF_enterFight("FWA", {winReturnIsPrev: true, lossReturnIsPrev: true}); } <</script>> <</if>> <div class="image-container"> <img class="icon6" src="ressources/icons/3A7.webp"> <div class="centered-text"> $misc.dangerlevel %</div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> </div> <div> <div onclick="SugarCube.Engine.play('WA1B1')" class="button circular-button"> <img class="icon1" src="ressources/icons/2J.webp"> </div> <div onclick="accessExploreGame('WA1C')" class="button circular-button"> <img class="icon2" src="ressources/icons/2I.webp"> </div> <div onclick="SugarCube.Engine.play('WA1D')" class="button circular-button"> <img class="icon3" src="ressources/icons/2K.webp"> </div> </div> /* <div class="button big-circular-button"> <!-- SPLIT THING --> <div class="horizontal-line"></div> <div class="half top-half" onclick="nextBloc()"> <img src="ressources/icons/3A8.webp" alt="Top Image"> </div> <div class="half bottom-half" onclick="nextBloc3()"> <img src="ressources/icons/3A11.webp" alt="Bottom Image"> </div> </div> */ <div class="button big-circular-button" onclick="nextBloc()"> <img class="icon4" src="ressources/icons/3A8.webp"> </div> <div class="button rectangular-button" onclick="nextBloc2()"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> <div class="dropdown-rectangle"> <b>+5%</b> <img class="icon5" src="ressources/icons/3A9.webp"> </div> </div> </div> <script> /* function nextBloc3() { SugarCube.Engine.play("MINING GAME") } */ function nextBloc2() { SugarCube.Engine.play("3A2") } function nextBloc() { SugarCube.Engine.play("6A") } function previousBloc() { SugarCube.Engine.play("WASTELAND MAP"); } </script> <</nobr>>
<<nobr>> <<script>>playAudio("music", "wastelandsTheborder");<</script>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #df6d3f; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .icon1 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon2 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon3 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon4 { max-width: 70%; } .icon5 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon6 { display: block; /* Remove inline default for images */ width: 100%; /* Adjust width as needed */ height: auto; /* Adjust height as needed */ } .image-container { position: absolute; display: inline-flex; justify-content: center; align-items: center; width: 11.5vw; left: 0; bottom: 0; } .centered-text { position: absolute; color: white; /* Choose text color that makes it readable over your image */ font-size: 2vw; /* Adjust size as needed */ text-align: center; color: #e9693a; } </style> <div class="border-container"> <div class="border-line"></div> <div class="border-circle border-active"> <img src="ressources/icons/3A2.webp" alt="Zone 1"> </div> <div class="border-circle border-large"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 9"> </div> <div class="border-circle"> <img src="ressources/icons/2E.webp" alt="Zone 10"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <<set $misc.dangerlevel to 6>> <<set $ambush to random(1,100)>> <<if $ambush lte 6>> /* <<goto "FIGHT FWA">> */ <<script>> if (SugarCube.State.variables.prologue.isExploring !== true) { FGF_enterFight("FWA", {winReturnIsPrev: true, lossReturnIsPrev: true}); } <</script>> <</if>> <div class="image-container"> <img class="icon6" src="ressources/icons/3A7.webp"> <div class="centered-text"> $misc.dangerlevel %</div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> </div> <div> <div onclick="SugarCube.Engine.play('WA2B1')" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="accessExploreGame('WA2C')" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="SugarCube.Engine.play('WA2D')" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> </div> <div class="button big-circular-button" onclick="nextBloc()"><img class="icon4" src="ressources/icons/3A10.webp"></div> <<if $specpass.THREEA2 is 0>> <div class="button rectangular-button" onclick="appendNotReadyWarning()"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> <div class="dropdown-rectangle"> <b>+5%</b> <img class="icon5" src="ressources/icons/3A9.webp"> </div> </div> <</if>> <<if $specpass.THREEA2 is 1>> <div class="button rectangular-button" onclick="nextBloc2()"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> <div class="dropdown-rectangle"> <b>+5%</b> <img class="icon5" src="ressources/icons/3A9.webp"> </div> </div> <</if>> </div> <script> function nextBloc2() { SugarCube.Engine.play("3A3") } function nextBloc() { SugarCube.Engine.play("3AGE") } function previousBloc() { SugarCube.Engine.play("3A1"); } </script> <</nobr>>
<<nobr>> <<script>>playAudio("music", "wastelandsTheborder");<</script>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #df6d3f; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .icon1 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon2 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon3 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon4 { max-width: 60%; } .icon5 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon6 { display: block; /* Remove inline default for images */ width: 100%; /* Adjust width as needed */ height: auto; /* Adjust height as needed */ } .image-container { position: absolute; display: inline-flex; justify-content: center; align-items: center; width: 11.5vw; left: 0; bottom: 0; } .centered-text { position: absolute; color: white; /* Choose text color that makes it readable over your image */ font-size: 2vw; /* Adjust size as needed */ text-align: center; color: #e9693a; } </style> <div class="border-container"> <div class="border-line"></div> <div class="border-circle border-active"> <img src="ressources/icons/3A2.webp" alt="Zone 1"> </div> <div class="border-circle border-active"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="border-circle border-large"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 9"> </div> <div class="border-circle"> <img src="ressources/icons/2E.webp" alt="Zone 10"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <<set $misc.dangerlevel to 9>> <<set $ambush to random(1,100)>> <<if $ambush lte 9>> /* <<goto "FIGHT FWA">> */ <<script>> if (SugarCube.State.variables.prologue.isExploring !== true) { FGF_enterFight("FWA", {winReturnIsPrev: true, lossReturnIsPrev: true}); } <</script>> <</if>> <div class="image-container"> <img class="icon6" src="ressources/icons/3A7.webp"> <div class="centered-text"> $misc.dangerlevel %</div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> </div> <div> <<if $specpass.THREEA3 is 1>> <div onclick="SugarCube.Engine.play('WA3B1')" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="accessExploreGame('WA3C')" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="SugarCube.Engine.play('WA3D')" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> <<if $specpass.THREEA3 is 0>> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> </div> <div class="button big-circular-button" onclick="FGF_enterFight('FWA')"> <div class="FIGHT_successRate" data-fightId="FWA">yo</div> <img class="icon4" src="ressources/icons/13A3.webp"> </div> <div onclick="nextBloc()" class="button rectangular-button" id="right"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> <div class="dropdown-rectangle"> <b>+5%</b> <img class="icon5" src="ressources/icons/3A9.webp"> </div> </div> </div> <script> function nextBloc() { if (SugarCube.State.variables.specpass.THREEA3 === 1) SugarCube.Engine.play("3A4"); else appendNotReadyWarning(); }; function previousBloc() { SugarCube.Engine.play("3A2"); }; FGF_checkFoSuccessIndicator(); </script> <</nobr>>
<<nobr>> <<script>>playAudio("music", "wastelandsTheborder");<</script>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #df6d3f; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button img { filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .icon1 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon2 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon3 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon4 { max-width: 60%; } .icon5 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon6 { display: block; /* Remove inline default for images */ width: 100%; /* Adjust width as needed */ height: auto; /* Adjust height as needed */ } .image-container { position: absolute; display: inline-flex; justify-content: center; align-items: center; width: 11.5vw; left: 0; bottom: 0; } .centered-text { position: absolute; color: white; /* Choose text color that makes it readable over your image */ font-size: 2vw; /* Adjust size as needed */ text-align: center; color: #e9693a; } </style> <div class="border-container"> <div class="border-line"></div> <div class="border-circle border-active"> <img src="ressources/icons/3A2.webp" alt="Zone 1"> </div> <div class="border-circle border-active"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="border-circle border-active"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="border-circle border-large"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 9"> </div> <div class="border-circle"> <img src="ressources/icons/2E.webp" alt="Zone 10"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <<set $misc.dangerlevel to 12>> <<set $ambush to random(1,100)>> <<if $ambush lte 12>> /* <<goto "FIGHT FWA">> */ <<script>> if (SugarCube.State.variables.prologue.isExploring !== true) { FGF_enterFight("FWA", {winReturnIsPrev: true, lossReturnIsPrev: true}); } <</script>> <</if>> <div class="image-container"> <img class="icon6" src="ressources/icons/3A7.webp"> <div class="centered-text"> $misc.dangerlevel %</div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> </div> <div> <<if $specpass.THREEA4 is 1>> <div onclick="SugarCube.Engine.play('WA4B1')" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="accessExploreGame('WA4C')" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="SugarCube.Engine.play('WA4D')" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> <<if $specpass.THREEA4 is 0>> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> </div> <div class="button big-circular-button" onclick="GLMF_tryScene('GAT1','gabbie','trust')"> <img class="icon4" src="ressources/maingui/sexuals/beginning.webp"> </div> <div onclick="nextBloc()" class="button rectangular-button" id="right"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> <div class="dropdown-rectangle"> <b>+5%</b > <img class="icon5" src="ressources/icons/3A9.webp"> </div> </div> </div> <script> function nextBloc() { if (SugarCube.State.variables.specpass.THREEA4 === 1) SugarCube.Engine.play("3A5"); else appendNotReadyWarning(); }; function previousBloc() { SugarCube.Engine.play("3A3"); }; </script> <</nobr>>
<<nobr>> <<script>>playAudio("music", "wastelandsTheborder");<</script>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #df6d3f; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button img { filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .icon1 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon2 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon3 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon4 { max-width: 60%; } .icon5 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon6 { display: block; /* Remove inline default for images */ width: 100%; /* Adjust width as needed */ height: auto; /* Adjust height as needed */ } .image-container { position: absolute; display: inline-flex; justify-content: center; align-items: center; width: 11.5vw; left: 0; bottom: 0; } .centered-text { position: absolute; color: white; /* Choose text color that makes it readable over your image */ font-size: 2vw; /* Adjust size as needed */ text-align: center; color: #e9693a; } </style> <div class="border-container"> <div class="border-line"></div> <div class="border-circle border-active"> <img src="ressources/icons/3A2.webp" alt="Zone 1"> </div> <div class="border-circle border-active"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="border-circle border-active"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="border-circle border-active"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="border-circle border-large"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 9"> </div> <div class="border-circle"> <img src="ressources/icons/2E.webp" alt="Zone 10"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <<set $specpass.THREEA5 to 1>> <<set $misc.dangerlevel to 15>> <<set $ambush to random(1,100)>> <<if $ambush lte 15>> /* <<goto "FIGHT FWA">> */ <<script>> if (SugarCube.State.variables.prologue.isExploring !== true) { FGF_enterFight("FWA", {winReturnIsPrev: true, lossReturnIsPrev: true}); } <</script>> <</if>> <div class="image-container"> <img class="icon6" src="ressources/icons/3A7.webp"> <div class="centered-text"> $misc.dangerlevel %</div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> </div> <div> <<if $specpass.THREEA5 is 1>> <div onclick="SugarCube.Engine.play('WA5B1')" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="accessExploreGame('WA5C')" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="SugarCube.Engine.play('WA5D')" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> <<if $specpass.THREEA5 is 0>> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> </div> <div class="button big-circular-button" onclick="appendWipWarning() /*GLMF_tryScene('GAL1','gabbie','lust')*/"> <img class="icon4" src="ressources/maingui/sexuals/beginning.webp"> </div> <div onclick="nextBloc()" class="button rectangular-button" id="right"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> <div class="dropdown-rectangle"> <b>+5%</b > <img class="icon5" src="ressources/icons/3A9.webp"> </div> </div> </div> <script> function nextBloc() { if (SugarCube.State.variables.specpass.THREEA5 === 1) SugarCube.Engine.play("3A6"); else appendNotReadyWarning(); }; function previousBloc() { SugarCube.Engine.play("3A4"); }; </script> <</nobr>>
<<nobr>> <<script>>playAudio("music", "wastelandsTheborder");<</script>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } .passage { position: relative; } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; } b { margin-top: 10%; } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #df6d3f; border: 8px solid red; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid red; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button img { /* filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); */ } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .icon1 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon2 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon3 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon4 { max-width: 60%; } .icon5 { max-width: 70%; filter: invert(60%) sepia(67%) saturate(2729%) hue-rotate(335deg) brightness(93%) contrast(87%); } .icon6 { display: block; /* Remove inline default for images */ width: 100%; /* Adjust width as needed */ height: auto; /* Adjust height as needed */ } .image-container { position: absolute; display: inline-flex; justify-content: center; align-items: center; width: 11.5vw; left: 0; bottom: 0; } .centered-text { position: absolute; color: white; /* Choose text color that makes it readable over your image */ font-size: 2vw; /* Adjust size as needed */ text-align: center; color: #e9693a; } #right:active { background-color: red; } </style> <div class="border-container"> <div class="border-line"></div> <div class="border-circle border-active"> <img src="ressources/icons/3A2.webp" alt="Zone 1"> </div> <div class="border-circle border-active"> <img src="ressources/icons/3A3.webp" alt="Zone 2"> </div> <div class="border-circle border-active"> <img src="ressources/icons/2D.webp" alt="Zone 3"> </div> <div class="border-circle border-active"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 4"> </div> <div class="border-circle border-active"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 5"> </div> <div class="border-circle border-large"> <img src="ressources/icons/2D.webp" alt="Zone 6"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 7"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 8"> </div> <div class="border-circle"> <img src="ressources/icons/2D.webp" alt="Zone 9"> </div> <div class="border-circle"> <img src="ressources/icons/2E.webp" alt="Zone 10"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/trust_icon.webp" id="trulus" alt="Zone 11"> </div> <div class="border-circle"> <img src="ressources/maingui/attributes/lust_icon.webp" id="trulus" alt="Zone 12"> </div> </div> <<set $misc.dangerlevel to 18>> <<set $ambush to random(1,100)>> <<if $ambush lte 18>> /* <<goto "FIGHT FWA">> */ <<script>> if (SugarCube.State.variables.prologue.isExploring !== true) { FGF_enterFight("FWA", {winReturnIsPrev: true, lossReturnIsPrev: true}); } <</script>> <</if>> <div class="image-container"> <img class="icon6" src="ressources/icons/3A7.webp"> <div class="centered-text"> $misc.dangerlevel %</div> </div> <div class="container"> <div class="button rectangular-button" onclick="previousBloc()"> <img class="chevron-arrow-left" src="ressources/maingui/ui/chevron-arrow.webp" alt="Chevron Arrow"> </div> <div> <<if $specpass.THREEA6 is 1>> <div onclick="SugarCube.Engine.play('WA6B1')" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="accessExploreGame('WA6C')" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="SugarCube.Engine.play('WA6D')" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> <<if $specpass.THREEA6 is 0>> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon1" src="ressources/icons/2J.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon2" src="ressources/icons/2I.webp"></div> <div onclick="appendNotReadyWarning()" class="button circular-button"><img class="icon3" src="ressources/icons/2K.webp"></div> <</if>> </div> <div class="button big-circular-button" onclick="FGF_enterFight('FWB')"> <div class="FIGHT_successRate" data-fightId="FWB">yo</div> <img class="icon4" src="ressources/icons/13A3.webp"> </div> <div onclick="nextBloc()" class="button rectangular-button" id="right"> <img class="chevron-arrow-right" src="ressources/maingui/ui/chevron-arrow2.webp" alt="Chevron Arrow"> <div class="arrow-right"></div> <div class="dropdown-rectangle"> <b>+5%</b > <img class="icon5" src="ressources/icons/3A9.webp"> </div> </div> </div> <script> function nextBloc() { appendWipWarning(); }; function previousBloc() { SugarCube.Engine.play("3A5"); }; FGF_checkFoSuccessIndicator(); </script> <</nobr>>
<<nobr>> <<script>> stopAudio("voice"); playAudio("music", "wastelandsTheborder"); <</script>> <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } .bed { width: 15%; height: 25%; background-color: transparent; position: absolute; top: 58%; left: 16%; transform: translate(-50%, -50%); z-index: 1000; cursor: pointer; } .bed2 { width: 11%; height: 25%; background-color: transparent; position: absolute; top: 57.5%; left: 37.5%; transform: translate(-50%, -50%); z-index: 1000; cursor: pointer; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #f6c5a4; border: 2vmin solid #452121; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ z-index: 100; } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: brightness(0) saturate(100%) invert(11%) sepia(24%) saturate(1547%) hue-rotate(314deg) brightness(104%) contrast(88%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #ccc; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 2; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ background-color: #f6c5a4; border: 2vmin solid #452121; color: #452121; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .bgvideo { z-index: 0; position: fixed; } video { width: 100%; } .imgvid1 { position: absolute; pointer-events: none; width: 100%; background-size: cover; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #f6c5a4; border: 2vmin solid #452121; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #f6c5a4; border: 0.5vmin solid #452121; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: brightness(0) saturate(100%) invert(11%) sepia(24%) saturate(1547%) hue-rotate(314deg) brightness(104%) contrast(88%); } .informations_info { margin: 4vh; font-size: 2vh; color: #452121; } .iconcontainer { position: absolute; margin-top: auto; margin: 4vmin; /* Adjust margin for the exit button */ bottom: 0; } #mainButton_topright { background-color: #f6c5a4; outline: solid 0.67vh #452121; } #mainButton_topright img { filter: brightness(0) saturate(100%) invert(11%) sepia(24%) saturate(1547%) hue-rotate(314deg) brightness(104%) contrast(88%); } #mainButton_bottomright { background-color: #f6c5a4; outline: solid 0.67vh #452121; } .textNA { color: #452121; } </style> <<if $misc.gabbieinitial is 0>> <<goto "GUA1">> <</if>> <div class="bgvideo" style="top: 0; width: 100%; height: 100%;"> <video muted autoplay loop src="ressources/backgrounds/3AGE.webm" width="100%"> Your browser does not support the video tag. </video> <div class="bed" id="bed" onclick="toggleBed();"></div> <div class="bed2" id="bed2" onclick="GLMF_gotoSecondaryScene('GCA');"></div> </div> <img id="imgvid1" class="imgvid1" src="ressources/backgrounds/3AGE1.webp"> <img id="imgvid2" class="imgvid1" src="ressources/backgrounds/3AGE3.webp"> <div class="exit-button" onclick="previousBloc()"> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/3AGE1.webp'; var newImagePath = 'ressources/backgrounds/3AGE2.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('imgvid1'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); //-------BACKGROUND IMAGE CHANGE 2 (BED)-------// // Define the initial and new image paths var initialImagePath2 = 'ressources/backgrounds/3AGE3.webp'; var newImagePath2 = 'ressources/backgrounds/3AGE4.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('imgvid2'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed2').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath2); }); // Event listener for mouseleave on the trigger element document.getElementById('bed2').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath2); }); //-------PASSAGE CHANGE TOGGLES-------// function toggleBed() { SugarCube.Engine.play("3AGI"); } function previousBloc() { SugarCube.Engine.play("3A2"); } </script>
<!--GabbieRoom-->\ <<nobr>> <<script>> stopAudio("voice"); playAudio("music", "wastelandsTheborder"); <</script>> <style> body { overflow: hidden; } #passages { margin: 0; max-width: 100%; } #story { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } #ui-bar.stowed~#story { margin-left: 0; } .passage { user-select: none; font-family: 'Century Gothic', sans-serif; font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; margin: 0; padding: 0; height: 100vh; width: 100%; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; font-family: 'Roboto', sans-serif; } #story .bed { width: 20%; height: 25%; background-color: transparent; position: absolute; top: 45%; left: 54%; transform: translate(-50%, -50%); /* z-index: 1000; */ cursor: pointer; } .bedopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 5; padding: 0.5vw; border-radius: 2vw; background-color: #6d322c; border: 2vmin solid #deb23f; display: none; opacity: 0; transform: scale(0.5); transform-origin: center; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; } .passage { width: 100%; } .exit-button { position: absolute; margin: 3vmin; /* Adjust margin for the exit button */ width: 20vmin; /* Adjust size based on your preferences */ height: 20vmin; border-radius: 50%; margin: 3vmin; /* Adjust margin based on your preferences */ display: flex; align-items: center; justify-content: center; background-color: #6d322c; border: 2vmin solid #deb23f; cursor: pointer; position: absolute; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ z-index: 10000; } .exit-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; border-radius: 50%; filter: invert(81%) sepia(57%) saturate(652%) hue-rotate(338deg) brightness(97%) contrast(79%); } .circle-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(81%) sepia(57%) saturate(652%) hue-rotate(338deg) brightness(97%) contrast(79%); } .exit-button:hover { transform: translateY(-5px); /* Apply bounce effect on hover */ background-color: gray; /* Change background color on hover */ } .column { width: 100%; text-align: center; } .title { font-weight: bold; margin-bottom: 20px; margin-top: 2vw; display: block; width: 45%; display: inline-block; } .button { display: inline-block; background-color: #0000002e; color: white; padding: 8px; cursor: pointer; margin: 0 2px; /* Slightly reduced margin between the buttons */ width: calc(20% - 4px); /* Adjusted width */ border: 0.2vw solid white; border-radius: 0.5vw; text-align: center; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .button:hover { background-color: gray; } .button.disabled { background-color: grey; cursor: not-allowed; } .close-button { position: absolute; top: -50px; left: -50px; cursor: pointer; background-color: #6d322c; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 2vmin solid #deb23f; color: #deb23f; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ } .close-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .title:first-child { margin-top: 3vw; } .bgvideo { z-index: 0; position: fixed; } video { width: 100%; } .imgvid1 { position: absolute; pointer-events: none; width: 100%; background-size: cover; } .infoopen { width: 42vw; height: 70vh; background-color: black; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; background-color: #6d322c; border: 2vmin solid #deb23f; display: none; opacity: 0; transform: scale(0.5); transform-origin: top left; /* Add this line */ transition: all 0.3s ease; left: 35%; top: 13%; } .info-button { position: absolute; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 0; margin-top: 3vh; margin-left: 27vh; align-items: center; justify-content: center; background-color: #6d322c; border: 0.5vmin solid #deb23f; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; /* Add smooth transitions */ text-align: center; color: #ede8ed; } .info-button:hover { transform: scale(1.1); /* Apply scale on hover */ background-color: gray; /* Change background color on hover */ } .info-button img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(81%) sepia(57%) saturate(652%) hue-rotate(338deg) brightness(97%) contrast(79%); } .informations_info { margin: 4vh; font-size: 2vh; color: #deb23f; } </style> <div class="bgvideo" style="top: 0; width: 100%; height: 100%;"> <video muted autoplay loop src="ressources/backgrounds/3AGI.webm" width="100%"> Your browser does not support the video tag. </video> <div class="bed" id="bed" onclick="GLMF_gotoSecondaryScene('GCB');"></div> </div> <img id="imgvid1" class="imgvid1" src="ressources/backgrounds/3AGI1.webp"> <div class="exit-button" onclick="previousBloc()"> <img src="ressources/maingui/ui/exit.webp" alt="Exit Button"> </div> <div class="mainboutondiv"> <div class="boutondiv_topright_gabbie"> <div class="placeholder_topright_gabbie"></div> <div id="mainButton_topright_gabbie" onclick="FGF_enterFight('GL1');"> <img src='ressources/maingui/attributes/lust_icon.webp' alt='Icon'> <span>Practice Lust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_topright_gabbie"> <div class="placeholder_topright_gabbie"></div> <div id="mainButton_topright_gabbie" onclick="window.accessTrustGame('gabbie');"> <img src='ressources/maingui/attributes/trust_icon.webp' alt='Icon'> <span>Practice Trust</span> <!-- Add this line --> </div> </div> <div class="boutondiv_bottomright_elfie hidden"> <div class="placeholder_right_elfie hidden"></div> <div id="mainButton_bottomright_elfie hidden"> <p class="textNAelfie hidden"></p> </div> </div> </div> <</nobr>> <script> var currentPassage = document.querySelector(".passage"); //-------BACKGROUND IMAGE CHANGE (BED)-------// // Define the initial and new image paths var initialImagePath = 'ressources/backgrounds/3AGI1.webp'; var newImagePath = 'ressources/backgrounds/3AGI2.webp'; // Function to change the background image function changeBackgroundImage(newImage) { var storyElement = document.getElementById('imgvid1'); if (!storyElement) return; storyElement.style.backgroundImage = `url(${newImage})`; storyElement.style.transition = 'background-image 0.25s ease-in-out'; } // Event listener for mouseenter on the trigger element document.getElementById('bed').addEventListener('mouseenter', function () { changeBackgroundImage(newImagePath); }); // Event listener for mouseleave on the trigger element document.getElementById('bed').addEventListener('mouseleave', function () { changeBackgroundImage(initialImagePath); }); function previousBloc() { SugarCube.Engine.play("3AGE"); } </script>\
<<nobr>> <div class="FS_main"> <div class="FS_finish-overlay FS_hidden"> <!-- finish screen --> <div class="FS_contentCont DIAS_container_ParentScrollable"> <div class="FS_content DIAS_container"> </div> </div> <div class="FS_exit"> <div class="DIAS_button">Done</div> </div> </div> <div class="FS_choose-overlay FS_hidden"> <!-- choose popup --> <div> <top>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</top> <hr> <bottom> <div class="FS_button">Let her do her things</div> <div class="FS_button">Run away</div> </bottom> </div> </div> <div class="FS_wheel-overlay FS_hidden"> <!-- wheel game --> <div class="FS_wheel-pin"> <img src="./ressources/icons/7C.webp"> </div> <canvas id="FS_wheel"></canvas> <!-- width="1000" height="1000" --> <div class="FS_wheel-overlay__center-button " onmousedown="FGF_wheel_fightButton();"></div> <div class="FS_wheel-stats"> <table> </table> </div> </div> <div class="FS_top"> <!-- main fight --> <div class="FS_top__scene FS_shadow"> <!--img src="https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/7104657277/0893392260.webp"--> </div> <div class="FS_top__scene op-tag FS_shadow"> <!--img src="https://2.img-dpreview.com/files/p/TS1200x900~sample_galleries/7104657277/7046303801.webp"--> </div> </div> <div class="FS_middle"> <div class="FS_middle__dial FS_shadow"> <div></div> <img src=""> </div> <div class="FS_middle__current-move FS_shadow" onclick="FGF_wheel_appearOverlay();"> <img src="./ressources/maingui/sexuals/beginning.webp"> </div> <div class="FS_middle__dial op-tag FS_shadow"> <img src=""> <div></div> </div> </div> <div class="FS_bottom"> <div class="FS_bottom__mc"> <img class="FS_shadow" src=""> <div>George</div> </div> <div class="FS_bottom__progress"> <div class="FS_bottom__progress__mc"> <div class="FS_bottom__progress__bar"> <div class="FS_bottom__progress__bar-start"></div> <div class="FS_bottom__progress__bar-end"> <img src="./ressources/icons/7E.webp"> </div> </div> <div class="FS_bottom__progress__overlay"> <img class="FS_shadow" src=""> </div> </div> <div class="FS_bottom__progress__state"> <!-- <div class="FS_shadow"><img src="./ressources/maingui/sexuals/beginning.webp"></div> --> <!-- --> </div> <div class="FS_bottom__progress__op"> <div class="FS_bottom__progress__bar FS_op-color"> <div class="FS_bottom__progress__bar-start FS_op-color"></div> <div class="FS_bottom__progress__bar-end op-tag FS_op-color"> <img src="./ressources/icons/7E.webp"> </div> </div> <div class="FS_bottom__progress__overlay op-tag"> <img class="FS_shadow" src=""> </div> </div> </div> <div class="FS_bottom__op"> <img class="FS_shadow" src=""> <div>Name here yup</div> </div> </div> </div> <</nobr>>\ <style> body { /*overflow: hidden; /*MAYBEE*/ } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } .passage{ user-select: none; /*font-family: 'Century Gothic', sans-serif; /*MAYBEE*/ color: white; /*MAYBEE*/ font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; } </style>\ <script> /*FGF_enterFight("CL1", {isPassiveFight: true}); // outside Twine testing*/ (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { FGF_reloadFight(); } })(); </script>\
<<nobr>> <div class="TGS_exit">EXIT</div> <div class="TGS_background"> <!-- img src="/ressources/backgrounds/1SC3.webp" / --> </div> <div class="TGS_container"> <div class="left"> <div class="inventoryCont"> <div class="inventoryItems"><!-- js --></div> </div> </div> <div class="middle"> <div class="itemSlot"></div> <img src="./ressources/maingui/ui/giftBox.webp"> <div class="itemSlotButton">GIVE</div> </div> <div class="right"> <div class="TGS_meterCont"> <div class="left"> <div class="nextPhase"><img src="./ressources/maingui/sexuals/tease.webp"></div> <div class="meter"> <div class="meterCurrentCont"> <div class="meterCurrent"> </div> </div> <div class="meterSectionsCont"> <!-- js --> <!-- ex: <div class="meterSection" style="bottom: 40%">5<line></line></div> --> </div> </div> <div class="currentPhase"><img src="./ressources/maingui/sexuals/beginning.webp"></div> </div> <div class="right"> <img src="./ressources/maingui/attributes/trust_icon.webp"> <qty>10 ?</qty> </div> </div> </div> </div> <div class="TGS_contentCont"> <div class="TGS_content"> <img src="./ressources/scenes/ETR1.webp"> <text>Lorem ipsum dolor sit amet consectetur </text> </div> <div class="exit">EXIT</div> </div> <</nobr>>\ <style> #story { margin-top: 0; margin-right: 0; margin-bottom: 0; /*margin-left: calc(26vh + 2.5em);*/ margin-left: 26vh; height: 100vh; font-size: 1.75vh; } #story * { box-sizing: border-box; } #ui-bar.stowed { left: -26vh; } #ui-bar.stowed~#story { /* margin-left: 2.5em; */ margin-left: 0; } #passages { margin: 0; height: 100%; width: 100%; max-width: 100%; } .passage { height: 100%; width: 100%; overflow: hidden; font-size: 1.25vh; } .passage * { box-sizing: border-box; } .TGS_exit { position: absolute; z-index: 5; top: 2vh; right: 21vh; font-size: 2em; min-width: 7em; text-align: center; border-radius: 0.4em; background-color: rgba(0, 0, 0, 0.7); border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0 0 1vh rgba(255, 0, 0, 0.4), 0 0 1.5vh rgba(255, 0, 0, 0.4), 0 0 2vh rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vh rgba(255, 0, 0, 0.4), 0 0 0.5vh rgba(255, 0, 0, 0.4), 0 0 1vh rgba(255, 0, 0, 0.4); cursor: pointer; transition: transform 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease; } .TGS_exit:hover { transform: scale(1.05); box-shadow: inset 0 0 0.5vh rgba(255, 0, 0, 0.6), 0 0 0.5vh rgba(255, 0, 0, 0.6), 0 0 1vh rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vh rgba(255, 0, 0, 0.6), 0 0 1.5vh rgba(255, 0, 0, 0.6), 0 0 2vh rgba(255, 0, 0, 0.6); } .TGS_background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; justify-content: center; align-items: center; overflow: hidden; } .TGS_background > img, .TGS_background > video{ height: 100%; width: 100%; object-fit: cover; } .TGS_container { display: flex; justify-content: space-between; align-items: center; padding-left: 2.5em; /* idk a better way to do this */ width: 100%; height: 100%; font-size: 1.25vh; font-family: 'Century Gothic', sans-serif; } .TGS_container > .left { /* inventory */ position: relative; z-index: 1; flex: 1; height: 100%; padding: 1em; display: flex; align-items: center; justify-content: center; } .TGS_container > .left > .inventoryCont { height: 50%; aspect-ratio: 1; filter: drop-shadow(0 0 0.5em #ffffff); } .TGS_container > .left > .inventoryCont > .inventoryTitle { background-color: rgba(0, 0, 0, 0.265); border: solid 0.1em #000000; border-radius: 0.7em; } .TGS_container > .left > .inventoryCont > .inventoryItems { background-color: rgba(0, 0, 0, 0.265); border: solid 0.1em #000000; border-radius: 0.7em; width: 100%; aspect-ratio: 1; display: flex; flex-wrap: wrap; align-content: flex-start; overflow-Y: auto; scrollbar-width: thin; } .TGS_container > .middle { /* item gift slot */ position: relative; z-index: 1; width: 23vh; min-width: 10vh; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .TGS_container > .middle > img { position: absolute; z-index: -1; width: 100%; margin-top: -30%; filter: drop-shadow(0 0 1em #000000) drop-shadow(0 0 1em #000000) ; } .TGS_container > .middle > .itemSlot { position: relative; width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse, rgba(00, 00, 00, 0.7), rgba(0, 0, 0, 0) 70%); filter: drop-shadow(0 0 0.5em #ffffff); } .TGS_container > .middle > .itemSlot > img { width: 60%; animation: TGS_container_img_animation 0.7s ease-in forwards; } @keyframes TGS_container_img_animation { from {opacity: 0} to {opacity: 1} } .TGS_container > .middle > .itemSlotButton { position: absolute; z-index: 1; font-size: 1.4em; font-weight: bold; top: 65%; min-width: 100%; padding: 0.5em 0; background-color: rgba(0, 0, 0, 0.5); border: solid 0.05em #000000; border-radius: 0.7em; text-align: center; cursor: pointer; filter: drop-shadow(0 0 0.5em #ffffff); transition: transform 0.2s ease; } .TGS_container > .middle > .itemSlotButton:hover { transform: scale(1.05); } .TGS_container > .right { /* meter */ position : relative; z-index: 0; flex: 1; max-width: 80vh; height: 100%; } .TGS_meterCont{ position: relative; margin: 0 auto; height: 100%; max-width: 40vh; display: flex; align-items: center; justify-content: center; } .TGS_meterCont > .left { height: 100%; width: 10vh; margin-left: 5vh; /* for section indicators */ display: flex; flex-direction: column; justify-content: center; } .TGS_meterCont > .left > .meter{ position: relative; height: 60%; width: 100%; /* background-image: linear-gradient(to top, #C22727 30%, rgba(0, 0, 0, 0.5) 30%); */ border: solid 0.3em #000000; border-radius: 0.7em; margin: 1em 0; } .TGS_meterCont > .left > .meter > .meterCurrentCont { position: relative; width: 100%; height: 100%; border-radius: 0.4em; /* 0.7 - 0.3 */ overflow: hidden; } .TGS_meterCont > .left > .meter > .meterCurrentCont > .meterCurrent { position: absolute; width: 100%; height: 100%; left: 0; top: 100%; /* 100 is empty, 0 is full */ background-color: #C22727; transition: top 0.7s ease; } .TGS_meterCont > .left > .meter > .meterSectionsCont { position: absolute; width: 50%; height: 100%; top: 0; right: 100%; } .TGS_meterCont > .left > .meter > .meterSectionsCont > .meterSection { position: absolute; width: 100%; height: 0; display: flex; align-items: center; justify-content: flex-end; font-weight: bold; filter: drop-shadow(0 0 0.2em #000000) drop-shadow(0 0 0.2em #000000) drop-shadow(0 0 0.3em #000000) drop-shadow(0 0 0.5em #000000); } .TGS_meterCont > .left > .meter > .meterSectionsCont > .meterSection > line { margin: 0 0.5em; width: 1em; height: 2px; background-color: #ffffff; } .TGS_meterCont > .left > .nextPhase, .TGS_meterCont > .left > .currentPhase { width: 100%; aspect-ratio: 1; background-color: rgba(0, 0, 0, 0.8); border: solid 0.3em #000000; border-radius: 50%; overflow: clip; display: flex; align-items: center; justify-content: center; } .TGS_meterCont > .left > .nextPhase > img, .TGS_meterCont > .left > .currentPhase > img { width: 80%; aspect-ratio: 1; /* border-radius: 50%; */ } .TGS_meterCont > .right { height: 100%; width: 20vh; display: flex; flex-direction: column; align-items: center; justify-content: center; filter: drop-shadow(0 0 0.5em #000000) drop-shadow(0 0 0.5em #000000) drop-shadow(0 0 0.5em #000000); } .TGS_meterCont > .right > img { width: 80%; aspect-ratio: 1; } .TGS_meterCont > .right > qty { font-size: 1.5em; margin: 0.5em; font-weight: bold; color: #ffffff; } .TGS_contentCont { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; --TGV_clr: #7a0808; background-color: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .TGS_contentCont > .TGS_content { height: 90vh; aspect-ratio: 1.3; max-width: 100%; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0 0 1vh rgba(255, 0, 0, 0.4), 0 0 1.5vh rgba(255, 0, 0, 0.4), 0 0 2vh rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vh rgba(255, 0, 0, 0.4), 0 0 0.5vh rgba(255, 0, 0, 0.4), 0 0 1vh rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.7); border-radius: 2em; padding: 1em; display: flex; flex-direction: column; } .TGS_contentCont > .TGS_content > img { width: 100%; height: 0; /* overcomed by flex */ flex: 1; object-fit: contain; filter: drop-shadow(0 3px 0 var(--TGV_clr)) drop-shadow(0 -3px 0 var(--TGV_clr)) drop-shadow(3px 0 0 var(--TGV_clr)) drop-shadow(-3px 0 0 var(--TGV_clr)) drop-shadow(0 0 1vh var(--TGV_clr)) drop-shadow(0 0 1.5vh var(--TGV_clr)); } .TGS_contentCont > .TGS_content > text { /* height: 30%; */ margin-top: 0.5em; min-height: 15%; max-height: 30%; width: 100%; font-size: 2em; border-top: solid 0.1em var(--TGV_clr); padding: 0.3em; overflow: auto; scrollbar-width: thin; } .TGS_contentCont > .exit { font-size: 2em; font-weight: bold; margin: 0.3em; padding: 0.5em 1em; min-width: 10em; text-align: center; background-color: rgba(0, 0, 0, 0.5); border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); border-radius: 0.7em; cursor: pointer; pointer-events: auto; transition: transform 0.2s ease, text-shadow 0.2s ease, box-shadow 0.2s ease; } .TGS_contentCont > .exit:hover { transform: scale(1.05); box-shadow: inset 0 0 0.5vh rgba(255, 0, 0, 0.6), 0 0 0.5vh rgba(255, 0, 0, 0.6), 0 0 1vh rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vh rgba(255, 0, 0, 0.6), 0 0 1.5vh rgba(255, 0, 0, 0.6), 0 0 2vh rgba(255, 0, 0, 0.6); } </style>\ <script> function main_trustGame() { // main call // Local Variables let TGV_chosenItem = null; // obj of the chosen item in the inventory let TGV_characterSign = { angela: 'A', cherie: 'C', elfie: 'E', lana: 'L', gabbie: 'G', } let TGV_backgroundImgSSign = { angela: ['video', '2ACI.webm'], cherie: ['image', '1SC3.webp'], elfie: ['image', '1SE1.webp'], lana: ['image', '1SL.webp'], gabbie: ['video', '3AGI.webm'], } let TGV_progress = { //TODO, integrate this in the SCv xD beginning: { startValue: 0, endValue: 100, sections: { 0: {}, // Main scene 1, Tier 1 Items 10: {}, // Main scene 2, Tier 1 Items 20: {}, // Main scene 3, Tier 1 Items 30: {}, // Main scene 4, Tier 1 Items 40: {}, // Main scene 5, Tier 1 Items 50: {}, // Main scene 6, Tier 1 Items 60: {}, // Main scene 7, Tier 2 Items 70: {}, // Main scene 8, Tier 2 Items 80: {}, // Main scene 9, Tier 2 Items 100: {}, // Main scene 10, Tier 3 Items } }, tease: { startValue: 100, endValue: 250, sections: { 110: {}, // Main scene 11, Tier 3 Items 120: {}, // Main scene 12, Tier 3 Items 130: {}, // Main scene 13, Tier 3 Items 140: {}, // Main scene 14, Tier 3 Items 155: {}, // Main scene 15, Tier 3 Items 170: {}, // Main scene 16, Tier 4 Items 185: {}, // Main scene 17, Tier 4 Items 200: {}, // Main scene 18, Tier 4 Items 220: {}, // Main scene 19, Tier 4 Items 250: {}, // Main scene 20, Tier 5 Items } }, }; let TGV_content = { characters : { angela: { // (A) (T) accept: { // (A) 1: { // Tier 1 (1) //no default 0: { // Common (A) text: "A Grey Book, simple yet captivating. Every bit of knowledge is a gift. Thank you.", voice: "./ressources/sounds/ATA1A1.mp3", image: "./ressources/scenes/ATA1A1.webp", }, 1: { // Uncommon (B) text: "A Green Book, full of intriguing tales! I cherish this gift, thank you.", voice: "./ressources/sounds/ATA1B1.mp3", image: "./ressources/scenes/ATA1B1.webp", }, 2: { // Rare (C) text: "This Blue Book is a treasure. Its wisdom enlightens me. My sincerest thanks.", voice: "./ressources/sounds/ATA1C1.mp3", image: "./ressources/scenes/ATA1C1.webp", }, 3: { // Epic (D) text: "The Purple Book! Every page is a step closer to the truth. I'm deeply thankful.", voice: "./ressources/sounds/ATA1D1.mp3", image: "./ressources/scenes/ATA1D1.webp", }, 4: { // Legendary (E) text: "The Yellow Book, a beacon of ancient wisdom! Thank you for this honor.", voice: "./ressources/sounds/ATA1E1.mp3", image: "./ressources/scenes/ATA1E1.webp", }, 5: { // Mythical (F) text: "Ah, the Red Book! My heart swells with gratitude. Such knowledge is priceless.", voice: "./ressources/sounds/ATA1F1.mp3", image: "./ressources/scenes/ATA1F1.webp", }, }, // Tier 2 here. }, refuse: { // (R) default: { text: "I'm sorry, I can't accept this.", image: "./ressources/scenes/ATR1.webp", }, equipment: { // (E) text: "I'm afraid this equipment doesn't serve my purpose. Please, have it back.", voice: "./ressources/sounds/ATRE1.mp3" }, food: { // (F) text: "I appreciate the offer, but I'm not in the mood for food right now. Maybe later?", voice: "./ressources/sounds/ATRF1.mp3" }, material: { // (M) text: "Thank you, but this material isn't something I need. Perhaps hold onto it for now?", voice: "./ressources/sounds/ATRM1.mp3" }, type2: { // (W) Wrong gift //angela:{},//(B) Book gabbie: { // (F) Flower text: "I love these. I have a couple in the garden. you should give this one to someone else.", voice: "./ressources/sounds/ATRWF1.mp3" }, lana: { // (M) Machete text: "This must be a weapon. Frankly, I do not know how to use it, you better keep it for someone else.", voice: "./ressources/sounds/ATRWM1.mp3" }, cherie: { // (N) Necklace text: "That's a very precious gift! But I already have this necklace that I hold dear. You should give this one to someone else.", voice: "./ressources/sounds/ATRWN1.mp3" }, elfie: { // (T) Teddybear text: "This is a plushie right? Thank you, but I think that a young spirit would benefit more from it.", voice: "./ressources/sounds/ATRWT1.mp3" }, }, }, }, cherie : { // (C) accept: { // (A) 1: { // Tier 1 (1) 0: { // Common (A) text: "Oh, darling, even the simplest grey amulet from you means the world to me. Thank you.", voice: "./ressources/sounds/CTA1A1.mp3", image: "./ressources/scenes/CTA1A1.webp", }, 1: { // Uncommon (B) text: "A green amulet? How thoughtful of you, my dear. It's just as nurturing as your heart.", voice: "./ressources/sounds/CTA1B1.mp3", image: "./ressources/scenes/CTA1B1.webp", }, 2: { // Rare (C) text: "You've given me a blue amulet? This is incredibly rare, just like your kindness. I appreciate it deeply.", voice: "./ressources/sounds/CTA1C1.mp3", image: "./ressources/scenes/CTA1C1.webp", }, 3: { // Epic (D) text: "My, my, a purple amulet... It symbolizes such a deep connection. You've made me feel very cherished.", voice: "./ressources/sounds/CTA1D1.mp3", image: "./ressources/scenes/CTA1D1.webp", }, 4: { // Legendary (E) text: "The yellow amulet! It’s legendary... I’m overwhelmed by your generosity, my boy. This is a treasure, indeed.", voice: "./ressources/sounds/CTA1E1.mp3", image: "./ressources/scenes/CTA1E1.webp", }, 5: { // Mythical (F) text: "A mythical red amulet, really? It's as rare and beautiful as the love I have for you. I'm so honored, thank you.", voice: "./ressources/sounds/CTA1F1.mp3", image: "./ressources/scenes/CTA1F1.webp", }, }, // Tier 2 here. }, refuse: { // (R) default: { text: "I'm sorry, I can't accept this.", image: "./ressources/scenes/CTR1.webp", }, equipment: { // (E) text: "Oh, sweetie, why would I need such a piece of equipment? My place is here, making sure you're all safe and healthy. You keep it; you're the one braving the wilds.", voice: "./ressources/sounds/CTRE1.mp3" }, food: { // (F) text: "No thank you, dear. I'm not quite in the mood for that food right now. Why don't you keep it for yourself? You need your strength out there.", voice: "./ressources/sounds/CTRF1.mp3" }, material: { // (M) text: "Oh, darling, it's kind of you to offer, but I really don't need this material. Let's save it for when it's truly needed, alright?", voice: "./ressources/sounds/CTRM1.mp3" }, type2: { // (W) Wrong gift angela: { // (B) Book text: "That's kind of you sweetie but I don't have much time to read, perhaps it would be better fit for someone else. ", voice: "./ressources/sounds/CTRWB1.mp3" }, gabbie: { // (F) Flower text: "Wow, this flower is so beautiful. But you know, I'm afraid it would quickly wither under my care. You should give it to someone who is good at botanic.", voice: "./ressources/sounds/CTRWF1.mp3" }, lana: { // (M) Machete text: "Careful with this honey, this doesn't look safe. Lana would probably knows what to do with this weapon.", voice: "./ressources/sounds/CTRWM1.mp3" }, //cherie:{},//(N) Necklace elfie: { // (T) Teddybear text: "A teddy bear? That's cute! But I think that Elfie would take far better care of it.", voice: "./ressources/sounds/CTRWT1.mp3" }, }, }, }, elfie: { // (E) accept: { // (A) 1: { // Tier 1 (1) 0: { // Common (A) text: "A Grey Teddybear! It's so soft and cuddly. It makes me feel like I'm not alone on this adventure.", voice: "./ressources/sounds/ETA1A1.mp3", image: "./ressources/scenes/ETA1A1.webp", }, 1: { // Uncommon (B) text: "I love this Green Teddybear! Its playfulness is just what I needed. It's so cute!", voice: "./ressources/sounds/ETA1B1.mp3", image: "./ressources/scenes/ETA1B1.webp", }, 2: { // Rare (C) text: "This Blue Teddybear, with its lovely satin bow, is so comforting. It's like having a constant hug.", voice: "./ressources/sounds/ETA1C1.mp3", image: "./ressources/scenes/ETA1C1.webp", }, 3: { // Epic (D) text: "The velvet fur on this Purple Teddybear is so luxurious. It's like a little piece of magic in my hands!", voice: "./ressources/sounds/ETA1D1.mp3", image: "./ressources/scenes/ETA1D1.webp", }, 4: { // Legendary (E) text: "This Yellow Teddybear is like a ray of sunshine, a golden treasure just for me. Thank you so much!", voice: "./ressources/sounds/ETA1E1.mp3", image: "./ressources/scenes/ETA1E1.webp", }, 5: { // Mythical (F) text: "Oh wow, this Red Teddybear is absolutely magical! I can feel the courage surging within me already!", voice: "./ressources/sounds/ETA1F1.mp3", image: "./ressources/scenes/ETA1F1.webp", }, }, // Tier 2 here. }, refuse: { // (R) default: { text: "I'm sorry, I can't accept this.", image: "./ressources/scenes/ETR1.webp", }, equipment: { // (E) text: "Why would I need equipment? I'm not exactly going out fighting monsters or anything. I think this should go to someone who really needs it.", voice: "./ressources/sounds/ETRE1.mp3" }, food: { // (F) text: "Ugh, I really don't want to eat this. Can't we find something else? I'm just not in the mood for this.", voice: "./ressources/sounds/ETRF1.mp3" }, material: { // (M) text: "I appreciate it, but I don't really need this material. Maybe we should save it for when it's truly necessary.", voice: "./ressources/sounds/ETRM1.mp3" }, type2: { // (W) Wrong gift angela: { // (B) Book text: "A book? I love book! But this one doesn't seem to be my type, I'm not a big knowledge enthousiast.", voice: "./ressources/sounds/ETRWB1.mp3" }, gabbie: { // (F) Flower text: "Such a beautiful flower! But I have nowhere to put it, you should give it to someone else.", voice: "./ressources/sounds/ETRWF1.mp3" }, lana: { // (M) Machete text: "Is that a blade? Scary! That's Lana stuff, not mine.", voice: "./ressources/sounds/ETRWM1.mp3" }, cherie: { // (N) Necklace text: "Wow, so shiny! But I can't accept this gift, you should give it to Mom! ", voice: "./ressources/sounds/ETRWN1.mp3" }, //elfie:{},//(T) Teddybear }, }, }, gabbie: { // (G) accept: { // (A) 1: { // Tier 1 (1) 0: { // Common (A) text: "Even this Grey Flower has its own unique charm. It's a gentle reminder of the beauty that can be found in the most unexpected places.", voice: "./ressources/sounds/GTA1A1.mp3", image: "./ressources/scenes/GTA1A1.webp", }, 1: { // Uncommon (B) text: "Such a vibrant Green Flower! It's a refreshing splash of nature amid the desolate wastelands.", voice: "./ressources/sounds/GTA1B1.mp3", image: "./ressources/scenes/GTA1B1.webp", }, 2: { // Rare (C) text: "The Blue Flower's tranquil beauty is so calming. It truly is a rare treasure, just like the moments we share.", voice: "./ressources/sounds/GTA1C1.mp3", image: "./ressources/scenes/GTA1C1.webp", }, 3: { // Epic (D) text: "Oh, the fragrance of this Purple Flower is simply enchanting. It's mysterious, just like the world around us.", voice: "./ressources/sounds/GTA1D1.mp3", image: "./ressources/scenes/GTA1D1.webp", }, 4: { // Legendary (E) text: "This Yellow Flower is stunning, it's like holding a piece of the sun itself. You always know how to brighten my day.", voice: "./ressources/sounds/GTA1E1.mp3", image: "./ressources/scenes/GTA1E1.webp", }, 5: { // Mythical (F) text: "Wow, this Red Flower is incredible! I can feel the energy coursing through me just by holding it. Thank you so much!", voice: "./ressources/sounds/GTA1F1.mp3", image: "./ressources/scenes/GTA1F1.webp", }, }, // Tier 2 here. }, refuse: { // (R) default: { text: "I'm sorry, I can't accept this.", image: "./ressources/scenes/GTR1.webp", }, equipment: { // (E) text: "Why would I need this equipment? My survival skills have gotten me this far without it. Let's save it for when we really need it, okay?", voice: "./ressources/sounds/GTRE1.mp3" }, food: { // (F) text: "I'm not really in the mood for this kind of food right now. Maybe we could find something else?", voice: "./ressources/sounds/GTRF1.mp3" }, material: { // (M) text: "I don't really need this material right now, you should probably hang on to it or give it to someone who could make better use of it.", voice: "./ressources/sounds/GTRM1.mp3" }, type2: { // (W) Wrong gift angela: { // (B) Book text: "I must kindly refuse, this book would be more fit in the hand of someone who love to read. I am more the action type.", voice: "./ressources/sounds/GTRWB1.mp3" }, //gabbie:{},//(F) Flower lana: { // (M) Machete text: "A machete? Thank you but as I told you, I don't need any kind of weapon to defend myself.", voice: "./ressources/sounds/GTRWM1.mp3" }, cherie: { // (N) Necklace text: "This is a very beautiful piece of jewelry. But I think it would slow me down.", voice: "./ressources/sounds/GTRWN1.mp3" }, elfie: { // (T) Teddybear text: "A teddy bear? 10 year old me would have been so happy! But I wouldn't know what to do with it right now.", voice: "./ressources/sounds/GTRWT1.mp3" }, }, }, }, lana: { // (L) accept: { // (A) 1: { // Tier 1 (1) 0: { // Common (A) text: "A black machete? Simple and reliable, just like old times. Thanks.", voice: "./ressources/sounds/LTA1A1.mp3", image: "./ressources/scenes/LTA1A1.webp", }, 1: { // Uncommon (B) text: "A green machete, huh? Not bad at all, I appreciate it.", voice: "./ressources/sounds/LTA1B1.mp3", image: "./ressources/scenes/LTA1B1.webp", }, 2: { // Rare (C) text: "This blue machete is remarkable, and so is your thoughtfulness for giving it to me.", voice: "./ressources/sounds/LTA1C1.mp3", image: "./ressources/scenes/LTA1C1.webp", }, 3: { // Epic (D) text: "I can feel the power in this blade... Thank you, this means a lot to me.", voice: "./ressources/sounds/LTA1D1.mp3", image: "./ressources/scenes/LTA1D1.webp", }, 4: { // Legendary (E) text: "A yellow machete? It's definitely unique... such power... I'll give you that. Thanks.", voice: "./ressources/sounds/LTA1E1.mp3", image: "./ressources/scenes/LTA1E1.webp", }, 5: { // Mythical (F) text: "Wow, a red machete! It's fiery, just like my spirit. Thanks!", voice: "./ressources/sounds/LTA1F1.mp3", image: "./ressources/scenes/LTA1F1.webp", }, }, // Tier 2 here. }, refuse: { // (R) default: { text: "I'm sorry, I can't accept this.", image: "./ressources/scenes/LTR1.webp", }, equipment: { // (E) text: "Why would I need this? I can handle myself just fine without extra gear.", voice: "./ressources/sounds/LTRE1.mp3" }, food: { // (F) text: "I appreciate the offer, but I don't eat just to fill my stomach. That's not what I need right now.", voice: "./ressources/sounds/LTRF1.mp3" }, material: { // (M) text: "I don't need this. My focus is on survival, not collecting junk.", voice: "./ressources/sounds/LTRM1.mp3" }, type2: { // (W) Wrong gift angela: { // (B) Book text: "Yeah, thank you but no. I am not the reading type.", voice: "./ressources/sounds/LTRWB1.mp3" }, gabbie: { // (F) Flower text: "A flower? What do you expect me to do with this? You should give it to another girl.", voice: "./ressources/sounds/LTRWF1.mp3" }, //lana:{},//(M) Machete cherie: { // (N) Necklace text: "You should know that I never wear jewelry. But mom does, it should go to her.", voice: "./ressources/sounds/LTRWN1.mp3" }, elfie: { // (T) Teddybear text: "A teddy bear? Are you kidding me? That's something for Elfie, I am no child.", voice: "./ressources/sounds/LTRWT1.mp3" }, }, }, }, }, } let TGV_itemValue = { // trust value 1 : { // Tier 1 (1) 0: 1, // (A) Common 1: 2, // (B) Uncommon 2: 3, // (C) Rare 3: 5, // (D) Epic 4: 10, // (E) Legendary 5: 20, // (F) Mythical } } // Main Functions if(window.TGV_CurrentCharacter === undefined) { console.log("TGV_CurrentCharacter is undefined!!!", "set to default"); window.TGV_CurrentCharacter = 'elfie'; } function TGF_setBackground() { let background = document.querySelector('.TGS_background'); let backgroundSign = TGV_backgroundImgSSign[window.TGV_CurrentCharacter]; if (backgroundSign[0] === 'image') { let img = document.createElement('img'); img.src = `ressources/backgrounds/${backgroundSign[1]}`; background.appendChild(img); } else if (backgroundSign[0] === 'video') { let video = document.createElement('video'); video.src = `ressources/backgrounds/${backgroundSign[1]}`; video.autoplay = true; video.loop = true; video.muted = true; background.appendChild(video); } } function TGF_setExit() { let exit = document.querySelector('.TGS_exit'); exit.addEventListener('click', function() { window.exitTrustGame(); }); } // Inventory function TGF_inventory_updateItems() { let inventorySource = SugarCube.State.variables.inventory.items; let itemsArray = Object.values(inventorySource); // convert to array itemsArray = itemsArray.filter(item => item.qty > 0); // filter out qty = 0 items // Sort by tier itemsArray.sort((a, b) => { //ex: item.tier = 1, 2, 3, 4, 5 return a.tier - b.tier; }); // Sort by rarity itemsArray.sort((a, b) => { //ex: item.rarity = 'H', 0, 1, 2, 3, 4, 5, if (a.type2 !== "gift") return; // only sort gifts if (typeof a.rarity === 'string') return -1; // put string tier first return a.rarity - b.rarity; }); // Put gifts first itemsArray.sort((a, b) => { if (a.type2 === "gift") return -1; }); let inventoryItemsCont = document.querySelector('.TGS_container > .left .inventoryItems'); inventoryItemsCont.innerHTML = ""; // clear the inventory for (let i = 0; i < itemsArray.length; i++) { let item_div = TGF_inventory_createItem(itemsArray[i]); TGF_inventory_addItemEvent(itemsArray[i], item_div); inventoryItemsCont.appendChild(item_div); } } function TGF_inventory_createItem(item) { var item_div = document.createElement("item"); var item_icon = document.createElement("img"); item_icon.draggable = false; // disable dragging of the image var item_icon_desc = document.createElement("div"); var item_icon_qty = document.createElement("INVS_qty"); var item_icon_tier = document.createElement("INVS_tier"); let tier = item.tier; item_icon_tier.innerHTML = SugarCube.State.variables.illustration.tier[tier].name; item_icon.src = item.image; item_icon.classList.add("INVS_item_img"); item_div.classList.add("INVS_inventory_item_div"); item_icon_desc.classList.add("INVS_item_text"); item_icon_desc.innerHTML = item.name; item_icon_qty.innerHTML = num_abreviation(item.qty) item_div.appendChild(item_icon); item_div.appendChild(item_icon_desc); item_div.appendChild(item_icon_qty); item_div.appendChild(item_icon_tier); return item_div; } function TGF_inventory_addItemEvent(item, item_div) { item_div.addEventListener('click', function() { TGF_itemSlot_addItem(item); TGV_chosenItem = item; }); } // Item Slot function TGF_itemSlot_addItem(item) { TGF_itemSlot_removeItem(item); // remove previous item let itemSlot = document.querySelector('.TGS_container > .middle > .itemSlot'); let item_div = TGF_itemSlot_createItem(item); TGF_itemSlot_addItemEvent(item, item_div); itemSlot.appendChild(item_div); } function TGF_itemSlot_removeItem(item) { let itemSlot = document.querySelector('.TGS_container > .middle > .itemSlot'); itemSlot.innerHTML = ""; TGV_chosenItem = null; } function TGF_itemSlot_createItem(item) { var item_icon = document.createElement("img"); item_icon.draggable = false; // disable dragging of the image let tier = item.tier; item_icon.src = item.image; return item_icon; } function TGF_itemSlot_addItemEvent(item, item_div) { item_div.addEventListener('click', function() { TGF_itemSlot_removeItem(item); }); } // Meter function TGF_meter_updateMeter() { let meterCont = document.querySelector('.TGS_meterCont > .left'); let meter = meterCont.querySelector('.meter'); let meterSectionsCont = meter.querySelector('.meterSectionsCont'); let meterCurrent = meter.querySelector('.meterCurrentCont > .meterCurrent'); meterSectionsCont.innerHTML = ""; // clear the meter let progressKey = 'beginning'; // hardcoded for now. beginning, tease let progress = TGV_progress[progressKey]; let progressValue = SugarCube.State.variables.characters[window.TGV_CurrentCharacter].stats.trust; let progressMinValue = progress.startValue; let progressMaxValue = progress.endValue; let progressSections = progress.sections; let progressSectionsKeys = Object.keys(progressSections); // hahahaha, this is attrocious // create the meter sections for (let i = 0; i < progressSectionsKeys.length; i++) { let section = progressSections[progressSectionsKeys[i]]; let sectionValue = progressSectionsKeys[i]; let sectionValuePlacement = (sectionValue - progressMinValue) / (progressMaxValue - progressMinValue) * 100; // (value - min) / (max - min) * 100 let sectionDiv = TGF_meter_createSection(sectionValue, sectionValuePlacement); meterSectionsCont.appendChild(sectionDiv); } // update the meter background let progressValuePlacement = (progressValue - progressMinValue) / (progressMaxValue - progressMinValue) * 100; setTimeout(() => { if (!meterCurrent) return; meterCurrent.style.top = `${100 - progressValuePlacement}%`; }, 300); // update nextPhase and currentPhase let nextPhaseImg = meterCont.querySelector('.nextPhase > img'); let currentPhaseImg = meterCont.querySelector('.currentPhase > img'); let phasesData = SugarCube.State.variables.illustration.phase; let phasesDataKeys = Object.keys(phasesData); let currentPhaseIndex = phasesDataKeys.findIndex(key => key === progressKey); if (currentPhaseIndex === -1) { throw new Error("currentPhaseIndex is -1"); } else if (currentPhaseIndex === phasesDataKeys.length - 1) { console.warn("currentPhaseIndex is the last phase"); currentPhaseIndex -= 1; } let nextProgressKey = phasesDataKeys[currentPhaseIndex + 1]; currentPhaseImg.src = phasesData[progressKey].image; nextPhaseImg.src = phasesData[nextProgressKey].image; // update trust value let trustValue = document.querySelector('.TGS_meterCont > .right > qty'); trustValue.innerHTML = SugarCube.State.variables.characters[window.TGV_CurrentCharacter].stats.trust;; } function TGF_meter_createSection(sectionValue, sectionValuePlacement) { let sectionDiv = document.createElement('div'); sectionDiv.classList.add('meterSection'); sectionDiv.style.bottom = `${sectionValuePlacement}%`; sectionDiv.innerHTML = sectionValue; let line = document.createElement('line'); sectionDiv.appendChild(line); return sectionDiv; } // Item Slot Button function TGF_itemSlotButton_setup() { let itemSlotButton = document.querySelector('.TGS_container > .middle > .itemSlotButton'); itemSlotButton.addEventListener('click', function() { TGF_itemSlotButton_click(); }); } function TGF_itemSlotButton_click() { if (TGV_chosenItem === null) return; let item = TGV_chosenItem; if (item.qty <= 0) return; // fail safe TGF_itemGiven(item); } function TGF_itemGiven(item) { // this function will decide what content to display based on the item given let characterContent = TGV_content.characters[window.TGV_CurrentCharacter]; if (!characterContent) return; // fail safe let content = null; let defaultContent = characterContent.refuse.default; switch (item.type) { // equipment, food, material case 'equipment': { content = characterContent.refuse['equipment']; break; } case 'food': { content = characterContent.refuse['food']; break; } case 'material': { if (item.type2 === 'gift') { if (item.type3 === window.TGV_CurrentCharacter) { // character's gift let itemTier = item.tier; // ex: 1, 2, 3, 4, 5 let itemRarity = item.rarity; // ex: 0, 1, 2, 3, 4, 5 content = characterContent.accept[itemTier]?.[itemRarity]; // optional chaining TGF_consumeItem(item); break; } else { content = characterContent.refuse['type2'][item.type3]; // wrong gift break; } break; } content = characterContent.refuse['material']; //not a gift break; } } let combinedContent = { text: content?.text ?? defaultContent?.text, // optional chaining voice: content?.voice ?? defaultContent?.voice, image: content?.image ?? defaultContent?.image, } TGF_content_displayContent(combinedContent); } function TGF_consumeItem(item) { let value = TGV_itemValue[item.tier]?.[item.rarity]; if (value === undefined) { console.error("value is undefined"); return; } SugarCube.State.variables.characters[window.TGV_CurrentCharacter].stats.trust += value; item.qty -= 1; TGF_itemSlot_removeItem(); TGF_inventory_updateItems(); //TGF_meter_updateMeter(); //update on exit for cool effect } // Content function TGF_content_setup() { let contentCont = document.querySelector('.TGS_contentCont'); let exitButton = contentCont.querySelector('.exit'); exitButton.addEventListener('click', function() { TGF_content_exit(); }); } function TGF_content_displayContent(content) { let contentCont = document.querySelector('.TGS_contentCont'); let contentText = contentCont.querySelector('text'); let contentImage = contentCont.querySelector('img'); contentText.innerHTML = content.text; contentImage.src = content.image; window.playAudio("voice", content.voice); // src, type ("voice", "music", "sfx") contentCont.style.opacity = 1; contentCont.style.pointerEvents = 'all'; } function TGF_content_exit() { let contentCont = document.querySelector('.TGS_contentCont'); contentCont.style.opacity = 0; contentCont.style.pointerEvents = 'none'; window.stopAudio("voice"); TGF_meter_updateMeter(); // update meter on exit for cool effect } // main calls TGF_setBackground(); TGF_setExit(); TGF_inventory_updateItems(); // inventory initial update TGF_meter_updateMeter(); // meter initial update TGF_itemSlotButton_setup(); TGF_content_setup(); } (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { main_trustGame(); } })(); </script>\
<<nobr>> <<script>>playAudio("music", "wastelandsTheborder");<</script>> <<if $tutorial.tutoscavenging is 1>> <<goto "6B">> <</if>> <<set $tutorial.tutoscavenging to 1>> <body class="passage"> <div class="tutorial" id="tutorial"> <div class="map" id="map-section"> <div class="containerbox2"> <h1>Scavenging Game Tutorial</h1> <div class="spacerui"></div> <div class="textui"> Welcome to the Scavenging Game, an adventurous mini-game where your goal is to <u>collect valuable resources</u> while navigating through various levels. Each level is filled with chests containing metal and plastic that you can gather while progressing. <br> <br> The game features <u>six levels</u> spread across three different map. Be wary of the MAD Dummies that roam the maps. If you collide with one, you <u>could end up fighting</u>! Victory means you can continue your scavenging, but defeat will affect your virus radicaly. <br> <br> With each completed level, you'll have the opportunity to <u>claim your rewards or push forward</u> to increase your bounty. So, stay alert, strategize your moves, and happy scavenging! <br> <br> <img class="image-ui" style="position: relative; left: 2vh; border-radius: 1vh;" src="ressources/icons/13C29.webp" alt="Image 1"> </div> <div class="vertical-line"> <div class="side-button" onclick="showMap()"> <img class="sbimg" src="ressources/maingui/ui/description.webp" alt="Image 1"> <p class="button-text">Description</p> </div> <div class="side-button" onclick="showUIHelp()"> <img class="sbimg" src="ressources/maingui/ui/ui-eye.webp" alt="Image 1"> <p class="button-text">UI Help</p> </div> <div class="side-button" onclick="showMechanism()"> <img class="sbimg" src="ressources/maingui/ui/mechanism.webp" alt="Image 1"> <p class="button-text">Mechanism</p> </div> <div class="side-button" onclick="showGoals()"> <img class="sbimg" src="ressources/maingui/ui/exit.webp" alt="Image 1"> <p class="button-text">Goals</p> </div> </div> </div> </div> <div class="uihelp" id="uihelp-section"> <div class="containerbox2"> <h1>Scavenging Game Tutorial</h1> <div class="spacerui"></div> <div class="textui"> <img class="img-ui" style="width: 19vh; height: 6vh; border-radius: 1vh;" src="ressources/icons/13C20.webp"> <br> ➀ <b>Score</b>: There are three types of trees you can chop: small, medium, and large. Each tree icon varies in style and size to represent its type. <br> <br> <img class="img-ui" style="width: 15vh; height: 6vh; border-radius: 1vh;" src="ressources/icons/13C21.webp"> <br> ➁ <b>Level</b>: Located at the bottom-left of the screen, the level you're currently in is displayed on the screen. Progress through 6 levels, with escalating difficulty and rewards. <br> <br> <img class="img-ui" style="width: 6vh; height: 6vh; border: none;" src="ressources/icons/6B.webp"> <img class="img-ui" style="width: 6vh; height: 6vh; border: none;" src="ressources/icons/6E.webp"> <img class="img-ui" style="width: 6vh; height: 6vh; border: none;" src="ressources/icons/6C.webp"> <br> ➂ <b> Chests </b>: Watch for chest icons scattered throughout the levels. These contain the valuable resources you're after, metal and plastic. <br> <br> <img class="img-ui" style="width: 6vh; height: 6vh; border: none; border-radius: 50%;" src="ressources/icons/FWA.webp"> <br> ➃ <b>MAD Dummies</b>: Keep an eye out for the MAD Dummies that roam the map, they are looking to hinder your progress! </div> <div class="vertical-line"> <div class="side-button" onclick="showMap()"> <img class="sbimg" src="ressources/maingui/ui/description.webp" alt="Image 1"> <p class="button-text">Description</p> </div> <div class="side-button" onclick="showUIHelp()"> <img class="sbimg" src="ressources/maingui/ui/ui-eye.webp" alt="Image 1"> <p class="button-text">UI Help</p> </div> <div class="side-button" onclick="showMechanism()"> <img class="sbimg" src="ressources/maingui/ui/mechanism.webp" alt="Image 1"> <p class="button-text">Mechanism</p> </div> <div class="side-button" onclick="showGoals()"> <img class="sbimg" src="ressources/maingui/ui/exit.webp" alt="Image 1"> <p class="button-text">Goals</p> </div> </div> </div> </div> <div class="mechanism" id="mechanism-section"> <div class="containerbox2"> <h1>Scavenging Game Tutorial</h1> <div class="spacerui"></div> <div class="textui scavyone"> <b>Controls</b>: <br> Use the <u>arrow keys</u> to move your character around the map. Press the <u>spacebar</u> to pause or unpause the game. <br> <br> <img class="mech-ui" style="width: 15vh; border: none; position: relative; left: 23vh;" src="ressources/icons/13C22.webp"> <br> <b>Levels</b>: <br> There are six levels in total, starting at level 1, two MAD Dummies are trying to prevent you from collecting ressources. <br> 1 MAD Dummy is added for each level and each one go faster, making it harder to collect ressources. <br> After every level you can choose to claim your ressources or continue to the next level. <br> <img class="img-ui" style="width: 25vh; border: none; border-radius: 0.5vh; position: relative; left: 18vh;" src="ressources/icons/13C24.webp"> <br> <b>Score</b>: <br> The score is added when collecting chests. <br> It directly effects the amount of ressources you get when claiming your ressources. <br> Each level a popup will show you how much ressources you could get if choosing to claim. <br> <img class="img-ui" style="width: 20vh; border: none; border-radius: 1vh; position: relative; left: 20.5vh;" src="ressources/icons/13C23.webp"> <br> <b>Fights</b>: <br> When colliding with a MAD Dummy, a popup appears giving the choice to flee or fight the MAD Dummy. <br> Choosing to flee will result in a loosing the game and the collected ressources while choosing fight will start a fight against the MAD Dummy. <br> <br> <img class="img-ui" style="width: 25vh; border: none; border-radius: 0.5vh; position: relative; left: 18vh;" src="ressources/icons/13C25.webp"> <br> <br> If the fight is won, the MAD Dummy vanishes and the level continue. <br> Losing the fight will result in losing the game and the items in your inventory. <br> <br> <b>Chests</b>: <br> There are 3 types of chests: common, epic and legendary, each giving a different amount of score. Common chests give 500 score, epic chests give 1000 score and legendary chests give 1500 score. there are 3 chests per level. <br> <br> <img class="img-ui" style="width: 10vh; border: none; border-radius: 0.5vh; position: relative; left: 14vh;" src="ressources/icons/6B.webp"> <img class="img-ui" style="width: 10vh; border: none; border-radius: 0.5vh; position: relative; left: 15vh;" src="ressources/icons/6E.webp"> <img class="img-ui" style="width: 10vh; border: none; border-radius: 0.5vh; position: relative; left: 17vh;" src="ressources/icons/6C.webp"> </div> <div class="vertical-line"> <div class="side-button" onclick="showMap()"> <img class="sbimg" src="ressources/maingui/ui/description.webp" alt="Image 1"> <p class="button-text">Description</p> </div> <div class="side-button" onclick="showUIHelp()"> <img class="sbimg" src="ressources/maingui/ui/ui-eye.webp" alt="Image 1"> <p class="button-text">UI Help</p> </div> <div class="side-button" onclick="showMechanism()"> <img class="sbimg" src="ressources/maingui/ui/mechanism.webp" alt="Image 1"> <p class="button-text">Mechanism</p> </div> <div class="side-button" onclick="showGoals()"> <img class="sbimg" src="ressources/maingui/ui/exit.webp" alt="Image 1"> <p class="button-text">Goals</p> </div> </div> </div> </div> <div class="goals" id="goals-section"> <div class="containerbox2"> <h1>Scavenging Game Tutorial</h1> <div class="spacerui"></div> <div class="textui"> <b>Resource Gathering</b>: <br> The primary goal is to gather as much metal and plastic as possible. Which is achieved by surviving while collecting chests. <br> <br> <b>Strategic Gameplay</b>: <br> Some chests are placed in hard to reach areas, so you'll need to plan your route carefully to avoid the MAD Dummies and collect the chests. </div> <div class="vertical-line"> <div class="side-button" onclick="showMap()"> <img class="sbimg" src="ressources/maingui/ui/description.webp" alt="Image 1"> <p class="button-text">Description</p> </div> <div class="side-button" onclick="showUIHelp()"> <img class="sbimg" src="ressources/maingui/ui/ui-eye.webp" alt="Image 1"> <p class="button-text">UI Help</p> </div> <div class="side-button" onclick="showMechanism()"> <img class="sbimg" src="ressources/maingui/ui/mechanism.webp" alt="Image 1"> <p class="button-text">Mechanism</p> </div> <div class="side-button" onclick="showGoals()"> <img class="sbimg" src="ressources/maingui/ui/exit.webp" alt="Image 1"> <p class="button-text">Goals</p> </div> </div> </div> </div> <div class="enter-button" onclick="SugarCube.Engine.play('6B')">Understood</div> </div> <</nobr>>\ <style> body { background-image: url('ressources/backgrounds/3A.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; /*MAYBEE*/ color: white; /*MAYBEE*/ font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; } .tutorial { position: absolute; margin: auto; width: 48vw; display: block; } b { margin-top: 10%; } .icon1 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon2 { max-width: 65%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon3 { max-width: 70%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon4 { max-width: 70%; } .icon5 { max-width: 75%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .side-button:hover { background-color: #3d0101; } .scavyone{ font-size: 1.6vh; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { function openTuto() { document.getElementById("tutorial").style.display = "block"; } function showMap() { document.getElementById('map-section').style.display = 'block'; document.getElementById('uihelp-section').style.display = 'none'; document.getElementById('mechanism-section').style.display = 'none'; document.getElementById('goals-section').style.display = 'none'; } function showUIHelp() { document.getElementById('map-section').style.display = 'none'; document.getElementById('uihelp-section').style.display = 'block'; document.getElementById('mechanism-section').style.display = 'none'; document.getElementById('goals-section').style.display = 'none'; } function showMechanism() { document.getElementById('map-section').style.display = 'none'; document.getElementById('uihelp-section').style.display = 'none'; document.getElementById('mechanism-section').style.display = 'block'; document.getElementById('goals-section').style.display = 'none'; } function showGoals() { document.getElementById('map-section').style.display = 'none'; document.getElementById('uihelp-section').style.display = 'none'; document.getElementById('mechanism-section').style.display = 'none'; document.getElementById('goals-section').style.display = 'block'; } } </script>\
<<nobr>> <<script>> /* playAudio("music", "wastelandsTheborder"); */ stopAudio("music"); <</script>> <div class="treasure-counters" onclick="matchSize()"> <div class="treasure-counter"> <img src="ressources/icons/6B.webp" alt="Common Treasure"> <span id="common-counter">$scavengingGame.treasurecountercom </span> </div> <div class="treasure-counter"> <img src="ressources/icons/6E.webp" alt="Epic Treasure"> <span id="epic-counter">$scavengingGame.treasurecounterepi </span> </div> <div class="treasure-counter" onclick="matchSize()"> <img src="ressources/icons/6C.webp" alt="Legendary Treasure"> <span id="legendary-counter">$scavengingGame.treasurecounterleg </span> </div> </div> <div class="scavenging_container"> <div onclick="backButton();" id="scavenging_back_button">BACK</div> </div> <div id="pacman"> <canvas id="fakecanvas"></canvas> </div> <</nobr>>\ <style> body { background-image: url('ressources/backgrounds/3B.webp'); background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } .passage{ user-select: none; font-size: 1.75vh; line-height: normal; overflow: hidden; margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; background-repeat: no-repeat; background-size: auto 100%; background-position: center; } .treasure-counters { position: absolute; display: flex; justify-content: center; align-items: center; padding: 1vh; background-color: #eeae57; outline: 1vh solid #c55142; top: 5vh; font-weight: bold; border-radius: 2vh 2vh 0 0; } .treasure-counter { margin: 0 10px; text-align: center; } .treasure-counter img { width: 30px; /* Adjust size as needed */ height: auto; display: block; margin: 0 auto; margin-bottom: 1vh; } .treasure-counter span { color: #c55142; font-size: 1em; /* Adjust size as needed */ } #pacman { height: 80vh; border-radius: 5px; /*margin-top: 8vh;*/ display: flex; align-content: center; align-items: center; position: relative; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: center; } #pacman canvas { height: 100%; max-width: 70vw; position: absolute ; top: -2.5vh; outline: 1vh solid #c55142; color: #c55142; background-color: #ffb855; background-image: url('ressources/icons/scavengingtest.webp'); } #fakecanvas { position: absolute; z-index: 1; top: -2.5vh; outline: 1vh solid #c55142; color: #c55142; background-color: #ffb855; background-image: url('ressources/icons/scavengingtest.webp'); opacity: 0; transition: ease 1s; } .popup { position: absolute; top: 17vh; height: 30vh; display: flex; align-content: center; flex-direction: row; justify-content: center; align-items: flex-end; z-index: 2; border-radius: 2vh; user-select: none; background-image: none; opacity: 0; transition: ease 1s; font-weight: bold; } .buttonCLAIM { height: 80vh; width: 316.8px; background: linear-gradient(to left, rgba(78, 119, 87, 1) 0%, rgba(78, 119, 87, 1) 25%, rgba(0, 0, 0, 0) 100%); color: #c55142; text-shadow: 0 0 10px #ffb855, 0 0 10px #ffb855; font-size: 2vh; margin-top: 11.1vh; cursor: pointer; font-size: 3.5vh; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: all ease 0.5s; opacity: 0.5; margin-left: 0; } .buttonCLAIM:hover { opacity: 1; font-size: 4.5vh; } .buttonCONTINUE { height: 80vh; width: 316.8px; background: linear-gradient(to right, rgba(197, 81, 66, 1) 0%, rgba(197, 81, 66, 1) 25%, rgba(0, 0, 0, 0) 100%); color: #4e7757; text-shadow: 0 0 10px #ffb855, 0 0 10px #ffb855; margin-top: 11.1vh; cursor: pointer; font-size: 3.5vh; display: flex; outline align-content: center; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.5; transition: ease 1s; } .buttonCONTINUE:hover { opacity: 1; font-size: 4.5vh; } .popupText { width: 40vh; color: #4e7757; font-size: 2.5vh; margin-bottom: 2vh; margin-left: 1vh; margin-right: 1vh; text-align: center; position: absolute; font-style: bold; z-index: 5; top: -2vh; padding: 1vh; background-color:#eeae57; outline: 1vh solid #c55142; border-radius: 10px; pointer-events: none; } .fight { position: absolute; top: 17vh; width: 50vh; height: 30vh; display: flex; align-content: center; flex-direction: row; justify-content: center; align-items: flex-end; z-index: 1; border-radius: 2vh; user-select: none; background-image: none; opacity: 0; transition: all ease 1s; } .buttonFight { height: 80vh; width: 316.8px; background: linear-gradient(to right, rgba(197, 81, 66, 1) 0%, rgba(197, 81, 66, 1) 25%, rgba(0, 0, 0, 0) 100%); color: #4e7757; text-shadow: 0 0 10px #ffb855, 0 0 10px #ffb855; margin-top: 11.1vh; cursor: pointer; font-size: 3.5vh; display: flex; outline align-content: center; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.5; transition: ease 1s; } .buttonFight:hover { opacity: 1; font-size: 4.5vh; } .button { height: 6vh; width: 20vh; background-color: #eeae57; border: solid 0.5vh #c55142; color: #4e7757; border-radius: 1vh; padding-top: 0.2vh; padding: 1vh; margin-bottom: 2vh; margin-left: 1vh; cursor: pointer; font-size: 3vh; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: box-shadow, transform; transition-duration: 0.2s; transition-timing-function: ease-in-out; } .buttonFlee { height: 80vh; width: 316.8px; background: linear-gradient(to left, rgba(78, 119, 87, 1) 0%, rgba(78, 119, 87, 1) 25%, rgba(0, 0, 0, 0) 100%); color: #c55142; text-shadow: 0 0 10px #ffb855, 0 0 10px #ffb855; font-size: 2vh; margin-top: 11.1vh; cursor: pointer; font-size: 3.5vh; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: all ease 0.5s; opacity: 0.5; } .buttonFlee:hover { opacity: 1; font-size: 4.5vh; } #scavenging_back_button { height: 7vh; width: 22vh; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: #eeae57; border: solid 1vh #c55142; border-radius: 2vh; cursor: pointer; position: relative; left: 10vh; font-size: 4vh; color: #4e7757; font-weight: bold; } #scavenging_back_button:hover { transform: translate(0.3vh, -0.3vh); box-shadow: -0.5vh 0.5vh 0.5vh rgba(255, 255, 255, 0.5); } .scavenging_container { height: 10vh; width: 100%; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; } .rewards_container { height: 30vh; width: 670px; display: flex; align-content: center; flex-direction: row; justify-content: center; align-items: center; position: absolute; border-radius: 2vh; position: absolute; top: 17vh; z-index: 4; background-image: none; opacity: 0; transition: all ease 1s; } .rewards_text { height: 20%; width: 85%; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: center; font-size: 5vh; position: absolute; top: 3vh; color: #c55142; text-align: center; } .rewards_img { height: 50%; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: center; position: relative; top: 2vh; margin-left: 2vh; margin-right: 2vh; min-width: 18vh; margin: 2vh; } .rewards_counter { margin-top: 5vh; height: 10%; width: 200%; display: flex; align-content: center; flex-direction: column; justify-content: center; align-items: center; font-size: 6vh; position: absolute; color: #c55142; text-align: center; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { console.log("bruh") if (typeof SCAV_gameStateInit == 'undefined') { window.SCAV_gameStateInit = false; } var popupfade = document.getElementsByClassName("popup"); var fakecanvas = document.getElementById('fakecanvas'); //let ScavPassageEl = document.querySelector(".passage"); // 0.1.8b fix function preventEnterKey(event) { if (event.keyCode === KEY.ENTER) { // 13 is the keyCode for Enter event.preventDefault(); event.stopPropagation(); console.log('Enter key press prevented'); // for debugging } } window.updateCommonDisplay = function() { $('#common-counter').text(SugarCube.State.variables.scavengingGame.treasurecountercom); }; window.updateEpicDisplay = function() { $('#epic-counter').text(SugarCube.State.variables.scavengingGame.treasurecounterepi); }; window.updateLegendaryDisplay = function() { $('#legendary-counter').text(SugarCube.State.variables.scavengingGame.treasurecounterleg); }; if (!SCAV_gameStateInit) { console.log("bruh2") window.mapsArr = Object.keys(maps); window.randMap = mapsArr[Math.floor(Math.random() * mapsArr.length)]; /*var randMap = mapsArr[0];*/ window.NONE = 4, UP = 3, LEFT = 2, DOWN = 1, RIGHT = 11, WAITING = 5, PAUSE = 6, PLAYING = 7, COUNTDOWN = 8, EATEN_PAUSE = 9, DYING = 10, Pacman = {}; Pacman.FPS = 30; Pacman.Ghost = function (game, map, colour, ghostImageSrc) { // colour not used var position = null, direction = null, eatable = null, eaten = null, due = null, baseSpeed = 1.5; // default speed function getSpeed() { var currentLevel = game.getLevel(); // Use the getLevel method from game object var speed = 0; if (currentLevel == 1) { speed = baseSpeed; } else { // increase speed by 0.5 for each level speed = baseSpeed + (0.10 * (currentLevel - 1)); } return speed; } function getNewCoord(dir, current) { var speed = getSpeed(); // Retrieve dynamic speed based on level var xSpeed = (dir === LEFT && -speed || dir === RIGHT && speed || 0), ySpeed = (dir === DOWN && speed || dir === UP && -speed || 0); return { "x": addBounded(current.x, xSpeed), "y": addBounded(current.y, ySpeed) }; }; function addBounded(x1, x2) { var rem = x1 % 10, result = rem + x2; if (rem !== 0 && result > 10) { return x1 + (10 - rem); } else if (rem > 0 && result < 0) { return x1 - rem; } return x1 + x2; }; function isVunerable() { return eatable !== null; }; function isDangerous() { return eaten === null; }; function isHidden() { return eatable === null && eaten !== null; }; function getRandomDirection() { var moves = (direction === LEFT || direction === RIGHT) ? [UP, DOWN, direction] : [LEFT, RIGHT, direction]; if (Math.random() <= 0.05) { return oppositeDirection(direction); } // Shuffle the moves array to ensure randomness moves = moves.sort(() => Math.random() - 0.5); for (var i = 0; i < moves.length; i++) { var newDirection = moves[i]; var newPos = getNewCoord(newDirection, position); let y = pointToCoord(nextSquare(newPos.y, newDirection)); let x = pointToCoord(nextSquare(newPos.x, newDirection)); // Check if the new position is a safe zone for the user var currentBlock = map.block({ //find map coord with pointToCoord for x and y "y": y, "x": x }) if (currentBlock === Pacman.EXIT || currentBlock === Pacman.SAFE) { console.warn("safe zone found"); continue; } // If there's no wall in the new direction, return it if (map.isFloorSpace({ "y": y, "x": x })) { return newDirection; } } // If no other moves are available, allow a 180-degree turn return oppositeDirection(direction); } function reset() { eaten = null; eatable = null; if (maps[randMap].ghostsPosition[game.index]) { position = maps[randMap].ghostsPosition[game.index]; } else { position = maps[randMap].ghostsPosition[0]; } direction = getRandomDirection; due = getRandomDirection(); }; /*function resetghosts() { position = { "x": 90, "y": 80 }; };*/ function onWholeSquare(x) { return x % 10 === 0; }; function oppositeDirection(dir) { return dir === LEFT && RIGHT || dir === RIGHT && LEFT || dir === UP && DOWN || UP; }; function makeEatable() { direction = oppositeDirection(direction); eatable = game.getTick(); }; function eat() { eatable = null; eaten = game.getTick(); }; function pointToCoord(x) { return Math.round(x / 10); }; function nextSquare(x, dir) { var rem = x % 10; if (rem === 0) { return x; } else if (dir === RIGHT || dir === DOWN) { return x + (10 - rem); } else { return x - rem; } }; function onGridSquare(pos) { return onWholeSquare(pos.y) && onWholeSquare(pos.x); }; function secondsAgo(tick) { return (game.getTick() - tick) / Pacman.FPS; }; function getColour() { if (eatable) { if (secondsAgo(eatable) > 5) { return game.getTick() % 20 > 10 ? "#FFFFFF" : "#0000BB"; } else { return "#0000BB"; } } else if (eaten) { return "#222"; } return colour; }; var ghostImage = new Image(); ghostImage.src = ghostImageSrc; // Set the source to your image function draw(ctx) { var s = map.blockSize, top = (position.y / 10) * s, left = (position.x / 10) * s, centerX = left + s / 2, centerY = top + s / 2, radius = s / (maps[randMap].ghostSizeDivider); // Radius is half of the block size, so the diameter is 's' if (eatable && secondsAgo(eatable) > 8) { eatable = null; } if (eaten && secondsAgo(eaten) > 3) { eaten = null; } ctx.fillStyle = getColour(); ctx.beginPath(); // Draw the circular body of the ghost ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); // Clip to the circle ctx.save(); // Save the current context state ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); ctx.clip(); // Clip to the circle // Draw the image inside the circle if (ghostImage && ghostImage.complete) { // Check if the image is loaded // Center the image inside the circle var imageX = centerX - radius; // Adjust X position var imageY = centerY - radius; // Adjust Y position ctx.drawImage(ghostImage, imageX, imageY, radius * 2, radius * 2); } ctx.restore(); // Restore the context to its original state } function pane(pos) { if (pos.y === 100 && pos.x >= 190 && direction === RIGHT) { return { "y": 100, "x": -10 }; } if (pos.y === 100 && pos.x <= -10 && direction === LEFT) { return position = { "y": 100, "x": 190 }; } return false; }; /*function move(ctx) { var oldPos = position, var npos; if (due !== direction) { // Check if directions are opposite, same or different axis if (isOppositeDirection(due, direction)) { npos = getNewCoord(due, position); } else if (isOnSameAxis(due, direction)) { npos = getNewCoord(due, position); } else if (isOnDifferentAxis(due, direction)) { npos = getNewCoord(due, position); } // Check if new position is free if (npos && isSpaceFree(npos, due)) { direction = due; } } if (!npos) { npos = getNewCoord(direction, position); } // Original position check if (isWallSpace(npos, direction)) { due = getRandomDirection(); return move(ctx); } // Set to new position position = npos; // Update due direction due = getRandomDirection(); return { "new" : position, "old" : oldPos }; } // Helper functions function isOppositeDirection(dir1, dir2) { return (dir1 === LEFT && dir2 === RIGHT) || (dir1 === RIGHT && dir2 === LEFT) || (dir1 === UP && dir2 === DOWN) || (dir1 === DOWN && dir2 === UP); } function isOnSameAxis(dir1, dir2) { return (dir1 === LEFT || dir1 === RIGHT) && (dir2 === LEFT || dir2 === RIGHT) || (dir1 === UP || dir1 === DOWN) && (dir2 === UP || dir2 === DOWN); } function isOnDifferentAxis(dir1, dir2) { return !isOnSameAxis(dir1, dir2); } function isSpaceFree(pos, dir) { // Check map if space is free }*/ function move(ctx) { var speed = getSpeed(); var oldPos = position, onGrid = onGridSquare(position), npos = null; if (maps[randMap].teleport == "map3") { // if position is { x: 10, y: 20 } and direction is LEFT, teleport to { x: 190, y: 190 } direction RIGHT if (position.y == 20 && position.x == 10 && direction === LEFT) { position = { "y": 190, "x": 190 }; direction = LEFT; } } if (maps[randMap].teleport == "map1") { // if position is { x: 190, y: 190 } and direction is RIGHT, teleport to { x: 10, y: 20 } direction LEFT if (position.y == 90 && position.x == 0 && direction === RIGHT) { position = { "y": 90, "x": 180 }; direction = RIGHT; } } if (due !== direction) { npos = getNewCoord(due, position); if (onGrid && map.isFloorSpace({ "y": pointToCoord(nextSquare(npos.y, due)), "x": pointToCoord(nextSquare(npos.x, due)), })) { direction = due; } else { npos = null; } } if (npos === null) { npos = getNewCoord(direction, position); } if (onGrid && map.isWallSpace({ "y": pointToCoord(nextSquare(npos.y, direction)), "x": pointToCoord(nextSquare(npos.x, direction)) })) { due = getRandomDirection(); return move(ctx); } position = npos; var tmp = pane(position); if (tmp) { position = tmp; } due = getRandomDirection(); return { "new": position, "old": oldPos }; }; return { "eat": eat, "isVunerable": isVunerable, "isDangerous": isDangerous, "makeEatable": makeEatable, "reset": reset, "move": move, "draw": draw, getSpeed: getSpeed }; }; Pacman.User = function (game, map, userImageSrc) { var position = null, direction = null, eaten = null, due = null, score = 0, userImage = 'ressources/maingui/ui/mcicon2.webp', userImageSrc = userImage, keyMap = {}; keyMap[KEY.ARROW_LEFT] = LEFT; keyMap[KEY.ARROW_UP] = UP; keyMap[KEY.ARROW_RIGHT] = RIGHT; keyMap[KEY.ARROW_DOWN] = DOWN; function addScore(nScore) { score += nScore; console.warn("scoreADDED"); }; function theScore() { return score; }; function resetScore() { score = 0; }; function convertScore(type) { // 500 score = 2 metal, 1 plastic. var metal = Math.floor(score / 500) * 2; var plastic = Math.floor(score / 500); console.warn("scoreCONVERTED"); if (type == "metal") { return metal; } else if (type == "plastic") { return plastic; } } function initUser() { resetPosition(); score = 5; }; function drawScore(text, position) { ctx.fillStyle = "#c55142"; ctx.font = "bold 20px Century Gothic"; var width = ctx.measureText(text).width, x = ((map.width * map.blockSize) - width) / 2; ctx.fillText(text, x, (map.height * 10) + 8); }; function newLevel() { resetPosition(); eaten = 0; }; function resetPosition() { // Find the start position on the map for (var i = 0; i < map.height; i++) { for (var j = 0; j < map.width; j++) { if (map.block({ x: j, y: i }) === Pacman.START) { position = { x: j * 10, y: i * 10 }; direction = maps[randMap].startingDirection; due = maps[randMap].startingDirection; break; } } } }; function reset() { resetPosition(); }; function keyDown(e) { if (typeof keyMap[e.keyCode] !== "undefined") { due = keyMap[e.keyCode]; e.preventDefault(); e.stopPropagation(); return false; } return true; }; function getNewCoord(dir, current) { return { "x": current.x + (dir === LEFT && -2 || dir === RIGHT && 2 || 0), "y": current.y + (dir === DOWN && 2 || dir === UP && -2 || 0) }; }; function onWholeSquare(x) { return x % 10 === 0; }; function pointToCoord(x) { return Math.round(x / 10); }; function nextSquare(x, dir) { var rem = x % 10; if (rem === 0) { return x; } else if (dir === RIGHT || dir === DOWN) { return x + (10 - rem); } else { return x - rem; } }; function next(pos, dir) { return { "y": pointToCoord(nextSquare(pos.y, dir)), "x": pointToCoord(nextSquare(pos.x, dir)), }; }; function onGridSquare(pos) { return onWholeSquare(pos.y) && onWholeSquare(pos.x); }; function isOnSamePlane(due, dir) { return ((due === LEFT || due === RIGHT) && (dir === LEFT || dir === RIGHT)) || ((due === UP || due === DOWN) && (dir === UP || dir === DOWN)); }; function move(ctx) { var npos = null, nextWhole = null, oldPosition = position, block = null; if (due !== direction) { npos = getNewCoord(due, position); if (isOnSamePlane(due, direction) || (onGridSquare(position) && map.isFloorSpace(next(npos, due)))) { direction = due; } else { npos = null; } } if (npos === null) { npos = getNewCoord(direction, position); } if (onGridSquare(position) && map.isWallSpace(next(npos, direction))) { direction = NONE; } if (direction === NONE) { return { "new": position, "old": position }; } if (npos.y === 100 && npos.x >= 190 && direction === RIGHT) { game.completedLevel(); /*winDialog("YOU WON"); function winDialog(text) { ctx.fillStyle = "white"; ctx.font = "bold 20px Century Gothic"; var width = ctx.measureText(text).width, x = ((map.width * map.blockSize) - width) / 2; ctx.fillText(text, x, (map.height * 10) + 8); }*/ } if (npos.y === 100 && npos.x <= 0 && direction === LEFT) { npos.x = 0; } position = npos; nextWhole = next(position, direction); block = map.block(nextWhole); if (block === Pacman.EXIT) { game.completedLevel(); } if ((isMidSquare(position.y) || isMidSquare(position.x)) && block === Pacman.DOT || block === Pacman.TREASURE) { map.setBlock(nextWhole, Pacman.EMPTY); eaten += 1; if (block === Pacman.TREASURE) { game.eatenTREASURE(); } } return { "new": position, "old": oldPosition }; }; function isMidSquare(x) { var rem = x % 10; return rem > 3 || rem < 7; }; function calcAngle(dir, pos) { if (dir == RIGHT && (pos.x % 10 < 5)) { return { "start": 0.25, "end": 1.75, "direction": false }; } else if (dir === DOWN && (pos.y % 10 < 5)) { return { "start": 0.75, "end": 2.25, "direction": false }; } else if (dir === UP && (pos.y % 10 < 5)) { return { "start": 1.25, "end": 1.75, "direction": true }; } else if (dir === LEFT && (pos.x % 10 < 5)) { return { "start": 0.75, "end": 1.25, "direction": true }; } return { "start": 0, "end": 2, "direction": false }; }; /*function drawDead(ctx, amount) { var size = map.blockSize, half = size / 2, top = (position.y / 10) * s, left = (position.x / 10) * s, centerX = left + s / 2, centerY = top + s / 2, radius = s / (maps[randMap].ghostSizeDivider); // Radius is half of the block size, so the diameter is 's' if (amount >= 1) { return; } // this determines the color of the pacman when he dies ctx.fillStyle = "rgba(0,255,0,0)"; ctx.beginPath(); ctx.moveTo(((position.x / 10) * size) + half, ((position.y / 10) * size) + half); ctx.arc(((position.x / 10) * size) + half, ((position.y / 10) * size) + half, half, 0, Math.PI * 2 * amount, true); ctx.fill(); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); if (userImage && userImage.complete) { // Check if the image is loaded // Center the image inside the circle var imageX = centerX - radius; // Adjust X position var imageY = centerY - radius; // Adjust Y position ctx.drawImage(userImage, imageX, imageY, radius * 2, radius * 2); } };*/ userImage = new Image(); userImage.src = userImageSrc; function draw(ctx) { var s = map.blockSize, angle = calcAngle(direction, position), top = (position.y / 10) * s, left = (position.x / 10) * s, centerX = left + s / 2, centerY = top + s / 2, radius = s / maps[randMap].ghostSizeDivider; // Radius is half of the block size, so the diameter is 's' // this determines the color of the pacman ctx.fillStyle = "rgba(0,255,0,0)"; ctx.beginPath(); ctx.moveTo(((position.x / 10) * s) + s / 2, ((position.y / 10) * s) + s / 2); ctx.arc(centerX, centerY, radius, 0, Math.PI * 2); /*ctx.arc(((position.x / 10) * s) + s / 2, ((position.y / 10) * s) + s / 2, s / 2, Math.PI * angle.start, Math.PI * angle.end, angle.direction);*/ ctx.fill(); // Draw the image inside the circle if (userImage && userImage.complete) { // Check if the image is loaded // Center the image inside the circle var imageX = centerX - radius; // Adjust X position var imageY = centerY - radius; // Adjust Y position ctx.drawImage(userImage, imageX, imageY, radius * 2, radius * 2); } }; return { "score": score, "addScore": addScore, "theScore": theScore, "resetScore": resetScore, "convertScore": convertScore, "draw": draw, /*"drawDead": drawDead,*/ "keyDown": keyDown, "move": move, "newLevel": newLevel, "reset": reset, "resetPosition": resetPosition }; }; Pacman.Map = function (game, size) { var height = null, width = null, blockSize = size, TREASURESize = 0, map = null; var treasurePositions = []; function placeTreasures() { // Define the four possible positions for treasures var treasureType; if (game.getLevel() <= 2) { treasureType = 'common'; } else if (game.getLevel() <= 4) { treasureType = 'epic'; } else { treasureType = 'legendary'; } // Place the treasures on the map var possiblePositions = maps[randMap].treasurePositions; /*[ { x: 1, y: 1 }, { x: 17, y: 18 }, { x: 17, y: 20 }, { x: 17, y: 1 } ];*/ treasurePositions = possiblePositions.sort(function () { return 0.5 - Math.random(); }).slice(0, 3); // Place the treasure in the map treasurePositions.forEach(function (pos) { map[pos.y][pos.x] = Pacman.TREASURE; }); console.warn("treasuresPLACED"); } function possibleExits() { var possibleExits = maps[randMap].possibleExits; /*[ { x: 1, y: 1 }, { x: 17, y: 18 }, { x: 17, y: 20 }, { x: 17, y: 1 } ];*/ possibleExits = possibleExits.sort(function () { return 0.5 - Math.random(); }).slice(0, 1); // Place the Exit in the map possibleExits.forEach(function (pos) { map[pos.y][pos.x] = Pacman.EXIT; }); console.warn("exitsPLACED"); } function withinBounds(y, x) { return y >= 0 && y < height && x >= 0 && x < width; } function isWall(pos) { return withinBounds(pos.y, pos.x) && map[pos.y][pos.x] === Pacman.WALL; } function isFloorSpace(pos) { if (!withinBounds(pos.y, pos.x)) { return false; } var peice = map[pos.y][pos.x]; return peice === Pacman.EMPTY || peice === Pacman.DOT || peice === Pacman.TREASURE || peice === Pacman.EXIT || peice === Pacman.SAFE; } function drawWall(ctx) { var i, j, p, line; ctx.clearRect(0, 0, width * blockSize, height * blockSize); // this determines the color of the walls ctx.strokeStyle = "#4e7757"; ctx.lineWidth = blockSize / 8; ctx.lineCap = "round"; for (i = 0; i < Pacman.WALLS.length; i += 1) { line = Pacman.WALLS[i]; ctx.beginPath(); for (j = 0; j < line.length; j += 1) { p = line[j]; if (p.move) { ctx.moveTo(p.move[0] * blockSize, p.move[1] * blockSize); } else if (p.line) { ctx.lineTo(p.line[0] * blockSize, p.line[1] * blockSize); } else if (p.curve) { ctx.quadraticCurveTo(p.curve[0] * blockSize, p.curve[1] * blockSize, p.curve[2] * blockSize, p.curve[3] * blockSize); } } ctx.stroke(); } } function reset() { /*map = Pacman.MAP.clone();*/ map = deepCloneArray(maps[randMap].MAP); height = map.length; width = map[0].length; placeTreasures(); possibleExits(); }; function block(pos) { if (!withinBounds(pos.y, pos.x)) { return null; // or some other value indicating an invalid position } return map[pos.y][pos.x]; } function setBlock(pos, type) { map[pos.y][pos.x] = type; }; function getLevel() { return level; } function drawTREASUREs(ctx) { var treasureType; if (game.getLevel() <= 2) { treasureType = 'common'; } else if (game.getLevel() <= 4) { treasureType = 'epic'; } else { treasureType = 'legendary'; } var treasureImg = new Image(); treasureImg.src = Pacman.TREASURES[treasureType].imgSrc; treasurePositions.forEach(function (pos) { if (map[pos.y][pos.x] === Pacman.TREASURE) { ctx.drawImage(treasureImg, pos.x * blockSize, pos.y * blockSize, blockSize, blockSize); } }); }; // function that seperates the 3 treasures types function getTreasureType() { var level = game.getLevel(); // Get the current level var treasureType = null; if (level <= 2) { treasureType = "common"; } else if (level <= 4) { treasureType = "epic"; } else if (level <= 6) { treasureType = "legendary"; } return treasureType; treasureTypeImg = { common: { image: new Image(), /*src: 'ressources/icons/7B.webp'*/ src: './ressources/icons/7B.webp' }, epic: { image: new Image(), /*src: 'ressources/icons/7E.webp'*/ src: './ressources/icons/7E.webp' }, legendary: { image: new Image(), /*src: 'ressources/icons/7C.webp'*/ src: './ressources/icons/7C.webp' }, }; }; function draw(ctx) { var i, j, size = blockSize; // this determines the color of the background of the walls ctx.fillStyle = "transparent"; ctx.fillRect(0, 0, width * size, height * size); drawWall(ctx); for (i = 0; i < height; i += 1) { for (j = 0; j < width; j += 1) { drawBlock(i, j, ctx); } } }; function drawBlock(y, x, ctx) { var layout = map[y][x]; if (layout === Pacman.TREASURE) { return; } ctx.beginPath(); if (layout === Pacman.EMPTY || layout === Pacman.BLOCK || layout === Pacman.DOT || layout === Pacman.EXIT) { // this determines the color of the background of the empty blocks ctx.fillStyle = "transparent"; ctx.fillRect((x * blockSize), (y * blockSize), blockSize, blockSize); if (layout === Pacman.DOT) { // this determines the color of the DOTs ctx.fillStyle = "yellow"; ctx.fillRect((x * blockSize) + (blockSize / 2.5), (y * blockSize) + (blockSize / 2.5), blockSize / 6, blockSize / 6); } else if (layout === Pacman.EXIT) { // this determines the color of the EXIT ctx.fillStyle = "green"; ctx.fillRect((x * blockSize) + (blockSize / 2.5), (y * blockSize) + (blockSize / 2.5), blockSize / 3, blockSize / 3); } } ctx.closePath(); }; reset(); return { "draw": draw, "drawBlock": drawBlock, "drawTREASUREs": drawTREASUREs, "block": block, "setBlock": setBlock, "reset": reset, "isWallSpace": isWall, "isFloorSpace": isFloorSpace, "height": height, "width": width, "blockSize": blockSize, "getTreasureType": getTreasureType, }; }; Pacman.Audio = function (game) { var files = [], endEvents = [], progressEvents = [], playing = []; function load(name, path, cb) { var f = files[name] = document.createElement("audio"); progressEvents[name] = function (event) { progress(event, name, cb); }; f.addEventListener("canplaythrough", progressEvents[name], true); f.setAttribute("preload", "true"); f.setAttribute("autobuffer", "true"); f.setAttribute("src", path); f.pause(); }; function progress(event, name, callback) { if (event.loaded === event.total && typeof callback === "function") { callback(); files[name].removeEventListener("canplaythrough", progressEvents[name], true); } }; function disableSound() { for (var i = 0; i < playing.length; i++) { files[playing[i]].pause(); files[playing[i]].currentTime = 0; } playing = []; }; function ended(name) { var i, tmp = [], found = false; files[name].removeEventListener("ended", endEvents[name], true); for (i = 0; i < playing.length; i++) { if (!found && playing[i]) { found = true; } else { tmp.push(playing[i]); } } playing = tmp; }; function play(name) { if (!game.soundDisabled()) { endEvents[name] = function () { ended(name); }; playing.push(name); files[name].volume = SugarCube.State.variables.audio.volume.sfx; //bugfix audio scavenging files[name].addEventListener("ended", endEvents[name], true); files[name].play(); } }; function pause() { fadein(); for (var i = 0; i < playing.length; i++) { files[playing[i]].pause(); } }; function resume() { for (var i = 0; i < playing.length; i++) { files[playing[i]].play(); } }; return { "disableSound": disableSound, "load": load, "play": play, "pause": pause, "resume": resume }; }; window.PACMAN = (function () { var state = WAITING, audio = null, ghosts = [], // this determines the color of the ghosts ghostSpecs = ["rgba(0,255,0,0)", "rgba(0,255,0,0)", "rgba(0,255,0,0)", "rgba(0,255,0,0)", "rgba(0,255,0,0)", "rgba(0,255,0,0)", "rgba(0,255,0,0)", "rgba(0,255,0,0)"], /*ghostImage = ["ressources/icons/8.webp", "ressources/icons/9.webp", "ressources/icons/10.webp", "ressources/icons/11.webp", "ressources/icons/12.webp", "ressources/icons/16.webp", "ressources/icons/17.webp", "ressources/icons/18.webp"],*/ ghostImage = ["./ressources/icons/FWA.webp", "./ressources/icons/FWA.webp", "./ressources/icons/FWA.webp", "./ressources/icons/FWA.webp", "./ressources/icons/FWA.webp", "./ressources/icons/FWA.webp", "./ressources/icons/FWA.webp", "./ressources/icons/FWA.webp"], eatenCount = 0, level = 0, tick = 0, ghostPos, userPos, stateChanged = true, timerStart = null, lastTime = 0, ctx = null, timer = null, map = null, user = null, stored = null; var PopupManager = { popupElement: null, currentClass: '', // Keep track of the current class added to the popup init: function (parentElementId) { this.popupElement = document.createElement("div"); this.popupElement.setAttribute("id", "popup"); this.popupElement.classList.add("popup"); document.getElementById(parentElementId)?.appendChild(this.popupElement); }, show: function (content, buttons, additionalClass) { this.reset(); // Reset the popup and remove any additional classes this.popupElement.innerHTML = ""; // Clear existing content if (additionalClass) { this.popupElement.classList.add(additionalClass); this.currentClass = additionalClass; // Update the current class } var popupText = document.createElement("div"); popupText.classList.add("popupText"); popupText.textContent = content; this.popupElement?.appendChild(popupText); buttons.forEach(function (buttonInfo) { var button = document.createElement("div"); button.classList.add(buttonInfo.class); button.textContent = buttonInfo.text; button.addEventListener("click", buttonInfo.action); this.popupElement?.appendChild(button); }, this); }, hide: function () { this.reset(); // Reset the popup when hiding }, reset: function () { // Remove the current class if it's been set if (this.currentClass) { this.currentClass = ''; // Reset the current class tracker } } }; var ScavPassageEl = null; function deleteGhost(index) { ghosts.splice(index, 1); } function getLevel() { return level; } function getTick() { return tick; }; function getState() { return state; }; function dialog(text) { // this determines the color of the text ctx.fillStyle = "#c55142"; ctx.font = "bold 20px Century Gothic"; var width = ctx.measureText(text).width, x = ((map.width * map.blockSize) - width) / 2; ctx.fillText(text, x, (map.height * 10) + 0); } function soundDisabled() { return localStorage["soundDisabled"] === "true"; }; function startLevel() { fakecanvas.style.opacity = "0"; user.reset(); ghosts = []; // Clear existing ghosts array var numberOfGhosts = 2 + level - 1; // Start with 2 ghosts, add 1 for each level for (var i = 0; i < numberOfGhosts; i++) { var ghostColour = ghostSpecs[i % ghostSpecs.length]; // Repeat colors if necessary var ghostImageSrc = ghostImage[i % ghostImage.length]; // Repeat images if necessary var ghost = new Pacman.Ghost({ "getTick": getTick, "getLevel": getLevel, "index": i, }, map, ghostColour, ghostImageSrc); ghosts.push(ghost); } for (var i = 0; i < ghosts.length; i++) { ghosts[i].reset(); } /*setState(WAITING);*/ timerStart = tick; setState(COUNTDOWN); } function resumeLevel() { /*setState(WAITING);*/ timerStart = tick; setState(COUNTDOWN); } function startNewGame() { setState(WAITING); level = 1; user.reset(); map.reset(); map.draw(ctx); startLevel(); user.resetScore(); } function claimRewards() { fadeout(); var metal = user.convertScore("metal"); var plastic = user.convertScore("plastic"); //user.resetScore(); //return { metal: metal, plastic: plastic }; var realReturnMetal = modVariable("add", "item", "metal", metal) // add metal var realReturnPlastic = modVariable("add", "item", "plastic", plastic) // add plastic } function keyDown(e) { if (document.contains(ScavPassageEl) === false) { // 0.1.8b fix //document.addEventListener("keydown", keyDown, true); document.removeEventListener("keydown", keyDown); return; } if (e.keyCode === KEY.ENTER) { if (PACMAN.getState() === WAITING) { // Check if the state is WAITING startNewGame(); // Start a new game only if in WAITING state } } else if (e.keyCode === KEY.S) { audio.disableSound(); localStorage["soundDisabled"] = !soundDisabled(); } else if (e.keyCode === KEY.SPACEBAR && state === PAUSE) { audio.resume(); map.draw(ctx); setState(PLAYING); /* } else if (e.keyCode === KEY.SPACEBAR) { stored = state; setState(PAUSE); audio.pause(); map.draw(ctx); */ } else if (state !== PAUSE && state !== WAITING) { // Prevent direction keys from affecting the game when paused or waiting return user.keyDown(e); } return true; } function setState(nState) { state = nState; stateChanged = true; }; function collided(user, ghost) { return (Math.sqrt(Math.pow(ghost.x - user.x, 2) + Math.pow(ghost.y - user.y, 2))) < 10; }; function drawFooter() { ctx.clearRect(0, (map.height * map.blockSize), (map.width * map.blockSize), 30); var topLeft = (map.height * map.blockSize), textBase = topLeft + 17; // this determines the color of the footer ctx.fillStyle = "transparent"; ctx.fillRect(0, topLeft, (map.width * map.blockSize), 30); // this determines the color of the footer ctx.fillStyle = "black"; /*for (var i = 0, len = user.getreplaces(); i < len; i++) { // this determines the color of the replaces ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(150 + (25 * i) + map.blockSize / 2, (topLeft + 1) + map.blockSize / 2); ctx.arc(150 + (25 * i) + map.blockSize / 2, (topLeft + 1) + map.blockSize / 2, map.blockSize / 2, Math.PI * 0.25, Math.PI * 1.75, false); ctx.fill(); }*/ // this determines the color of the text //ctx.fillText("♪", 10, textBase); // this determines the color of the text ctx.fillStyle = "#c55142"; ctx.font = "bold 20px Century Gothic"; ctx.fillText("Level: " + level, 25, textBase); /*ctx.fillText("Rewards : " + user. (function rewards display) 100, textBase);*/ // draw score } function redrawBlock(pos) { map.drawBlock(Math.floor(pos.y / 10), Math.floor(pos.x / 10), ctx); // floor because we want to redraw the block the user is leaving map.drawBlock(Math.ceil(pos.y / 10), Math.ceil(pos.x / 10), ctx); // ceil because we want to redraw the block the user is entering } //redrawBlock but modded. redraw 9 blocks instead of 2 /*function redrawBlock(pos) { var leavingBlockPos = [Math.ceil(pos.y/10), Math.ceil(pos.x/10)]; var allAroundBlockPos = []; for (var i = -1; i < 2; i++) { for (var j = -1; j < 2; j++) { allAroundBlockPos.push([leavingBlockPos[0] + i, leavingBlockPos[1] + j]); } } //detect out of bounds // TODO allAroundBlockPos.push(leavingBlockPos); for (var i = 0; i < allAroundBlockPos.length; i++) { map.drawBlock(allAroundBlockPos[i][0], allAroundBlockPos[i][1], ctx); } }*/ function mainDraw() { var diff, u, i, len; ghostPos = []; for (i = 0, len = ghosts.length; i < len; i += 1) { ghostPos.push(ghosts[i].move(ctx)); } u = user.move(ctx); for (i = 0, len = ghosts.length; i < len; i += 1) { redrawBlock(ghostPos[i].old); } redrawBlock(u.old); for (i = 0, len = ghosts.length; i < len; i += 1) { ghosts[i].draw(ctx); } user.draw(ctx); userPos = u["new"]; // will serve for the collision (fights) /*for (i = 0, len = ghosts.length; i < len; i += 1) { if (collided(userPos, ghostPos[i]["new"])) { audio.play("die"); saveGameState(); setState(DYING); timerStart = tick; } } };*/ for (i = 0, len = ghosts.length; i < len; i += 1) { collisionInfo = collided(userPos, ghostPos[i]["new"]); if (collisionInfo) { audio.play("die"); setState(DYING); PACMAN.deleteGhost(i); fakecanvas.style.opacity = "1"; setTimeout(function () { popupFight(); }, 1000); timerStart = tick; console.log("collisionInfo", collisionInfo); // Save the collided ghost data in the gameState object SCAV_gameStateInit.collidedGhost = collisionInfo.ghost; break; // No need to keep checking after a collision is found } } }; function mainLoop() { var diff; if (state !== WAITING && state !== COUNTDOWN) { map.draw(ctx); } if (state !== PAUSE) { ++tick; } if (state === PAUSE) { for (var i = 0; i < ghosts.length; i++) { ghosts[i].draw(ctx); dialog("Press SPACEBAR to resume") } // Draw the player user.draw(ctx); } console.log(state); if (state === PLAYING) { mainDraw(); map.drawTREASUREs(ctx); } else if (state === WAITING && stateChanged) { stateChanged = false; map.draw(ctx); dialog("Press ENTER to start"); } else if (state === EATEN_PAUSE && (tick - timerStart) > (Pacman.FPS / 3)) { map.draw(ctx); setState(PLAYING); } else if (state === DYING) { if (tick - timerStart > (Pacman.FPS * 2)) { } else { redrawBlock(userPos); for (i = 0, len = ghosts.length; i < len; i += 1) { redrawBlock(ghostPos[i].old); ghostPos.push(ghosts[i].draw(ctx)); } /* user.drawDead(ctx, (tick - timerStart) / (Pacman.FPS * 2));*/ } } else if (state === COUNTDOWN) { diff = 5 + Math.floor((timerStart - tick) / Pacman.FPS); audio.play("start"); if (diff === 0) { map.draw(ctx); setState(PLAYING); } else { if (diff !== lastTime) { lastTime = diff; map.draw(ctx); dialog("Starting in: " + diff); } } } //dialog("--------------------------------------------------------"+state);-------------------- //map.draw(ctx); // redraw the map to make sure the TREASUREs are displayed above the ghosts and pacman (and not under) (not sure if it's the best way to do it) (but it works) (so it's fine) (I guess) (I hope) (I'm not sure) (I'm not) signed: the guy who wrote this comment: Balthazar Rouberol //how tf wrote that comment. //me when I was 14, I guess my english was better back then. I'm 17 now, and I'm french, so I'm sorry for my english. I'm not sure if you're the guy who wrote the comment, but if you are, I'm glad you read it. I hope you're doing well. Have a nice day. //i'm 30 now, and i'm french too. I'm glad you answered. I'm doing well, i hope you too. Have a nice day too. //i'm 74 now, i have crippling depression. You guys are lucky to be areplace. I hope you have a nice day. //i'm 100 now, i'm dead. I hope you have a nice day. //i'm 1000 now, i reincarnated as a karen. I hope you don't have a nice day. //can you sing your story for me please : balthazar rouberol drawFooter(); detectGamestateInit(); } function eatenTREASURE() { var treasureType; if (level <= 2) { treasureType = 'common'; SugarCube.State.variables.scavengingGame.treasurecountercom+=1; updateCommonDisplay(); } else if (level <= 4) { treasureType = 'epic'; SugarCube.State.variables.scavengingGame.treasurecounterepi+=1; updateEpicDisplay(); } else { treasureType = 'legendary'; SugarCube.State.variables.scavengingGame.treasurecounterleg+=1; updateLegendaryDisplay(); } audio.play("eatTREASURE"); timerStart = tick; eatenCount = 0; // Add score based on treasure type if user.addScore(Pacman.TREASURES[treasureType].score); } function completedLevel() { fakecanvas.style.opacity = "1"; if (level < 6) { setState(WAITING); level += 1; setTimeout(function () { popupRewards(); }, 1000); setTimeout(function () { popuplvlcomplete(); }, 4000); map.reset(); } else { setState(WAITING); SugarCube.State.variables.achievements.eventTrigger.scavengersSummit_1 = true; popupRewards(); if (SugarCube.State.variables.scavengingGame.treasurecountercom === 6 && SugarCube.State.variables.scavengingGame.treasurecounterepi === 6 && SugarCube.State.variables.scavengingGame.treasurecounterleg === 6) { SugarCube.State.variables.achievements.eventTrigger.scrapSavant_1 = true; } setTimeout(function () { popupGameEnd(); }, 2000); } //startLevel(); }; function popuplvlcomplete() { fakecanvas.style.opacity = "1"; setState(PAUSE); PopupManager.show("Level Complete! Would you like to claim your rewards or continue to the next level?", [ { text: "CLAIM", class: "buttonCLAIM", action: function () { fadeout(); PopupManager.hide(); claimRewards(); SugarCube.Engine.play('3A1'); window.SCAV_gameStateInit = false; // Logic for claiming rewards } }, { text: "NEXT LEVEL", class: "buttonCONTINUE", action: function () { fadeout(); user.newLevel(); startLevel(); // Logic for going to the next level } } ], "popup"); } function popupGameEnd() { fakecanvas.style.opacity = "1"; PopupManager.show("Congratulations! You have completed all levels! You can claim your rewards.", [ { text: "Claim", class: "buttonCLAIM", action: function () { fadeout(); PopupManager.hide(); claimRewards(); SugarCube.Engine.play('3A1'); window.SCAV_gameStateInit = false; } } ], "popup"); } function popupFight() { fakecanvas.style.opacity = "1"; fadein(); PopupManager.show("MAD Dummy has caught you!", [ { text: "FLEE", class: "buttonFlee", action: function () { fadeout(); PopupManager.hide(); startNewGame(); SugarCube.State.variables.scavengingGame.treasurecountercom=0; SugarCube.State.variables.scavengingGame.treasurecounterepi=0; SugarCube.State.variables.scavengingGame.treasurecounterleg=0; updateCommonDisplay(); updateEpicDisplay(); updateLegendaryDisplay(); } }, { text: "FIGHT", class: "buttonFight", action: function () { fadeout(); PopupManager.hide(); setState(PAUSE); /* SugarCube.Engine.play('FIGHT FWA scavenging'); */ FGF_enterFight("FWA", {winReturnPassage: "6B"}); } } ], "fight");//class added // Directly add another class to the popup element if it's accessible var fightElement = document.querySelector('.fight'); if (fightElement) { fightElement.classList.add('rewards_container'); } } function popupRewards() { fakecanvas.style.opacity = "1"; setState(PAUSE); fadein(); PopupManager.show("Potential rewards: ", [ { action: function () { PopupManager.hide(); // Logic for claiming rewards } } ], "rewards_container"); var metalText = document.createElement("div"); var metalImg = new Image(); metalImg.classList.add("rewards_img"); metalText.classList.add("rewards_counter"); metalText.textContent = user.convertScore("metal"); PopupManager.popupElement?.appendChild(metalText); PopupManager.popupElement?.appendChild(metalImg); metalImg.src = "./ressources/icons/I1MA2.webp"; metalText.style.position = "absolute"; metalText.style.left = "-9.2vh"; var plasticText = document.createElement("div"); var plasticImg = new Image(); plasticImg.classList.add("rewards_img"); plasticText.classList.add("rewards_counter"); plasticText.textContent = user.convertScore("plastic"); PopupManager.popupElement?.appendChild(plasticText); PopupManager.popupElement?.appendChild(plasticImg); plasticImg.src = "./ressources/icons/I1MA3.webp"; plasticText.style.position = "absolute"; plasticText.style.right = "-9.2vh"; } function keyPress(e) { if (state !== WAITING && state !== PAUSE) { e.preventDefault(); e.stopPropagation(); } }; function soft_init(wrapper, root) { var blockSize = 30; var canvas = document.createElement("canvas"); canvas.setAttribute("width", (blockSize * (maps[randMap].blockwidth)) + "px"); canvas.setAttribute("height", (blockSize * (maps[randMap].blockheight)) + 50 + "px"); fakecanvas.setAttribute("width", (blockSize * (maps[randMap].blockwidth)) + "px"); fakecanvas.setAttribute("height", (blockSize * (maps[randMap].blockheight)) + 50 + "px"); canvas.setAttribute("background-color", "black"); PopupManager.init("pacman"); //Bugfix: Now in soft init wrapper?.appendChild(canvas); ctx = canvas.getContext('2d'); ScavPassageEl = document.querySelector(".passage"); // 0.1.8b fix document.addEventListener("keydown", keyDown, true); } function hard_init(wrapper, root) { var i, len, ghost; //var blockSize = wrapper.offsetWidth / 28, var blockSize = 30; SugarCube.State.variables.scavengingGame.treasurecountercom=0; SugarCube.State.variables.scavengingGame.treasurecounterepi=0; SugarCube.State.variables.scavengingGame.treasurecounterleg=0; updateCommonDisplay(); updateEpicDisplay(); updateLegendaryDisplay(); audio = new Pacman.Audio({ "soundDisabled": soundDisabled }); map = new Pacman.Map( { "getTick": getTick, "getLevel": getLevel }, blockSize); user = new Pacman.User({ "completedLevel": completedLevel, "eatenTREASURE": eatenTREASURE }, map); for (let i = 0, len = ghostSpecs.length; i < len; i += 1) { ghost = new Pacman.Ghost({ "getTick": getTick, "getLevel": getLevel, "index": i, }, map, ghostSpecs[i], ghostImage[i]); ghosts.push(ghost); } map.draw(ctx); dialog("Loading ..."); //PopupManager.init("pacman"); //var extension = Modernizr.audio.ogg ? 'ogg' : 'mp3'; var extension = 'mp3'; //hard codded to that var audio_files = [ ["start", root + "audio/opening_song." + extension], ["die", root + "audio/die." + extension], ["eatghost", root + "audio/eatghost." + extension], ["eatTREASURE", root + "audio/eatpill." + extension], ["eating", root + "audio/eating.short." + extension], ["eating2", root + "audio/eating.short." + extension] ]; load(audio_files, function () { loaded(); }); }; function load(arr, callback) { if (arr.length === 0) { callback(); } else { var x = arr.pop(); audio.load(x[0], x[1], function () { load(arr, callback); }); //audio.volume = 0.1; //console.log("volume SET") } }; function loaded() { dialog("Press ENTER to start a New game"); //document.addEventListener("keydown", keyDown, true); timer = window.setInterval(mainLoop, 1000 / Pacman.FPS); //detect }; function detectGamestateInit() { if (!SCAV_gameStateInit) { //if false or undefined //stop the timer clearInterval(timer); } } return { //"init": init, "soft_init": soft_init, "hard_init": hard_init, "getLevel": getLevel, "getState": getState, "setState": setState, "deleteGhost": deleteGhost, }; }()); /* Human readable keyCode index */ var KEY = { 'BACKSPACE': 8, 'TAB': 9, 'NUM_PAD_CLEAR': 12, 'ENTER': 13, 'SHIFT': 16, 'CTRL': 17, 'ALT': 18, 'PAUSE': 19, 'CAPS_LOCK': 20, 'ESCAPE': 27, 'SPACEBAR': 32, 'PAGE_UP': 33, 'PAGE_DOWN': 34, 'END': 35, 'HOME': 36, 'ARROW_LEFT': 37, 'ARROW_UP': 38, 'ARROW_RIGHT': 39, 'ARROW_DOWN': 40, 'PRINT_SCREEN': 44, 'INSERT': 45, 'DELETE': 46, 'SEMICOLON': 59, 'WINDOWS_LEFT': 91, 'WINDOWS_RIGHT': 92, 'SELECT': 93, 'NUM_PAD_ASTERISK': 106, 'NUM_PAD_PLUS_SIGN': 107, 'NUM_PAD_HYPHEN-MINUS': 109, 'NUM_PAD_FULL_STOP': 110, 'NUM_PAD_SOLIDUS': 111, 'NUM_LOCK': 144, 'SCROLL_LOCK': 145, 'SEMICOLON': 186, 'EQUALS_SIGN': 187, 'COMMA': 188, 'HYPHEN-MINUS': 189, 'FULL_STOP': 190, 'SOLIDUS': 191, 'GRAVE_ACCENT': 192, 'LEFT_SQUARE_BRACKET': 219, 'REVERSE_SOLIDUS': 220, 'RIGHT_SQUARE_BRACKET': 221, 'APOSTROPHE': 222 }; (function () { /* 0 - 9 */ for (var i = 48; i <= 57; i++) { KEY['' + (i - 48)] = i; } /* A - Z */ for (i = 65; i <= 90; i++) { KEY['' + String.fromCharCode(i)] = i; } /* NUM_PAD_0 - NUM_PAD_9 */ for (i = 96; i <= 105; i++) { KEY['NUM_PAD_' + (i - 96)] = i; } /* F1 - F12 */ for (i = 112; i <= 123; i++) { KEY['F' + (i - 112 + 1)] = i; } })(); Pacman.WALL = 0; Pacman.DOT = 1; Pacman.EMPTY = 2; Pacman.BLOCK = 3; Pacman.TREASURE = 4; Pacman.EXIT = 5; Pacman.START = 6; Pacman.SAFE = 7; Pacman.TREASURES = { 'common': { 'name': 'Common', /*'imgSrc': 'ressources/icons/6B.webp',*/ 'imgSrc': './ressources/icons/6B.webp', 'score': 500 }, 'epic': { 'name': 'Epic', /*'imgSrc': 'ressources/icons/6E.webp',*/ 'imgSrc': './ressources/icons/6E.webp', 'score': 1500 }, 'legendary': { 'name': 'Legendary', /*'imgSrc': 'ressources/icons/6C.webp',*/ 'imgSrc': './ressources/icons/6C.webp', 'score': 3000 } } Pacman.MAP = maps[randMap].MAP; Pacman.WALLS = maps[randMap].WALLS; } $(function () { var backbutton = document.getElementById('scavenging_back_button'); var el = document.getElementById("pacman"); if (!SCAV_gameStateInit) { // Perform hard initialization on first run window.SCAV_gameStateInit = true; PACMAN.soft_init(el, "code/script/pacman-master/"); PACMAN.hard_init(el, "code/script/pacman-master/"); } else { // Perform soft initialization on subsequent passage changes (HTML) PACMAN.soft_init(el, "code/script/pacman-master/"); //PACMAN.soft_init(document.getElementById("pacman"), "code/script/pacman-master/"); } }); function backButton() { window.SCAV_gameStateInit = false; SugarCube.Engine.play("3A1"); } function deepCloneArray(arr) { return arr.map(item => Array.isArray(item) ? deepCloneArray(item) : item); } } function fadeout() { document.removeEventListener('keydown', preventEnterKey); for (let i = 0; i < popupfade.length; i++) { popupfade[i].style.opacity = "0"; popupfade[i].style.pointerEvents = "none"; } } // Attach the event listener document.addEventListener('keydown', preventEnterKey); function fadein() { // Attach the event listener when the fadein function is calle for (let i = 0; i < popupfade.length; i++) { popupfade[i].style.opacity = "1"; popupfade[i].style.pointerEvents = "auto"; } } window.onload = function() { var canvas = document.querySelector("canvas"); if (canvas) { var ctx = canvas.getContext("2d"); // Save the current canvas content var savedImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); // Resize the canvas var newWidth = 400; // Set this to your desired new width var newHeight = 200; // Set this to your desired new height canvas.width = newWidth; canvas.height = newHeight; // Put the saved content back onto the canvas ctx.putImageData(savedImageData, 0, 0); } else { console.error('Canvas element not found!'); } } </script>\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } .buttons { font-size: 2vh; } </style>\ <<nobr>> <div class="DIAS_container"> </div> <</nobr>>\ <script> var EGV_gameId; var EGV_currentSection; var EGV_sectionData; window.EGF_optionsClick = function(n) { EGV_currentSection = gameData.exploration.gameFlow[EGV_currentSection][n]; /* eg: A1 */ nextPartOfDay(); EGF_updateContent(); } window.EGF_exitClick = function() { nextPartOfDay(); let list = SugarCube.State.variables.exploreGame.list; let index = EGV_currentSection.substring(1) * 1 - 1; if (Number.isInteger(index) !== true) return; if (list[EGV_gameId][index] !== true) { giveRewards(EGV_sectionData.rewards); list[EGV_gameId][index] = true; if (EGV_sectionData.noExitPassage !== true) { /* some end have engine.play in the rewards */ SugarCube.Engine.play(SugarCube.State.variables.exploreGame.lastPassage); } } else { SugarCube.Engine.play(SugarCube.State.variables.exploreGame.lastPassage); } } function updateEndRewardData() { let sectionsKeys = Object.keys(gameData.exploration.list[EGV_gameId].sections) let list = SugarCube.State.variables.exploreGame.list; if (list[EGV_gameId] === undefined) { list[EGV_gameId] = []; } for (let i = 0; i < sectionsKeys.length; i++) { if (sectionsKeys[i].startsWith("E") === false) continue; /* eg: "E8" */ let index = sectionsKeys[i].substring(1) * 1 - 1; /* "E8" -> 7 */ if (list[EGV_gameId][index] === undefined) { list[EGV_gameId][index] = false; } } } function EGF_updateContent() { EGV_sectionData = gameData.exploration.list[EGV_gameId]?.sections[EGV_currentSection]; let DIAS_container = document.querySelector('.DIAS_container'); if (!DIAS_container) return; DIAS_container.innerHTML = ""; let dialogData = []; dialogData.push({ type: "text", content: [ ["para", EGV_sectionData.desc], ], }); dialogData.push({ type: "image", src: `./ressources/minigames/${EGV_gameId}${EGV_currentSection}.webp`, /* ERROR PRONE, 👉😜👈 */ /* most accurate shit XD -crystallia */ }); let randArr = Math.random() < 0.5 ? [0,1] : [1,0]; if (EGV_sectionData.choice1 !== undefined) { let choices = [ [`${EGV_sectionData.choice1}`, "EGF_optionsClick(0)"], [`${EGV_sectionData.choice2}`, "EGF_optionsClick(1)"], ]; dialogData.push({ type: "button", content: [ // button text, button onclick //[`${EGV_sectionData.choice1}`, "EGF_optionsClick(0)"], //[`${EGV_sectionData.choice2}`, "EGF_optionsClick(1)"], choices[randArr[0]], choices[randArr[1]], ], }); } else { dialogData.push({ type: "button", content: [ // button text, button onclick [`${EGV_sectionData.exit}`, "EGF_exitClick()"], ], }); } DIAS_container.innerHTML = DIAF_buildDialogue(dialogData); setTimeout(() => { //hack DIAF_initDialogPassage(); }, 100); } (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { EGV_gameId = SugarCube.State.variables.exploreGame.gameId; EGV_currentSection = Object.keys(gameData.exploration.gameFlow)[0]; EGF_updateContent(); updateEndRewardData(); } })(); </script>\
<<nobr>> <div class="MGS_canvasContainer"> <div class="MGS_canvasContainer2"> <canvas id="MGS_gameCanvas" width="768" height="512"></canvas> <div class="MGS_canvasOverlay"> <div class="MGS_canvasOverlay2"> <div class="MGS_inventory"> </div> <div class="MGS_death"> <!-- z: 3 --> YOU DIED </div> <div class="MGS_exit"> <!-- see: mining.js - init_exitGuiButton --> EXIT </div> <div class="MGS_helpButton"> <img src="ressources/maingui/ui/info.webp" alt="Info Button"> </div> <div class="MGS_helpContent"> <div class="MGS_helpContent_close">X</div> <div class="MGS_informations_info"> <h1 style="color: white;">The Mining Game</h1> <br>Welcome to the Wastelands Mines! Here's what you need to know to get started: <br> <br> <u><b>Shop</b></u> <br>Spend your hard-earned ores to gain upgrades: <br>Speed Boost: Mine faster to maximize your haul. <br>Bigger Water Bottle: Stay in the mines longer without needing to refill. <br>Better Pickaxe: Break through the rock quicker to access rarer ores. <br> <br> <u><b>Trade Stand</b></u> <br>Encounter a resourceful girl from the wastelands who trades ores for special items. <br>Tip: Keep an eye out for what she offers, these items may be useful in the future. <br> <br> <u><b>Fountain</b></u> <br>Water is essential for mining: <br>Refill: Make regular trips to the fountain to replenish your water supply. <br>Caution: If you run dry, you risk losing everything you've worked for. Stay hydrated! <br> <br> <u><b>Mining</b></u> <br>Discover 3 different ore types within the border's depths: <br>Ores: Coal, Copper and Iron. <br>Effort Equals Reward: The value of the ore increases with its rarity, so be prepared to dig deeper for the best gems. <br> <br> <u><b>Strategy Tip</b></u> <br>Balance your time between mining for ores, upgrading your equipment, trading for helpful items, and keeping your water bottle filled. Good luck out there, miner! </div> </div> <div class="MGS_shop"> <back>BACK</back> <div class="left"> <div class="itemsCont"> <div class="shelf_content"> <item> <img src="./ressources/maingui/mining_game/clay.webp"> </item> <item> <img src="./ressources/maingui/mining_game/clay.webp"> </item> <item> <img src="./ressources/maingui/mining_game/clay.webp"> </item> </div> <div class="shelf"> <img src="./ressources/maingui/mining_game/shelf.webp"> </div> </div> <div class="item_info"> <div class="desc"> <p>DESCRIPTION:</p> <div></div> </div> <div class="buttons"> <div>BUY</div> </div> </div> </div> <div class="right"> </div> </div> <div class="MGS_trade"> <back>BACK</back> <div class="left"> <div class="itemsCont"> <div class="shelf_content"> <item> <img src="./ressources/maingui/mining_game/tier 1 mythical.webp"> </item> <item> <img src="./ressources/maingui/mining_game/tier 1 mythical.webp"> </item> <item> <img src="./ressources/maingui/mining_game/tier 1 mythical.webp"> </item> </div> <div class="shelf"> <img src="./ressources/maingui/mining_game/shelf.webp"> </div> </div> <div class="item_info"> <div class="desc"> <p>DESCRIPTION:</p> <div></div> </div> <div class="buttons"> <!--div>BUY</div--> </div> </div> </div> <div class="right"> </div> </div> </div> </div> </div> </div> <</nobr>>\ <style> body { overflow: hidden; /*MAYBEE*/ } #passages{ margin: 0; max-width: 100%; } #story{ margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 26vh; } .passage{ user-select: none; font-family: 'Century Gothic', sans-serif; /*MAYBEE*/ color: white; /*MAYBEE*/ font-size: 1.75vh; line-height: normal; overflow: hidden; background-color: #1d1d1d; /*MAYBEE*/ margin: 0; padding: 0; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; color: white; } </style>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { miningGameInit(); } })(); function miningGameInit() { // canvas and context let interlink = {}; // interlink object to link different parts of the game const canvas = document.getElementById('MGS_gameCanvas'); const ctx = canvas.getContext('2d'); //ctx.imageSmoothingEnabled = true; //default: true // keypress system const keypressSystem = new MGC_keyPressSystem(interlink); interlink.keypressSystem = keypressSystem; // interlink // html overlay const htmlInterface = new MGC_htmlInterface(interlink); interlink.htmlInterface = htmlInterface; // interlink // game map const worldBlockWidth = 40; const worldBlockHeight = 3000; const blockSize = 64; // px/block const worldWidth = worldBlockWidth * blockSize; // px const worldHeight = worldBlockHeight * blockSize; // px const gameMap = new MGC_map(interlink, worldBlockWidth, worldBlockHeight, blockSize); interlink.gameMap = gameMap; // interlink // player const player = new MGC_player(interlink, blockSize*10, blockSize*9, blockSize); interlink.player = player; // interlink // camera const gameCamera = new MGC_camera(interlink, player, gameMap); interlink.gameCamera = gameCamera; // interlink // renderer const renderer = new MGC_renderer(interlink, ctx, gameCamera, blockSize); interlink.renderer = renderer; // interlink // before loop init player.loadFromDatabase(); // try to load from database htmlInterface.shopGui_updateItems(); htmlInterface.tradeGui_updateItems(); htmlInterface.updateInventory(player); // game loop let fps = 0; let lastTimestamp = 0; let directFrameDelta = 0; // unfiltered let frameDelta = 0; // filtered using ema let ema = 0.1; function gameLoop(timestamp) { directFrameDelta = timestamp - lastTimestamp; lastTimestamp = timestamp; if (!timestamp) directFrameDelta = 16.67; // first frame, timestamp is undefined if (!directFrameDelta) directFrameDelta = 16.67; // prevent the weird directFrameDelta /= 1000; // convert to seconds directFrameDelta = Math.min(directFrameDelta, 0.5); // prevent spikes (max 0.5s) // 0.1.8b fix frameDelta = directFrameDelta * ema + frameDelta * (1 - ema); // exponential moving average fps = 1 / frameDelta; // dev info ctx.clearRect(0, 0, canvas.width, canvas.height); gameMap.buildings.forEach(building => { building.checkEnterCondition(player, gameMap, frameDelta) }); gameCamera.update(frameDelta); // update camera position const visibleBlocks = MGF_getVisibleBlocks(gameMap, gameCamera); const visibleBuildings = MGF_getVisibleBuildings(gameMap, gameCamera); let canvasIsValid = renderer.render(timestamp, visibleBlocks, visibleBuildings, player); // render everything //renderer.drawDevInfo(player, fps, gameCamera); // dev info if (!canvasIsValid) { // 0.1.8b fix // canvas is not valid, stop the game loop keypressSystem.removeKeysListeners(); return; } player.updateWaterLevel(frameDelta); // update water level player.checkForInput(keypressSystem, gameMap, frameDelta); // check for input player.updateAnimation(frameDelta); // update player animation player.updatePosition(worldWidth, worldHeight, gameMap, frameDelta); // update player position keypressSystem.update(); requestAnimationFrame(gameLoop); } gameLoop(); //-------- HELP INFO ----------// var helpContent = document.querySelector('.MGS_helpContent'); document.querySelector('.MGS_helpContent_close').addEventListener('click', function () { helpContent.style.opacity = '0'; helpContent.style.transform = 'scale(0.5)'; setTimeout(function () { helpContent.style.display = 'none'; }, 300); }); document.querySelector('.MGS_helpButton').addEventListener('click', function () { // Check if the div is already displayed if (helpContent.style.display === 'block' || window.getComputedStyle(helpContent).display === 'block') { // Hide the div if it's already displayed helpContent.style.opacity = '0'; helpContent.style.transform = 'scale(0.5)'; setTimeout(function () { helpContent.style.display = 'none'; }, 300); } else { // Show the div if it's not already displayed helpContent.style.display = 'block'; setTimeout(function () { helpContent.style.opacity = '1'; helpContent.style.transform = 'scale(1)'; }, 10); } }); } </script>\ <style> body { margin: 0; padding: 0; overflow: hidden; height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } * { box-sizing: border-box; } .MGS_canvasContainer { aspect-ratio: 768/512; max-width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .MGS_canvasContainer2 { position: relative; aspect-ratio: 768/512; width: 100%; margin: auto; display: flex; justify-content: center; align-items: center; } #MGS_gameCanvas { width: 100%; display: block; /* Prevents scrollbar */ background: #000; /* Sets a default background */ } .MGS_canvasOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; font-size: 1.75vh; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: white; } .MGS_canvasOverlay2 { position: relative; width: 100%; height: 100%; pointer-events: none; display: flex; justify-content: center; align-items: center; /* background-color: rgba(0, 0, 0, 0.5); */ } .MGS_inventory { opacity: 0.7; position: absolute; bottom: 0; right: 0; max-width: 18em; padding-left: 1.0em; padding-right: 0.2em; background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.43) 3%); display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-end; align-items: flex-end; } .MGS_inventory > item { position: relative; width: 4.8em; margin: 0.2em; display: flex; flex-direction: column; justify-content: center; align-items: center; } .MGS_inventory > item > qty { font-size: 1.2em; color: #000; position: absolute; top: -0.1em; left: -0.1em; padding: 0.3em; height: 0.8em; border-radius: 1em; background-color: rgba(255, 255, 255, 0.537); display: flex; justify-content: center; align-items: center; } .MGS_inventory > item > img { /* height: 4.5em; */ width: 100%; } .MGS_inventory > item > desc { font-size: 1.2em; text-align: center; } @keyframes MGS_itemHover { 0% {transform: none} 100% {transform: translateY(-0.3em)} } .MGS_shop { opacity: 0; pointer-events: none; background-color: rgba(36, 16, 0, 0.604); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: flex-end; transition: opacity 0.3s; } .MGS_shop > back { position: absolute; bottom: 0.5em; right: 0.5em; padding: 0.5em; border-radius: 0.5em; background-color: #000000a1; border: solid 0.05em #000000a4; color: #fff; font-size: 2.2em; font-weight: bold; cursor: pointer; transition: background-color 0.1s, transform 0.1s; } .MGS_shop > back:hover { background-color: #4d4d4d; transform: translate(1px, -2px); } .MGS_shop > .left { width: 65%; height: 100%; background-image: url('./ressources/maingui/mining_game/trade_wall.webp'); background-size: cover; background-repeat: repeat; background-position: center; } .MGS_shop > .left > .itemsCont { width: 100%; height: 75%; padding: 1em; overflow-y: auto; } .MGS_shop > .left > .itemsCont > .shelf_content { width: 100%; height: 17%; margin-top: 0.8em; display: flex; flex-direction: row; justify-content: space-evenly; } .MGS_shop > .left > .itemsCont > .shelf_content > item { position: relative; height: 100%; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; } .MGS_shop > .left > .itemsCont > .shelf_content > item:hover > img { animation: MGS_itemHover 0.3s infinite alternate; } .MGS_shop > .left > .itemsCont > .shelf_content > item > img { position: absolute; z-index: 1; height: 100%; filter: drop-shadow(0 0.3em 0.2em rgba(0, 0, 0, 0.5)); } .MGS_shop > .left > .itemsCont > .shelf_content > item > img.equiped { filter: drop-shadow(0 0 0.4em rgb(27, 80, 12)); height: 110%; } .MGS_shop > .left > .itemsCont > .shelf { width: 100%; height: 2.5em; display: flex; flex-direction: column; justify-content: flex-end; } .MGS_shop > .left > .itemsCont > .shelf > img { width: 100%; filter: drop-shadow(0 0.3em 0.2em rgba(0, 0, 0, 0.5)) drop-shadow(0 0.7em 0.2em rgba(0, 0, 0, 0.5)); } .MGS_shop > .left > .item_info { background-color: rgba(0, 0, 0, 0.474); display: flex; height: 25%; } .MGS_shop > .left > .item_info > .desc { width: 80%; height: 100%; overflow-y: auto; padding: 1em; color: rgb(255, 255, 255); font-weight: bold; font-size: 1.3em; padding: 0 0.8em; } .MGS_shop > .left > .item_info > .buttons { border-left: solid 0.1em #00000071; width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .MGS_shop > .left > .item_info > .buttons > div { min-width: 80%; max-width: 100%; padding: 1em 0; margin: 0.3em; padding: 0.5em; border-radius: 0.4em; background-color: #323232; color: #fff; font-size: 1.3em; font-weight: bold; text-align: center; cursor: pointer; border-style: solid; border-color: #000000; border-width: 0.1em 0 0.1em 0; transition: transform 0.1s, background-color 0.1s; } .MGS_shop > .left > .item_info > .buttons > div:hover { transform: translate(1px, -2px); background-color: #4d4d4d; } .MGS_trade { opacity: 0; pointer-events: none; background-color: rgba(36, 16, 0, 0.604); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: flex-end; transition: opacity 0.3s; } .MGS_trade > back { position: absolute; bottom: 0.5em; right: 0.5em; padding: 0.5em; border-radius: 0.5em; background-color: #000000a1; border: solid 0.05em #000000a4; color: #fff; font-size: 2.2em; font-weight: bold; cursor: pointer; transition: background-color 0.1s, transform 0.1s; } .MGS_trade > back:hover { background-color: #4d4d4d; transform: translate(1px, -2px); } .MGS_trade > .left { width: 65%; height: 100%; background-image: url('./ressources/maingui/mining_game/trade_wall.webp'); background-size: cover; background-repeat: repeat; background-position: center; } .MGS_trade > .left > .itemsCont { width: 100%; height: 75%; padding: 1em; overflow-y: auto; } .MGS_trade > .left > .itemsCont > .shelf_content { width: 100%; height: 17%; margin-top: 0.8em; display: flex; flex-direction: row; justify-content: space-evenly; } .MGS_trade > .left > .itemsCont > .shelf_content > item { position: relative; height: 100%; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; } .MGS_trade > .left > .itemsCont > .shelf_content > item:hover > img { animation: MGS_itemHover 0.3s infinite alternate; } .MGS_trade > .left > .itemsCont > .shelf_content > item > img { position: absolute; z-index: 1; height: 100%; filter: drop-shadow(0 0.3em 0.2em rgba(0, 0, 0, 0.5)); } .MGS_trade > .left > .itemsCont > .shelf_content > item > img.equiped { filter: drop-shadow(0 0 0.4em rgb(27, 80, 12)); height: 110%; } .MGS_trade > .left > .itemsCont > .shelf { width: 100%; height: 2.5em; display: flex; flex-direction: column; justify-content: flex-end; } .MGS_trade > .left > .itemsCont > .shelf > img { width: 100%; filter: drop-shadow(0 0.3em 0.2em rgba(0, 0, 0, 0.5)) drop-shadow(0 0.7em 0.2em rgba(0, 0, 0, 0.5)); } .MGS_trade > .left > .item_info { background-color: rgba(0, 0, 0, 0.474); display: flex; height: 25%; } .MGS_trade > .left > .item_info > .desc { width: 80%; height: 100%; overflow-y: auto; padding: 1em; color: rgb(255, 255, 255); font-weight: bold; font-size: 1.3em; padding: 0 0.8em; } .MGS_trade > .left > .item_info > .buttons { border-left: solid 0.1em #00000071; width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .MGS_trade > .left > .item_info > .buttons > div { width: 80%; padding: 1em 0; margin: 0.3em; padding: 0.5em; border-radius: 0.4em; background-color: #323232; color: #fff; font-size: 1.3em; font-weight: bold; text-align: center; cursor: pointer; border-style: solid; border-color: #000000; border-width: 0.1em 0 0.1em 0; transition: transform 0.1s, background-color 0.1s; } .MGS_trade > .left > .item_info > .buttons > div:hover { transform: translate(1px, -2px); background-color: #4d4d4d; } .MGS_trade > .right { width: 35%; height: 100%; background-image: url('./ressources/maingui/mining_game/gift_girl.webp'); background-size: cover; background-color: transparent; } .MGS_death { opacity: 0; pointer-events: none; background-color: rgba(0, 0, 0, 0.9); position: absolute; z-index: 3; /* items are 2 */ top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; transition: opacity 3s ease-in-out; font-family: 'Adobe Garamond'; font-size: 5em; font-weight: normal; color: #a51717; } .MGS_exit { opacity: 1; pointer-events: all; position: absolute; z-index: 3; top: 0.5em; right: 0.5em; padding: 0.5em; border-radius: 0.5em; background-color: #000000a1; border: solid 0.1em #000000a4; color: #fff; font-size: 2em; width: 7em; font-weight: bold; cursor: pointer; transition: background-color 0.1s, transform 0.1s; display: flex; justify-content: center; align-items: center; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; cursor: pointer; transition: all ease 0.3s; } .MGS_exit:hover { box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 0.5vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6); } .MGS_helpButton { position: absolute; pointer-events: all; width: 7vmin; /* Adjust size based on your preferences */ height: 7vmin; border-radius: 50%; display: flex; top: 12vh;; right: 1.5vh; margin-left: auto; align-items: center; justify-content: center; cursor: pointer; text-align: center; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; cursor: pointer; transition: all ease 0.3s; z-index: 10; } .MGS_helpButton:hover { box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 0.5vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6); } .MGS_helpButton img { max-width: 80%; /* Adjust the size of the image */ max-height: 80%; filter: invert(43%) sepia(5%) saturate(6104%) hue-rotate(168deg) brightness(89%) contrast(98%); } .MGS_helpContent { pointer-events: all; width: 60vw; height: 82vh; position: absolute; transform: translate(-50%, -50%); z-index: 2000; padding: 0.5vw; border-radius: 2vw; display: none; opacity: 0; /* init for animation */ transform: scale(0.5); /* init for animation */ transform-origin: top right; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; cursor: pointer; transition: all ease 0.3s; } .MGS_helpContent > .MGS_informations_info { padding: 4vh; font-size: 2vh; overflow-y: auto; height: 100%; } .MGS_helpContent > .MGS_helpContent_close { position: absolute; top: -50px; left: -50px; cursor: pointer; width: 100px; /* Increased from 50px to 100px */ height: 100px; /* Increased from 50px to 100px */ text-align: center; line-height: 100px; /* Increased to match height */ border-radius: 50%; z-index: 1; /* Keep this to make sure it overlaps other elements */ font-size: 48px; /* Increase this for a bigger 'X' */ border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); background-color: rgba(0, 0, 0, 0.8); background-image: none; cursor: pointer; transition: all ease 0.3s; } .MGS_helpContent > .MGS_helpContent_close:hover { transform: scale(1.1); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 0.5vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6); } </style>\
<<script>> playAudio("music", "forestPeacewood"); <</script>>\ <<nobr>> <div class="HGS_title">HUNTING</div> <div class="HGS_exit" onclick="HGS_exitHunting();">EXIT</div> <div class="HGS_refresh">Change hunting spot</div> <div class="HGS_effTableTrigger"> <img src="./ressources/icons/2E.webp"> </div> <div class="HGS_effTable"> Hunt Sucess Rate <table></table> </div> <div class="HGS_dialogCont"> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>:D... please contact the devs ????</p> </div> </div> </div> <div class="HGS_bottom"> <!-- <item> <div class="HGS_button">HUNT</div> <div class="HGS_shadow"><div></div></div> <img class="HGS_img" src="./ressources/icons/logos/fixfap.webp" alt="item"> <div class="HGS_successRate">Challenging</div> </item> --> </div> <div class="HGS_range"> <div class="HGS_targetWall"> <div class="notif">MISS</div> <img src="./ressources/icons/YA_B10.webp"> <div class="HGS_targetCont"> <img src="./ressources/icons/YA_B11.webp"> <div class="HGS_targetHitBox"> <img src="./ressources/icons/YA_B12.webp"> </div> </div> </div> </div> <</nobr>>\ <style> #story { margin-top: 0; margin-right: 0; margin-bottom: 0; /*margin-left: calc(26vh + 2.5em);*/ margin-left: 26vh; height: 100vh; font-size: 1.75vh; background-image: url('./ressources/backgrounds/2A_1.webp'); background-size: cover; background-position: center; background-attachment: fixed; } #story * { box-sizing: border-box; } #ui-bar.stowed { left: -26vh; } #ui-bar.stowed~#story { /* margin-left: 2.5em; */ margin-left: 0; } #passages { margin: 0; height: 100%; width: 100%; max-width: 100%; } .passage { height: 100%; width: 100%; overflow: hidden; font-size: 1.25vh; /*padding: 2vh;*/ position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .passage * { box-sizing: border-box; } .HGS_title { position: absolute; top: 2vh; left: 50%; transform: translateX(-50%); width: 18em; max-width: 100%; height: 10vh; display: flex; justify-content: center; align-items: center; font-size: 3em; font-weight: bold; color: #ffffff; --test_color: rgb(255, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.8); border: 0.1vh solid var(--test_color); border-radius: 1vh; text-shadow: 0 0 0.2em var(--test_color), 0 0 0.4em var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color); } .HGS_exit { position: absolute; top: 2vh; right: 2vh; padding: 0.5em 3em; font-size: 2em; font-weight: bold; color: #ffffff; border-radius: 0.5em; --test_color: rgb(255, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.8); border: 0.1vh solid var(--test_color); border-radius: 1vh; text-shadow: 0 0 0.2em var(--test_color), 0 0 0.4em var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color); cursor: pointer; transition: text-shadow 0.3s, box-shadow 0.3s; } .HGS_exit:hover { text-shadow: 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 1vh var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color), 0 0 4vh var(--test_color); } .HGS_refresh { position: absolute; z-index: 2; bottom: 10vh; left: 50%; transform: translateX(-50%); padding: 0.5em 3em; font-size: 2em; font-weight: bold; color: #ffffff; border-radius: 0.5em; --test_color: rgb(255, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.8); border: 0.1vh solid var(--test_color); border-radius: 1vh; text-shadow: 0 0 0.2em var(--test_color), 0 0 0.4em var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color); opacity: 0; pointer-events: none; cursor: pointer; transition: text-shadow 0.3s, box-shadow 0.3s; } .HGS_refresh:hover { text-shadow: 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 1vh var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color), 0 0 4vh var(--test_color); } .HGS_effTableTrigger { position: absolute; right: 1vh; top: 13vh; z-index: 1; width: 8vh; aspect-ratio: 1; border-radius: 50%; --test_color: rgb(255, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.8); border: 0.1vh solid var(--test_color); text-shadow: 0 0 0.2em var(--test_color), 0 0 0.4em var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color); display: flex; justify-content: center; align-items: center; cursor: pointer; } .HGS_effTableTrigger img { height: 100%; filter: invert(100%); } .HGS_effTableTrigger:hover ~ .HGS_effTable { opacity: 1; } .HGS_effTable { pointer-events: none; opacity: 0; position: absolute; right: 1vh; top: 13vh; z-index: 1; font-size: 1.5em; background-color: rgba(0, 0, 0, 0.747); text-align: center; width: 12em; color: #fff; padding: 1vh; border-radius: 1vh; display: flex; flex-direction: column; box-sizing: border-box; transition: opacity 0.3s, width 0.4s; } .HGS_effTable table { border-top: solid 0.15em #000000; padding-top: 0.4em; border-collapse: separate; margin: unset; } .HGS_effTable td { padding: 0 0.5vh; border-radius: 0.6vh; text-align: center; color: white; } .HGS_dialogCont { width: 100vh; max-width: 100%; max-height: 46vh; padding: 1vh; font-size: 1.8em; } .HGS_bottom { max-width: 100%; margin: 2vh; min-height: 32vh; display: flex; flex-direction: row; justify-content: center; } .HGS_bottom > item { position: relative; display: flex; width: 28vh; padding: 1vh 2vh; padding-top: 1vh; /* for successRate */ flex-direction: column-reverse; justify-content: flex-start; align-items: center; background-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.331) 75%, transparent); opacity: 0; transition: opacity 0.3s, width 0.4s; } .HGS_bottom > item > .HGS_successRate { position: absolute; z-index: 2; top: 0.2em; right: 0.2em; padding: 0 0.5em; max-width: 100%; font-size: 1.8em; line-height: 1.3em; font-weight: bold; color: #ffffff; background-image: linear-gradient(to right ,transparent , rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.7) 90%, transparent); --text-shadow-color: rgb(255, 255, 255); text-shadow: 0 0 0.2em var(--text-shadow-color), 0 0 0.3em var(--text-shadow-color); text-align: center; } .HGS_bottom > item > img.HGS_img { width: 100%; position: relative; z-index: 1; filter: drop-shadow(0 0 0.8vh rgba(0, 0, 0, 0.54)); transition: transform 0.3s, filter 0.3s; } .HGS_bottom > item > .HGS_shadow { width: 100%; height: 2vh; display: flex; justify-content: center; align-items: flex-end; } .HGS_bottom > item > .HGS_shadow > div { width: 100%; height: 200%; border-radius: 50%; background-color: #000000; filter: blur(0.8vh); } .HGS_bottom > item > .HGS_button { width: 100%; border-radius: 0.3em; font-size: 2em; font-weight: bold; padding: 0.2em 2em; margin: 0.5em; background-color: #000000; display: flex; justify-content: center; align-items: center; border: 3px solid rgba(255, 0, 0, 0.4); text-shadow: 0px 0px 8px rgba(255, 0, 0, 0.4), 0px 0px 16px rgba(255, 0, 0, 0.4), 0px 0px 24px rgba(255, 0, 0, 0.4); box-shadow: inset 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 0.5vw rgba(255, 0, 0, 0.4), 0 0 1vw rgba(255, 0, 0, 0.4); cursor: pointer; transition: text-shadow 0.3s, box-shadow 0.3s; } .HGS_bottom > item > .HGS_button:hover { text-shadow: 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6); box-shadow: inset 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 0.5vw rgba(255, 0, 0, 0.6), 0 0 1vw rgba(255, 0, 0, 0.6), 0 0 2vw rgba(255, 0, 0, 0.6); } .HGS_bottom > item > .HGS_button:hover ~ img.HGS_img { transform: translateY(-0.3vh); filter: drop-shadow(0 0 0.5vh white); } .HGS_range { width: 100%; height: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.5); z-index: 2; display: flex; justify-content: center; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.5s; } .HGS_range > .HGS_targetWall { position: relative; width: 100%; height: 60vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .HGS_range > .HGS_targetWall > .notif { position: absolute; top: 1vh; z-index: 3; display: flex; justify-content: center; align-items: center; font-size: 5em; line-height: 1.3; padding: 0 2em; font-weight: bold; background-image: linear-gradient(to right ,transparent , rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.9) 90%, transparent); color: #ffffff; text-shadow: 0 0 0.2em #f00, 0 0 0.3em #f00; opacity: 0; transition: opacity 0.3s; } .HGS_range > .HGS_targetWall > img { height: 100%; } .HGS_range > .HGS_targetWall > .HGS_targetCont { position: absolute; height: 90%; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; } .HGS_range > .HGS_targetWall > .HGS_targetCont > img { /* target */ height: 200%; /* 200 is default: 1 */ mix-blend-mode: color-burn; filter: blur(0.5vh); } .HGS_range > .HGS_targetWall > .HGS_targetCont > .HGS_targetHitBox { position: absolute; height: 100%; aspect-ratio: 1/1; } .HGS_range > .HGS_targetWall > .HGS_targetCont > .HGS_targetHitBox > img { /* target */ position: absolute; height: 50%; top: 0;left: 0; opacity: 0; transition: opacity 0.3s; } </style>\ <script> var HGV_huntSuccess = { // step 2 easy: 0.8, // Easy Hunt ( 80 % Success ) [Green] regular: 0.5, // Regular Hunt ( 50 % Success ) [Yellow] challenging: 0.25, // Challenging Hunt ( 25% Success ) [Orange] hardcore: 0.1, // Hardcore Hunt ( 10 % Success ) [Red] suicidal: 0.02 // Suicidal Hunt ( 2 % Success ) [Black] } var HGV_huntSuccessColor = { //background, text easy: ['#0f0', '#000'], regular: ['#ff0', '#000'], challenging: ['#f80', '#000'], hardcore: ['#f00', '#000'], suicidal: ['#000', '#fff'] } var HGV_spawnOddsByFloor = { // step 1 1: { chicken: [0.8, 'regular'], //ex: Chicken (80%) SuccessRate: Regular Hunt (50%) pig: [0.08, 'regular'], cow: [0.046, 'challenging'], deer: [0.033, 'challenging'], moose: [0.02, 'hardcore'], wolf: [0.01, 'suicidal'], bear: [0.01, 'suicidal'], yeti: [0.001, 'suicidal'] }, 2: { chicken: [0.75, 'regular'], pig: [0.1, 'regular'], cow: [0.05, 'challenging'], deer: [0.04, 'challenging'], moose: [0.03, 'hardcore'], wolf: [0.015, 'suicidal'], bear: [0.013, 'suicidal'], yeti: [0.002, 'suicidal'] }, 3: { chicken: [0.7, 'regular'], pig: [0.12, 'regular'], cow: [0.06, 'challenging'], deer: [0.045, 'challenging'], moose: [0.035, 'hardcore'], wolf: [0.02, 'suicidal'], bear: [0.015, 'suicidal'], yeti: [0.005, 'suicidal'] }, 4: { chicken: [0.65, 'easy'], pig: [0.13, 'regular'], cow: [0.08, 'regular'], deer: [0.05, 'challenging'], moose: [0.04, 'challenging'], wolf: [0.025, 'hardcore'], bear: [0.0175, 'suicidal'], yeti: [0.0075, 'suicidal'] }, 5: { chicken: [0.6, 'easy'], pig: [0.14, 'regular'], cow: [0.09, 'regular'], deer: [0.06, 'challenging'], moose: [0.05, 'challenging'], wolf: [0.03, 'hardcore'], bear: [0.02, 'suicidal'], yeti: [0.01, 'suicidal'] }, 6: { chicken: [0.55, 'easy'], pig: [0.16, 'regular'], cow: [0.1, 'regular'], deer: [0.07, 'challenging'], moose: [0.05, 'challenging'], wolf: [0.04, 'hardcore'], bear: [0.02, 'suicidal'], yeti: [0.01, 'suicidal'] }, 7: { chicken: [0.5, 'easy'], pig: [0.18, 'easy'], cow: [0.11, 'regular'], deer: [0.08, 'regular'], moose: [0.055, 'challenging'], wolf: [0.045, 'hardcore'], bear: [0.02, 'hardcore'], yeti: [0.01, 'suicidal'] }, 8: { chicken: [0.45, 'easy'], pig: [0.2, 'easy'], cow: [0.12, 'regular'], deer: [0.08, 'regular'], moose: [0.06, 'challenging'], wolf: [0.045, 'hardcore'], bear: [0.025, 'hardcore'], yeti: [0.02, 'suicidal'] }, 9: { chicken: [0.4, 'easy'], pig: [0.25, 'easy'], cow: [0.125, 'regular'], deer: [0.08, 'regular'], moose: [0.06, 'challenging'], wolf: [0.04, 'hardcore'], bear: [0.025, 'hardcore'], yeti: [0.02, 'suicidal'] }, 10: { chicken: [0.325, 'easy'], pig: [0.25, 'easy'], cow: [0.135, 'regular'], deer: [0.1, 'regular'], moose: [0.07, 'regular'], wolf: [0.05, 'challenging'], bear: [0.04, 'challenging'], yeti: [0.03, 'hardcore'] }, 11: { chicken: [0.25, 'easy'], pig: [0.25, 'easy'], cow: [0.15, 'regular'], deer: [0.12, 'regular'], moose: [0.08, 'regular'], wolf: [0.06, 'challenging'], bear: [0.05, 'challenging'], yeti: [0.04, 'hardcore'] }, 12: { chicken: [0.2, 'easy'], pig: [0.2, 'easy'], cow: [0.16, 'regular'], deer: [0.15, 'regular'], moose: [0.12, 'regular'], wolf: [0.08, 'challenging'], bear: [0.05, 'challenging'], yeti: [0.04, 'hardcore'] }, 13: { chicken: [0.13, 'easy'], pig: [0.17, 'easy'], cow: [0.15, 'easy'], deer: [0.18, 'regular'], moose: [0.15, 'regular'], wolf: [0.1, 'regular'], bear: [0.07, 'challenging'], yeti: [0.05, 'hardcore'] }, 14: { chicken: [0.1, 'easy'], pig: [0.15, 'easy'], cow: [0.15, 'easy'], deer: [0.2, 'regular'], moose: [0.16, 'regular'], wolf: [0.11, 'regular'], bear: [0.075, 'challenging'], yeti: [0.055, 'hardcore'] }, 15: { chicken: [0.1, 'easy'], pig: [0.1, 'easy'], cow: [0.12, 'easy'], deer: [0.2, 'regular'], moose: [0.18, 'regular'], wolf: [0.14, 'regular'], bear: [0.09, 'challenging'], yeti: [0.07, 'hardcore'] }, 16: { chicken: [0.1, 'easy'], pig: [0.1, 'easy'], cow: [0.1, 'easy'], deer: [0.18, 'easy'], moose: [0.19, 'regular'], wolf: [0.15, 'regular'], bear: [0.1, 'regular'], yeti: [0.08, 'challenging'] }, 17: { chicken: [0.1, 'easy'], pig: [0.1, 'easy'], cow: [0.1, 'easy'], deer: [0.13, 'easy'], moose: [0.2, 'regular'], wolf: [0.16, 'regular'], bear: [0.12, 'regular'], yeti: [0.09, 'challenging'] }, 18: { chicken: [0.1, 'easy'], pig: [0.1, 'easy'], cow: [0.1, 'easy'], deer: [0.1, 'easy'], moose: [0.15, 'regular'], wolf: [0.2, 'regular'], bear: [0.15, 'regular'], yeti: [0.1, 'challenging'] }, 19: { chicken: [0.1, 'easy'], pig: [0.1, 'easy'], cow: [0.1, 'easy'], deer: [0.1, 'easy'], moose: [0.1, 'easy'], wolf: [0.18, 'regular'], bear: [0.2, 'regular'], yeti: [0.12, 'challenging'] }, 20: { chicken: [0.1, 'easy'], pig: [0.1, 'easy'], cow: [0.1, 'easy'], deer: [0.1, 'easy'], moose: [0.1, 'easy'], wolf: [0.15, 'easy'], bear: [0.2, 'regular'], yeti: [0.15, 'regular'] }, 21: { chicken: [0.1, 'easy'], pig: [0.1, 'easy'], cow: [0.1, 'easy'], deer: [0.1, 'easy'], moose: [0.1, 'easy'], wolf: [0.1, 'easy'], bear: [0.2, 'easy'], yeti: [0.2, 'regular'] } }; var HGV_dialogByFloor = { 1 : 'As you step into the serene entrance of the PeaceWood, the gentle rustling of leaves and chirping of birds fill the air. The forest seems inviting, with abundant wildlife roaming freely. You spot potential prey nearby, ready for your first hunt in this new territory.', 2 : 'Venturing deeper into the PeaceWood, the canopy above grows denser, filtering the sunlight into a soft, emerald glow. The forest floor is dotted with mushrooms and wildflowers, and you can hear the distant sounds of animals scurrying about. You ready your weapon, anticipating the hunt ahead.', 3 : 'The heart of the PeaceWood is a tapestry of vibrant green hues and earthy scents. The trees seem to whisper ancient secrets as you navigate the winding trails. You come across a small clearing where wildlife congregates, presenting an opportunity for a successful hunt.', 4 : 'As you progress through the PeaceWood, the atmosphere shifts subtly. The air feels slightly heavier, and the shadows seem to dance with a life of their own. You spot movement in the underbrush, hinting at the presence of more elusive prey. Your senses sharpen as you prepare for the challenge.', 5 : "The PeaceWood's tranquility is occasionally interrupted by the distant calls of exotic birds and the rustling of leaves in the gentle breeze. You find yourself in a lush grove, where the vegetation grows thick and the wildlife seems more abundant. You take aim, ready to test your hunting skills.", 6 : "The deeper reaches of the PeaceWood are shrouded in a mysterious mist that clings to the forest floor. The sounds of nature become muffled, and an eerie stillness settles over the area. You can feel the presence of hidden creatures watching you from the shadows, waiting to be discovered.", 7 : "As you venture further into the PeaceWood, the trees grow taller and the canopy becomes more dense. Shafts of sunlight pierce through the leaves, creating a mesmerizing play of light and shadow on the forest floor. The wildlife here seems more cautious, requiring a keen eye and steady hand to hunt successfully.", 8 : "The heart of the PeaceWood pulses with an ancient energy, as if the forest itself is alive. The air is thick with the scent of moss and wildflowers, and the sounds of nature create a symphonic backdrop. You spot signs of larger, more formidable prey, and steel yourself for the hunt ahead.", 9 : "The PeaceWood seems to whisper secrets as you navigate its winding paths. The trees arch overhead, their branches intertwining to create a natural cathedral. The wildlife here is more elusive, requiring patience and skill to track and hunt.", 10: "As you reach the deeper parts of the PeaceWood, the atmosphere becomes more primal and untamed. The forest seems to pulse with a raw, untapped energy, and the creatures that inhabit it are more formidable. You must rely on your wits and expertise to emerge victorious in the hunt.", 11: "The PeaceWood's heart is a realm of twilight, where the boundaries between light and shadow blur. The air is thick with the scent of ancient trees and hidden secrets. The wildlife here is cunning and swift, demanding a hunter's full attention and skill.", 12: "The depths of the PeaceWood are a testament to nature's resilience and power. The trees stand as silent guardians, their roots twisting and turning beneath the earth. The creatures that call this place home are fierce and well-adapted, presenting a true test of a hunter's prowess.", 13: "As you venture into the farthest reaches of the PeaceWood, the forest seems to come alive with a primal energy. The air crackles with tension, and the shadows seem to move with a will of their own. The wildlife here is the most challenging yet, requiring every ounce of your skill and determination.", 14: "The heart of the PeaceWood is a place of ancient power, where the very essence of nature thrums through the earth and air. The trees seem to whisper ancient secrets, and the creatures that inhabit this realm are the stuff of legends. Only the most skilled and daring hunters venture this far.", 15: "As you delve into the deepest parts of the PeaceWood, the forest takes on an otherworldly quality. The colors seem more vivid, the sounds more melodic, and the very air seems to shimmer with hidden magic. The wildlife here is both beautiful and deadly, requiring a hunter's utmost respect and skill.", 16: "The PeaceWood's innermost sanctum is a place of myths and legends, where the boundary between the natural and supernatural blurs. The trees seem to pulse with an arcane energy, and the creatures that roam these woods are said to possess extraordinary powers. Only the most seasoned hunters dare to test their mettle here.", 17: "As you approach the very core of the PeaceWood, the forest seems to come alive with a symphonic harmony of sounds and sensations. The air is electric with anticipation, and the wildlife here is the most magnificent and challenging you've ever encountered. Every hunt is a true test of skill, courage, and respect for nature's power.", 18: "The heart of the PeaceWood is a realm of secrets and wonders, where the very fabric of reality seems to bend and sway. The trees are ancient sentinels, guarding the forest's deepest mysteries, and the creatures that inhabit this place are the stuff of both dreams and nightmares. Only the most intrepid and skilled hunters dare to venture this far.", 19: "As you stand on the threshold of the PeaceWood's innermost sanctum, you can feel the weight of the forest's ancient power pressing down upon you. The air is thick with the scent of primal magic, and the creatures that roam these woods are the embodiment of nature's raw fury and grace. Every hunt here is a sacred ritual, a dance between predator and prey, hunter and hunted.", 20: "At the very heart of the PeaceWood lies a place of unimaginable beauty and terror, where the boundaries between the mortal world and the realm of spirits dissolve. The trees are ancient gods, the creatures are divine emissaries, and every hunt is a sacred offering to the forces that govern this mystical place. Only the most enlightened and skilled hunters are worthy of setting foot in this ultimate sanctum of nature's power.", 21: "As you step into the deepest, most secluded part of the PeaceWood, you feel as though you've crossed a threshold into another world entirely. The air is thick with an ancient, primal energy that seems to permeate every leaf, every stone, every creature. The wildlife here is the stuff of legends - majestic, powerful, and filled with an almost human-like wisdom. Every hunt in this sacred place is a test not just of skill, but of character, as the forest itself seems to judge whether you are worthy of the honor of taking its bounty. You take a deep breath, steadying yourself for the ultimate challenge that awaits in this mystical heart of the PeaceWood.", } var HGV_itemsDrops = { // step 3 chicken: { eggs: 0.49, // Common chicken: 0.49, // Common chickenSkull: 0.02 // Legendary }, pig: { pork: 0.70, // Common butter: 0.20, // Uncommon bacon: 0.10 // Rare }, cow: { steak: 0.80, // Common milk: 0.15, // Rare filetMignon: 0.05 // Epic }, deer: { venison: 0.80, // Uncommon primeVenison: 0.05, // Legendary deerToes: 0.15 // Rare }, moose: { mooseMeat: 0.85, // Uncommon mooseAntler: 0.10, // Rare mooseThickSkin: 0.05 // Legendary }, wolf: { wolfMeat: 0.83, // Rare wolfFur: 0.15, // Epic wolfFang: 0.02 // Mythical }, bear: { bearMeat: 0.72, // Rare bearFur: 0.20, // Epic bearBones: 0.08 // Legendary }, yeti: { yetiMeat: 0.85, // Epic primeYetiMeat: 0.02, // Mythical yetiFur: 0.13 // Legendary } }; var HGV_animalsData = { chicken: { name: 'Chicken', img: './ressources/icons/YA_B1.webp' }, pig: { name: 'Pig', img: './ressources/icons/YA_B2.webp' }, cow: { name: 'Cow', img: './ressources/icons/YA_B3.webp' }, deer: { name: 'Deer', img: './ressources/icons/YA_B4.webp' }, moose: { name: 'Moose', img: './ressources/icons/YA_B5.webp' }, wolf: { name: 'Wolf', img: './ressources/icons/YA_B6.webp' }, bear: { name: 'Bear', img: './ressources/icons/YA_B7.webp' }, yeti: { name: 'Yeti', img: './ressources/icons/YA_B8.webp' } }; function HGF_setup() { let floor = SugarCube.State.variables.huntingGame.currentFloor; //title /* let title = document.querySelector('.HGS_title'); let floorLastString = floor.toString()[floor.toString().length - 1]; console.log('floorLastString', floorLastString); let ordinal = floorLastString === '1' ? 'ST' : floorLastString === '2' ? 'ND' : floorLastString === '3' ? 'RD' : 'TH'; ordinal = floor === 11 || floor === 12 || floor === 13 ? 'TH' : ordinal; title.innerHTML = `${floor}${ordinal} FLOOR HUNTING`; */ //dialog let dialog = document.querySelector('.HGS_dialogCont > .DIAS_message > .DIAS_text > p'); dialog.innerHTML = HGV_dialogByFloor[floor]; // table let tableCont = document.querySelector('.HGS_effTable'); let table = tableCont.querySelector('table'); table.innerHTML = ''; let hardness = Object.keys(HGV_huntSuccess); for (let i = 0; i < hardness.length; i++) { let tr = document.createElement('tr'); let trName = document.createElement('td'); trName.innerHTML = hardness[i]; trName.style.backgroundColor = HGV_huntSuccessColor[hardness[i]][0]; trName.style.color = HGV_huntSuccessColor[hardness[i]][1]; tr.appendChild(trName); let trPercentage = document.createElement('td'); let percentage = Math.round(HGV_huntSuccess[hardness[i]] * 100); trPercentage.innerHTML = `${percentage}%`; tr.appendChild(trPercentage); table.appendChild(tr); } } function HGF_update() { let previousArr = SugarCube.State.variables.huntingGame.previousHuntAnimals; let currentFloor = SugarCube.State.variables.huntingGame.currentFloor; if (previousArr === undefined) return; let animals = []; if (previousArr.length === 0) { animals = HGF_findAnimals(currentFloor); //step 1 } else { animals = previousArr; } HGF_createItems(currentFloor, animals); } function HGF_findAnimals(floor) { // step 1 let spawnOdds = HGV_spawnOddsByFloor[floor]; let animals = Object.keys(spawnOdds); let animalSlots = []; for (let i = 0; i < 3; i++) { // 3 slots for (let j = animals.length - 1; j >= 0; j--) { if (Math.random() < spawnOdds[animals[j]][0]) { animalSlots.push(animals[j]); break; } } } if (animalSlots.length === 0) { return HGF_findAnimals(floor); // try again :P } else { return animalSlots; } } function HGF_createItems(floor, animals) { //make the html with event listeners var spawnOdds = HGV_spawnOddsByFloor[floor]; var bottom = document.querySelector('.HGS_bottom'); bottom.innerHTML = ''; for (let i = 0; i < animals.length; i++) { let item = document.createElement('item'); let animalData = HGV_animalsData[animals[i]]; let HGS_button = document.createElement('div'); HGS_button.classList.add('HGS_button'); HGS_button.innerHTML = 'HUNT'; item.appendChild(HGS_button); HGS_button.addEventListener('click', function() { HGF_hunt(item, floor, animals[i]); }); let HGS_shadow = document.createElement('div'); HGS_shadow.classList.add('HGS_shadow'); let shadow = document.createElement('div'); HGS_shadow.appendChild(shadow); item.appendChild(HGS_shadow); let HGS_img = document.createElement('img'); HGS_img.classList.add('HGS_img'); HGS_img.src = animalData.img; HGS_img.alt = animalData.name; item.appendChild(HGS_img); let HGS_successRate = document.createElement('div'); HGS_successRate.classList.add('HGS_successRate'); HGS_successRate.innerHTML = spawnOdds[animals[i]][1]; HGS_successRate.style.setProperty('--text-shadow-color', HGV_huntSuccessColor[spawnOdds[animals[i]][1]][1]); HGS_successRate.style.color = HGV_huntSuccessColor[spawnOdds[animals[i]][1]][0]; item.appendChild(HGS_successRate); bottom.appendChild(item); setTimeout(function() { if (item === null) return; item.style.opacity = 1; }, 100 * i); } } function HGF_hunt(itemEl, floor, animalKey) { let successRateKey = HGV_spawnOddsByFloor[floor][animalKey][1]; let success = Math.random() < HGV_huntSuccess[successRateKey]; let targetSize = HGV_huntSuccess[successRateKey]; console.log('Hunt:', success, successRateKey, targetSize); targetSize = Math.min(Math.max(targetSize, 0.15), 1); let rangeEl = document.querySelector('.HGS_range'); let targetEl = document.querySelector('.HGS_range > .HGS_targetWall > .HGS_targetCont > img'); let arrowEl = document.querySelector('.HGS_range > .HGS_targetWall > .HGS_targetCont > .HGS_targetHitBox > img'); let notifEl = document.querySelector('.HGS_range > .HGS_targetWall > .notif'); let dialog = document.querySelector('.HGS_dialogCont > .DIAS_message'); dialog.classList.remove('DIAS_active'); let canExitEarly = false; let exitedEarly = false; let clickRange = function() { if (!canExitEarly) return; exitRange(); exitedEarly = true; } let exitRange = function() { if (rangeEl === null) return; rangeEl.style.opacity = 0; rangeEl.style.pointerEvents = 'none'; notifEl.style.opacity = 0; arrowEl.style.opacity = 0; itemEl.remove(); HGF_checkIfEmpty(); rangeEl.removeEventListener('click', clickRange); } rangeEl.style.opacity = 1; rangeEl.style.pointerEvents = 'all'; HGF_placeArrow(success, targetSize); targetEl.style.height = targetSize * 200 + '%'; // 200% is default playAudio("sfx", "YA_B1.mp3"); //external function rangeEl.addEventListener('click', clickRange); setTimeout(function() { if (rangeEl === null) return; arrowEl.style.opacity = 1; playAudio("sfx", "YA_B2.mp3"); }, 700); setTimeout(function() { if (rangeEl === null) return; arrowEl.style.opacity = 1; }, 1000); setTimeout(function() { if (rangeEl === null) return; notifEl.innerHTML = success ? 'HIT' : 'MISS'; notifEl.style.opacity = 1; itemEl.style.width = '0vh'; itemEl.style.opacity = 0; success ? HGS_giveLoot(animalKey) : null; canExitEarly = true; }, 1300); setTimeout(function() { if (exitedEarly) return; exitRange(); }, 3000); } function HGF_placeArrow(hasHit, targetSize) { //target Size is in between 0.2 and 1 let arrow = document.querySelector('.HGS_targetHitBox > img'); let topOffset = -9; let leftOffset = -3; let hitboxSizeMultiplier = 0.5; let theta = Math.random() * 2 * Math.PI; let r = Math.random(); let x = 0; let y = 0; if (hasHit) { // find a coord inside the circle x = (r * Math.cos(theta)) * targetSize * 0.5; y = (r * Math.sin(theta)) * targetSize * 0.5; } else { // find a coord outside the circle r = r * (1 - targetSize*0.5) + targetSize*0.5; x = (r * Math.cos(theta)) y = (r * Math.sin(theta)) } y = Math.min(0.8, y); // out of bounds in gui x = x * hitboxSizeMultiplier * 100 + leftOffset + 50; y = y * hitboxSizeMultiplier * 100 + topOffset + 50; arrow.style.left = x + '%'; arrow.style.top = y + '%'; } function HGS_giveLoot(animalKey) { let loot = HGV_itemsDrops[animalKey]; let lootKeys = Object.keys(loot); let lootKey = ''; let lootChance = 0; //let lootkeys = []; for (let i = 0; i < lootKeys.length; i++) { lootKey = lootKeys[i]; lootChance = loot[lootKey]; if (Math.random() < lootChance) { console.log('Loot:', lootKey); modVariable("add", "item", lootKey, 1); } } } function HGF_checkIfEmpty() { let bottom = document.querySelector('.HGS_bottom'); if (bottom?.innerHTML === '') { let refresh = document.querySelector('.HGS_refresh'); refresh.style.opacity = 1; refresh.style.pointerEvents = 'all'; refresh.addEventListener('click', HGS_changeHuntingSpot, { once: true }); } } function HGS_changeHuntingSpot() { let currentFloor = SugarCube.State.variables.huntingGame.currentFloor; let refresh = document.querySelector('.HGS_refresh'); refresh.style.opacity = 0; refresh.style.pointerEvents = 'none'; nextPartOfDay(); //inside function.js. add times perPassageScript(); //inside function.js. (also updates the sidebar) window.SB_mainRefresh && SB_mainRefresh(); //external function let animals = HGF_findAnimals(currentFloor); HGF_createItems(currentFloor, animals); } function HGS_exitHunting() { nextPartOfDay(); //inside function.js. add times exitHuntingGame(); //external function } (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { HGF_setup(); HGF_update(); } })(); </script>\
<<script>> playAudio("music", "forestPeacewood"); <</script>>\ <<nobr>> <div class="GGS_title">GATHERING</div> <div class="GGS_exit" onclick="GGS_exitGathering();">EXIT</div> <div class="GGS_refresh" onclick="GGS_changeGatheringSpot()">Change Gathering Spot</div> <div class="GGS_dialogCont"> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>🤣🫵 Something went wrong, please contact the devs <a href="https://discord.gg/jEpjVQdXkX" target="_blank">Discord</a> :D</p> </div> </div> </div> <div class="GGS_bottom"> <bush onclick="GGF_gather()"> <div class="GGS_shadow"><div></div></div> <img src="" alt="bush"> </bush> </div> <div class="GGS_scroller"> <item> <div class="GGS_bobble"> <img class="GGS_item" src="./ressources/icons/I1ED9.webp" alt="item"> <img class="GGS_overlay" src="./ressources/icons/YA_C5.svg" alt="item"> <number>1%</number> </div> </item> </div> <</nobr>>\ <style> #story { margin-top: 0; margin-right: 0; margin-bottom: 0; /*margin-left: calc(26vh + 2.5em);*/ margin-left: 26vh; height: 100vh; font-size: 1.75vh; background-image: url('./ressources/backgrounds/2A_1.webp'); background-size: cover; background-position: center; background-attachment: fixed; } #story * { box-sizing: border-box; } #ui-bar.stowed { left: -26vh; } #ui-bar.stowed~#story { /* margin-left: 2.5em; */ margin-left: 0; } #passages { margin: 0; height: 100%; width: 100%; max-width: 100%; } .passage { height: 100%; width: 100%; overflow: hidden; font-size: 1.25vh; /*padding: 2vh;*/ position: relative; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; align-content: stretch; padding-right: 23vh; padding-top: 13vh; } .passage * { box-sizing: border-box; } .GGS_title { position: absolute; top: 2vh; width: 18em; max-width: 100%; height: 10vh; display: flex; justify-content: center; align-items: center; font-size: 3em; font-weight: bold; color: #ffffff; --test_color: rgb(255, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.8); border: 0.1vh solid var(--test_color); border-radius: 1vh; text-shadow: 0 0 0.2em var(--test_color), 0 0 0.4em var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color); } .GGS_exit { position: absolute; top: 2vh; right: 2vh; padding: 0.5em 3em; font-size: 2em; font-weight: bold; color: #ffffff; border-radius: 0.5em; --test_color: rgb(255, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.8); border: 0.1vh solid var(--test_color); border-radius: 1vh; text-shadow: 0 0 0.2em var(--test_color), 0 0 0.4em var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color); cursor: pointer; transition: text-shadow 0.3s, box-shadow 0.3s; } .GGS_exit:hover { text-shadow: 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 1vh var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color), 0 0 4vh var(--test_color); } .GGS_refresh { position: absolute; z-index: 2; bottom: 10vh; padding: 0.5em 3em; font-size: 2em; font-weight: bold; color: #ffffff; border-radius: 0.5em; --test_color: rgb(255, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.8); border: 0.1vh solid var(--test_color); border-radius: 1vh; text-shadow: 0 0 0.2em var(--test_color), 0 0 0.4em var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color); opacity: 0; pointer-events: none; cursor: pointer; transition: text-shadow 0.3s, box-shadow 0.3s; } .GGS_refresh:hover { text-shadow: 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 1vh var(--test_color); box-shadow: inset 0 0 1vh var(--test_color), 0 0 1vh var(--test_color), 0 0 2vh var(--test_color), 0 0 4vh var(--test_color); } .GGS_dialogCont { width: 100vh; max-width: 100%; max-height: 46vh; padding: 1vh; font-size: 1.8em; transition: opacity 0.3s; } .GGS_bottom { align-self: end; position: relative; width: 100%; margin: 0; min-height: 32vh; display: flex; flex-direction: row; justify-content: center; } .GGS_bottom > bush { position: relative; display: flex; width: 61vh; padding: 1vh 2vh; padding-top: 1vh; /* for successRate */ flex-direction: column-reverse; justify-content: flex-start; align-items: center; /* opacity: 0; */ transition: opacity 0.3s, width 0.4s; } .GGS_bottom > bush > img { width: 100%; filter: drop-shadow(0 0 0.8vh rgb(0, 0, 0)); cursor: pointer; transition: transform 0.3s, filter 0.3s; } .GGS_bottom > bush > img:hover { transform: translateY(-0.3vh); filter: drop-shadow(0 0 0.5vh white); } .GGS_bottom > bush > img.GGS_flash { transform: translateY(-0.3vh); filter: drop-shadow(0 0 0.5vh white); } .GGS_bottom > bush > .GGS_shadow { width: 110%; height: 0; display: flex; justify-content: center; align-items: flex-end; } .GGS_bottom > bush > .GGS_shadow > div { width: 100%; height: 8vh; border-radius: 50%; background-color: hsla(0, 0%, 75%, 0.826); filter: blur(0.8vh); } .GGS_scroller { position: absolute; right: 2vh; bottom: 2vh; top: 15vh; background-color: aqua; width: 20.5vh; border-radius: 2vh; border: solid 0.2vh #000000; background: #151313; box-shadow: inset 0 0 2em rgba(157, 64, 64, 0.445); overflow: hidden; } .GGS_scroller > item { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; --GGS_rarity_color: #ffffff; } .GGS_scroller > item > .GGS_bobble { position: relative; width: 90%; aspect-ratio: 1; border-radius: 50%; background-color: #00000099; /* border: solid 0.2vh #000000; */ border-style: solid; border-width: 0.2vh; border-color: #000000; display: flex; justify-content: center; align-items: center; transition: border-color 0.3s; } .GGS_scroller > item.GGS_active > .GGS_bobble { border-color: var(--GGS_rarity_color); } .GGS_scroller > item > .GGS_bobble > img.GGS_item { width: 80%; aspect-ratio: 1; filter: drop-shadow(0 0 0.5vh black); transition: filter 0.3s; } .GGS_scroller > item.GGS_active > .GGS_bobble > img.GGS_item { filter: drop-shadow(0 0 0.5vh var(--GGS_rarity_color)); } .GGS_scroller > item > .GGS_bobble > .GGS_overlay { position: absolute; width: 100%; aspect-ratio: 1; border-radius: 50%; /* black to white*/ stroke: white; opacity: 0; animation: GGS_scroller_overlay_animation 3s infinite; transition: opacity 0.3s, fill 0.3s; } .GGS_scroller > item.GGS_active > .GGS_bobble > .GGS_overlay { opacity: 1; stroke: var(--GGS_rarity_color) } @keyframes GGS_scroller_overlay_animation { 0% { transform: rotate(0deg); scale: 1.08; } 100% { transform: rotate(360deg); scale: 1.08; } } .GGS_scroller > item > .GGS_bobble > number { position: absolute; text-align: center; padding: 0.1em 0.1em; border-radius: 0.2em; font-size: 3em; line-height: 1; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.7), 0 0 0.5em rgba(0, 0, 0, 0.7); } </style>\ <script> var GGV_oddsByFloor = { 1: { type: "fruit", list: { apple: 0.75, orange: 0.14, peach: 0.06, cherry: 0.03, watermelon: 0.015, greenApple: 0.005, }, }, 2: { type: "vegetable", list: { potato: 0.75, carrot: 0.14, cabbage: 0.06, onion: 0.03, tomato: 0.015, pepper: 0.005, }, }, 3: { type: "plant", list: { rottenDRoot: 0.75, herbs: 0.14, dRoot: 0.06, wheats: 0.03, primeDRoot: 0.015, honey: 0.005, }, }, 4: { type: "misc", list: { nut: 0.75, mushrooms: 0.14, peanuts: 0.06, greenMushrooms: 0.03, almonds: 0.015, pistachios: 0.005, }, }, 5: { type: "fruit", list: { apple: 0.7, orange: 0.15, peach: 0.08, cherry: 0.04, watermelon: 0.02, greenApple: 0.01, }, }, 6: { type: "vegetable", list: { potato: 0.7, carrot: 0.15, cabbage: 0.08, onion: 0.04, tomato: 0.02, pepper: 0.01, }, }, 7: { type: "plant", list: { rottenDRoot: 0.7, herbs: 0.15, dRoot: 0.08, wheats: 0.04, primeDRoot: 0.02, honey: 0.01, }, }, 8: { type: "misc", list: { nut: 0.7, mushrooms: 0.15, peanuts: 0.08, greenMushrooms: 0.04, almonds: 0.02, pistachios: 0.01, }, }, 9: { type: "fruit", list: { apple: 0.6, orange: 0.2, peach: 0.1, cherry: 0.06, watermelon: 0.03, greenApple: 0.01, }, }, 10: { type: "vegetable", list: { potato: 0.6, carrot: 0.2, cabbage: 0.1, onion: 0.06, tomato: 0.03, pepper: 0.01, }, }, 11: { type: "plant", list: { rottenDRoot: 0.6, herbs: 0.2, dRoot: 0.1, wheats: 0.06, primeDRoot: 0.03, honey: 0.01, }, }, 12: { type: "misc", list: { nut: 0.6, mushrooms: 0.2, peanuts: 0.1, greenMushrooms: 0.06, almonds: 0.03, pistachios: 0.01, }, }, 13: { type: "fruit", list: { apple: 0.5, orange: 0.24, peach: 0.12, cherry: 0.08, watermelon: 0.04, greenApple: 0.02, }, }, 14: { type: "vegetable", list: { potato: 0.5, carrot: 0.24, cabbage: 0.12, onion: 0.08, tomato: 0.04, pepper: 0.02, }, }, 15: { type: "plant", list: { rottenDRoot: 0.5, herbs: 0.24, dRoot: 0.12, wheats: 0.08, primeDRoot: 0.04, honey: 0.02, }, }, 16: { type: "misc", list: { nut: 0.5, mushrooms: 0.24, peanuts: 0.12, greenMushrooms: 0.08, almonds: 0.04, pistachios: 0.02, }, }, 17: { type: "fruit", list: { apple: 0.4, orange: 0.21, peach: 0.18, cherry: 0.12, watermelon: 0.06, greenApple: 0.03, }, }, 18: { type: "vegetable", list: { potato: 0.4, carrot: 0.21, cabbage: 0.18, onion: 0.12, tomato: 0.06, pepper: 0.03, }, }, 19: { type: "plant", list: { rottenDRoot: 0.4, herbs: 0.21, dRoot: 0.18, wheats: 0.12, primeDRoot: 0.06, honey: 0.03, }, }, 20: { type: "misc", list: { nut: 0.4, mushrooms: 0.21, peanuts: 0.18, greenMushrooms: 0.12, almonds: 0.06, pistachios: 0.03, }, }, }; var GGV_dialogByFloor = { 1 : "As you wander through the peaceful woods, you stumble upon a bountiful orchard. Apples are plentiful, making up the majority of the fruits you find. Oranges and peaches are scattered about, while cherries and watermelons prove to be more elusive. You even manage to spot a rare green apple, a true treasure in this forest.", 2 : "The forest floor is rich with vegetables, ready for harvest. Potatoes are the most common, followed by a decent amount of carrots. Cabbages and onions are harder to come by, while tomatoes and peppers are truly rare finds. You gather a diverse selection, excited to use them in your meals.", 3 : "As you forage through the undergrowth, you discover an abundance of plants. Rotten D-Roots are everywhere, but you manage to find some useful herbs and a few precious D-Roots. Wheats and prime D-Roots are scarce, but you do stumble upon a small amount of honey, a sweet and valuable find.", 4 : "The forest is full of miscellaneous edibles. Nuts are the most prevalent, followed by a good amount of mushrooms. Peanuts and green mushrooms are less common, while almonds and pistachios are the rarest treats. You gather a bit of everything, appreciating the variety the forest has to offer.", 5 : "The fruit trees in this part of the forest are slightly less generous. Apples still dominate, but oranges and peaches are a bit more common than before. Cherries and watermelons are still hard to find, but you manage to collect a few. Green apples remain the rarest and most prized fruit.", 6 : "The vegetable patches here are similar to the previous area. Potatoes and carrots make up the bulk of your harvest, with cabbages and onions being less abundant. Tomatoes and peppers are still the rarest vegetables, but you're lucky enough to find a couple of each.", 7 : "The plant life in this section of the forest is comparable to the earlier area. Rotten D-Roots are the most common, followed by herbs and regular D-Roots. Wheats and prime D-Roots are still scarce, but you manage to find a bit more honey than before.", 8 : "The miscellaneous edibles in this part of the forest mirror the previous area. Nuts and mushrooms are the most plentiful, followed by peanuts and green mushrooms. Almonds and pistachios remain the rarest finds, but you're fortunate enough to gather a few.", 9 : "As you venture deeper into the forest, the fruit distribution shifts. Apples are still the most common, but oranges and peaches are more abundant than before. Cherries and watermelons are easier to find, while green apples remain elusive but obtainable.", 10: "The vegetable patches in this area are similar to the previous one. Potatoes and carrots are still the most plentiful, but cabbages and onions are slightly more common. Tomatoes and peppers are a bit easier to find, but still relatively rare.", 11: "The plant life here is comparable to the earlier sections. Rotten D-Roots dominate, followed by herbs and regular D-Roots. Wheats and prime D-Roots are a bit more abundant, and you manage to find a decent amount of honey.", 12: "The miscellaneous edibles in this part of the forest are similar to the previous areas. Nuts and mushrooms are the most common, followed by peanuts and green mushrooms. Almonds and pistachios are slightly easier to find, but still the rarest of the bunch.", 13: "As you reach the heart of the forest, the fruit distribution becomes more balanced. Apples are still common, but oranges and peaches are almost as abundant. Cherries and watermelons are much easier to find, and green apples are no longer as rare as they once were.", 14: "The vegetable patches here are more diverse. Potatoes and carrots are still common, but cabbages and onions are nearly as plentiful. Tomatoes and peppers are easier to find, making your harvest more colorful and varied.", 15: "The plant life in this area is rich and varied. Rotten D-Roots are still common, but herbs and regular D-Roots are almost as abundant. Wheats and prime D-Roots are much easier to find, and honey is no longer a rare treat.", 16: "The miscellaneous edibles here are more evenly distributed. Nuts and mushrooms are still the most common, but peanuts and green mushrooms are nearly as plentiful. Almonds and pistachios are easier to find, adding variety to your gatherings.", 17: "As you near the end of your journey through the PeaceWood, the fruit trees are generous with their bounty. Apples are still common, but oranges, peaches, and cherries are all abundant. Watermelons and green apples are much easier to find, making your final harvest a sweet success.", 18: "The vegetable patches in this area are bountiful. Potatoes and carrots are still common, but cabbages, onions, tomatoes, and peppers are all readily available. Your final vegetable harvest is diverse and plentiful.", 19: "The plant life here is rich and rewarding. Rotten D-Roots are still common, but herbs, regular D-Roots, wheats, and prime D-Roots are all abundant. Honey is also much easier to find, providing a sweet end to your foraging journey.", 20: "The miscellaneous edibles in this final area are a treasure trove. Nuts and mushrooms are still common, but peanuts, green mushrooms, almonds, and pistachios are all readily available. Your final gathering is a diverse and satisfying mix of forest treats.", 21: "As you reach the very heart of the PeaceWood, you stumble upon a mythical grove. The trees here bear the rarest and most prized fruits, vegetables, and nuts. Green apples, peppers, honey, and pistachios are abundant, making this final gathering a truly legendary haul. You leave the forest with a sense of wonder and gratitude for the magical bounty you've been granted.", } var GGV_bushData = { fruit: { img: './ressources/icons/YA_C3.webp' }, vegetable: { img: './ressources/icons/YA_C1.webp' }, plant: { img: './ressources/icons/YA_C2.webp' }, misc: { img: './ressources/icons/YA_C3.webp' }, }; function GGF_setup() { let floor = SugarCube.State.variables.gatheringGame.currentFloor; let dialog = document.querySelector('.GGS_dialogCont > .DIAS_message > .DIAS_text > p'); dialog.innerHTML = GGV_dialogByFloor[floor]; let bush = document.querySelector('.GGS_bottom > bush > img'); bush.src = GGV_bushData[GGV_oddsByFloor[floor].type].img; GGF_scroller_setup(floor); GGF_bushFlashing_setup(); } function GGF_bushFlashing_setup() { let bush = document.querySelector('.GGS_bottom > bush > img'); let isHovered = false; bush.addEventListener('mouseenter', () => {isHovered = true;}); bush.addEventListener('mouseleave', () => {isHovered = false;}); let bushFInterval = setInterval(() => { if (isHovered) return; if (!bush) { clearInterval(bushFInterval); // this is needed for Twine like environment return; } bush.classList.add('GGS_flash'); setTimeout(() => { if (!bush) return; bush.classList.remove('GGS_flash'); }, 200); setTimeout(() => { if (!bush) return; bush.classList.add('GGS_flash'); }, 300); setTimeout(() => { if (!bush) return; bush.classList.remove('GGS_flash'); }, 500); }, 4000); } /* function GGF_update(floor) { // put the bush back let bush = document.querySelector('.GGS_bush'); } */ function GGF_gather() { let dialog = document.querySelector('.GGS_dialogCont'); dialog.style.opacity = 0; let nbOfAudio = 3; let randAudioIndex = Math.floor(Math.random() * nbOfAudio) + 1; playAudio("sfx", `YA_C${randAudioIndex}.mp3`); setTimeout(() => { GGF_gathered(); }, 700); let bush = document.querySelector('.GGS_bottom > bush'); bush.style.pointerEvents = 'none'; } function GGF_gathered() { let floor = SugarCube.State.variables.gatheringGame.currentFloor; let items = GGV_oddsByFloor[floor].list; let total = 0; for (let item in items) { total += items[item]; } let rand = Math.random() * total; let sum = 0; let keys = Object.keys(items); let index = 0; for (let item in items) { sum += items[item]; if (rand < sum) { itemFound = item; index = keys.indexOf(item); break; } } GGF_scroller_selectItem(index, itemFound); modVariable('add', 'item', itemFound, 1); let refresh = document.querySelector('.GGS_refresh'); refresh.style.opacity = 1; refresh.style.pointerEvents = 'all'; let bush = document.querySelector('.GGS_bottom > bush'); bush.style.opacity = 0; } function GGS_changeGatheringSpot() { let items = document.querySelectorAll('.GGS_scroller > item'); for (let item of items) { item.classList.remove('GGS_active'); } GGF_scroller_startIdle(); let refresh = document.querySelector('.GGS_refresh'); refresh.style.opacity = 0; refresh.style.pointerEvents = 'none'; let bush = document.querySelector('.GGS_bottom > bush'); bush.style.opacity = 1; bush.style.pointerEvents = 'all'; nextPartOfDay(); //inside function.js. add times perPassageScript(); //inside function.js. (also updates the sidebar) typeof window.SB_mainRefresh !== 'undefined' && SB_mainRefresh(); //external function } // -------- Scroller if (typeof GGV_scrollInterval !== 'undefined') { //HOTFIX :D clearInterval(GGV_scrollInterval); } var GGV_scrollerCont = null; var GGV_itemNb = 0; var GGV_scrollInterval = null; var GGV_scrollSpeed = 3; // Adjust the scroll speed as needed var GGV_targetIndex = null; function GGF_scroller_setup(floor) { GGV_itemNb = GGF_scrollerAppendItems(floor); GGV_scrollerCont = document.querySelector('.GGS_scroller'); //let firstItem = GGV_scrollerCont.querySelector('item'); //let contHeight = GGV_scrollerCont.clientHeight; //let itemHeight = firstItem.clientHeight; // Start the idle scrolling GGF_scroller_startIdle(); } function GGF_scroller_selectItem(index, item) { //if (index < 2) { index += GGV_itemNb; //} GGV_targetIndex = index; GGF_scroller_scrollToItem(); let itemData = SugarCube.State.variables.inventory.items[item]; let rarityColor = SugarCube.State.variables.illustration.rarity[itemData.rarity].color; console.log(rarityColor); let items = GGV_scrollerCont.querySelectorAll('item'); items[index].classList.add('GGS_active'); items[index].setAttribute('style', `--GGS_rarity_color: ${rarityColor};`); } function GGF_scroller_startIdle() { GGV_targetIndex = null; GGV_scrollInterval = setInterval(() => { if (GGV_targetIndex === null) { GGV_scrollerCont.scrollTop += GGV_scrollSpeed; if (GGV_scrollerCont.scrollTop >= GGV_scrollerCont.scrollHeight / 2) { GGV_scrollerCont.scrollTop = 0; } } }, 16); } function GGF_scroller_scrollToItem() { clearInterval(GGV_scrollInterval); let contHeight = GGV_scrollerCont.clientHeight; let itemHeight = GGV_scrollerCont.querySelector('item').getBoundingClientRect().height; // dude how do you get the height of an element let targetScrollTop = itemHeight * GGV_targetIndex + itemHeight / 2 - contHeight / 2; let startScrollTop = GGV_scrollerCont.scrollTop; let distance = targetScrollTop - startScrollTop; let duration = 500; // Adjust the duration as needed for smooth scrolling let startTime = Date.now(); function scrollStep() { let currentTime = Date.now(); let elapsedTime = currentTime - startTime; let percentage = Math.min(elapsedTime / duration, 1); GGV_scrollerCont.scrollTop = startScrollTop + distance * percentage; if (elapsedTime < duration) { setTimeout(scrollStep, 16); // Adjust the timeout as needed for smooth scrolling } else { GGV_targetIndex = null; // Do not resume scrolling after the animation finishes } } scrollStep(); } // -------- function GGF_scrollerAppendItems(floor) { let GGV_scrollerCont = document.querySelector('.GGS_scroller'); GGV_scrollerCont.innerHTML = ''; let items = GGV_oddsByFloor[floor].list; for (let i = 0; i < 2; i++) { for (let item in items) { let itemData = SugarCube.State.variables.inventory.items[item]; let itemCont = document.createElement('item'); let itemBobble = document.createElement('div'); itemBobble.classList.add('GGS_bobble'); let itemImg = document.createElement('img'); itemImg.classList.add('GGS_item'); let itemOverlay = document.createElementNS("http://www.w3.org/2000/svg", "svg"); itemOverlay.classList.add('GGS_overlay'); let itemNumber = document.createElement('number'); itemCont.appendChild(itemBobble); itemBobble.appendChild(itemImg); itemBobble.appendChild(itemOverlay); itemBobble.appendChild(itemNumber); itemImg.src = itemData.image; itemNumber.innerHTML = Math.round(items[item] * 1000) * 0.1 + '%'; /* <svg width="400" height="400"> <circle stroke-dasharray="37.3" cx="100" cy="100" r="95" fill="none" stroke="red" stroke-width="10" stroke-linecap="round"></circle> </svg> */ itemOverlay.setAttribute('xmlns',"http://www.w3.org/2000/svg"); itemOverlay.setAttribute('width', '200'); itemOverlay.setAttribute('height', '200'); itemOverlay.setAttribute('viewBox', '0 0 200 200'); itemOverlay.innerHTML = `<circle stroke-dasharray="37.3" cx="100" cy="100" r="95" fill="none" stroke-width="10" stroke-linecap="round"></circle>`; GGV_scrollerCont.appendChild(itemCont); } } return Object.keys(items).length; } function GGS_exitGathering() { nextPartOfDay(); //inside function.js. add times exitGatheringGame(); //external function } (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { GGF_setup(); //GGF_update(); //idk if this is needed - TODO } })(); </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <style> body { background: url(ressources/backgrounds/4A.webp) no-repeat center center fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; color: white; margin: 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-attachment: fixed; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); font-size: 0.9vw; overflow: hidden; } ::-webkit-scrollbar { width: 1vw; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgb(214, 211, 211); } .container { display: flex; align-items: center; justify-content: space-around; max-width: 100vw; margin: auto; height: 90vh; } #passages { width: calc(100vw-17.5em); max-width: 100vw; margin: 0; max-height: 100vh; } #story { max-height: 100vh; } .button { position: relative; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjusted opacity */ } .img-tree { width: 50%; } .rectangular-button { position: relative; width: 10vw; height: 7vh; background-color: #666; /* Slightly lighter gray */ color: #fff; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 10vw; display: flex; align-items: center; justify-content: center; } .chevron-arrow-left { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .rectangular-button:hover .chevron-arrow-left { animation: moveLeft 1s infinite linear; /* Animation for continuous left movement */ } .rectangular-button:hover .chevron-arrow-right { animation: moveRight 1s infinite linear; /* Animation for continuous left movement */ } @keyframes moveLeft { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(-30%); opacity: 0; } } @keyframes moveRight { 0%, 100% { transform: translateX(0) ease; opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } } .chevron-arrow-right { max-height: 60%; filter: invert(63%) sepia(77%) saturate(466%) hue-rotate(91deg) brightness(94%) contrast(79%); transition: transform 0.3s ease-out; /* Transition for smooth effect */ } .dropdown-rectangle { position: absolute; top: 100%; width: 80%; margin-top: -10%; height: 0; opacity: 0; visibility: hidden; background-color: #666; /* Slightly lighter gray */ color: #2ecc71; border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 0 0 30px 30px; /* Bottom corners rounded */ transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: -1; font-size: 1.5vw; } .rectangular-button:hover .dropdown-rectangle { height: 20vh; opacity: 1; visibility: visible; } .rectangular-button:active { background-color: red; } .circular-button { width: 7vw; height: 7vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .circular-button:hover { transform: scale(1.1); } .circular-button:active { background-color: red; } .circular-button:first-child { margin-left: 3vw; } .circular-button:last-child { margin-left: 3vw; } .big-circular-button { width: 15vw; height: 15vw; background-color: #666; /* Slightly lighter gray */ border: 8px solid #2ecc71; /* Nice green border, twice the size */ border-radius: 50%; margin: 2vh 0; margin-left: -13vw; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease-out; } .big-circular-button:hover { animation: breathe 1s infinite alternate; /* Breathing animation */ } @keyframes breathe { to { transform: scale(1.1); } } .tutorial { position: absolute; margin: auto; width: 48vw; margin-left: 15.5vw; display: block; } b { margin-top: 10%; } .icon1 { max-width: 60%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon2 { max-width: 65%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon3 { max-width: 70%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } .icon4 { max-width: 70%; } .icon5 { max-width: 75%; filter: brightness(0) saturate(100%) invert(64%) sepia(57%) saturate(602%) hue-rotate(92deg) brightness(95%) contrast(79%); } </style> <<if $tutorial.tutowoodchop is 1>> <<goto "4B">> <</if>> <<set $tutorial.tutowoodchop to 1>> <div class="tutorial" id="tutorial"> <div class="map" id="map-section"> <div class="containerbox2"> <h1>Wood chopping tutorial</h1> <div class="spacerui"></div> <div class="textui"> Wood Chopping is a vital activity in the game, allowing you to gather wood from the forest. This resource is essential for various constructions and upgrades within the Shelter. The mini-game challenges you to chop down as many trees as possible within a set time frame, with each tree type requiring a different number of hits to be felled. </div> <div class="vertical-line"> <div class="side-button" onclick="showMap()"> <img class="sbimg" src="ressources/maingui/ui/description.webp" alt="Image 1"> <p class="button-text">Description</p> </div> <div class="side-button" onclick="showUIHelp()"> <img class="sbimg" src="ressources/maingui/ui/ui-eye.webp" alt="Image 1"> <p class="button-text">UI Help</p> </div> <div class="side-button" onclick="showMechanism()"> <img class="sbimg" src="ressources/maingui/ui/mechanism.webp" alt="Image 1"> <p class="button-text">Mechanism</p> </div> <div class="side-button" onclick="showGoals()"> <img class="sbimg" src="ressources/maingui/ui/exit.webp" alt="Image 1"> <p class="button-text">Goals</p> </div> </div> </div> </div> <div class="uihelp" id="uihelp-section"> <div class="containerbox2"> <h1>Wood chopping tutorial</h1> <div class="spacerui"></div> <div class="textui"> <img class="img-ui" src="ressources/icons/4V.webp"> <br> <br> ➀ <b>Tree Icons</b>: There are three types of trees you can chop: small, medium, and large. Each tree icon varies in style and size to represent its type. <br> <br> ➁ <b>Timer Bar</b>: Located at the top of the screen, this bar shows the remaining time you have to chop trees. Once the timer runs out, the mini-game ends, and you'll receive the total wood collected. <br> <br> ➂ <b>Wood Counter</b>: This counter, usually at the bottom or side of the screen, shows the amount of wood you've gathered so far. </div> <div class="vertical-line"> <div class="side-button" onclick="showMap()"> <img class="sbimg" src="ressources/maingui/ui/description.webp" alt="Image 1"> <p class="button-text">Description</p> </div> <div class="side-button" onclick="showUIHelp()"> <img class="sbimg" src="ressources/maingui/ui/ui-eye.webp" alt="Image 1"> <p class="button-text">UI Help</p> </div> <div class="side-button" onclick="showMechanism()"> <img class="sbimg" src="ressources/maingui/ui/mechanism.webp" alt="Image 1"> <p class="button-text">Mechanism</p> </div> <div class="side-button" onclick="showGoals()"> <img class="sbimg" src="ressources/maingui/ui/exit.webp" alt="Image 1"> <p class="button-text">Goals</p> </div> </div> </div> </div> <div class="mechanism" id="mechanism-section"> <div class="containerbox2"> <h1>Wood chopping tutorial</h1> <div class="spacerui"></div> <div class="textui"> <b>Click to Chop</b>: Click on a tree to start chopping it. The number of clicks required depends on the tree's size. <br> <br> <b>Tree Types</b>: <br> Small trees require fewer clicks but yield less wood. <br> <br> <img class="img-tree" src="ressources/icons/4D.webp"> <br> <br> Medium trees take more clicks and provide a moderate amount of wood. <br> <br> <img class="img-tree" src="ressources/icons/4L.webp"> <br> <br> Large trees need the most clicks but offer the most wood. <br> <br> <img class="img-tree" src="ressources/icons/4P.webp"> <br> <br> <b>Time Management</b>: The mini-game is time-sensitive. Strategize to maximize wood collection within the given time. <br> <br> <b>Day Progression</b>: After the mini-game concludes, the game's time will advance (e.g., from morning to afternoon). </div> <div class="vertical-line"> <div class="side-button" onclick="showMap()"> <img class="sbimg" src="ressources/maingui/ui/description.webp" alt="Image 1"> <p class="button-text">Description</p> </div> <div class="side-button" onclick="showUIHelp()"> <img class="sbimg" src="ressources/maingui/ui/ui-eye.webp" alt="Image 1"> <p class="button-text">UI Help</p> </div> <div class="side-button" onclick="showMechanism()"> <img class="sbimg" src="ressources/maingui/ui/mechanism.webp" alt="Image 1"> <p class="button-text">Mechanism</p> </div> <div class="side-button" onclick="showGoals()"> <img class="sbimg" src="ressources/maingui/ui/exit.webp" alt="Image 1"> <p class="button-text">Goals</p> </div> </div> </div> </div> <div class="goals" id="goals-section"> <div class="containerbox2"> <h1>Wood chopping tutorial</h1> <div class="spacerui"></div> <div class="textui"> <b>Resource Gathering</b>: The primary goal is to gather as much wood as possible within the time limit. <br> <br> <b>Strategic Chopping</b>: Decide which trees to chop based on their size and your current needs. Sometimes, focusing on smaller trees for quick wood might be beneficial, while other times, investing time in larger trees for a bigger yield might be the better strategy. <br> <br> <b>Time Efficiency</b>: Aim to use the allotted time wisely to maximize your wood collection, considering the game's time progression post mini-game. </div> <div class="vertical-line"> <div class="side-button" onclick="showMap()"> <img class="sbimg" src="ressources/maingui/ui/description.webp" alt="Image 1"> <p class="button-text">Description</p> </div> <div class="side-button" onclick="showUIHelp()"> <img class="sbimg" src="ressources/maingui/ui/ui-eye.webp" alt="Image 1"> <p class="button-text">UI Help</p> </div> <div class="side-button" onclick="showMechanism()"> <img class="sbimg" src="ressources/maingui/ui/mechanism.webp" alt="Image 1"> <p class="button-text">Mechanism</p> </div> <div class="side-button" onclick="showGoals()"> <img class="sbimg" src="ressources/maingui/ui/exit.webp" alt="Image 1"> <p class="button-text">Goals</p> </div> </div> </div> </div> <div class="enter-button" onclick="nextBloc()">Understood</div> </div> <</nobr>>\ <script> function nextBloc() { SugarCube.Engine.play("4B") } function openTuto() { document.getElementById("tutorial").style.display = "block"; } function showMap() { document.getElementById('map-section').style.display = 'block'; document.getElementById('uihelp-section').style.display = 'none'; document.getElementById('mechanism-section').style.display = 'none'; document.getElementById('goals-section').style.display = 'none'; } function showUIHelp() { document.getElementById('map-section').style.display = 'none'; document.getElementById('uihelp-section').style.display = 'block'; document.getElementById('mechanism-section').style.display = 'none'; document.getElementById('goals-section').style.display = 'none'; } function showMechanism() { document.getElementById('map-section').style.display = 'none'; document.getElementById('uihelp-section').style.display = 'none'; document.getElementById('mechanism-section').style.display = 'block'; document.getElementById('goals-section').style.display = 'none'; } function showGoals() { document.getElementById('map-section').style.display = 'none'; document.getElementById('uihelp-section').style.display = 'none'; document.getElementById('mechanism-section').style.display = 'none'; document.getElementById('goals-section').style.display = 'block'; } </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <<set $clicktree to 0>> <<set $clicktree2 to 0>> <<set $clicktree3 to 0>> <<set $clicktree4 to 0>> <<set $clicktree5 to 0>> <<set $clicktree6 to 0>> <<set $clicktree7 to 0>> <<set $clicktree8 to 0>> <<set $clicktree9 to 0>> <<set $clicktree10 to 0>> <<set $clicktree11 to 0>> <<set $clicktree12 to 0>> <<set $clicktree13 to 0>> <<set $clicktree14 to 0>> <<set $clicktree15 to 0>> <<set $clicktree16 to 0>> <<set $clicktree17 to 0>> <<set $clicktree18 to 0>> <<set $clicktree19 to 0>> <<set $clicktree20 to 0>> <<set $clicktree21 to 0>> <!--set $axe1 to 1--> <!--set $axe2 to 0--> <<set $audiobreak1 to 0>> <<set $audiobreak2 to 0>> <<set $audiobreak3 to 0>> <<set $audiobreak4 to 0>> <<set $audiobreak5 to 0>> <<set $audiobreak6 to 0>> <<set $audiobreak7 to 0>> <<set $randomtree1 to random(1,7)>> <<set $randomtree2 to random(1,7)>> <<set $randomtree3 to random(1,7)>> <<set $randomtree4 to random(1,7)>> <<set $randomtree5 to random(1,7)>> <<set $randomtree6 to random(1,7)>> <<set $randomtree7 to random(1,7)>> <<set $endgametree1 to 0>> <<set $endgametree2 to 0>> <<set $endgametree3 to 0>> <<set $endgametree4 to 0>> <<set $endgametree5 to 0>> <<set $endgametree6 to 0>> <<set $endgametree7 to 0>> <<set $endgame to 0>> <<set $endgamebox to 0>> <<set $woodcounter to 0>> <<set $timesetter to 3>> <!--if $axe1 is 1> <set $axepower to 1> </if--> <<script>> /*loop trough all item in equipment*/ let power = 0; for (let item in SugarCube.State.variables.inventory.menuInv.equipment.list) { let itemEq = SugarCube.State.variables.inventory.menuInv.equipment.list[item]; let itemKey = itemEq.key; if (!itemKey) { continue; } let itemObj = SugarCube.State.variables.inventory.items[itemKey]; if (!(itemObj.type == "equipment")) { continue; } if (!(itemObj.type2 == "handheld")) { continue; } if (!(itemObj.type3 == "axe")) { continue; } if (itemObj.power == undefined) { continue; } power += itemObj.power; } if (power > 0) { SugarCube.State.variables.axepower = power; } else { SugarCube.State.variables.axepower = 1; } <</script>> <div class="woodcounter"> <img class="woodicon" src="ressources/icons/I1MA1.webp"> <h1 id="woodcounterValue">$woodcounter</h1> </div> <<if $timesetter gte 2>> <div class="filter"></div> <</if>> <audio autoplay loop> <source src="ressources/forest/woodchopping/birds-chirping.mp3" type="audio/mp3"> </audio> <div id="app" class="hidden"></div> <<timed 0.1s>> <<toggleclass "#app" "hidden">> <</timed>> <<if $randomtree1 lte 4>> <img id="pic" onclick="myFunction1x1()" class="tree1" src="ressources/icons/4D.webp"> <</if>> <<if $randomtree1 gt 4 and $randomtree1 lt 7>> <img id="pic2" onclick="myFunction1x2()" class="tree2" src="ressources/icons/4L.webp"> <</if>> <<if $randomtree1 is 7>> <img id="pic3" class="tree3" onclick="myFunction1x3()" src="ressources/icons/4P.webp"> <</if>> <<if $randomtree2 lte 4>> <img id="pic4" onclick="myFunction2x1()" class="tree4" src="ressources/icons/4D.webp"> <</if>> <<if $randomtree2 gt 4 and $randomtree2 lt 7>> <img id="pic5" onclick="myFunction2x2()" class="tree5" src="ressources/icons/4L.webp"> <</if>> <<if $randomtree2 is 7>> <img id="pic6" class="tree6" onclick="myFunction2x3()" src="ressources/icons/4P.webp"> <</if>> <<if $randomtree3 lte 4>> <img id="pic7" onclick="myFunction3x1()" class="tree7" src="ressources/icons/4D.webp"> <</if>> <<if $randomtree3 gt 4 and $randomtree3 lt 7>> <img id="pic8" onclick="myFunction3x2()" class="tree8" src="ressources/icons/4L.webp"> <</if>> <<if $randomtree3 is 7>> <img id="pic9" class="tree9" onclick="myFunction3x3()" src="ressources/icons/4P.webp"> <</if>> <<if $randomtree4 lte 4>> <img id="pic10" onclick="myFunction4x1()" class="tree10" src="ressources/icons/4D.webp"> <</if>> <<if $randomtree4 gt 4 and $randomtree4 lt 7>> <img id="pic11" onclick="myFunction4x2()" class="tree11" src="ressources/icons/4L.webp"> <</if>> <<if $randomtree4 is 7>> <img id="pic12" class="tree12" onclick="myFunction4x3()" src="ressources/icons/4P.webp"> <</if>> <<if $randomtree5 lte 4>> <img id="pic13" onclick="myFunction5x1()" class="tree13" src="ressources/icons/4D.webp"> <</if>> <<if $randomtree5 gt 4 and $randomtree5 lt 7>> <img id="pic14" onclick="myFunction5x2()" class="tree14" src="ressources/icons/4L.webp"> <</if>> <<if $randomtree5 is 7>> <img id="pic15" class="tree15" onclick="myFunction5x3()" src="ressources/icons/4P.webp"> <</if>> <<if $randomtree6 lte 4>> <img id="pic16" onclick="myFunction6x1()" class="tree16" src="ressources/icons/4D.webp"> <</if>> <<if $randomtree6 gt 4 and $randomtree6 lt 7>> <img id="pic17" onclick="myFunction6x2()" class="tree17" src="ressources/icons/4L.webp"> <</if>> <<if $randomtree6 is 7>> <img id="pic18" class="tree18" onclick="myFunction6x3()" src="ressources/icons/4P.webp"> <</if>> <<if $randomtree7 lte 4>> <img id="pic19" onclick="myFunction7x1()" class="tree19" src="ressources/icons/4D.webp"> <</if>> <<if $randomtree7 gt 4 and $randomtree7 lt 7>> <img id="pic20" onclick="myFunction7x2()" class="tree20" src="ressources/icons/4L.webp"> <</if>> <<if $randomtree7 is 7>> <img id="pic21" class="tree21" onclick="myFunction7x3()" src="ressources/icons/4P.webp"> <</if>> <<if $randomtree1 lte 4>> <<repeat 0.1s>> <<if $clicktree gte 7>> <<if $clicktree lt 13>> <script> document.getElementById('pic').src='ressources/icons/4F.webp'; </script> <<if $audiobreak1 is 0>> <<set $audiobreak1 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree gte 13>> <<if $clicktree lt 20>> <script> document.getElementById('pic').src='ressources/icons/4H.webp'; </script> <<if $audiobreak1 is 1>> <<set $audiobreak1 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree gte 20>> <<if $endgametree1 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree1 to 1>> <</if>> <script> document.getElementById('pic').src='ressources/icons/4J.webp'; </script> <<if $audiobreak1 is 2>> <<set $audiobreak1 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree1 gt 4 and $randomtree1 lt 7>> <<repeat 0.1s>> <<if $clicktree2 gte 13>> <<if $clicktree2 lt 27>> <script> document.getElementById('pic2').src='ressources/icons/4M.webp'; </script> <<if $audiobreak1 is 0>> <<set $audiobreak1 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree2 gte 27>> <<if $clicktree2 lt 40>> <script> document.getElementById('pic2').src='ressources/icons/4N.webp'; </script> <<if $audiobreak1 is 1>> <<set $audiobreak1 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree2 gte 40>> <<if $endgametree1 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree1 to 1>> <</if>> <script> document.getElementById('pic2').src='ressources/icons/4O.webp'; </script> <<if $audiobreak1 is 2>> <<set $audiobreak1 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree1 is 7>> <<repeat 0.1s>> <<if $clicktree3 gte 27>> <<if $clicktree3 lt 53>> <script> document.getElementById('pic3').src='ressources/icons/4Q.webp'; </script> <<if $audiobreak1 is 0>> <<set $audiobreak1 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree3 gte 53>> <<if $clicktree3 lt 80>> <script> document.getElementById('pic3').src='ressources/icons/4R.webp'; </script> <<if $audiobreak1 is 1>> <<set $audiobreak1 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree3 gte 80>> <<if $endgametree1 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree1 to 1>> <</if>> <script> document.getElementById('pic3').src='ressources/icons/4S.webp'; </script> <<if $audiobreak1 is 2>> <<set $audiobreak1 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree2 lte 4>> <<repeat 0.1s>> <<if $clicktree4 gte 7>> <<if $clicktree4 lt 13>> <script> document.getElementById('pic4').src='ressources/icons/4F.webp'; </script> <<if $audiobreak2 is 0>> <<set $audiobreak2 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree4 gte 13>> <<if $clicktree4 lt 20>> <script> document.getElementById('pic4').src='ressources/icons/4H.webp'; </script> <<if $audiobreak2 is 1>> <<set $audiobreak2 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree4 gte 20>> <<if $endgametree2 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree2 to 1>> <</if>> <script> document.getElementById('pic4').src='ressources/icons/4J.webp'; </script> <<if $audiobreak2 is 2>> <<set $audiobreak2 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree2 gt 4 and $randomtree2 lt 7>> <<repeat 0.1s>> <<if $clicktree5 gte 13>> <<if $clicktree5 lt 27>> <script> document.getElementById('pic5').src='ressources/icons/4M.webp'; </script> <<if $audiobreak2 is 0>> <<set $audiobreak2 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree5 gte 27>> <<if $clicktree5 lt 40>> <script> document.getElementById('pic5').src='ressources/icons/4N.webp'; </script> <<if $audiobreak2 is 1>> <<set $audiobreak2 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree5 gte 40>> <<if $endgametree2 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree2 to 1>> <</if>> <script> document.getElementById('pic5').src='ressources/icons/4O.webp'; </script> <<if $audiobreak2 is 2>> <<set $audiobreak2 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree2 is 7>> <<repeat 0.1s>> <<if $clicktree6 gte 27>> <<if $clicktree6 lt 53>> <script> document.getElementById('pic6').src='ressources/icons/4Q.webp'; </script> <<if $audiobreak2 is 0>> <<set $audiobreak2 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree6 gte 53>> <<if $clicktree6 lt 80>> <script> document.getElementById('pic6').src='ressources/icons/4R.webp'; </script> <<if $audiobreak2 is 1>> <<set $audiobreak2 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree6 gte 80>> <<if $endgametree2 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree2 to 1>> <</if>> <script> document.getElementById('pic6').src='ressources/icons/4S.webp'; </script> <<if $audiobreak1 is 2>> <<set $audiobreak1 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree3 lte 4>> <<repeat 0.1s>> <<if $clicktree7 gte 7>> <<if $clicktree7 lt 13>> <script> document.getElementById('pic7').src='ressources/icons/4F.webp'; </script> <<if $audiobreak3 is 0>> <<set $audiobreak3 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree7 gte 13>> <<if $clicktree7 lt 20>> <script> document.getElementById('pic7').src='ressources/icons/4H.webp'; </script> <<if $audiobreak3 is 1>> <<set $audiobreak3 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree7 gte 20>> <<if $endgametree3 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree3 to 1>> <</if>> <script> document.getElementById('pic7').src='ressources/icons/4J.webp'; </script> <<if $audiobreak3 is 2>> <<set $audiobreak3 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree3 gt 4 and $randomtree3 lt 7>> <<repeat 0.1s>> <<if $clicktree8 gte 13>> <<if $clicktree8 lt 27>> <script> document.getElementById('pic8').src='ressources/icons/4M.webp'; </script> <<if $audiobreak3 is 0>> <<set $audiobreak3 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree8 gte 27>> <<if $clicktree8 lt 40>> <script> document.getElementById('pic8').src='ressources/icons/4N.webp'; </script> <<if $audiobreak3 is 1>> <<set $audiobreak3 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree8 gte 40>> <<if $endgametree3 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree3 to 1>> <</if>> <script> document.getElementById('pic8').src='ressources/icons/4O.webp'; </script> <<if $audiobreak3 is 2>> <<set $audiobreak3 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree3 is 7>> <<repeat 0.1s>> <<if $clicktree9 gte 27>> <<if $clicktree9 lt 53>> <script> document.getElementById('pic9').src='ressources/icons/4Q.webp'; </script> <<if $audiobreak3 is 0>> <<set $audiobreak3 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree9 gte 53>> <<if $clicktree9 lt 80>> <script> document.getElementById('pic9').src='ressources/icons/4R.webp'; </script> <<if $audiobreak3 is 1>> <<set $audiobreak3 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree9 gte 80>> <<if $endgametree3 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree3 to 1>> <</if>> <script> document.getElementById('pic9').src='ressources/icons/4S.webp'; </script> <<if $audiobreak3 is 2>> <<set $audiobreak3 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree4 lte 4>> <<repeat 0.1s>> <<if $clicktree10 gte 7>> <<if $clicktree10 lt 13>> <script> document.getElementById('pic10').src='ressources/icons/4F.webp'; </script> <<if $audiobreak4 is 0>> <<set $audiobreak4 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree10 gte 13>> <<if $clicktree10 lt 20>> <script> document.getElementById('pic10').src='ressources/icons/4H.webp'; </script> <<if $audiobreak4 is 1>> <<set $audiobreak4 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree10 gte 20>> <<if $endgametree4 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree4 to 1>> <</if>> <script> document.getElementById('pic10').src='ressources/icons/4J.webp'; </script> <<if $audiobreak4 is 2>> <<set $audiobreak4 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree4 gt 4 and $randomtree4 lt 7>> <<repeat 0.1s>> <<if $clicktree11 gte 13>> <<if $clicktree11 lt 27>> <script> document.getElementById('pic11').src='ressources/icons/4M.webp'; </script> <<if $audiobreak4 is 0>> <<set $audiobreak4 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree11 gte 27>> <<if $clicktree11 lt 40>> <script> document.getElementById('pic11').src='ressources/icons/4N.webp'; </script> <<if $audiobreak4 is 1>> <<set $audiobreak4 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree11 gte 40>> <<if $endgametree4 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree4 to 1>> <</if>> <script> document.getElementById('pic11').src='ressources/icons/4O.webp'; </script> <<if $audiobreak4 is 2>> <<set $audiobreak4 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree4 is 7>> <<repeat 0.1s>> <<if $clicktree12 gte 27>> <<if $clicktree12 lt 53>> <script> document.getElementById('pic12').src='ressources/icons/4Q.webp'; </script> <<if $audiobreak4 is 0>> <<set $audiobreak4 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree12 gte 53>> <<if $clicktree12 lt 80>> <script> document.getElementById('pic12').src='ressources/icons/4R.webp'; </script> <<if $audiobreak4 is 1>> <<set $audiobreak4 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree12 gte 80>> <<if $endgametree4 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree4 to 1>> <</if>> <script> document.getElementById('pic12').src='ressources/icons/4S.webp'; </script> <<if $audiobreak4 is 2>> <<set $audiobreak4 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree5 lte 4>> <<repeat 0.1s>> <<if $clicktree13 gte 7>> <<if $clicktree13 lt 13>> <script> document.getElementById('pic13').src='ressources/icons/4F.webp'; </script> <<if $audiobreak5 is 0>> <<set $audiobreak5 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree13 gte 13>> <<if $clicktree13 lt 20>> <script> document.getElementById('pic13').src='ressources/icons/4H.webp'; </script> <<if $audiobreak5 is 1>> <<set $audiobreak5 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree13 gte 20>> <<if $endgametree5 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree5 to 1>> <</if>> <script> document.getElementById('pic13').src='ressources/icons/4J.webp'; </script> <<if $audiobreak5 is 2>> <<set $audiobreak5 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree5 gt 4 and $randomtree5 lt 7>> <<repeat 0.1s>> <<if $clicktree14 gte 13>> <<if $clicktree14 lt 27>> <script> document.getElementById('pic14').src='ressources/icons/4M.webp'; </script> <<if $audiobreak5 is 0>> <<set $audiobreak5 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree14 gte 27>> <<if $clicktree14 lt 40>> <script> document.getElementById('pic14').src='ressources/icons/4N.webp'; </script> <<if $audiobreak5 is 1>> <<set $audiobreak5 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree14 gte 40>> <<if $endgametree5 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree5 to 1>> <</if>> <script> document.getElementById('pic14').src='ressources/icons/4O.webp'; </script> <<if $audiobreak5 is 2>> <<set $audiobreak5 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree5 is 7>> <<repeat 0.1s>> <<if $clicktree15 gte 27>> <<if $clicktree15 lt 53>> <script> document.getElementById('pic15').src='ressources/icons/4Q.webp'; </script> <<if $audiobreak5 is 0>> <<set $audiobreak5 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree15 gte 53>> <<if $clicktree15 lt 80>> <script> document.getElementById('pic15').src='ressources/icons/4R.webp'; </script> <<if $audiobreak5 is 1>> <<set $audiobreak5 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree15 gte 80>> <<if $endgametree5 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree5 to 1>> <</if>> <script> document.getElementById('pic15').src='ressources/icons/4S.webp'; </script> <<if $audiobreak5 is 2>> <<set $audiobreak5 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree6 lte 4>> <<repeat 0.1s>> <<if $clicktree16 gte 7>> <<if $clicktree16 lt 13>> <script> document.getElementById('pic16').src='ressources/icons/4F.webp'; </script> <<if $audiobreak6 is 0>> <<set $audiobreak6 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree16 gte 13>> <<if $clicktree16 lt 20>> <script> document.getElementById('pic16').src='ressources/icons/4H.webp'; </script> <<if $audiobreak6 is 1>> <<set $audiobreak6 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree16 gte 20>> <<if $endgametree6 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree6 to 1>> <</if>> <script> document.getElementById('pic16').src='ressources/icons/4J.webp'; </script> <<if $audiobreak6 is 2>> <<set $audiobreak6 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree6 gt 4 and $randomtree6 lt 7>> <<repeat 0.1s>> <<if $clicktree17 gte 13>> <<if $clicktree17 lt 27>> <script> document.getElementById('pic17').src='ressources/icons/4M.webp'; </script> <<if $audiobreak6 is 0>> <<set $audiobreak6 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree17 gte 27>> <<if $clicktree17 lt 40>> <script> document.getElementById('pic17').src='ressources/icons/4N.webp'; </script> <<if $audiobreak6 is 1>> <<set $audiobreak6 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree17 gte 40>> <<if $endgametree6 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree6 to 1>> <</if>> <script> document.getElementById('pic17').src='ressources/icons/4O.webp'; </script> <<if $audiobreak6 is 2>> <<set $audiobreak6 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree6 is 7>> <<repeat 0.1s>> <<if $clicktree18 gte 27>> <<if $clicktree18 lt 53>> <script> document.getElementById('pic18').src='ressources/icons/4Q.webp'; </script> <<if $audiobreak6 is 0>> <<set $audiobreak6 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree18 gte 53>> <<if $clicktree18 lt 80>> <script> document.getElementById('pic18').src='ressources/icons/4R.webp'; </script> <<if $audiobreak6 is 1>> <<set $audiobreak6 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree18 gte 80>> <<if $endgametree6 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree6 to 1>> <</if>> <script> document.getElementById('pic18').src='ressources/icons/4S.webp'; </script> <<if $audiobreak6 is 2>> <<set $audiobreak6 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree7 lte 4>> <<repeat 0.1s>> <<if $clicktree19 gte 7>> <<if $clicktree19 lt 13>> <script> document.getElementById('pic19').src='ressources/icons/4F.webp'; </script> <<if $audiobreak7 is 0>> <<set $audiobreak7 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree19 gte 13>> <<if $clicktree19 lt 20>> <script> document.getElementById('pic19').src='ressources/icons/4H.webp'; </script> <<if $audiobreak7 is 1>> <<set $audiobreak7 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree19 gte 20>> <<if $endgametree7 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree7 to 1>> <</if>> <script> document.getElementById('pic19').src='ressources/icons/4J.webp'; </script> <<if $audiobreak7 is 2>> <<set $audiobreak7 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree7 gt 4 and $randomtree7 lt 7>> <<repeat 0.1s>> <<if $clicktree20 gte 13>> <<if $clicktree20 lt 27>> <script> document.getElementById('pic20').src='ressources/icons/4M.webp'; </script> <<if $audiobreak7 is 0>> <<set $audiobreak7 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree20 gte 27>> <<if $clicktree20 lt 40>> <script> document.getElementById('pic20').src='ressources/icons/4N.webp'; </script> <<if $audiobreak7 is 1>> <<set $audiobreak7 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree20 gte 40>> <<if $endgametree7 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree7 to 1>> <</if>> <script> document.getElementById('pic20').src='ressources/icons/4O.webp'; </script> <<if $audiobreak7 is 2>> <<set $audiobreak7 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<if $randomtree7 is 7>> <<repeat 0.1s>> <<if $clicktree21 gte 27>> <<if $clicktree21 lt 53>> <script> document.getElementById('pic21').src='ressources/icons/4Q.webp'; </script> <<if $audiobreak7 is 0>> <<set $audiobreak7 to 1>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree21 gte 53>> <<if $clicktree21 lt 80>> <script> document.getElementById('pic21').src='ressources/icons/4R.webp'; </script> <<if $audiobreak7 is 1>> <<set $audiobreak7 to 2>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</if>> <<if $clicktree21 gte 80>> <<if $endgametree7 is 0>> <<set $endgame to $endgame +1>> <<set $endgametree7 to 1>> <</if>> <script> document.getElementById('pic21').src='ressources/icons/4S.webp'; </script> <<if $audiobreak7 is 2>> <<set $audiobreak7 to 3>> <audio autoplay> <source src="ressources/sounds/4B.mp3" type="audio/mp3"> </audio> <</if>> <</if>> <</repeat>> <</if>> <<repeat 1s>> <<if $endgamebox is 0>> <<if $endgame gte 7>> <<toggleclass "#app" "hidden">> <style> .Endgamebox1 { z-index: 110; position: absolute; color: white; width: 45.926vh; left: 83vh; opacity: 0; border-radius: 1.481vh; animation: fade-in3 1s forwards; background-color: rgba(0, 0, 0, 0.7); border-radius: 15px; box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5); height: 15vh; } @keyframes fade-in3 { from { opacity: 0; height: 0; width: 59.259vh; } to { opacity: 0.9; height: 20vh; width: 59.259vh; } } </style> <<set $endgamebox to 1>> <div class="Endgamebox1" id="Endgamebox1"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)">Good</div> <p class="endtitle"><b>ALL TREES CHOPPED!</b></p> <p>Trees chopped: $endgame</p> <p>Wood earned: $woodcounter</p> </div> <div id="anticlick"></div> <script> var valueAdded = modVariable("add", "item", "wood", SugarCube.State.variables.woodcounter).valueAdded; SugarCube.State.variables.achievements.eventTrigger.woodChopping_1 += valueAdded; nextPartOfDay(); clearInterval(timerInterval); localStorage.removeItem("timePassed"); </script> <</if>> <</if>> <</repeat>> <<timed 15s>> <<if $endgame lt 7>> <<toggleclass "#app" "hidden">> <style> .Endgamebox2 { z-index: 110; position: absolute; color: white; width: 45.926vh; left: 83vh; opacity: 0; border-radius: 1.481vh; animation: fade-in3 1s forwards; background-color: rgba(0, 0, 0, 0.7); border-radius: 15px; box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5); height: 15vh; } @keyframes fade-in3 { from { opacity: 0; height: 0; width: 59.259vh; } to { opacity: 0.9; height: 20vh; width: 59.259vh; } } </style> <div class="Endgamebox2" id="Endgamebox2"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)">Good</div> <p class="endtitle"><b>TIME'S UP!</b></p> <p>Trees chopped: $endgame</p> <p>Wood earned: $woodcounter</p> </div> <div id="anticlick"></div> <script> /*modVariable("add", "item", "wood", SugarCube.State.variables.woodcounter );*/ var valueAdded = modVariable("add", "item", "wood", SugarCube.State.variables.woodcounter).valueAdded; SugarCube.State.variables.achievements.eventTrigger.woodChopping_1 += valueAdded; nextPartOfDay(); </script> <</if>> <</timed>> <<if $timesetter lte 1>> <style> body { background: url(ressources/backgrounds/4B.webp) no-repeat center center fixed; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 100%; overflow: hidden; } </style> <</if>> <<if $timesetter gte 2>> <style> .endtitle { font-size: 20px; margin-top: 1.481vh; margin-bottom: 2.963vh; text-align: center; } p { margin-bottom: 2.963vh; text-align: center; } body { background: url(ressources/backgrounds/4A.webp) no-repeat center center fixed; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; z-index: 5; } </style> <</if>> <</nobr>>\ <style> .base-timer { position: absolute; width: 14.815vh; height: 14.815vh; margin-top: -1.481vh; margin-left: -34vh; z-index: 3; } .base-timer__svg { transform: scaleX(-1); } .base-timer__circle { fill: none; stroke: none; } .base-timer__path-elapsed { stroke-width: 0.733vh; stroke: grey; } .base-timer__path-remaining { stroke-width: 0.733vh; stroke-linecap: round; transform: rotate(90deg); transform-origin: center; transition: 1s linear all; fill-rule: nonzero; stroke: currentColor; } .base-timer__path-remaining.green { color: rgb(65, 184, 131); } .base-timer__path-remaining.orange { color: orange; } .base-timer__path-remaining.red { color: red; } .base-timer__label { position: relative; top: -12vh; display: flex; align-items: center; justify-content: center; font-size: 4.19vh; z-index: 3; } .tree1 { width: 14.815vh; height: 11.852vh; margin-left: -29.63vh; margin-top: 44vh; position: absolute; } .tree1:hover { opacity: 0.8; } .tree2 { width: 14.815vh; height: 17.778vh; margin-left: -29.63vh; margin-top: 37.037vh; position: absolute; } .tree2:hover { opacity: 0.8; } .tree3 { width: 14.815vh; height: 14.815vh; margin-left: -29.63vh; margin-top: 44vh; position: absolute; } .tree3:hover { opacity: 0.8; } .tree4 { width: 29.63vh; height: 23.704vh; margin-left: 22.222vh; margin-top: 47.407vh; position: absolute; } .tree4:hover { opacity: 0.8; } .tree5 { width: 22.222vh; height: 29.63vh; margin-left: 22.222vh; margin-top: 40vh; position: absolute; } .tree5:hover { opacity: 0.8; } .tree6 { width: 29.63vh; height: 29.63vh; margin-left: 22.222vh; margin-top: 44.444vh; position: absolute; } .tree6:hover { opacity: 0.8; } .tree7 { width: 14.815vh; height: 11.852vh; margin-left: 7.407vh; margin-top: 42vh; position: absolute; } .tree7:hover { opacity: 0.8; } .tree8 { width: 14.815vh; height: 17.778vh; margin-left: 7.407vh; margin-top: 35vh; position: absolute; } .tree8:hover { opacity: 0.8; } .tree9 { width: 14.815vh; height: 14.815vh; margin-left: 7.407vh; margin-top: 38vh; position: absolute; } .tree9:hover { opacity: 0.8; } .tree10 { width: 22.222vh; height: 16.296vh; margin-left: 97vh; margin-top: 40vh; position: absolute; } .tree10:hover { opacity: 0.8; } .tree11 { width: 16.296vh; height: 22.222vh; margin-left: 97vh; margin-top: 40vh; position: absolute; } .tree11:hover { opacity: 0.8; } .tree12 { width: 22.222vh; height: 22.222vh; margin-left: 97vh; margin-top: 40vh; position: absolute; } .tree12:hover { opacity: 0.8; } .tree13 { width: 32.593vh; height: 25.185vh; margin-left: -14.815vh; margin-top: 56.296vh; position: absolute; } .tree13:hover { opacity: 0.8; } .tree14 { width: 25.185vh; height: 32.593vh; margin-left: -14.815vh; margin-top: 48.889vh; position: absolute; } .tree14:hover { opacity: 0.8; } .tree15 { width: 32.593vh; height: 32.593vh; margin-left: -14.815vh; margin-top: 50.37vh; position: absolute; } .tree15:hover { opacity: 0.8; } .tree16 { width: 26.667vh; height: 20.741vh; margin-left: 65vh; margin-top: 55vh; position: absolute; } .tree16:hover { opacity: 0.8; } .tree17 { width: 20.741vh; height: 26.667vh; margin-left: 65vh; margin-top: 55vh; position: absolute; } .tree17:hover { opacity: 0.8; } .tree18 { width: 26.667vh; height: 26.667vh; margin-left: 65vh; margin-top: 55vh; position: absolute; } .tree18:hover { opacity: 0.8; } .tree19 { width: 14.815vh; height: 11.852vh; margin-left: 54vh; margin-top: 42vh; position: absolute; } .tree19:hover { opacity: 0.8; } .tree20 { width: 11.852vh; height: 14.815vh; margin-left: 54vh; margin-top: 39vh; position: absolute; } .tree20:hover { opacity: 0.8; } .tree21 { width: 14.815vh; height: 14.815vh; margin-left: 54vh; margin-top: 39vh; position: absolute; } .tree21:hover { opacity: 0.8; } #anticlick { position: absolute; margin-left: -100em; margin-top: -100em; height: 1000em; width: 1000em; background-color: red; opacity: 0; } .filter { position: absolute; margin-left: -100em; margin-top: -100em; height: 1000em; width: 1000em; background-color: black; opacity: 0.3; z-index: 2; pointer-events: none; } #story { /* Specify the cursor image */ cursor: url('ressources/icons/4T.webp'), auto; cursor-size: 10vw; height: 100vh; } #story:active { /* Specify the cursor image */ cursor: url('ressources/icons/4U.webp'), auto; } .woodcounter { height: 10vh; width: 9vw; border-radius: 1.481vh; border: 0.296vh black solid; border-radius: 1.481vh; background-color: rgba(0, 0, 0, 0.7); border-radius: 15px; box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5); float: right; margin-right: -16vw; margin-top: -1vh; object-fit: contain; display: flex; flex-direction: row-reverse; } h1 { width: 50%; margin: 0; margin: auto; margin-left: 0.5vw; color: white; text-align: center; } .woodicon { width: 40%; margin: 1vw; } @keyframes bop { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bop { animation: bop 0.2s; } .neon-button2 { position: absolute; margin: auto; margin-left: 4vw; margin-top: 24vh; } .macro-timed { margin: auto; } .woodcounter { height: 10vh; width: 9vw; border-radius: 1.481vh; border: 0.296vh black solid; border-radius: 1.481vh; background-color: rgba(0, 0, 0, 0.7); border-radius: 15px; box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5); float: right; margin-right: -16vw; margin-top: -1vh; object-fit: contain; display: flex; flex-direction: row-reverse; } .woodicon { width: 40%; margin: 1vw; } </style>\ <script> var FULL_DASH_ARRAY = 283; var WARNING_THRESHOLD = 10; var ALERT_THRESHOLD = 5; var COLOR_CODES = { info: { color: "green" }, warning: { color: "orange", threshold: WARNING_THRESHOLD }, alert: { color: "red", threshold: ALERT_THRESHOLD } }; var TIME_LIMIT = 15; var timePassed = 0; var timeLeft = TIME_LIMIT - timePassed; var timerInterval = null; var remainingPathColor = COLOR_CODES.info.color; // This function updates the time left and the visual representation function startTimer() { timerInterval = setInterval(() => { var baseTimerLabel = window.document.getElementById("base-timer-label") if (baseTimerLabel == null) { clearInterval(timerInterval); return; } timePassed++; timeLeft = TIME_LIMIT - timePassed; baseTimerLabel.innerHTML = formatTime(timeLeft); setCircleDasharray(); setRemainingPathColor(timeLeft); if (timeLeft === 0) { onTimesUp(); } // Update the time passed in localStorage localStorage.setItem("timePassed", timePassed); }, 1000); } function formatTime(time) { const minutes = Math.floor(time / 60); let seconds = time % 60; if (seconds < 10) { seconds = `0${seconds}`; } return `${minutes}:${seconds}`; } function setRemainingPathColor(timeLeft) { const { alert, warning, info } = COLOR_CODES; const element = document.getElementById("base-timer-path-remaining"); // Remove old color and apply new element.classList.remove(info.color, warning.color, alert.color); if (timeLeft <= alert.threshold) { element.classList.add(alert.color); } else if (timeLeft <= warning.threshold) { element.classList.add(warning.color); } else { element.classList.add(info.color); } } function calculateTimeFraction() { const rawTimeFraction = timeLeft / TIME_LIMIT; return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction); } function setCircleDasharray() { const circleDasharray = `${(calculateTimeFraction() * FULL_DASH_ARRAY).toFixed(0)} 283`; document.getElementById("base-timer-path-remaining").setAttribute("stroke-dasharray", circleDasharray); } function onTimesUp() { clearInterval(timerInterval); localStorage.removeItem("timePassed"); } // Render the timer initially window.document.getElementById("app").innerHTML = ` <div class="base-timer"> <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g class="base-timer__circle"> <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle> <path id="base-timer-path-remaining" stroke-dasharray="283" class="base-timer__path-remaining ${remainingPathColor}" d=" M 50, 50 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0 " ></path> </g> </svg> <span id="base-timer-label" class="base-timer__label">${formatTime( timeLeft )}</span> </div> `; // Only start the timer if there's time left if (timeLeft > 0) { startTimer(); } woodcounterElem = document.querySelector('.woodcounter').querySelector('h1'); function addWood(value) { SugarCube.State.variables.woodcounter += value; var counterValueElem = document.getElementById("woodcounterValue"); counterValueElem.innerHTML = SugarCube.State.variables.woodcounter; let woodcounterElem = document.querySelector(".woodcounter"); // Apply the "bop" class to trigger the animation woodcounterElem.classList.add("bop"); // Remove the "bop" class after the animation ends setTimeout(function () { woodcounterElem.classList.remove("bop"); }, 200); } var executed = false; var executed2 = false; var executed3 = false; var executed4 = false; var executed5 = false; var executed6 = false; var executed7 = false; var executed8 = false; var executed9 = false; var executed10 = false; var executed11 = false; var executed12 = false; var executed13 = false; var executed14 = false; var executed15 = false; var executed16 = false; var executed17 = false; var executed18 = false; var executed19 = false; var executed20 = false; var executed21 = false; function myFunction1x1() { SugarCube.State.variables.clicktree += SugarCube.State.variables.axepower if (SugarCube.State.variables.clicktree < 20) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree > 6 && !executed) { addWood(2); executed = true; } if (SugarCube.State.variables.clicktree > 12 && !executed2) { addWood(2); executed2 = true; } if (SugarCube.State.variables.clicktree > 19 && !executed3) { addWood(5); executed3 = true; } } function myFunction1x2() { SugarCube.State.variables.clicktree2 += SugarCube.State.variables.axepower if (SugarCube.State.variables.clicktree2 < 40) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree2 > 12 && !executed) { addWood(4); executed = true; } if (SugarCube.State.variables.clicktree2 > 26 && !executed2) { addWood(4); executed2 = true; } if (SugarCube.State.variables.clicktree2 > 39 && !executed3) { addWood(10); executed3 = true; } } function myFunction1x3() { SugarCube.State.variables.clicktree3 += SugarCube.State.variables.axepower if (SugarCube.State.variables.clicktree3 < 80) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree3 > 26 && !executed) { addWood(5); executed = true; } if (SugarCube.State.variables.clicktree3 > 52 && !executed2) { addWood(5); executed2 = true; } if (SugarCube.State.variables.clicktree3 > 79 && !executed3) { addWood(15); executed3 = true; } } function myFunction2x1() { SugarCube.State.variables.clicktree4 += SugarCube.State.variables.axepower if (SugarCube.State.variables.clicktree4 < 20) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree4 > 6 && !executed4) { addWood(2); executed4 = true; } if (SugarCube.State.variables.clicktree4 > 12 && !executed5) { addWood(2); executed5 = true; } if (SugarCube.State.variables.clicktree4 > 19 && !executed6) { addWood(5); executed6 = true; } } function myFunction2x2() { SugarCube.State.variables.clicktree5 += SugarCube.State.variables.axepower if (SugarCube.State.variables.clicktree5 < 40) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree5 > 12 && !executed4) { addWood(4); executed4 = true; } if (SugarCube.State.variables.clicktree5 > 26 && !executed5) { addWood(4); executed5 = true; } if (SugarCube.State.variables.clicktree5 > 39 && !executed6) { addWood(10); executed6 = true; } } function myFunction2x3() { SugarCube.State.variables.clicktree6 += SugarCube.State.variables.axepower if (SugarCube.State.variables.clicktree6 < 80) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree6 > 26 && !executed4) { addWood(5); executed4 = true; } if (SugarCube.State.variables.clicktree6 > 52 && !executed5) { addWood(5); executed5 = true; } if (SugarCube.State.variables.clicktree6 > 79 && !executed6) { addWood(15); executed6 = true; } } function myFunction3x1() { SugarCube.State.variables.clicktree7 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree7 < 20) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree7 > 6 && !executed7) { addWood(2); executed7 = true; } if (SugarCube.State.variables.clicktree7 > 12 && !executed8) { addWood(2); executed8 = true; } if (SugarCube.State.variables.clicktree7 > 19 && !executed9) { addWood(5); executed9 = true; } } function myFunction3x2() { SugarCube.State.variables.clicktree8 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree8 < 40) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree8 > 12 && !executed7) { addWood(4); executed7 = true; } if (SugarCube.State.variables.clicktree8 > 26 && !executed8) { addWood(4); executed8 = true; } if (SugarCube.State.variables.clicktree8 > 39 && !executed9) { addWood(10); executed9 = true; } } function myFunction3x3() { SugarCube.State.variables.clicktree9 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree9 < 80) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree9 > 26 && !executed7) { addWood(5); executed7 = true; } if (SugarCube.State.variables.clicktree9 > 52 && !executed8) { addWood(5); executed8 = true; } if (SugarCube.State.variables.clicktree9 > 79 && !executed9) { addWood(15); executed9 = true; } } function myFunction4x1() { SugarCube.State.variables.clicktree10 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree10 < 20) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree10 > 6 && !executed10) { addWood(2); executed10 = true; } if (SugarCube.State.variables.clicktree10 > 12 && !executed11) { addWood(2); executed11 = true; } if (SugarCube.State.variables.clicktree10 > 19 && !executed12) { addWood(5); executed12 = true; } } function myFunction4x2() { SugarCube.State.variables.clicktree11 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree11 < 40) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree11 > 12 && !executed10) { addWood(4); executed10 = true; } if (SugarCube.State.variables.clicktree11 > 26 && !executed11) { addWood(4); executed11 = true; } if (SugarCube.State.variables.clicktree11 > 39 && !executed12) { addWood(10); executed12 = true; } } function myFunction4x3() { SugarCube.State.variables.clicktree12 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree12 < 80) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree12 > 26 && !executed10) { addWood(5); executed10 = true; } if (SugarCube.State.variables.clicktree12 > 52 && !executed11) { addWood(5); executed11 = true; } if (SugarCube.State.variables.clicktree12 > 79 && !executed12) { addWood(15); executed12 = true; } } function myFunction5x1() { SugarCube.State.variables.clicktree13 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree13 < 20) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree13 > 6 && !executed13) { addWood(2); executed13 = true; } if (SugarCube.State.variables.clicktree13 > 12 && !executed14) { addWood(2); executed14 = true; } if (SugarCube.State.variables.clicktree13 > 19 && !executed15) { addWood(5); executed15 = true; } } function myFunction5x2() { SugarCube.State.variables.clicktree14 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree14 < 40) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree14 > 12 && !executed13) { addWood(4); executed13 = true; } if (SugarCube.State.variables.clicktree14 > 26 && !executed14) { addWood(4); executed14 = true; } if (SugarCube.State.variables.clicktree14 > 39 && !executed15) { addWood(10); executed15 = true; } } function myFunction5x3() { SugarCube.State.variables.clicktree15 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree15 < 80) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree15 > 26 && !executed13) { addWood(5); executed13 = true; } if (SugarCube.State.variables.clicktree15 > 52 && !executed14) { addWood(5); executed14 = true; } if (SugarCube.State.variables.clicktree15 > 79 && !executed15) { addWood(15); executed15 = true; } } function myFunction6x1() { SugarCube.State.variables.clicktree16 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree16 < 20) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree16 > 6 && !executed16) { addWood(2); executed16 = true; } if (SugarCube.State.variables.clicktree16 > 12 && !executed17) { addWood(2); executed17 = true; } if (SugarCube.State.variables.clicktree16 > 19 && !executed18) { addWood(5); executed18 = true; } } function myFunction6x2() { SugarCube.State.variables.clicktree17 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree17 < 40) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree17 > 12 && !executed16) { addWood(4); executed16 = true; } if (SugarCube.State.variables.clicktree17 > 26 && !executed17) { addWood(4); executed17 = true; } if (SugarCube.State.variables.clicktree17 > 39 && !executed18) { addWood(10); executed18 = true; } } function myFunction6x3() { SugarCube.State.variables.clicktree18 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree18 < 80) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree18 > 26 && !executed16) { addWood(5); executed16 = true; } if (SugarCube.State.variables.clicktree18 > 52 && !executed17) { addWood(5); executed17 = true; } if (SugarCube.State.variables.clicktree18 > 79 && !executed18) { addWood(15); executed18 = true; } } function myFunction7x1() { SugarCube.State.variables.clicktree19 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree19 < 20) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree19 > 6 && !executed19) { addWood(2); executed19 = true; } if (SugarCube.State.variables.clicktree19 > 12 && !executed20) { addWood(2); executed20 = true; } if (SugarCube.State.variables.clicktree19 > 19 && !executed21) { addWood(5); executed21 = true; } } function myFunction7x2() { SugarCube.State.variables.clicktree20 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree20 < 40) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree20 > 12 && !executed19) { addWood(4); executed19 = true; } if (SugarCube.State.variables.clicktree20 > 26 && !executed20) { addWood(4); executed20 = true; } if (SugarCube.State.variables.clicktree20 > 39 && !executed21) { addWood(10); executed21 = true; } } function myFunction7x3() { SugarCube.State.variables.clicktree21 += SugarCube.State.variables.axepower; if (SugarCube.State.variables.clicktree21 < 80) { var audio = new Audio('ressources/sounds/4A.mp3'); audio.play(); } if (SugarCube.State.variables.clicktree21 > 26 && !executed19) { addWood(5); executed19 = true; } if (SugarCube.State.variables.clicktree21 > 52 && !executed20) { addWood(5); executed20 = true; } if (SugarCube.State.variables.clicktree21 > 79 && !executed21) { addWood(15); executed21 = true; } } function devchop() { SugarCube.State.variables.clicktree = 1000; SugarCube.State.variables.clicktree2 = 1000; SugarCube.State.variables.clicktree3 = 1000; SugarCube.State.variables.clicktree4 = 1000; SugarCube.State.variables.clicktree5 = 1000; SugarCube.State.variables.clicktree6 = 1000; SugarCube.State.variables.clicktree7 = 1000; SugarCube.State.variables.clicktree8 = 1000; SugarCube.State.variables.clicktree9 = 1000; SugarCube.State.variables.clicktree10 = 1000; SugarCube.State.variables.clicktree11 = 1000; SugarCube.State.variables.clicktree12 = 1000; SugarCube.State.variables.clicktree13 = 1000; SugarCube.State.variables.clicktree14 = 1000; SugarCube.State.variables.clicktree15 = 1000; SugarCube.State.variables.clicktree16 = 1000; SugarCube.State.variables.clicktree17 = 1000; SugarCube.State.variables.clicktree18 = 1000; SugarCube.State.variables.clicktree19 = 1000; SugarCube.State.variables.clicktree20 = 1000; SugarCube.State.variables.clicktree21 = 1000; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("2A1"); } </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <<set $uglyfish to 0>> <<set $seabass to 0>> <<set $carp to 0>> <<set $catfish to 0>> <<set $tilapia to 0>> <<set $mackerel to 0>> <<set $flounder to 0>> <<set $sardine to 0>> <<set $saury to 0>> <<set $scad to 0>> <<set $seaperch to 0>> <<set $salmon to 0>> <<set $tuna to 0>> <<set $pike to 0>> <<set $cod to 0>> <<set $barracuda to 0>> <<set $marlin to 0>> <<set $swordfish to 0>> <<set $sturgeon to 0>> <<set $sterlet to 0>> <<set $eldorado to 0>> <<set $twilight to 0>> <<set $timesetter to 1>> <<if $timesetter gte 2>> <div class="filter"></div> <</if>> <div class="containcenter"> <div class="flexgame" onmousedown="change()" onmouseup="change2()"> <img id="pic" class="rod" src="ressources/icons/5C.webp" alt="A" draggable="false"> </div> <<set $random_number to random(3,7)>> <<set $random_number to $random_number+"s">> <<timed $random_number>> <audio autoplay> <source src="ressources/sounds/5B.mp3" type="audio/mp3"> </audio> <img id="splash" class="hidden" src="ressources/icons/5E.webp"> <div class="boutonfish"> [["Good"|5B]] </div> <<timed 1.5s>> <<replace ".passage">> <<include "5A">> <</replace>> <</timed>> <</timed>> <<if $tutorial.tutorialfishing is 0>> <div class="Paragraph"> <p>Welcome to the fishing pond. To make a fish catch your line, click on the fishing rod when some bubbles appear.</p> </div> <</if>> <</nobr>>\ <style> body { overflow: hidden; } .Paragraph { width: 30%; font-size: 20px; opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s; position: absolute; margin: auto; border-radius: 1.481vh; animation: fade-in3 1s forwards; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5); color: white; padding: 1vw; margin-top: 22%; margin-left: 23%; } p { margin-top: 0 } .containcenter { width: calc(100vw - 17.5em); height: 100vh; } #story { margin-left: 0; width: 100vw; height: 100vh; overflow-y: auto; /* Add a scrollbar if the content is longer than the screen */ margin: 0; margin-left: 26vh; position: !important absolute; z-index: 1; } #story::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-size: cover; opacity: 0; z-index: -1; transition: opacity 1s ease-in-out; /* Adjust duration as needed */ } #story.fade-background::before { opacity: 1; } #ui-bar.stowed~#story { margin-left: 2em; } /* Adjust the story area when the UI bar is open */ html[data-ui-bar='true'] #story { width: calc(100vw - 17.5em); /* Adjust for the 17.5em sidebar width */ } /* Adjustments for smaller screens */ @media screen abhnd (max-width: 800px) { html[data-ui-bar='true'] #story { width: 100vw; } } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; height: 100vh; } .passage { width: 100%; height: 100vh; } body { font-family: sans-serif; background: url(ressources/backgrounds/2A.webp) no-repeat center center fixed; background-position: left; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; bottom: 3%; margin: 0; overflow: hidden; } .flexgame { margin: auto; width: 50%; display: flex; flex-direction: row-reverse; position: relative; top: 45%; bottom: 55%; align-items: flex-start; } .rod { position: relative; width: 75%; height: 75%; top: 0; left: 0; bottom: 0; } #splash { width: 30%; margin-left: 30.2vw; margin-top: 1.5vh; position: absolute; z-index: 1000; pointer-events: none; } .passage-in, .passage-out { position: absolute; opacity: 0; } .passage { transition-property: none; } .boutonfish > a { position: absolute; left: 0; top: 0; height: 1000%; width: 1000%; background-color:red; opacity: 0; } .boutonfish { position: absolute; height: 100%; width: calc(100% - 17.5em); } .filter { position: absolute; margin-left: -100em; margin-top: -100em; height: 1000em; width: 1000em; background-color: #0f0b47; opacity: 0.55; z-index: 0; pointer-events: none; } </style>\ <script> function change(){ document.getElementById('pic').src='ressources/icons/5D.webp'; var sound = new Audio('ressources/sounds/5A.mp3'); sound.play(); onmouseup = function(){sound.pause(); sound.currentTime = 0;} } function change2(){ document.getElementById('pic').src='ressources/icons/5C.webp'; } </script>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <<set $fishrandomizer to random(1, 1000)>> <<if $fishrandomizer lte 1000>> <<if $fishrandomizer gte 987>> <<set $uglyfish to 1>> <</if>> <</if>> <<if $fishrandomizer lte 986>> <<if $fishrandomizer gte 887>> <<set $seabass to 1>> <</if>> <</if>> <<if $fishrandomizer lte 886>> <<if $fishrandomizer gte 787>> <<set $carp to 1>> <</if>> <</if>> <<if $fishrandomizer lte 786>> <<if $fishrandomizer gte 687>> <<set $catfish to 1>> <</if>> <</if>> <<if $fishrandomizer lte 686>> <<if $fishrandomizer gte 587>> <<set $tilapia to 1>> <</if>> <</if>> <<if $fishrandomizer lte 586>> <<if $fishrandomizer gte 487>> <<set $mackerel to 1>> <</if>> <</if>> <<if $fishrandomizer lte 486>> <<if $fishrandomizer gte 387>> <<set $flounder to 1>> <</if>> <</if>> <<if $fishrandomizer lte 386>> <<if $fishrandomizer gte 327>> <<set $sardine to 1>> <</if>> <</if>> <<if $fishrandomizer lte 326>> <<if $fishrandomizer gte 267>> <<set $saury to 1>> <</if>> <</if>> <<if $fishrandomizer lte 266>> <<if $fishrandomizer gte 207>> <<set $scad to 1>> <</if>> <</if>> <<if $fishrandomizer lte 206>> <<if $fishrandomizer gte 147>> <<set $seaperch to 1>> <</if>> <</if>> <<if $fishrandomizer lte 146>> <<if $fishrandomizer gte 127>> <<set $salmon to 1>> <</if>> <</if>> <<if $fishrandomizer lte 126>> <<if $fishrandomizer gte 107>> <<set $tuna to 1>> <</if>> <</if>> <<if $fishrandomizer lte 106>> <<if $fishrandomizer gte 87>> <<set $pike to 1>> <</if>> <</if>> <<if $fishrandomizer lte 86>> <<if $fishrandomizer gte 67>> <<set $cod to 1>> <</if>> <</if>> <<if $fishrandomizer lte 66>> <<if $fishrandomizer gte 47>> <<set $barracuda to 1>> <</if>> <</if>> <<if $fishrandomizer lte 46>> <<if $fishrandomizer gte 37>> <<set $marlin to 1>> <</if>> <</if>> <<if $fishrandomizer lte 36>> <<if $fishrandomizer gte 27>> <<set $swordfish to 1>> <</if>> <</if>> <<if $fishrandomizer lte 26>> <<if $fishrandomizer gte 17>> <<set $sturgeon to 1>> <</if>> <</if>> <<if $fishrandomizer lte 16>> <<if $fishrandomizer gte 7>> <<set $sterlet to 1>> <</if>> <</if>> <<if $fishrandomizer lte 6>> <<if $fishrandomizer gte 2>> <<set $eldorado to 1>> <</if>> <</if>> <<if $fishrandomizer is 1>> <<set $twilight to 1>> <</if>> <<goto "5C">> <</nobr>>\
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <<set $pond to 0>> <<set $tutorial.tutorialfishing to 0>> <<if $timesetter gte 2>> <div class="filter"></div> <</if>> <<if $pond lt 1>> <script> var pondSize = 568; </script> <</if>> <div class="containcenter"> <div class="flexgame" onmousedown="change()" onmouseup="change2()"> <img id="pic" class="rod" src="ressources/icons/5C.webp" alt="A" draggable="false"> </div> <div id="canvas-wrapper" onmousedown="change()" onmouseup="change2()"> <div id="start_1" onclick="myFunction()" onclick="myFunction2()"> </div> <canvas id="canvas" width="66" height="579"> </canvas> </div> <div id="settings" style="display:none"> <label class="hidden"> Effective fishing level: <small title="Fishing level + food buff. Master enchantment adds 1 and cork bobber adds 3. Training rod sets this to at least 5.">(?)</small> <input type="number" id="level" value="0"> </label> <label class="hidden"> Difficulty: <small>(see <a href="https://stardewvalleywiki.com/Fish#Fish_Types">the wiki</a> for specific values)</small> <<if $uglyfish is 1>> <input type="number" id="difficulty" value="70"> <</if>> <<if $seabass is 1>> <input type="number" id="difficulty" value="30"> <</if>> <<if $carp is 1>> <input type="number" id="difficulty" value="30"> <</if>> <<if $catfish is 1>> <input type="number" id="difficulty" value="30"> <</if>> <<if $tilapia is 1>> <input type="number" id="difficulty" value="30"> <</if>> <<if $mackerel is 1>> <input type="number" id="difficulty" value="30"> <</if>> <<if $flounder is 1>> <input type="number" id="difficulty" value="30"> <</if>> <<if $sardine is 1>> <input type="number" id="difficulty" value="35"> <</if>> <<if $saury is 1>> <input type="number" id="difficulty" value="35"> <</if>> <<if $scad is 1>> <input type="number" id="difficulty" value="35"> <</if>> <<if $seaperch is 1>> <input type="number" id="difficulty" value="35"> <</if>> <<if $salmon is 1>> <input type="number" id="difficulty" value="40"> <</if>> <<if $tuna is 1>> <input type="number" id="difficulty" value="40"> <</if>> <<if $pike is 1>> <input type="number" id="difficulty" value="40"> <</if>> <<if $cod is 1>> <input type="number" id="difficulty" value="40"> <</if>> <<if $barracuda is 1>> <input type="number" id="difficulty" value="40"> <</if>> <<if $marlin is 1>> <input type="number" id="difficulty" value="50"> <</if>> <<if $swordfish is 1>> <input type="number" id="difficulty" value="50"> <</if>> <<if $sturgeon is 1>> <input type="number" id="difficulty" value="50"> <</if>> <<if $sterlet is 1>> <input type="number" id="difficulty" value="50"> <</if>> <<if $eldorado is 1>> <input type="number" id="difficulty" value="60"> <</if>> <<if $twilight is 1>> <input type="number" id="difficulty" value="70"> <</if>> </label> <label class="hidden"> Behavior: <select id="behavior" class="hidden"> <option value="mixed" selected="">Mixed</option> <option value="dart">Dart</option> <option value="smooth">Smooth</option> <option value="floater">Floater</option> <option value="sinker">Sinker</option> </select> <p id="accuracy"></p> </label> <label class="hidden"><input class="hidden" type="checkbox" id="treasure"> Spawn treasure chests (currently unimplemented)</label> <ul class="hidden"> <label class="hidden"><input type="checkbox" id="trap-bobber"> Trap Bobber</label> <label class="hidden"><input type="checkbox" id="lead-bobber" checked> Lead Bobber</label> <label class="hidden"><input type="checkbox" id="barbed-hook"> Barbed Hook</label> <label class="hidden"><input type="checkbox" id="treasure-hunter"> Treasure Hunter</label> </ul> </div> </div> <<if $tutorial.tutorialfishing is 0>> <div class="Paragraph"> <p>Something caught your line! Click anywhere to try to reel it in. You must keep the fish (yellow circle) in the green bar to catch it.</p> </div> <</if>> <</nobr>> <style> #settings { position: absolute; } .containcenter { width: calc(100vw - 17.5em); height: 100vh; } #story { margin-left: 0; width: 100vw; height: 100vh; overflow-y: auto; /* Add a scrollbar if the content is longer than the screen */ margin: 0; margin-left: 26vh; position: static; z-index: 1; } #story::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-size: cover; opacity: 0; z-index: -1; transition: opacity 1s ease-in-out; /* Adjust duration as needed */ } #story.fade-background::before { opacity: 1; } #ui-bar.stowed~#story { margin-left: 2em; } /* Adjust the story area when the UI bar is open */ html[data-ui-bar='true'] #story { width: calc(100vw - 17.5em); /* Adjust for the 17.5em sidebar width */ } /* Adjustments for smaller screens */ @media screen (max-width: 800px) { html[data-ui-bar='true'] #story { width: 100vw; } } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; height: 100vh; } .passage { width: 100%; height: 100vh; } body { font-family: sans-serif; background: url(ressources/backgrounds/2A.webp) no-repeat center center fixed; background-position: left; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; bottom: 3%; margin: 0; overflow: hidden; } .flexgame { margin: auto; width: 50%; display: flex; flex-direction: row-reverse; position: relative; align-items: flex-start; top: 45%; bottom: 55%; } .rod { position: relative; width: 75%; height: 75%; top: 0; left: 0; bottom: 0; } #canvas-wrapper { border: 5px solid black; padding: 1em; background-image: url(ressources/icons/5A.webp); background-size: cover; border-radius: 1em; width: 66px; height: 579px; margin-left: 22vw; margin-bottom: 10vh; position: absolute; margin-top: -20vh; } #canvas { padding-right: 100vh; } [title] { cursor: help; } label { display: block; margin-bottom: 0.5em; } input, select { display: block; } input[type=number] { width: 3.5em; } input[type=radio], input[type=checkbox] { display: inline-block; } .input-list { list-style-type: none; margin: 0 0 0.5em; padding: 0; } .input-list>label { display: list-item; margin: 0; } .Paragraph { width: 30%; font-size: 20px; opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s; position: absolute; margin: auto; border-radius: 1.481vh; animation: fade-in3 1s forwards; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5); color: white; padding: 1vw; margin-top: -7%; margin-left: 20%; } p { margin-top: 0; } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } #start_1 { position: absolute; width: 66px; height: 579px; padding: 100vh; } #start_1:hover { cursor: pointer; } .filter { position: absolute; margin-left: -100em; margin-top: -100em; height: 1000em; width: 1000em; background-color: #0f0b47; opacity: 0.55; z-index: 0; pointer-events: none; } </style> <script> function myFunction() { var x = document.getElementById("start_1"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } function myFunction2() { var x = document.getElementById("Paragraph"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } function change(){ document.getElementById('pic').src='ressources/icons/5D.webp'; var sound = new Audio('ressources/sounds/5A.mp3'); sound.play(); onmouseup = function(){sound.pause(); sound.currentTime = 0;} } function change2(){ document.getElementById('pic').src='ressources/icons/5C.webp'; } function rand(min, max) { return min + Math.floor(Math.random() * (max - min)); } function el(s) { return document.getElementById(s); } setTimeout(() => { /*window.addEventListener('load', function() {*/ console.log("RAN"); var mouseDown = false; el('canvas-wrapper').addEventListener('mousedown', function(e) { e.preventDefault(); mouseDown = true; }); window.addEventListener('mouseup', () => mouseDown = false); var canvas = el('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'transparent'; ctx.lineWidth = 2; ctx.fillRect(6, 1, 32, pondSize); var button_1 = el('start_1'); button_1.addEventListener('click', function() { console.log("CLICKED"); button_1.disabled = true; var trapBobber = el('trap-bobber').checked; var leadBobber = el('lead-bobber').checked; var barbedHook = el('barbed-hook').checked; var treasureHunter = el('treasure-hunter').checked; var treasure = el('treasure').checked; var difficulty = parseInt(el('difficulty').value); var behavior = el('behavior').value; var barSize = 150 + 8 * parseInt(el('level').value); var barPos = pondSize - barSize; var barVel = 0; var fishPos = 508; var fishVel = 0; var fishBaseVel = 0; var fishTarget = (1 - difficulty / 100) * 548; var progress = 300; var fishingTime = 0; var inBarTime = 0; var interval = setInterval(function() { if (Math.random() < difficulty * (behavior === 'smooth' ? 0.005 : 0.00025) && (fishTarget === -1 || behavior !== 'smooth')) { var percent = Math.min(99, difficulty + rand(10, 45)) * 0.01; fishTarget = fishPos + rand(Math.ceil(-fishPos), Math.floor(pondSize - 20 - fishPos) * percent); } if (fishTarget != -1 && Math.abs(fishPos - fishTarget) > 3) { var fishAccel = (fishTarget - fishPos) / (rand(10, 30) + Math.max(0, 100 - difficulty)); fishVel += (fishAccel - fishVel) / 5; } else if (behavior !== 'smooth' && Math.random() < 0.0005 * difficulty) fishTarget = fishPos + (Math.random() < 0.5 ? rand(-100, -51) : rand(50, 101)) else fishTarget = -1; if (behavior === 'dart' && Math.random() < 0.001 * difficulty) fishTarget = fishPos + (Math.random() < 0.5 ? rand(-100 - difficulty * 2, -51) : rand(50, 101 + difficulty * 2)) if (behavior === 'floater') fishBaseVel = Math.max(fishBaseVel - 0.01, -1.5); else if (behavior === 'sinker') fishBaseVel = Math.min(fishBaseVel + 0.01, 1.5); fishTarget = Math.max(-1, Math.min(fishTarget, pondSize - 20)); fishPos = Math.max(0, Math.min(fishPos + fishVel + fishBaseVel, pondSize - 36)); var wasInBar = (fishPos + 44 <= barPos + barSize || barPos >= pondSize - barSize - 4) && fishPos + 16 >= barPos; var bacc = mouseDown ? -0.25 : 0.25 if (wasInBar) { bacc *= 0.6; progress += 2; if (barbedHook) { bacc *= 0.5; if (fishPos + 16 < barPos + barSize / 2) barVel -= 0.2; else barVel += 0.2; } } else if (!treasureHunter /* TODO add treasure check */) { if (trapBobber) progress -= 2; else progress -= 3; } progress = Math.max(0, Math.min(progress, 1000)); barVel += bacc; barPos += barVel; // check for the bar hitting the edge if (barPos < 0) { barPos = 0; barVel = mouseDown ? 0 : -2/3 * barVel; } else if (barPos + barSize > pondSize) { barPos = pondSize - barSize; barVel = mouseDown ? 0 : (leadBobber ? -0.1 : -2/3) * barVel; } fishingTime++; if (wasInBar) inBarTime++; el('accuracy').innerText = `Accuracy: ${Math.round(100 * inBarTime / fishingTime)}%`; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'transparent'; ctx.fillRect(6, 1, 32, pondSize); ctx.fillStyle = 'lime'; if (!wasInBar) ctx.globalAlpha = 0.4; ctx.fillRect(5, 1 + barPos, 32, barSize); ctx.globalAlpha = 1; ctx.strokeRect(5, 1 + barPos, 32, barSize); if (progress >= 1000) { ctx.fillStyle = 'green'; clearInterval(interval); button_1.disabled = false; SugarCube.Engine.play("5D"); } else if (progress <= 0) { ctx.fillStyle = 'red'; clearInterval(interval); button_1.disabled = false; SugarCube.Engine.play("2A1"); } else ctx.fillStyle = 'yellow'; ctx.beginPath(); ctx.ellipse(22, 25 + fishPos, 15, 15, Math.PI / 4, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); // ctx.globalAlpha = 0.5; // ctx.fillStyle = 'red'; // ctx.fillRect(60, 5 + fishPos, 40, 40); // ctx.globalAlpha = 1; ctx.fillStyle = 'lime'; ctx.fillRect(50, (1000 - progress) * 0.57, 16, progress * 0.57); }, 16); }); },200); </script>
<<nobr>> <<script>>playAudio("music", "forestPeacewood");<</script>> <<script>> nextPartOfDay(); <</script>> <div class="containcenter"> <<set $pond to $pond +1>> <<if $timesetter gte 2>> <div class="filter"></div> <</if>> <<set $tutorial.tutorialfishing to 1>> <<if $fishrandomizer lte 1000>> <<if $fishrandomizer gte 387>> <<timed 1.5s>> <audio autoplay> <source src="ressources/sounds/80A.mp3" type="audio/mp3"> </audio> <</timed>> <</if>> <</if>> <<if $fishrandomizer lte 386>> <<if $fishrandomizer gte 147>> <<timed 1.5s>> <audio autoplay> <source src="ressources/sounds/80B.mp3" type="audio/mp3"> </audio> <</timed>> <</if>> <</if>> <<if $fishrandomizer lte 146>> <<if $fishrandomizer gte 47>> <<timed 1.5s>> <audio autoplay> <source src="ressources/sounds/80C.mp3" type="audio/mp3"> </audio> <</timed>> <</if>> <</if>> <<if $fishrandomizer lte 46>> <<if $fishrandomizer gte 7>> <<timed 1.5s>> <audio autoplay> <source src="ressources/sounds/80D.mp3" type="audio/mp3"> </audio> <</timed>> <</if>> <</if>> <<if $fishrandomizer lte 6>> <<if $fishrandomizer gte 2>> <<timed 1.5s>> <audio autoplay> <source src="ressources/sounds/80E.mp3" type="audio/mp3"> </audio> <</timed>> <</if>> <</if>> <<if $fishrandomizer is 1>> <<timed 1.5s>> <audio autoplay> <source src="ressources/sounds/80F.mp3" type="audio/mp3"> </audio> <</timed>> <</if>> <div class="fade-in-container"> <<set $achievements.eventTrigger.firstSplashSuccess_1 to true>> <!-- Common --> <<if $uglyfish is 1>> <img class="fish" src="ressources/icons/I1FA1.webp" alt="Your Image"> <<script>>modVariable("add", "item", "uglyFish", 1)<</script>> <</if>> <<if $seabass is 1>> <img class="fish" src="ressources/icons/I1FA2.webp" alt="Your Image"> <<script>>modVariable("add", "item", "seaBass", 1)<</script>> <</if>> <<if $carp is 1>> <img class="fish" src="ressources/icons/I1FA3.webp" alt="Your Image"> <<script>>modVariable("add", "item", "carp", 1)<</script>> <</if>> <<if $catfish is 1>> <img class="fish" src="ressources/icons/I1FA4.webp" alt="Your Image"> <<script>>modVariable("add", "item", "catfish", 1)<</script>> <</if>> <<if $tilapia is 1>> <img class="fish" src="ressources/icons/I1FA5.webp" alt="Your Image"> <<script>>modVariable("add", "item", "tilapia", 1)<</script>> <</if>> <<if $mackerel is 1>> <img class="fish" src="ressources/icons/I1FA6.webp" alt="Your Image"> <<script>>modVariable("add", "item", "mackerel", 1)<</script>> <</if>> <<if $flounder is 1>> <img class="fish" src="ressources/icons/I1FA7.webp" alt="Your Image"> <<script>>modVariable("add", "item", "flounder", 1)<</script>> <</if>> <!-- Uncommon --> <<if $sardine is 1>> <img class="fish" src="ressources/icons/I1FB1.webp" alt="Your Image"> <<script>>modVariable("add", "item", "sardine", 1)<</script>> <</if>> <<if $saury is 1>> <img class="fish" src="ressources/icons/I1FB2.webp" alt="Your Image"> <<script>>modVariable("add", "item", "saury", 1)<</script>> <</if>> <<if $scad is 1>> <img class="fish" src="ressources/icons/I1FB3.webp" alt="Your Image"> <<script>>modVariable("add", "item", "scad", 1)<</script>> <</if>> <<if $seaperch is 1>> <img class="fish" src="ressources/icons/I1FB4.webp" alt="Your Image"> <<script>>modVariable("add", "item", "seaperch", 1)<</script>> <</if>> <!-- Rare --> <<if $salmon is 1>> <img class="fish" src="ressources/icons/I1FC1.webp" alt="Your Image"> <<script>>modVariable("add", "item", "salmon", 1)<</script>> <</if>> <<if $tuna is 1>> <img class="fish" src="ressources/icons/I1FC2.webp" alt="Your Image"> <<script>>modVariable("add", "item", "tuna", 1)<</script>> <</if>> <<if $pike is 1>> <img class="fish" src="ressources/icons/I1FC3.webp" alt="Your Image"> <<script>>modVariable("add", "item", "pike", 1)<</script>> <</if>> <<if $cod is 1>> <img class="fish" src="ressources/icons/I1FC4.webp" alt="Your Image"> <<script>>modVariable("add", "item", "cod", 1)<</script>> <</if>> <<if $barracuda is 1>> <img class="fish" src="ressources/icons/I1FC5.webp" alt="Your Image"> <<script>>modVariable("add", "item", "barracuda", 1)<</script>> <</if>> <!-- Epic --> <<if $marlin is 1>> <img class="fish" src="ressources/icons/I1FD1.webp" alt="Your Image"> <<script>>modVariable("add", "item", "marlin", 1)<</script>> <</if>> <<if $swordfish is 1>> <img class="fish" src="ressources/icons/I1FD2.webp" alt="Your Image"> <<script>>modVariable("add", "item", "swordfish", 1)<</script>> <</if>> <<if $sturgeon is 1>> <img class="fish" src="ressources/icons/I1FD3.webp" alt="Your Image"> <<script>>modVariable("add", "item", "sturgeon", 1)<</script>> <</if>> <<if $sterlet is 1>> <img class="fish" src="ressources/icons/I1FD4.webp" alt="Your Image"> <<script>>modVariable("add", "item", "sterlet", 1)<</script>> <</if>> <!-- Legendary --> <<if $eldorado is 1>> <img class="fish" src="ressources/icons/I1FE1.webp" alt="Your Image"> <<script>>modVariable("add", "item", "eldoradoTideglider", 1)<</script>> <<set $achievements.eventTrigger.masterBaiter_1 to true>> <</if>> <!-- Mythic --> <<if $twilight is 1>> <img class="fish" src="ressources/icons/I1FF1.webp" alt="Your Image"> <<script>>modVariable("add", "item", "twilightTimeglider", 1)<</script>> <<set $achievements.eventTrigger.masterBaiter_1 to true>> <<set $achievements.eventTrigger.pondsMaestro_1 to true>> <</if>> </div> <div class="successbox"> <p class="p1">You caught something!</p> <<if $uglyfish is 1>> <p class="p2"><b>Ugly Fish - Common</b></p> <p class="p2">"Dive into the paradoxical delight of the Ugly Fish, whose grotesque grimace and mismatched fins are eclipsed only by its surprisingly gourmet flavor—it's the taste that beauty forgot!"</p> <</if>> <<if $seabass is 1>> <p class="p2"><b>Sea Bass - Common</b></p> <p class="p2">"The quintessential basic fish of the sea, the Sea Bass is as unassuming as it is essential, providing a no-frills foundation to any post-apocalyptic meal."</p> <</if>> <<if $carp is 1>> <p class="p2"><b>Carp - Common</b></p> <p class="p2">"A resilient and adaptable fish, Carp can survive in a diverse range of environments. It's a staple that can bolster a survivor's diet with minimal effort."</p> <</if>> <<if $catfish is 1>> <p class="p2"><b>Catfish - Common</b></p> <p class="p2">"With its whiskered countenance, Catfish is a bottom-dwelling staple that can be found lurking in the muddy recesses of the pond."</p> <</if>> <<if $tilapia is 1>> <p class="p2"><b>Tilapia - Common</b></p> <p class="p2">"A resilient and prolific breed, Tilapia offers a mild taste and is a resourceful choice for providing sustenance in troubled times."</p> <</if>> <<if $mackerel is 1>> <p class="p2"><b>Mackerel - Common</b></p> <p class="p2">"A swift and sleek fish, Mackerel is known for its rich taste. A valuable find for any survivor looking to enhance their meal."</p> <</if>> <<if $flounder is 1>> <p class="p2"><b>Flounder - Common</b></p> <p class="p2">"This flat fish, adept at camouflage, provides a distinct texture and flavor for the discerning survivor's palate."</p> <</if>> <<if $sardine is 1>> <p class="p2" style="color: forestgreen;"><b>Sardine - Uncommon</b></p> <p class="p2">"Tiny yet tasty, Sardines come in schools, offering a modest but nutritious addition to any dish."</p> <</if>> <<if $saury is 1>> <p class="p2" style="color: forestgreen;"><b>Saury - Uncommon</b></p> <p class="p2">"Known for its slim shape and pronounced flavor, the Saury is a sought-after catch in many coastal communities."</p> <</if>> <<if $scad is 1>> <p class="p2" style="color: forestgreen;"><b>Scad - Uncommon</b></p> <p class="p2">"Often found in warm seas, the Scad fish is recognized by its distinct taste and is a staple in many regional cuisines."</p> <</if>> <<if $seaperch is 1>> <p class="p2" style="color: forestgreen;"><b>Sea Perch - Uncommon</b></p> <p class="p2">"A savory delight, the Seaperch frequents many fish markets and dinner tables alike due to its availability and flavor."</p> <</if>> <<if $salmon is 1>> <p class="p2" style="color: dodgerblue;"><b>Salmon - Rare</b></p> <p class="p2">"A highly prized catch, Salmon's vibrant flesh offers superior flavor and nutrition."</p> <</if>> <<if $tuna is 1>> <p class="p2" style="color: dodgerblue;"><b>Tuna - Rare</b></p> <p class="p2">"The ocean's powerhouse, Tuna is sought-after for its meaty texture and hearty taste, a true delicacy in desperate times."</p> <</if>> <<if $pike is 1>> <p class="p2" style="color: dodgerblue;"><b>Pike - Rare</b></p> <p class="p2">"A ferocious freshwater predator, Pike is admired by anglers for its challenge and by chefs for its distinct flavor."</p> <</if>> <<if $cod is 1>> <p class="p2" style="color: dodgerblue;"><b>Cod - Rare</b></p> <p class="p2">"A traditional favorite, Cod's flaky white meat is a versatile ingredient in numerous culinary creations."</p> <</if>> <<if $barracuda is 1>> <p class="p2" style="color: dodgerblue;"><b>Barracuda - Rare</b></p> <p class="p2">"Known for its fearsome appearance and potent flavor, the Barracuda is a trophy among fishing enthusiasts."</p> <</if>> <<if $marlin is 1>> <p class="p2" style="color: purple;"><b>Marlin - Epic</b></p> <p class="p2">"The king of the pond! Marlin is a rare sight, boasting a magnificent build with an equally impressive flavor profile."</p> <</if>> <<if $swordfish is 1>> <p class="p2" style="color: purple;"><b>Swordfish - Epic</b></p> <p class="p2">"Legendary amongst anglers, the Swordfish combines might and majesty. Its rarity is surpassed only by its culinary prestige."</p> <</if>> <<if $sturgeon is 1>> <p class="p2" style="color: purple;"><b>Sturgeon - Epic</b></p> <p class="p2">"The diamond of the pond, Sturgeon is highly coveted not just for its meat but also for its precious roe, a decadent treat for any survivor who reels it in."</p> <</if>> <<if $sterlet is 1>> <p class="p2" style="color: purple;"><b>Sterlet - Epic</b></p> <p class="p2">"Often confused with the Sturgeon, the Sterlet is a prized fish in its own right, with a delicate flavor that is cherished by connoisseurs."</p> <</if>> <<if $eldorado is 1>> <p class="p2" style="color: gold;"><b>Eldorado Tideglider - Legendary</b></p> <p class="p2">"Eldorado Tideglider glimmers like a submerged sun with its radiant golden fins. This legendary fish, with its hop-like aroma and vigorous fight, is the ultimate prize for anglers seeking fame and a taste of the extraordinary."</p> <</if>> <<if $twilight is 1>> <p class="p2" style="color: red;"><b>Twilight Timeglider - Mythical</b></p> <p class="p2">"A spectral fish cloaked in dusk, glides through timeless waters where light and darkness meld. It is the ephemeral dream of anglers, a mythical catch that embodies the mystique of twilight itself."</p> <</if>> </div> <div class="flexgame" onmousedown="change()" onmouseup="change2()"> <img id="pic" class="rod" src="ressources/icons/5C.webp" alt="A" draggable="false"> </div> <div class="flexbox"> <p class="neon-button2" onclick="change3()">Fish again</p> <p class="neon-button2" onclick="change4()">Exit</p> </div> </div> <style> .flexbox { z-index: 110; position: absolute; display: flex; justify-content: space-around; width: 31em; margin: auto; opacity: 0; animation: fade-in3 1s forwards; animation-delay: 3s; bottom: 12vh; left: 39vw; } .neon-button2 { height: 4vh; margin: 1vw; } .neon-button2:first-child { z-index: 5; width: 10em; padding: 2em; text-align: center; border-radius: 1em; font-size: 2vh; } .neon-button2:last-child { width: 10em; padding: 2em; text-align: center; border-radius: 1em; font-size: 2vh; } @keyframes fade-in3 { from { opacity: 0; } to { opacity: 1; } } .p2 { text-align: center; color: white; padding-left: 1vw; padding-right: 1vw; pointer-events: none; } .p1 { margin-top: 15em; text-align: center; color: white; pointer-events: none; } .successbox { position: absolute; margin-top: 10%; margin-left: 20%; overflow: hidden; padding-bottom: 18em; width: 40em; height: 17vh; z-index: 3; border-radius: 3em; text-align: center; animation: fade-in2 2s forwards; animation-delay: 2s; opacity: 0; border-radius: 1.481vh; animation: fade-in2 2s forwards; animation-delay: 2s; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5); color: white; transition: all 0.5s ease; } .Paragraph { width: 30%; font-size: 20px; opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s; position: absolute; margin: auto; border-radius: 1.481vh; animation: fade-in3 1s forwards; background-color: rgba(0, 0, 0, 0.7); box-shadow: 0px 0px 20px rgba(255, 0, 0, 0.5); color: white; padding: 1vw; margin-top: -7%; margin-left: 20%; } p { margin-top: 0; } @keyframes fade-in2 { from { opacity: 0; height: 0; width: 40em; } to { opacity: 0.9; height: 17vh; width: 40em; } } .fade-in-container { width: 30vw; height: 30vw; position: absolute; display: flex; justify-content: center; align-items: center; margin: 0 auto; margin-top: 4vw; margin-left: 26vw; overflow: hidden; padding-bottom: 7vw; z-index: 5; pointer-events: none; } .fade-in-container img { height: 100%; width: 100%; object-fit: contain; opacity: 0; animation: fade-in 3s forwards; margin: 0 auto; } @keyframes fade-in { from { opacity: 0; height: 0; width: 0; transform: translateY(50em); } to { opacity: 1; height: 30em; width: 30em; transform: scale(1); } } .containcenter { width: calc(100vw - 17.5em); height: 100vh; } #story { margin-left: 0; width: 100vw; height: 100vh; overflow-y: auto; /* Add a scrollbar if the content is longer than the screen */ margin: 0; margin-left: 26vh; position: !important absolute; z-index: 1; } #story::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-size: cover; opacity: 0; z-index: -1; transition: opacity 1s ease-in-out; /* Adjust duration as needed */ } #story.fade-background::before { opacity: 1; } #ui-bar.stowed~#story { margin-left: 2em; } #story.fade-background::before { opacity: 1; } #passages { width: 100%; max-width: 100%; margin: 0; height: 100vh; } .passage { width: 100%; height: 100vh; } body { font-family: sans-serif; background: url(ressources/backgrounds/2A.webp) no-repeat center center fixed; background-position: left; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; bottom: 3%; margin: 0; overflow: hidden; } .flexgame { margin: auto; width: 50%; display: flex; flex-direction: row-reverse; position: relative; top: 45%; bottom: 55%; align-items: flex-start; pointer-events: none; } .rod { position: relative; width: 75%; height: 75%; top: 0; left: 0; bottom: 0; } #splash { position: absolute; width: 75%; height: 75%; bottom: 3%; } .passage-in, .passage-out { position: absolute; opacity: 0; } .passage { height: 100%; transition-property: none; } .fish { margin: auto; pointer-events: none; } #passage-fish-game-success { height: 100%; } #passages { height: 100%; } #story { height: 100%; position: static; } .filter { position: absolute; margin-left: -100em; margin-top: -100em; height: 1000em; width: 1000em; background-color: #0f0b47; opacity: 0.55; z-index: 0; pointer-events: none; } .successbox:hover { box-shadow: 0 0 0.5vw var(--neon-color-hover), 0 0 1.5vw var(--neon-color-hover), inset 0 0 0.5vw var(--neon-color-hover), inset 0 0 1.5vw var(--neon-color-hover); background-color: rgba(0, 0, 0, 0.9); } </style> <script> window.addEventListener('DOMContentLoaded', function() { const img = document.querySelector('.fade-in-container img'); img.onload = function() { img.style.opacity = 1; }; }); function change(){ document.getElementById('pic').src='ressources/icons/5D.webp'; } function change2(){ document.getElementById('pic').src='ressources/icons/5C.webp'; } function change3(){ SugarCube.Engine.play("5A"); } function change4(){ SugarCube.Engine.play("2A1"); } </script> <</nobr>>
<<set $itemsearchrandomizer to random(1,1000)>> <<if $itemsearchrandomizer lte 850>> <<goto "WA1B2">> <</if>> <<if $itemsearchrandomizer gt 850 and $itemsearchrandomizer lte 930>> <<goto "WA1B3">> <</if>> <<if $itemsearchrandomizer gt 930 and $itemsearchrandomizer lte 965>> <<goto "WA1B4">> <</if>> <<if $itemsearchrandomizer gt 965 and $itemsearchrandomizer lte 985>> <<goto "WA1B5">> <</if>> <<if $itemsearchrandomizer gt 985 and $itemsearchrandomizer lte 995>> <<goto "WA1B6">> <</if>> <<if $itemsearchrandomizer gt 995 and $itemsearchrandomizer lte 1000>> <<goto "WA1B7">> <</if>>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(67deg) brightness(108%) contrast(101%); margin-top: 3vh; } .message { max-width: 100vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Treking through the barren canyons, you spot a glint among the dusty red rocks. In a small crevice lies a salvaged item of common rarity, likely left by a previous traveler. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A1')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [0]; //common let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [0], //common type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A1'); } var currentPassageId = 'WA1B2' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(25%) sepia(57%) saturate(4002%) hue-rotate(114deg) brightness(96%) contrast(73%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Seeking respite from the relentless sun, you take shelter in a shaded alcove. On the cavern wall are faded carvings, pointing toward an artifact pulsing with uncommon power. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A1')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [1]; //uncommon let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: rarity = [1], //uncommon type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A1'); } var currentPassageId = 'WA1B3' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(40%) sepia(83%) saturate(1984%) hue-rotate(193deg) brightness(103%) contrast(100%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Scaling a sheer cliff face, you reach a precipice overlooking the vast, scorched valley. Nestled atop a stone pillar lies an object with a rare and mesmerizing aura. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A1')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [2]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [2], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A1'); } var currentPassageId = 'WA1B4' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(10%) sepia(60%) saturate(5496%) hue-rotate(291deg) brightness(103%) contrast(115%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Pushing onward through the parched badlands, you enter an oasis untouched by corruption. Crystalline waters energize you as you uncover an epic artifact beneath a flowering tree. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A1')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [3]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [3], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A1'); } var currentPassageId = 'WA1B5' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(86%) sepia(33%) saturate(1232%) hue-rotate(353deg) brightness(97%) contrast(109%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Far off the beaten path, you discover a hidden cave with ancient wall etchings depicting legends and myths. Deeper inside lies an item radiating legendary power. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A1')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [4]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [4], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A1'); } var currentPassageId = 'WA1B6' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(14%) sepia(92%) saturate(7178%) hue-rotate(0deg) brightness(97%) contrast(113%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>A sandstorm reveals a glowing portal in a hidden rocky crevice. Passing through, you enter a protected realm where elemental spirits dwell. Before you lies an altar with an object of mythical rarity and magic. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A1')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [5]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [5], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A1'); } var currentPassageId = 'WA1B7' </script>
<<set $itemsearchrandomizer to random(1,1000)>> <<if $itemsearchrandomizer lte 750>> <<goto "WA2B2">> <</if>> <<if $itemsearchrandomizer gt 750 and $itemsearchrandomizer lte 870>> <<goto "WA2B3">> <</if>> <<if $itemsearchrandomizer gt 870 and $itemsearchrandomizer lte 940>> <<goto "WA2B4">> <</if>> <<if $itemsearchrandomizer gt 940 and $itemsearchrandomizer lte 970>> <<goto "WA2B5">> <</if>> <<if $itemsearchrandomizer gt 970 and $itemsearchrandomizer lte 990>> <<goto "WA2B6">> <</if>> <<if $itemsearchrandomizer gt 990 and $itemsearchrandomizer lte 1000>> <<goto "WA2B7">> <</if>>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(67deg) brightness(108%) contrast(101%); margin-top: 3vh; } .message { max-width: 100vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Treking through the barren canyons, you spot a glint among the dusty red rocks. In a small crevice lies a salvaged item of common rarity, likely left by a previous traveler. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A2')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [0]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [0], //common type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A2'); } var currentPassageId = 'WA2B2' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(25%) sepia(57%) saturate(4002%) hue-rotate(114deg) brightness(96%) contrast(73%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Seeking respite from the relentless sun, you take shelter in a shaded alcove. On the cavern wall are faded carvings, pointing toward an artifact pulsing with uncommon power. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A2')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [1]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [1], //uncommon type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A2'); } var currentPassageId = 'WA2B3' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(40%) sepia(83%) saturate(1984%) hue-rotate(193deg) brightness(103%) contrast(100%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Scaling a sheer cliff face, you reach a precipice overlooking the vast, scorched valley. Nestled atop a stone pillar lies an object with a rare and mesmerizing aura. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A2')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [2]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [2], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A2'); } var currentPassageId = 'WA2B4' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(10%) sepia(60%) saturate(5496%) hue-rotate(291deg) brightness(103%) contrast(115%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Pushing onward through the parched badlands, you enter an oasis untouched by corruption. Crystalline waters energize you as you uncover an epic artifact beneath a flowering tree. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A2')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [3]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [3], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A2'); } var currentPassageId = 'WA2B5' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(86%) sepia(33%) saturate(1232%) hue-rotate(353deg) brightness(97%) contrast(109%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Far off the beaten path, you discover a hidden cave with ancient wall etchings depicting legends and myths. Deeper inside lies an item radiating legendary power. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A2')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [4]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [4], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A2'); } var currentPassageId = 'WA2B6' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(14%) sepia(92%) saturate(7178%) hue-rotate(0deg) brightness(97%) contrast(113%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>A sandstorm reveals a glowing portal in a hidden rocky crevice. Passing through, you enter a protected realm where elemental spirits dwell. Before you lies an altar with an object of mythical rarity and magic. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A2')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [5]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [5], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A2'); } var currentPassageId = 'WA2B7' </script>
<<set $itemsearchrandomizer to random(1,1000)>> <<if $itemsearchrandomizer lte 650>> <<goto "WA3B2">> <</if>> <<if $itemsearchrandomizer gt 650 and $itemsearchrandomizer lte 800>> <<goto "WA3B3">> <</if>> <<if $itemsearchrandomizer gt 800 and $itemsearchrandomizer lte 900>> <<goto "WA3B4">> <</if>> <<if $itemsearchrandomizer gt 900 and $itemsearchrandomizer lte 950>> <<goto "WA3B5">> <</if>> <<if $itemsearchrandomizer gt 950 and $itemsearchrandomizer lte 980>> <<goto "WA3B6">> <</if>> <<if $itemsearchrandomizer gt 980 and $itemsearchrandomizer lte 1000>> <<goto "WA3B7">> <</if>>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(67deg) brightness(108%) contrast(101%); margin-top: 3vh; } .message { max-width: 100vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Treking through the barren canyons, you spot a glint among the dusty red rocks. In a small crevice lies a salvaged item of common rarity, likely left by a previous traveler. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A3')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [0]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [0], //common type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A3'); } var currentPassageId = 'WA3B2' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(25%) sepia(57%) saturate(4002%) hue-rotate(114deg) brightness(96%) contrast(73%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Seeking respite from the relentless sun, you take shelter in a shaded alcove. On the cavern wall are faded carvings, pointing toward an artifact pulsing with uncommon power. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A3')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [1]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [1], //uncommon type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A3'); } var currentPassageId = 'WA3B3' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(40%) sepia(83%) saturate(1984%) hue-rotate(193deg) brightness(103%) contrast(100%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Scaling a sheer cliff face, you reach a precipice overlooking the vast, scorched valley. Nestled atop a stone pillar lies an object with a rare and mesmerizing aura. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A3')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [2]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [2], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A3'); } var currentPassageId = 'WA3B4' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(10%) sepia(60%) saturate(5496%) hue-rotate(291deg) brightness(103%) contrast(115%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Pushing onward through the parched badlands, you enter an oasis untouched by corruption. Crystalline waters energize you as you uncover an epic artifact beneath a flowering tree. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A3')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [3]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [3], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A3'); } var currentPassageId = 'WA3B5' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(86%) sepia(33%) saturate(1232%) hue-rotate(353deg) brightness(97%) contrast(109%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Far off the beaten path, you discover a hidden cave with ancient wall etchings depicting legends and myths. Deeper inside lies an item radiating legendary power. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A3')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [4]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [4], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A3'); } var currentPassageId = 'WA3B6' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(14%) sepia(92%) saturate(7178%) hue-rotate(0deg) brightness(97%) contrast(113%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>A sandstorm reveals a glowing portal in a hidden rocky crevice. Passing through, you enter a protected realm where elemental spirits dwell. Before you lies an altar with an object of mythical rarity and magic. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A3')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [5]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [5], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A3'); } var currentPassageId = 'WA3B7' </script>
<<set $itemsearchrandomizer to random(1,1000)>> <<if $itemsearchrandomizer lte 550>> <<goto "WA4B2">> <</if>> <<if $itemsearchrandomizer gt 550 and $itemsearchrandomizer lte 730>> <<goto "WA4B3">> <</if>> <<if $itemsearchrandomizer gt 730 and $itemsearchrandomizer lte 860>> <<goto "WA4B4">> <</if>> <<if $itemsearchrandomizer gt 860 and $itemsearchrandomizer lte 930>> <<goto "WA4B5">> <</if>> <<if $itemsearchrandomizer gt 930 and $itemsearchrandomizer lte 970>> <<goto "WA4B6">> <</if>> <<if $itemsearchrandomizer gt 970 and $itemsearchrandomizer lte 1000>> <<goto "WA4B7">> <</if>>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(67deg) brightness(108%) contrast(101%); margin-top: 3vh; } .message { max-width: 100vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Navigating the labyrinthine corridors, you notice a faint glimmer amidst the rubble. Buried beneath the debris lies a salvaged item of common rarity, forgotten by those who came before. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A4')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [0]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [0], //common type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A4'); } var currentPassageId = 'WA4B2' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(25%) sepia(57%) saturate(4002%) hue-rotate(114deg) brightness(96%) contrast(73%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Venturing deeper into the dimly lit passages, you discover a sealed chamber adorned with arcane symbols. Within rests an artifact pulsing with uncommon power, its purpose long since obscured. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A4')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [1]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [1], //uncommon type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A4'); } var currentPassageId = 'WA4B3' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(40%) sepia(83%) saturate(1984%) hue-rotate(193deg) brightness(103%) contrast(100%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Ascending a treacherous cliffside path, you reach a secluded ledge overlooking the vast, darkened chasm. Perched atop a crumbling pedestal lies an object with a rare and enigmatic aura. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A4')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [2]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [2], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A4'); } var currentPassageId = 'WA4B4' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(10%) sepia(60%) saturate(5496%) hue-rotate(291deg) brightness(103%) contrast(115%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Traversing the twisted tunnels, you stumble upon a subterranean sanctuary untouched by the world above. Amidst the crystalline formations rests an epic artifact, its radiance piercing the gloom. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A4')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [3]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [3], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A4'); } var currentPassageId = 'WA4B5' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(86%) sepia(33%) saturate(1232%) hue-rotate(353deg) brightness(97%) contrast(109%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Deciphering cryptic runes, you unearth a concealed vault from an age long past. Entombed within lies an item radiating legendary power, guarded by ancient wards and seals. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A4')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [4]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [4], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A4'); } var currentPassageId = 'WA4B6' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(14%) sepia(92%) saturate(7178%) hue-rotate(0deg) brightness(97%) contrast(113%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>A faint whisper beckons you towards a shimmering mirage, revealing a rift in the fabric of reality. Passing through the cosmic vortex, you enter a realm where primordial forces hold sway, and an altar bears an object of mythical rarity and eldritch might. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A4')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [5]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [5], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A4'); } var currentPassageId = 'WA4B7' </script>
<<set $itemsearchrandomizer to random(1,1000)>> <<if $itemsearchrandomizer lte 450>> <<goto "WA5B2">> <</if>> <<if $itemsearchrandomizer gt 450 and $itemsearchrandomizer lte 660>> <<goto "WA5B3">> <</if>> <<if $itemsearchrandomizer gt 660 and $itemsearchrandomizer lte 820>> <<goto "WA5B4">> <</if>> <<if $itemsearchrandomizer gt 820 and $itemsearchrandomizer lte 910>> <<goto "WA5B5">> <</if>> <<if $itemsearchrandomizer gt 910 and $itemsearchrandomizer lte 960>> <<goto "WA5B6">> <</if>> <<if $itemsearchrandomizer gt 960 and $itemsearchrandomizer lte 1000>> <<goto "WA5B7">> <</if>>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(67deg) brightness(108%) contrast(101%); margin-top: 3vh; } .message { max-width: 100vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Navigating the labyrinthine corridors, you notice a faint glimmer amidst the rubble. Buried beneath the debris lies a salvaged item of common rarity, forgotten by those who came before. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A5')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [0]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [0], //common type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A5'); } var currentPassageId = 'WA5B2' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(25%) sepia(57%) saturate(4002%) hue-rotate(114deg) brightness(96%) contrast(73%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Venturing deeper into the dimly lit passages, you discover a sealed chamber adorned with arcane symbols. Within rests an artifact pulsing with uncommon power, its purpose long since obscured. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A5')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [1]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [1], //uncommon type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A5'); } var currentPassageId = 'WA5B3' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(40%) sepia(83%) saturate(1984%) hue-rotate(193deg) brightness(103%) contrast(100%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Ascending a treacherous cliffside path, you reach a secluded ledge overlooking the vast, darkened chasm. Perched atop a crumbling pedestal lies an object with a rare and enigmatic aura. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A5')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [2]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [2], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A5'); } var currentPassageId = 'WA5B4' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(10%) sepia(60%) saturate(5496%) hue-rotate(291deg) brightness(103%) contrast(115%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Traversing the twisted tunnels, you stumble upon a subterranean sanctuary untouched by the world above. Amidst the crystalline formations rests an epic artifact, its radiance piercing the gloom. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A5')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [3]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [3], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A5'); } var currentPassageId = 'WA5B5' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(86%) sepia(33%) saturate(1232%) hue-rotate(353deg) brightness(97%) contrast(109%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Deciphering cryptic runes, you unearth a concealed vault from an age long past. Entombed within lies an item radiating legendary power, guarded by ancient wards and seals. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A5')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [4]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [4], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A5'); } var currentPassageId = 'WA5B6' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(14%) sepia(92%) saturate(7178%) hue-rotate(0deg) brightness(97%) contrast(113%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>A faint whisper beckons you towards a shimmering mirage, revealing a rift in the fabric of reality. Passing through the cosmic vortex, you enter a realm where primordial forces hold sway, and an altar bears an object of mythical rarity and eldritch might. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A5')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [5]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [5], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A5'); } var currentPassageId = 'WA5B7' </script>
<<set $itemsearchrandomizer to random(1,1000)>> <<if $itemsearchrandomizer lte 350>> <<goto "WA6B2">> <</if>> <<if $itemsearchrandomizer gt 350 and $itemsearchrandomizer lte 590>> <<goto "WA6B3">> <</if>> <<if $itemsearchrandomizer gt 590 and $itemsearchrandomizer lte 780>> <<goto "WA6B4">> <</if>> <<if $itemsearchrandomizer gt 780 and $itemsearchrandomizer lte 890>> <<goto "WA6B5">> <</if>> <<if $itemsearchrandomizer gt 890 and $itemsearchrandomizer lte 950>> <<goto "WA6B6">> <</if>> <<if $itemsearchrandomizer gt 950 and $itemsearchrandomizer lte 1000>> <<goto "WA6B7">> <</if>>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(67deg) brightness(108%) contrast(101%); margin-top: 3vh; } .message { max-width: 100vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Navigating the labyrinthine corridors, you notice a faint glimmer amidst the rubble. Buried beneath the debris lies a salvaged item of common rarity, forgotten by those who came before. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A6')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [0]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [0], //common type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A6'); } var currentPassageId = 'WA6B2' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(25%) sepia(57%) saturate(4002%) hue-rotate(114deg) brightness(96%) contrast(73%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Venturing deeper into the dimly lit passages, you discover a sealed chamber adorned with arcane symbols. Within rests an artifact pulsing with uncommon power, its purpose long since obscured. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A6')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [1]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [1], //uncommon type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A6'); } var currentPassageId = 'WA6B3' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(40%) sepia(83%) saturate(1984%) hue-rotate(193deg) brightness(103%) contrast(100%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Ascending a treacherous cliffside path, you reach a secluded ledge overlooking the vast, darkened chasm. Perched atop a crumbling pedestal lies an object with a rare and enigmatic aura. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A6')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [2]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [2], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A6'); } var currentPassageId = 'WA6B4' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(10%) sepia(60%) saturate(5496%) hue-rotate(291deg) brightness(103%) contrast(115%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Traversing the twisted tunnels, you stumble upon a subterranean sanctuary untouched by the world above. Amidst the crystalline formations rests an epic artifact, its radiance piercing the gloom. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A6')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [3]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [3], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A6'); } var currentPassageId = 'WA6B5' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(86%) sepia(33%) saturate(1232%) hue-rotate(353deg) brightness(97%) contrast(109%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>Deciphering cryptic runes, you unearth a concealed vault from an age long past. Entombed within lies an item radiating legendary power, guarded by ancient wards and seals. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A6')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [4]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [4], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A6'); } var currentPassageId = 'WA6B6' </script>
<<nobr>> <style> body { background-image: url('ressources/backgrounds/3A.webp'); } i { font-size: 55px; margin: 16px; color: #F9C42F; } .containerloupe { position: relative; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-content: center; margin-top: 50px; } .centerloupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; background-color: #fff; border: 9px solid #DEE1E4; overflow: hidden; background-color: rgba(0,0,0,0.4); } .containerloupe::before { content: ""; position: absolute; top: 210px; width: 100px; height: 32px; border-radius: 100%; background-color: rgba(222, 225, 228, 0.4); } .wraploupe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } span::before { content: ""; position: absolute; width: 50px; height: 6px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); } span::after { content: ""; position: absolute; left: 30px; top: 20px; width: 36px; height: 12px; background-color: #DEE1E4; -webkit-transform: rotate(45deg); transform: rotate(45deg); border-radius: 0 4px 4px 0; } .box-1 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .box-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } /* animation */ @-webkit-keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-1 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @keyframes rowup-2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } } @-webkit-keyframes cloud-loop { 0% { -webkit-transform: translate(0, 15px); transform: translate(0, 15px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } @keyframes shadow-loop { 0% { -webkit-transform: translate(0, -35px) scale(1.15, 0.25); transform: translate(0, -35px) scale(1.15, 0.25); } 100% { -webkit-transform: translate(0, -35px) scale(1, 0.25); transform: translate(0, -35px) scale(1, 0.25); } } .box-1 { -webkit-animation: 1s rowup-1 linear infinite normal; animation: 1s rowup-1 linear infinite normal; } .box-2 { -webkit-animation: 1s rowup-2 linear infinite normal; animation: 1s rowup-2 linear infinite normal; } .centerloupe { -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; background-image: url('ressources/backgrounds/3B.webp'); background-size: cover; backdrop-filter: blur(40px); } span { position: relative; left: 112px; top: 60px; -webkit-animation-name: cloud-loop; animation-name: cloud-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .containerloupe::before { -webkit-animation-name: shadow-loop; animation-name: shadow-loop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-direction: alternate; animation-direction: alternate; } .dr { position: absolute; bottom: 16px; right: 16px; width:100px; } .text { padding-bottom: 140px; } .imgcar { width: 5vh; filter: invert(14%) sepia(92%) saturate(7178%) hue-rotate(0deg) brightness(97%) contrast(113%); margin-top: 3vh; } </style> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>A faint whisper beckons you towards a shimmering mirage, revealing a rift in the fabric of reality. Passing through the cosmic vortex, you enter a realm where primordial forces hold sway, and an altar bears an object of mythical rarity and eldritch might. </p> <div class="containerloupe"> <span></span> <div class="centerloupe"> <div class="wraploupe"> <div class="box-1 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> <div class="box-2 box"> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> <i class="fas fa-file-code"><img class="imgcar" src="ressources/icons/2E.webp"></i> </div> </div> </div> </div> </div> </div> <!-- Button Box 2buttons --> <div class="message user-message4" id="message2"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="getItem()"> Take it </div> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('3A6')"> Leave it </div> </div> </div> </div> </div> <</nobr>> <script> //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } function getItem() { let rand = Math.floor(Math.random() * 2); // 0 or 1 let rarity = [5]; let item; if (rand === 0) { item = getRandomItem({ tier: [1], rarity: rarity, type: ["equipment"], }); } else { item = getRandomItem({ tier: [1], rarity: rarity, type: ["material"], type2: ["gift"], }); } /* let item = getRandomItem( { tier: [1], //Tier 1 rarity: [5], type: ["equipment"], } ) */ BPopupR_pushRewards([{ type: "item", key: item, applyType: "add", applyValue: 1, }]) nextPartOfDay(); SugarCube.Engine.play('3A6'); } var currentPassageId = 'WA6B7' </script>
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You walk through the barren, hostile landscape of the wastelands, the dry wind whipping at your face. The sun beats down mercilessly overhead, making you squint against its harsh glare. Your mind races as you try to figure out how to navigate this unforgiving terrain.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you trudge onwards, lost in thought, something catches your eye on the ground ahead. Drawing closer, you realize it's a worn, tattered page fluttering in the breeze. Intrigued, you bend down and pick it up gingerly. The paper is weathered and discolored, the writing on it faded and barely legible.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You strain to make out the words, your brow furrowed in concentration. Most of the text is too damaged to decipher, but one thing jumps out at you - a name scrawled at the bottom: "Riley".</p> </div> </div><!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/minigames/WA1D1.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Examining the page with interest</action> <inner>Who is this Riley? A previous survivor who braved these wastelands? I wonder what happened to them...</inner> <p>"Looks like some kind of survivor's log, Riley, huh? Interesting..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You carefully fold the fragile paper and tuck it away for safekeeping. Your curiosity is piqued now. Maybe if you press further into the wasteland, you can find more clues about this mysterious Riley and piece together their story.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Looking out over the barren expanse with determination</action> <inner>I'll have to keep my eyes peeled for more of these logs. But for now, I should head back before it gets dark.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With that, you turn and begin the trek back to shelter, your mind alight with questions about the enigmatic survivor named Riley and what secrets the wasteland may yet hold.</p> </div> </div> <!-- Buttons --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('WA1D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("3A1"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Driven by curiosity about the mysterious survivor named Riley, you venture deeper into the wastelands. The terrain grows more treacherous with each step, but your determination pushes you onward.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You clamber over jagged boulders and skirt around deep fissures that scar the parched earth. Sweat drips down your face in the oppressive heat, but still you press on, scanning the ground intently for any sign of another log.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Wiping sweat from your brow</action> <inner>It has to be around here somewhere... Just a bit further...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Just as your energy starts to flag, you spot it - a scrap of paper snagged on a gnarled, dead shrub. Your heart races as you rush over and carefully extract it. This page is in slightly better condition than the first.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/minigames/WA2D1.webp"> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Smoothing it out, you begin to read, your eyes widening as Riley's story takes shape. From her words, you glean that she is a young woman on the run from the MAD, the tyrannical rulers of this post-apocalyptic world.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>"Those MAD bastards...they'll pay for what they've done," Riley writes, her anger palpable even through the faded ink. "I'll survive this wasteland just to take down as many of them as I can."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Tracing a finger over her defiant words</action> <inner>Wow, she's got a serious vendetta. Can't say I blame her, with how cruel the MAD are...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You find yourself admiring Riley's courage and determination. Surviving alone in this bleak world is no easy feat, let alone doing it with the goal of taking on the MAD regime.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Carefully refolding the log, you tuck it away with the first one. Your resolve to uncover the rest of Riley's tale grows even stronger. What challenges did she face out here? Did she succeed in her mission against the MAD?</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Gazing out over the bleak horizons with a mix of worry and anticipation</action> <inner>I've got to find out what happened to her. I just hope she's still out there somewhere...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a deep breath, you steel yourself and forge ahead into the unforgiving wasteland once more, driven by the need to unravel the mystery of Riley's fate, come what may.</p> </div> </div> <!-- Buttons --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('WA2D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("3A2"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Spurred on by the tantalizing clues in Riley's logs, you forge ever deeper into the harsh wilderness of the wastelands. The path grows increasingly perilous, winding along the edge of a towering, crumbling cliff face.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Eyeing the drop warily</action> <inner>One wrong step and it's a long way down... Gotta be careful.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Hugging the rock wall, you pick your way carefully along the treacherous path. Loose stones skitter underfoot, making you heart lurch with each step. But you can't turn back now, not when you're so close to finding the next piece of the puzzle.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Finally, you spot it - a glint of white caught in a crevice just ahead. Pulses racing, you scramble over and fish out another precious page. "Riley's Log III", it reads.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/minigames/WA3D1.webp"> </div><div class="DIAS_message centered"> <div class="DIAS_text"> <p>But this time, there's something else tucked in with the worn paper - a photograph. Hands trembling with anticipation, you unfold it to reveal the face of a strikingly beautiful young woman. She's smiling brightly, her eyes sparkling with mischief and determination.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/minigames/WA3D2.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Staring at the photo, transfixed</action> <inner>So this is Riley... Wow, she's gorgeous. And she looks so happy, so full of life.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Tearing your gaze away from her captivating image, you turn your attention to the log itself. Riley's words paint a picture of her stalking a MAD Dummy, closing in on her target with a grim sense of purpose. You can practically feel her excitement and anticipation radiating off the page.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>"I'm getting close now, I can feel it," she writes. "That MAD bitch won't even know what hit her. I wonder if I'll actually succeed..."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Tracing a finger over her smiling face in the photo</action> <inner>Keep fighting, Riley. You're so strong, so brave. I believe in you...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Carefully replacing the photo and log, you take a deep, steadying breath and look out over the wasteland, your mind awhirl. The more you learn about Riley, the more invested you become in her story, in her fate.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You know you won't be able to rest until you discover the outcome of her fateful confrontation with the MAD Dummy - and whatever other trials the wastelands held in store for her. With renewed determination, you press onward into the unknown.</p> </div> </div> <!-- Buttons --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('WA3D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("3A3"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The sun hangs low on the horizon, painting the wastelands in an eerie, blood-red light as you trudge onward. The journey grows more arduous with each passing mile, but the burning need to learn Riley's fate drives you forward.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Scrambling up a steep, rocky incline, you spot a splash of white nestled amongst the rubble at the top. Your heart leaps, knowing it must be another log. Exhausted but elated, you drag yourself over to it and snatch it up.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>"Riley's Log IV", the now-familiar handwriting proclaims. A photo flutters out as you unfold the paper, and your breath catches. It's Riley again, but this time a full-body shot that showcases her lithe, toned figure and leaves little to the imagination.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/WA4D1.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Swallowing hard, trying not to stare too long</action> <inner>Fuck, she's even hotter than I realized... Focus, damn it!</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Tearing your gaze away from the tantalizing image, you delve into her words, eager to discover what transpired with the MAD Dummy. Riley's account is vivid and unflinching, painting a picture of a raw, primal clash of bodies and wills.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/WA4D2.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>"We fought hard, grappling and grinding against each other, each trying to overpower the other with the sheer force of our auras," she writes, her words practically thrumming with barely-restrained intensity. "But in the end, my dominance won out. I could feel her succumbing to me, submitting to my will as I rode her face hard..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your mouth goes dry as you read, your body reacting traitorously to the explicit details. You can almost see it in your mind's eye - Riley, magnificent in her viral fury, subduing her foe through sheer sexual dominance.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Adjusting your pants surreptitiously</action> <inner>Christ, that's so fucking hot... The power, the passion... I can only imagine how intense it must have been.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Flushed and more than a little aroused, you finish reading Riley's log, marveling at her prowess and tenacity. To not only survive but triumph in such an overwhelmingly hostile world... She's truly a force to be reckoned with.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't help but wonder what other carnal challenges she faced out here, and how they might have tested the limits of her dominance. The thought sends a shiver of dark anticipation down your spine.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Taking a shaky breath, trying to calm your racing heart</action> <inner>I need to know more, to see this through to the end. I'm in too deep to turn back now...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Pocketing the log and photo, you turn your gaze back to the long road ahead, ready to face whatever the wastelands have in store. But you know one thing for certain - Riley's story has utterly consumed you, body and soul, and you won't rest until you've seen it through to its inevitably shattering conclusion...</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('WA4D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play('3A4'); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The wasteland seems to stretch on forever, an endless expanse of sun-scorched earth and jagged rock beneath a merciless sky. Each step is a struggle as you forge ahead, your throat parched and your skin blistered. But even the brutal conditions can't quell the fierce, gnawing need inside you - the need to find the next piece of Riley's story.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you crest a low rise, a flash of white snags your eye - another log, fluttering forlornly in the arid breeze. You stumble towards it, your heart hammering with mingled excitement and trepidation.</p> <p>"Riley's Log V," you murmur, unfolding the precious page with trembling hands. A photo tumbles out, and your eyes widen at the sight. It's Riley again, but this time she's clad in only scraps of clothing, her lean body glistening with sweat and her eyes fever-bright.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/WA5DA.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <inner>Fuck me, she looks...wild. Feral. Like the virus is really starting to take hold...</inner> <action>Pulse quickening as you drink in the provocative image</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Dragging your gaze from the photo, you lose yourself in Riley's increasingly erratic scrawl. Her words paint a picture of a woman teetering on the brink, the isolation and deprivation of the wasteland pushing her to the limits of her endurance.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/WA5DB.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>"I can feel it inside me, this...hunger," she writes, her script jagged and impassioned. "Not just for food or water, but for touch, for contact. The virus is like a fire in my veins, consuming me from within. I think I saw another MAD girl in the distance today...and God help me, but part of me hoped she'd find me, just so I could feel something again..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your heart aches for Riley as you read, imagining her out there all alone, slowly succumbing to the virus's cruel desires. You can feel your own arousal stirring in response, a shameful, unwelcome heat that makes your cheeks flush and your cock twitch.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <inner>She's suffering. Focus on finding her, helping her...not fantasizing about her desperation.</inner> <action>Closing your eyes, trying to will away the sordid thoughts</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a shaky breath, you finish the log, your mind awhirl with dark imaginings. Riley's plight has awoken something primal in you, a fierce, possessive need to save her, to claim her, to sate the terrible yearning you know is eating her alive.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <inner>Hold on, Riley. You're not alone out here. I'm coming for you...</inner> <action>Tucking the photo away with a mix of reverence and guilt</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Squaring your shoulders, you set off once more, your steps fueled by a heady mix of determination and barely-restrained desire. The wasteland may be hell on earth, but somehow, the thought of reaching Riley, of easing her ache, makes it all seem worthwhile. May the MAD have mercy on anything that tries to stop you...</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('WA5D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play('3A5'); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you forge deeper into the wasteland, a glimmer of hope catches your eye - a small, stagnant creek, winding its way through the cracked earth. Your spirits lift at the sight, a fleeting respite from the endless dust and heat. But as you approach, your gaze snags on a scrap of white fluttering beside the brackish water.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Heart in your throat, you snatch up the page, instantly recognizing Riley's now-familiar scrawl. "Riley's Log VI," it reads, the words wavering and uneven, as if written by a trembling hand.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/WA6DA.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With bated breath, you begin to read, devouring her words like a man starved. Riley's voice leaps off the page, raw and fever-bright, painting a vivid picture of her latest trials.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>"I can see her now, the MAD Trainee," she writes, her script jagged with barely-contained excitement. "I've been tracking her for days, biding my time, waiting for the perfect moment to strike. The virus is like a drumbeat in my blood, urging me on, making me crave the clash of our auras, the heat of our bodies entwined in battle..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your pulse quickens as you read, your own body reacting traitorously to the sheer, molten need in Riley's words. You can practically feel her hunger, her desperate, clawing desire for the sweet release of violent, viral combat.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Swallowing hard, trying to ignore the insistent throb of your cock</action> <inner>God, the way she talks about it...like it's the only thing that can ease the ache inside her, even for a moment. I can't even imagine what that must be like...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With trembling hands, you unfold the photo tucked within the log - and nearly drop it in shock. It's Riley, her lean, sweat-slicked body almost completely bare, her eyes wild and her legs spread in wanton invitation. The sight sears itself into your brain, stoking the embers of your own forbidden desire to a fever pitch.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/WA6DB.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Tearing your gaze away, ashamed and enthralled in equal measure</action> <inner>Fuck, I shouldn't...I can't...but she's just so...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Gritting your teeth, you finish the log, your mind awhirl with dark, dizzying fantasies. You can picture it all too clearly - Riley locked in mortal combat with her foe, their bodies straining and writhing against each other, lost to the primal rhythm of viral lust. The image makes your blood burn, your hand straying unconsciously to the aching bulge in your pants.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clenching your fist, trying desperately to master yourself</action> <inner>No, damn it! Focus! She needs your help, not your perverted imaginings. You have to find her, save her from this madness...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a shaky breath, you tear your gaze from Riley's haunting visage and stare out over the barren wastes, your heart heavy with longing and dread. You know you're walking a razor's edge now, teetering between salvation and damnation with every step. But there's no turning back - not with Riley's fate hanging in the balance.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Steeling yourself, you tuck the log away and press onward, chasing the specter of Riley's desperation like a man possessed. The wasteland may break your body, but it's the hunger in your soul that truly terrifies you. And deep down, you know it's a hunger that only she can sate, come what may...</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('WA6D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play('3A6'); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you step into the dappled sunlight of the serene Peacewood, the air is filled with the earthy aroma of moss and fresh leaves. Sunbeams pierce through the canopy, casting a kaleidoscope of light and shadow on the forest floor. Your heart beats with the thrill of the unknown as you embark on a journey once taken by an adventurer named Sarah.</p></div> </div><!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>In the gentle embrace of the woods, a whisper of the past calls out to you. There, partially buried under a tuft of ferns, lies a tattered and worn piece of paper, the Page I of Sarah's log. Your fingers tremble slightly as you carefully unfold it, wary of further damage.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/minigames/YA1D1.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Gently brushing the dirt off the page</action> <inner>Sarah, what secrets did you uncover in these silent woods?</inner> <p>"This is just the beginning."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The writing on the log is faded, the ink smudged by time and weather, but Sarah's name stands out, an echo of her spirit that once wandered here. The rest of the text, though elusive, ignites a spark of curiosity within you. You are treading in the footsteps of an explorer, and every fiber of your being knows that this is where your adventure truly begins.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>The Peacewood holds its breath, as if waiting for me to uncover its enigmas.</inner> <p>"I will follow where you led, Sarah, and see through your eyes."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With the page secured in your backpack, you take a deep breath and step further into the forest, the crunch of leaves underfoot your only companion. The journey ahead promises the thrill of discovery and the peril of the unknown, but you are resolute. For in your hands, you hold not just a page, but the first chapter of a story waiting to be continued.</p> </div> </div> <!-- Buttons --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('YA1D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("2A1"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You push further into the dense foliage of Peacewood, the air thick with mystery. The forest floor is a tapestry of moss and fallen leaves, and a symphony of wildlife fills the air, but the beauty of the place does not distract you from your quest. You're here to follow in the footsteps of Sarah, the enigmatic adventurer whose logs have become your guide to unraveling the forest's secrets.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you venture deeper, the trees seem to lean in, whispering secrets of the ages. The light of the sun filters through the canopy in golden beams, illuminating the path ahead. You scan the surroundings, searching for any sign of Sarah's passage. And there it is—a page, slightly yellowed and brittle with age, pinned under a stone.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Kneeling down to pick up the paper, you feel a surge of excitement</action> <inner>This has to be it, another piece of the puzzle.</inner> <p>"Sarah's Page II."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/minigames/YA2D1.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The page feels heavy with importance as you begin to read, Sarah's neat script revealing more of her story. She speaks of her determination to uncover the mysteries of the virus that seems to infuse the forest with life and danger in equal measure. Her words paint a picture of creatures, twisted by the virus's influence, their forms and desires magnified.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Sarah's writing mentions: "The forest's lusty creatures are unlike any fauna documented before. Their eyes glow with a strange luminescence, and I can feel the pull of their presence. I must understand how the virus affects them, what it could mean for science... and for mankind."</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You find yourself looking over your shoulder, half-expecting to see the glowing eyes of these creatures on you. But there is only the forest, silent now, as if holding its breath.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The scene is vivid, the danger tangible. You fold the page carefully and tuck it into your journal. This forest holds more than beauty—it hides truths that are both wondrous and terrifying. With a mixture of fear and fascination, you press on, intent on discovering what became of Sarah and what the Peacewood has yet to reveal. </p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Standing up with renewed purpose, your gaze fixed on the path ahead</action> <inner>Sarah was onto something big, something that could change everything. I have to keep going.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>And so you do, the thrill of the unknown propelling you further into the heart of the Peacewood.</p> </div> </div> <!-- Buttons --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('YA2D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("2A2"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you venture deeper into the heart of Peacewood, the atmosphere thickens with an enigmatic aura. The trees loom taller here, their branches weaving a dense canopy that filters the sunlight into a kaleidoscope of greens. You can't shake off the feeling of being watched, yet you press on, driven by an insatiable curiosity and the footsteps of the one who came before you — Sarah.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Your hand brushes against the rough bark of an ancient tree</action> <inner>Sarah's determination is infectious, even if it's only through her words. I can almost feel her presence here...</inner> <p>"She was onto something big, something worth all this secrecy."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you follow the trail left by Sarah's meticulous notes, the forest seems to respond to your intrusion, the air vibrates with the faint hum of hidden life. You stumble upon a page, slightly damp but legible, nestled among the twisted roots of a gnarled oak. It's Sarah's Page III.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>You unfold the page with care, eyes scanning the hastily scribbled text</action> <inner>This must be the path she mentioned, the one leading to... what exactly?</inner> <p>"A weird and fast woman? Now that's something I didn't expect."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/minigames/YA3D1.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The page details a sudden encounter with a woman whose movements were a blur, almost unnatural. Sarah's description paints a vivid picture of agility and grace, yet there's an undercurrent of unease that you can't ignore.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>The sound of a twig snapping causes you to whirl around, heart racing</action> <inner>Was that just an animal, or...?</inner> <p>"Hello? Sarah? Is that you?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The silence that follows is deafening, the forest holding its breath along with you. There's no response, and the sensation of isolation wraps around you like a shroud.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The page in your hands trembles slightly as you read Sarah's account of her own virus symptoms, a mirror to your present condition. She speaks of a subtle shift in her perception, a sharpening of senses and arousal followed by an inexplicable weariness, as if the forest itself is reaching out and sapping her sanity.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Taking a deep breath, you pocket the page and prepare to move forward</action> <inner>Sarah's encounter must have happened around here. I need to stay sharp and follow this path she discovered. </inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you move forward, the virus's dual-edged sword is ever-present in your mind. The forest seems to both feed the virus and offer the means to control it. The game is one of balance, and you are both player and pawn in Peacewood's shadowed depths.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the trail leads you onward, the signs of Sarah's passage grow fresher, the mystery of Peacewood unraveling with each step. The balance of fear and excitement is a potent mix that propels you forward into the unknown, your every sense heightened to the wonders and dangers that lie ahead.</p> </div> </div> <!-- Buttons --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('YA3D'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("2A3"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you step further into the dense foliage of the Peacewood, the air grows thick and heavy, as though the forest itself is breathing with a life of its own. The sun's rays struggle to pierce through the towering canopy, creating a mosaic of light and shadow on the forest floor. With each step, your sense of unease grows; the path Sarah took is not for the faint of heart.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your eyes scan the underbrush, searching for any sign of Sarah's passage. The forest seems to whisper secrets as leaves rustle underfoot, and a distant birdcall echoes through the trees. You can't shake the feeling that you're not alone.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You remember Sarah's words about the virus, and the deeper you go, the more real her warnings seem to become.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Suddenly, you spot something partially buried under a layer of fallen leaves: Page IV of Sarah's logs. Your heart races as you carefully pick it up, the paper feeling brittle and damp in your hands.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/YA4D1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her handwriting is shaky, the ink smudged in places, The sense of trepidation is palpable in her words. "Day 16: I can feel it now, the virus and my arousal is growing stronger. It's as if the forest itself is feeding it into my veins. The deeper I venture, the more potent its presence becomes. I must find the source, but I fear the forest is aware of my intentions."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You fold the page carefully and tuck it into your backpack. The weight of Sarah's discovery now rests on your shoulders. You can feel the first whispers of the virus's effect—a slight vertigo, a subtle but insistent throbbing in your temples.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's a part of you that wants to turn back, to flee the oppressive embrace of the Peacewood, but Sarah's journey—and yours—must continue.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a deep breath, you press on, your resolve hardening. The path forward is unclear, but Sarah's logs are a beacon, guiding you deeper into the heart of the forest and closer to the mysteries that await.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You wonder, with a mix of fear and anticipation, what lies ahead and whether you, unlike Sarah, will emerge from the Peacewood unscathed.</p> </div> </div> <!-- Buttons --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('YA4D'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("2A4"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Venturing deeper into the enigmatic Peacewood, you can't shake off the feeling of being watched. The trees sway with a rhythm that seems to harmonize with your own heartbeat. The forest floor, a mosaic of greens and browns, crunches softly under your boots, giving a sense of both intrusion and belonging.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You come across a clearing where the sun breaks through the canopy, spotlighting a lone, weathered journal page — PAGE V. The edges are frayed, and the ink is slightly smudged from the forest's damp breath, but the words are legible, and they pull you into Sarah's world.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/YA5DA.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><i>Her handwriting is a dance between hurried strokes and careful curves</i></p> <p>"I can feel the forest's breath, hot on my neck, something is stirring in its heart. I can't be the only one drawn to the forest's secrets. If you're reading this, know that I've heard the giant's steps, the crunch of old leaves under a weight much greater than my own. I doubt anyone will find this, as the forest cloaks its paths from the uninitiated. But, just in case, I'm leaving a part of me behind."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Beside the text lies a photograph. The sunlight seems to revere her image as it falls upon the picture, highlighting her features — blonde, mature, and undeniably beautiful. Her smile is a mix of thrill and trepidation, a silent challenge to those who venture after her.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/YA5DB.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The trees around you seem to lean in, curious about this new artifact in their midst. You pocket the photograph and the page, a tangible connection to the adventurer who walked this path before you. With every step forward, you carry not just your own determination, but the echo of Sarah's as well.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>And so, with the forest's whispers in your ears and Sarah's resolve in your pocket, you press on, deeper into the verdant unknown.</p> </div> </div> <!-- Choice --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('YA5D'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("2A5"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You're trekking deeper into the dense Peacewood, the air thick with a palpable sense of mystery. Your footsteps are muffled by the underbrush, and your eyes are ever scanning the environment, seeking out Sarah's next clue. The forest seems to be breathing with life, yet there's an eerie feeling that something unnatural lingers here.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The further you venture, the more intense the atmosphere becomes. This forest holds secrets, and you can feel them calling.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stumble upon a clearing, and there it is: Page VI, nestled against a tree, seemingly placed there with purpose.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Picking up the page, your hands tremble slightly</action> <inner>Sarah was here, and she was not alone.</inner> <p>"She found something... someone," you read aloud, your voice steadier than your racing heart.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The page details Sarah's encounter with a figure - a woman dressed in what appears to be a mechanized suit.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Your eyes devour the words, trying to paint the image in your mind</action> <inner>A woman, or something more?</inner> <p>"Erratic and affected by the virus,"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The log is accompanied by a polaroid, a haunting image of the woman. She is surprisingly cute and the sight gives you a virus horny surge.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/minigames/YA6DA.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Studying the picture, you can't help but feel watched</action> <inner>What is her story?</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you pocket the photograph and the log, you can't shake the feeling of being followed.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Turning quickly, you scan the forest. Is she still out there, watching, waiting? You remind yourself to be cautious, the weight of the unknown pressing against you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With the virus effects looming over your every step, you push forward. The forest around you seems to grow darker, the trees now specters in the waning light.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Your resolve hardens</action> <inner>Sarah's journey continues through me.</inner> <p>"I will uncover the truth,"</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('YA6D'); //current passage id } })(); function nextBloc(event) { SugarCube.Engine.play("2A6"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SA_1.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "shelter");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>As awareness slowly returns to you, the fuzzy shapes and muted voices hovering above gradually come into focus. Blinking rapidly, the concerned faces of your mother Cherie and sisters Lana and Elfie sharpen before your eyes.</p> </div> </div> <!-- Cherie --> <div class="message" id="message2"> <img character="cherie" alt="CherieAvatar" class="avatar"> <div class="text"> <strong>Cherie</strong> <div class="action">placing a hand on your forehead</div> <div class="inner-thought">feeling relieved he's finally awake</div> <p>Oh thank heavens, you're awake! We've been so worried about you!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="./ressources/scenes/XS1A.webp" class="image clickable-media"> </div> <!-- Elfie --> <div class="message" id="message4"> <img character="elfie" alt="ElfieAvatar" class="avatar"> <div class="text"> <strong>Elfie</strong> <div class="action">bouncing excitedly and leaning in close</div> <div class="inner-thought">Yay he's awake!</div> <p>Big brother!! You're awake!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message5"> <img src="./ressources/scenes/XS1B.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message6"> <div class="text"> <p>Before Elfie can pounce on you in her enthusiasm, Cherie gently pulls her back.</p> </div> </div> <!-- Cherie --> <div class="message" id="message7"> <img character="cherie" alt="CherieAvatar" class="avatar"> <div class="text"> <strong>Cherie</strong> <div class="action">guiding Elfie back</div> <div class="inner-thought">Don't overwhelm him dear</div> <p>Easy Elfie, let's give him some space. I need to check his vitals.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message8"> <img src="./ressources/scenes/XS1C.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message9"> <div class="text"> <p>As Cherie checks your pulse and breathing, Lana stands back with her arms crossed, a scowl on her face.</p> </div> </div> <!-- Lana --> <div class="message" id="message10"> <img character="lana" alt="LanaAvatar" class="avatar"> <div class="text"> <strong>Lana</strong> <div class="action">rolling her eyes</div> <div class="inner-thought">Typical little brother worrying us again</div> <p>Ugh, about time you woke up! Do you have any idea how much you freaked us out passing out like that?</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message11"> <img src="./ressources/scenes/XS1D.webp" class="image clickable-media"> </div> <!-- Cherie --> <div class="message" id="message12"> <img character="cherie" alt="CherieAvatar" class="avatar"> <div class="text"> <strong>Cherie</strong> <div class="action">focusing on your vital signs</div> <div class="inner-thought">Pulse is strong, breathing is steady</div> <p>Try not to move too much, you've been out for quite a while. We found you collapsed out there and couldn't recover your gear. I'm afraid it's been lost.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message13"> <img src="./ressources/scenes/XS1E.webp" class="image clickable-media"> </div> <!-- Elfie --> <div class="message" id="message14"> <img character="elfie" alt="ElfieAvatar" class="avatar"> <div class="text"> <strong>Elfie</strong> <div class="action">watching you with wide, concerned eyes</div> <div class="inner-thought">I hope he's feeling better now</div> <p>You gave us such a big scare big brother! Please be more careful, we were so worried!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message15"> <img src="./ressources/scenes/XS1F.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message16"> <div class="text"> <p>As Cherie helps you slowly sit up, the details come back - your relentless scavenging runs, pushing your body to the brink until you finally collapsed from exhaustion. With no one to stimulate your release, the virus has progressed unchecked in your system while you were unconscious.</p> </div> </div> <!-- Lana --> <div class="message" id="message17"> <img character="lana" alt="LanaAvatar" class="avatar"> <div class="text"> <strong>Lana</strong> <div class="action">shaking her head in frustration</div> <div class="inner-thought">He never thinks before he acts</div> <p>Seriously, using up all your energy like that? You know what happens when you get too strung out! What were you thinking being so reckless?</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message18"> <img src="./ressources/scenes/XS1G.webp" class="image clickable-media"> </div> <!-- Cherie --> <div class="message" id="message19"> <img character="cherie" alt="CherieAvatar" class="avatar"> <div class="text"> <strong>Cherie</strong> <div class="action">supporting you steadily</div> <div class="inner-thought">Take it slow now</div> <p>I know you feel driven to provide for us, but you must remember to care for yourself as well. We can't have you burn out like this again, it's too dangerous in your condition. Please, try to be more mindful from now on.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message20"> <img src="./ressources/scenes/XS1H.webp" class="image clickable-media"> </div> <!-- Elfie --> <div class="message" id="message21"> <img character="elfie" alt="ElfieAvatar" class="avatar"> <div class="text"> <strong>Elfie</strong> <div class="action">giving your hand a gentle, reassuring squeeze</div> <div class="inner-thought">I'll help take care of you!</div> <p>Don't push yourself so hard big brother. I'll help support you however I can so you don't have to do everything alone!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message22"> <img src="./ressources/scenes/XS1I.webp" class="image clickable-media"> </div> <!-- Lana --> <div class="message" id="message23"> <img character="lana" alt="LanaAvatar" class="avatar"> <div class="text"> <strong>Lana</strong> <div class="action">lightly smacking your shoulder</div> <div class="inner-thought">You idiot, you really messed up this time</div> <p>Next time use your head before you do something stupid like that again! If you need help, ask us instead of running yourself ragged!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message24"> <img src="./ressources/scenes/XS1J.webp" class="image clickable-media"> </div> <!-- Cherie --> <div class="message" id="message25"> <img character="cherie" alt="CherieAvatar" class="avatar"> <div class="text"> <strong>Cherie</strong> <div class="action">stroking your hair soothingly</div> <div class="inner-thought">My sweet boy, I know it's difficult but we're here for you</div> <p>I know it can't be easy managing the virus like this. But please remember, you don't have to shoulder this burden alone. We're your family, let us support you. You just focus on recovering your strength for now.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message26"> <img src="./ressources/scenes/XS1K.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message27"> <div class="text"> <p>The concerned love radiating from your mother and sisters wraps around you like a warm blanket. Despite Lana's harsh words, you know she cares deeply too. Gazing at the three women who mean everything to you, relief and gratitude well up within. With their help, you feel certain you'll get through this stronger than ever.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message28"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'XS1' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<<nobr>> <<type 40ms>> <div class="death_message">You are dead. Better luck next time! Now please load one of your previous saves.</div> <</type>> <div class="death_buttons"> <div onclick="SugarCube.UI.saves()" class="death_button">LOAD</div> <div onclick="SugarCube.UI.restart()" class="death_button">RESTART</div> </div> <</nobr>> <style> body { background-color: black; display: flex; align-content: center; justify-content: center; align-items: center; height: 100vh; } #story, #passages, .passage { height: 100%; } .passage { display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; text-align: center; } .death_buttons { display: flex; flex-direction: row; align-content: center; justify-content: center; align-items: center; text-align: center; opacity: 0; transition: opacity 1s; } .death_button { font-weight: bold; background-color: white; color: black; height: 4vh; width: 15vh; border-radius: 1vh; margin: 1vh; display: flex; align-content: center; justify-content: center; align-items: center; text-align: center; cursor: pointer; transition: all 0.5s ease; } .death_button:hover { background-color: black; color: white; } </style>\ <script> if (typeof Check_if_doc_is_loaded === 'undefined') {setTimeout(() => { SugarCube.Engine.play(SugarCube.State.passage);}, 40); } else { SugarCube.UIBar.stow(); SugarCube.UIBar.hide(); var buttonsCont = document.querySelector(".death_buttons"); setTimeout(() => { buttonsCont.style.opacity = 1; }, "4000"); } </script>\
<<nobr>> <<set $roomsleeprandomizer to random(1,10)>> <<repeat 0.1s>> <<if $roomsleeprandomizer is 1>> <<goto "SA1">> <</if>> <<if $roomsleeprandomizer is 2>> <<goto "SA2">> <</if>> <<if $roomsleeprandomizer is 3>> <<goto "SA3">> <</if>> <<if $roomsleeprandomizer is 4>> <<goto "SA4">> <</if>> <<if $roomsleeprandomizer is 5>> <<goto "SA5">> <<else>> <</if>> <<if $roomsleeprandomizer is 6>> <<goto "SA6">> <<else>> <</if>> <<if $roomsleeprandomizer is 7>> <<goto "SA7">> <<else>> <</if>> <<if $roomsleeprandomizer is 8>> <<goto "SA8">> <<else>> <</if>> <<if $roomsleeprandomizer is 9>> <<goto "SA9">> <<else>> <</if>> <<if $roomsleeprandomizer is 10>> <<goto "SA10">> <<else>> <</if>> <</repeat>> <</nobr>>
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Text paragraph without avatar --> <div class="message user-message3" id="message1"> <div class="text"> <p class="p2"> <p>You lie down on your makeshift bed, your muscles aching from the day's challenges. As you drift into sleep, you find yourself standing in the barren Wastelands, a place of desolation and danger.</p> </p> </div> </div> <!-- Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA1A.webp" class="image clickable-media"> </div> <!-- Text paragraph with angela (ACTION)--> <div class="message" id="message3"> <img character="angela" alt="AngelaAvatar" class="avatar"> <div class="text"> <strong>$characters.angela.name</strong> <div class="action">Appears beside you, ethereal</div> <p>The Wastelands are harsh, but they hold valuable resources. Be cautious but curious.</p> </div> </div> <!-- User's text paragraph with MC --> <div class="message user-message" id="message4"> <div class="text"> <strong>You</strong> <p>I'll keep my eyes open and my guard up.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Text paragraph with angela --> <div class="message" id="message5"> <img character="angela" alt="AngelaAvatar" class="avatar"> <div class="text"> <strong>$characters.angela.name</strong> <p>Good. Remember, some risks are worth taking, but always be prepared for the unexpected.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message6"> <img src="ressources/scenes/SA1B.webp" class="image clickable-media"> </div> <!-- Button Box 1button --> <div class="message user-message4" id="message7"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Wake up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>>\ <script> var currentPassageId = 'SA1' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "tiredness", 0); nextPartOfDay(); } </script>\
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p class="p2"> <p>You collapse onto your bed, exhausted. In your dreams, you find yourself in the lush but mysterious forest.</p> </p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA2A.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Angela (ACTION) --> <div class="message" id="message3"> <img character="angela" alt="AngelaAvatar" class="avatar"> <div class="text"> <strong>$characters.angela.name</strong> <div class="action">Materializes, smiling</div> <p>The forest is teeming with life, but not all of it is friendly.</p> </div> </div> <!-- Line 4: User's text paragraph with MC --> <div class="message user-message" id="message4"> <div class="text"> <strong>You</strong> <p>So, what should I look out for?</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 5: Text paragraph with Angela --> <div class="message" id="message5"> <img character="angela" alt="AngelaAvatar" class="avatar"> <div class="text"> <strong>$characters.angela.name</strong> <p>Be wary of the creatures, but also look for herbs and plants. They can be useful for crafting and healing.</p> </div> </div> <!-- Line 6: Image --> <div class="message user-message3" id="message6"> <img src="ressources/scenes/SA2B.webp" class="image clickable-media"> </div> <!-- Line 7: Button Box 1button --> <div class="message user-message4" id="message7"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> wake up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>>\ <script> var currentPassageId = 'SA2' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "tiredness", 0); } </script>\
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p class="p2"> <p>You lay down, your thoughts swirling. Soon, you find yourself walking through the District, the last bastion of civilization.</p> </p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA3A.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Angela (ACTION) --> <div class="message" id="message3"> <img character="angela" alt="AngelaAvatar" class="avatar"> <div class="text"> <strong>$characters.angela.name</strong> <div class="action">Joins you, looking around</div> <p>The District is where you'll resource yourself and build your relationships.</p> </div> </div> <!-- Line 4: User's text paragraph with MC --> <div class="message user-message" id="message4"> <div class="text"> <strong>You</strong> <p>Got it. Anything specific I should know?</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 5: Text paragraph with Angela --> <div class="message" id="message5"> <img character="angela" alt="AngelaAvatar" class="avatar"> <div class="text"> <strong>$characters.angela.name</strong> <p>Keep an eye on the Trust and Lust attributes with the women. They'll determine how much help or hindrance they can be.</p> </div> </div> <!-- Line 6: Image --> <div class="message user-message3" id="message6"> <img src="ressources/scenes/SA3B.webp" class="image clickable-media"> </div> <!-- Line 7: Button Box 1button --> <div class="message user-message4" id="message7"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> wake up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>>\ <script> var currentPassageId = 'SA3' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "tiredness", 0); nextPartOfDay(); } </script>\
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p class="p2"> <p>You hit the bed, your body yearning for rest. As you sleep, you find yourself in an arena, facing an unknown opponent.</p> </p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA4A.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Angela (ACTION) --> <div class="message" id="message3"> <img character="angela" alt="AngelaAvatar" class="avatar"> <div class="text"> <strong>$characters.angela.name</strong> <div class="action">Appears, arms crossed</div> <p>Fights are inevitable, but they're also an opportunity.</p> </div> </div> <!-- Line 4: User's text paragraph with MC --> <div class="message user-message" id="message4"> <div class="text"> <strong>You</strong> <p>An opportunity for what?</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 5: Text paragraph with Angela --> <div class="message" id="message5"> <img character="angela" alt="AngelaAvatar" class="avatar"> <div class="text"> <strong>$characters.angela.name</strong> <p>To gain resources, build your skills, and earn respect. But remember, losing a fight could mean losing valuable items.</p> </div> </div> <!-- Line 6: Image --> <div class="message user-message3" id="message6"> <img src="ressources/scenes/SA4B.webp" class="image clickable-media"> </div> <!-- Line 7: Button Box 1button --> <div class="message user-message4" id="message7"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> wake up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>>\ <script> var currentPassageId = 'SA4' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "tiredness", 0); } </script>\
<!--style--> <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p class="p2"> <p>You're in a deep sleep, half-covered by the thin blanket. Cherie quietly enters the room, her eyes widening as she notices your state of undress.</p> </p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA7.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Cherie (ACTION) --> <div class="message" id="message3"> <img character="cherie" alt="CherieAvatar" class="avatar"> <div class="text"> <strong>$characters.cherie.name</strong> <div class="action">Stares, heart pounding</div> <p>I came to check his vitals, but this... I should leave, but the virus... it's making it hard to look away.</p> </div> </div> <!-- Line 4: Image --> <div class="message user-message3" id="message4"> <img src="ressources/scenes/SA5A.webp" class="image clickable-media"> </div> <!-- Line 5: Button Box 1button --> <div class="message user-message4" id="message5"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> wake up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>>\ <script> var currentPassageId = 'SA5' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "tiredness", 0); nextPartOfDay(); } </script>\
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p class="p2"> <p>You're sprawled on your bed, the blanket barely covering you. Elfie bursts into the room, her eyes widening as she takes in the sight before her.</p> </p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA7.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Elfie (ACTION) --> <div class="message" id="message3"> <img character="elfie" alt="ElfieAvatar" class="avatar"> <div class="text"> <strong>$characters.elfie.name</strong> <div class="action">Giggles internally, cheeks flushing</div> <p>He looks so relaxed. But why do I feel so... jittery all of a sudden? Is it the virus? It's like it's pulling me closer.</p> </div> </div> <!-- Line 4: Image --> <div class="message user-message3" id="message4"> <img src="ressources/scenes/SA6A.webp" class="image clickable-media"> </div> <!-- Line 5: Button Box 1button --> <div class="message user-message4" id="message5"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> wake up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>>\ <script> var currentPassageId = 'SA6' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "tiredness", 0); } </script>\
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p class="p2"> <p>You're lying on your bed, half-naked and deep in sleep. Lana walks in, her eyes locking onto you as she stands by the door.</p> </p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA7.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Lana (ACTION) --> <div class="message" id="message3"> <img character="lana" alt="LanaAvatar" class="avatar"> <div class="text"> <strong>$characters.lana.name</strong> <div class="action">Stiffens, eyes narrowing</div> <p>I should've knocked. But why can't I leave? The virus is making it hard to... resist this tension.</p> </div> </div> <!-- Line 4: Image --> <div class="message user-message3" id="message4"> <img src="ressources/scenes/SA7A.webp" class="image clickable-media"> </div> <!-- Line 5: Button Box 1button --> <div class="message user-message4" id="message5"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> wake up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>>\ <script> var currentPassageId = 'SA7' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "tiredness", 0); nextPartOfDay(); } </script>\
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You wake up to the sound of the door creaking open. Cherie walks in, her eyes immediately darting to your lower half.</p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA8.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Cherie (ACTION) --> <div class="message" id="message3"> <img character="cherie" alt="CherieAvatar" class="avatar"> <div class="text"> <strong>$characters.cherie.name</strong> <div class="action">Flustered, trying to maintain eye contact</div> <p>Good morning. I came to check on you. How did you sleep?</p> </div> </div> <!-- Line 4: Image --> <div class="message user-message3" id="message4"> <img src="ressources/scenes/SA8A.webp" class="image clickable-media"> </div> <!-- Line 5: Text paragraph with Player --> <div class="message" id="message5"> <img character="mc" alt="PlayerAvatar" class="avatar"> <div class="text"> <strong>You</strong> <div class="action">Oblivious, stretching</div> <p>Slept like a rock. What brings you here so early?</p> </div> </div> <!-- Line 6: Text paragraph with Cherie --> <div class="message" id="message6"> <img character="cherie" alt="CherieAvatar" class="avatar"> <div class="text"> <strong>$characters.cherie.name</strong> <div class="action">Blushing, quickly glances away</div> <p>Just... routine check-up. I'll let you get dressed.</p> </div> </div> <!-- Line 7: Button Box 1button --> <div class="message user-message4" id="message7"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Get up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>>\ <script> var currentPassageId = 'SA8' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "tiredness", 0); } </script>\
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You're jolted awake by Elfie's cheerful voice. As your eyes open, you see her standing there, her eyes wide and cheeks flushed.</p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA8.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Elfie (ACTION) --> <div class="message" id="message3"> <img character="elfie" alt="ElfieAvatar" class="avatar"> <div class="text"> <strong>$characters.elfie.name</strong> <div class="action">Giggling, but noticeably flustered</div> <p>Morning! Rise and shine!</p> </div> </div> <!-- Line 4: Image --> <div class="message user-message3" id="message4"> <img src="ressources/scenes/SA9A.webp" class="image clickable-media"> </div> <!-- Line 5: Text paragraph with Player --> <div class="message" id="message5"> <img character="mc" alt="PlayerAvatar" class="avatar"> <div class="text"> <strong>You</strong> <div class="action">Yawning, sitting up</div> <p>You're up early. What's the occasion?</p> </div> </div> <!-- Line 6: Text paragraph with Elfie --> <div class="message" id="message6"> <img character="elfie" alt="ElfieAvatar" class="avatar"> <div class="text"> <strong>$characters.elfie.name</strong> <div class="action">Fidgeting, avoiding eye contact</div> <p>No occasion! Just wanted to say hi! I'll, um, let you get ready!</p> </div> </div> <!-- Line 7: Button Box 1button --> <div class="message user-message4" id="message7"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Get up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>> <script> var currentPassageId = 'SA9' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "tiredness", 0); nextPartOfDay(); } </script>
<<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You slowly wake up, sensing someone's presence. Opening your eyes, you see Lana standing by the door, her eyes averted.</p> </div> </div> <!-- Line 2: Image --> <div class="message user-message3" id="message2"> <img src="ressources/scenes/SA8.webp" class="image clickable-media"> </div> <!-- Line 3: Text paragraph with Lana (ACTION) --> <div class="message" id="message3"> <img character="lana" alt="LanaAvatar" class="avatar"> <div class="text"> <strong>$characters.lana.name</strong> <div class="action">Cautious, looking away</div> <p>Morning. You're up late.</p> </div> </div> <!-- Line 4: Image --> <div class="message user-message3" id="message4"> <img src="ressources/scenes/SA10A.webp" class="image clickable-media"> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <div class="action user-message">Stretching, unaware</div> <p>Is it? I could've slept longer. What's up?</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Text paragraph with Lana --> <div class="message" id="message6"> <img character="lana" alt="LanaAvatar" class="avatar"> <div class="text"> <strong>$characters.lana.name</strong> <div class="action">Blushing, clears throat</div> <p>Nothing. I'll leave you to it.</p> </div> </div> <!-- Line 7: Button Box 1button --> <div class="message user-message4" id="message7"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Get up </div> </div> </div> </div> </div> <style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style> <</nobr>> <script> var currentPassageId = 'SA10' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "tiredness", 0); } </script>
<<nobr>> <<set $roommastrandomizer to random(1,4)>> <<if $stats.virus lte 49>> <<if $roommastrandomizer is 1>> <<goto "SB1">> <</if>> <<if $roommastrandomizer is 2>> <<goto "SB2">> <</if>> <<if $roommastrandomizer is 3>> <<goto "SB3">> <</if>> <<if $roommastrandomizer is 4>> <<goto "SB4">> <</if>> <</if>> <<if $stats.virus gte 50>> <<if $stats.virus lte 84>> <<if $roommastrandomizer is 1>> <<goto "SB5">> <</if>> <<if $roommastrandomizer is 2>> <<goto "SB6">> <</if>> <<if $roommastrandomizer is 3>> <<goto "SB7">> <</if>> <<if $roommastrandomizer is 4>> <<goto "SB8">> <</if>> <</if>> <</if>> <<if $stats.virus gte 85>> <<if $roommastrandomizer is 1>> <<goto "SB9">> <</if>> <<if $roommastrandomizer is 2>> <<goto "SB10">> <</if>> <<if $roommastrandomizer is 3>> <<goto "SB11">> <</if>> <<if $roommastrandomizer is 4>> <<goto "SB12">> <</if>> <</if>> <</nobr>>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You enter your room, feeling a mild itch of the virus' effects. It's manageable but distracting. You decide to take care of it before it escalates.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Sighs softly</div> <p>Better now than later.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB1A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You quickly relieve the tension, a sense of mild relief washing over you.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Alright, back to it.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB1' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "virus", 0); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You enter your room, feeling a mild itch of the virus' effects. It's manageable but distracting. You decide to take care of it before it escalates.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Sighs softly</div> <p>Better now than later.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB2A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You quickly relieve the tension, a sense of mild relief washing over you.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Alright, back to it.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB2' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You enter your room, feeling a mild itch of the virus' effects. It's manageable but distracting. You decide to take care of it before it escalates.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Sighs softly</div> <p>Better now than later.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB3A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You quickly relieve the tension, a sense of mild relief washing over you.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Alright, back to it.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB3' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "virus", 0); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You enter your room, feeling a mild itch of the virus' effects. It's manageable but distracting. You decide to take care of it before it escalates.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Sighs softly</div> <p>Better now than later.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB4A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You quickly relieve the tension, a sense of mild relief washing over you.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Alright, back to it.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB4' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You walk into your room, the virus' pull becoming more noticeable. Your thoughts are starting to scatter, and you know you need to address it.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Frustrated</div> <p>Can't focus like this.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB5A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You take a moment to relieve the tension. The sensation is stronger than usual, and you feel a wave of clarity afterwards.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Much better.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB5' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "virus", 0); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You walk into your room, the virus' pull becoming more noticeable. Your thoughts are starting to scatter, and you know you need to address it.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Frustrated</div> <p>Can't focus like this.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB6A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You take a moment to relieve the tension. The sensation is stronger than usual, and you feel a wave of clarity afterwards.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Much better.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB6' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You walk into your room, the virus' pull becoming more noticeable. Your thoughts are starting to scatter, and you know you need to address it.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Frustrated</div> <p>Can't focus like this.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB7A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You take a moment to relieve the tension. The sensation is stronger than usual, and you feel a wave of clarity afterwards.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Much better.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB7' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "virus", 0); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You barely make it to your room, the virus' effects reaching a critical point. Your vision blurs, and your thoughts are a jumbled mess. You're at the edge, and you know you need immediate relief.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Struggling</div> <p>Now. Must do it now.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB8A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>With urgency, you relieve the intense tension. The sensation is almost overwhelming, but the relief is immediate and profound.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Close call.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB8' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You barely make it to your room, the virus' effects reaching a critical point. Your vision blurs, and your thoughts are a jumbled mess. You're at the edge, and you know you need immediate relief.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Struggling</div> <p>Now. Must do it now.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB9A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>With urgency, you relieve the intense tension. The sensation is almost overwhelming, but the relief is immediate and profound.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Close call.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB9' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "virus", 0); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You barely make it to your room, the virus' effects reaching a critical point. Your vision blurs, and your thoughts are a jumbled mess. You're at the edge, and you know you need immediate relief.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Struggling</div> <p>Now. Must do it now.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB10A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>With urgency, you relieve the intense tension. The sensation is almost overwhelming, but the relief is immediate and profound.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Close call.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB10' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You barely make it to your room, the virus' effects reaching a critical point. Your vision blurs, and your thoughts are a jumbled mess. You're at the edge, and you know you need immediate relief.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Struggling</div> <p>Now. Must do it now.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB11A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>With urgency, you relieve the intense tension. The sensation is almost overwhelming, but the relief is immediate and profound.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Close call.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB11' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Scene description (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You barely make it to your room, the virus' effects reaching a critical point. Your vision blurs, and your thoughts are a jumbled mess. You're at the edge, and you know you need immediate relief.</p> </div> </div> <!-- Main Character's ACTION and TEXT --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">(Struggling)</div> <p>"Now. Must do it now."</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB12A.webp" class="image clickable-media"> </div> <!-- Main Character's TEXT --> <div class="message user-message" id="message4"> <div class="text"> <strong>You</strong> <p>"Close call."</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Button Box 1button --> <div class="message user-message4" id="message5"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB12' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You enter your room, feeling a mild itch of the virus' effects. It's manageable but distracting. You decide to take care of it before it escalates.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Sighs softly</div> <p>Better now than later.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <div class="message user-message3" id="message3"> <video loop class="video clickable-media" preload="metadata"> <source src="ressources/scenes/SB13A.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You quickly relieve the tension, a sense of mild relief washing over you.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Alright, back to it.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB13' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You walk into your room, the virus' pull becoming more noticeable. Your thoughts are starting to scatter, and you know you need to address it.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Frustrated</div> <p>Can't focus like this.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB14A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You take a moment to relieve the tension. The sensation is stronger than usual, and you feel a wave of clarity afterwards.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Much better.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB14' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); nextPartOfDay(); modVariable("set", "stat", "virus", 0); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Scene description (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You barely make it to your room, the virus' effects reaching a critical point. Your vision blurs, and your thoughts are a jumbled mess. You're at the edge, and you know you need immediate relief.</p> </div> </div> <!-- Main Character's ACTION and TEXT --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">(Struggling)</div> <p>"Now. Must do it now."</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB15A.webp" class="image clickable-media"> </div> <!-- Main Character's TEXT --> <div class="message user-message" id="message4"> <div class="text"> <strong>You</strong> <p>"Close call."</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Button Box 1button --> <div class="message user-message4" id="message5"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB12' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<style> body { background-image: url('ressources/backgrounds/1SA.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Line 1: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message1"> <div class="text"> <p>You enter your room, feeling a mild itch of the virus' effects. It's manageable but distracting. You decide to take care of it before it escalates.</p> </div> </div> <!-- Line 2: Text paragraph with Player --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="action user-message">Sighs softly</div> <p>Better now than later.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 3: Image --> <div class="message user-message3" id="message3"> <img src="ressources/scenes/SB16A.webp" class="image clickable-media"> </div> <!-- Line 4: Text paragraph without avatar (Narrator) --> <div class="message user-message3" id="message4"> <div class="text"> <p>You quickly relieve the tension, a sense of mild relief washing over you.</p> </div> </div> <!-- Line 5: Text paragraph with Player --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <p>Alright, back to it.</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Line 6: Button Box 1button --> <div class="message user-message4" id="message6"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>> <script> var currentPassageId = 'SB16' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; } const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here /*var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); }*/ } } //BUTTON CHOICE var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); SugarCube.Engine.play("1SA"); modVariable("set", "stat", "virus", 0); nextPartOfDay(); } </script>
<<nobr>> <<set $roomsleeprandomizer to random(1,4)>> <<repeat 0.1s>> <<if $roomsleeprandomizer is 1>> <<goto "SH1">> <</if>> <<if $roomsleeprandomizer is 2>> <<goto "SH2">> <</if>> <<if $roomsleeprandomizer is 3>> <<goto "SH3">> <</if>> <<if $roomsleeprandomizer is 4>> <<goto "SH4">> <</if>> <</repeat>> <</nobr>>
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You feel your body weakening as the hunger pangs become unbearable. Your stomach is twisted in knots and your head throbs from the lack of nourishment. Looking over at your mother and sisters, you see the gaunt expressions on their faces, their eyes sunken and bodies frail from starvation. You know you have failed them as a provider.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="inner-thought">I'm so hungry...we're all starving...this is all my fault...</div> <div class="action">Fading in and out of consciousness as extreme hunger takes hold</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message3"> <div class="text"> <p>Suddenly, you see a fiery blonde woman stomping towards you, radiating power. As she comes into focus, you recognize her as Tsunade from Naruto, the legendary Sannin.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message4"> <img src="./ressources/scenes/SH1A.webp" class="image clickable-media"> </div> <!-- Tsunade --> <div class="message" id="message5"> <img src="./ressources/icons/SH1.webp" class="avatar"> <div class="text"> <strong>Tsunade</strong> <div class="action">Scowling angrily</div> <p>Hey you! Snap out of it and get your act together! Your family needs you!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message6"> <div class="text"> <p>You stare in disbelief as she grabs you by the collar and shakes you roughly.</p> </div> </div> <!-- Tsunade --> <div class="message" id="message7"> <img src="./ressources/icons/SH1.webp" class="avatar"> <div class="text"> <strong>Tsunade</strong> <div class="action">Glaring intensely</div> <p>Look at me! I'm not going to let you give up so easily. Now stand up and be a man!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message8"> <div class="text"> <p>She slaps you hard across the face, the shock helping you focus. You scramble to your feet as she looks you up and down appraisingly.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message9"> <img src="./ressources/scenes/SH1B.webp" class="image clickable-media"> </div> <!-- Tsunade --> <div class="message" id="message10"> <img src="./ressources/icons/SH1.webp" class="avatar"> <div class="text"> <strong>Tsunade</strong> <div class="action">Nodding in approval</div> <p>Hmm not bad, you've got some potential. But we need to relieve some of that tension first.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message11"> <div class="text"> <p>With brute strength she shoves you against the wall, pressing her curvy body against yours aggressively as she crushes her lips to yours.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message12"> <div class="text"> <strong>You</strong> <div class="action">Kissing her back passionately</div> <div class="inner-thought">Oh Tsunade! I've always wanted this!</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Tsunade --> <div class="message" id="message13"> <img src="./ressources/icons/SH1.webp" class="avatar"> <div class="text"> <strong>Tsunade</strong> <div class="action">Breaking the kiss and scowling</div> <p>Quiet! I'm doing this to motivate you, not for your enjoyment.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message14"> <img src="./ressources/scenes/SH1C.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message15"> <div class="text"> <p>She roughly gropes your hardening manhood through your pants, squeezing it painfully. You wince but don't protest.</p> </div> </div> <!-- Tsunade --> <div class="message" id="message16"> <img src="./ressources/icons/SH1.webp" class="avatar"> <div class="text"> <strong>Tsunade</strong> <div class="action">Unzipping your pants</div> <p>Hmph, well you do seem ready for action at least.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message17"> <img src="./ressources/scenes/SH1D.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message18"> <div class="text"> <p>She squats down and takes your length into her mouth, sucking forcefully as you gasp in pained pleasure. Her nails dig into your thighs as she bobs her head at a punishing pace.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message19"> <img src="./ressources/scenes/SH1E.webp" class="image clickable-media"> </div> <!-- Tsunade --> <div class="message" id="message20"> <img src="./ressources/icons/SH1.webp" class="avatar"> <div class="text"> <strong>Tsunade</strong> <div class="action">Coming up for air</div> <p>Had enough yet? I'm just getting started!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message21"> <img src="./ressources/scenes/SH1F.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message22"> <div class="text"> <p>Not waiting for an answer, she spins you around and bends you over a table. You hear her wetness as she fingers herself readying you for entry.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message23"> <img src="./ressources/scenes/SH1G.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message24"> <div class="text"> <p>With no hesitation she slams every inch of you deep into her soaked pussy. You rail her from behind, the table creaking from the force of your powerful thrusts.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message25"> <img src="./ressources/scenes/SH1H.webp" class="image clickable-media"> </div> <!-- Tsunade --> <div class="message" id="message26"> <img src="./ressources/icons/SH1.webp" class="avatar"> <div class="text"> <strong>Tsunade</strong> <div class="action">Moaning loudly as she fucks you</div> <p>Come on! Take me like a man! Don't you dare finish before me!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message27"> <div class="text"> <p>You clench your teeth, willing yourself not to climax too soon as you pounds her relentlessly. Finally you feel her inner walls clench and flutter around your shaft.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message28"> <img src="./ressources/scenes/SH1I.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message29"> <div class="text"> <p>She lets out an feral scream as her orgasm crashes through her. The pulsations quickly send you over the edge as you are about to cum she switches position and take you between her boobs to finish you off and you end up coming on her chest.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message30"> <img src="./ressources/scenes/SH1J.webp" class="image clickable-media"> </div> <!-- Tsunade --> <div class="message" id="message31"> <img src="./ressources/icons/SH1.webp" class="avatar"> <div class="text"> <strong>Tsunade</strong> <div class="action">Panting heavily, she withdraws from you and straightens her clothes, her demeanor shifting from lustful to strict</div> <p>I hope I've made myself clear. No more wallowing in self-pity, your family needed you!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message32"> <div class="text"> <p>The vision starts to fade as you snap back to reality. Looking around frantically you see your starving mother and sisters barely holding on. You don't have enough energy to do something about it and everything fades to black.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message33"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('Death Screen')"> Farewell </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SH1' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { }*/ function Option2() { SugarCube.UI.saves() } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ } </script>\
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You feel your body weakening as the hunger pangs become unbearable. Your stomach is twisted in knots and your head throbs from the lack of nourishment. Looking over at your mother and sisters, you see the gaunt expressions on their faces, their eyes sunken and bodies frail from starvation. You know you have failed them as a provider.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="inner-thought">I'm so hungry...we're all starving...this is all my fault...</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message3"> <div class="text"> <p>Suddenly, you see a curvy orange-haired woman approaching you through your hazy vision. As she comes into focus, you recognize her as Nami from One Piece.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message4"> <img src="./ressources/scenes/SH2A.webp" class="image clickable-media"> </div> <!-- Nami --> <div class="message" id="message5"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Hands on her hips, looking irritated</div> <p>Ugh, I can't believe you got us stranded out here with no food! Some captain you are.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message6"> <div class="text"> <strong>You</strong> <div class="inner-thought">N-Nami? What are you doing here? I must be hallucinating...</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Nami --> <div class="message" id="message7"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Rolling her eyes</div> <p>Yeah yeah, you're hallucinating. But I'm still pissed at you! As your navigator, I'm gonna have to punish you for this.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message8"> <div class="text"> <p>She reaches down and grabs your crotch aggressively, causing you to yelp in surprise.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message9"> <img src="./ressources/scenes/SH2B.webp" class="image clickable-media"> </div> <!-- Nami --> <div class="message" id="message10"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Squeezing tighter</div> <p>Now be a good captain and take your punishment like a man. I'm confiscating this treasure of yours!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message11"> <div class="text"> <p>You groan as she massages and strokes you through your pants, your manhood quickly swelling from her skilled touch.</p> </div> </div> <!-- Nami --> <div class="message" id="message12"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Noticing your erection and smirking</div> <p>Well well, what do we have here? Looks like someone's wanting to hoist the mainsail.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message13"> <img src="./ressources/scenes/SH2C.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message14"> <div class="text"> <strong>You</strong> <div class="inner-thought">Oh wow Nami...your hands feel amazing...</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Nami --> <div class="message" id="message15"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Giggling</div> <p>All right captain, I'll give you a little reward for enduring your punishment so well.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message16"> <div class="text"> <p>She unzips your pants and takes your length into her mouth, sucking vigorously. You gasp and grip her hair as intense waves of pleasure wash over you.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message17"> <img src="./ressources/scenes/SH2D.webp" class="image clickable-media"> </div> <!-- Nami --> <div class="message" id="message18"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Pausing her sucking to look up at you sternly</div> <p>Just remember you still owe me for this! I'm adding an extra 10,000 berries to your debt for this special service.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message19"> <div class="text"> <p>You groan in protest but don't stop her as she resumes her enthusiastic blowjob. She bobs her head rapidly, taking you deep into her throat again and again. Then she decides to give you a proper titsjob and get to it like her life depends on it.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message20"> <img src="./ressources/scenes/SH2E.webp" class="image clickable-media"> </div> <!-- Nami --> <div class="message" id="message21"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Popping you out of her mouth with an audible slurp</div> <p>Mmm you taste pretty good captain, but I think it's time I got a bit more compensation for my hard work.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message22"> <div class="text"> <p>She strips naked, showcasing her perfect curves. Gripping your shoulders, she climbs on top and lowers herself onto your stiffness.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message23"> <img src="./ressources/scenes/SH2F.webp" class="image clickable-media"> </div> <!-- Nami --> <div class="message" id="message24"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Moaning as she rides you</div> <p>Ah yes, this is the real treasure!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message25"> <div class="text"> <p>You thrust up to meet her gyrations, pounding away at her dripping womanhood. You run your hands over her smooth skin and ample chest, playing with her nipples as she works her hips.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message26"> <img src="./ressources/scenes/SH2G.webp" class="image clickable-media"> </div> <!-- Nami --> <div class="message" id="message27"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Picking up speed</div> <p>Oh yes, just like that! Give me everything you've got!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message28"> <div class="text"> <p>The lewd sounds of your bodies colliding fill the air. You flip her into other positions, ramming her hard from behind and missionary.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message29"> <img src="./ressources/scenes/SH2H.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message30"> <div class="text"> <p>Finally, you cry out as the pressure builds to a breaking point. With a few more powerful thrusts, you erupt inside her, filling her womb with your seed.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message31"> <div class="text"> <p>As you finish, panting hard, Nami climbs off and starts getting dressed.</p> </div> </div> <!-- Nami --> <div class="message" id="message32"> <img src="./ressources/icons/SH2.webp" class="avatar"> <div class="text"> <strong>Nami</strong> <div class="action">Counting on her fingers</div> <p>Let's see, with interest that comes to...one million berries you owe me now! You better pay up when we get back to the ship!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message33"> <div class="text"> <p>She blows a kiss and walks away swaying her hips. As she fades from sight, the grim reality sets back in. Your family lies lifeless around you, and your own life quickly slips away as darkness closes in...</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message34"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('Death Screen')"> Farewell </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SH2' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>Fading in and out of consciousness as extreme hunger takes hold, your mind starts to play tricks on you. Suddenly, you see a shapely figure with blue hair approaching you through your hazy vision. As she comes into focus, you recognize her as Bulma from Dragonball.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message2"> <img src="./ressources/scenes/SH3A.webp" class="image clickable-media"> </div> <!-- Bulma --> <div class="message" id="message3"> <img src="./ressources/icons/SH3.webp" class="avatar"> <div class="text"> <strong>Bulma</strong> <div class="action">Hands on her hips, looking at you skeptically</div> <p>Hey there, you don't look so good. What's going on?</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message4"> <div class="text"> <strong>You</strong> <div class="inner-thought">Staring in disbelief, too weak to respond</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Bulma --> <div class="message" id="message5"> <img src="./ressources/icons/SH3.webp" class="avatar"> <div class="text"> <strong>Bulma</strong> <div class="action">Rolls her eyes and sighs</div> <p>Ugh, men. Always getting themselves into trouble.</p> <div class="action">Kneels down next to you and checks your vitals</div> <p>Yup, you're clearly not doing well. But don't worry, I'll take care of you!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message6"> <div class="text"> <p>She unzips your pants in a no-nonsense manner, licking her lips when she sees your swollen manhood.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message7"> <img src="./ressources/scenes/SH3B.webp" class="image clickable-media"> </div> <!-- Bulma --> <div class="message" id="message8"> <img src="./ressources/icons/SH3.webp" class="avatar"> <div class="text"> <strong>Bulma</strong> <div class="action">Matter-of-factly</div> <p>Well, looks like someone needs some relief here. I guess I have no choice but to help out.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message9"> <div class="text"> <p>Gripping you firmly, she starts stroking up and down in a confident manner, moaning a little at the feeling of you pulsing in her hand.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message10"> <img src="./ressources/scenes/SH3C.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message11"> <div class="text"> <strong>You</strong> <div class="action">Groaning loudly, too weak to believe this is really happening</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Bulma --> <div class="message" id="message12"> <img src="./ressources/icons/SH3.webp" class="avatar"> <div class="text"> <strong>Bulma</strong> <div class="action">Smirking arrogantly</div> <p>I know, I have very talented hands. Just relax and let me work my magic!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message13"> <div class="text"> <p>She takes you into her mouth and bobs her head rapidly, putting her oral skills on full display. Her tongue swirls skillfully as she works your length. The pleasure is so intense you see stars.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message14"> <img src="./ressources/scenes/SH3D.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message15"> <div class="text"> <strong>You</strong> <div class="action">Breathing heavily, nearing climax</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Bulma --> <div class="message" id="message16"> <img src="./ressources/icons/SH3.webp" class="avatar"> <div class="text"> <strong>Bulma</strong> <div class="action">Hands on her hips</div> <p>Alright, I think that's enough foreplay. Time for the main event!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message17"> <div class="text"> <p>She strips fully nude in a matter-of-fact manner then pushes you down and straddles you, sliding down onto your slick shaft.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message18"> <img src="./ressources/scenes/SH3E.webp" class="image clickable-media"> </div> <!-- Bulma --> <div class="message" id="message19"> <img src="./ressources/icons/SH3.webp" class="avatar"> <div class="text"> <strong>Bulma</strong> <div class="action">Moaning loudly</div> <p>Mmm yes, now this is more like it!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message20"> <div class="text"> <p>She rides you hard, grinding her hips aggressively. You grip her ass tightly, pumping up to meet her intense rhythm. Her breasts bounce wildly right in your face.</p> </div> </div> <!-- Bulma --> <div class="message" id="message21"> <img src="./ressources/icons/SH3.webp" class="avatar"> <div class="text"> <strong>Bulma</strong> <div class="action">Commanding you in a stern voice</div> <p>Come on, put some more effort into this! I'm not doing all the work here!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message22"> <img src="./ressources/scenes/SH3F.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message23"> <div class="text"> <p>You pound away intensely, flipping her into different positions as she demands. Missionary, doggy style, reverse cowgirl - you work hard to keep up with Bulma's commands and relentless pace.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message24"> <img src="./ressources/scenes/SH3G.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message25"> <div class="text"> <p>Finally, at her urging you drive in deep and hold yourself there, exploding intensely inside her spasming sex. You empty yourself completely until she's satisfied. As the last drops spill from you, the pleasure and Bulma's presence fade away...</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message24"> <img src="./ressources/scenes/SH3H.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message26"> <div class="text"> <p>Leaving you alone, with the grim reality setting in that your family has died of starvation while you hallucinated. Darkness consumes your vision as you join them in eternal sleep.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message27"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('Death Screen')"> Farewell </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SH3' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You feel your body weakening as the hunger pangs become unbearable. Your stomach is twisted in knots and your head throbs from lack of nourishment. Looking over at your mother and sisters, you see the gaunt expressions on their faces, their bodies frail from starvation. You know you have failed them as a provider.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message2"> <div class="text"> <strong>You</strong> <div class="inner-thought">Fading in and out of consciousness from extreme hunger</div> <p>I'm so hungry...we're all starving...this is all my fault...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message3"> <div class="text"> <p>Suddenly, you see a curvy brunette woman approaching you through your hazy vision. As she comes into focus, you recognize her as Delia Ketchum, Ash's mom from Pokemon.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message4"> <img src="./ressources/scenes/SH4A.webp" class="image clickable-media"> </div> <!-- Delia --> <div class="message" id="message5"> <img src="./ressources/icons/SH4.webp" class="avatar"> <div class="text"> <strong>Delia</strong> <div class="action">Looking concerned</div> <p>Oh dear, you poor thing. You must be absolutely famished.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message6"> <div class="text"> <strong>You</strong> <p>Delia? I must be hallucinating...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Delia --> <div class="message" id="message7"> <img src="./ressources/icons/SH4.webp" class="avatar"> <div class="text"> <strong>Delia</strong> <div class="action">In a soothing, motherly voice</div> <p>Shh, try to relax. Let me make you a little more comfortable.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message8"> <img src="./ressources/scenes/SH4B.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message9"> <div class="text"> <p>She gently presses her curvy body against yours in an attempt to prop you up. Her hands lightly brush over your chest in a caring manner as she checks on your condition. You feel your manhood stirring as she looks at you kindly.</p> </div> </div> <!-- Delia --> <div class="message" id="message10"> <img src="./ressources/icons/SH4.webp" class="avatar"> <div class="text"> <strong>Delia</strong> <div class="action">Noticing your reaction</div> <p>Oh! I apologize, I didn't mean to excite you. I was just trying to help.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message11"> <div class="text"> <strong>You</strong> <div class="action">Groaning involuntarily</div> <p>Sorry, your touch just feels really nice...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Image --> <div class="message user-message3" id="message12"> <img src="./ressources/scenes/SH4C.webp" class="image clickable-media"> </div> <!-- Delia --> <div class="message" id="message13"> <img src="./ressources/icons/SH4.webp" class="avatar"> <div class="text"> <strong>Delia</strong> <div class="action">Blushing but still speaking gently</div> <p>Oh my, you poor dear. You must be delirious from hunger. Here, let me eat you out.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message14"> <div class="text"> <p>She unzips your pants and gingerly takes your length into her mouth. She sucks you gently, providing soothing oral stimulation. You grip her hair instinctively as waves of pleasure wash over you.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message15"> <img src="./ressources/scenes/SH4D.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message16"> <div class="text"> <strong>You</strong> <div class="action">Moaning</div> <p>Oh wow...Delia that feels incredible...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message17"> <div class="text"> <p>She continues oral care, speaking words of comfort around your manhood. Sensing you are close to release, she slowly pops you out of her mouth.</p> </div> </div> <!-- Delia --> <div class="message" id="message18"> <img src="./ressources/icons/SH4.webp" class="avatar"> <div class="text"> <strong>Delia</strong> <div class="action">Smiling maternally</div> <p>There now, feeling a little better? I want to make sure you’re taken care of.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message19"> <img src="./ressources/scenes/SH4E.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message20"> <div class="text"> <p>After getting her wet, you enter her with care. You make love slowly and gently, both of you moaning in subdued euphoria. You explore various positions - missionary, sideways, cowgirl - maintaining an intimate tenderness throughout.</p> </div> </div> <!-- Image --> <!-- div class="message user-message3" id="message21"> <img src="./ressources/scenes/SH4F.webm" class="image clickable-media"> </div --> <div class="message user-message3" id="message21"> <video loop class="video clickable-media" preload="metadata"> <source src="./ressources/scenes/SH4F.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narator --> <div class="message user-message3" id="message22"> <div class="text"> <p>Finally, you ask to take her from behind. She gets on all fours and you enter her tight rear entrance tenderly. You move together in bliss until climaxing simultaneously, filling her with intense warmth.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message23"> <img src="./ressources/scenes/SH4G.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message24"> <div class="text"> <p>As you finish, the vision of Delia starts to fade. She smiles at you lovingly.</p> </div> </div> <!-- Delia --> <div class="message" id="message25"> <img src="./ressources/icons/SH4.webp" class="avatar"> <div class="text"> <strong>Delia</strong> <p>Come see me again soon dear. I’ll take good care of you.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message26"> <div class="text"> <p>The euphoria fades as the hallucination ends. You see your mother and sisters motionless on the ground, realizing your failure to provide has led to their starvation and your shared demise.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message27"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('Death Screen')"> Farewell </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SH4' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<<nobr>> <<set $roomsleeprandomizer to random(1,4)>> <<repeat 0.1s>> <<if $roomsleeprandomizer is 1>> <<goto "SS1">> <</if>> <<if $roomsleeprandomizer is 2>> <<goto "SS2">> <</if>> <<if $roomsleeprandomizer is 3>> <<goto "SS3">> <</if>> <<if $roomsleeprandomizer is 4>> <<goto "SS4">> <</if>> <</repeat>> <</nobr>>
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You are exhausted after a long day of working and surviving in the harsh new world. As the night grows late, you feel your eyelids getting heavier and heavier. You know you should get some rest, but you decide to push yourself and stay up just a little longer. As the minutes tick by, an overwhelming sense of tiredness washes over you. Your limbs feel like lead, and your mind starts drifting into a sleepy haze.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message2"> <div class="text"> <p>Just as you are about to give in and collapse onto your bed, a strange vision suddenly appears before you. Through your bleary, half-closed eyes, you see D.Va from the game Overwatch materializing in your room. She looks so real, so vibrant and full of life.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="./ressources/scenes/SS1A.webp" class="image clickable-media"> </div> <!-- D.Va --> <div class="message" id="message4"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action giggling and posing cutely">You must be hallucinating from exhaustion</div> <p>Hey there! Looks like someone stayed up way past their bedtime.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message5"> <div class="text"> <p>You shake your head, trying to clear the fog from your mind. This can't be real. Am I dreaming? Or is the lack of sleep making me hallucinate?</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message6"> <div class="text"> <p>D.Va saunters closer, swaying her hips flirtatiously. She reaches out and runs a finger down your chest. You feel a tingling jolt at her touch. This feels too real to be just a hallucination.</p> </div> </div> <!-- D.Va --> <div class="message" id="message7"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action biting her lower lip">His reaction is so cute</div> <p>Mm someone's been working hard. I can help you relax, you know.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message8"> <img src="./ressources/scenes/SS1B.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message9"> <div class="text"> <p>Before you can respond, she hops into your lap, straddling you. You inhale sharply at the feeling of her weight on top of you. She grinds her hips, and you feel a swell of arousal building inside you. The scent of her hair and skin surrounds you, so sweet and tantalizing.</p> </div> </div> <!-- D.Va --> <div class="message" id="message10"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action gazing into your eyes">Let's see how far I can take this fantasy of his</div> <p>Just sit back and let me make you feel good.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message11"> <img src="./ressources/scenes/SS1C.webp" class="image clickable-media"> </div> <!-- D.Va --> <div class="message" id="message12"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action biting her lip">Mm someone's excited...let's take this further</div> <p>Is that a rocket in your pocket, or are you just happy to see me?</p> </div> </div> <div class="message user-message3" id="message13"> <video loop class="video clickable-media" preload="metadata"> <source src="./ressources/scenes/SS1D.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- D.Va --> <div class="message" id="message14"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action looking up at you hungrily">The sounds he's making are so hot</div> <p>Does that feel good? Tell me how good it feels...</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message15"> <div class="text"> <strong>You</strong> <p>It feels incredible...don't stop!</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Image --> <div class="message user-message3" id="message16"> <img src="./ressources/scenes/SS1E.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message17"> <div class="text"> <strong>You</strong> <p>Oh god...your mouth feels so good!</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- D.Va --> <div class="message" id="message18"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action moaning around you">Mmm he tastes amazing</div> </div> </div> <!-- Image --> <div class="message user-message3" id="message19"> <img src="./ressources/scenes/SS1F.webp" class="image clickable-media"> </div> <!-- D.Va --> <div class="message" id="message20"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action straddling you again">Let's try something else now</div> <p>My turn...</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message21"> <img src="./ressources/scenes/SS1G.webp" class="image clickable-media"> </div> <!-- D.Va --> <div class="message" id="message22"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <p>Oh yes, just like that! Don't stop!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message23"> <img src="./ressources/scenes/SS1H.webp" class="image clickable-media"> </div> <!-- Image --> <div class="message user-message3" id="message24"> <img src="./ressources/scenes/SS1I.webp" class="image clickable-media"> </div> <!-- D.Va --> <div class="message" id="message25"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action eyes rolling back in pleasure">Yes, please fuck me hard!</div> <p>Ah! You feel so good inside me!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message26"> <img src="./ressources/scenes/SS1J.webp" class="image clickable-media"> </div> <!-- D.Va --> <div class="message" id="message27"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <div class="action panting heavily">Let's try my other hole now</div> <p>I want you in my ass!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message28"> <img src="./ressources/scenes/SS1K.webp" class="image clickable-media"> </div> <!-- Image --> <div class="message user-message3" id="message29"> <img src="./ressources/scenes/SS1L.webp" class="image clickable-media"> </div> <!-- D.Va --> <div class="message" id="message30"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <p>Oh god yes! Just like that! Fuck my ass!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message31"> <img src="./ressources/scenes/SS1M.webp" class="image clickable-media"> </div> <!-- Image --> <div class="message user-message3" id="message32"> <img src="./ressources/scenes/SS1N.webp" class="image clickable-media"> </div> <!-- Image --> <div class="message user-message3" id="message33"> <img src="./ressources/scenes/SS1O.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message34"> <div class="text"> <p>As the haze of lust begins clearing, D.Va turns and gives you a final smile and wink.</p> </div> </div> <!-- D.Va --> <div class="message" id="message35"> <img src="./ressources/icons/SS1.webp" class="avatar"> <div class="text"> <strong>D.Va</strong> <p>That was fun! Get some rest now...until next time!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message36"> <div class="text"> <p>With those parting words, she blows you a kiss. Your surroundings start spinning and fading to black. Your head hits the pillow just before everything goes dark. The last thing you remember is D.Va's smiling face as you drift off into a deep, restful sleep.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message37"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Wake up </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SS1' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You are exhausted after a long day of working and surviving in the harsh new world. As the night grows late, you feel your eyelids getting heavier and heavier. You know you should get some rest, but you decide to push yourself and stay up just a little longer. As the minutes tick by, an overwhelming sense of tiredness washes over you. Your limbs feel like lead, and your mind starts drifting into a sleepy haze.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message2"> <div class="text"> <p>Just as you are about to give in and collapse onto your bed, a strange vision suddenly appears before you. Through your bleary, half-closed eyes, you see a flash of green in the corner of your eye. You turn to see Cammy and Chun-Li materializing before you, looking vibrant and ready for battle.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="./ressources/scenes/SS2A.webp" class="image clickable-media"> </div> <!-- Image --> <div class="message user-message3" id="message4"> <img src="./ressources/scenes/SS2B.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message5"> <div class="text"> <p>Cammy stands tall and proud, her muscular yet feminine physique accentuated by her signature green leotard. Her long blonde braids sway as she places her hands on her shapely hips. "Look who can barely keep his eyes open. Seems someone hasn't been getting proper rest," she says in her distinct British accent.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message6"> <div class="text"> <p>Chun-Li giggles and nods in agreement, her cheeks plump and rosy. She's wearing her blue qipao dress, the silky material hugging her curvy figure. Her powerful thighs flex as she approaches you. "That won't do. You need to relax so you can continue fighting the good fight," she says, her voice sweet yet firm.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message7"> <div class="text"> <div class="inner-thought">This can't be real. Am I dreaming? Or is the lack of sleep making me hallucinate?</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message8"> <div class="text"> <p>The two saunter closer, swaying their hips. Cammy reaches out and runs a hand down your chest. You feel a tingling sensation at her touch. Chun-Li climbs into your lap, the feeling of her weight on you seeming too real for a hallucination.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message9"> <img src="./ressources/scenes/SS2C.webp" class="image clickable-media"> </div> <!-- Chun-li --> <div class="message" id="message10"> <img src="./ressources/icons/SS2.webp" class="avatar"> <div class="text"> <strong>Chun-Li</strong> <div class="action">Mm, you've got some nice muscles here. But you're all tense.</div> </div> </div> <!-- Image --> <div class="message user-message3" id="message11"> <img src="./ressources/scenes/SS2D.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message12"> <div class="text"> <p>She begins grinding her hips, and you feel yourself swelling with arousal. Cammy kneels down and starts stroking you through your pants. A jolt of pleasure shoots up your spine.</p> </div> </div> <!-- Cammy --> <div class="message" id="message13"> <img src="./ressources/icons/SS2.webp" class="avatar"> <div class="text"> <strong>Cammy</strong> <p>Well, look who's excited to see us. Let's help take care of this, shall we?</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message14"> <div class="text"> <p>She unzips your pants, freeing your erect length. The feeling of her hand wrapping around you is incredible. She starts stroking up and down, quickly finding a good rhythm.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message15"> <img src="./ressources/scenes/SS2E.webp" class="image clickable-media"> </div> <!-- Chun-Li --> <div class="message" id="message16"> <img src="./ressources/icons/SS2.webp" class="avatar"> <div class="text"> <strong>Chun-Li</strong> <p><div class="action">[biting her lip]</div> Oh, that looks like it feels really good. Tell us how good it feels, baby.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message17"> <div class="text"> <strong>You</strong> <p>It feels amazing, don't stop!</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message18"> <div class="text"> <p>Cammy smiles and takes you into her mouth. Her tongue swirls and laps at you skillfully. Chun-Li grinds against you harder, moaning. The pleasure builds to greater heights.</p> </div> </div> <div class="message user-message3" id="message19"> <video loop class="video clickable-media" preload="metadata"> <source src="./ressources/scenes/SS2F.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Image --> <div class="message user-message3" id="message20"> <img src="./ressources/scenes/SS2G.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message21"> <div class="text"> <strong>You</strong> <p>Oh god, your mouths feels so good, Cammy!</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Cammy --> <div class="message" id="message22"> <img src="./ressources/icons/SS2.webp" class="avatar"> <div class="text"> <strong>Cammy</strong> <p><div class="action">[popping you out]</div> I think he's ready for more.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message23"> <div class="text"> <p>Chun-Li stands up and lowers herself onto you, guiding you inside her. You both moan loudly as she takes you in deeply. She starts bouncing rapidly, her breasts jiggling. You take one of her nipples into your mouth, sucking in time with her movements.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message24"> <img src="./ressources/scenes/SS2H.webp" class="image clickable-media"> </div> <!-- Chun-Li --> <div class="message" id="message25"> <img src="./ressources/icons/SS2.webp" class="avatar"> <div class="text"> <strong>Chun-Li</strong> <p>Oh yes, you feel so good inside me! Fuck me harder!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message26"> <div class="text"> <p>She rides you passionately while Cammy positions herself over your face. You lean up and hungrily start eating her out. She grinds against your tongue, crying out. The pleasure is almost more than you can take.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message27"> <img src="./ressources/scenes/SS2I.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message28"> <div class="text"> <p>Finally, unable to hold back any longer, you erupt powerfully inside Chun-Li. She climaxes around you at the same time. Cammy moans loudly as you make her orgasm with your mouth.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message29"> <img src="./ressources/scenes/SS2J.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message30"> <div class="text"> <p>Utterly spent, the two fighters smile down at you. Just before you pass out, Cammy winks.</p> </div> </div> <!-- Cammy --> <div class="message" id="message31"> <img src="./ressources/icons/SS2.webp" class="avatar"> <div class="text"> <strong>Cammy</strong> <p>Sleep well, love. We'll play more next time.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message32"> <div class="text"> <p>As they fade away, you fall into a deep, restful sleep.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message33"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SS2' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You are absolutely exhausted after a long day of mystery solving and evading dangers. As night falls, your eyelids grow heavier by the minute. You know you should get some rest, but your curiosity compels you to stay up a little longer. However, your fatigue quickly becomes overwhelming.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message2"> <div class="text"> <p>Just as you start dozing off, a familiar figure appears unexpectedly - none other than Velma from the Scooby Doo gang. Adjusting her oversized glasses, she approaches you with a coy smile.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="./ressources/scenes/SS3A.webp" class="image clickable-media"> </div> <!-- Velma --> <div class="message" id="message4"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>Jinkies! Looks like someone's tuckered out. Why don't you let me help you relax, Shaggy?</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message5"> <div class="text"> <p>Still skeptical that she's really there, you rub your eyes and blink hard. Velma giggles and walks closer, her short orange pleated skirt swishing around her thighs.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message6"> <img src="./ressources/scenes/SS3B.webp" class="image clickable-media"> </div> <!-- Velma --> <div class="message" id="message7"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>I know just the thing to help you unwind before bed.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message8"> <div class="text"> <p>Before you can react, she climbs into your lap, the warmth of her body pressing against you. Your pulse quickens as she wiggles her hips, her soft curves tantalizing even through the layers of her clothes.</p> </div> </div> <!-- Velma --> <div class="message" id="message9"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>Just lie back and let me work my magic.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message10"> <div class="text"> <p>She traces her fingers down your chest, igniting sparks beneath your skin. With deft hands, she frees you from your pants, wrapping her fingers around your rapidly hardening length.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message11"> <img src="./ressources/scenes/SS3C.webp" class="image clickable-media"> </div> <!-- Velma --> <div class="message" id="message12"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>Well, well, what do we have here?</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message13"> <div class="text"> <p>She begins stroking up and down, quickly finding a rhythm that has you groaning. Her grip is snug but smooth, aided by the beads of precum oozing from your tip. The look of academic curiosity on her face makes it all the more arousing.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message14"> <img src="./ressources/scenes/SS3D.webp" class="image clickable-media"> </div> <!-- Velma --> <div class="message" id="message15"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>Fascinating reaction...I think some hands-on research is required.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message16"> <div class="text"> <p>She opens her plump lips and takes you into her warm, wet mouth. Her tongue swirls and laps eagerly, glasses fogging up. She bobs her head slowly, working you deeper with each pass.</p> </div> </div> <!-- Velma --> <div class="message" id="message17"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>Mmph...delightful hypothesis confirmed...</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message18"> <div class="text"> <p>Her pace increases as you gently thread your fingers through her short auburn hair. The velvety friction of her mouth is incredible. You can feel the pressure building in your core, ready to erupt like a science experiment.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message19"> <img src="./ressources/scenes/SS3E.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message20"> <div class="text"> <p>Sensing your impending climax, she pops you out of her mouth and grins mischievously. She swiftly removes her saturated orange panties and straddles you once more.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message21"> <img src="./ressources/scenes/SS3F.webp" class="image clickable-media"> </div> <!-- Velma --> <div class="message" id="message22"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>I think it's time we test this theory to completion, don't you?</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message23"> <div class="text"> <p>She positions her entrance over you and sinks down, engulfing your length in her slick heat. You both gasp sharply as she takes you in to the hilt. Soon she finds her rhythm, bucking her hips as she rides you.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message24"> <img src="./ressources/scenes/SS3G.webp" class="image clickable-media"> </div> <!-- Velma --> <div class="message" id="message25"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>Jinkies, yes! So this is what "culminating the experiment" means!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message26"> <div class="text"> <p>You grip her supple waist, reveling in the feeling of her snug warmth. Her breathing grows ragged as she bounces faster, the wet sound of flesh colliding filling the room.</p> </div> </div> <!-- Velma --> <div class="message" id="message27"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>Don't stop! I'm so close to a breakthrough!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message28"> <div class="text"> <p>She throws her head back, lost in ecstasy as her inner walls spasm and clamp down on you. The added pressure triggers your own intense release. With a few final erratic thrusts, you empty yourself deep inside her.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message29"> <img src="./ressources/scenes/SS3H.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message30"> <div class="text"> <p>Completely spent, you both collapse in a tangled heap. Velma sighs contentedly and snuggles up beside you.</p> </div> </div> <!-- Velma --> <div class="message" id="message31"> <img src="./ressources/icons/SS3.webp" class="avatar"> <div class="text"> <strong>Velma</strong> <p>I'd call that a successful study session. Now get some rest, you've earned it!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message32"> <div class="text"> <p>She gives you a peck on the cheek before your vision fades to black. You feel her presence lingering as you drift into a deep, satisfied sleep.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message33"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SS3' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You are exhausted after a long day of working and surviving in the harsh new world. As the night grows late, you feel your eyelids getting heavier and heavier. You know you should get some rest, but you decide to push yourself and stay up just a little longer. As the minutes tick by, an overwhelming sense of tiredness washes over you. Your limbs feel like lead, and your mind starts drifting into a sleepy haze.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message2"> <div class="text"> <p>As you rub your bleary eyes, you see a shapely figure standing by the window. You do a double take as you realize it's Helen Parr from The Incredibles!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="./ressources/scenes/SS4A.webp" class="image clickable-media"> </div> <!-- Helen --> <div class="message" id="message4"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">Oh honey, you look absolutely exhausted! Why don't you have a seat and let me take care of you?</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message5"> <div class="text"> <p>Still wondering if you're hallucinating, you slowly sink down onto the edge of the bed. Helen sashays over, her hips swaying enticingly. She sits next to you and begins massaging your shoulders, her strong yet gentle fingers working out the knots.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message6"> <img src="./ressources/scenes/SS4B.webp" class="image clickable-media"> </div> <!-- Helen --> <div class="message" id="message7"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">You poor thing, you're so incredibly tense! Just relax and let me help you unwind.</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message8"> <div class="text"> <p>Her hands roam your back, dissolving the tension under her expert touch. After several minutes, she stops and stands up.</p> </div> </div> <!-- Helen --> <div class="message" id="message9"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">Now, why don't I help you get ready for bed?</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message10"> <div class="text"> <p>She kneels down and removes your shoes and socks, caressing your feet. Then she stands and unbuttons your shirt, peeling it off to reveal your chest. Her fingers trail lightly over your skin, raising goosebumps.</p> </div> </div> <!-- Helen --> <div class="message" id="message11"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">Let's get these pants off too, okay?</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message12"> <div class="text"> <p>She unzips your pants tantalizingly slowly, then tugs them down your legs. You lift your hips to help her pull them off completely, leaving you in just your boxers. She licks her lips appreciatively.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message13"> <img src="./ressources/scenes/SS4C.webp" class="image clickable-media"> </div> <!-- Helen --> <div class="message" id="message14"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">There, now make yourself comfortable on the bed.</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message15"> <div class="text"> <p>You settle back against the pillows. Helen climbs on top of you, straddling your lap. She begins grinding her hips, the friction feeling amazing even through both of your underwear.</p> </div> </div> <!-- Helen --> <div class="message" id="message16"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">Mmm...you deserve to feel good after such a long day.</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message17"> <div class="text"> <p>She reaches down and strokes your hard length through your boxers, eliciting a sharp inhale. Still undulating her hips, she uses her powers to remove her super suit, exposing her full, supple breasts.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message18"> <img src="./ressources/scenes/SS4D.webp" class="image clickable-media"> </div> <!-- Helen --> <div class="message" id="message19"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">Here, let me take care of this for you...</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message20"> <div class="text"> <p>She tugs your boxers down and wraps her hand firmly around your bare, rigid shaft. Her strokes are expertly paced as precum beads at your tip. The cool metal of her wedding ring heightens the sensations.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message21"> <div class="text"> <p>After bringing you close with her hands, she repositions herself above you. Her eyes lock with yours as she sinks down, enveloping your throbbing manhood within her hot, slick pussy. You both moan loudly as she takes you to the hilt.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message22"> <img src="./ressources/scenes/SS4E.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message23"> <div class="text"> <p>Helen rides you steadily, her hips gyrating fluidly. The sight of her bouncing on top of you is mesmerizing. She gradually increases her tempo until the bed is rocking and creaking.</p> </div> </div> <!-- Helen --> <div class="message" id="message24"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">There you go, just relax...let me make you feel incredible...</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message25"> <div class="text"> <p>Her velvety inner muscles squeeze and massage your length. Your hands grip her toned ass tightly as she brings you both to the precipice.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message26"> <img src="./ressources/scenes/SS4F.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message27"> <div class="text"> <p>Sensing you are on the edge, she redoubles her efforts, working her inner muscles to milk your climax from you. With a ragged cry, the pleasure peaks and breaks over you in pulsing waves.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message28"> <div class="text"> <p>As you float back down, she gives you a satisfied yet tender smile. But she doesn't stop there. Her hands and mouth continue to stoke your desire, coaxing you back to full arousal.</p> </div> </div> <!-- Helen --> <div class="message" id="message29"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">Oh, we're not done yet, honey...</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message30"> <div class="text"> <p>This time, she saddles up reversed, giving you a spectacular view of her shapely ass. As she rides you, she looks back over her shoulder, her eyes smoldering. You reach around to tease her stiff nipples as she swivels her hips.</p> </div> </div> <div class="message user-message3" id="message31"> <video loop class="video clickable-media" preload="metadata"> <source src="./ressources/scenes/SS4G.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narator --> <div class="message user-message3" id="message32"> <div class="text"> <p>When you are both nearing the brink again, she leans forward into a 69 position, enveloping your rigid cock with her lips. The dual sensations push you over the edge once more, your cries muffled by her glistening pussy pressed against your mouth.</p> </div> </div> <div class="message user-message3" id="message33"> <video loop class="video clickable-media" preload="metadata"> <source src="./ressources/scenes/SS4H.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narator --> <div class="message user-message3" id="message34"> <div class="text"> <p>Afterward, fully spent, Helen uses her powers to clean you both up and tuck you snugly under the blankets. She kisses your forehead tenderly, gazing at you with deep affection.</p> </div> </div> <!-- Helen --> <div class="message" id="message35"> <img src="./ressources/icons/SS4.webp" class="avatar"> <div class="text"> <strong>Helen</strong> <div class="action">Sleep now, sweetie. I'll be right here if you need anything.</div> </div> </div> <!-- Narator --> <div class="message user-message3" id="message36"> <div class="text"> <p>Her gentle caresses lull you quickly into a deep, peaceful slumber.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message37"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="nextBloc(event)"> Done </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SS4' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<<nobr>> <<set $roomsleeprandomizer to random(1,3)>> <<repeat 0.1s>> <<if $roomsleeprandomizer is 1>> <<goto "SV1">> <</if>> <<if $roomsleeprandomizer is 2>> <<goto "SV2">> <</if>> <<if $roomsleeprandomizer is 3>> <<goto "SV3">> <</if>> <</repeat>> <</nobr>>
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You feel a heaviness in your limbs as the virus courses through your body unchecked. Your vision blurs as your heart pounds deafeningly in your chest. This is it - the virus has finally overwhelmed you. As you sink to your knees, darkness creeping into your periphery, an ethereal figure seems to manifest before you.</p> </div> </div> <!-- Makima --> <div class="message" id="message2"> <img src="./ressources/icons/SV1.webp" class="avatar"> <div class="text"> <strong>Makima</strong> <div class="action">emerging from swirling mist, her red eyes piercing yours</div> <div class="inner-thought">You recognize this seductive anime villainess, though you know she can't possibly be real</div> <p>Hello there. It seems you've reached your limit.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="./ressources/scenes/SV1A.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message4"> <div class="text"> <p>You stare as Makima saunters toward you, her hips swaying hypnotically. You know you should be afraid, but you feel only desire pooling within you as your eyes travel over her voluptuous form.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <div class="action">fighting to remain conscious</div> <p>You're not real...just a hallucination...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Makima --> <div class="message" id="message6"> <img src="./ressources/icons/SV1.webp" class="avatar"> <div class="text"> <strong>Makima</strong> <div class="action">kneeling before you, her fingers trailing down your heaving chest teasingly</div> <p>Does it matter, when I can give you what you crave? Don't fight it now...just give in to me...</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message7"> <div class="text"> <p>Her touch is electric, sending sparks of pleasure through your body. You know you shouldn't, but you can't resist as she claims your mouth in a searing kiss. Her hands work at your pants, freeing your massive erection. You groan into her mouth as she wraps her fingers around you.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message8"> <img src="./ressources/scenes/SV1B.webp" class="image clickable-media"> </div> <!-- Makima --> <div class="message" id="message9"> <img src="./ressources/icons/SV1.webp" class="avatar"> <div class="text"> <strong>Makima</strong> <div class="action">stroking you firmly, her red eyes boring into yours</div> <p>Forget everything else...focus only on me...</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message10"> <div class="text"> <strong>You</strong> <div class="action">gripping her shoulders for support, your hips bucking involuntarily</div> <p>Makima...you feel so good...but this can't be real...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Makima --> <div class="message" id="message11"> <img src="./ressources/icons/SV1.webp" class="avatar"> <div class="text"> <strong>Makima</strong> <div class="action">increasing her pace, her lips curled in a smirk</div> <p>Just let go...stop thinking and feel...</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message12"> <div class="text"> <p>The tension that has been building within you begs for release. You close your eyes, losing yourself to the rhythmic strokes of her hands. Nothing else matters but this exquisite pleasure she's coaxing from your body.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message13"> <div class="text"> <p>Your eyes fly open as her mouth engulfs you, her tongue swirling skillfully. You cry out hoarsely, your fingers tangling in her hair. She takes you deep, moaning around your thickness. The vibration sends you reeling.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message14"> <img src="./ressources/scenes/SV1C.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message15"> <div class="text"> <strong>You</strong> <p>Fuck...Makima...I can't...I'm going to...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message16"> <div class="text"> <p>She pulls back with an audible pop, a coy smile playing about her lips. With feline grace she straddles you, guiding you to her slick entrance. You hiss as she takes you in agonizingly slowly. Soon you are buried to the hilt within her velvet heat.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message17"> <img src="./ressources/scenes/SV1D.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message18"> <div class="text"> <p>You seize her hips as she begins to ride you. Her head falls back, red eyes sliding shut in ecstasy. You thrust up to meet her, consumed by carnal hunger. She crashes into you again and again until you are both panting and slick with sweat.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message19"> <img src="./ressources/scenes/SV1E.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message20"> <div class="text"> <p>In a sudden move she spins around, keeping you joined. The new angle has you seeing stars. You grip her waist tightly as she slams down, taking you to the hilt. You won't last much longer.</p> </div> </div> <div class="message user-message3" id="message21"> <video loop class="video clickable-media" preload="metadata"> <source src="./ressources/scenes/SV1F.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narator --> <div class="message user-message3" id="message22"> <div class="text"> <p>With a guttural cry you find your release. As you spill yourself inside her, the world around you begins to spin. Makima turns back to face you, her expression unreadable.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message23"> <img src="./ressources/scenes/SV1G.webp" class="image clickable-media"> </div> <!-- Makima --> <div class="message" id="message24"> <img src="./ressources/icons/SV1.webp" class="avatar"> <div class="text"> <strong>Makima</strong> <p>It's time for you to go now...you've served your purpose...</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message25"> <div class="text"> <strong>You</strong> <div class="action">fighting to cling to consciousness</div> <p>No...please...I have to go back...my family...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message26"> <div class="text"> <p>But it's too late. Makima and the room around you fade to black. Though it was only an illusion, a final figment of your fevered mind, the regret is real. You failed - failed to control the virus, failed to save your family from The MAD's cruelty. As death closes its fist around your heart, your last thoughts are of your mother and sisters, now doomed to a horrific fate. And then...nothing.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message27"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('Death Screen')"> Succumb </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SV1' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You feel the deadly grip of the virus taking hold as your strength rapidly fades. Your vision blurs as your pounding heartbeat thunders in your ears. This is the end - the virus has finally overwhelmed you. Suddenly, an alluring figure emerges from the swirling mists.</p> </div> </div> <!-- Miss Fortune --> <div class="message" id="message2"> <img src="./ressources/icons/SV2.webp" class="avatar"> <div class="text"> <strong>Miss Fortune</strong> <div class="action">sashaying toward you, her hips swaying seductively</div> <p>Well well, look what we have here.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="./ressources/scenes/SV2A.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message4"> <div class="text"> <p>You stare, enthralled by the infamous bounty hunter. Fiery red hair tumbles over her shoulders, complementing her revealing outfit. Her piercing green eyes and arrogant smirk hold a dangerous allure.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <div class="inner-thought">gasping</div> <p>You can't be...real...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Miss Fortune --> <div class="message" id="message6"> <img src="./ressources/scenes/SV2.webp" class="avatar"> <div class="text"> <strong>Miss Fortune</strong> <div class="action">kneeling before you, trailing a gloved finger down your heaving chest</div> <p>Does it really matter, sugar? I'm here to give you exactly what you need.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message7"> <div class="text"> <p>Her touch sends arcs of electricity through your fevered body. You know you shouldn't give in, but you're powerless to resist as she claims your mouth in a hungry kiss. Deft fingers work at your pants, freeing your throbbing erection. You groan as she wraps her hand around your hardness.</p> </div> </div> <div class="message user-message3" id="message8"> <video loop class="video clickable-media" preload="metadata"> <source src="./ressources/scenes/SV2B.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Miss Fortune --> <div class="message" id="message9"> <img src="./ressources/scenes/SV2.webp" class="avatar"> <div class="text"> <strong>Miss Fortune</strong> <div class="action">pumping you firmly, her eyes burning into yours</div> <p>Forget everything else and just feel...</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message10"> <div class="text"> <strong>You</strong> <div class="action">gripping her shoulders, hips bucking</div> <p>Ah...Fortune...you feel incredible...but how...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Miss Fortune --> <div class="message" id="message11"> <img src="./ressources/scenes/SV2.webp" class="avatar"> <div class="text"> <strong>Miss Fortune</strong> <div class="action">quickening her strokes, a devious glint in her eyes</div> <p>Don't think...just feel...give me everything you've got...</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message12"> <div class="text"> <p>The tension inside you begs for release. You close your eyes, losing yourself to the rhythmic strokes of her skillful hands. Nothing else matters but the exquisite pleasure she's coaxing from your body.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message13"> <div class="text"> <p>Your eyes fly open as wet heat engulfs you - Fortune's talented mouth bringing you close to the edge with long sucks and swirls of her tongue. Your fingers tangle in her hair as you cry out hoarsely. She takes you deep, her moans sending vibrations through you.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message14"> <img src="./ressources/scenes/SV2C.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message15"> <div class="text"> <strong>You</strong> <div class="inner-thought">Fuck...I can't hold it...I'm going to...</div> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message16"> <div class="text"> <p>With an audible pop she releases you, a coy smirk on her lips. She straddles you gracefully, taking you into her slick depths with a satisfied hiss. You grip her hips tightly as she rides you, head falling back in ecstasy. You meet her downward thrusts, consumed by primal hunger. Your bodies move as one until you are both slick with sweat and gasping for breath.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message17"> <img src="./ressources/scenes/SV2D.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message18"> <div class="text"> <p>In one smooth motion she spins to face away, keeping you buried inside. The new angle has stars exploding behind your eyes. You clutch her waist, pulling her down hard as she slams her hips down. You're close now, the pressure building to a breaking point.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message19"> <img src="./ressources/scenes/SV2E.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message20"> <div class="text"> <p>With a ragged shout you find your release, spilling inside her as the world spins wildly. Miss Fortune turns to face you, her expression unreadable.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message21"> <img src="./ressources/scenes/SV2F.webp" class="image clickable-media"> </div> <!-- Miss Fortune --> <div class="message" id="message22"> <img src="./ressources/scenes/SV2.webp" class="avatar"> <div class="text"> <strong>Miss Fortune</strong> <p>It's time for you to go now, sugar...you played your part well...</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message23"> <div class="text"> <strong>You</strong> <div class="inner-thought">desperate</div> <p>No...I have to go back...my family...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message24"> <div class="text"> <p>But it's too late - she and the room around you fade away. Though an illusion, the regret is real. You failed to control the virus, failed to save your family. As death's cold hand closes around your heart, your last thoughts are of your mother and sisters, their fate now doomed. And then...oblivion.</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message25"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('Death Screen')"> Succumb </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SV2' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<style> body { background-image: url('ressources/backgrounds/SV.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "othersSolo");<</script>> <div class="container"> <!-- Narator --> <div class="message user-message3" id="message1"> <div class="text"> <p>You feel a heaviness in your limbs as the virus courses unchecked through your body. Your vision blurs as your heart pounds deafeningly in your chest. This is it - the virus has finally overwhelmed you. As you sink to your knees, darkness creeping into your periphery, an ethereal figure seems to manifest before you.</p> </div> </div> <!-- Peach --> <div class="message" id="message2"> <img src="./ressources/icons/SV3.webp" class="avatar"> <div class="text"> <strong>Peach</strong> <div class="action">emerging from swirling mist, her blue eyes wide with concern</div> <p>Oh dear, this simply won't do!</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message3"> <img src="./ressources/scenes/SV3A.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message4"> <div class="text"> <p>You stare as Princess Peach hurries toward you, her golden curls bouncing around her delicate face. Her pink gown flows around her graceful form as she kneels beside you, placing a gloved hand upon your fevered brow.</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message5"> <div class="text"> <strong>You</strong> <div class="inner-thought">fighting to remain conscious</div> <p>You can't be here...I must be hallucinating...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Peach --> <div class="message" id="message6"> <img src="./ressources/icons/SV3.webp" class="avatar"> <div class="text"> <strong>Peach</strong> <div class="action">brushing your hair back gently</div> <p>Hush now, save your strength. We must take care of this dreadful virus at once!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message7"> <div class="text"> <p>Her touch is soothing, sending a wave of comfort through your body. You know you shouldn't, but you can't resist leaning into her palm as she caresses your cheek.</p> </div> </div> <!-- Peach --> <div class="message" id="message8"> <img src="./ressources/icons/SV3.webp" class="avatar"> <div class="text"> <strong>Peach</strong> <div class="action">reaching for your pants, her cheeks flushed</div> <p>This is rather forward of me, but desperate times call for desperate measures!</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message9"> <div class="text"> <p>You groan weakly as she frees your massive erection from the confines of your pants. With delicate fingers she begins stroking you, her movements tentative but determined.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message10"> <img src="./ressources/scenes/SV3B.webp" class="image clickable-media"> </div> <!-- Peach --> <div class="message" id="message11"> <img src="./ressources/icons/SV3.webp" class="avatar"> <div class="text"> <strong>Peach</strong> <div class="action">biting her lip as she increases her pace</div> <p>Goodness me, but you are quite virile! I do hope this helps...</p> </div> </div> <!-- Main character --> <div class="message user-message" id="message12"> <div class="text"> <strong>You</strong> <div class="action">gripping her shoulders for support, your hips bucking involuntarily</div> <p>Peach...you shouldn't be doing this...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Peach --> <div class="message" id="message13"> <img src="./ressources/icons/SV3.webp" class="avatar"> <div class="text"> <strong>Peach</strong> <div class="action">looking deep into your eyes</div> <p>If it will save you, I will gladly do what I must! Now just relax, I'm here for you.</p> </div> </div> <!-- Narator --> <div class="message user-message3" id="message14"> <div class="text"> <p>The tension building within you begs for release. You close your eyes, losing yourself to the rhythmic strokes of her silken gloves. Nothing else matters but this tender pleasure she's coaxing from your body.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message15"> <img src="./ressources/scenes/SV3D_1.webp" class="image clickable-media"> </div> <!-- Image --> <div class="message user-message3" id="message16"> <img src="./ressources/scenes/SV3D.webp" class="image clickable-media"> </div> <!-- Main character --> <div class="message user-message" id="message17"> <div class="text"> <strong>You</strong> <p>Oh Peach...I can't...I'm going to...</p> </div> <img character="mc" alt="User Avatar" class="avatar"> </div> <!-- Narator --> <div class="message user-message3" id="message18"> <div class="text"> <p>She pulls back, daintily wiping the corners of her mouth as she smiles up at you. In one graceful movement she lifts her skirts and straddles you, taking you slowly into her velvet heat. You hiss through gritted teeth, overwhelmed by her tightness.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message19"> <img src="./ressources/scenes/SV3E.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message20"> <div class="text"> <p>Soon you are fully sheathed within her. Peach begins to rock her hips, her eyes sliding shut and lips parting in ecstasy. You meet her movements as best you can, consumed by desire for your princess.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message21"> <img src="./ressources/scenes/SV3F.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message22"> <div class="text"> <p>Her pace quickens until you are both slick with sweat, your moans mingling in fevered harmony. With a strangled cry you find your climax, spilling yourself deep inside her.</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message23"> <img src="./ressources/scenes/SV3G.webp" class="image clickable-media"> </div> <!-- Peach --> <div class="message" id="message24"> <img src="./ressources/icons/SV3.webp" class="avatar"> <div class="text"> <strong>Peach</strong> <div class="action">leaning down, cradling your head to her chest</div> <p>Be at peace, my dear hero. You've fulfilled your purpose for now. Return to us...your story is not yet over...</p> </div> </div> <!-- Image --> <div class="message user-message3" id="message25"> <img src="./ressources/scenes/SV3H.webp" class="image clickable-media"> </div> <!-- Narator --> <div class="message user-message3" id="message26"> <div class="text"> <p>Though you know she is just a fever dream, you take comfort in her tender words. As darkness descends, your thoughts turn to your family, hoping they will be there to greet you upon your return...</p> </div> </div> <!-- Exit button --> <div class="message user-message4" id="message27"> <div class="text"> <div class="neon-button-container"> <div class="neon-button2 prevent-default" onclick="SugarCube.Engine.play('Death Screen')"> Succumb </div> </div> </div> </div> </div> <</nobr>>\ <script> var currentPassageId = 'SV3' //STOP AT BUTTON function showNextMessage() { const currentMessageElem = document.getElementById(`message${window.currentMessage}`); /*if (currentMessageElem && currentMessageElem.classList.contains('user-message4') && !isChoiceMade) { return; }*/ const next = document.getElementById(`message${window.currentMessage + 1}`); if (next) { next.style.display = 'flex'; setTimeout(() => { next.classList.add('visible'); //next.scrollIntoView({ behavior: 'smooth' }); window.scrollTo({ top: document.body.scrollHeight, left: 0, behavior: "smooth", }); }, 50); window.currentMessage += 1; //play audio here var voiceId = next.getAttribute('voiceId'); if (voiceId) { playAudio("voice", `${currentPassageId}${voiceId}.mp3`); } } } //BUTTON CHOICE /*var isChoiceMade = false; function Option1() { document.getElementById("message13").style.display = "none"; isChoiceMade = true; showNextMessage(); isChoiceMade = false; }*/ //NEXT BLOC function nextBloc(event) { event.stopPropagation(); console.log("nextBloc function called"); nextPartOfDay(); //▮▮▮ SugarCube.Engine.play("1SA"); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You step into the kitchen, drawn by the enticing aroma of breakfast and the cheerful humming of Cherie as she prepares the meal. The sight of her, lost in her own world and radiating contentment, fills you with a sense of pride. The shelter you've built has given your family moments like these, small pockets of normalcy amidst the chaos.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL1A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>Cherie hasn't noticed your presence yet, focused on the sizzling pan of scrambled eggs before her. She moves with a graceful efficiency, her body swaying slightly to the tune in her head. Your eyes can't help but follow the curve of her hips, the way her thin nightgown clings to her form.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/CAL1B.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>She reaches for a jar of what appears to be a red fruit spread, something you found in the forest recently. As she opens it, the toaster dings, signaling that her bagels are ready. The domestic scene is so beautifully ordinary that it makes your heart ache.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/CAL1C.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>In the stillness of the moment, you find yourself appreciating the little things more than ever. The apocalypse has a way of putting life into perspective. You feel a stirring in your pants, a subtle reminder of the virus coursing through your veins, but it's easily ignored for now.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Startles slightly as she notices you, a warm smile spreading across her face</action> <p>"Oh, $characters.mc.name! I didn't expect you to be up so early. Sorry for my state of undress, I thought I had a bit more time to myself."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL1D.webp" class="DIAS_image clickable-media"> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Waving off her concern</action> <p>"No worries at all, it's not like we have a dress code around here. What's cooking? It smells amazing."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Grinning conspiratorially as she approaches you</action> <p>"I'm testing out some new ingredients for breakfast. I wanted to make sure it's edible before subjecting you and the girls to it."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL1E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>Her enthusiasm is infectious, and you can't help but smile back. She's always been the caretaker, the one who makes sure everyone is fed and looked after.</p> </div> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smirking playfully</action> <p>"Well, don't let me interrupt your culinary experiments. I'll just sit here quietly and let you work your magic." </p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Laughing lightly</action> <p>"How generous of you, kind sir."</p> </div> </div> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>She turns back to her bagels, spreading the red fruit concoction on them with a delicate hand. You watch, transfixed by the simple domesticity of it all.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/CAL1F.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Teasingly</action> <p>"That looks pretty tasty. Mind if I have a bite? You know, just to make sure it's safe for consumption."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>Cherie glances back at you, her eyes sparkling with mischief. For a moment, her gaze drifts lower, and you realize that your body has betrayed your arousal. But she doesn't comment on it, understanding the realities of living with the virus.</p> </div> </div><!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL1G.webp" class="DIAS_image clickable-media"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Wagging a finger at you in mock admonishment</action> <p>"Patience, $characters.mc.name. You'll get your turn with your sisters. This is my little taste test."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>You both share a laugh, the easy banter between you a comforting reminder of your bond. She turns back to her task, and your breath catches in your throat as she licks the knife clean with a slow, deliberate swipe of her tongue.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/CAL1H.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <!-- You --> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>The action seems unconsciously provocative, and you find yourself shifting in your seat. If Cherie notices the effect she's having on you, she doesn't let on.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>Instead, she takes a bite of her bagel, her face transforming into an expression of pure bliss.</p> </div> </div> <!-- Video --> <div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/CAL1I.webm" type="video/mp4"> Your browser does not support the video tag. </video> </div> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Swallowing hard</action> <p>"Wow, that good, huh?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Nodding enthusiastically</action> <p>"It's heavenly. I can't wait for you all to try it later."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>You chalk up her reaction to the scarcity of good food these days. Life in the shed couldn't have offered many culinary delights.</p> </div> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Standing up</action> <p>"I'm looking forward to it. In the meantime, I think I'll head out and see if I can scavenge anything useful before breakfast."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Wiping her hands on a dish towel</action> <p>"Sounds good. Just don't be late, you hear? And $characters.mc.name... is everything okay with the virus? With your explorations?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL1J.webp" class="DIAS_image clickable-media"> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nodding reassuringly</action> <p>"All under control, don't worry. I'll be back in time for your gourmet meal."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>She smiles at that, shooing you out of the kitchen with a playful wave. As you step outside, the cool morning air helps clear your head. The virus is a constant presence, but for now, you have it handled. There's a long day ahead, and you're ready to face it head-on.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id modVariable("add", "girl_stat", "cherie.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You head towards the kitchen and see Cherie cooking. She seems happy and focused on preparing lunch. Not wanting to disturb her concentration, you hesitate to approach.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Stirring a pot on the stove</action> <inner>Hmm, this is coming along nicely. I hope everyone will enjoy it.</inner> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL1R.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>No depraved thoughts are present as the virus lies dormant, its presence barely perceptible. Perhaps you need to build more lust with her before engaging further.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>Deciding it's best not to interrupt Cherie's culinary efforts, you quietly exit the kitchen, leaving her to her task.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p><strong>YOU NEED 1 LUST WITH CHERIE TO DO THIS SCENE</strong></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)">Leave</div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL1R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As the last orange rays of the setting sun pierce through the cottage windows, bathing the room in a soft, fading light, you return home after a long but fruitful day of exploration. Your body is weary, but your mind is at ease from the new discoveries made.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Passing by the bathroom, the gentle patter of running shower water catches your attention. Cherie is likely freshening up after a full day of tending to the family. A warm surge of affection fills you at the thought of this devoted woman who has practically raised you all singlehandedly.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your parched throat craves a cool, refreshing drink, so you decide to fetch a glass of water from the bathroom sink. But as soon as you step into the steamy room, Cherie's slightly panicked voice rises up from behind the opaque shower curtain:</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL2A.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Obvious surprise in her voice</action> <p>"Oh! I...I didn't know you were back!"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Sorry, I just wanted to grab a glass of water."</p> <inner>you reply soothingly, not wanting to alarm her further.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A heavy silence falls, broken only by the calming sound of water cascading over her bare skin. You begin filling your glass, carefully keeping your eyes trained on the pristine tiled floor rather than the modest silhouette moving behind the thin white plastic barrier.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL2B.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Ill at ease</action> <p>"I...I'll be out soon."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You hear her press up against the shower wall, as if trying to conceal herself further from your view. Her unease is palpable, almost endearing in its disarming naivety. You remain respectfully silent, giving her a sense of privacy as you quench your thirst with a few gulps of cool, refreshing water.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Through the opaque curtain, you catch her silhouette moving about, no doubt cleaning herself. Even obscured, you can't help but notice the gentle curves of her body, the swell of her feminine form as she lathers up. A slight warmth stirs within you, but you quickly dismiss any inappropriate thoughts. This is Cherie, the nurturing woman who raised you - to entertain such notions would be a violation of the maternal bond.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL2C.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Growing a bit bolder</action> <p>"You know, you really should learn to knock before entering. A lady needs her privacy."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her mildly scolding tone seems to break the tension. You offer a reassuring smile, though she can't see it.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"You're absolutely right, my apologies. I'll make sure to announce myself properly next time."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie lets out a small exhale, seemingly relieved that the awkward moment has passed without escalation.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Thank you, dear. Now could you give me just a few more minutes to rinse off? I'll be out shortly."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL2D.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Of course, take your time."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With that, you quickly drain the last of your water glass and place it in the sink. Sparing one last glance at Cherie's ethereal silhouette shrouded in steam, you exit the bathroom to allow her the privacy she deserves.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL2E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you retreat to the living room, your thoughts linger on the nurturing mother figure. Despite the fleeting physical awareness her silhouette provoked, you only feel a deep sense of appreciation and filial affection for the woman who sacrificed so much to protect your small family unit through these apocalyptic times. Cherie is the unwavering anchor holding you all together - to sully that bond with lascivious thoughts would be unforgivable.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You settle onto the worn couch, patiently awaiting Cherie's return so you can assist her with the evening chores, resolving to be ever respectful of her boundaries. The maternal pillar in your life, after all she has done for you, deserves nothing less.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL2'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id modVariable("add", "girl_stat", "cherie.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter the steamy bathroom as Cherie showers. She gasps in surprise from behind the curtain. You apologize, just needing water, but can't help noticing her silhouette's gentle curves.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL2RA.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie firmly asks you to wait outside, uncomfortable with your presence right now. You respect her enforcing boundaries and leave, resolving not to violate your maternal bond despite urgings the virus provokes.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 10 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL2R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id modVariable("add", "girl_stat", "cherie.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SC3.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The first few stars are just winking into the dusky evening sky when you make your way down the hallway toward Cherie's bedroom. With dinner clean-up completed, you figure you'd see if your nurturing mother figure needs any other assistance before turning in for the night.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Rapping your knuckles lightly on her door</action> <p>"Cherie? It's me. Do you have a minute?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Her mellow voice responds</action> <p>"Come in, dear."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Pushing open the door and stepping inside</action> <inner>The room is warmly lit by a couple of flickering candles, casting dancing shadows across the walls. Cherie is seated at the small vanity, brushing out her damp golden tresses.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As your eyes adjust to the intimate lighting, you can't help but admire how the soft glows highlight her features - the gentle curve of her jaw, the rise of her cheekbones, the slight parting of her lips as she works the brush through her hair.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL3A.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Catching your eye in the mirror with a warm smile</action> <p>"What can I do for you?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Just checking if you need any other help before calling it a night."</p> <inner>Fighting the urge to let your eyes linger on the enticing view of her neck and shoulders, still glistening with residual moisture from her shower</inner> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>She sets down her brush and stretches her lithe form languidly</action> <p>"That's sweet of you, but I've got everything handled in here. Though I wouldn't mind a little company for a few minutes if you're not too tired?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>Glimpsing how alluringly her thin bathrobe clings to her figure in the candlelight</inner> <p>"Of course not, I'm happy to stay and chat awhile."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Taking a seat on the edge of her bed as she settles into a plush armchair across the room</action> <inner>I need to keep my eyes respectfully averted from the toned thighs she's unintentionally putting on display as her robe rides up...</inner> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL3B.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Long day out there in the wilds?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"You could say that. Spent most of it mapping the northwest trails, seeing what other resources we can forage out that way."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Nodding attentively</action> <p>"Find anything promising?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Describing your discoveries, you relate how you happened upon a patch of berry bushes and a deer trail that could lead to a fresh water source. As you speak, Cherie listens with rapt attention, leaning forward slightly in her chair.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The motion causes her robe to open Further, revealing an ample swell of cleavage that your eyes can't help but be drawn to momentarily. You quickly tear your gaze away, praying she didn't notice your lapse in focus.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL3C.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Beaming with what you desperately want to believe is motherly pride</action> <p>"Well, that's wonderful news! We'll have to organize a proper expedition once those resources are available."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Absolutely. I'll get the others briefed and we can-"</p> <action>Trailing off as her robe parts once more, affording an even more tantalizing glimpse of her décolletage</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL3D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"><p>An energetic silence stretches between you, punctuated only by the faint crackle of the candle flames. You're abruptly hyper-aware of the intimate setting - the two of you, alone in the dimly lit bedroom...</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Forcing your eyes to remain respectfully averted from Cherie's tantalizingly displayed assets, you clear your throat.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"In any case, I should let you get some rest. We'll talk more about the expedition plans tomorrow."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Her voice carrying a hint of...disappointment?</action> <p>"Of course, dear. Thank you for keeping me updated. You're becoming quite the provider for us."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Rising from the bed</action> <p>"Just doing my part, like you've done for us all these years."</p> <action>Offering her a warm smile</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL3E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie returns the smile, though you could swear her gaze lingers a little longer on you than is appropriate. But perhaps it's just a trick of the candlelight...</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Good night, Cherie. Sleep well."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Good night, $characters.mc.name. Sleep tight."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you slip out of her bedroom, pulling the door closed behind you, you can't deny the slight fluttering in your chest. While maintaining a respectful boundary is crucial, some deeply buried part of you craves for that boundary to be shattered.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>Get a grip, pervert. This is Cherie. She raised you. Fantasies like that are forbidden...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>And yet, as you return to your room to prepare for bed, the vision of Cherie's curves straining against the thin material of her robe is pleasantly burned into your mind's eye. You force yourself to push those kinds of thoughts aside, at least for now. The maternal figure you admire so deeply deserves respect above all else.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But you can't shake the feeling that, perhaps someday...those taboo visions may become reality.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL3'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SC"); //next passage id modVariable("add", "girl_stat", "cherie.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SC3.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter Cherie's room as she brushes damp hair in a clinging robe. You can't help admiring her curves. She blushes, calling you out for ogling.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>When you boldly call her alluring, tension builds.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAL3RA.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You respect her boundaries, refocusing on the supply run.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 20 LUST TO DO THIS SCENE</b></p> </div> </div><!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL3R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SC"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1R2.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The next morning greets you with hazy rays of warm sunlight filtering through the trees. You've woken up early to take advantage of the cool morning hours and survey the deer trail you discovered yesterday. Hopefully it leads to that fresh water source you theorized about.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL4A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>After a light breakfast, you retrieve a canteen and a few supplies then head off into the lush forest surroundings. As you hike along the winding deer path, you can't help but feel pleasantly at peace amid the verdant foliage and earthy aromas. A rare moment of serenity in this unrelenting new reality.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>After about twenty minutes, you pick up the unmistakable burbling sound of flowing water in the near distance. Grateful for the survival skills you've honed, you alter your course through the undergrowth toward the promising noise.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Pushing aside a curtain of dangling vines to reveal a sun-dappled riverbank</action> <inner>Jackpot! This'll be a total game-changer if the water is clean...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The river runs swift and clear over a rocky bed. You set down your pack and canteen, then crouch to scoop up a handful of the liquid for inspection. Holding it up to the sunlight filtering through the canopy, you're relieved to see no discoloration or debris - just pure, fresh river water!</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Her familiar voice calling out from behind you</action> <p>"There you are! I was wondering where you'd wandered off to."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL4B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Glancing over your shoulder as she approaches</action> <p>"Good morning, $characters.cherie.name. Looks like those deer knew what they were doing after all."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Even with the ever-present undercurrent of the virus coursing through your veins, amplifying every little stimuli, you feel a profound sense of comfort at the sight of the nurturing maternal figure approaching. Like an anchor in the madness.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name emerges from the treeline, somehow managing to appear perfectly groomed despite your rugged circumstances. An inviting warmth spreads through your core as you drink in the subtle curves of her form, tantalizingly outlined by her casual clothing.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <inner>Get a grip, pervert. The virus is just messing with your head again...</inner> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Her eyes going wide as she takes in the river</action> <p>"Is that...? You found a freshwater source?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL4C.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Nodding with a satisfied grin</action> <p>"Sure did. And it looks nice and clean too."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Without hesitation, $characters.cherie.name crouches beside you and leans down to scoop up a handful of the river water. She brings it to her lips, letting a small sip trickle delicately down her throat as she samples it.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The virus instantly kicks your senses into overdrive at the sight of her tongue darting out to catch a stray droplet. You can't tear your eyes away from the delicate motions of her lips and slender neck as she swallows. An undeniable primal hunger flares to life in your loins.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>A look of relief and joy spreading across her beautiful features</action> <p>"Oh, thank heavens! Do you realize how incredible this is?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL4D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She turns that radiant smile on you, and you're powerless against the accompanying swell of affection in your chest. A confusing miasma of filial adoration and burning lust battles within you as the virus amplifies both impulses.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"My wonderful $characters.mc.name ... you've really become such a capable provider for us."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Sheepishly waving off the praise as a bead of sweat trickles down your temple</action> <p>"It was just blind luck, honestly. I simply tracked those deer prints and they led right to-"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Before you can finish, $characters.cherie.name lurches forward and throws her arms around you in an impulsively tight embrace. You tense instinctively for just a heartbeat before melting into the affectionate display, bringing your own arms up to reciprocate the hug.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The virus screams through your bloodstream as $characters.cherie.name's body presses flush against yours, her ample curves molding to your form in the most tantalizing ways. You fight with every fiber of restraint to suppress the electric jolt of arousal, but it's like struggling against the relentless current of the river itself.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name seems utterly oblivious to the war raging within you. She simply relishes this moment of joyful bonding with the one who's become her staunch supporter through these turbulent times.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Softly in your ear</action> <p>"You've been so strong for all of us. I don't know what we would have done without you..."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL4E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her fingers tracing featherlight patterns across your back only stoke the flame. You're hyper-aware of her firm, supple breasts flattening against your chest, separated by mere thin layers of clothing. The virus takes that tortuous intimacy and amplifies it a thousandfold, leaving you utterly entranced by $characters.cherie.name's intoxicating feminine scent and form.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can feel a growing tightness in your lower regions as your body's primal desires rage against the dam of your willpower. Forcing every ounce of focus, you manage to slap a leaden lock upon those lusts before they can completely overwhelm you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>At long last, $characters.cherie.name leans back from the embrace, her eyes sparkling with unshed happy tears. She cradles your face in her soft hands, planting a lingering kiss upon your forehead that sears your flesh like a branding iron.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can feel a growing tightness in your lower regions as your body's primal desires rage against the dam of your willpower. Forcing every ounce of focus, you manage to slap a leaden lock upon those lusts before they can completely overwhelm you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>At long last, $characters.cherie.name leans back from the embrace, her eyes sparkling with unshed happy tears. She cradles your face in her soft hands, planting a lingering kiss upon your forehead that sears your flesh like a branding iron.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Breathless, reeling from the onslaught of manufactured lust</action> <p>I, uhh...we should look into getting some containers set up to collect this water regularly.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>An excellent idea. I'll gather what we have back at the shelter and join you out here in a little while, okay?</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL4F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She flashes you one last beaming smile, then turns and carefully picks her way back along the riverbank toward home. You watch her hips swaying with each step, imprinting the image into your virus-addled mind before forcing yourself to look away.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Now alone with the burbling river, you let out a long, shuddering exhale as the tension gradually bleeds from your body. The virus's influence is strong, but your sheer force of will remains unbroken...for now, at least.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Sinking to the ground in a meditative pose, you pour every ounce of mental energy into containing the dark, primal undercurrent of lust coiled within your core. You are the master of your own desires, not a slave to the virus's depraved whims.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When $characters.cherie.name returns with the water containers, you will greet her with a warm smile as pure and innocent as freshly fallen snow. She is your family - your rock and nurturing light through the madness.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Nothing, not even this damned virus, will rob you of that bond. You are stronger than its bestial temptations...aren't you?</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL4'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1R"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1R2.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find a clean river while exploring. $characters.cherie.name joins you, overjoyed at the fresh water source. She impulsively hugs you tightly, her curves pressing against you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The virus amplifies primal lust as her body molds to yours. You fight to control the raging arousal her feminine form and scent inflame within you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When $characters.cherie.name finally breaks the embrace, she's oblivious to your internal battle. She heads back for containers, leaving you to meditate and subjugate the virus's depraved urgings.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL4R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For now, your willpower overcomes the bestial temptations her nurturing bond provokes. But how long can you keep mastering the virulent desires?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 30 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL4R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1R"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The crackling fire casts a warm, flickering glow throughout the cozy living room as evening falls outside. You're settled on the well-worn sofa, whittling away at a small piece of wood to pass the time before bed. The simple, repetitive motions help clear your mind after another long day's work ensuring your family's survival.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name enters from the hallway, holding a thick book under one arm. She offers you a tender smile as she crosses the room to join you.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"There you are. I was hoping I could steal a few minutes of your time?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL5A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You set aside the whittling knife and wood shavings, giving her your full attention.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Of course. What's on your mind?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Rather than taking a separate seat, $characters.cherie.name lowers herself onto the couch right beside you. She's near enough that you can smell the fresh, clean fragrance of her recently washed hair and detect the subtlest hints of her feminine musk.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"I was thinking we could do a little reading together before bed. It's been too long since I've had the chance to enjoy one of my favorite novels."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL5B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She holds up the book, allowing you to glimpse the ornately embossed cover and title: "Wuthering Heights" by Emily Brontë. A smile touches your lips at her choice of reading material - so befitting of her gentle, romantic soul beneath that resilient outer shell she's been forced to forge.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I'd like that. Sounds like the perfect way to wind down for the night."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A look of unguarded joy brightens $characters.cherie.name's features at your ready agreement. She scoots a little closer until her thighs are brushing against yours, her body's intoxicating warmth radiating through the thin material of her skirt and your pants.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Try as you might, you can't entirely ignore the virus's incessant whispering at the back of your mind. Urges and impulses that any good son should never even consider inflicting upon the devoted mother figure at your side. You swallow hard and fix your gaze determinedly on the book's cover.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Opening to the first page and settling the book across both your laps</action> <p>"Comfortable?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL5C.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Nodding, careful to keep a respectable distance</action> <p>"Ready when you are."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For the next couple hours, $characters.cherie.name reads aloud in her rich, melodious voice. The ebbs and flows of her tone easily draw you into the story as it unfolds, painting vivid imagery in your mind's eye with every poetic line.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Occasionally, $characters.cherie.name pauses to angle the book slightly toward you, granting you a clear view of the printed words so you can follow along at your own pace. Her shoulder brushes enticingly against yours with each adjustment of position, sending whispers of the virus's insidious influence washing through your body.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Despite your best efforts, you start to imagine $characters.cherie.name reciting other literary works - ones of a far more sensual variety befitting her sultry voice and shapely lips. Erotic poetry or excerpts from the Kama Sutra, perhaps...</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You give an imperceptible shake of your head, angry at yourself for allowing such perverse thoughts about the nurturing mother beside you. $characters.cherie.name seems utterly oblivious to your intrusive imaginings, absorbed as she is in the story and the simple pleasure of sharing it with you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the narrative progresses, you find your attention drifting from the plot to focus instead on the gentle rhythms of $characters.cherie.name's breathing, the contours of her facial features in the golden firelight, and the tantalizing hints of cleavage peeking from the neckline of her blouse with every subtle movement.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The virus is merciless, whipping your senses into a frenzy with each fleeting impression of the intoxicating maternal figure at your side. You fight to maintain your composure, but your body's growing arousal is becoming impossible to ignore completely.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Closing the book abruptly as she finishes a chapter</action> <p>"That's probably enough for tonight, don't you think?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL5D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You blink quickly, snapping out of your inappropriately heated reverie with a start.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clearing your throat</action> <p>"Y-Yes, you're right. We should get some rest."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name places the book on the coffee table and stretches her arms high above her head, causing her blouse to ride up tantalizingly and expose a teasing glimpse of her midriff. You quickly tear your gaze away, silently cursing the virus for rendering you so weak against such innocent gestures.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Settling back and favoring you with a warm smile</action> <p>"Thank you for indulging me. It was wonderful to have the company while enjoying one of my favorite stories again."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL5E.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Nodding, grateful for the excuse to put some space between you</action> <p>"It was my pleasure. I should let you get to bed though."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you rise from the couch, $characters.cherie.name reaches out and gives your hand an affectionate squeeze, her thumb caressing your knuckles in a maddeningly intimate way. You freeze, fresh heat blossoming across your face and chest as the virus gleefully seizes upon the simple contact.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"Pleasant dreams, dear."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL5F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her voice seems to carry a husky undercurrent you've never detected before. Or perhaps it's simply your senses being sent into overdrive by her intoxicating presence and touch...</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You manage a strained half-smile and quickly extricate your hand before beating a hasty retreat toward the hallway. Every step is a battle to keep your gait steady and natural, willing away the rampant arousal pulsing through your groin.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Entering your bedroom at last, you lean back heavily against the door and exhale a shuddering breath. Your eyes drift downward, confirming the unmistakable tent currently straining against the front of your pants. Shame and self-loathing mingle bitterly with the tantalizing physical stiffness, each warring emotion threatening to overwhelm your fragile composure.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Ripping off your clothes in a feverish frenzy, you fall onto the bed and grasp your needy length with a trembling hand. Squeezing your eyes shut, $characters.cherie.name's beautiful, devoted features bloom in the forefront of your mind, rapidly replaced by scorching visions of her lithe body writhing atop you, riding your pulsing shaft with wild abandon...</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stifle a guttural moan, furiously working yourself over the edge as the carnal fantasies reach their fever pitch. White-hot release finally washes over you in crashing waves of equal parts pleasure and disgust. Your ragged breaths slowly even out while the euphoric haze gradually lifts, leaving you hollow and unclean in the aftermath of your perverted indulgence.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL5'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You and $characters.cherie.name read a novel together by the fire. Despite your closeness on the couch, she seems unaware of the temptations her proximity provokes - the virus amplifying every hint of her intoxicating femininity.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As $characters.cherie.name reads aloud in her sultry voice, you fight vivid fantasies of her reciting erotic literature instead. Her innocent gestures and movements torment you with overwhelming arousal you struggle to conceal.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL5R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When she affectionately squeezes your hand after, it inflames your lust past the breaking point. You quickly retreat before giving in to depravity.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Alone in your room, shame wars with your aching need as you desperately masturbate to visions of ravishing the nurturing maternal figure who remains oblivious to the unholy temptations she inspires within you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 40 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL5R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SC3.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The evening shadows have grown long outside $characters.cherie.name's bedroom window as you let yourself in, carrying a loaded tray of food and water. Your concerned mother figure hasn't emerged from her room all day, complaining of fever-like virus symptoms when you checked on her earlier.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL6A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nudge the door open with your foot and step inside. $characters.cherie.name is bundled beneath the covers on her bed, curled up on her side facing away from the entrance. Even from across the room, you can detect slight shivers coursing through her body every few seconds.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>$characters.cherie.name? I brought you something to eat and drink. Thought it might help give you some strength to fight off this bug.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A hushed moan slips from the prone figure, muffled slightly by the bedding. After a moment, $characters.cherie.name slowly rolls over to face you. The dim candlelight reveals her features in an unflattering state - cheeks flushed, brow sweaty, and eyes heavy-lidded.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Weakly</action> <p>You're...a good boy for looking after me.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL6B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her voice emerges as a parched rasp. You quickly cross and set the tray on the nightstand before sitting beside $characters.cherie.name's trembling form. Up close, you can see the virus taking its toll - her chest rising rapidly with labored breaths, her nightgown clinging to her curves.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Picking up the water</action> <p>Here, this should help. Just small sips.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With what little strength she can muster, $characters.cherie.name props herself up enough to allow you to bring the glass to her lips. She takes a few tentative sips, eyes fluttering closed momentarily as the cool liquid brings temporary relief to her raging thirst.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As Cherie drinks, you can't help but notice the way her gown's neckline has fallen, affording an unintentional glimpse down the swell of her cleavage with each trembling breath. A faint blush warms your cheeks as the virus whispers insidiously, redirecting your attention.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Sighing as she finishes the water</action> <p>Thank you, sweetheart. You've always been...such a caring provider...</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL6C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her words emerge slow and heavy, as if each syllable is an effort. Sliding back down, $characters.cherie.name's eyelids droop again, though her gaze remains locked intensely on you despite her weakened state.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For just a moment, you could almost swear you detect a slight hunger underlying $characters.cherie.name's stare - her eyes roaming across your body in an appraising way very unlike her usual nurturing self. You squirm slightly, feeling inexplicably overheated under her scrutiny.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>This...wretched virus... </p> <action>Shifting beneath the sheets restlessly</action> <p> It...stokes such indecent thoughts...</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL6D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>One of her hands slips free, idly toying with the neckline of her gown and causing it to gape open further. You quickly tear your eyes away, face burning as you glimpse the gentle swell of her breasts and the virus shrieks its incessant demands through your mind.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Her voice barely above a raspy whisper</action> <p>Can you...feel it too, dear?</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL6E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You clench your jaw tightly, fighting against the rising tide of forbidden arousal threatening to overwhelm your senses. This is $characters.cherie.name - the devoted woman who raised you. To entertain such depravities about her would be a violation of the most sacred trust.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Swallowing hard</action> <p>$characters.cherie.name...I should leave you to rest.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Nodding weakly, $characters.cherie.name makes no protest as you quickly rise from the bed. Her heavy-lidded stare follows your movements, equal parts innocent adoration and naked, viral-fueled desire swirling in their depths.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL6F.webp" class="DIAS_image clickable-media"> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL6'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1SC"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SC3.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Bringing $characters.cherie.name food and water as she battles a feverish virus bout, you find her trembling and delirious in bed. Her nightgown clings provocatively as you tend to her parched needs.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Despite her weakened state, you can't ignore the virus amplifying your awareness of $characters.cherie.name's feminine curves glimpsed through the gaping neckline. Delirious, she toys with the fabric, stoking your forbidden arousal.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <inner>I need to get out of here before I do something I'll regret. The virus is messing with my head, making me think things about Mom I shouldn't...</inner> <action>You tear yourself away before succumbing to depravity, leaving $characters.cherie.name to wrestle the virus's temptations alone.</action> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <action>Her needy stare burns with an unsettling mixture of adoration and naked desire as you flee.</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAL6R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 50 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAL6R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SC"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SC3.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You step into Cherie's room, finding her sitting on the edge of her bed, lost in thought. She looks up as you enter, a warm smile spreading across her face at the sight of you.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT1A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Hey there, how's it going?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Patting the space beside her</action> <p>"I'm doing really well, $characters.mc.name, especially since you've been back and built this amazing shelter. Come, sit with me for a bit."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You settle down next to her, the mattress dipping slightly under your weight. The closeness feels comfortable, familiar.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I'm glad to hear that. It's been a wild ride, hasn't it? How are you holding up?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Placing a hand on your knee</action> <p>"Honestly, I couldn't be prouder of the man you've become. The way you've stepped up, taken care of us... it means the world to me."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT1B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her words fill you with a sense of warmth and purpose. You've always wanted to be the kind of person she could rely on.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"It's my pleasure, really. And I'm not done yet - I've got big plans for this place."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You share a bit about your adventures in the Peacewood and the Wastelands, watching her eyes widen with a mix of awe and concern. She listens intently, her hand never leaving your knee.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Promise me you'll be careful out there honey. I don't know what I'd do if anything happened to you."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT1C.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Flexing your bicep playfully</action> <p>"Don't worry, I've got this. The virus has definitely given me a bit of an upgrade in the strength department."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Laughing softly</action> <p>"I can see that! And it's not just you - I feel like I've shed a decade or two myself."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She stands up and does a little twirl, showing off her figure. You can't help but appreciate the way her curves fill out her clothes, the glow of her skin.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT1D.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Grinning</action> <p>"You look amazing, Cherie. A vision, truly."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A faint blush colors her cheeks at the compliment, but she waves it off with a smile. The conversation turns to more practical matters - food, resources, the strange feminine creatures you've encountered in the forest.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Frowning slightly</action> <p>"Just... be cautious, okay? We don't know what those things are capable of."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT1E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You sense her unease, the maternal instinct to protect you warring with her trust in your abilities. There's a beat of silence, a question unasked hanging in the air between you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Standing up</action> <p>"I will, I promise. And speaking of the Wastelands, I should probably head out for a bit, see what I can scavenge."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Rising to meet you</action> <p>"Of course. Thank you again, for everything you're doing for us. And $characters.mc.name... if you ever need to talk, or just want some advice, I'm always here for you."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT1F.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her gaze holds yours, intense and filled with an emotion you can't quite place. You swallow hard, suddenly very aware of her proximity.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I... I appreciate that, Cherie. I'll keep it in mind."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a final nod, you turn and leave the room, your heart beating a little faster than when you entered. The dynamic between you is shifting, evolving, and you're not entirely sure what to make of it. But one thing is certain - Cherie will always be an important part of your life, no matter what the future holds.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SC"); //next passage id modVariable("add", "girl_stat", "cherie.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SC3.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You approach Cherie's room, feeling the need to connect with her on a deeper level. As you reach for the door handle, you hesitate, unsure if your current level of trust is sufficient for the conversation you have in mind.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Humming softly to herself</action> <inner>I wonder what $characters.mc.name is up to today. It's sure nice having him around.</inner> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT1R.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Sensing that your bond with Cherie is still developing and requires more nurturing, you decide against entering her room. The trust between you, while growing, is not yet strong enough to warrant the intimate discussion you had hoped for.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><strong>YOU NEED 1 TRUST WITH CHERIE TO DO THIS SCENE</strong></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT1R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SC"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SR.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The fireplace casts a warm, flickering glow throughout the cozy living room as the evening settles in. You're lounging on the well-worn couch, idly running a whittling knife over a small piece of wood to pass the time before bed. The repetitive motions help soothe your mind after another full day's work fortifying your family's shelter.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The sound of approaching footsteps draws your attention just before Cherie appears in the doorway, a thick novel cradled in her arms. She offers you a tender smile as she crosses the room to join you.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"There you are. I was hoping I could steal a little of your time?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT2A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You set aside the whittling tools, giving her your full attention with a nod.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Rather than taking a separate seat, Cherie lowers herself onto the couch right beside you. With her this close, you can't help noticing the faint floral notes of her recently washed hair and the comforting hints of her natural scent - both hauntingly familiar olfactory traces from your childhood.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"It's been so long since I've had the chance to just...relax and enjoy one of my favorite novels."</p> <action>She holds up the book, allowing you to glimpse the ornately embossed cover and title: "Pride and Prejudice" by Jane Austen.</action> <p>"I thought perhaps you'd indulge me with a bit of reading this evening?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A fond smile tugs at your lips. Even after everything you've both endured, her warmth and gentle spirit remain undimmed by the harsh realities of the unforgiving new world you've been thrust into. She is your rock - your nurturing light through the darkness.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT2B.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I can't think of anything I'd enjoy more. Reading together sounds like the perfect way to unwind tonight."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie's face brightens with unguarded delight at your acceptance. Scooting a bit closer, she opens the book and settles it across both your laps, the faded pages emanating that uniquely calming scent of aged paper and binding.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For the next couple hours, Cherie reads aloud in her rich, melodious tone. The cadences of her voice rise and fall with a hypnotic quality, utterly immersing you in the story's delicately woven narrative. You find yourself leaning ever so slightly toward her without conscious thought, drawn in by the uniquely intimate magic of allowing Cherie's words to paint vivid imagery across the canvas of your mind's eye.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Occasionally, she'll angle the book slightly so you can follow along with the printed text at your own pace. Each subtle shift of position causes her upper arm and shoulder to brush softly against yours - lingering points of contact that feel achingly natural and right. As if the divide between you is an arbitrary border, and the simple act of reading represents your two souls blending in perfect synchronicity once again.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT2C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Despite the story's captivating nature, you find your attention drifting at times to study the gentle contours of Cherie's profile gilded by the dancing firelight. The delicate curve of her jaw...the slight upturn at the corners of her lips...the intricate fan of her lashes caressing her cheek with each blink. She is the living embodiment of classical beauty - loving discipline wearing the facade of fragile elegance.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>At one point, Cherie pauses her reading to stifle a sudden yawn, bringing one hand up to cover her mouth in a demure display of etiquette. You can't help but notice the way the simple motion causes her sweater to stretch taut across her breasts, affording an unintentionally tantalizing hint of her cleavage. Just as quickly as the fleeting glimpse registers, you avert your eyes bashfully.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie seems to notice nothing amiss, her sole focus purely on immersing the both of you in the magic of the tale. As the narrative progresses, you find yourself leaning toward her further still, drawn like a moth to the flame of her calm, nurturing presence.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>By the time Cherie closes the book upon completing a chapter, your body is angled toward her with your arm and thigh aligned nearly flush to hers. She draws in a deep, contented breath and turns to face you with a warm smile that causes your heart to swell.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT2D.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"I'd forgotten just how lovely lazy evenings like this could be. Thank you for indulging me, $characters.mc.name."</p> </div> </div><!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie laughs - a bright, sonorous peal of mirth that dances across your heart like errant raindrops on a still forest pool. Impulsively, she reaches out and musses your hair in a playfully affectionate gesture.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"If that's your way of telling me you'd prefer magazines over Dickens, I'll have to politely decline, young man."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't help but join in with your own rich chuckle at her gentle teasing, relishing this easy return to the warm dynamic you shared before the world fell apart. For this one, fleeting moment, the harsh realities feel light years away. There is only the two of you, sharing an abiding bond as constant and eternal as the turning of the Earth itself.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT2E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>In a whirlwind of too-fast blurred motion, Cherie suddenly shifts position and throws her arms around you in an enveloping embrace. You tense for only a split-second before melting into her affectionate display, bringing your own arms up to reciprocate the hug fully.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie buries her face against the crook of your neck, her lips a hair's breadth away from your skin as she murmurs in a slightly muffled tone thick with profound sincerity:</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Thank you...for everything you do for me. For us. You've become the very pillar holding our shattered lives upright, and you'll never know the depths of my love and appreciation for you, $characters.mc.name."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Warmth blooms across your face and the back of your neck at the intensity of her words and tone. You give Cherie's lithe form a tender squeeze, drawing her petite body even more fully against yours. With her soft curves pressed flush to your torso, you can't help noticing each gentle swell and plane in a way that stirs an instinctual protectiveness within you rivaled only by the filial adoration swelling in your heart.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Still, you resist any temptation to linger immodestly on her physical form. Cherie has always been a transcendent soul first and foremost - any carnal distractions would profane the sacredness of this moment.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"You've given me everything, Cherie. Purpose, strength, resilience...my entire world. I'm honored to be the one keeping your light blazing through these dark times."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You lean back just enough to meet her warm hazel eyes with a look of profound gratitude and veneration that somehow fails to fully encapsulate the depths of your feelings. Words pale in capturing the bond you share - it is elemental, running deeper than flesh and bone.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT2F.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie smiles at you in a way that crinkles the corners of her eyes, then leans in to plant a feather-light kiss on your cheek that sends tingles radiating across your skin. As chaste and pure as the gesture was, you can't deny the symbolic significance of her soft lips brushing your face for the first time in your memory.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A single delicate moment caught between two flitting heartbeats when the entire universe shudders, then settles onto a new axis point with the two of you as its rightful sovereigns.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Reluctantly, Cherie disengages from the embrace. You feel the absence of her warmth like a visceral ache as she rises and smooths down her clothes with one hand. There is a touch of melancholy in her expression, but also a quiet air of contentment and peace.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Well then...I believe I'll turn in for the night. You should get some rest too, my dear. I have a feeling tomorrow will be a full day."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She shoots you one final, meaningful look before turning to make her way toward the hallway and her bedroom. As much as you ache to call out and ask her to stay, to extend this perfect crystalline moment wrapping you in its sheltering glow, you resist. There will be other evenings ahead to nurture this bond.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For now, it is enough to simply bask in the memory of Cherie's arms enveloping you, her whispered adorations, and that single tremulous loss of breath-stealing innocence when her lips caressed your cheek.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You remain seated in front of the dying fireplace embers for several long, meditative minutes. At some point, your fingers rise to idly trace the lingering tingling warmth on your cheek as a tender smile plays across your lips.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT2'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SR"); //next passage id modVariable("add", "girl_stat", "cherie.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SR.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The fireplace casts its warm glow throughout the living room as evening sets in. You're lounging on the couch, idly whittling a piece of wood, when the sound of approaching footsteps draws your attention. Cherie appears in the doorway, a book cradled in her arms.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"There you are. I was hoping I could steal a little of your time for some reading?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You set aside the whittling tools, giving her your full attention. The thought of spending a cozy evening reading with Cherie is undoubtedly appealing. However, you can't shake the feeling that your bond with her isn't quite ready for such an intimate moment.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT2RA.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"That sounds lovely, Cherie, but perhaps we could find another activity for tonight?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie's expression falters ever so slightly, but she quickly recovers with a warm smile.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Of course, dear. Whatever you're comfortable with."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As she turns to leave, you can't help but feel a twinge of regret. While you cherish Cherie's company, pushing the boundaries too quickly might jeopardize the delicate trust you've built. For now, it's best to let your relationship develop at a natural pace.</p> </div> </div> <!-- Info --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 10 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT2R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SR"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1B.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The clamor of clattering tools and shuffling supply crates echoes through the storage room as you work on taking inventory. With winter's approach, it's crucial to ensure you've stockpiled enough provisions to see your family through the harsh, unforgiving months ahead.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You're so engrossed in mentally tallying the food stocks that you don't immediately register the sound of approaching footsteps. It isn't until a familiar voice cuts through the clamor that you spin around in surprise.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"There you are! I've been looking all over for my favorite provider."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT3A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She stands in the doorway, one hand resting on the frame as she flashes you a warm, teasing smile. Despite the occasional streaks of dust and grime forever lingering on her features these days, Cherie remains as elegant and composed as ever - a timeless portrait of classical grace permanently affixed within the dilapidated frame of this rugged new reality.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't help but grin back at her playful jest, setting down the crate you'd been carrying to give Cherie your full attention.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Well, it's a good thing you found me then. I was just about to start eating all these rations myself!"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie laughs - a bright, melodious peal that dances across the cluttered storage space, banishing the shadows and gloom in an instant. She saunters further into the room, navigating the organized disarray with an effortless poise. Despite the layer of dust and grime clinging to every surface, Cherie moves as if she were gliding through a grand ballroom in Renaissance-era finery.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT3B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As she approaches, you can't help noticing how her worn t-shirt and fitted pants seem to flatter every curve and swell of her toned, lithe figure. Your gaze lingers perhaps a moment too long on the tantalizing contours before you quickly avert your eyes. Though the sight stirs an instinctive reaction within you, Cherie deserves to be regarded with utmost respect and dignity.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I was actually just finishing up a full inventory. Thought you might want the latest count on our supplies?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Always one step ahead of me, aren't you?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT3C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's a touch of warm admiration underlying her gentle teasing as she comes to a stop beside you. Close enough that you can detect the faint mingling of her natural scent with the earthier fragrances of the storage room's motley materials.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Well, out with it then! How are we looking for the winter months?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You run through the mental tally you've been compiling, feeling a surge of pride as you relay the sizeable stockpiles of non-perishable foods, medical supplies, blankets and cold-weather gear. It's been an immense effort gathering such reserves, but providing for Cherie's continued well-being makes every aching muscle and bead of sweat worthwhile.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you speak, Cherie attentively studies the organized piles and containers surrounding you, nodding along in satisfaction. The approving look in her warm hazel eyes fills you with a profound sense of purpose - a silent reaffirmation that you are living up to the responsibility she has invested in you.</p> </div> </div><!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When you finish recounting the inventory tallies, Cherie turns that fond smile on you once more. In a single fluid motion, she reaches out to grasp your arm just above the elbow, giving it a tender squeeze.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"I knew I could count on you, $characters.mc.name. You've become such a capable provider for us both in these trying times. I don't know what I would've done without you..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her voice takes on an uncharacteristic waver, thick with barely restrained emotion. For just a moment, her composure slips, and you glimpse the depths of vulnerability lingering behind Cherie's perpetual facade of resilience and strength. It's subtle, but undeniable - she needs you in a way that transcends basic necessity.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Upon you falls the sacred duty of being her grounding pillar against the myriad uncertainties and dangers of this unforgiving new reality. A protector and partner from whom she can draw the courage, determination, and hope required to carry her through each coming storm.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Placing your hand atop hers where it grasps your arm</action> <p>"Hey...you've had my back since the day everything fell apart. Whatever comes next, we'll face it head-on, together. I promise you that."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT3E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie's lower lip trembles almost imperceptibly as she holds your steady gaze. Beneath the dirt and weariness etched into the contours of her face, you glimpse the flicker of profound emotional fragility she so rarely allows to surface. Then, just as quickly as it manifested, the tender vulnerability shutters away once more behind the iron-forged determination in her eyes.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a sharp indrawn breath, Cherie surprises you by bodily closing the remaining distance between you. Her slender arms encircle your waist as she pulls herself flush against you, tucking her head under your chin in a full-bodied embrace that steals your breath. For a few heartbeats, you're too stunned to react, every fiber of your being acutely aware of the soft, supple curves now pressed to you amid the dust and disarray of your surroundings.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT3F.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Any stirrings of arousal are subjugated by the deeper instincts thrumming through your core - the primal imperative to return this nurturing woman's embrace with equal intensity. To provide the shelter and security she so desperately needs to let her guard down, even if only for a fleeting moment. To be her strength when Cherie's own unshakable resilience shows the first faint fissures of buckling beneath the immense pressure she has shouldered through it all on your behalf.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You wrap your arms around her compact form without hesitation, tucking her beneath your chin in a protective, comforting manner. The elegant fragility of Cherie pressed against your sturdy frame in this dingy storage room is the world's most poignant juxtaposition - innocence and intimacy amid the grit of your daily survival struggle.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>In the wake of the embrace's initial shock, you can't help noticing just how perfectly Cherie seems to meld against you. As if her curvaceous form was naturally sculpted to interlock with the tapered lines and chiseled planes of your body. For an eternity caught between two stilled breaths, there is no distinction where she ends and where you begin - only two souls united in their symbiotic communion.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT3G.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie releases a single, quivering exhalation against the hollow of your throat. A silent, full-bodied affirmation of trust and relief that borders on reverence. You respond by cradling her slender form even tighter, allowing your body to murmur its own unspoken vow of unbreakable fidelity in reply.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT3'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1B"); //next passage id modVariable("add", "girl_stat", "cherie.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1B.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The clamor of the storage room is interrupted as Cherie enters, a warm smile on her face.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"There you are, my favorite provider."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's an intimacy in her tone that gives you pause. As much as you'd like to indulge the moment, something holds you back from deepening the connection right now.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Hey Cherie, I'm just finishing up inventory."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She seems to pick up on your hesitance. Her smile flickers briefly before she recovers.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/CAT3RA.webp"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Of course, I don't mean to interrupt. We can chat later."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's a guardedness in her eyes now, shuttering the earlier vulnerability. You sense she's put up an emotional barrier in response to your reserve.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"I'll leave you to your work. Dinner later?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod, watching her turn to leave, the moment's potential intimacy left unexamined for now. You both seem to instinctively realize pushing the boundaries further right now risks undermining the profound trust you've built.</p> </div> </div><!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 20 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT3R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1B"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SB2.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>It's well past midnight, but a warm glow still emanates from the bathroom as you step inside, stifling a yawn. After getting caught up doing some repair work, you'd almost forgotten your nightly routine of winding down before bed.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The room is filled with a faint, humid haze of steam from $characters.cherie.name's recent shower. She stands before the sink in a fresh set of pajamas, meticulously brushing her damp hair as you enter. Catching your reflection in the foggy mirror, she pauses and offers you a warm smile over one shoulder.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"There you are. I was beginning to think you'd fallen asleep on your tools again."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT4A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You snort softly at her gentle teasing as you cross to stand beside her at the dual sinks. Reaching for your toothbrush, you can't help noticing how $characters.cherie.name's thin camisole clings delicately to her lithe, toned figure - hinting at every tantalizing curve and swell typically obscured beneath more practical daywear.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Quickly averting your gaze, you focus intently on wetting the bristles and applying a thick dollop of minty toothpaste.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"You know me - I live for the simple pleasures of tetanus and lower back injuries."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name laughs, the bright peal of mirth reverberating against the tiled walls in a way that elicits an unbidden shiver along your arms. Even amid the grime and daily grind of survival, she still prioritizes these little mundane rituals for maintaining a sense of comfort and normalcy.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT4B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you move the toothbrush in practiced circles, stealing sidelong glimpses of $characters.cherie.name's reflection, you can't quite believe how natural this all feels. The two of you existing in easy domesticity, bodies warming the same small space as you perform your nightly ablutions side-by-side.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>It's all so...comfortable. Familiar in a way that tugs at some primal, deeply-rooted yearning for the peace and stability of a long-forgotten era before the world went mad. Despite the harsh new reality bearing down from all sides, moments like these grant you both a temporary reprieve - a chance to simply be, instead of just surviving.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As $characters.cherie.name finishes brushing through her tresses, she sets the brush down on the counter. For a beat, she holds your gaze in the mirror, and you see her pupils dilate almost imperceptibly. A sudden, weighted tension enters the air, as if the very molecules have stilled in anticipation.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Then $characters.cherie.name exhales a slow, measured breath and pulls the tie from her robe's belt-loop. With a subtle shrug of her shoulders, she allows the garment to slip free, baring her lithe figure clad in just that form-fitting camisole and a pair of silken athletic shorts that cling to every curve like a second skin.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nearly choke on the toothpaste foam in your mouth, eyes instinctively trailing across the newly uncovered expanses of $characters.cherie.name's bare shoulders, arms and legs as she stretches languidly beside you. Every inch of her sun-kissed skin looks impossibly smooth and taut over her toned, feminine physique in a way that ignites a long-smoldering fire low in your abdomen.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT4C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The intimacy of the moment - being granted an uninhibited look at so much of $characters.cherie.name's body for the first time in a way that transcends mere pragmatism or necessity - renders you almost dizzy. You hurriedly rinse and spit, keeping your eyes averted as you attempt to regain your composure.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name seems to notice nothing untoward in your reaction, simply continuing her nightly ritual in a manner as natural and thoughtless as breathing. She arches her back in another petit stretch, causing her camisole to ride up tantalizingly and expose a teasing glimpse of her taut midriff.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Grabbing her brush once more, $characters.cherie.name tilts her head to one side and begins the slow, methodical process of detangling and smoothing her raven tresses. The repetitive motions are near hypnotic, each stroke of the bristles through those inky locks drawing your rapt attention inch by inch.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When $characters.cherie.name tilts her head to offer you an inquiring look, you realize you've been staring a little too intently. A rush of heat blooms across your face and neck as you quickly busy yourself capping the toothpaste tube and replacing your toothbrush in its holder.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"Everything okay over there? You look a little...flushed."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT4D.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clearing your throat self-consciously</action> <p>"Y-Yeah, I'm good. Just ready to get some shut-eye after that long day, I guess."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A small, enigmatic smile tugs at the corner of $characters.cherie.name's mouth as she switches her brush to the opposite hand, providing a fresh vantage point of her slender, toned arms working in those unhurried strokes. You have to tear your eyes away once more with a supreme force of will and conscious effort.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"Well, don't let me keep you up then. I still have a few more things to finish over here before I can call it a night."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT4E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod stiffly, jamming your hands into your pockets to keep them from drifting toward any untoward destinations. Every fiber of your being screams to simply turn and admire the breathtaking vision beside you unabashed. To drink in every inch of $characters.cherie.name's partially-clad form bathed in the bathroom's soft light and relish the domesticity of the moment.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But you resist, clinging to the respect and principled boundaries you've vowed never to violate - no matter how alluring the temptation. She is far more than just a body to be ogled, more than just a feminine form to give in to base lusts over. $characters.cherie.name is your lifeline in this cruel world, and you'll be damned before disgracing her divine light with tawdry longings.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Still, you cannot completely quell the lingering hunger kindled by this rare glimpse of her physical intimacies. Like a wolf having caught the briefest scent of potential prey, denying yourself is now an active battle against your most primal instincts.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Forcing your gaze forward, you turn on your heel and make for the door, worried that any further temptation may cause your resolve to buckle entirely.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"Sweet dreams, dear."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT4F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The two softly murmured words caress your ears like a lover's breath, near stopping you in your tracks. You dare one final look over your shoulder to find $characters.cherie.name watching you depart, an expression of such tender fondness warming her features that it simultaneously steadies your convictions while stoking your arousal.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"You too, $characters.cherie.name. Don't stay up too late."</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT4'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1SB"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SB2.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Steam fills the bathroom as you enter, finding $characters.cherie.name brushing her damp hair in a clinging camisole. You try not to gawk at her alluring curves.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you brush your teeth beside her, the intimacy builds tension. When $characters.cherie.name removes part of her robe, you nearly choke - her toned body igniting your arousal.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You hurriedly finish, struggling not to ogle her undressed form. As tempting as it is, you won't disrespect $characters.cherie.name by leering. With tremendous willpower, you excuse yourself before anything escalates further.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name seems taken aback but doesn't pry. You both instinctively realize crossing that line now risks shattering the profound trust you've built.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT4R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 30 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT4R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SB"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SK.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The aroma of freshly brewed coffee and sizzling breakfast meats greets you as you make your way down the hallway toward the kitchen. Despite the early hour, the mouthwatering scents have your stomach rumbling in anticipation. Seems $characters.cherie.name is up and ensuring your day starts off right as always.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You round the corner to find her standing at the battered kitchen counter, tending to something in the skillet while the ancient coffee maker gurgles and drips beside her. $characters.cherie.name is already dressed for the day in simple shorts and a tank top, though her hair remains tied back in a messy bun - a signature look of relaxed domesticity.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As if sensing your presence, she glances up and flashes you a warm smile that never fails to dispel any lingering shadows of weariness clinging to you from the night before.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>Well, good morning, sleepyhead! I was starting to think I'd have to enjoy all this amazing food myself.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT5A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You cross the room, unable to suppress a grin at her gentle teasing. Up close, the fragrances of cooking breakfast take on multi-layered nuances of savory, hearty goodness that set your mouth watering.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>Now we both know that's just mean-spirited taunting, Miss $characters.cherie.name. You'd never dream of torturing me like that.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name laughs—a bright, lilting peal that dances across the kitchen and causes you to instinctively pull her into a brief, one-armed hug. She leans her head against your shoulder for a fleeting moment before straightening with an exaggerated stretch and shimmy of her slender form.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't quite stifle the way your eyes trail down the feminine curves accentuated by her casual clothing as she bends to begin plating the eggs, bacon, and sausage links fresh from the skillet. A warm flush blossoms across your face and chest as you try and fail to keep your gaze from lingering.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name props one hand on her hip, feigning a disapproving look as she holds the overflowing plate out to you with the other hand.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>Eyes are up here, mister. Or need I remind you where babies come from?</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT5B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>You wince reflexively, snatching the proffered plate from her hand as you tear your eyes away with concerted effort.</action> <p>Yeah, yeah...low blow and you know it. Cuts me deep, $characters.cherie.name. Real deep.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She shakes her head in a long-suffering way, but her full lips are curved into a bemused smile that warms you to your core. Abandoning the teasing for the moment, $characters.cherie.name steps around you to retrieve a mug from the cupboard and fills it with the steaming brew from the coffee maker.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When she turns and sets the mug on the counter next to your plate, her body brushes against yours in a subtle contact that borderlines intimate. You feel her curves and warmth radiating against you tantalizingly before she disengages, and you almost sway forward involuntarily to chase that proximity.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name glances up at you from beneath her long lashes, and you see her pupils have dilated slightly despite their usual warm hazel hue. An unspoken, simmering energy now stretches between you—the weight of a thousand unvoiced thoughts and yearnings hanging on the air like the first faint traces of an electrical storm's gathering charge.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT5C.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clearing your throat gruffly</action> <p>There a reason for putting me through such cruel and unusual punishment this morning?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The words fall unnaturally flat in a bid to deflect the rising tension. To reinforce the boundaries you've sworn to respect, no matter how tempting...or intoxicating...those lingering glances and casual intimacies become.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name holds your stare for a long, loaded moment, looking for all the world like she's peering directly into the secret chambers of your soul. Then, just as abruptly as the atmosphere shifted, she slips a mask of serene, if somewhat mirthful, indifference over her expression once more.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>Just felt like starting your day off right for a change. I know how grumpy you can get when that belly isn't full and happy.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT5D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She taps one finger playfully against the tip of your nose before slipping past toward the hallway entrance with a teasing swish of her pert backside. Just before disappearing from view, $characters.cherie.name pauses to toss one final, meaningful look over her shoulder.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>Well? What are you waiting for—an official pardon? Dig in before it gets cold!</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With that, she's gone, leaving you alone in the kitchen with your plate of mouth-watering smells...and the echoing reverberations of that strange, unexplainable tension still thrumming through your veins like an electric current.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You let out a long, shuddering exhalation, sinking heavily onto one of the bench seats surrounding the counter. The food steams appetizingly, almost seeming to mock your inner turmoil with its simple, grounding presence.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Almost of its own volition, your hand drifts up to explore the patch of skin on your nose where $characters.cherie.name's fingertip made that fleeting point of contact. You can still feel the lingering tingle, as if her touch carries a form of static discharge potent enough to keep reverberating across your nerves in a continuous loop.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT5E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A tiny, unbidden voice whispers from the darkest recesses of your subconscious</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <inner>...She felt it too...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You shake your head vigorously and seize your fork, shoveling an overlarge mouthful of still-scalding eggs into your mouth by way of distraction. The sharp, savory flavors are a welcome slap to your senses, allowing you to shove back against the temptations pulling you from a dozen different directions at once.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Once more, you've held the line. The boundaries have been tested and found unshakable...this time. But deep within their sheltered divide, the undercurrent grows ever stronger with each passing day. A steady drumbeat of escalating emotion that howls to be sated—even as obligation wars for the sanctity of your bond to remain inviolable.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you dig into your breakfast with renewed determination, you find yourself uttering a silent oath that your willpower must prove as unbreakable as the day is long. No matter how tantalizing the temptations, how searing the innocuous touches...</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You cannot.. you will not allow yourself to become the one who shatters the immaculate illusion forever.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT5'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1SK"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SK.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The aroma of $characters.cherie.name's cooking leads you to the kitchen, where she's making breakfast in casual clothes. She flashes you a warm smile, teasing about you sleeping late.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As she plates the food, you can't help admiring the curves accentuated by her outfit. $characters.cherie.name catches you staring and jokes "Eyes up here, mister."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You deflect awkwardly, flustered by her proximity when she brushes against you to hand over a coffee mug. An unmistakable tension builds between you, full of unvoiced yearning.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name holds your gaze for a loaded moment, pupils dilated.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT5R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You clear your throat, trying to reassert boundaries. She seems to pull back as well, the intimacy dissolving as quickly as it manifested.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a final, meaningful look, $characters.cherie.name excuses herself - leaving you alone with your breakfast and the echoes of that charged energy still thrumming through you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You take a breath, reaffirming your resolve not to cross lines you can't uncross. As tempting as she is, compromising your bond isn't a risk you can take yet.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 40 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT5R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SK"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The living room glows in the warm, flickering ambiance of the crackling fireplace as evening settles over the shelter. You're stretched out on the well-worn sofa, thumbing through a book you'd salvaged in hopes of finding distraction from your restless thoughts.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A soft sound catches your ear, and you glance over to find $characters.cherie.name emerging from the hallway. She offers you a gentle smile as she makes her way over, sinking into the cushions beside you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a moment, neither of you speaks—the stillness feeling weighted despite its familiarity. You risk a sidelong look at $characters.cherie.name's profile gilded by the firelight, that familiar affection fluttering within you.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>At last, $characters.cherie.name sighs wistfully and tucks her legs up beneath her.</action> <p>Remember when we used to do this all the time, before...?</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT6A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod, very aware of how the dancing shadows accentuate her feminine curves in ways you try not to linger on.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>We'd stay up talking and laughing about everything under the sun...</p> <action>She smiles reminiscently, eyes shimmering as they meet yours with unmistakable warmth. An impulse to lean closer and pull her against you flares up, which you quickly tamp down.</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT6B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>We've been through a lot. But those quieter times remind me what I'm fighting for.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name studies you intently, almost scrutinizing your soul. For a beat, you envision gathering her petite form into an embrace—an idea you instantly reject with a pang of guilt.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Sensing the tension, $characters.cherie.name smiles and eases back.</action> <p>I could use a lazy evening like those simpler times.</p> <action>Slowly, she reaches out and places her hand on yours atop the book. Her soft touch reignites that burning low in your abdomen, which you fight to subdue.</action> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>Would you indulge me? I've missed our old talks about little things.</p> <action>Her eyes glimmer with invitation, tempting you to discard restraint. Gradually, you allow yourself to interlace your fingers through hers, try as you might to ignore the spark between your hands.</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT6C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Angling toward her, you let the book fall aside as $characters.cherie.name recounts old reminiscences and musings. You strive not to read into how her proximity reawakens those yearnings you refuse to entertain.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Yet you relish the solace her presence provides, almost convincing yourself to surrender to this intimate connection. As if existing solely in her orbit absolves the depravity her nearness stokes within you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the hours drift by, $characters.cherie.name's voice eventually trails off. Slowly, her head comes to rest against your shoulder—the picture of trusting vulnerability. You tense slightly at her soft breaths ghosting your neck, then force yourself to relax.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT6D.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>Why don't I get us some drinks? It's been awhile since we've enjoyed an evening like this.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name murmurs an affirmative without lifting her head. As you carefully extricate yourself to stand, her sleepy gaze meets yours for a loaded moment. An unspoken question seems to linger in her heavy-lidded eyes before she simply smiles and nestles deeper into the couch cushions.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT6E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Moving toward the kitchen, you exhale a shuddering breath and rake a hand through your hair. These quiet interludes with $characters.cherie.name nurture a different sort of longing—one you can't quite define, yet seems to beckon more forcefully with each passing day.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Still, you push those thoughts aside, steadying your resolve. $characters.cherie.name has been your guardian, your light in these dark times. To ever pull her across that line would be a violation of trust more profane than any physical intimacy.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you return with the drinks and retake your seat, $characters.cherie.name shifts to nestle against your side once more—close enough for you to breathe in her comforting, familiar fragrance. You resist the instinct to wrap an arm around her slender frame and simply bask in her presence.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT6F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For these few tranquil moments, it's enough to have her near...even if part of you still yearns for that indescribable "more" her proximity seems to promise with every shared breath and smile.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT6'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The firelit living room glows as you read on the couch. $characters.cherie.name joins you, sinking into the cushions closer than usual. An intimate tension hangs between you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.cherie.name reminisces wistfully about quieter times before - evenings spent talking and laughing together intimately. Her nostalgic words and proximity stir that burning temptation you fight to ignore.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Sensing the yearning between you both, $characters.cherie.name's smile falters briefly. She seems to pull back slightly, creating a bit more careful distance.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"Those were nice times. But we should...keep things friendly for now."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CAT6R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod stiffly, trying to assuage the disappointment. As much as you crave indulging that intimacy, $characters.cherie.name clearly has reservations about blurring the lines of your bond any further right now.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The conversation remains fond yet platonic after that. When $characters.cherie.name's voice eventually trails off into silence, she simply offers you a gentle smile before excusing herself for the night.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You're left alone, the echoes of temptation still lingering like the dying fireplace embers.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 50 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CAT6R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SC3.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You knock gently on Cherie's bedroom door and hear her soft voice invite you in. As you enter, you see her sitting on the edge of her bed, her long blonde hair cascading over her shoulders. She smiles warmly at you.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCA1A.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Approaching her</action> <inner>I hope she'll understand my concern.</inner> <p>"Hey, I was wondering if I could talk to you about something."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Patting the bed beside her</action> <p>"Of course, sweetie. What's on your mind?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You sit down next to her, feeling the warmth of her presence.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Fidgeting nervously</action> <p>"Well, with these new virus symptoms, I'm a bit worried about what might happen during the night. I was thinking... maybe I could sleep in here with you tonight? Just to be safe."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Placing a hand on your forehead</action> <p>"Hmm, you don't seem to have a fever."</p> <action>Gently examining your lymph nodes</action> <p>"And there's no swelling here."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her delicate touch sends a shiver down your spine, but you try to focus on your concern.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Smiling reassuringly</action> <p>"I think you'll be just fine, $characters.cherie.player_role. Your room is right down the hall, and I'm here if you need anything."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCA1B.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nodding reluctantly</action> <inner>I guess she's right. I don't want to push it.</inner> <p>"Okay, thanks for checking. I appreciate it."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Giving your hand a gentle squeeze</action> <p>"Anytime, sweetheart. Now get some rest, and don't hesitate to come get me if you feel unwell during the night."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stand up, feeling a mix of relief and disappointment.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Goodnight, Cherie."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"Goodnight, $characters.cherie.player_role. Sweet dreams."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You exit the room, closing the door softly behind you, and head to your own bedroom for the night.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCA1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SC"); //next passage id modVariable("add", "girl_stat", "cherie.trust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SC3.webp'); /*cherie room*/ } </style>\ <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find $characters.cherie.name in her bedroom, sitting at her vanity and brushing her long, golden hair. She's wearing a silky nightgown that hugs her curves in all the right places. You can't help but admire her beauty for a moment before stepping further into the room.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clearing your throat</action> <inner>God, she's stunning.</inner> <p>"$characters.cherie.name, can I talk to you for a second?"</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Turning to face you with a warm smile</action> <p>"Of course, honey. What's up?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCA2A.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Sitting on the edge of her bed</action> <p>"I've been feeling a bit off with these new virus symptoms. I'm worried about what might happen during the night."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Standing up and walking towards you</action> <p>"Oh, $characters.cherie.player_role, I'm sorry you're feeling that way."</p> <action>Placing a hand on your forehead</action> <p>"But you don't seem to have a fever."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Looking up at her with pleading eyes</action> <p>"I know, but I was thinking... maybe I could sleep in here with you tonight? Just in case something happens."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Cupping your face with her hand</action> <p>"Sweetie, I understand your concern, but I think you'll be okay. Your room is just down the hall, and you can come get me if you need anything."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Leaning into her touch</action> <inner>Her skin is so soft...</inner> <p>"Are you sure? I'd feel a lot safer with you."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"I'm sure, $characters.mc.name. You're a strong, healthy young man, and I have faith that you'll be just fine."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCA2B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Standing up reluctantly</action> <p>"Alright, if you say so. Thanks for listening, anyway."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Pulling you into a hug</action> <p>"Anytime, darling. Now, off to bed with you. Remember, I'm here if you need me."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You inhale the sweet scent of her perfume as you hug her back, feeling a mix of comfort and disappointment. As you pull away, your eyes lock for a brief moment, and you could swear you see a flicker of something in her gaze.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Heading towards the door</action> <p>"Goodnight, $characters.cherie.name."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Blowing you a kiss</action> <p>"Sweet dreams, $characters.cherie.player_role."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You close the door behind you, your heart racing as you make your way back to your bedroom, wondering what the night will bring.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCA2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SC"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Cherie enters the bathroom, unaware that you are watching from the doorway. She begins to undress, reaching for the hem of her shirt.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"><p>Just as she starts to lift her shirt, she pauses, sensing something isn't quite right. A look of unease crosses her face.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>murmuring to herself</action> <p>Something feels off...</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She glances around the bathroom suspiciously. Then, she suddenly turns towards the door.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCB1A.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>Hello? Is someone there?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Startled at being nearly caught, you quickly duck out of view and hurry away from the bathroom before Cherie can spot you. Your heart pounds as you make your escape, knowing that peeping on her like that was wrong. You'll need to be more careful in the future not to invade her privacy.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCB1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id modVariable("add", "girl_stat", "cherie.lust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SB2.webp'); /*bathroom*/ } </style>\ <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You quietly approach the bathroom door, hearing the sound of running water. Peeking inside, you see $characters.cherie.name standing at the sink, splashing water on her face.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCB2A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As she reaches for a towel to dry off, she suddenly freezes. Her eyes narrow, and she slowly turns her head towards the door.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <inner>suspiciously</inner> <p>I feel like I'm being watched...</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Realizing you're about to be caught, you quickly withdraw from the doorway and silently hurry away. Your cheeks flush with shame at having invaded her privacy. You make a mental note to respect her personal space in the future.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCB2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SB"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SR.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You plop down on the worn living room couch, sinking into the old cushions. Cherie walks in, wearing a loose t-shirt and shorts that show off her toned legs.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>She says with a warm smile</action> <p>"I thought we could watch a movie together."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She puts on an old romantic comedy and sits down next to you. As the movie plays, you can't help glancing over at Cherie. The way her t-shirt hugs her curves, the swell of her breasts threatening to spill out...you try to focus on the TV but your eyes keep wandering back to her.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCC1A.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>She stretches her arms up, causing her shirt to ride up</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She doesn't seem to notice, her eyes glued to the screen.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You swallow hard, trying to push away the impure thoughts creeping into your mind about the woman who raised you.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>She says softly</action> <p>"This is nice, $characters.mc.name. We should spend more quality time together."</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCC1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SR"); //next passage id modVariable("add", "girl_stat", "cherie.trust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); /*livingroom*/ } </style>\ <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You settle onto the worn couch, eager to relax. $characters.cherie.name enters wearing an oversized t-shirt that hangs off one shoulder, revealing tantalizing glimpses of her creamy skin. Her tight shorts cling to her womanly curves.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCC2A.webp" class="DIAS_image clickable-media"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"I found an old romantic movie for us to watch."</p> <action>She says, tucking a stray lock of blonde hair behind her ear.</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the movie plays, you can't tear your eyes away from $characters.cherie.name. The way her full breasts strain against the thin fabric, her nipples poking through ever so slightly. You shift uncomfortably, trying to hide your growing arousal at the mere sight of her.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCC2B.webp" class="DIAS_image clickable-media"> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Crossing and uncrossing her legs repeatedly</action> <inner>She seems oblivious to the effect she's having on you</inner> <p>"Isn't this nice, $characters.mc.name? Just you and me..."</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCC2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } .DIAS_button { height: 20vh; width: 20vh; min-width: 0; margin: 5vh; border-radius: 50%; transition: 0.3s all ease; border: 1vh solid #5e3e3e; box-shadow: none; } .DIAS_button:hover { opacity: 0.7; outline: 1vh solid #f2a36e; } #cheriebutton { background-image: url('ressources/icons/8.webp'); background-size: cover; } #lanabutton { background-image: url('ressources/icons/9.webp'); background-size: cover; } #elfiebutton { background-image: url('ressources/icons/10.webp'); background-size: cover; } .DIAS_buttonCont img { width: 30%; opacity: 0.7; margin-bottom: 10vh; } </style> <<nobr>> <<script>>playAudio("music", "shelter");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The delicious aroma wafting through the air draws you into the kitchen, where Lana and Elfie have already gathered. Cherie is waiting with a mouth-watering feast laid out on the table.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Mmm, smells amazing!" you exclaim as you all take your seats.</p></div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you tuck into the delectable dishes, you can't help but sneak glances at the three beautiful women surrounding you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie, the mature blonde doctor, is elegantly picking at her food. Her lithe figure and ample bust are a tantalizing sight.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana eats with a serious expression, her athletic body and generous curves straining against her masculine clothes.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>And Elfie is enthusiastically devouring her meal, her perky breasts and tight butt wiggling with each energetic motion.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>I could strike up a conversation with any one of them... you think to yourself, wondering where this family dinner might lead.</inner> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Looking up and smiling warmly</action> <p>"This is nice, having my whole family together for a meal again."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <inner>Why is she being so sentimental?</inner> <p>"Yeah, I guess it's not the worst way to spend an evening."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Beaming at you</action> <p>"I'm just happy we're all safe and together! Oh, you've got a little something..."</p> <action>She leans over and takes a crumb off the corner of your mouth</action> </div> </div> <!-- Choice Buttons --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="GLMF_gotoSecondaryScene('CCD');" id="cheriebutton"></div> <div class="DIAS_button" onclick="GLMF_gotoSecondaryScene('LCD');" id="lanabutton"></div> <div class="DIAS_button" onclick="GLMF_gotoSecondaryScene('ECD');" id="elfiebutton"></div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCD'); //current passage id } } checkIfDocIsLoaded(); </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You smile at Cherie across the table.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"$characters.cherie.role, this meal was delicious as always. You're such an amazing cook."</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <action>Returning your warm smile</action> <p>"Why thank you, dear. I'm just happy I can still provide for my family like this."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCD1A.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nodded, feeling a swell of appreciation and platonic affection for this caring woman who had become like a mother to you during these difficult times on the island. There was nothing but wholesome family feelings between you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"We're all so fortunate to have you taking care of us. This family wouldn't be the same without you."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cherie's eyes shone with motherly love.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Cherie</name> <p>"And I'm blessed to have all of you. As long as we have each other, we'll get through anything."</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCD1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id modVariable("add", "girl_stat", "cherie.lust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SK.webp'); /*kitchen*/ } </style>\ <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right DIAS_active"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>appreciatively</action> <p>You've really outdone yourself with this incredible feast</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <action>Smiling proudly</action> <p>"Well, I'm just happy I can still put my cooking skills to good use and provide for my family."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCD2A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You grinned back at the mature blonde.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"We'd all be totally lost without your homemaking abilities keeping us fed and happy."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She gave a modest wave of her hand, but you could see the delight in her eyes at your praise.</p> </div> </div> <!-- Cherie --> <div class="DIAS_message left"> <img character="cherie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.cherie.name</name> <p>"It's really no trouble at all. Taking care of my loved ones brings me more joy than anything."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/CCD2B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A warm feeling of familial love and belonging washed over you as you shared a caring look with $characters.cherie.name. She was truly the glue holding this makeshift family together through the hardships.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('CCD2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "cherie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SK"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You head towards the bathroom, ready to freshen up after a long day of work on the shelter. As you reach for the door handle, it swings open unexpectedly, revealing a very sweaty and flushed Lana, dressed in her usual workout attire. She's clearly just finished one of her intense training sessions, her skin glistening with a sheen of perspiration.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL1A.webp"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Surprised and slightly annoyed</action> <p>"Oh, it's you, $characters.mc.name. What do you want?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smiling, trying to keep the mood light</action> <p>"Hey, Lana. I was just going to wash up a bit. Looks like you had a pretty intense workout, huh?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Rolling her eyes, pushing past you</action> <p>"Yeah, well, some of us actually care about staying in shape. Not that you'd know anything about that."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL1B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You feel a twinge of annoyance at her dismissive attitude, but you can't help but notice the way her toned body moves as she brushes by you. The virus has been affecting you in strange ways, heightening your senses and making you more aware of the people around you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Raising an eyebrow</action> <p>"I don't know, Lana. I think you might be surprised at what I'm capable of these days."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scoffing</action> <p>"Please. Just because you woke up with a few extra muscles doesn't mean you're suddenly some kind of superhero."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL1C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She turns to face you, her arms crossed over her chest. Despite her standoffish demeanor, you can't help but appreciate the way her workout clothes cling to her curves, highlighting her athletic figure.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smirking</action> <p>"I never said I was a superhero. But I'm not the same guy I was before the coma, either. The virus has changed me, Lana. In more ways than one."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Narrowing her eyes</action> <p>"What's that supposed to mean?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL1D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You take a step closer to her, your eyes locked on hers. There's a tension in the air, a crackling energy that you can't quite explain. Is it the virus, or something else entirely?</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Lowering your voice</action> <p>"It means that I'm stronger now. Faster. More resilient. And I'm not going to let anyone push me around anymore. Not even you."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Uncrossing her arms, her expression shifting</action> <p>"Is that so? Well, I guess we'll just have to see about that, won't we?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL1E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a moment, you think she might actually challenge you to a fight right then and there. But instead, she turns on her heel and stalks off down the hallway, her hips swaying with each step.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Calling over her shoulder</action> <p>"Just stay out of my way, $characters.mc.name. I don't have time for your little games."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL1F.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You watch her go, your heart pounding in your chest. You can't deny the effect she has on you, the way her presence sets your nerves on fire. But you also know that Lana is not someone to be trifled with. She's strong, stubborn, and fiercely independent.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you step into the bathroom and begin to wash up, you can't shake the feeling that something has changed in you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Muttering to yourself</action> <p>"What the hell is happening to me?"</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id modVariable("add", "girl_stat", "lana.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you and Lana simultaneously reach for the bathroom door, your hands brush against each other. Startled, you both recoil, eyes locking in a moment of surprise. She has obviously just finished her workout and is quite sweaty, which doesn't bother you a bit for some reason.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Narrowing her eyes</action> <p>"Watch where you're going, $characters.mc.name. I'm in a hurry."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL1R1.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Sorry, I didn't realize you were heading this way. I'll let you go first."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana's gaze flickers over your body, as if assessing your strength and potential. The virus within you stirs, heightening your awareness of her toned physique and the sheen of sweat on her skin.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scoffing</action> <p>"I don't need your permission. Just stay out of my way."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL1R2.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She pushes past you, her shoulder grazing yours in a fleeting moment of contact. Your heart races as frustration swirls within you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>One day, she'll see me as more than just an obstacle in her path. Until then, I'll keep proving myself to her, one moment at a time.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><strong>YOU NEED 1 LUST WITH LANA TO DO THIS SCENE</strong></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL1R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As the evening settles in, you make your way to the kitchen to grab something to eat. The smell of something cooking hangs in the air, and as you enter, you see Lana standing at the stove, her back turned to you.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Not looking up from the pot she's stirring</action> <p>"I figured I'd make us all something to eat. Don't get used to it though."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="ressources/scenes/LAL2A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>You can't help but sneak a glance at her athletic figure, memories of your earlier encounter flashing through your mind. Shaking it off, you lean against the counter.</inner> <p>"Smells good at least. I didn't know you could cook."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scoffing</action> <p>"There's a lot you don't know about me, [Player name]. I'm a woman of many talents."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She turns to face you, a defiant look in her eyes as she holds your gaze. Despite her harsh exterior, you can detect a hint of vulnerability beneath it all.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I'm sure you are. Maybe you could show me some of those talents sometime."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="ressources/scenes/LAL2B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana's cheeks flush ever so slightly as she picks up on your suggestive tone. She opens her mouth to respond, but seems to think better of it, instead turning her attention back to the simmering pot.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Curtly</action> <p>"Don't push your luck. We may be family but that doesn't mean I'll go easy on you."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't deny the thrill that runs through you at her words, a strange sense of excitement you've never felt before. The virus seems to have awoken something deep within you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Matching her tone</action> <p>"I wouldn't have it any other way, Lana. In fact, I was kind of hoping you'd put up a fight."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="ressources/scenes/LAL2C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The sizzling pot fills the tense silence that follows. Lana's grip tightens on the spoon she's holding as she processes your bold words. When she finally speaks, her voice is low and dangerous.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"You think you can take me, little brother? You're playing with fire."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her use of the familial term sends a delicious shiver down your spine. There's no denying the twisted undertones of this conversation, the virus stoking forbidden flames within you both.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Stepping closer</action> <p>"Maybe I like getting burned."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana's sharp intake of breath is the only indication that she's fazed by your proximity. Her eyes burn with a mixture of anger, confusion, and something darker you can't quite put your finger on.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="ressources/scenes/LAL2D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a long moment, the air crackles with an electric tension. Then, just as quickly as it began, the moment passes. Lana turns away abruptly, her shoulders tense.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Flatly</action> <p>"Just set the table. Dinner will be ready soon."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You watch her for another beat, knowing you've struck a nerve. As you turn to grab some plates, you can't help but wonder what other talents your strong-willed sister might be hiding.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL2'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id modVariable("add", "girl_stat", "lana.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you enter the kitchen, you see Lana cooking at the stove. The smell of whatever she's making is quite appetizing.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Smells good. Didn't know you could cook."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Not looking at you</action> <p>"There's a lot you don't know about me. I have many talents."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You lean against the counter, watching her work. Her athletic figure is quite distracting after your earlier encounter with her.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I can see that. Maybe you could show me some of those talents sometime?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Don't get any ideas. We're family, but that doesn't mean I'll go easy on you if you step out of line."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL2RA.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>You hold up your hands in mock surrender.</action> <p>"Hey, I was just making conversation. No need to bite my head off."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana grunts in response, returning her attention to the pot she's stirring. An awkward silence falls over the kitchen.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>After a moment, you clear your throat.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Uh, do you need any help setting the table or anything?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana shakes her head curtly.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"I've got it handled. Just...go set up somewhere else until it's done."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You frown at her abrupt dismissal but know better than to push her further right now. With a sigh, you turn and head out of the kitchen, wondering what's gotten into Lana lately. The tension between you two is palpable, but not the kind you were hoping for...</p> </div> </div> <!-- Narrator (centered) --> <div class="DIAS_message centered"> <div class="DIAS_text"><b>YOU NEED 10 LUST TO DO THIS SCENE</b></div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL2R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SL.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>There's a strange restlessness coursing through you, like simmering embers being stoked by an unseen force. The virus' effects seem to intensify with every passing day, your senses heightened and your thoughts clouded with confusing desires.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Before you realize it, your feet have carried you to Lana's bedroom door. You hesitate, your hand hovering over the weathered wood. What are you doing here? She's your sister, for god's sake. And yet, you can't deny the twisted longing that has taken root, a dark seedling planted by the insidious virus.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Pushing such thoughts aside, you knock lightly. There's a beat of silence, then a muffled, "What do you want?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Can I come in? I wanted to talk...</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The virus seems to pulse within you as you await her response, whispering wicked suggestions at the edges of your mind. You shake it off as the door swings open, revealing Lana dressed in a tight tank top and shorts. Her arms are crossed, dark eyes narrowed in annoyed curiosity as she looks you over.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL3A.webp"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>Well? Talk.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You step past her into the room, unable to stop your roaming gaze. The virus has amplified every sensation, making you hyper-aware of the curves hugged by her skimpy clothing, the slight sheen of sweat on her toned arms...</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Pushing away the fog of desire, you clear your throat.</action> <p>I, uh...I've been thinking about what happened earlier. In the kitchen.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana closes the door behind you with a soft click, turning to face you with a carefully guarded expression. But you can see the slight tremble in her hand as she tucks a stray strand of hair behind her ear.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>Yeah, and? You looking for an apology or something?</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>You shake your head slowly, holding her intense gaze. There's a simmering heat in the pit of your belly, the virus stoking your confidence.</action> <p>No. I'm not sorry at all, actually.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL3B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her eyes widen at your admission, lips parting in surprise. You can see the rise and fall of her chest quicken, though her face remains impassive. The virus seems to drift between you like a heavy cloud of pollen.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>What's that supposed to mean?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Emboldened, you take a step closer, then another until you're mere inches apart. She doesn't back away, seemingly frozen in place as she holds your stare.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Your voice drops to a low murmur.</action> <p>It means...I meant what I said. About you putting up a fight. About me liking to get burned.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana's eyes widen further, her cheeks flushing as she fights a losing battle against the virus' insidious influence. There's a look of hungry confusion in her dark eyes now, two primal forces battling for dominance within her.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Barely above a whisper</action> <p>You have no idea what you're getting yourself into, $characters.mc.name .</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL3C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The words are laced with undisguised desire, sending a shiver of twisted excitement down your spine. Like a trance, you reach out to cup her flushed cheek, amazed when she doesn't pull away. The virus has weakened her defenses, bringing long-repressed wants bubbling to the surface.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>Then show me.</p> </div> </div><!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The words hang heavy in the air as the virus works its dark magic. For an endless, electrifying moment, the two of you are frozen in place, trapped in a swirl of repressed desire and long-simmering tensions finally coming to a head. The air crackles with a forbidden energy.</p> <p>Then, like a spell breaking, Lana blinks. She takes a shuddering breath and steps back, her cheeks still burning as she wrestles her raging thoughts back into submission.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Unsteady</action> <p>"Get out. Just...get out of my room before I do something you'll regret."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL3D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her voice is laced with confusion and self-loathing, the battle between her iron will and the virus still raging beneath the surface. Disappointment and relief war within you as you nod wordlessly, exiting the room with a final, lingering glance at the beautifully flustered woman left in your wake.</p> <p>As you head back to your room, the virus' dark tendrils still grip your thoughts. What might have happened if you'd pushed her further? The thought brings an exhilarating blend of shame and arousal. One thing is certain - whatever game you and Lana have found yourselves playing, it has only just begun.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back to your room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL3'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SL"); //next passage id modVariable("add", "girl_stat", "lana.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SL.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>There's a strange restlessness within you lately that leads you to Lana's bedroom door. You knock and she calls out in an annoyed tone, "What do you want?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Can I come in? I wanted to talk...about earlier in the kitchen."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's a pause before she responds flatly, "Fine, it's open."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When you enter, Lana eyes you warily from where she sits on her bed in a tank top and shorts. "So? Talk."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>You rub your neck awkwardly.</action> <p>"About the weird tension before...I wasn't trying to hit on you or anything. We're family."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Lana arches an incredulous brow.</action> <p>"Then what was with all the comments about my 'talents'?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAL3RA.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I just misspoke is all," you fumble. "With everything going on, my head's been all over."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana studies you a moment, then some of the confrontational tension leaves her. "Whatever, I'll let it go this time. Just get your head straight."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod gratefully and exit, pushing aside a strange pang of disappointment as you head back to your room. This restlessness must really be getting to you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 20 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back to your room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL3R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SL"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The next day, you make your way into the living room, intent on catching up on some reading. However, any thoughts of relaxation are swiftly banished when you spot $characters.lana.name stretching on the floor. She's clad in formfitting yoga pants and a sports bra, her powerful muscles rippling beneath tanned skin as she moves through her routine.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You freeze in the doorway, inexplicably transfixed by the display. The virus seems to amplify every curve, every glistening bead of sweat on $characters.lana.name's body into something utterly hypnotic. You can't tear your eyes away, even as she notices your presence.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Arching an eyebrow</action> <p>"See something you like, $characters.mc.name?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL4A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's a challenging glint in her eyes as she holds your stare. Despite the bravado in her tone, you detect a slight waver, as if she's treading the line between provocation and genuine interest. The memory of last night's heated encounter is still fresh for you both.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Refusing to back down</action> <p>"I see someone who thinks they're a lot tougher than they actually are."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A thrill runs through you at the daring flirtation laced into your words. The virus is making you bolder, stirring up confusing thoughts you can't quite place.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name slowly rises to her feet, rolling her shoulders as she approaches you with the easy confidence of a predator. When she's just inches away, she leans in until her lips are nearly brushing your ear.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Murmuring</action> <p>"You're playing a very dangerous game, little brother. One you can't possibly hope to win."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL4B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her heated whisper sends a shiver down your spine that has nothing to do with fear. You can feel the warmth of her body, smell the musky scent of her sweat. The virus seems to thrum between you like a livewire.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Matching her tone</action> <p>"I don't know, $characters.lana.name. I'm feeling pretty confident these days."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With that, you let your gaze brazenly trail down her fitness-sculpted figure before returning to lock with her widened eyes. There's a heavy tension in the air, caught somewhere between sibling needling and something darker you can't put words to.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Then $characters.lana.name's features harden into a look of stubborn determination. Before you can react, she grabs you by the front of your shirt and slams you back against the wall with a surprising burst of strength. Her chest is heaving, dark hair tousled, as she holds you pinned with one hand.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Listen up, little brother. I don't know what game you think you're playing, but I can promise you right now, you're way out of your league."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL4C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's an intensity in her eyes that makes your breath hitch. You're abruptly aware of just how close her body is pressed against yours, the intoxicating warmth and hardness of her. The virus seems to thrum through your veins like liquid fire.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"So why don't you do yourself a favor? Walk away right now before I really get serious. Trust me, you won't like me when I'm serious."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL4D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her heated words and domineering stance should terrify you. But instead, you feel an undeniable spark of excitement, like you're staring down the barrel of a loaded gun with a manic grin.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>This twisted game between you has been irrevocably changed. The virus has awoken a newfound daring recklessness, an addictive desire to test your limits...and hers.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Holding her burning gaze</action> <p>"What if I want you to get serious, $characters.lana.name?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She sucks in a sharp breath at your boldness, her eyes flashing with a mixture of surprise, anger and something darker she can't admit to. For a long moment, the two of you are suspended in a crucible of tension so thick you could cut it with a knife.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Then, like a rubber band snapping, the spell is broken. $characters.lana.name abruptly releases you with a look of disgusted confusion. She takes a step back, running a trembling hand through her tousled hair as she avoids your stare.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Hardening her fist</action> <p>"You damn brat, get out of here."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL4E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her voice is low and unsteady, laced with a tangled knot of emotions she's ill-equipped to process. You can practically see the walls slamming back into place as she fights to reassert her unyielding tough-girl persona.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Nodding slowly, you turn and exit the room, tamping down your own swirling haze of thoughts and feelings. As messed up as it is, you know there's no going back now - not for either of you. Whatever twisted game the virus has roped you into, you're both playing for keeps whether you want to or not.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL4'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter the living room to find $characters.lana.name stretching in tight yoga pants and a sports bra. Despite her athletic appeal, you manage to keep your thoughts respectful.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>See something you like?</p> <action>She arches a brow.</action> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>You shake your head.</action> <p>Just admiring your dedication to fitness is all.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She eyes you skeptically but doesn't pursue the matter further. An awkward tension hangs in the air for a moment.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>Whatever. I'm going to finish my routine.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL4R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod and make yourself scarce, wondering why she seems so confrontational lately. Shrugging it off, you continue on your way, the uncomfortable moment soon forgotten.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 30 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL4R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SK.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Later that evening, you wander into the kitchen in search of something to eat, still ruminating over the electrifying confrontation with $characters.lana.name. The virus has opened the floodgates to all sorts of forbidden thoughts and urges, making it difficult to be around your strong-willed sister without a confusing storm of emotions battering your restraint.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You're so preoccupied that you don't immediately register $characters.lana.name's presence until you almost literally walk right into her. She's standing at the counter, eyes narrowed as you hastily sidestep to avoid a collision.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Watch where you're going, idiot."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL5A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her tone is brusque, but you don't miss the way her gaze trails lingeringly over you, making your skin prickle with awareness. The air still crackles with unresolved tension from earlier.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>You shake your head, forcing a nonchalant shrug.</action> <p>"Sorry, I was... Didn't see you there."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL5B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name says nothing, continuing to eye you with veiled intensity as she leans back against the counter. It's then that you realize she's dressed in nothing but a thin ribbed tank top and skimpy athletic shorts, her powerful legs bare and toned arms crossed in a way that makes the flimsy material stretch taut across her chest.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You feel your throat going dry as the virus seizes on the tantalizing visuals, conjuring a whirlwind of dirty thoughts you can't quite lock away. Clearing your throat, you move to retrieve a glass from the cupboard, all too aware of $characters.lana.name's smoldering presence at your back.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL5C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you turn on the tap, $characters.lana.name speaks up again, her voice low and deliberately provocative.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"You know, for someone's who's supposed to be feeling so 'confident' these days, you sure are acting awfully jumpy around little old me."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL5D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You pause, glass halfway to your lips as her words send a shiver of arousal trickling down your spine. Shooting her a sidelong look over the rim, you find her staring at you with undisguised challenge, full lips curved in the barest hint of a smirk.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Slowly, you set the glass aside and turn to face her fully. The air seems to thicken with tension as you hold her burning gaze, taking a deliberate step closer.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL5E.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Who says I'm jumpy? Maybe I just can't take my eyes off you."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name's bravado flickers at your bold words. You can see her chest rise and fall with a sharp intake of breath, her cocksure facade cracking ever so slightly. But she doesn't back down, holding her ground as you close the distance between you.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL5F.webp" class="DIAS_image clickable-media"> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL5'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1SK"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SK.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You wander into the kitchen deep in thought, nearly running into $characters.lana.name who is there in just a tank top and shorts. She snaps at you to watch where you're going.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"For someone who's supposed to be feeling so confident these days, you sure are jumpy around me."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You shake your head dismissively. "Just got distracted, that's all. Didn't mean anything by it."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>She eyes you critically for a moment, then shrugs it off with a scoff.</action> <p>"Whatever. Just don't make a habit of running into me."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL5R1.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Yeah, sure"</p> <action>You mumble, grabbing a quick snack before excusing yourself.</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you leave, you can't help wondering what her problem is lately. Shaking it off, you head back to your room, the awkward tension soon forgotten amid other thoughts.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 40 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL5R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SK"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SL.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>In the aftermath of your incendiary clash in the kitchen, you find yourself restlessly pacing the halls, every nerve still crackling with a heady mixture of shame, arousal, and confusion. The virus has stoked something primal and twisted within you - a simmering bonfire of lust that should be utterly revolting given your familial ties. And yet you can't deny the molten hunger licking at your self-restraint.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Before you can think better of it, your feet have carried you to $characters.lana.name's bedroom door once again. You pause, warring with yourself as memories of your previous encounters flash through your mind's eye with vivid intensity. Can you really go through with this twisted game? Dare you push her even further?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The decision is wrenched from your hands as the door suddenly swings open. $characters.lana.name stands framed in the doorway, eyes blazing and chest heaving like she'd just been engaged in a titanic battle of wills. Perhaps she had. When her gaze lands on you, her expression shifts into one of scorching challenge.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"You just can't stay away, can you?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She punctuates the rhetorical question by hooking her fingers into the neckline of her thin tank top and tugging it down with deliberate sensuality, putting her glistening cleavage shamelessly on display.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL6A.webp" class="DIAS_image clickable-media"> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Looks like you were expecting me."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Despite your attempt at nonchalance, you can't tear your eyes away from the expanse of tanned, toned flesh so brazenly presented to you. Your mouth has gone dry, breathing shallow as the virus screams its fevered approval.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name snorts derisively even as she maintains her provocative pose.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Don't flatter yourself. I'm always prepared to put little boys in their place."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL6B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Summoning your resolve, you manage to drag your stare up to meet hers, holding it with smoldering intensity.</p> </div> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Is that what you think you're going to do to me, $characters.lana.name? Put me in my place?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The words are practically dripping with insinuation. You can pinpoint the exact moment $characters.lana.name registers the deliciously illicit undercurrent, her cocky smirk faltering ever so slightly. But she recovers quickly, squaring those powerful shoulders as she takes a deliberate step towards you.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Something like that. Unless you've decided to be a good little boy and back off while you still can."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She closes the distance between you, leaving only a few heated inches separating your bodies. Up close, you can see the slightest shimmer of sweat along her decolletage, smell the musky aroma of exertion mingled with something decidedly feminine and intoxicating. The virus turns it into an utterly cloying siren's call.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL6C.webp" class="DIAS_image clickable-media"> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"You know I'm not backing down. Not this time."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Holding her burning stare, you reach out with one hand, letting it skim feather-light along the toned curve of her bicep before trailing down the inside of her forearm. You feel $characters.lana.name's sharp intake of breath, see the rise and fall of her chest hitch momentarily at the forbidden contact.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Is that so?"</p> <action>Her voice has dropped to a low, dangerous rasp.</action> <p>"And what if I don't give you a choice?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With that, she lashes out, grabbing your wrist in an unforgivably strong grip before whirling and slamming you back against the wall beside her door. Her lithe body presses against yours, effectively pinning you as she leans in close enough for you to see the flecks of gold in her blazing dark eyes.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"What are you going to do then, tough guy?"</p> <action>she hisses, so close her lips brush your cheek with each word.</action> <p>"Are you finally going to back that big mouth up and put your money where it is?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL6D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The raw, coiled power in her taut frame should terrify you, as should the dark promise of violence smoldering in her gaze. But all it succeeds in doing is sending a raw jolt of forbidden desire searing through your veins.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a split second, sheer reckless impulse threatens to overcome you. You almost close that final hairsbreadth of distance to capture her lips in the searing, depraved kiss you've been fantasizing about. But at the last moment, shreds of sanity and self-preservation reassert themselves.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Instead, you hold $characters.lana.name's blazing stare, keeping your expression studiously impassive despite the thunderous pounding of your heart.</p> </div> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"You'd like that, wouldn't you? To finally break me and prove you're the toughest bitch in the pack."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your words are laced with deliberate insolence, throwing gasoline on the smoldering fire between you both. $characters.lana.name's eyes widen momentarily in surprise before narrowing to heated slits. Her grip on your wrist tightens punishingly.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Why you little..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She trails off, clearly struggling to rein in her spiraling temper. You can practically see the war raging behind her stormy eyes as she fights against the virus' incessant push towards depraved violence and forbidden desires.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL6E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Finally, after what feels like an eternity, $characters.lana.name releases you with a contemptuous sneer. She takes a deliberate step back, putting much-needed distance between your overwrought bodies.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Get out of my face before I really lose my cool, $characters.mc.name. I'm not fucking around anymore."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her voice is low and utterly devoid of anything resembling playfulness or arousal - a transparent attempt to shut down the raging undercurrents between you. Nodding once, you back away slowly, tamping down your own roiling thoughts and conflicted emotions.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL6F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you turn to leave, you shoot her one final heated look over your shoulder.</p> </div> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Whatever you say...sis."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The deliberately familial endearment hangs heavy in the air, laying bare all the sordid implications fueling this twisted game of escalation. $characters.lana.name flinches like you've struck her, her carefully cultivated mask finally cracking.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>By the time you make it back to your room, you're trembling with a potent mixture of shame, confusion and no small amount of twisted gratification. Whatever line had been straddled before, you've both now hurtled over it with reckless abandon.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's no going back from this - not for either of you. The virus has shown its true colours, revealing the darkness simmering beneath even the most stringently-upheld taboos. Reality has shifted on its axis, leaving you to careen wildly through a world of forbidden want and unspeakable temptation.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Part of you knows this can't end well. But you're powerless against the raging tide of depraved hunger the virus has stoked within your veins. All you can do is desperately try to hold on for the inevitable crash towards sweet, terrible oblivion.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL6'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1SL"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SL.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find yourself restlessly pacing until you end up at $characters.lana.name's bedroom door again. Steeling yourself, you knock.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The door swings open to reveal $characters.lana.name, eyes narrowed. "What do you want now?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>I, uh...wanted to clear the air after earlier. Things got pretty heated between us.</p> <action>You rub the back of your neck awkwardly.</action> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>You could say that. So what, you came to apologize for being a little punk?</p> <action>$characters.lana.name crosses her arms.</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAL6R1.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>Something like that. Look, we're family. We shouldn't be getting under each other's skin like this. It's not right.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She holds your gaze for a moment, then lets out a derisive snort. "Whatever. As long as you back off and stop pushing my buttons, we're fine."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>You got it. I'll, uh, leave you be then.</p> <action>You nod gratefully.</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name gives you one last warning look before shutting the door in your face. As you walk away, you feel disappointed but also relieved to have defused the uncomfortable tension, at least for now.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 50 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAL6R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SL"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SL.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You approach Lana's room with a mix of anticipation and nervousness. Since waking up from your coma, you've been eager to reconnect with her, to show her that you're not the same helpless kid she once knew. You knock on the door, waiting for her response.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Opening the door, a look of surprise on her face</action> <p>"Oh, it's you. What do you want, $characters.mc.name?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smiling warmly</action> <p>"Hey, Lana. I was hoping we could talk for a bit. Catch up, you know?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>She eyes you suspiciously for a moment before stepping aside, allowing you to enter. Her room is sparse, with minimal decorations and a distinct lack of personal touches. It's a reflection of her guarded nature, you realize.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Crossing her arms</action> <p>"Alright, talk. But make it quick. I have things to do."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1B.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Sitting on the edge of her bed</action> <p>"I just wanted to thank you, Lana. For everything you've done for us, for me. I know it couldn't have been easy, taking care of everyone while I was out."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scoffing</action> <p>"Yeah, well, someone had to step up. It's not like we had a choice."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>There's a bitterness in her voice that catches you off guard. You realize that the burden of responsibility must have weighed heavily on her shoulders.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I know. And I'm sorry I wasn't there to help. But I'm here now, and I want to do my part."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Raising an eyebrow</action> <p>"And what exactly do you think you can do, $characters.mc.name? In case you haven't noticed, the world has gone to shit. It's not like your little computer skills are going to be much help out here."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>Her words sting, but you refuse to let them deter you. You stand up, meeting her gaze with a newfound determination.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"You might be surprised, Lana. I'm not the same person I was before. The virus, the coma... it's changed me. I'm stronger now, more capable."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Uncrossing her arms, a flicker of interest in her eyes</action> <p>"Is that so? Well, I'll believe it when I see it."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>You take a step closer to her, your heart pounding in your chest. There's a tension between you, an electricity that you can't quite explain.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Softly</action> <p>"Give me a chance, Lana. Let me prove myself to you. I know I can be the $characters.lana.player_role you need, the one who can stand by your side and face whatever comes our way."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1F.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>For a moment, she says nothing, her icy blue eyes searching yours. Then, slowly, the corners of her mouth twitch into the ghost of a smile.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Alright, $characters.mc.name. You've got one shot. Don't make me regret it."</p> </div> </div><!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1G.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>You feel a rush of elation at her words, a sense of purpose filling your chest. You know that earning Lana's trust won't be easy, but you're ready for the challenge.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Grinning</action> <p>"You won't. I promise."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>As you turn to leave, you feel her gaze on your back, assessing, evaluating. You know that this is just the beginning, that there will be many more trials ahead. But for now, you allow yourself a small moment of victory.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SL"); //next passage id modVariable("add", "girl_stat", "lana.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SL_1.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter Lana's bedroom, determined to prove your trustworthiness. She sits on her bed, barely glancing up from polishing her knife as you approach.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Standing confidently</action> <p>"Lana, we need to trust each other to survive. Let me prove you can count on me."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Scoffing dismissively, finally making eye contact</action> <inner>(He can't be serious...)</inner> <p>"Trust you? You've been nothing but weak. I've had to protect everyone."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1R1.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Unfazed</action> <p>"I'm different now - stronger, more capable. Give me a chance."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>She stands up abruptly and gets right in your face, gripping the knife tightly.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Fiercely</action> <inner>(The nerve of him!)</inner> <p>"You think you can just wake up and be my equal? No way."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Standing your ground</action> <p>"I'm not trying to be your equal, just to help keep our family safe. Why won't you let me prove myself?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>For a fleeting moment, Lana's fierce expression falters, revealing a hint of vulnerability. But she quickly regains her steely composure.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Turning her back to you</action> <inner>(I can't risk it...)</inner> <p>"I can't rely on someone who might let me down. Focus on not being a liability, then maybe I'll reconsider. Now get out."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT1R2.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>You sigh in frustration but know pushing further is pointless. You leave her room, even more resolute to find a way to earn Lana's trust. The road ahead may be long, but you're determined to show her you can be the partner she needs.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><strong>YOU NEED 1 TRUST WITH LANA TO DO THIS SCENE</strong></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT1R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SL"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You make your way to the bathroom, still riding the high of your conversation with Lana. It felt good to finally reconnect with her, to start breaking down the walls she's built around herself. As you reach for the bathroom door handle, it swings open from the other side, and you come face-to-face with Lana herself.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Startled</action> <p>"Oh! $characters.mc.name , I didn't expect to see you here."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT2A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smiling</action> <p>"Hey Lana, I was just coming to use the bathroom."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>An awkward silence falls between you as you both seem to realize the intimate nature of your chance meeting. Lana is fresh from the shower, a towel wrapped tightly around her body. Beads of water cling to her skin, and you can't help but notice the way the towel hugs her curves. You quickly avert your eyes, a blush creeping up your neck.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Clearing her throat</action> <p>"Well, don't let me stop you."</p> <action>She moves to step past you, but you reach out without thinking, catching her arm gently.</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT2B.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Wait, Lana..."</p> <action>Your voice comes out slightly husky.</action> <p>"I actually wanted to ask you something, if you have a minute?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana's eyes narrow, but she doesn't pull away from your touch. There's a glimmer of curiosity in her gaze as she shifts her weight, waiting for you to continue.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT2C.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I know things have been really tough lately, with everything that's happened. But I wanted you to know that I'm here for you, okay? You don't have to shoulder all of this alone."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana's expression softens ever so slightly, and you see a fleeting glimpse of vulnerability cross her features.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Quietly</action> <p>"I appreciate that, $characters.mc.name . But you know how I am. I've always been the strong one, the one everyone else relies on."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT2D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You shake your head, giving her arm a gentle squeeze.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"That doesn't mean you can't lean on me too, once in a while. We're family, Lana. Let me be there for you, like you've been there for us."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a long moment, Lana simply searches your face, as if looking for any sign of deception. Then, slowly, she nods.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Okay, $characters.mc.name . I'll... I'll try."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT2E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Relief washes over you, and you can't help but pull her into a tight embrace. At first, Lana stiffens, but then she melts into the hug, resting her head on your shoulder. In that moment, all the weight she's been carrying seems to lift, if only for a brief instant.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Murmuring</action> <p>"We're going to get through this, Lana. Together."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She doesn't respond, but you feel her arms tighten around you, a silent acknowledgment of your words. As you hold each other in the cramped bathroom, you know that a bond has formed between you, one that will only grow stronger as you face the challenges ahead, side by side.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Go back </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT2'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id modVariable("add", "girl_stat", "lana.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You head to the bathroom and the door swings open, revealing Lana fresh from the shower in just a towel. An awkward tension fills the air as you both realize the intimate nature of the encounter.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Well, don't let me stop you."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She moves to go past you, but you reach out and gently catch her arm.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Wait, Lana. I wanted to ask you something..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She eyes you warily but doesn't pull away. "What is it?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT2RA.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>You pause, then shake your head.</action> <p>"Never mind, it can wait. Didn't mean to hold you up."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>Lana's brow furrows, but she doesn't push it. "Suit yourself."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She continues on her way, leaving you standing there. You mentally kick yourself for losing your nerve. With a sigh, you head into the bathroom, wondering what's holding you back from really connecting with Lana lately. The moment is lost.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><strong>YOU NEED 10 TRUST TO DO THIS SCENE</strong></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT2R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1R2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find Lana sitting by the riverbank, her legs crossed and her arms resting on her knees as she stares intently at the flowing water. Even in this peaceful setting, she emanates an aura of focused intensity, like a soldier keeping watch. As you approach, her head snaps up, eyes narrowing before recognizing you.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Don't sneak up on me like that, $characters.mc.name."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT3A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't help but smirk at her brusque greeting. Some things never change with Lana.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Wouldn't dream of it. I know better than to catch you off guard."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana huffs out a breath that might be a chuckle before gesturing for you to join her. You settle down beside her, close enough that your shoulders are almost touching.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Enjoying some quiet time?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT3B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana shrugs, her gaze drifting back to the river.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Just... thinking. Trying to figure out our next move."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's a crease between her eyebrows that betrays the depth of her thoughts. You know she's been shouldering the weight of your survival since you woke from your coma.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"We don't have to have all the answers right now, you know. We're in this together."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She shoots you a sideways glance, a challenge in her icy eyes.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT3C.webp"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Is that so? Last I checked, you were still just getting your bearings, $characters.mc.name. Not really in any position to be making plans."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You refuse to rise to the bait, keeping your expression neutral. You know this is just Lana's way – prickly defenses are her default.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Maybe not. But I'm a fast learner. And I've got you to show me the ropes, don't I?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a beat, Lana simply stares at you, her jaw working slightly as if biting back a retort. Then, almost imperceptibly, the tension in her shoulders eases.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT3D.webp"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"I suppose you do, at that."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A comfortable silence stretches between you as you both gaze out over the gently flowing river. In this moment, there's an unspoken understanding, a recognition of the implicit trust you've begun to build.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"You've got a good head on your shoulders, $characters.mc.name. I'll give you that much."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Coming from Lana, you know that's high praise. A warmth blossoms in your chest at her rare words of approval.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Well, I did have a pretty badass big sis to look up to, you know."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT3E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana's lips twitch ever-so-slightly, the barest hint of a smile.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Flatterer."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But there's no real bite to the word. If anything, her tone is almost... fond. You grin at her, enjoying this glimpse of the real Lana hiding underneath all of those emotional armor plates.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the sun begins to dip below the treeline, casting brilliant streaks of orange and red across the water's surface, you lean back on your palms, savoring the tranquil moment. Out of the corner of your eye, you notice Lana's shoulders have finally relaxed, her face unguarded and peaceful. In that instant, she looks unburdened, more at ease than you've ever seen her.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You know there's still a long road ahead, countless challenges to face and obstacles to overcome. But as you sit beside your fierce, indomitable sis, you can't help but feel a surge of hope and determination. Come what may, you'll face it all head-on, side-by-side – an unbreakable team forged in the crucible of this unrelenting new world. And for the first time since waking, you believe that you just might make it through after all.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT3'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1R"); //next passage id modVariable("add", "girl_stat", "lana.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1R2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find Lana sitting alone by the riverbank, lost in thought. As you approach, she shoots you a wary look.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Don't sneak up on me like that."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>You hold up your hands. "Just stumbled across you, that's all. Didn't mean to intrude."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She eyes you for a moment, then gives a curt nod, gaze drifting back to the water. An awkward silence stretches between you.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LAT3RA.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>You clear your throat. "So...any thoughts on our next move?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Like you'd understand my plans," Lana scoffs without looking at you. "I've got this handled, don't worry your pretty little head about it."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You frown at her dismissive tone but know better than to push her when she's in this prickly mood. With a sigh, you turn to head back the way you came.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Whatever you say, Lana. I'll leave you to it."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She doesn't respond, already tuning you out again. As you walk away, you can't help but feel that impenetrable barrier between you, one that never seems to let down no matter how hard you try. Shaking your head, you continue on, hoping one day to finally break through to her.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 20 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT3R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1R"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter the living room to find $characters.lana.name on the couch, one leg crossed over the other as she meticulously cleans her combat knife. Even during supposed downtime, she maintains a state of coiled readiness. As you approach, her eyes flick up, piercing and assessing.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Can I help you with something, $characters.mc.name?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT4A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her tone is clipped, all business. You've learned that this is simply $characters.lana.name's default - prickly armor forged from years of hardship.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Just thought I'd see how you were holding up." You lower yourself onto the couch, leaving a careful distance between you. "You've been running yourself ragged lately."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name continues dragging the whetstone along the knife's edge, her movements precise and controlled.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"I'm fine. This is what I was trained for - being ready, staying vigilant."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT4B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You frown at the stubborn set of her jaw. She's been utterly relentless since you woke, pouring every ounce of her energy into keeping your family safe and secure. But at what cost?</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Sure, but even soldiers need to take a break sometimes, $characters.lana.name. You're only human."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her nostrils flare slightly at your words. In a flash, she snaps the knife closed and levels you with an icy glare.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Is that what you think? That I'm just being foolishly stubborn?"</p> <action>She leans in, voice low and laced with an edge.</action> <p>"I'm the only thing standing between us and total chaos, $characters.mc.name. I don't have the luxury of 'taking a break'."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT4C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You hold her stare, refusing to be cowed. If you've learned anything about your sis, it's that buckling under her intensity only breeds resentment.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I'm not trying to diminish what you do, $characters.lana.name. I'm simply saying you don't have to do it alone anymore."</p> <action>You slowly reach out, resting your hand on her arm.</action> <p>"Let me take some of that weight off your shoulders. We're a team now, remember?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a long beat, $characters.lana.name is utterly still, her eyes boring into you with an intensity that would shake a lesser person. You can practically see the gears turning as she weighs your words, calculates every possible angle.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Finally, some of the tension bleeds from her frame, and she lets out a slow, controlled breath. Her arm doesn't pull away from your touch.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"You think you can just swoop in and magically make everything better, $characters.mc.name? That's cute, but painfully naive."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT4D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You open your mouth to protest, but she cuts you off with a sardonic chuckle.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"But...I suppose an extra set of hands wouldn't hurt."</p> <action>Her jaw works minutely.</action> <p>"If you really think you've got what it takes, fine. I'll show you the ropes, let you pull your weight for once."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT4E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>It's not exactly a ringing endorsement, but coming from $characters.lana.name, you'll take what you can get. A sense of determination fills your chest, fueled by her dismissive tone. You'll prove yourself worthy of her trust, no matter what it takes.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Don't worry, sis. I'm a fast learner, remember?"</p> <action>You flash her a cocksure grin, refusing to be diminished.</action> <p>"Just show me what to do, and I'll handle the rest."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name arches one sculpted eyebrow, a glimmer of...respect? Amusement? It's impossible to say. But it's the closest thing to warmth you've witnessed from her in a long while.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"We'll see about that, $characters.mc.name."</p> <action>Her lips quirk faintly.</action> <p>"We'll see."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT4F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As she slips the knife back into its sheath and rises fluidly from the couch, you feel a surge of cautious optimism. Her walls may still be sky-high, but you've caught a glimpse of what lies beyond - and you're more determined than ever to dismantle them, one fortified stone at a time.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The road ahead is sure to be grueling, fraught with setbacks and uphill battles. But you're committed now, bound by an iron-forged promise to have Lana's back, to show her she doesn't have to face this world's brutalities alone any longer. Come what may, you'll be the unshakable foundation she can lean on, the bastion of courage and tenacity to fortify her own relentless strength.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As $characters.lana.name's silhouette disappears around the corner, you settle back into the couch, a roguish smile playing across your lips. You've been issued one hell of a challenge, true...but you've never been one to back down from a fight.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT4'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find $characters.lana.name sitting on the couch, meticulously cleaning her combat knife. As you approach, her eyes flick up warily.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Can I help you with something?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>You shrug, keeping a respectful distance.</action> <p>"Just thought I'd check in, see how you're holding up."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her jaw tightens slightly at your words.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"I'm fine. This is what I do - stay ready, stay vigilant."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I know, but even you need a break sometimes," you venture. "You've been running yourself ragged lately."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name's eyes flash and she snaps the knife closed abruptly.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Listen, I don't need you coddling me, okay? I'm holding this family together. I can't afford to take a 'break'."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT4R1.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>You hold up your hands in surrender.</action> <p>"Alright, alright. I was just trying to help, but I'll back off if that's what you want."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She eyes you coolly for a moment, then gives a curt nod.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"See that you do. I've got this handled."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With that harsh dismissal, you know better than to push further right now. Giving her one last glance, you turn and head out, wondering if you'll ever get through that impenetrable wall she keeps putting up.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 30 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT4R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1R2.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find $characters.lana.name sitting by the river again, elbows resting on her knees as she stares intently at the flowing water. Her brow is furrowed, jaw set in that trademark expression of intense focus. As you approach, her head tilts fractionally, acknowledging your presence without fully turning.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Back again, I see."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT5A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her tone is dry, long-suffering, as if you're a persistent itch she can't quite scratch. You take it in stride, settling down beside her close enough for your shoulders to brush.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"What can I say? I'm a sucker for these romantic riverside rendezvous."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>One sculpted brow arches upward, her penetrating stare finally swinging your way.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Rendezvous? Is that what you think this is?"</p> <action>She scoffs lightly.</action> <p>"And here I thought you were just being your usual, annoying self."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT5B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You flash her a shameless grin, undaunted by her prickly exterior. If there's one thing you've learned, it's that needling $characters.lana.name is a sure way to crack that icy veneer - even if it's mostly just her venting building frustrations.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Ouch, sis. You sure do know how to wound a guy."</p> <action>You make a show of clutching your chest dramatically.</action> <p>"Why do you have to be so mean to me?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name rolls her eyes so hard it's practically an Olympic event. But you catch the faint twitch at the corner of her mouth, the subtle betrayal that she's fighting off a smile.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Don't give me that look, $characters.mc.name. We both know you've got it coming most days."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT5C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You level her with an exaggerated pout, leaning in until you're invading her personal space in that obnoxious little brother way she pretends to despise.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Is that any way to talk to your favorite $characters.lana.player_role? C'mon, $characters.lana.name, I know you secretly love me."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her nostrils flare momentarily, a muscle ticking in that clenched jawline. For a beat, you're certain she's about to throttle you right here on the riverbank. But then her chin dips, and she lets out a slow, controlled exhalation - an incremental venting of the ever-present pressure valve.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"You're infuriating, you know that?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT5D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But the venom is gone, replaced by a tone that's almost...fond? Exasperated, certainly, but lacking any real bite. You count it as a win.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I've been told once or twice, yeah."</p> <action>You settle back on your elbows, basking in the gentle sunlight filtering through the canopy.</action> <p>"But you gotta admit, I keep things interesting around here, sis."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name scoffs again, shaking her head minutely. But you don't miss the way her shoulders have relaxed, the slight easing in the taut lines of her body. For someone as perpetually coiled as a tripwire, these fleeting reprieves are few and far between.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A comfortable silence lapses between you, broken only by the soothing gurgle of the river's flow. Out of the corner of your eye, you watch as $characters.lana.name's gaze grows distant, her mind clearly wandering down those familiar labyrinthine paths.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You don't push or pry. Instead, you simply exist in this moment alongside her, a reassuring presence in case her thoughts stray too far into darkness.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Eventually, $characters.lana.name drags in a breath and straightens beside you. When she turns, there's a inscrutable tightness in her expression, as if she's steeling herself.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"You know you're an idiot, right?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT5E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You blink, caught off guard by the abrupt shift in conversational gears. But her eyes hold no real ire, prompting a lopsided grin in response.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Pretty sure we've established that, yeah. But I'm your idiot, for whatever that's worth."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The muscle in her jaw ticks again, but it's fleeting - there and gone in a heartbeat. Slowly, carefully, $characters.lana.name reaches over and gives your knee a firm squeeze.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Yeah...yeah, you are."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT5F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>It's not much – just the barest admission, muttered around the edges of a weighted pause. But it still seeds a peculiar warmth in your chest, evidence that she's letting you burrow past those battlements, if only by inches.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>In this moment, sitting beside your steadfast, indomitable sis, you recognize the gravity of what's slowly transpiring between you. An ineffable forging, raw andumbral – shackling you two in wary, dedicated alignment against the world's obscenities, come what may.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>And as $characters.lana.name's calloused hand slips from your knee, a silent acceptance more profound than words could convey, you make a solemn vow to safeguard this primal validation, this transcendent trust...whatever the cost.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT5G.webp" class="DIAS_image clickable-media"> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT5'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1R"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1R2.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find $characters.lana.name brooding by the river once again. As you join her, she cuts you a sidelong glance.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Back again?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Just thought I'd check in," you say carefully.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name tenses.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"I don't need you checking in on me. I can handle my responsibilities alone."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You try reasoning with her about being a team, but she shuts you down firmly.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Save it. I've got this under control, my way."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT5R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Realizing you've overstepped, you back off with a nod and leave her be. Her walls remain stubbornly up, keeping you at arm's length despite your efforts to get closer.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a resigned sigh, you walk away, her solitary brooding undisturbed once more.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 40 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT5R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1R"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SK.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You enter the kitchen to find $characters.lana.name hunched over the counter, her shoulders bunched with tension as she meticulously breaks down and reassembles her sidearm. Even during idle moments, she maintains that state of hyper-vigilance – a soldier's discipline burned into her very bones.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you approach, her head tilts fractionally, ultrasensitive to even the slightest disruption in her surroundings. When she realizes it's you, her jaw tightens infinitesimally before she returns her focus to the disassembled gun.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Don't you know how to knock?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT6A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her tone is clipped, bordering on confrontational. You've learned to take such prickly greetings in stride, recognizing them for what they are – $characters.lana.name's closest approximation to casual banter.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"What, and miss out on some quality sis time?"</p> <action>You snag an apple from the bowl, polishing it nonchalantly on your shirt.</action> <p>"You'd just find something else to complain about."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her head whips up at that, eyes blazing like flinted steel in the dim kitchen light. For a beat, you're certain you've crossed some invisible line yet again. But then her chin tilts down, focusing on the weapon components as her shoulders unlock in a nearly imperceptible slouch.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Smartass."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT6B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But the insult holds no real bite, more an instinctive deflection than anything malicious. You know better than to mistake $characters.lana.name's habitual abrasiveness for genuine ire – it's simply the armor she wears, studded carapace concealing vulnerabilities she refuses to expose.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Emboldened, you ease closer, propping a hip against the counter beside her as you take an exaggerated bite of your apple. $characters.lana.name's eyes cut towards you briefly, but she doesn't pull away from your looming proximity.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"So, what's on the agenda today, sis? Some more thrilling firearm maintenance, or are we mixing it up with surprise deep-cleaning of the bathtub grout?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her nostrils flare slightly at your mocking tone, shoulders stiffening once more. But then she exhales – a slow, controlled venting that causes some of that taut coiling to unspool.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Maybe I'll put you on waste disposal duty. Give those scrawny arms something to do for once."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT6C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>It's the closest thing to playful banter you're liable to get from $characters.lana.name most days. Rather than rising to the insulting jab, you simply grin around another mouthful of apple.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Bring it on. I've been working on my one-liners for the job. Like: 'Whew, good thing that was just a fart!'"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You punctuate the stupid joke with a lame wink and a cavalier eyebrow waggle. $characters.lana.name stares at you flatly for a moment before snorting a helpless puff of expelled air –somewhere between a scoff and a smothered laugh.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"You're impossible."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT6D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But the words lack any real heat. In fact, the barest ghost of a smirk is ticking at the corner of her mouth – the faintest evidence that she's lowering her guard, if only fractionally.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>In the wake of that subtle thaw, the cloying tensions that permeate every waking moment bleed out of the kitchen for a few blessed heartbeats. As $characters.lana.name finishes re-assembling her weapon, checking the action with crisp, ingrained motions, you simply watch in companionable silence.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When she rises from the counter, $characters.lana.name meets your gaze with less of that characteristic icy severity. There's still an edge there, eternally sharpened...but tempered with the faintest patina of warmth, an infinitesimal incremental in the steady dismantling of her barriers.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Don't think this gets you out of doing your chores later, $characters.mc.name."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT6E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The words themselves could almost be construed as a threat. But the tone...there's something lighter, almost affectionate to her graveled timbre.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You take another bite of your apple, holding her stare with a shameless grin.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Wouldn't dream of it, sis."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As $characters.lana.name brushes past you, near enough for the barest whisper of contact, the bond between you thrums with palpable resonance. It's still nascent, a gossamer strand in the process of fortification...but you can feel the foundations of that profound trust growing more inviolable with each passing day.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name may still keep you at arm's length, wary of granting any vulnerability or weakness purchase. But one way or another, you'll keep chipping away at her emotional battlements - steady, persistent, utterly relentless.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Because that's what partners do for each other in this blighted new world. They persist, they endure...and they refuse to let the other succumb to the all-consuming crucible of isolation, no matter how loud the siren call.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you polish off the last bite of your apple, you tighten your jaw in silent affirmation. Whatever lies ahead, you'll be the unshakable bastion to which $characters.lana.name can anchor, even if she vehemently denies needing such a thing.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>It's the least you can do for the indomitable warrior keeping your family's flame burning in this ever-darkening abyss.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT6'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1SK"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SK.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find $characters.lana.name cleaning her gun in the kitchen. As you approach, she cuts you a warning look.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Don't you know how to knock?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You hold up your hands peacefully and ask if you can help with anything today.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"I've got it handled. Don't need you underfoot."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LAT6R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Realizing she's in a prickly mood, you start to back off with a nod.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Alright, I can take a hint."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.lana.name doesn't respond, her demeanor radiating solitary self-reliance. You exit, the distance between you palpable as she rebuffs your attempt to connect.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her walls remain firmly up, leaving you stalemated outside once again.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 50 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LAT6R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SK"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SL_1.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You softly knock on Lana's bedroom door. After a moment, she opens it, looking serious and slightly wary.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Hey Lana, can I come in for a minute?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lana hesitates, then steps aside to let you enter. Her room is spartan and well-organized, with workout equipment and martial arts trophies prominently displayed. She crosses her arms and looks at you expectantly.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Feeling a bit nervous under her intense gaze</action> <p>"So, uh, I've been feeling kind of off lately with these new virus symptoms. I'm a bit worried about what might happen at night."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Frowning</action> <p>"Have you told Mom about this? She might be able to help."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Shaking your head</action> <p>"No, I don't want to worry her. I was actually thinking... maybe I could crash here with you tonight? Just in case something happens."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Eyes widening in surprise, then narrowing</action> <p>"What? No way. That's not happening."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/LCA1A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Trying to lighten the mood</action> <p>"Aw, come on, sis. It'll be just like when we were kids, having sleepovers."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Unamused</action> <p>"We're not kids anymore, [Player Name]. You need to deal with this on your own."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Pleading</action> <p>"Please, Lana? I'd just feel so much better knowing you're nearby."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Sighing, uncrossing her arms</action> <p>"Look, I get that you're scared, but you can't rely on me forever. You need to toughen up and face this head-on."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Deflating a bit</action> <p>"I know, I know. I'm sorry for even asking."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Softening slightly</action> <p>"Hey, it's okay. I'm here for you, just... not like that. If you need me during the night, I'm right down the hall."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nodding</action> <p>"Thanks, Lana. I appreciate it."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Awkwardly patting your shoulder</action> <p>"Yeah, well, don't mention it. Now, if you're done being a wuss, maybe we can get in a quick sparring session before bed."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Groaning good-naturedly</action> <p>"You're on. Try to go easy this time, okay?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Smirking</action> <p>"No promises, $characters.lana.player_role. No promises."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you follow Lana out of her room, you can't help but feel a bit more at ease. Sure, she's tough and uncompromising, but you know she's got your back, no matter what this virus throws your way.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LCA1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SL"); //next passage id modVariable("add", "girl_stat", "lana.trust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SL_1.webp'); /*cherie room*/ } </style>\ <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You approach $characters.lana.name's room with a sense of trepidation, knowing she values her privacy. You take a deep breath and knock firmly on her door. After a long moment, the door swings open, revealing $characters.lana.name in her workout clothes, sweat glistening on her brow.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCA2A.webp" class="DIAS_image clickable-media"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Irritated</action> <p>"What do you want? I'm in the middle of my routine."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Taken aback by her abruptness</action> <p>"Oh, sorry. I just wanted to talk to you about something."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Sighing impatiently</action> <p>"Make it quick. I don't have all day."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Stepping into her room, trying to ignore the intense atmosphere</action> <p>"Well, I've been feeling kind of weird lately with these new virus symptoms. I'm worried about what might happen at night."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Scoffing</action> <p>"And what do you expect me to do about it? Tuck you in and sing you a lullaby?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Flushing</action> <p>"No, of course not. I was just thinking... maybe I could stay with you tonight? Just in case something happens." </p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Laughing harshly</action> <p>"You've got to be kidding me. Do I look like your personal bodyguard?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCA2B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Getting defensive</action> <p>"I'm not asking you to protect me. I just thought it might be safer if we stuck together, for everyone."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Rolling her eyes</action> <p>"Safer for who? Listen, $characters.mc.name, you need to grow a spine and deal with your own problems. I can't be there to hold your hand every time you get a little scared."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Frustrated</action> <p>"I'm not asking you to hold my hand! I just thought-"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Cutting you off</action> <p>"You thought wrong. Now, if you're done wasting my time, I have a workout to finish."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCA2C.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clenching your jaw</action> <p>"Fine."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Already turning back to her weights</action> <p>"Whatever. Just don't make a habit of it."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You storm out of $characters.lana.name's room, slamming the door behind you. You can't believe how cold and dismissive she was. Sure, she's always been a bit aloof, but this was a whole new level.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LCA2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SL"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You're relaxing in the hallway when Lana strides in. Despite her tough exterior, you can't help but notice her feminine curves and athletic physique. She gives you a curt nod as she gathers some clothes and a towel.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Briskly</action> <p>"I'm going to shower. Don't bother me."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She heads into the bathroom, leaving the door slightly ajar. Through the crack, you inadvertently catch a glimpse of her beginning to disrobe - her toned, muscular back and beautiful rear end exposed as she lifts her shirt up.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Pausing, eyes narrowing</action> <p>"Did you hear me? I said don't bother me."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LCB1A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Realizing you've been spotted, you quickly look away from the bathroom. The last thing you want is to provoke Lana's infamous wrath by violating her privacy. You keep your distance as you hear the shower turn on.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Muttering to herself</action> <p>"Tch, rookie mistake leaving the door open a bit..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her gruff demeanor remains even in the privacy of the bathroom. You make a mental note to give Lana her space, especially when she's trying to freshen up. Catching even an inadvertent glimpse could mean severe consequences from the fierce and private Lana.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LCB1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id modVariable("add", "girl_stat", "lana.lust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SL_1.webp'); /*bathroom*/ } </style>\ <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You're lounging on your bed reading when $characters.lana.name suddenly enters, already stripping off her sweaty workout clothes. She shoots you an intense look.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCB2A.webp" class="DIAS_image clickable-media"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Out. I need to shower."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her tone leaves no room for argument. You quickly avert your eyes as she starts peeling off her sports bra, revealing hints of her toned back and shoulders.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Sharply</action> <p>"Did you not hear me? Get out unless you want me to make you get out."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCB2B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Not wanting to incur her wrath, you scramble to your feet and head for the door, keeping your gaze averted from $characters.lana.name's muscular, semi-nude form. As you exit, you catch one last glimpse of her heading into the bathroom, powerful thighs exposed.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LCB2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SL"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SR.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You flop onto the tattered couch, eager to relax after a long day. Lana strides in, her tight workout shorts and sports bra hugging her powerful, muscular frame. Even when lounging, she exudes an aura of intense determination.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>She says gruffly, popping the disk in.</action> <p>"I found an old action flick."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LCC1A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the movie plays, you can't tear your eyes away from Lana's physique. The way her sculpted abs tighten with each breath, her powerful thighs tensing.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Stretching her arms up, her breasts straining against the sports bra</action> <p>"This is a waste of time. We should be training."</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LCC1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SR"); //next passage id modVariable("add", "girl_stat", "lana.trust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); /*livingroom*/ } </style>\ <<nobr>> <<script>>playAudio("music", "lanaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Settling into the couch, you brace yourself as $characters.lana.name comes stomping in wearing just a tight tank top and boy shorts. Her muscular legs, sculpted arms, and washboard abs are on full display.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCC2A.webp" class="DIAS_image clickable-media"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Move over, runt."</p> <action>She barks, shoving your legs aside to plop down.</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't help admiring her curvy, powerful body as she fiddles with the remote. Up close, her musky scent of sweat and feminine musk makes your head spin. You want nothing more than to run your hands along those rippling abs.</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Glaring at you with a weird smile</action> <p>"What are you gawking at? Eyes front, kid."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCC2B.webp" class="DIAS_image clickable-media"> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LCC2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Turning your attention to Lana</action> <p>"That was a delicious meal. She really outdid herself."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Giving you a sidelong glance</action> <p>"I suppose."</p> <inner>Why is he trying to make small talk with me?</inner> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/LCD1A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Searching for a conversation topic</action> <p>"So...any, uh, fun plans for the rest of the evening?"</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <p>"Fun?"</p> <action>Scoffing derisively</action> <p>"There's no time for fun. We need to be focused on fortifying our defenses and ensuring our survival, not wasting time with frivolous activities."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Rubbing the back of your neck awkwardly</action> <p>"Oh, erm, right. My bad. Survival's the top priority, of course."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>Lana</name> <action>Rolling her eyes and going back to silently picking at her plate, effectively shutting down any attempt at casual conversation</action> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LCD1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id modVariable("add", "girl_stat", "lana.lust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SK.webp'); /*kitchen*/ } </style>\ <<nobr>> <<script>>playAudio("music", "lanaLust");<</script>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right DIAS_active"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Zeroing in on $characters.lana.name's athletic, curvaceous form and giving her an admiring once-over </action> <p>"You know, with a body like that, you could definitely give some of those fitness models a run for their money." </p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCD2A.webp" class="DIAS_image clickable-media"> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <action>Her eyes narrowing dangerously</action> <p>"Excuse me? I'll have you know I keep myself in peak physical condition for function, not to be an object for men's crude ogling."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Throwing your hands up defensively</action> <p>"Hey, just giving a compliment where it's due. No need to get all riled up."</p> </div> </div> <!-- Lana --> <div class="DIAS_message left"> <img character="lana" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.lana.name</name> <p>"Hmph. Shameless."</p> <action>Muttering, even as you notice a light blush dusting her cheeks</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/LCD2B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <inner>She can act as prickly as she wants, but I know she enjoyed that, deep down,</inner> <action>Thinking, amused by her tsundere attitude</action> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('LCD2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "lana.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SK"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SE.webp'); } </style> <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You tap lightly on Elfie's door, a familiar routine from your life before the apocalypse. The shelter has brought a sense of normalcy back to your lives, and you find yourself falling into old habits, like checking in on Elfie before bed.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <voice>Voice cheerful and inviting</voice> <p>"Come on in, $characters.mc.name!"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You step into the room, taking in the cozy atmosphere Elfie has created. Her favorite stuffed animals are arranged neatly on the bed, and the air is filled with the soft scent of her favorite vanilla candle.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/EAL1A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie is sitting cross-legged on the bed, a well-worn book open in her lap. She looks up as you enter, her face lighting up with a bright smile.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Hey, $characters.elfie.player_role ! I was just reading the next chapter in my favorite series. Want to join me?" </p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/EAL1B.webp"> </div> <!-- Player --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Grinning</action> <p>"I thought you'd never ask. Scoot over, bookworm."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You plop down beside her, the mattress bouncing slightly under your weight. Elfie giggles, playfully jabbing her elbow into your side.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Watch it, mister. You're in the presence of literary royalty here."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You both laugh, falling easily into the playful banter that's always defined your relationship. For a moment, it's almost like nothing has changed, like you're just enjoying a lazy evening together.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/EAL1C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But then you feel it - the subtle hum of the virus coursing through your veins, the heightened awareness of Elfie's proximity. Your laughter fades, replaced by a charged silence.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Brow furrowing</action> <p>"$characters.mc.name? Is everything okay? You look a little... flushed."</p> </div> </div> <!-- Player --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Shaking your head</action> <p>"I'm fine, Elfie. Just feeling a bit off lately. Must be the stress of everything that's happened."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>It's not entirely a lie. The virus has brought changes both physical and mental, awakenings you're not quite sure how to navigate. You find yourself noticing things about Elfie you never did before - the delicate curve of her neck, the way her tank top hugs her developing curves.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/EAL1D.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Scooting closer</action> <p>"I know what you mean. It's been a lot to take in. But we've got each other, right? That's what really matters."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She rests her head on your shoulder, a gesture of comfort and affection that's achingly familiar. Yet now, with the virus humming in your blood, it feels different - more charged, more intimate.</p> </div> </div> <!-- Player --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Voice slightly strained</action> <p>"Right. We'll always have each other's backs. No matter what."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie hums in agreement, her hand finding yours and giving it a gentle squeeze. The innocent touch sends a jolt of electricity through your body, a visceral reminder of the desires you know you can't act on.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/EAL1E.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You clear your throat, desperate to change the subject before your thoughts can wander any further down that forbidden path.</p> </div> </div> <!-- Player --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"So, what's happening in the story? Catch me up to speed."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie launches into an enthusiastic recap, her eyes sparkling with excitement as shedescribes the latest plot twists and character developments. You try to focus on her words, but find your gaze repeatedly drawn to her lips, to the expressive way her hands move as she talks.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/EAL1F.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You feel like a man possessed, consumed by urges you know are wrong but can't seem to shake. The virus has opened a Pandora's box within you, unleashing a darkness you're not sure you're strong enough to fight.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Yawning</action> <p>"I'm sorry, $characters.mc.name. I guess I'm more tired than I realized."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/EAL1G.webp"> </div> <!-- Player --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Forcing a smile</action> <p>"No worries Elfie. It's been a long day for all of us. I should probably let you get some rest."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stand up, your body protesting the loss of Elfie's warmth beside you. She looks up at you, her expression soft and trusting, completely unaware of the battle raging inside you.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Thanks for listening, $characters.mc.name. I always sleep better after our bedtime chats."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/EAL1H.webp"> </div> <!-- Player --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Anytime, sweet dreams."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a final goodnight, you slip out of the room, your heart pounding and your mind in turmoil. As you make your way to your own bed, you can't shake the feeling that the virus has set something in motion - a dangerous dance of temptation and taboo that threatens to consume you.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SE"); //next passage id modVariable("add", "girl_stat", "elfie.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SE.webp'); } </style> <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You find yourself standing outside Elfie's bedroom door. The innocent and naive Elfie has always been the baby of the family, and you can't help but wonder how the virus is currently affecting you.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Humming a whimsical tune</action> <inner>(I wonder what kind of adventures await me today! Maybe I'll discover a hidden magical realm or befriend a talking animal!)</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>As you reach for the doorknob, a sudden hesitation washes over you. Elfie's purity and innocence are part of what makes her so special, and you realize that your current level of lust may not be appropriate for the delicate nature of your relationship.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL1R1.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You hear Elfie's gentle laughter, a sound that fills your heart with warmth and affection. You know that she trusts you implicitly, looking up to you as a protector and guide in this strange new world.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p> <strong>YOU NEED 1 LUST WITH ELFIE TO DO THIS SCENE</strong> </p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL1R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SE"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } </style> <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You wander into the kitchen, letting out a jaw-cracking yawn. Even after sleeping in, you're still feeling that bone-deep fatigue that has become your constant companion lately. As you reach for a glass, you're startled by a sudden commotion behind you.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Dancing into the kitchen, singing along to her headphones</action> <p>"Oh hey, didn't see you there!"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL2A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She bops over to you, pigtails swinging with her exaggerated movements. Pulling out her headphones, she gives you a bright smile that makes you forget your weariness, if only for a moment.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Chuckling</action> <p>"Having a solo dance party this morning?"</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Sticking out her tongue</action> <p>"Maybe I am! You know how much I love to cut loose."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She punctuates this by shimmying her shoulders, making you laugh again despite yourself. Leave it to Elfie's infectious energy to lift your spirits.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Well don't let me stop you. Give me a little preview of your sweet moves."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL2B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie's eyes light up with devilish glee. She wastes no time launching into an enthusiastic - and utterly uncoordinated - dance, complete with plenty of over-the-top lip syncing.</p> <p>You watch in amusement as she bops and twirls around the kitchen, not an ounce of self-consciousness to be found. For a few blessed minutes, it's like the chaos of the virus never happened. Just you and your goofy foster sister being silly together like any other morning before the madness.</p> <p>When Elfie finally winds down, she's flushed and breathless with exertion. A stray lock of hair is plastered to her forehead with a light sheen of sweat, and you're struck by how...pretty she looks in that moment.</p> <p>The thought catches you off guard, quickly shaken off as a product of the virus messing with your head. This is your little sister, for crying out loud. Get a grip.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL2C.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Flopping down at the kitchen table</action> <p>"Phew, I'm wiped! All that sweet dancin' really works up an appetite."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As if on cue, her stomach lets out a comically loud grumble. You both crack up, the awkward moment completely forgotten.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Well we can't have the dancing queen wasting away on us. How about I whip us up some pancakes?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie's whole face lights up at the suggestion. No matter how bizarre things get, pancakes always make her as happy as a kid on Christmas morning.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Yes please! Oh, can you make the chocolate chip ones?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL2D.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Already pulling out the ingredients</action> <p>"You know I've got you covered, sis. Why don't you set the table while I get these going?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie cheerfully hops up to follow your instructions. As you start mixing the batter, you sneak a glance at her bobbing around the kitchen, humming softly to herself. Despite the weirdness of the virus, moments like these remind you that your foster sister is still the same sweet, funny girl she's always been.</p> <p>For now, at least, that's enough to push the darker thoughts away. You take comfort in the familiar routine of pancake-making, determined to cling to any sense of normalcy in this strange new world. No matter what madness the virus brings, you'll get through it together - as siblings, as family.</p> <p>Those are the only thoughts you'll allow. To dwell on anything else would be to open a door that can never be unclosed.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL2'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id modVariable("add", "girl_stat", "elfie.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } </style> <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You watch Elfie's energetic dance, trying to ignore the inappropriate flashes of attraction towards your innocent foster sister.</p> <p>When she leans in close to "inspect" the pancake batter you're mixing, you nervously put some space between you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Hey, give me some room?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL2RA.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie seems oblivious to the reason for your discomfort, simply going back to set the table.</p> <p>With her pure naivety preventing any real lust from brewing, you're able to shut the door on those fleeting unnatural urges - at least for now.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p> <b>YOU NEED 10 LUST TO DO THIS SCENE</b> </p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL2R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The bathroom is steamy from your recent shower, the mirror fogged with condensation. You reach out to wipe away a clear patch, catching a glimpse of your reflection. Even after everything, it's still jarring to see the changes the virus has wrought - the slightly sharper angles of your jaw, the new definition to your muscles.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A noise from outside the bathroom makes you start. You grab a towel, hastily securing it around your waist as the door swings open.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Oh! Sorry, $characters.mc.name, I didn't realize you were still in--"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL3A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She freezes as she gets an eyeful of your bare chest, eyes going wide. For a beat, you're both rendered speechless, the tension in the humid air almost palpable.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie seems to recover first, giving a awkward cough as she averts her gaze. But you can't help but notice the way her cheeks have gone pink.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Gosh, I'm so sorry! I'll just come back later when you're, uh, decent."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She turns to go, but something makes you call out before you can think better of it.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Elfie, wait!"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She pauses, one hand on the door frame as she peers quizzically over her shoulder at you. You find yourself at a loss for what to say next, temporarily transfixed by the way a rogue bead of water trickles down the back of her neck from her tousled hair.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL3B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Pull it together, man. This is your foster sister, for crying out loud.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I, uh...did you need something? From the bathroom, I mean?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Brilliant conversational skills there, genius. You mentally kick yourself, but Elfie doesn't seem to notice your awkwardness, to your relief.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Oh! Right, yeah. I was just looking for my hairbrush. You haven't seen it floating around in here, have you?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You cast a glance around the small bathroom, eyes quickly landing on the purple handled brush sitting on the counter. You snatch it up, holding it out to Elfie.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL3C.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"You mean this one? It was just chillin' by the sink here."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie takes it from you, her fingers brushing yours an electrifying burst of contact. She doesn't seem to react, but you're abruptly hyper-aware of each place your still-damp skin meets the warm air.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Thanks, $characters.mc.name! I would have been so mad if I'd lost this one. It's my favorite for getting my hair all silky smooth."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>To demonstrate, she runs the brush through her tousled locks a few times. You try - and fail - not to notice the way the simple motion makes her modest tank top shift, offering a teasing glimpse of cleavage.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL3D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Get a grip, man. You berate yourself for the inappropriate thoughts, appalled at the direction your mind wants to wander when faced with your sweet foster sister's innocent actions. This virus really has twisted your brain six ways to Sunday.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You quickly look away, hoping Elfie doesn't catch you staring. From the corner of your eye, you see her shoot you a bemused look.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"You're acting kinda weird today, $characters.mc.name. The heat getting to you or something?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You force a chuckle, praying it doesn't sound as strained as it feels.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Heh, yeah, you know how it gets me sometimes. I'll be fine, Scout's honor."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie's eyes narrow slightly, like she's not quite buying your nonchalant act. But after a beat, she shrugs it off with a sunny smile. She than proceed to drink water.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAL3E.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Okie dokie, if you say so! I'll let you get back to...whatever guys do after showering, I guess."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She darts back out of the bathroom, leaving you alone with your swirling thoughts once more. You sag against the counter, exhaling a long breath as you rake a hand through your damp hair.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>That was too close. The virus is really messing with you if you're starting to look at Elfie - your pseudo little sister - as anything other than family. You need to get a grip on these wayward thoughts before they take you somewhere you can't come back from.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Gritting your teeth, you turn back to the still-foggy mirror. It's time to face the truth, staring yourself directly in the eye as the steam slowly fades.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The virus is changing you, in more ways than one. And if you're not careful, you could wind up losing yourself completely to its dark whispers.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL3'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id modVariable("add", "girl_stat", "elfie.lust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } </style> <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You're drying off after a shower when Elfie bursts in, not realizing you were still undressed. She freezes, eyes going wide at the sight of your bare chest.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>An awkward tension fills the steamy air as Elfie's cheeks redden. She tries to play it off casually, claiming she just needed her hairbrush.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You hand it to her, doing your best to ignore the jolt when your fingers brush. But you can't help noticing her tank top shifting to offer a tempting glimpse of cleavage as she runs the brush through her hair.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL3RA.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You quickly look away, berating yourself for the inappropriate thoughts about your innocent foster sister that the virus seems to provoke. When Elfie notices your strange behavior, you deflect - hoping she doesn't realize the real reason for your discomfort.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie leaves, bemused, as you're left struggling to control the unsettling new desires stirring within you. You can't let the virus cause you to lose yourself by sexualizing your pseudo-little sister.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For now, there is still insufficient lust to truly threaten crossing that line with Elfie. But you'll need to remain vigilant against the virus's darkening influence.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p> <b>YOU NEED 20 LUST TO DO THIS SCENE</b> </p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL3R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The living room is quiet, the rest of the shelter's occupants having already turned in for the night. You're stretched out on the couch, idly flipping through a ancient magazine you found in one of the supply crates. Reading has become one of your favorite ways to unwind and silence the intrusive thoughts the virus seems intent on bombarding you with.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You're so engrossed that you don't hear the soft footfalls until $characters.elfie.name plops down on the opposite end of the couch with a dramatic sigh.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"There you are! I was looking everywhere for you."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL4A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She kicks her feet up onto the couch, wiggling to get comfortable. In the process, her sleep shirt rides up, offering a teasing glimpse of toned thigh.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You make a concerted effort to keep your gaze averted, but you can't deny noticing the subtle curves and new definition to $characters.elfie.name's body - yet another insidious side effect of the virus.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Whatcha reading there? Please don't tell me it's another of those boring old survivalist manuals."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL4B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clearing your throat</action> <p>"Nah, it's just some random magazine I dug up. Gotta get my reading fix in somehow, even if it is a little...dated."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name snorts, clearly unimpressed as she leans over to try and get a better look at the magazine's contents. The motion causes her loose sleep shirt to gape, and you can't stop your eyes from instinctively dropping to the generous swell of her cleavage now on display.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Wrinkling her nose</action> <p>"Ugh, borrrring. Who even reads that stuff anymore? Why don't you ditch the grandpa literature and we can watch a movie instead?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL4C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You barely register her question, too distracted by the mesmerizing sight of her chest rising and falling with each breath. It would be so easy to let your eyes drift lower, to trace the tantalizing curves that her skimpy pajamas leave maddeningly visible.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>No! You give your head a mental slap, disgusted by where your thoughts are headed. This is your foster sister, for crying out loud. The virus really has done a number on your self-control if you're entertaining ideas like that.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Dragging your gaze upwards with Herculean effort, you force yourself to meet $characters.elfie.name's expectant stare. Her brow furrows slightly at your delayed reaction.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Uh, earth to $characters.mc.name? Should I just put something on, or...?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL4D.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Coughing awkwardly</action> <p>"Oh! Yeah, sorry $characters.elfie.name, I zoned out there for a sec. A movie sounds good - your pick."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She beams at being given the choice, immediately hopping up to peruse the pitiful collection of DVDs lining the dilapidated shelves. You can't tear your eyes away as she bends over, the thin fabric of her sleep shorts hugging every luscious curve of her backside.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Get. A. Grip. You scold yourself, even as your body traitorously reacts to the enticing view. Your mouth goes dry as $characters.elfie.name gives an exaggerated wiggle, apparently having spotted something that piques her interest.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Oh! I forgot we had this one! You're gonna love it, $characters.mc.name, it's a total classic!"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL4E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She sashays back over, clutching a battered DVD case as she reclaims her spot at the other end of the couch. She flicks through the options on the old TV, stretched out in a way that can't be unintentional. Has she noticed the effect she's having on you?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the opening credits begin to roll, $characters.elfie.name tucks her feet up under herself, somehow managing to hike her little sleep shirt even higher up her thighs. You can't help but let your gaze linger on those tantalizingly bare stretches of skin, imagining what it might feel like to run your hands along--</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"You're squirming an awful lot over there, $characters.mc.name," $characters.elfie.name's sly voice cuts through your wandering thoughts. "Need me to scoot over and give you some space?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She pats the couch cushion next to her, the invitation obvious...but also clearly innocent and sisterly, as always. Your filthy mind is just putting lurid spins on things.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clearing your throat roughly</action> <p>"Ah, no, I'm good over here, thanks. Just let me know when you want me to dim the lights or anything."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name shrugs languidly, settling in to watch the movie. As the opening scenes unfold, you finally manage to tear your gaze away from your beloved foster sister's tantalizing form.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL4F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But it's no use. Every giggle, every shift of her body...it all has you hyper-aware of her closeness, of the newfound and wholly unwelcome feelings simmering inside you. Feelings you know you can't act on, no matter how insistently the virus whispers in your ear otherwise.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>It's going to be a long night of fighting temptation. You just have to hope your willpower is enough to resist the darkness threatening to consume you.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL4'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>$characters.elfie.name joins you on the couch in skimpy sleepwear, inadvertently teasing with glimpses of her curves. You fight inappropriate lust towards your oblivious $characters.elfie.role.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>At one point, she innocently offers to scoot closer, unaware of the implications. But with $characters.elfie.name remaining naively unaware, there's insufficient mutual lust to escalate.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL4R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You're left battling the virus's dark temptations alone as she continues providing unintentional temptation.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 30 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL4R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SE1.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You knock softly on $characters.elfie.name's bedroom door, the familiar routine like an anchor to normalcy in the madness the virus has brought. When she calls for you to enter, you push the door open to find her lounging on the bed, idly flipping through a magazine.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name looks up with a bright smile that does funny things to your insides these days. You try to tamp down the reaction, reminding yourself yet again that this is your foster sister.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Hey there, $characters.mc.name! I was starting to think you'd forgotten about our nightly hangouts."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL5A.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Forcing a casual tone</action> <p>"And miss out on some prime-time teasing from my favorite brat? Never."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name sticks out her tongue playfully. You're struck by how perfectly pink and pouty it is, your mind inadvertently wandering to less-than-sisterly thoughts about what other uses that tongue might have.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Shoving aside the inappropriate musings, you settle onto the bed beside her. $characters.elfie.name immediately scoots closer until your sides are brushing. You tense at the contact, abruptly hyper-aware of each place your bodies are touching.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"So, what's new in the wild world of $characters.mc.name? Anything crazy happen while I was napping earlier?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL5B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You open your mouth to reply, but the words die in your throat as $characters.elfie.name stretches languidly. The motion causes her flimsy sleep tank to ride up, exposing a tantalizing strip of toned midriff. Copying her pose, $characters.elfie.name arches her back and your eyes are helplessly drawn to the way the stretchy fabric strains against her newly swollen curves.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>It's like the virus has put a laser focus on every dip, every swell of $characters.elfie.name's body that you never noticed before. You find yourself drinking in the details in a way that absolutely should not be happening between foster siblings.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Lost in your inappropriate observations, you completely miss whatever $characters.elfie.name has said. She giggles, giving your arm a playful swat to recapture your attention.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Earth to $characters.mc.name! You're a million miles away tonight. Where'd you go just now, mister?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL5C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You blink rapidly, struggling to tear your eyes away from the tempting view. Get it together, man! You can't let $characters.elfie.name catch you ogling her like...like a piece of meat.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Clearing your throat</action> <p>"Sorry, $characters.elfie.name. I guess I'm just out of it tonight. Didn't get the best sleep, you know?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Not exactly a lie. Between the endless fantasies and the aching arousal that seems permanently etched into your body lately, decent sleep has become depressingly elusive.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name shoots you an odd look like she's not quite buying the excuse. Brow furrowing slightly, she scrutinizes your expression before realization seems to dawn in her eyes. A flush instantly stains her cheeks, and she abruptly shifts away, tugging down her rucked up shirt.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Not quite meeting your eyes</action> <p>"Y-yeah, I get what you mean about not sleeping great. This virus has been causing me some...weird dreams too."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL5D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You realize with a start what she must be implying - that your own case of insomnia is courtesy of the same kinds of provocative night visions she's been having. The thought of pure, innocent $characters.elfie.name being beset with unsubtly naughty fantasies makes your mouth go dry with a spike of heat.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Clearing your throat again, you scoot away slightly, putting a sliver of space between your bodies in a lame attempt to dull the thickness of tension that's descended over the room. Despite the move, you swear you can still feel the warmth radiating off $characters.elfie.name's lithe form beside you.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Seeming to recover her usual cheer</action> <p>"So! Looks like we could both use a distraction tonight, right? Why don't you put something on the old TV and we can just veg for a while?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL5E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Nodding jerkily, you reach for the remote with hands that definitely aren't shaking. As you flip through the limited entertainment options, you can feel $characters.elfie.name's eyes boring into you with scrutinizing intensity. Does she realize the effect she's having?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>By the time you've landed on a cheesy old romcom, you feel like you're suffocating under the weight of the charged atmosphere in $characters.elfie.name's small bedroom. When she sidles up next to you again, you can smell her shampoo, can practically taste the addictive sweetness of her skin in the air between you.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL5F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a long stretch, you're both silent. The mindless dialogue from the movie washes over you, not registering in the slightest as you fight a losing battle against the lurid fantasies bombarding your mind's eye. You can't stop picturing $characters.elfie.name splayed out beside you, sleep shirt rucked up and lips parted in a breathless moan as you--</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>No! You viciously strangle that traitorous line of thought, hating yourself for the vivid images your mind keeps insisting on conjuring. This demonic virus will be the death of you, you're sure of it.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Just when you think you might actually burst from the strain of restraint, $characters.elfie.name thankfully breaks the tension with a noisy yawn and exaggerated stretch.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Well, this has been fun as always, but I should probably hit the hay. You know how grumpy I get without my full eight hours of beauty sleep."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL5G.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She rises fluidly from the bed, treating you to an endless view of toned legs as she sashays across the room. You firmly keep your gaze trained forward, jaw clenched against the tide of arousal her casual display provokes.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name pauses at the door, glancing back at you with an almost curious look in her eyes, like she's searching for something in your expression. Whatever she finds seems to satisfy her, as she gives a little shrug before ducking out into the hallway.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL5'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1SE"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SE1.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>During your nightly hangout, $characters.elfie.name's skimpy outfit torments you with inappropriate lust towards your foster sister. When she mentions having "weird dreams" too, you realize she's experiencing arousal from the virus as well.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>However, $characters.elfie.name seems unaware of how intensely tempted you are by her body's changes. As she stretches and moves around you innocently, there is insufficient mutual awareness and lust between you to escalate beyond the charged tension.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL5R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Despite your urges, $characters.elfie.name's naivety prevents anything further from occurring. You're left battling your desires alone as she remains obliviously enticing.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 50 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL5R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SE"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SB2.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The hallway bathroom is steamy from the shower running as you make your way down the corridor, towel slung low around your hips. You're just passing $characters.elfie.name's room when her door abruptly swings open and she comes barreling out, clearly in a rush.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>"Whoa there!" You instinctively throw out an arm to stop her hurried progress, the two of you nearly colliding. The sudden proximity leaves you both frozen, barely a hair's breadth separating your bodies.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name blinks up at you with wide eyes, seeming suddenly cognizant of just how undressed you both are - you in just a towel, her in a tiny sleep cami and short shorts that leave little to the imagination. A charged hush descends over the cramped hallway as your surroundings seem to fade away, the entire world narrowing to this singular point of contact.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL6A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't help but rake your eyes roguishly over the tempting expanse of bare skin on display - the creamy swell of $characters.elfie.name's thighs, the tantalizing peek of cleavage from her skimpy top - before dragging your heated gaze back up to meet her own. $characters.elfie.name's cheeks stain pink, but she makes no move to extricate herself from your embrace, almost leaning into you in a way that sends your pulse rocketing.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The air itself seems to thicken with undeniable tension, made all the more charged by your state of daring undress. You can feel the warmth of $characters.elfie.name's lithe body where it's pressed against your bare chest, smell the addictive sweetness of her shampoo. It would be so easy to let yourself get pulled into the rip current of temptation, to finally give in to the molten intimacy the virus keeps trying to stoke between you.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But just as you feel your restraint slipping, $characters.elfie.name seems to recover her senses in a rush. She abruptly tears herself from your arms, putting a few feet of distance between your bodies. The spell breaks, leaving you both somewhat dazed from the sizzling intensity of the interlude.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL6B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name can't quite meet your eyes as she fiddles nervously with the hem of her tiny sleep shorts. There's an adorable furrow between her brows, like she's trying to puzzle something out - or wrestling with the same tangled impulses you've been battling since that insidious virus took root.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>After a protracted moment, she seems to shake herself back to the present with a jerky nod. Lifting her chin to offer you a tight smile, the unsettled quality doesn't quite manage to leave her eyes.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>Well, uh...I should get going if I don't want to be late. Try not to use up all the hot water, okay? Some of us need to get ready too, you know.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL6C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her teasing attempt at their typical banter falls a bit flat, belied by the lingering heaviness that still clings to the air. $characters.elfie.name doesn't wait for your response before brushing past you, the whisper of her bare arm against your skin raising goosebumps despite the humidity.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You turn to watch her rapid retreat, the gentle sway of her hips in those tiny shorts rendering you momentarily immobile. By the time you shake yourself loose, $characters.elfie.name has already disappeared around the corner on her way to the bathroom.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Left alone, you sag back against the wall with a harsh exhalation. This blasted virus really isn't playing fair if it's going to keep blindsiding you with moments like that - sizzling flashes of temptation and forbidden yearning so white-hot, you're surprised you don't spontaneously combust.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL6D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>How much longer can you keep fighting the virus' agenda before something has to give? Each new charged encounter with sweet, tempting $characters.elfie.name feels like it's chipping away at your restraint, bit by bit.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You glance down to where your towel is tenting obscenely, a vivid souvenir from the enrapturing intimacy of the moment. At least your body seems to have already made its opinion on the matter known.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Squeezing your eyes shut, you tip your head back against the unforgiving wall and simply breathe through the boiling lust thrumming through your veins. Get a grip, you berate yourself sternly. This is the virus talking, not you. Not really.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL6E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>...Right?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a guttural exhalation, you push off from the wall and turn on your heel, heading back to your room before you can dwell on that terrifying question any longer. If you're not careful, this demonic plague is bound to unhinge you completely before too long.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You refuse to consider the alternative - that maybe some dark, repressed part of you wouldn't mind that loss of sanity quite so much as it probably should.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL6'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.lust", 5); nextPartOfDay(); SugarCube.Engine.play("1SB"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SB2.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>In the hallway, you nearly collide with $characters.elfie.name, leaving you both frozen mere inches apart - you in just a towel, her in skimpy sleepwear. Tension thickens as you drink in her tempting exposed curves.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a heated moment, it would be so easy to give in to the intimacy the virus wants to stoke between you. But before you can act on the impulse, $characters.elfie.name seems to recover her senses.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She abruptly puts distance between your bodies, unable to meet your eyes. There's a hint she's wrestling with urges too, but remains unaware of how intensely tempted you are.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>$characters.elfie.name tries to keep things casual with banter about the shower before hurrying away, leaving you alone dealing with immense unfulfilled lust.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAL6R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Though the charged moment was rife with potential, $characters.elfie.name's obliviousness prevented any actual escalation from occurring. The lack of mutual lustful awareness and intention forces you to refuse escalating further...for now.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 50 LUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAL6R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SB"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SR.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You step into the living room, feeling a sense of warmth and comfort wash over you. The shelter you've built has truly transformed this space into a cozy haven, a stark contrast to the harsh realities of the world outside. Elfie is curled up on the couch, a dreamy expression on her face as she flips through one of her beloved fantasy novels.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Hey there, bookworm. Mind if I join you?"</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Looking up with a radiant smile</action> <p>"Of course not, $characters.mc.name! Come, sit with me. I was just about to start a new chapter."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You settle down beside her, the cushions sinking slightly under your weight. Elfie tucks her feet under her and leans against you, her head resting on your shoulder. The casual intimacy of the moment feels natural, a testament to the bond you share.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"It's good to see you so relaxed. I know it's been a tough journey getting here."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Sighing contentedly</action> <p>"It really has, but moments like these make it all worth it. I feel like I can finally breathe again, you know? Like I'm not just surviving, but actually living."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod, understanding the sentiment all too well. The weight of responsibility, of keeping your family safe, has been a constant presence in your mind.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I'm glad. You deserve to feel happy and secure, Elfie. We all do."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Tilting her head to look at you</action> <p>"And it's all thanks to you, $characters.mc.name. I don't know what we would have done without you."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her words fill you with a mixture of pride and humility. You've stepped up in ways you never thought possible, driven by an unwavering desire to protect those you love.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I'm just doing what needs to be done. We're in this together, always."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie smiles, her eyes shimmering with an emotion you can't quite place. She snuggles closer, her slender form fitting perfectly against your side.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1E.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Together. I like the sound of that."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A comfortable silence settles over you, broken only by the occasional rustle of turning pages. You find yourself watching Elfie as she reads, captivated by the way her expressions shift with the story - a small frown of concentration, a quirk of her lips at a particularly amusing passage.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"What's got you so enthralled? Let me guess, daring sword fights and magical quests?"</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Giggling</action> <p>"Close! It's a tale of forbidden love, of two people from different worlds who find solace in each other despite the odds."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1F.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's a wistful note in her voice, a longing that tugs at your heartstrings. You wonder if she sees parallels between the story and your own situation, two souls navigating an uncertain future together.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Sounds like a real page-turner. Maybe you could read it to me sometime?"</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Eyes lighting up</action> <p>"I'd love that! It could be our little tradition, a way to escape reality for a bit."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You grin, already looking forward to the prospect of losing yourself in a fantastical world with Elfie as your guide. These shared moments of peace are precious, a reminder of what you're fighting for.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1G.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As if on cue, the grumble of your stomach interrupts the tranquil atmosphere. Elfie laughs, poking your side playfully.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Sounds like someone's ready for an adventure of the culinary kind."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Chuckling</action> <p>"Guilty as charged. I should probably see about rustling up some grub for us."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Untangling herself from you</action> <p>"Need any help?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1H.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Nah, I got this. You just keep exploring those fictional worlds of yours. I'll call you when it's ready." </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a parting smile, you rise from the couch and make your way towards the kitchen, your steps lighter than they've been in weeks.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SR"); //next passage id modVariable("add", "girl_stat", "elfie.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SR.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you enter the living room, you spot Elfie curled up on the couch, engrossed in one of her favorite fantasy novels. Her eyes sparkle with excitement as she turns the pages, lost in the magical world before her.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Giggling softly</action> <inner>Oh, I wish I could be as brave as the heroine in this story! Maybe one day I'll have my own amazing adventures.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>You approach Elfie, hoping to engage her in a heartfelt conversation and strengthen the bond between you. However, as you draw near, you sense that she's not quite ready to open up completely. Your relationship, while warm and affectionate, still requires more time and trust to reach the level of depth you desire.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Glancing up from her book</action> <p>"Oh, hi $characters.mc.name! I'm just reading this incredible story. Want to hear about it?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/EAT1R1.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>You smile and nod, realizing that now may not be the best time for the intimate discussion you had in mind. Elfie's enthusiasm for her book and the innocence in her eyes remind you that your connection is still growing, and rushing it could do more harm than good.</p></div> </div><!-- Narrator --> <div class="DIAS_message centered "> <div class="DIAS_text"> <p>Sitting down beside her, you listen attentively as Elfie recounts the tale, her face alive with joy. You cherish this moment of simple companionship, knowing that with patience and understanding, your bond will deepen naturally over time.</p></div> </div><!-- Trust requirement --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><strong>YOU NEED 1 TRUST WITH ELFIE TO DO THIS SCENE</strong></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT1R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SR"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1R.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The gentle burble of the stream provides a soothing backdrop as you make your way down the worn path toward the water's edge. It's become one of your favorite spots to steal away for moments of peace - the lush scenery, the crisp breeze carrying hints of wildflowers. You know you'll find Elfie here, as she's wont to do whenever the weight of the world grows too heavy.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Sure enough, you spot her slender form perched on a large, moss-covered rock jutting out over the slow-moving current. She has her knees tucked up with a worn book cradled in her lap, but her gaze is fixated on the peaceful flow of the river rather than the pages.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT2A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's something achingly serene about the picture she makes, yet also tinged with melancholy you wish you could erase. The virus and its chaos have weighed on Elfie in ways you're just now beginning to fully comprehend.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Resolving not to disturb the tranquil moment just yet, you settle down on the grassy bank to simply watch over her. The afternoon sunlight filters through the trees to kiss Elfie's fair skin with a warm glow, catching on the golden strands of her hair like a halo. In this light, she looks almost ethereal - fragile and beautiful in a way that makes your heart clench.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But you know intimately that she's tougher than she seems, imbued with the same core of unshakable strength that has carried your family through hell and back again. Your fierce protectiveness toward Elfie only grows stronger by the day.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT2B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You're not sure how long you sit there simply drinking in the sight of her, but eventually Elfie seems to sense your presence. Turning, she offers you a melancholy smile that doesn't quite meet her soulful eyes.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"I had a feeling you'd find me out here eventually. Needed to escape the four walls for a little while, you know?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod, pushing yourself to your feet to close the distance between you. Elfie watches your approach with that same inscrutable look, knees still tucked protectively to her chest in an uncharacteristically vulnerable pose.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When you settle on the large rock beside her, she doesn't pull away. If anything, she seems to instinctively lean into your reassuring solidity, surrendering some of the weight she's clearly been carrying alone.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT2C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a long beat, you simply sit in companionable silence, letting the tranquil ambience of the river and surrounding forest work its calming magic. Eventually, you feel some of the tension bleeding out of Elfie's posture where your bodies are pressed together from shoulder to calf.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"You know you can talk to me about anything that's on your mind, right Elfie? I hate seeing that troubled look on your face."</p> </div> </div><!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"I've just been thinking a lot lately about how much has changed since...well, everything. Our lives, our family, the world itself - it all feels so unrecognizable sometimes. Like I'm trapped in a fever dream that I can't wake up from no matter how hard I try."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's a telling hitch in her words, quickly mastered with an indrawn breath. But you can hear the unshed tears she's forcing down with an almost physical effort.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT2D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Shifting closer until your thighs are pressed flush, you reach out to gently tuck an errant strand of silky hair behind Elfie's ear. She leans into the tender caress like a sunflower seeking the brilliance of dawn.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I know it seems impossibly overwhelming at times, but we're still us, Elfie. You and me, we're still the same two kids who used to dream of adventures and magic and exploring great big worlds together - just...on a slightly bigger scale than we'd bargained for."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>That draws a tremulous chuckle from her lips, wringing a matching grin from you. Lifting your arm in invitation, you pull Elfie snugly against your side until she's cradled in the shelter of your embrace. She comes willingly, curling into your reassuring bulk with a shuddering exhale and burying her face in the curve of your neck.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Muffled</action> <p>"I don't know what I'd do without you here, $characters.mc.name. You make me feel...I don't know, safe. Centered. Like as long as I have you by my side, maybe I can get through anything this crazy new world throws at me after all."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT2E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You murmur a vehement agreement against her hair, giving her lithe body a comforting squeeze. Your heart swells with protective devotion for this remarkable woman tucked against you - the life you'd sacrifice anything to preserve, no matter what forces try to tear you apart.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a long while, you simply hold her close, feeling the tension slowly bleed out of her body as she sinks bonelessly into your solid strength. There are no more words, nothing but the rhythmic cadence of your twin breaths mingling with nature's song.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When Elfie finally stirs again, she nuzzles her face deeper into the juncture of your shoulder with a contented sigh. You feel her smile bloom against your skin, lighting you up from the inside with its brilliant warmth.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT2F.webp" class="DIAS_image clickable-media"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Thank you for the reality check, $characters.mc.name. You're right - we've still got each other to lean on out here in the wilderness. And as long as we're together, maybe this crazy world doesn't seem quite so bleak and hopeless after all."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>No matter what fresh madness this new world may unleash going forward, you'll weather the storm as you have every other - side-by-side, hand-in-hand, your unbreakable tether keeping each other grounded and centered. Elfie is your lodestar, the key to finding your way back from any darkness.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You just hope you can be that for her too when the tides inevitably rise to test your bond again soon enough.</p> </div> </div><!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT2'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1R"); //next passage id modVariable("add", "girl_stat", "elfie.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1R.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Finding Elfie melancholic by the stream, you comfort her with a tender embrace as she voices feeling lost.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a moment, she melts against you seeking solace. However, there lacks enough established trust and romance between you to fully give in to the intimate moment.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie thanks you, but remains slightly guarded, unwilling to completely surrender her burdens or deepen the intimacy further yet.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT2RA.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The emotional vulnerability and bond needed to escalate is still lacking, forcing you to respect the limits of your platonic relationship for now.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 10 TRUST TO DO THIS SCENE</b></p> </div> </div><!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT2R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1R"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The kitchen is redolent with the homey aromas of simmering spices and fresh-baked bread as you make your way inside from the fading sun's dying rays. You pause in the doorway for a moment, letting the cozy ambiance settle over you like a warm blanket chasing away the evening chill.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie is at the worn butcher block island in the center of the room, humming a cheery tune under her breath as she works. The simple domesticity of the scene makes your heart swell. For all the chaos and hardship you've both endured, moments like these are a poignant reminder that you can still carve out fragile slices of normal life, no matter what.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT3A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As if sensing your presence, Elfie glances up with a radiant smile that never fails to light up her entire face. There's a smudge of flour dusting her cheek that only makes the picture she presents feel more irresistibly wholesome.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"There you are! I was starting to wonder if I'd have to send out a search party."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Despite the teasing lilt to her voice, her eyes roam over you with a tendril of lingering concern, as if reassuring herself you've returned to her whole and hale. You don't miss the way her shoulders visibly lose some of their tension once her subtle inspection is complete.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Moving fully into the kitchen, you make a show of dramatically sniffing the air with an appreciative groan. Elfie watches your antics with sparkling amusement, the tips of her ears pinking adorably at the sound of appreciation.</p> </div> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"Please tell me those heavenly scents mean what I think they do. I don't think I could handle the disappointment if you've just been torturing me with leftovers or something."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie laughs, a bright tinkling sound that never fails to lift your spirits. Turning back to the simmering pots on the ancient oven's burners, she attends to them with an easy confidence and surety of movement that hints she's feeling more like her usual self again.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT3B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You're immensely grateful for that after the bouts of melancholy you'd seen weighing her down so heavily earlier.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Well, I figured we could both use a dose of comfort food after the week we've had. I don't think anything hits the spot quite like a classic chicken and dumplings, do you?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your stomach gives a vehement grumble of agreement, pulling a fresh peal of laughter from Elfie's lips. Warmth blooms in your chest from the simple joy of seeing her look so utterly at peace and content again, without a single lingering shadow in those expressive eyes.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As if sensing the direction of your thoughts, Elfie locks eyes with you over the island separating you. In that electric moment, the cozy kitchen seems to fade into insignificance - peripherals dropping away until the entire world has contracted to this single, shared point of connection.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT3C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie doesn't look away, holding your ardent gaze with an inscrutable depth shimmering in her own. There are no words exchanged, yet you can read the silent message loud and clear in the way her features soften with profound gratitude and tenderness.</p> <p>Thank you.</p> <p>For always being there for me, the way you are and always have been from the very start. My shelter from the storm, my port in any chaos.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT3D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You hold that electrifying look for another suspended beat before Elfie seems to shake herself, as if from a trance. She ducks her head in a move you've come to recognize as her trying to stave off the rising wave of powerful emotions.</p> <p>When she glances up again, she has herself back under control, favoring you with a tremulous but genuinely happy smile as she jerks her chin toward the battered old kitchen table.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Why don't you grab us a couple of drinks and pull up a stool? Dinner should be ready in just a few more minutes and this milk won't last me long."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT3E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Nodding, you move to comply with her gentle directive. As you root through the cooler for a couple of frosty beers, you sneak sidelong looks at Elfie's swaying form as she tends to the simmering pots. She seems more at peace than you've seen her in a long while, the contentment radiating from her in palpable waves. It's a beautiful sight that you could happily lose yourself in. </p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For tonight, at least, the concerns and traumas of your grim new reality have been held at bay. Here in this warm little haven, it's just the two of you sharing the simplest of life's pleasures and reveling in each other's steadfast company. </p> </div> </div><!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT3'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id modVariable("add", "girl_stat", "elfie.trust", 5); nextPartOfDay(); } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } </style> <<nobr>> <<script>>playAudio("music", "cherieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>It sounds like an intimate, tender moment between you and Elfie in the kitchen as she cooks a comforting home-cooked meal. There are lingering looks and an unspoken appreciation for the solace you provide each other amidst the chaos.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>However, the scene doesn't escalate beyond that emotionally vulnerable connection. While there is a deep bond and care between you, there isn't quite enough established trust, romance or mutual intention to progress the intimacy further physically or romantically in this moment.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie seems content keeping things familial, drawing comfort from your steady presence as she finds peace in basic domestic rituals. You respect those boundaries, appreciating just being able to provide her emotional solace after the difficulties you've faced.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT3RA.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For now, the moment remains a tender one borne from your powerful platonic connection, not meant to evolve into anything more intimate without that mutual romantic intention first being clearer between you both.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 20 TRUST TO DO THIS SCENE</b></p> </div> </div><!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT3R'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1RS.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The musty scent of old wood and stored supplies greets you as you pull open the weathered door to the small shed out back. A few errant sunbeams filter through the high windows, casting streaks of golden light over the organized clutter filling the cramped space.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie is standing amid the chaos, back to you as she attends to some task or another with her typical focused intensity. You lean against the door frame for a moment, drinking in the peace of simply observing her at her most unguarded.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Even from behind, she radiates an indomitable spirit and quiet strength you've always found inspiring. The gentle sway of her hips as she moves and the gunfire cadence of her soft humming under her breath lend an almost balletic grace to the otherwise mundane chore.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>After a few heartbeats, Elfie seems to sense your presence. She turns with a bright smile already in place like a well-worn mantle she can slip on without conscious thought. The expression is open and content in a way you haven't seen from her in far too long lately.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"There you are! I was wondering if I'd have to send out a search party."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT4A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You huff an amused snort at her favored teasing rejoinder, finally pushing off from the door frame to venture further inside the cluttered space. Elfie's eyes dance with fondness over your familiar antics, shoulders losing the last shreds of tension now that you're here with her.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't deny the spark of masculine pride that simple, unguarded reaction kindles in your chest. To know you have that grounding effect on her - to be the steadying force that lets Elfie feel safe enough to fully relax - well, it's a heady feeling.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>And to be just as undeniably honest with yourself, it's a big part of why you've stuck around through all the madness instead of giving in to the voice telling you to cut and run before things got too complicated. Elfie keeps you centered too, tethered to what really matters even when your foothold feels precarious.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Reaching her side, you scan the haphazard organization of bottles and gardening tools cluttering the workbenches with a raised brow.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Up to your secret experiments again, Professor? Should I be sleeping with one eye open, just in case?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie aims a gentle swat at your arm that you pretend to exaggerate dodging with a put-upon groan. She rolls her eyes at the melodramatics, though you don't miss the way the corners of her mouth twitch with suppressed amusement.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Oh hush, you big baby. I'm just working on a fresh batch of those homemade soaps you like so much, since we're nearly out of the last ones."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT4B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>That makes you pause, really taking in the collection of mismatched jars and oils lining the battered counter space in front of her. Sure enough, you recognize the familiar homespun setup that Elfie has turned into her own special brand of therapy over these last couple of topsy-turvy months.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A wave of fondness washes over you at the realization she's been laboring over this latest project with you specifically in mind. It's such a simple, understated gesture, yet one that speaks volumes about the devotion underpinning your relationship.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Propping your hip against the counter, you reach out to snag one of the glass jars, bringing it to your nose for an experimental sniff. The clean, earthy aroma of cedarwood and sage fills your senses, somehow managing to evoke a sense of familiarity and comfort despite the association being so new.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Hmm, not bad. Though I've gotta say, I'm a little hurt you didn't go for my signature scent - Swamp Creature's Armpit."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie's giggles fill the cozy space like liquid silver as she aims another ineffectual swat your way, radiating pure, unfiltered happiness. You find yourself grinning in response, equal parts enamored with her infectious joy and proud to be the one coaxing it free so effortlessly.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When her laughter finally subsides into breathless pants, she fixes you with a look that somehow manages to be exasperated and utterly adoring all at once. Leaning into you, she gently shoulder-bumps you with a put-upon sigh that holds no real heat.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"I don't know why I put up with you and your smart mouth, you know that?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT4C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You slide an arm around her slender shoulders without conscious thought, tugging her in snug against your side. Elfie comes easily, as if your embraces are simply the most natural thing in the world - two Sun-warmed trees leaning trustingly into each other's strength.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"It's because you know I'd be utterly lost without you keeping me in line, Elfie girl. This whole place would've fallen into complete chaos about five seconds after I tried to go it alone."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She hums a contented sort of agreement, her cheek pillowing against your chest as she settles into your sheltering bulk. For a timeless stretch, you simply hold her close in the peaceful quiet, savoring the simple intimacy of the moment.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>This is what you're fighting for, you realize with a bone-deep pang of conviction. Not just survival, but preserved pockets of tranquility and light in which to revel like this. Times of connection and unguarded affection to remind you both of your unwavering partnership, no matter how grim the world gets.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When Elfie finally stirs again, she tilts her head back to catch your eye with a look that makes your breath snare in your lungs. Her expression is softer than you think you've ever seen - lush lips curved in a trembling smile, those expressive eyes shimmering with a potent blend of tenderness, gratitude, and something deeper, richer.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT4D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The world outside the haven of this tiny shed falls away completely, leaving only the silent promises arcing like lightning between your unwavering locked gazes. The rest will keep - the struggles, the darkness always lurking at the periphery, the uncertainty of the path forward.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For tonight, for this infinitely fragile slice of existence, there is only you and Elfie and the blazing tether binding your souls as one.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>And really, with that sort of unbreakable lifeline secured, is there anything on earth that could ever prove too monumental to overcome?</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT4'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1RS"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1RS.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>In the intimate moment embracing in the cozy shed, the emotional connection and romantic tension between you and $characters.elfie.name is palpable. However, despite the building chemistry, there lacks the requisite mutual desire and intention to escalate things further physically.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You sense $characters.elfie.name is not quite ready to consummate that simmering passion. And without her being fully willing and vulnerable, you refuse to cross that line, instead appreciating the profound emotional bond in this tender interlude.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT4R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The moment reaches a natural plateau, neither of you pushing to escalate the intimacy further without both being prepared to embrace those heightened romantic implications together.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 30 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT4R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1RS"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SE1.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>A hush has fallen over the shelter as you make your way down the dimly lit hallway, the others having already turned in for the night. The door to $characters.elfie.name's room is ajar, a soft glow spilling through the crack and beckoning you forward like a moth to a flame.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You knew she would still be awake at this hour - she always has been something of a night owl, especially when her thoughts kept her too restless and preoccupied for easy sleep. Recent weeks have only exacerbated that insomnia, you know.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Pushing the door inward, you're greeted by the familiar sights and smells of $characters.elfie.name's sanctuary. The cozy space is just as you remember from the nights you used to sneak in here as kids, seeking respite in lambent cocoon of fairy lights and well-worn books your $characters.elfie.role had meticulously cultivated.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>These days, there's a decidedly more grown-up atmosphere imbued into the room's energy. The flicker of the candles scattered about casts a warm, sensual glow over the rumpled bedding and plush pillows strewn invitingly about. $characters.elfie.name herself is seated amidst the cozy chaos, huddled beneath a soft throw with a battered paperback cradled in her lap.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She looks up as you enter, features suffusing with unguarded delight before smoothing into a more composed expression. Still, you don't miss the way her shoulders lose their tense line at the sight of you, or the small, secret smile that curves her lips in unconscious welcome.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"I was wondering when you'd make your nightly sojourn over here. Let me guess...couldn't sleep again?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's no judgment in her tone, only tender understanding and the same bone-deep empathy that has long anchored your relationship. This room - this space that is so quintessentially $characters.elfie.name in every way - has become a place of solace for you both, no matter what external turmoils try to crowd in.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You don't bother denying her intuitive assessment, giving a lame shrug in answer. $characters.elfie.name watches you with those same gently knowing eyes, waiting patiently as you shuffle further inside as if drawn by an unshakable tether.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Only once you've settled yourself onto the foot of the bed, back against the sturdy wooden frame, does $characters.elfie.name speak again. Her voice has taken on a breathier quality, barely above a whisper as if reluctant to disturb the tranquil cocoon you've entered into.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"I get it, you know? Some nights...some nights the weight of it all gets so heavy that sleep feels like a distant dream in itself."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod jerkily, not trusting your voice just yet. The atmosphere surrounding you both is heavy, yet gloriously serene all at once - a heady suspended moment out of time where the grim realities you face can be shut out, if only for a little while.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Shifting slightly, $characters.elfie.name lets her book tumble from her fingers to join the plush jumble of blankets between you. Fresh candle flames send flickering patterns dancing over the exposed curves of her bare legs, and you feel your breath snag at the reminder of just how appealing and feminine she's grown over these last couple of turbulent years.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When she lifts her gaze to meet yours again, her whiskey eyes are hooded and luminous, gleaming like chips of pale topaz in the intimate lighting. There's a new weight to the look, something heavy and molten that you feel like a physical caress ghosting over your hypersensitive skin.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Do you ever get tired of fighting so hard, $characters.mc.name? Of having to be the strong one holding all our lives together through sheer force of will alone?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The husked murmur raises goosebumps along your nape and forearms, stoking a slow-burning simmer low in your belly. You're painfully aware of the thin shorts and tank top $characters.elfie.name's wearing - sensual wisps of fabric that do more to highlight her feminine curves then conceal them.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>When you remain frozen beneath the smoldering weight of her gaze, $characters.elfie.name seems to take your silence as permission to continue. She sweeps her tongue slowly over those plump, alluring lips, and you can't quite stifle your full-body shudder in response to such an overtly provocative gesture.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Some nights...some nights I think about how nice it would be to simply let go for once. To allow myself to sink into oblivion".</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her words are like physical trails of fire licking across your exposed skin, branding you with their heated implications. The air between you has thickened to a viscous haze of yearning, thrumming with a taut, undeniable tension you've only ever felt hints of until now.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>There's no mistaking the direction this moment is headed, surging toward that line you've danced so precariously along for months now. With each heated inhale, you can feel your restraint slipping another hairsbreadth, unraveling in the wake of $characters.elfie.name's seductive presence.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5G.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You don't think you could tear your eyes from her beguiling form even if the world itself depended upon it right now. Her every movement, each nuanced shift and undulation of those provocative curves has you transfixed, utterly captured by some primal snare you never saw coming.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Just when you think your composure is mere moments from shattering completely, $characters.elfie.name seems to temper herself in an instant. Drawing a steadying breath, she offers you that same brilliant, trusting smile that never fails to put the world in perspective.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5H.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But now, there's an added depth there too - a glimpse into how utterly attuned she's become to this fledgling connection deepening between you, electric and inescapable as the rising sun itself.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT5'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1SE"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SE1.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>In $characters.elfie.name's bedroom, the atmosphere thrums with undeniable romantic tension. Her alluring presence and heated words seem to be building towards an intimate escalation you've been dancing around.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>However, despite the palpable chemistry, there still lacks the mutual intention and vulnerability to fully consummate that passion in this moment.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>So while $characters.elfie.name's seductive movements and the revealing glimpses of her curves stoke a burning desire in you, you refuse to escalate further without her being completely ready and willing.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT5R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The heated moment reaches a plateau, the profound romantic connection left simmering but not boiling over into heightened intimacy until you're both prepared to embrace those implications together.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 40 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT5R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SE"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The living room glows warmly from the crackling fire as you wander in from another supply run. $characters.elfie.name is curled up on the couch, nose buried in one of her beloved fantasy novels as usual. She looks up with a bright smile as you enter.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"There you are! I was starting to wonder if I'd have to send out a search party."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT6A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You huff an amused snort, sinking onto the opposite end of the couch with an exaggerated groan. $characters.elfie.name immediately stretches her legs out to drape over your lap.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Squeezing her ankle affectionately</action> <p>"As if a few roving ravener packs could keep me from my nightly dose of little sister dramatics."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT6B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name sticks her tongue out at you, but snuggles more fully into the cozy warmth you provide. A comfortable silence lapses, broken only by the crackle of flames and the occasional turning of a page.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>These quiet interludes with $characters.elfie.name have become a cherished tradition over the past few unsteady years. No matter how bleak the day, you can always count on finding tranquility and familiarity here.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Flicking you with her toe</action> <p>"So? Are you going to give me all the juicy stories or do I have to spend another night living vicariously through my books instead?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT6C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You feign a wounded gasp, hand clutching your chest dramatically.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"You wound me, sister dear! Since when did my harrowing tales of survival become negotiable entertainment?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name dissolves into giggles, trying and failing to maintain a properly unimpressed expression. Grinning, you launch into an over-the-top reenactment of the day's highlights, playing every ridiculous beat for maximum effect.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT6D.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name chimes in with perfectly-timed gasps and groans, the two of you quickly collapsing into helpless laughter more than once. This sort of affectionate teasing and closeness is so quintessentially you - siblings united through the chaos.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As your dramatic tale finally winds down, $characters.elfie.name shifts to pillow her head in your lap, gazing up at you with those warm whiskey eyes.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"I missed you out there today, you know? I always worry when you're risking your life without me to watch your back."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT6E.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stroke her hair with a gentleness born of years of adoring familiarity. There's a look of profound gratitude and fondness shining in her eyes that never fails to humble you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"You know I'm always gonna come back to my favorite little book buddy, don't you? We're a team, remember? Partners keeping each other going through the insanity."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.elfie.name smiles, radiant and trusting. She finds your hand and laces your fingers together in a silent reaffirmation of the loving bond you've forged through adversity.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT6F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>For a long while, you simply bask in the tranquil quiet together, grounding each other with gestures and familiar affections. When $characters.elfie.name's breathing finally begins to even out into the rhythms of slumber, you brush a tender kiss to her brow.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>No matter what fresh terrors the new world may bring, moments like these will always be your lodestar - your way of finding your way home to the eye of the storm again.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT6'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.trust", 5); nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SR.webp'); } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>In the living room's cozy warmth, you and $characters.elfie.name settle into your cherished nightly tradition of playful banter and affectionate teasing like siblings united through chaos.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As $characters.elfie.name rests her head in your lap, gazing up at you with profound gratitude, the depth of your loving familial connection is palpable. You reassure her you'll always come back to your partner watching each other's backs.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Though the moment is ripe with tenderness, vulnerability and ritual intimacy, it remains entirely platonic and familial in nature. Neither of you seeks to escalate or sexualize the profound bond you've forged.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/EAT6R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You simply bask in the tranquil solace of each other's company, grounding one another through familiar affections and gestures. When $characters.elfie.name drifts to sleep, you place a tender familial kiss on her brow.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 50 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('EAT6R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("1SR"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SE.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You softly knock on Elfie's bedroom door and hear a cheerful "Come in!" from inside. As you enter, you find her sitting cross-legged on her bed, surrounded by her favorite fantasy books and manga. She looks up at you with a bright smile, her pale eyes sparkling with joy.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Sitting on the edge of her bed</action> <p>"Hey, Elfie. How's my favorite $characters.elfie.role doing?"</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Giggling</action> <p>"I'm your only $characters.elfie.role, silly! But I'm doing great. Just getting lost in some amazing stories."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/ECA1A.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Picking up one of the books</action> <p>"That's awesome. You always did have the best taste in fiction."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Beaming with pride</action> <p>"Aw, thanks! So, what brings you to my little corner of the world?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Putting the book down and fidgeting slightly</action> <p>"Well, I've been feeling a bit weird with these new virus symptoms. I'm kinda worried about what might happen during the night."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Scooting closer, her face etched with concern</action> <p>"Oh no! Are you okay? Do you need me to get mom?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Shaking your head</action> <p>"No, no. I don't want to bother her. I was actually thinking... maybe I could sleep in here with you tonight? Just in case something happens."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Eyes widening in surprise</action> <p>"Oh! Um... I don't know if that's a good idea. I mean, I want to help, but..."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Giving her a pleading look</action> <p>"Please, Elfie? I'd just feel so much safer this way."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Biting her lip, torn</action> <p>"I really wish I could, but I think it's best if you stay in your own room. Mom's right down the hall if you need her."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Sighing in defeat</action> <p>"Yeah, I guess you're right. I don't want to make things weird."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Placing a comforting hand on your arm</action> <p>"Hey, don't worry. You're the strongest, bravest$characters.elfie.player_role I know. You've got this!"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/ECA1B.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Smiling at her encouragement</action> <p>"Thanks, Elfie. You always know how to make me feel better."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Grinning</action> <p>"That's what $characters.elfie.role are for! Now, how about we read a bit together before bed? I'll even let you pick the story."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Chuckling</action> <p>"You're on. Scoot over, bookworm."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you settle in next to Elfie, she leans her head on your shoulder, and you can't help but feel a wave of affection for your sweet, innocent little sister. Together, you lose yourselves in a world of magic and adventure, the worries of the night temporarily forgotten.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ECA1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SE"); //next passage id modVariable("add", "girl_stat", "elfie.trust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SE1.webp'); /*cherie room*/ } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You wander into $characters.elfie.name's room and find her sitting at her desk, intensely focused on drawing in her sketchbook. Her pale hair falls around her face as she leans in close to the page, tongue poking out slightly in concentration. You can't help but smile at the sight.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Knocking gently on the open door</action> <p>"Hey there, Picasso. Got a second?"</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Jumping slightly, then breaking into a grin</action> <p>"For you, always! Come on in, I was just working on some character designs."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Walking over to peek at her sketches</action> <p>"These look amazing, $characters.elfie.name. You've got some serious talent."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Blushing at the praise</action> <p>"Aw, thanks! I'm still learning, but I love bringing my ideas to life. So, what's up?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ECA2A.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Perching on the edge of her bed</action> <p>"Well, I've been a bit worried about these new virus symptoms. I'm not sure what to expect at night, you know?" </p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Turning to face you, concern in her eyes</action> <p>"Oh no, that sounds scary. Are you feeling okay?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Shrugging</action> <p>"I mean, I'm alright now, but I was thinking... maybe I could bunk with you tonight? Just to be safe."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Biting her lip, conflicted</action> <p>"Oh, $characters.mc.name... I wish I could say yes, but I don't think that's a good idea."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Giving her your best puppy-dog eyes</action> <p>"Please, $characters.elfie.name? I'd just feel so much better knowing you're close by."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Standing up and walking over to sit beside you</action> <p>"I get it, I really do. But it's probably best if you stay in your own room."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Sighing</action> <p>"Yeah, I guess you're right. I don't want to make things weird."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Bumping your shoulder with hers</action> <p>"Hey, no weirdness here! We're family, and we stick together no matter what. If you need anything during the night, you know where to find me."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ECA2B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Smiling at her reassurance</action> <p>"Thanks, $characters.elfie.name. You're the best $characters.elfie.role a $characters.elfie.player_role could ask for."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Grinning</action> <p>"And don't you forget it! Now, since you're here, want to help me come up with some backstories for these characters?"</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Chuckling</action> <p>"You know I'm always down for some creative brainstorming. Let's do this!"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you settle in next to $characters.elfie.name, poring over her sketches and spinning tales of adventure and excitement, your worries about the night ahead start to fade. With your imaginative $characters.elfie.role by your side, you feel like you can face anything.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ECA2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SE"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SB2.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Elfie enters her bedroom, unsuspecting that you are peeking in from the slightly ajar door. She seems lost in thought as she approaches her dresser.</p> </div> </div><!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Elfie starts humming a cheery tune to herself while pulling open a drawer. She begins rummaging around, apparently looking for a change of clothes.</p> </div> </div><!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Just as Elfie starts lifting her top over her head, she freezes. Her humming stops abruptly. A puzzled expression spreads across her face.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <inner>talking to herself</inner> <p>Huh? I feel like I'm being watched...</p> </div> </div><!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She cocks her head, looking around the room quizzically. Elfie turns to glance behind her, eyes narrowing as they land on the bedroom door.</p> </div> </div><!-- Narrator --> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/ECB1A.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>Hey, is anybody out there?</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Realizing you're about to be discovered, you hastily retreat from the doorway, carefully easing the door shut. Your pulse races as you sneak away, feeling guilty for violating Elfie's privacy like that. You make a mental note to respect her personal space better going forward. Peeping on your sister is not okay.</p> </div> </div> <!-- Choice button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ECB1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SB"); //next passage id modVariable("add", "girl_stat", "elfie.lust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SE1.webp'); /*cherie room*/ } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You're lounging in your room when $characters.elfie.name bounces in, her cheerful demeanor filling the space. She starts humming a little tune as she gathers her things for a shower.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Spinning around happily</action> <p>"Time to get all fresh and clean!"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She heads into the bathroom, leaving the door slightly ajar. Through the crack, you can see her beginning to undress - her shirt rising up to reveal her toned midriff.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ECB2A.webp" class="DIAS_image clickable-media"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Pausing, looking around with a puzzled expression</action> <p>"Hello? Is someone there?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She must have sensed your presence! You quickly but quietly back away from the bathroom door, not wanting to make her uncomfortable by invading her privacy. As you tiptoe away, you catch one last glimpse of $characters.elfie.name pulling her shirt back down before closing the door fully.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>To herself</action> <p>"Must have been my imagination! Silly $characters.elfie.name."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ECB2B.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her bright, melodic humming resumes as you make your escape down the hallway. You'll have to be more careful about peeking in the future - the last thing you want is to make your bubbly sister feel weird or upset.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ECB2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SE"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SR.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You sink into the plush living room couch with a contented sigh. Elfie comes skipping in, wearing an oversized t-shirt that hangs off one pale shoulder. Her messy bedhead and sleepy eyes give her an adorably disheveled look.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/ECC1A.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <p>"Let's watch one of those magical girl anime movies!"</p> <action>She says excitedly, plopping down next to you.</action> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the colorful anime plays, you can't help stealing glances at Elfie. The way her thin t-shirt rides up, exposing a tantalizing glimpse of her smooth thighs. You imagine running your hands along those soft legs...</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Snuggling up to you</action> <p>"Isn't this the best, $characters.elfie.name? Just you and me?"</p> </div> </div> <!-- Choice button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ECC1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SR"); //next passage id modVariable("add", "girl_stat", "elfie.trust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SE1.webp'); /*cherie room*/ } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Lounging on the couch, you perk up as $characters.elfie.name bounces into the living room wearing loose sleep shorts and a tank top. Her lithe figure and perky little breasts have you blushing instantly.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"I found one of those classic fantasy movies you like!"</p> <action>She beams, putting it on.</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ECC2A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Settling beside you, her creamy thigh presses against yours. You tense, inhaling her intoxicating floral scent. As the movie plays, you watch $characters.elfie.name out of the corner of your eye - the way her chest gently rises and falls, her lips slightly parted.</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Resting her head on your shoulder</action> <p>"This is so cozy. We should snuggle more often!"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ECC2B.webp" class="DIAS_image clickable-media"> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ECC2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SE"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/1SK.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "elfieLust");<</script>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Turning your warm gaze to Elfie</action> <p>"That meal was absolutely delicious."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Nodding enthusiastically</action> <p>"She really is the best! I just hope I can be half as good a homemaker as her someday."</p> <action>Giggling</action> <p>"Although, I may have to sneak some extra desserts into the menu when she's not looking."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Chuckling</action> <p>"Your secret is safe with me. Maybe you could even teach me some of your baking skills."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image" src="./ressources/scenes/ECD1A.webp"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Elfie</name> <action>Eyes brightening</action> <p>"Really? It's a deal then! We'll have so much fun!"</p> <action>She beams at you innocently</action> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Returning her joyful smile</action> <p>"I'm looking forward to it already."</p> </div> </div> <!-- Choice button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ECD1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("1SK"); //next passage id modVariable("add", "girl_stat", "elfie.lust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/1SE1.webp'); /*cherie room*/ } </style>\ <<nobr>> <<script>>playAudio("music", "elfieTrust");<</script>> <div class="DIAS_container"> <!-- User --> <div class="DIAS_message right DIAS_active"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Catching $characters.elfie.name's eyes</action> <p>"$characters.elfie.name, don't you think that everything $characters.cherie.name makes is simply divine? She's outdone herself once again."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <p>"Mmm, you're so right! Isn't she just the best chef?"</p> <action>She leans in conspiratorially</action> <p>"Don't tell her I said this, but I think her cooking might even be better than a professional's."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ECD2A.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Raising an eyebrow</action> <p>"High praise indeed. Although I can't say I disagree - $characters.cherie.name's dishes are truly out of this world."</p> </div> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Blushing lightly</action> <p>"Well, with someone like you appreciating her talents, I'm sure she'll be overjoyed to hear it."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Giving her an innocent smile</action> <p>"Then it'll just have to be our little secret for now."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ECD2B.webp" class="DIAS_image clickable-media"> </div> <!-- Elfie --> <div class="DIAS_message left"> <img character="elfie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.elfie.name</name> <action>Ducking her head shyly but grinning</action> <p>"Our secret..."</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ECD2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "elfie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("1SE"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } </style>\ <<nobr>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you wander the desolate wastelands, the oppressive heat bears down on you, an unrelenting force that seems determined to crush your spirit. Your eyes, stinging with the sweat that keeps threatening to seep into them, suddenly catch a glimmer in the distance. An anomaly in this barren landscape: lights near what appears to be an oasis beside a river.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The sight is a siren call. With each step drawing you closer, the details begin to sharpen—palm trees swaying gently in the breeze, the soft murmur of flowing water, and there, nestled in the midst of this unexpected sanctuary, a structure.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Pausing to wipe the sweat from your brow</action> <inner>Could this be real or just a mirage?</inner> <p>"Is anyone even out here besides me?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Your voice falls flat, absorbed by the vast emptiness. Resolute, you press on, curiosity piqued. The ground beneath your feet transitions from cracked earth to softer sand, a testament to the river's life-giving presence.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As the oasis looms larger, the wooden habitation comes into focus—a rustic abode that seems to be crafted by someone who took great care to meld it with the surrounding nature. You find it odd, this dwelling standing alone, so far from what you assume to be the hub of The MAD's operations. It sparks a flicker of caution in your mind.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Crouching behind a boulder, eyes narrowed</action> <inner>This could be a trap, or it could be a chance for answers. Which is it?</inner> <p>"I need to be smart about this."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Silence is your companion as you edge closer to the periphery of the oasis. The vibrant greenery is a stark contrast to the desolation you've trekked through. Your senses are alight with the sounds of life—birds chirping, insects buzzing, and the rustle of leaves in the wind.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>This place is a haven, but for whom?</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You stop short, a safe distance from the wooden abode. You're close enough now to note the details—the way the structure is built to withstand the elements, the absence of movement within, the stillness that hangs over the place like a shroud.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Taking a deep breath, you prepare yourself for the unknown</action> <inner>It's now or never. If I'm to find out anything, it'll be through my own courage.</inner> </div> </div> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="SugarCube.Engine.play('3A2'); nextPartOfDay();"> Turn back </div> <div class="DIAS_button" onclick="SugarCube.Engine.play('GUA2'); nextPartOfDay();"> Proceed to the strange camp </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GUA1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("BB16"); //next passage id } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <video muted class="bgvid" autoplay loop src="ressources/backgrounds/3AGE.webm"></video> <<set $specpass.THREEA2 to 1>> <<set $misc.gabbieinitial to 1>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you cautiously edge closer to the surprisingly elegant wooden cabin amidst the wastelands, a serene river and picturesque landscape come into view. The beauty of the area stands in stark contrast to the desolation you've become accustomed to. Your steps are measured, your senses alert for any sign of danger.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Suddenly, the cold press of a blade against your throat halts you. A potent viral aura, previously undetected, paralyzes you; its intensity is overwhelming.</p> </div> </div> <!-- Mysterious woman --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mysterious woman</name> <action>The blade at your throat remains steady</action> <inner>Could this be another survivor? No, it has to be a trick.</inner> <p>"Don't move and answer my questions. Who are you?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Remaining calm despite the precarious situation, you assure her of your peaceful intentions. She hesitates, her grip faltering ever so slightly as she realizes you are a man, not just by your voice but by the aura you emit. Men were thought to be extinct, and her shock is palpable.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Seizing the moment of her hesitation, you exert your own viral dominance, swiftly grasping her wrist, and in one fluid motion, you reverse the positions; now you're on top. Her astonishment at your incredible aura is clear, but she doesn't succumb to it.</p> </div> </div> <!-- Mysterious woman --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mysterious woman</name> <action>Pushes you off with remarkable force, maintaining a safe distance</action> <inner>This aura, it's unlike anything I've felt before... But, I won't be overpowered.</inner> <p>"You've got some nerve, but I'm not so easily swayed."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/GUA2A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You finally take the opportunity to survey her. A striking woman with a look of confusion, yet she doesn't seem depraved or under the influence of The MAD like others you've encountered. Her behavior is odd, her resistance to your aura peculiar.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/GUA2B.webp"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Gesturing towards her home, speaking with honest intent</action> <p>"Judging by your hidden abode and your demeanor, we're probably not enemies."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She retorts sharply, her voice laced with a mix of curiosity and caution.</p> </div> </div> <!-- Mysterious woman --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mysterious woman</name> <p>"Enemies are all I have in these lands."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You mention your family's escape from The MAD to earn her trust, and in a show of good faith, you disarm yourself, advancing towards her with open vulnerability. In a quick, almost reflexive action, she hurls her knife towards you. It narrowly misses, embedding itself into a tree behind you.</p> </div> </div> <!-- Mysterious woman --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mysterious woman</name> <action>A slight smile plays on her lips</action> <p>"Follow me inside. You've taken a risk; I can respect that. I'm not with The MAD, and I'm curious about your story. Don't mistake my hospitality for weakness, though. I can hold my own, with or without weapons."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/GUA2C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You watch her confidently stride towards the cabin, and despite the tension, you can't help but offer a small, appreciative smile as you follow. Her adventurous spirit is infectious, and you realize that, in this desolate world, trust is as rare as it is necessary.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Open your eyes </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GUA2'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("GUA3"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <video muted class="bgvid" autoplay loop src="ressources/backgrounds/3AGI.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>Stepping into the cabin, the rough texture of the wooden door contrasts sharply with the warmth that greets you inside. The place is a chalet of sorts, its interior boasting an impressive display of craftsmanship – a testament to her survival skills.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Mysterious woman</name> <action>Gesture towards a rustic chair</action> <inner>There's a spark of curiosity in her eyes</inner> <p>"Please, take a seat."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GUA3A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You oblige, and as you sit, your eyes roam over the cozy layout. It's more than shelter; it's a home, carved out of desperation and determination.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Conversation flows easily between the two of you, like water finding its course. She introduces herself as Gabbie, and the more you talk, the clearer it becomes – you're cut from the same cloth, two playful adventurers, each with a temperament as fierce as the wasteland winds.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>Leaning in, her gaze piercing</action> <inner>By all odds, as a man, he shouldn't be living</inner> <p>"How are you still alive?"</p> </div> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Hesitating for a moment, then deciding to trust</action> <inner>This could be the beginning of an alliance, or the end of the road</inner> <p>"I was in a coma, woke up to find everything changed... my family had to survive to the MAD, and from what they told me, it was terrible, they escaped with me. I will never forgive the MAD for how they treated them."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She nods, her face hardening at the mention of The MAD. You sense a shared hatred, a common goal etched deep within your bones. A smile is forming on both your lips.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GUA3B.webp" class="DIAS_image clickable-media"> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Pushing the conversation forward</action> <inner>It's only fair to exchange truths</inner> <p>"Your turn. How come you're here, still breathing, and standing against The MAD?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Gabbie's response comes with a hedge of vagueness. She skirts around the precise reason for her immunity to the virus, simply stating that she broke free from The MAD's grasp early on. The disdain in her voice is palpable as she talks about their barbaric, enslaving ways, it's clear the wants them dead.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>Gaze dropping to her hands</action> <inner>A flicker of sorrow crosses her face</inner> <p>"I've always been a survivor... my father taught me everything."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You pick up on the change in her tone – a sore subject – so you don't pry. Some mysteries are meant to unravel in their own time.</p> </div> </div> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Noticing the sky darkening beyond the chalet's windows, you mention it's getting late.</p> </div> </div> <!-- You --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Standing up, feeling the pull of responsibility</action> <inner>The girls are probably worried</inner> <p>"I should get back to my family. But since we share a common enemy, I guess this isn't goodbye."</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>A smile graces her lips, yet her eyes remain serious</action> <inner>What an interesting turn of event</inner> <p>"We'll cross paths again, that's certain. Don't be a stranger."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GUA3C.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You exit the cabin with a lingering sense of kinship, a bond forged in the fire of circumstance. As you step back into the wasteland, the chill of the night is stark against the warmth of the cabin behind you. The encounter leaves you puzzled but hopeful – a new ally in this desolate world could be the turning point in your fight against The MAD and she seems to know more than what she lets on.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GUA3'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("3AGE"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } </style>\ <<nobr>> <<script>> /* stopAudio("music"); */ playAudio("music", "gabbieTrust"); <</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you trudge deeper into the desolate wasteland, your senses remain on high alert for any potential threats. Suddenly, a faint sound in the distance catches your ear, causing you to freeze in your tracks. Slowly, you scan the barren landscape, kunai gripped tightly in your hand.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <p>"Behind you"</p> <action>a familiar feminine voice calls out.</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You whirl around, eyes widening slightly as they land on the lithe figure of Gabbie, the mysterious young woman you encountered not too long ago. Despite the potential danger, you can't help but let a roguish smirk tug at the corner of your mouth.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Relaxing your stance</action> <p>"Well, well, if it isn't my lovely wastelands guide."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Gabbie returns your smirk, though her eyes betray a hint of wariness as she studies you intently.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1B.webp" class="DIAS_image clickable-media"> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>Hands on her hips</action> <p>"Didn't expect to run into you out here, [Player name]. Normally, I prefer to avoid company when I'm on the prowl."</p> <inner>He's certainly bold, I'll give him that.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Arching an inquisitive brow, you give her a once-over, taking in her toned physique and the way her tattered garments hug her lithe frame.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I could say the same. What brings a lone hunter like yourself to these parts?"</p> <inner>There's something undeniably alluring about her wild, untamed spirit.</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her expression darkens momentarily as she huffs out a bitter chuckle.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1C.webp" class="DIAS_image clickable-media"> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <p>"Scouting, mostly. Trying to keep tabs on those MAD bastards' movements."</p> <action>Her gaze hardening</action> <p>"I can't let my guard down for even a moment, not when they're involved."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod solemnly, understanding her disdain all too well. As you recount your own ongoing struggles against the MAD's twisted regime, Gabbie's demeanor softens, her features betraying a newfound sense of kinship.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1D.webp" class="DIAS_image clickable-media"> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>A wry smile playing on her lips</action> <p>"Well, it seems we're on the same side then. Perhaps we could watch each other's backs for a while?"</p> <action>Taking a step closer</action> <p>"You know, just to be safe."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't help but chuckle at her suggestive tone and the challenge glinting in her eyes.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Meeting her heated gaze</action> <p>"Is that an offer, or a threat? Because I don't know if I can trust someone who ambushes innocent wanderers from behind."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Gabbie's lips quirk upwards in a mischievous grin, and she arches an eyebrow defiantly.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1E.webp" class="DIAS_image clickable-media"> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <p>"Innocent? Hardly."</p> <action>Her eyes roaming over you appraisingly</action> <p>"But I suppose I could let you tag along, just this once. If you can keep up, that is."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a low chuckle, you lean back against a crumbling wall, regarding her with an air of nonchalance.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"We'll see about that. But for now, how about you tell me a little more about yourself? I'm curious what kind of woman is foolish enough to wander out here alone."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Gabbie's eyes narrow playfully at your jab, but she seems to accept the challenge. As the two of you settle in, swapping stories and getting a better sense of one another, the lingering tension gradually bleeds away. Despite your initial wariness, you find yourself drawn to Gabbie's uncompromising spirit and sharp wit.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1F.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>By the time your impromptu exchange winds down, the walls have lowered considerably on both sides. As Gabbie prepares to part ways, she shoots you one final, inscrutable look over her shoulder.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>A hint of challenge in her sultry tone</action> <p>"Until next time, [Player name]. Try not to get yourself killed out here. I'd hate to have lost my new...companion so soon."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1G.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You watch her disappear back into the wasteland, a roguish smirk playing on your lips as you look forward to your next encounter with the enigmatic young woman.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GAT1'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "gabbie.trust", 5); nextPartOfDay(); SugarCube.State.variables.specpass.THREEA4 = 1; SugarCube.Engine.play("3A4"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/3A.webp'); } </style>\ <<nobr>> <<script>> /* stopAudio("music"); */ playAudio("music", "gabbieTrust"); <</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You spot a familiar figure up ahead – Gabbie, the elusive wasteland wanderer. As you approach, she tenses, immediately sensing your presence.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1R1.webp" class="DIAS_image clickable-media"> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>Glancing over warily</action> <p>"You again..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You offer a friendly smile and raise a hand in greeting.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Hey, it's just me. Fancy running into you out here."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But Gabbie doesn't return the warm gesture. Instead, she takes a cautious step back, her body language guarded.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>Averting her gaze</action> <p>"Listen, I'm not really looking for company right now."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GAT1R2.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You open your mouth to protest, but she cuts you off with a shake of her head.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <p>"It's nothing personal. I just...I can't afford to trust people that easily out here, you know?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With one last inscrutable look, she deftly slips away, disappearing amid the crumbling ruins before you can get another word in. You're left staring after her fleeting form, a slight frown tugging at your lips as you ponder what it will take to gain her elusive trust.</p> <p>Maybe another time you'll have better luck getting through to the skittish wanderer.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 1 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GAT1R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("3A4"); //next passage id } </script>\
<style> body { } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "gabbieLust");<</script>> <video class="bgvid" autoplay loop src="ressources/backgrounds/3AGI.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You approach Gabbie's outpost in the Wastelands, hoping to go over plans for your next mission against The MAD. As you get closer, you notice movement through a gap in the makeshift walls and slow your approach, curious.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Peering inside, you see the stunning young rebel starting to undress. Gabbie unzips her worn jacket and shrugs it off her toned arms, her tight black tank top clinging to her perky breasts underneath. You feel your pulse start to race just from this glimpse of her feminine figure.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GCA1A.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She hooks her thumbs into the waistband of her cargo pants, about to slide them down over her hips. But just as the first glimpse of her lower curves comes into view, Gabbie seems to sense something. Her head snaps up and she looks right at you through the gap, eyes widening in surprise.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>Quickly covering herself</action> <inner>Who's there? Did he see me?</inner> <p>"Whoever it is you'd better have a good reason for spying on me!"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GCA1B.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cursing yourself, you quickly turn and hurry away before she can identify you. You don't want to make things even more awkward by letting her catch you so blatantly ogling her undressed form.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>Shit, I shouldn't have looked...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You chide yourself, heat rising to your cheeks. But you can't deny the enticing image of Gabbie undressing is now seared into your mind.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GCA1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("3AGE"); //next passage id modVariable("add", "girl_stat", "gabbie.lust", 1); nextPartOfDay(); } </script>\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<script>>playAudio("music", "gabbieTrust");<</script>> <video class="bgvid" autoplay loop src="ressources/backgrounds/3AGI.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You approach $characters.gabbie.name's outpost in the Wastelands, eager to go over the plans for your next mission against The MAD. As you near the makeshift walls, you spot movement through a small gap. Curiosity gets the better of you, and you peek inside.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You see $characters.gabbie.name, the fierce young rebel, removing her worn jacket, revealing a snug tactical vest underneath that hugs her athletic frame. She sets her jacket aside and runs a hand through her tousled hair, releasing a sigh of relief after a long day.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GCA2A.webp" class="DIAS_image clickable-media"> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.gabbie.name</name> <action>To herself, quietly</action> <p>"Another day, another fight... but we'll get through this."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>She loosens the straps of her cargo pants, preparing to change into something more comfortable. You feel a pang of guilt for spying but can't tear your eyes away from her graceful movements. Just as she begins to pull her pants down, you catch a glimpse of a tattoo on her hip, a symbol of resistance.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GCA2B.webp" class="DIAS_image clickable-media"> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.gabbie.name</name> <action>With a determined look</action> <p>"We won't let them break us."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Deciding not to invade her privacy any further, you quietly retreat, heart pounding. As you walk away, the image of $characters.gabbie.name's unwavering spirit and determination fuels your resolve to fight by her side.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GCA2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "gabbie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("3AGE"); //next passage id } </script>\
<style> body { } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "gabbieTrust");<</script>> <video class="bgvid" autoplay loop src="ressources/backgrounds/3AGI.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The late afternoon sun casts a warm glow through the window of Gabbie's outpost bedroom. She sits on the edge of her bed, her long blonde hair cascading over her shoulders. You can't help but admire her natural beauty - those captivating blue eyes, the gentle curve of her lips, her feminine yet toned physique from years of survival in the Wastelands.</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>Offering a friendly smile</action> <p>"Is everything okay?"</p> <inner>He seems distracted by something.</inner> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GCB1A.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Snapping out of your trance</action> <p>"Oh, yeah...I'm alright. Just thinking about this virus situation."</p> <action>Rubbing the back of your neck nervously</action> <p>"To be honest, I'm a little worried about what might happen tonight when the symptoms kick in again."</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>Listening intently, concern showing on her face</action> <p>"I can only imagine how unsettling this must be for you."</p> <action>Patting the bed next to her</action> <p>"Come, sit down."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Obliging and sitting next to her</action> <inner>Her caring demeanor is comforting, reminiscent of a nurturing family member.</inner> <p>"I was wondering..."</p> <action>Meeting her azure eyes</action> <p>"Could I maybe stay in here with you tonight? Just to have someone around in case things get, well, intense again."</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <action>A slight blush coloring her cheeks as she considers</action> <p>"I appreciate you opening up about your worries."</p> <action>Placing a reassuring hand on your arm</action> <p>"But I don't think that would be appropriate. From what you've told me and what I know, the symptoms seem quite...personal in nature."</p> <action>Her eyes conveying respect for boundaries</action> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GCB1B.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <action>Nodding slowly in understanding</action> <inner>I'm a bit disappointed, but she's right.</inner> <p>"You're probably right. I'll be okay on my own, I'm sure."</p> <action>Offering her a grateful smile and rising from the bed</action> <p>"Thanks for listening, Gabbie. I'll let you get some rest."</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>Gabbie</name> <p>"Anytime,"</p> <action>Replying warmly</action> <p>"Sleep well tonight."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With one last look at the compassionate young woman, you exit her room, hoping the night passes without any unruly virus urges.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GCB1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("3AGI"); //next passage id modVariable("add", "girl_stat", "gabbie.trust", 1); nextPartOfDay(); } </script>\
<style> body { /* background-image: url('./ressources/backgrounds/2AGI.webp'); */ /*cherie room*/ } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<script>>playAudio("music", "gabbieTrust");<</script>> <video class="bgvid" autoplay loop src="ressources/backgrounds/3AGI.webm"></video> <div class="DIAS_container"> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.gabbie.name</name> <action>With a gentle smile</action> <p>"Is everything okay?"</p> <inner>Noticing his distant gaze.</inner> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Snapping back to reality</action> <p>"Oh, yeah... I'm just a bit anxious about the virus acting up tonight."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GCB2A.webp" class="DIAS_image clickable-media"> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.gabbie.name</name> <action>Nodding empathetically</action> <p>"I understand. It's a lot to handle."</p> <action>Patting the bed beside her</action> <p>"Sit with me for a moment."</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Sitting down</action> <p>"Thanks, $characters.gabbie.name."</p> <action>Taking a deep breath</action> <p>"I was wondering if I could stay here tonight. Just in case things get out of hand."</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.gabbie.name</name> <action>Blushing slightly, her cheeks tinged with pink</action> <p>"I get why you'd want that, but I think it might be best if we keep some space. The symptoms are... personal." </p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Nodding, feeling a mix of relief and disappointment</action> <p>"You're right. I just... thanks for understanding."</p> </div> </div> <!-- Gabbie --> <div class="DIAS_message left"> <img character="gabbie" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.gabbie.name</name> <action>Placing a hand on your arm</action> <p>"Anytime. Stay strong, okay?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/GCB2B.webp" class="DIAS_image clickable-media"> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the room </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('GCB2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "gabbie.trust", 1); nextPartOfDay(); SugarCube.Engine.play("3AGI"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<script>>playAudio("music", "angelaTrust");<</script>> <<set $specpass.TWOA2 to 1>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You walk alone, the forest around you alive with the whispers of leaves and distant calls of wildlife. The air is fresh, filled with the earthy scent of moss and damp soil. You're on the hunt for anything useful – a forgotten artifact or perhaps a bounty of nature's provisions.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you delve deeper into the woods, a rustling from the shadows catches your attention. There! A flash of fur darts between the trees. Instinct takes over, and you give chase, your heart pounding in exhilaration. The thrill of the hunt surges through you as branches whip past, the creature always just out of reach.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But in your fervor, you miss the warning signs – the ground becoming uneven, the trees thinning. Suddenly, the earth gives way to open air, and you're falling, tumbling down a steep, wooded cliff. Branches tear at your clothes, the world spins, and a sharp crack echoes in your ears as darkness swallows you whole.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>(Blackness. Silence.)</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Wake up </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('AUA1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("AUA2"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style>\ <<nobr>> <<script>>playAudio("music", "angelaTrust");<</script>> <video muted class="bgvid" autoplay loop muted src="ressources/backgrounds/2ACE.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You awaken gradually, the sensation of being comfortably ensconced in a soothing warmth enveloping you. Your mind is clouded, the events preceding this moment a murky haze. A woman's soft whistling reaches your ears, and in your disoriented state, you mistake it for a maternal presence.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>Confusion gives way to a flicker of hope</inner> <p>"Cherie?"</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Startled, she turns towards you with a soft chuckle</action> <inner>He seems so lost, poor thing.</inner> <p>"I'm not sure who Cherie is, but I'm definitely not her."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/AUA2A.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With her gentle laugh, reality seeps back in. You are in the home of a stranger, the memory of your fall and the subsequent darkness rushing back. An instinctive attempt to rise brings a sharp pain, grounding you back to your present fragility.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Placing a reassuring hand on your shoulder</action> <inner>He needs care, not more harm.</inner> <p>"Take it easy, you need to rest a bit more before you get up."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her voice is a balm, authoritative yet brimming with kindness, compelling you to obey without question. You settle back down, finally taking a proper look at her. Angela is a vision of mature beauty, her black hair framing a face that exudes calm and her silhouette, a testament to a life of strength.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/AUA2B.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As she prepares a strange concoction, she recounts finding you unconscious at the foot of a steep wooded slope, and without a second thought, she brought you to her woodland abode.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>How did I end up in such a kind stranger's care?</inner> <p>"Thank you, and I apologize for startling you. I'm..."</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Smiling warmly, she interrupts your apology</action> <inner>He's safe, that's what matters.</inner> <p>"There's no need for that. I'm Angela."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/AUA2C.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her name is as mysterious as her presence here in the forest, a place deemed uninhabitable due to the pervasive virus. You inquire about this anomaly.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Spreading the salve on your wounds with a touch as light as feathers</action> <inner>Why can't I remember anything about this place?</inner> <p>"I wish I knew. I can't explain why I'm here, or how I arrived. I'm just as clueless about this island and 'The MAD' as you are."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The salve works wonders, your pain subsiding at an astonishing rate. Angela's nurturing presence stirs something within you, a warmth that has nothing to do with your healing wounds.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <inner>I must get back before the virus makes this more complicated.</inner> <p>"I should return home, but I'll come back to properly thank you."</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Nods with the same serene smile</action> <inner>He's strong, he'll be alright.</inner> <p>"You're welcome here anytime. Take care."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img class="DIAS_image clickable-media" src="./ressources/scenes/AUA2D.webp"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you prepare to leave, the enigma of Angela lingers. Who is this mysteriously divine woman, living alone amidst the dangers of the forest?</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('AUA2'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("2ACE"); //next passage id nextPartOfDay(); } </script>\ <!--style>#passages {max-width: 100vh;}</style-->\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } </style>\ <<nobr>> <<script>> /* stopAudio("music"); */ playAudio("music", "angelaTrust"); <</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>As you wander deeper into the lush, primordial forest, your senses are heightened, alert to the slightest rustle or movement amidst the verdant foliage. Suddenly, a twig snaps loudly behind you, causing you to whirl around, your hand instinctively reaching for your weapon.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Emerging from behind a towering oak, her hands up in surrender</action> <p>"Easy there, it's just me."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>The lithe, radiant figure of Angela stands before you, the beguiling woman you encountered after your fall. A playful grin tugs at the corner of her full lips as she takes in your defensive stance.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/AAT1A.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Relaxing slightly with a roguish smirk</action> <p>"Well, if it isn't the forest's mystical guide herself. Trying to get the jump on me?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Angela's musical laughter rings out as she shakes her head, long raven tresses swaying with the movement.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <p>"You give me too much credit. I'm just as surprised to see you again so soon."</p> <action>Her eyes betraying a hint of friendly caution</action> <inner>He could be dangerous, but there's something about him...</inner> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You slowly let your eyes roam over her curvaceous form, taking in the simple beauty of her earthy garments.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/AAT1B.webp" class="DIAS_image clickable-media"> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"Is that so? And what brings such a rare beauty out wandering alone in this maze of green?"</p> <action>Holding her intrigued gaze</action> <p>"Or are you just trying to give a poor traveler like me a hard time?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>A fleeting look of melancholy passes over Angela's captivating features as she worries her full lower lip briefly.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <p>"Would you believe me if I said I was looking for answers?"</p> <action>Her eyes glimmering with a mixture of longing and resolve</action> <p>"Pieces of my past that seem just out of reach, whispers of something I once knew..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod slowly in understanding, recounting your own battles for survival on the island. Angela seems to pick up on the unspoken connection, her expression softening.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/AAT1C.webp" class="DIAS_image clickable-media"> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>A warm, coy smile gracing her lips</action> <p>"It seems we both find ourselves on difficult paths, stranger. Perhaps we could walk them together for a while?"</p> <action>Stepping closer, her tone taking on a lightly teasing lilt</action> <p>"I could use someone to keep me from getting hopelessly lost in these woods."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You can't help but chuckle at her suggestive words and the playful challenge dancing in her entrancing eyes.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <action>Meeting her gaze with an arched brow</action> <p>"Is that an offer I can't refuse? Because I'm not sure I can trust a woman who goes around accosting unsuspecting men in the wilderness."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Angela throws her head back with a rich peal of laughter that seems to breathe new life into the forest surrounding you both.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/AAT1D.webp" class="DIAS_image clickable-media"> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <p>"Accost is such an aggressive word."</p> <action>Her eyes roving over you appraisingly</action> <p>"But I suppose I could allow you to tag along, if you can keep up."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a low chuckle rumbling in your chest, you lean back casually against a sturdy tree trunk, matching her look of feigned nonchalance.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I guess we'll have to see about that. For now though, how about you satisfy my curiosity about the enigmatic woman before me?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Angela's smile takes on a slightly devious edge as she holds your gaze unflinchingly, seeming to weigh her response. Finally, she gives a slight shrug of her shoulders, unable to resist rising to the bait.</p> <p>She than proceeds to walk toward you and eventually past you. The only thing you can do is watch.</p> </div> </div> <!-- Image --> <!-- div class="DIAS_message centered"> <video loop class="DIAS_video clickable-media" preload="metadata"> <source src="./ressources/scenes/AAT1E.webp" type="video/webm"> Your browser does not support the video tag. </video> </div --> <div class="DIAS_message centered"> <img src="./ressources/scenes/AAT1E.webp" class="DIAS_image clickable-media"> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('AAT1'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "angela.trust", 5); SugarCube.State.variables.specpass.TWOA4 = 1; nextPartOfDay(); SugarCube.Engine.play("2A4"); //next passage id } </script>\
<style> body { background-image: url('ressources/backgrounds/2A_1.webp'); } </style>\ <<nobr>> <<script>> /* stopAudio("music"); */ playAudio("music", "angelaTrust"); <</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You spot Angela ahead, gently caressing a tree trunk. A snap of a branch under your foot causes her to spin around, eyes wide with alarm.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Instantly taking a step back</action> <p>"You...?"</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/AAT1R1.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You try to ease her concern, but she's having none of it. With a shake of her head, she turns and flees deeper into the forest before you can get a word out, leaving you alone and confused by her distrustful reaction.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p><b>YOU NEED 1 TRUST TO DO THIS SCENE</b></p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Done </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('AAT1R'); //current passage id } })(); function nextBloc(event) { nextPartOfDay(); SugarCube.Engine.play("2A4"); //next passage id } </script>\
<style> body { } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "angelaLust");<</script>> <video class="bgvid" autoplay loop muted src="ressources/backgrounds/2ACI.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You make your way through the dense forest, searching for Angela's camp to discuss something you learned that could help jog her lost memories. As you get closer to the area her camp is located, you slow your approach, not wanting to startle her.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Through the trees ahead, you spot Angela outside near a small creek, crouched down splashing water on her face and arms. She has removed the long dress she typically wears, leaving her in just a lightweight slip that clings to her curvaceous figure.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Angela seems deep in thought, lost in the peaceful sounds of the gurgling stream. She runs her wet hands through her long raven locks, pushing them back over her shoulders to expose the upper swell of her bare breasts peeking out from the low neckline.</p> </div> </div><!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ACA1A.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You feel your pulse quicken at the intimate, unguarded sight. Part of you wants to back away, to preserve Angela's privacy in this serene moment. But another part is transfixed, captivated by her naturalistic beauty.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Letting out a contented sigh</action> <p>"The embrace of the forest nurtures both body and soul..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Her words seem to hang in the air with a mystic resonance. You stay rooted to the spot, unable to announce yourself or tear your eyes away from the entrancing woman one with nature.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>But then, Angela's head turns slightly, as if picking up on another presence. In one fluid motion, she straightens and her eyes lock onto your hidden spot between the trees. Her expression is unreadable as your eyes meet.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ACA1B.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Cheeks burning with embarrassment at being caught ogling, you quickly turn and hurry away, crashing through the underbrush to put distance between you and the creek.</p></div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You chide yourself. Though you can't deny the alluring image of Angela in her slip, dripping wet in the dappled forest light, is seared into your mind's eye. You'll likely be replaying that vision for a while.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ACA1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("2ACE"); //next passage id modVariable("add", "girl_stat", "angela.lust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/2ACE.webp'); /*cherie room*/ } </style>\ <<nobr>> <<script>>playAudio("music", "angelaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>You weave through the dense forest, approaching $characters.angela.name's camp with quiet steps. As you near, you spot her by the creek, washing her face and arms. She's shed her usual dress, leaving her in a lightweight slip that clings to her curves.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.angela.name</name> <p>The forest remembers...</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ACA2A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You pause, captivated by her natural beauty, the sight seared into your mind. You feel a mix of awe and respect, choosing not to interrupt her serene moment. Silently, you step back, your heart still racing.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>As you retreat, $characters.angela.name's words linger in your mind, "The forest remembers..." You realize that the answers you seek might be intertwined with the forest's ancient wisdom.</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Determined and thoughtful, you resolve to return when the time feels right. For now, you leave $characters.angela.name in her tranquil solitude, the forest's secrets waiting to be unveiled.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ACA2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "angela.trust", 1); nextPartOfDay(); SugarCube.Engine.play("2ACE"); //next passage id } </script>\
<style> body { } .bgvid { position: fixed; left: 0; top: 0; height: 100%; width: 100vw; object-fit: fill; z-index: -1; } </style> <<nobr>> <<script>>playAudio("music", "angelaTrust");<</script>> <video class="bgvid" autoplay loop muted src="ressources/backgrounds/2ACI.webm"></video> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The campfire crackles in Angela's woodland bedroom, casting a warm glow over her curvaceous silhouette. She sits gracefully on a fur pelt, her dark tresses framing her radiant features.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Looking up as you enter</action> <p>"Hello, you seem troubled."</p> <action>Patting the pelt beside her</action> <p>"Come, sit with me."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You join the alluring forest goddess, trying not to stare at the tantalizing glimpses of her body beneath the flowing gown. Her natural fragrance is utterly bewitching.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>You</name> <p>"I'm worried about these virus symptoms keeping me up tonight."</p> <action>Meeting her gaze</action> <p>"Could I maybe stay here with you? Just to have someone nearby..."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>Angela's full lips curve in a kind smile as she considers your request. Her eyes convey a deep ancient wisdom.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ACB1A.webp" class="DIAS_image clickable-media" preload="metadata"> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <action>Placing a gentle hand on your arm</action> <p>"I understand your anxiety, but I don't think that would be appropriate."</p> <action>Her tone reassuring</action> <p>"This is a personal journey you must navigate, my friend."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You nod, a tinge of disappointment mixing with understanding. She's right - her presence would likely only heighten the burning desires aroused by the virus.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>Angela</name> <p>"Have faith that you possess the strength within you."</p> <action>Giving your arm a soft squeeze</action> <p>"Seek peace this evening. I'll be here if you need me."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With one last longing look at the mysterious forest beauty, you excuse yourself into the night, hoping her wisdom can guide you through the ensuing passionate affliction.</p> </div> </div> <!-- Exit button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Get out of the room </div> </div> </div> <</nobr>>\ <script> function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ACB1'); //current passage id } } checkIfDocIsLoaded(); function nextBloc(event) { SugarCube.Engine.play("2ACI"); //next passage id modVariable("add", "girl_stat", "angela.trust", 1); nextPartOfDay(); } </script>\
<style> body { background-image: url('./ressources/backgrounds/2ACI.webp'); /*cherie room*/ } </style>\ <<nobr>> <<script>>playAudio("music", "angelaTrust");<</script>> <div class="DIAS_container"> <!-- Narrator --> <div class="DIAS_message centered DIAS_active"> <div class="DIAS_text"> <p>The moonlight filters through the canopy, casting silver patterns on the forest floor. $characters.angela.name's campfire is a beacon of warmth and comfort in the cool, dark night. She sits, poised and serene, her eyes reflecting the dancing flames.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.angela.name</name> <action>Noticing your approach</action> <p>"You look like you've seen better days."</p> <action>She pats the ground next to her</action> <p>"Come, share the fire with me."</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ACB2A.webp" class="DIAS_image clickable-media"> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You sit beside her, the heat of the fire mingling with the intoxicating scent of pine and wildflowers that clings to her. Her presence is calming yet stirs something deep within you.</p> </div> </div> <!-- User --> <div class="DIAS_message right"> <img character="mc" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.mc.name</name> <p>"I've been feeling off, these symptoms are really unsettling."</p> <action>You glance at her, hesitant</action> <p>"Could I stay close tonight? Just to feel safer?"</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>$characters.angela.name's eyes soften, and she gives you a sympathetic smile, her voice a soothing melody.</p> </div> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.angela.name</name> <action>Touching your hand lightly</action> <p>"I understand, but this is something you must face alone."</p> <action>Her gaze is steady</action> <p>"You have the strength, even if you don't see it."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>You feel a mix of relief and disappointment. Her words resonate, offering a sliver of comfort despite your lingering fears.</p> </div> </div> <!-- Image --> <div class="DIAS_message centered"> <img src="./ressources/scenes/ACB2B.webp" class="DIAS_image clickable-media"> </div> <!-- Angela --> <div class="DIAS_message left"> <img character="angela" class="DIAS_avatar"> <div class="DIAS_text"> <name>$characters.angela.name</name> <p>"Trust in yourself. I'll be here, watching over you."</p> <action>Her hand lingers a moment longer</action> <p>"You're stronger than you think."</p> </div> </div> <!-- Narrator --> <div class="DIAS_message centered"> <div class="DIAS_text"> <p>With a final, reassuring look, you rise and step back into the shadows of the forest, her wisdom and the warmth of the fire staying with you as you navigate the night ahead.</p> </div> </div> <!-- Button --> <div class="DIAS_buttonCont"> <div class="DIAS_button" onclick="nextBloc(event)"> Leave the warmth of the fire. </div> </div> </div> <</nobr>>\ <script> (function checkIfDocIsLoaded() { if (typeof Check_if_doc_is_loaded === 'undefined') { setTimeout(checkIfDocIsLoaded, 10); } else { DIAF_initDialogPassage('ACB2'); //current passage id } })(); function nextBloc(event) { modVariable("add", "girl_stat", "angela.trust", 1); nextPartOfDay(); SugarCube.Engine.play("2ACI"); //next passage id } </script>\