<div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/title1.gif');"></div> <div class="absoluteAlign blackBg bothHalves coolBorder" style="background-color: rgb(0, 0, 0, 0.9);inset: 2.5%;width: 95%;height: 95%;"> <p>[[Return to Main Menu|start]]</p> <h3>About</h3> <p>A surreal horror point-and-click exploration game inspired by Yume Nikki. 100+ rooms, some mostly optional puzzles, and minimal text. No jumpscares.</p> <p>Estimated time to complete is 30 minutes to an hour, depending on how thorough you are. There are currently two endings.</p> <p>Don't refresh or close the page while playing, or you will lose all progress.</p> <h3>Creation</h3> <p>This game was made in a month for <a class="outsideLink" href="https://itch.io/jam/dream-diary-jam-8">Dream Diary Jam 8</a> and the <a class="outsideLink" href="https://itch.io/jam/neo-twiny-jam-24">2024 Neo Twiny Jam</a>.</p> <p>The game was made with Tweego (Twine) and the Snowman format. Most scripting was done with Typescript and vanilla Javascript.</p> <p>The Dream Diary jam's restriction is that the game must be a Yume Nikki fangame. I hope I succeeded in creating a similar atmosphere. There wasn't enough time to include everything I wanted, but I hope to add more over the next few days.</p> <p>The Neo Twiny jam's restriction is that the game must be interactive fiction with 500 words or less. Images, code and menu text such as this page don't count towards the limit. I'll admit this game is different from the other submissions, but I guess it counts as interactive fiction in the same way a graphic novel or interactive webcomic counts. I wanted to see how much text it was possible to omit from a Twine game. The answer seems to be 'a lot'. <p>I will publish the source code at some point, and after the jam deadline, I may add more text and dialogue.</p> <p>In some ways this game is a spiritual sequel to <a class="outsideLink" href="https://kanderwund.itch.io/choke">"In All My Dreams I Choke On Invisible Smoke"</a>, a game I made earlier. The two games are minimally connected and you don't need to play the other game to understand this one.</p> <h3>Additional Inspiration</h3> <p>"The Red Tower", a short story by Thomas Ligotti, can be read online <a class="outsideLink" href="https://weirdfictionreview.com/2011/12/the-red-tower-by-thomas-ligotti/">here</a>. There is also a <a class="outsideLink" href="https://www.youtube.com/watch?v=0LFALOC5YZs">reading on Youtube</a>. And a <a class="outsideLink" href="https://tvtropes.org/pmwiki/pmwiki.php/Literature/TheRedTower">TV Tropes page</a> for some reason.</p> <br/> <hr/> <br /> <p>[[Return to Main Menu|start]]</p> </div> <% $(function () { mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/title1.gif');"></div> <div class="absoluteAlign blackBg bothHalves coolBorder" style="background-color: rgb(0, 0, 0, 0.9);inset: 2.5%;width: 95%;height: 95%;"> <p>[[Return to Main Menu|start]]</p> <p>Credits contain mild spoilers.</p> <h3 class="linkReplaced removedOnClick" identifier="image">▶ Image Credits</h3> <div class="linkReplacer hidden" identifier="image"> <h3 class="linkHider" identifier="image">▼ Image Credits</h3> <p>Character art drawn by KADW. Background images are mostly modified from public domain/free license photos from <a class="outsideLink" href="https://commons.wikimedia.org">Wikimedia Commons</a> or <a class="outsideLink" href="https://www.pexels.com/">Pexels</a>.</p> <p>Used <a class="outsideLink" href="https://github.com/kadw108/Image-Converter">personal image converter program</a> for image/GIF editing and glitch effects.</p> <p>All art assets not listed below are public domain. No AI art was used.</p> <ul> <li><a class="outsideLink" href="https://www.flickr.com/photos/79623570@N00/216536347/">Eviction NOTICE, by rickonine</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by-nc/2.0/">license</a>)</li> </ul> <br/><hr/><br/> </div> <h3 class="linkReplaced removedOnClick" identifier="music">▶ Sound Credits</h3> <div class="linkReplacer hidden" identifier="music"> <h3 class="linkHider" identifier="music">▼ Sound Credits</h3> <p>All sounds not listed below are public domain. Most sound effects were obtained through <a class"outsideLink" href="https://freesound.org/">freesound.org</a>.</p> <p>For licensing purposes, all CC sounds used are edited from the originals. Audio formats were changed, and in some cases duration was shortened and other effects applied.</p> <p style="text-decoration: underline">Sound Effects</p> <ul> <li><a class="outsideLink" href="https://freesound.org/people/oliwoli/sounds/666295/">Room Tone - Hotel Bathroom with Buzzing Light and Vent, by oliwoli</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by/4.0/">license</a>)</li> <li><a class="outsideLink" href="https://freesound.org/people/JonathanTremblay/sounds/254783/">Buzzing Light, by JonathanTremblay</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by/3.0/">license</a>)</li> <li><a class="outsideLink" href="https://soundcloud.com/onlyinlapland/only-in-lapland-lapland-sound-collection-gusts-of-wind-through-birch-trees-forest">Gusts of Wind Through Birch Trees, Forest, by Only in Lapland</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by/3.0/">license</a>)</li> <li><a class="outsideLink" href="https://www.youtube.com/watch?v=-TTyiBbWxhY">Voice line from "More body cam video of Candace Clark's eviction" (0:25 mark), by CBS Chicago</a></li> <li><a class="outsideLink" href="https://freesound.org/people/marb7e/sounds/620354/">Whoosh+Sword_Hit Flesh.wav, by marb7e</a> as knife.mp3, knife.ogg</li> </ul> <p style="text-decoration: underline">Tracks</p> <ul> <li>Main menu: <a class="outsideLink" href="https://thehathawayfamilyplot.bandcamp.com/track/i-need-your-help">i need your help, by The Hathaway Family Plot</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by-nc-sa/3.0/">license</a>)</li> <li>Dream bedroom and stairwell: <a class="outsideLink" href="https://thehathawayfamilyplot.bandcamp.com/track/a-beam-of-light-bursts-through-the-clouds-in-saint-pacificus-cemetery">A Beam of Light Bursts Through the Clouds in Saint Pacificus Cemetery, by The Hathaway Family Plot</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by-nc-sa/3.0/">license</a>)</li> <li>Level 0: <a class="outsideLink" href="https://soundcloud.com/skrotraff/poison-flowers-of-summer">Poison Flowers of Summer, by Skrotraff</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by/3.0/">license</a>)</li> <li>Level W-4: <a class="outsideLink" href="https://thehathawayfamilyplot.bandcamp.com/track/feeling-time-disappear">feeling time disappear, by The Hathaway Family Plot</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by-nc-sa/3.0/">license</a>)</li> <li>Level W-11 (before): <a class="outsideLink" href="https://thehathawayfamilyplot.bandcamp.com/track/i-cant-do-this">I Can't Do This, by The Hathaway Family Plot</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by-nc-sa/3.0/">license</a>)</li> <li>Level W-11 (after): <a class="outsideLink" href="https://thehathawayfamilyplot.bandcamp.com/track/anhedonia-onset">anhedonia onset, by The Hathaway Family Plot</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by-nc-sa/3.0/">license</a>)</li> <li>Level EYES: <a class="outsideLink" href="https://thehathawayfamilyplot.bandcamp.com/track/into-void">into void, by The Hathaway Family Plot</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by-nc-sa/3.0/">license</a>)</li> <li>Ending music: <a class="outsideLink" href="https://thehathawayfamilyplot.bandcamp.com/track/avan-ons">avançons, by The Hathaway Family Plot</a> and <a class="outsideLink" href="https://chezmonplaisir.bandcamp.com/music">Rrrrrose Azerty</a> (<a class="outsideLink" href="https://creativecommons.org/licenses/by/3.0/">license</a>)</li> </ul> <br/><hr/><br/> </div> <h3 class="linkReplaced removedOnClick" identifier="text">▶ Text Credits</h3> <div class="linkReplacer hidden" identifier="text"> <h3 class="linkHider" identifier="text">▼ Text Credits</h3> <p>Quotes used:</p> <blockquote>If we could sleep twenty-four hours a day, we would soon return to the primordial slime, the beatitude of that perfect torpor before Genesis—the dream of every consciousness sick of itself.</blockquote> <p>Emil Cioran, <em>The Trouble with Being Born</em></p><br/> <blockquote>MEMO FROM THE CEO: As the forces operating in today's marketplace become more shadowy and incomprehensible we must recommit ourselves every second of every day to a ceaseless striving for that elusive dream which we all share and which none of us can remember, if it ever existed in the first place.</blockquote> <p>Thomas Ligotti, "The Nightmare Network"</p><br/> <blockquote>Everything seems to be on the verge of disclosing its unreality and drifting off into the shadows. And the shadows themselves collapse and slide down rooftops, trickle down walls and into the streets like black rain.</blockquote> <p>Thomas Ligotti, "New Faces in the City"</p><br/> <blockquote>There are rooms which are sometimes forgotten. Unvisited for months on end, they wilt neglected between the old walls and it happens that they close in on themselves, become overgrown with bricks, and, lost once and for all to our memory, forfeit their only claim to existence.</blockquote> <p>Bruno Schulz, "Treatise on Tailors' Dummies: Conclusion"</p> <br/><hr/><br/> </div> <h3 class="linkReplaced removedOnClick" identifier="other">▶ Other Credits</h3> <div class="linkReplacer hidden" identifier="other"> <h3 class="linkHider" identifier="other">▼ Other Credits</h3> <ul> <li>Windows 10 interface from <a class="outsideLink" href="https://github.com/riteshkukreja/window10">riteshkukreja's window10 repository on Github</a>.</li> </ul> <br/><hr/><br/> </div> <br /> <p>[[Return to Main Menu|start]]</p> </div> <% $(function () { mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/title2.gif'); opacity: 60%; filter: saturate(0)"></div> <div id="container" style="text-align: center; height: 100%; width: 100%; position: absolute"> <img src="assets/loading.gif" style="height: 75%; margin-left: 2%" alt="Loading image..."> <p id="proceed">[[CONTINUE|start]]</p> </div> <% $(function () { mainScript.globalScript(); const loading = document.createElement("h3"); /* loading.innerHTML = "...LOADING, PLEASE WAIT...<br/>PLEASE REFRESH IF THE PAGE IS STUCK ON LOADING."; */ loading.innerHTML = "...LOADING..."; const container = document.getElementById("container"); container.insertBefore(loading, container.firstChild); mainScript.preload( ['assets/arrow.gif', 'assets/beach/f1.gif', 'assets/beach/f2.gif', 'assets/beach/f3.gif', 'assets/beach/f4.gif', 'assets/beach/f5.gif', 'assets/beach/waterDown.gif', 'assets/beach/waterUp.gif', 'assets/bedroom/bedroom_asleep.gif', 'assets/bedroom/bedroom_asleep2.gif', 'assets/bedroom/bedroom_awake.png', 'assets/bedroom/bedroom_awake_end.png', 'assets/bedroom/cage.gif', 'assets/bedroom/diary.gif', 'assets/bedroom/door.png', 'assets/bedroom/human_end.png', 'assets/bedroom/human_end2.png', 'assets/bedroom/knife2.png', 'assets/bedroom/lighting_asleep.png', 'assets/bedroom/lighting_awake.png', 'assets/bedroom/lighting_awake_end.png', 'assets/bedroom/note.gif', 'assets/bedroom/notice.gif', 'assets/bedroom/notice.png', 'assets/bedroom/painting.gif', 'assets/bedroom/police.png', 'assets/bedroom/sleep.gif', 'assets/bigDoor4.gif', 'assets/black1.gif', 'assets/black2.gif', 'assets/cross.gif', 'assets/cursor/knife.png', 'assets/cursor/meat.png', 'assets/diary/diaryBg.png', 'assets/diary/icon.gif', 'assets/diary/pageBird1040.png', 'assets/diary/pageChurn.png', 'assets/diary/pageCioran.png', 'assets/diary/pageHarvest.png', 'assets/diary/pageMeatPlastic.png', 'assets/diary/pageMemo.png', 'assets/diary/pageOld.png', 'assets/diary/pageRain.png', 'assets/diary/pageRoom.png', 'assets/diary/pageScribble.png', 'assets/diary/pageWorkerSteps.png', 'assets/door4_dead.png', 'assets/door_glitch1.gif', 'assets/door_glitch2.gif', 'assets/door_glitch3.gif', 'assets/door_glitch4.gif', 'assets/door_glitch4_distort.gif', 'assets/door_glitch5.gif', 'assets/door_glitch6.gif', 'assets/dream.gif', 'assets/factory/asset1.gif', 'assets/factory/asset10.gif', 'assets/factory/asset11.gif', 'assets/factory/asset2.gif', 'assets/factory/asset3.gif', 'assets/factory/asset4.gif', 'assets/factory/asset5.gif', 'assets/factory/asset6.gif', 'assets/factory/asset7.gif', 'assets/factory/asset8.gif', 'assets/factory/asset9.gif', 'assets/factory/f1.gif', 'assets/factory/f12.gif', 'assets/factory/f12b.gif', 'assets/factory/f16a.gif', 'assets/factory/f16b.gif', 'assets/factory/f16c.gif', 'assets/factory/f17.gif', 'assets/factory/f18.gif', 'assets/factory/f18b.gif', 'assets/factory/f19.gif', 'assets/factory/f2.gif', 'assets/factory/f21.gif', 'assets/factory/f22.gif', 'assets/factory/f23.gif', 'assets/factory/f23b.gif', 'assets/factory/f23c.gif', 'assets/factory/f24.gif', 'assets/factory/f24b.gif', 'assets/factory/f25b.gif', 'assets/factory/f27.gif', 'assets/factory/f28.gif', 'assets/factory/f2b.gif', 'assets/factory/f3.gif', 'assets/factory/f30.gif', 'assets/factory/f30b.gif', 'assets/factory/f32.gif', 'assets/factory/f33.gif', 'assets/factory/f3b.gif', 'assets/factory/f4.gif', 'assets/factory/f4b.gif', 'assets/factory/f8.gif', 'assets/factory/f8b.gif', 'assets/factory/f9.gif', 'assets/factory/f9b.gif', 'assets/factory/g1.gif', 'assets/factory/g2.gif', 'assets/factory/g3.gif', 'assets/factory/g4.gif', 'assets/factory/h1.gif', 'assets/factory/h2.gif', 'assets/factory/h3.gif', 'assets/factory/h4.gif', 'assets/factory/l1.gif', 'assets/factory/l2.gif', 'assets/factory/l3.gif', 'assets/form1.gif', 'assets/form2.gif', 'assets/human1.gif', 'assets/human2.gif', 'assets/items/meat.gif', 'assets/items/meatcart.gif', 'assets/knife.gif', 'assets/mines/9cave0.png.gif', 'assets/mines/cart.gif', 'assets/mines/cart2.gif', 'assets/mines/cart_door.gif', 'assets/mines/meatcart0.png', 'assets/mines/meatcart1.gif', 'assets/mines/meatpit3_ballA.gif', 'assets/mines/meatpit3_ballB.gif', 'assets/mines/meatpit3_ballC.gif', 'assets/mines/meatpit3_ballD.gif', 'assets/mines/meatpit3_bottom.gif', 'assets/mines/meatpit3_bottom1.png', 'assets/mines/meatpit3_tendrils.gif', 'assets/mines/meatpit3_top.gif', 'assets/mines/meatpit3b.gif', 'assets/mines/meatpit3c.gif', 'assets/mines/meatpitA.gif', 'assets/mines/meatpitB.gif', 'assets/mines/meatpitD.gif', 'assets/mines/meatpitE.gif', 'assets/mines/meatpitF.gif', 'assets/mines/meatpitH.gif', 'assets/mines/meatpitI.gif', 'assets/mines/meatpit_bg.gif', 'assets/mines/worker1.gif', 'assets/mines/worker2.gif', 'assets/mines/worker3.gif', 'assets/mines/worker4.gif', 'assets/office/boffice10.gif', 'assets/office/boffice1a.gif', 'assets/office/boffice1b.gif', 'assets/office/boffice2.gif', 'assets/office/boffice3.gif', 'assets/office/boffice5.gif', 'assets/office/boffice6.gif', 'assets/office/boffice7.gif', 'assets/office/boffice9.gif', 'assets/office/desk.gif', 'assets/office/mark0.png', 'assets/office/mark1.png', 'assets/office/mark2.png', 'assets/office/mark3.png', 'assets/office/mark4.png', 'assets/office/mark5.png', 'assets/office/mark8.png', 'assets/office/office1.gif', 'assets/office/office10.gif', 'assets/office/office11.gif', 'assets/office/office12.gif', 'assets/office/office13.gif', 'assets/office/office14.gif', 'assets/office/office15.gif', 'assets/office/office16.gif', 'assets/office/office18.gif', 'assets/office/office19.gif', 'assets/office/office2.gif', 'assets/office/office20.gif', 'assets/office/office20b.gif', 'assets/office/office20c.gif', 'assets/office/office3.gif', 'assets/office/office4.gif', 'assets/office/office5.gif', 'assets/office/office6.gif', 'assets/office/office7.gif', 'assets/office/office7b.gif', 'assets/office/office8.gif', 'assets/office/office9.gif', 'assets/office/officer01.gif', 'assets/office/officer02.gif', 'assets/office/officer03.gif', 'assets/office/officer04.gif', 'assets/office/officer05.gif', 'assets/office/officer06.gif', 'assets/office/officer07.gif', 'assets/office/officer1.gif', 'assets/office/phone.gif', 'assets/office/sign.png', 'assets/office/w11.png', 'assets/office/w11_2.png', 'assets/person1.gif', 'assets/person4.gif', 'assets/pool/locker1.gif', 'assets/pool/locker2.gif', 'assets/pool/locker3.gif', 'assets/pool/pool1.gif', 'assets/pool/pool2.gif', 'assets/pool/pool3.gif', 'assets/pool/pool6.gif', 'assets/pool/pool7.gif', 'assets/pool/underwater.gif', 'assets/smoke/bg2.gif', 'assets/smoke/black1.gif', 'assets/smoke/black2.gif', 'assets/smoke/black3.gif', 'assets/smoke/person1.gif', 'assets/smoke/person2.gif', 'assets/smoke/person3.gif', 'assets/smoke/person5.gif', 'assets/smoke/person6.gif', 'assets/smoke/person6b.gif', 'assets/title1.gif', 'assets/tower/corridor.gif', 'assets/tower/stairwell.gif', 'assets/tower/stairwell2.gif', 'assets/white2.gif', 'assets/white3.gif'] ); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/title1.gif');"></div> <div class="coolBorder" style="text-align: center; position: absolute; top: 5%; left: 25%; width: 50%;padding: 20px;"> <h1>The Invisible Smoke Factory</h1> <p>Game by <a href="https://kadw.neocities.org">KADW</a> | <small>v1.1.5</small></p> <p>[[Begin|transition1]] | [[About|about]] | [[Credits|credits]]</p> </div> <% $(function () { mainScript.globalScript(); s.myInventory = new mainScript.Inventory(); s.myDiary = new mainScript.Diary(); s.myDiary.addPage("old"); /* s.myDiary.getAllPages(); */ s.myDiaryMenu = new mainScript.DiaryMenu(s.myDiary, "old"); s.takenMeat = false; s.addMeatToCart = false; s.takenCart = false; s.officeUnlocked = false; s.smokeUnlocked = false; s.officeMark = 0; s.MAX_OFFICE_MARK = 40; s.computerBroke = false; s.cubicle1Visited = 0; s.bossFlag1 = false; s.human1Gone = false; s.human2Gone = false; s.dreamCount = 0; s.MAX_DREAM_COUNT = 2; s.end2Flag = false; s.factoryShortcutOpen = false; }); %><div id="contents"> <div id="bg" className="fullscreenBg"></div> <div id="passagesFake"> <div id="screenContents" className="absoluteAlign"> <div id="passages"></div> </div> <div id="screenCover" className="fullscreenBg"></div> </div> </div><div id="transition1" class="transition"> <span id="above"></span> <hr> <span id="below"></span> </div> <div id="clickTrigger1" class="interactable" style="position: absolute; width: 100%; height: 100%;"></div> <div id="cover" class="absoluteAlign bothHalves hidden" style="pointer-events: none; background-image: url('assets/white2.gif'); background-size: 15%; mix-blend-mode: soft-light;"></div> <% $(function () { mainScript.globalScript(); document.getElementById("above").innerText = s.myDiary.foundPages.length; document.getElementById("below").innerText = s.myDiary.pages.length; const passage = document.querySelector("tw-passage"); for (let i = 0; i < s.dreamCount; i++) { const newCircle = document.createElement("div"); newCircle.classList.add("transition-circle"); const width = 30 + i * 2; const height = 45 + i * 2; const marginLeft = "-" + (width/2) + "%"; const marginTop = "-" + (height/2) + "%"; // Grows larger with each successive dream collected newCircle.style.width = (30 + i * 2) + "%"; newCircle.style.height = (45 + i * 2) + "%"; // To center the circles newCircle.style["margin-left"] = marginLeft; newCircle.style["margin-top"] = marginTop; if (s.dreamCount === s.MAX_DREAM_COUNT) { newCircle.classList.add("transition-circle-complete"); } passage.insertBefore(newCircle, passage.firstChild); } if (s.dreamCount === s.MAX_DREAM_COUNT) { document.getElementById("cover").classList.remove("hidden"); } document.getElementById("clickTrigger1").addEventListener("click", () => { if (s.myDiary.foundPages.length === s.myDiary.pages.length) { window.story.show("transition2"); } else { window.story.show("bedroom_awake"); } }); }); %><div id="transition2" class="interactable" style="text-align: center; height: 100%; width: 100%; position: absolute"> <p style="font-size: 30px; margin-top: 20%;">They are knocking on the door.</p> </div> <% $(function () { mainScript.globalScript(); mainScript.musicManager.playSoundEffect("knock"); document.getElementById("transition2").addEventListener("click", () => { if (s.dreamCount === 0) { window.story.show("bedroom_end"); } else { window.story.show("bedroom_end2"); } }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/bedroom/bedroom_awake.png');"></div> <div class="absoluteAlign bothHalves vignette"></div> <div id="bed1" class="interactable" style="inset: 42% 5% 35% 55%"></div> <img style="width: 12%; top: 65%; left: 67%;" src="assets/bedroom/cage.gif" /> <img id="diaryOpener" class="interactable" style="width: 6%; top: 66%; left: 7%; filter: hue-rotate(150deg);" src="assets/bedroom/diary.gif"> <!-- <img style="width: 3%; top: 70%; left: 44%" src="assets/bedroom/note.gif" /> --> <img style="width: 100%; animation: transparent 5s infinite ease-in-out; pointer-events: none" src="assets/bedroom/lighting_awake.png" /> <div class="interactable panelOpener" identifier="computer" style="width: 7%;top: 51%;height: 12%;left: 13%;"></div> <div class="panelFull absoluteAlign hidden" identifier="computer"> <div id="internal"> <!-- BEGIN WINDOWS 10 From https://github.com/riteshkukreja/window10 --> <div style=" background-image: url('windows_assets/bg.jpg'); background-size: cover; " id="window" > <div class="desktop"> <div class="window medium ui-draggable ui-draggable-handle ui-resizable front" id="3" style="width: 90%; inset: 5% auto auto 5%; height: 90%" > <div class="top"> <span class="icon"><img src="windows_assets/edge.png" /></span ><span class="name">Edge</span><span class="close"></span ><span class="max"></span><span class="min"></span> </div> <div class="body"> <iframe id="windowsiframe" src="https://memegine.com/?q=2meirl4meirl"/> </div> <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90"></div> <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90"></div> <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90" ></div> </div> </div> <div class="bottom_bar"> <span class="start_btn"><img src="windows_assets/start.png" /></span ><span class="search_btn" ><input type="text" placeholder="Search Windows" /></span ><span class="bar_icon_holder"> <span class="bar_icon active front" ><img class="icon_bar_img" src="windows_assets/edge.png" alt="Edge" /></span ><span class="bar_icon" ><img class="icon_bar_img" src="windows_assets/explorer.ico" alt="File Explorer" /></span></span ><span class="sidebar_icon_holder" ><span class="sidebar_icon" ><img class="sidebar_icon_img" src="windows_assets/battery.png" alt="Battery" /></span ><span class="sidebar_icon" ><img class="sidebar_icon_img" src="windows_assets/wifi.ico" alt="Wifi" /></span ><span class="sidebar_icon" ><img class="sidebar_icon_img" src="windows_assets/volume.png" alt="Sound" /></span ><span class="sidebar_icon" ><img class="sidebar_icon_img" src="windows_assets/notification.png" alt="Notification" /></span></span ><span class="date_holder" ><span class="home_time">3:28 PM</span ><span class="home_date">6/23/2024</span></span ><span class="home_focus"></span> </div> </div> <!-- END WINDOWS 10 --> </div> </div> <div class="panelOpener interactable" identifier="notice" style="width: 2.5%;height: 5.5%;top: 78%;left: 45%;transform: rotate(90deg) skew(8deg, -20deg);background-image: url('assets/bedroom/notice.png');background-size: contain; filter: brightness(0.5);"></div> <div class="panelFull panelSmall absoluteAlign hidden" identifier="notice" style="height: 70%; width: 37%;"> <img src="assets/bedroom/notice.png" style="height: 100%;filter: brightness(0.6);"> </div> <div style="width: 15%;top: 15%;height: 43%;left: 26%; cursor: not-allowed"></div> <% /* From https://github.com/riteshkukreja/window10/blob/c681a18ddf805077794739f1f965cb1a734bd412/script/home.js#L220 */ function drawTime() { let now = new Date(); var hours = now.getHours() < 10 ? "0" + now.getHours() : now.getHours(); var minutes = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes(); var text = 'AM'; if(hours >= 12) { text = 'PM'; } if(hours > 12) hours = hours % 12; return hours + ":" + minutes + " " + text; } function drawDate() { let now = new Date(); return (now.getMonth()+1) + "/" + now.getDate() + "/" + now.getFullYear(); } $(function () { mainScript.globalScript(); document.getElementById("bed1").addEventListener("click", () => { mainScript.playCutsceneComplex(["assets/bedroom/sleep.gif"], [4000], false, () => { window.story.show("bedroom_dream"); }); }); if (s.computerBroke) { const computer = document.querySelector("#internal"); computer.innerHTML = ""; } else { const homeTime = document.querySelector(".home_time"); homeTime.innerHTML = drawTime(); const homeDate = document.querySelector(".home_date"); homeDate.innerHTML = drawDate(); const screen = document.getElementById("window"); screen.addEventListener("click", () => { if (!s.computerBroke) { s.computerBroke = true; mainScript.musicManager.playSoundEffect("windowsError"); screen.innerHTML = '<img src="windows_assets/deathScreen.png" id="deathscreen">'; } }); } document.getElementById("diaryOpener").addEventListener("click", () => { s.myDiaryMenu.openDiary(); }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/bedroom/bedroom_asleep.gif'); transform: scaleX(-1)"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 100%; animation: rotatehuelight 4s infinite alternate; pointer-events: none;" src="assets/bedroom/lighting_asleep.png" /> <div id="door1" class="interactable" style="inset: 16% 60% 42% 27%"></div> <!-- screen (unused) <div class="interactable panelOpener" identifier="computer" style="width: 4%; border: 1px solid red;top: 50%;height: 8%;left: 14%;transform: skew(-5deg, -50deg);"></div> --> <% $(function () { mainScript.globalScript(); document.getElementById("door1").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("corridor1"); }); /* s.myDiary.addPageItem("room", 22, 67, 5); */ }); %><div class="absoluteAlign bothHalves gameBg"></div> <img id="door1" src="assets/bedroom/door.png" style="width: 15%; top: 15%; left: 26%; filter: contrast(0) brightness(0)"/> <img src="assets/bedroom/police.png" style="top: 19%; left: 27%; filter: contrast(0.95) saturate(0.3);width: 14%;opacity: 10%;"> <img id="door2" src="assets/bedroom/door.png" style="width: 15%; top: 15%; left: 26%"/> <div class="absoluteAlign bothHalves" style="background-image: url('assets/bedroom/bedroom_awake_end.png');"></div> <div class="absoluteAlign bothHalves vignette"></div> <div id="bed1" style="inset: 42% 5% 35% 55%"></div> <img style="width: 12%; top: 65%; left: 67%;" src="assets/bedroom/cage.gif" /> <img id="diaryOpener" style="width: 6%; top: 66%; left: 7%" src="assets/bedroom/diary.gif" /> <img style="width: 100%; animation: transparent 5s infinite ease-in-out; pointer-events: none" src="assets/bedroom/lighting_awake_end.png" /> <div class="panelOpener" identifier="notice" style="width: 2.5%;height: 5.5%;top: 78%;left: 45%;transform: rotate(90deg) skew(8deg, -20deg);background-image: url('assets/bedroom/notice.png');background-size: contain; filter: brightness(0.5);"></div> <!-- <div id="clickTrigger" class="interactable" style="width: 100%; height: 100%;"></div> --> <div id="clickTrigger2" class="interactable" style="width: 15%;top: 15%;height: 43%;left: 26%;"></div> <% $(function () { mainScript.globalScript(); mainScript.musicManager.playSoundEffect("sheriff"); let doorOpened = false; const clickTrigger2 = document.getElementById("clickTrigger2"); clickTrigger2.addEventListener("click", openDoor); setTimeout(openDoor, 9000); function openDoor() { if (!doorOpened) { doorOpened = true; const door2 = document.getElementById("door2"); if (door2) { mainScript.musicManager.playSoundEffect("door"); mainScript.musicManager.getSoundEffect("knock").stop(); door2.classList.add("doorOpen"); clickTrigger2.remove(); setTimeout(() => { window.story.show("end1"); }, 1000); } } } }); %><div style="text-align: center; height: 80%; width: 100%; position: absolute;margin-top: 5%;"> <h3>END</h3> <img src="assets/bedroom/notice.gif" style="height: 75%;"/> </div> <% $(function () { mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="door1" src="assets/bedroom/door.png" style="width: 15%; top: 15%; left: 26%; filter: contrast(0) brightness(0)"/> <img src="assets/bedroom/human_end2.png" style="top: 19%; left: 27%; width: 14%;opacity: 30%;"> <img src="assets/bedroom/knife2.png" style="top: 19%; left: 27%; width: 14%; filter: none"> <img id="door2" src="assets/bedroom/door.png" style="width: 15%; top: 15%; left: 26%"/> <div class="absoluteAlign bothHalves" style="background-image: url('assets/bedroom/bedroom_awake_end.png');"></div> <div class="absoluteAlign bothHalves vignette"></div> <div id="bed1" style="inset: 42% 5% 35% 55%"></div> <img style="width: 12%; top: 65%; left: 67%;" src="assets/bedroom/cage.gif" /> <img id="diaryOpener" style="width: 6%; top: 66%; left: 7%" src="assets/bedroom/diary.gif" /> <img style="width: 100%; animation: transparent 5s infinite ease-in-out; pointer-events: none" src="assets/bedroom/lighting_awake_end.png" /> <div class="panelOpener" identifier="notice" style="width: 2.5%;height: 5.5%;top: 78%;left: 45%;transform: rotate(90deg) skew(8deg, -20deg);background-image: url('assets/bedroom/notice.png');background-size: contain; filter: brightness(0.5);"></div> <!-- <div id="clickTrigger" class="interactable" style="width: 100%; height: 100%;"></div> --> <div id="clickTrigger2" class="interactable" style="width: 15%;top: 15%;height: 43%;left: 26%;"></div> <% $(function () { mainScript.globalScript(); mainScript.musicManager.playSoundEffect("screech"); let doorOpened = false; const clickTrigger2 = document.getElementById("clickTrigger2"); clickTrigger2.addEventListener("click", openDoor); setTimeout(openDoor, 9000); function openDoor() { if (!doorOpened) { doorOpened = true; const door2 = document.getElementById("door2"); if (door2) { mainScript.musicManager.getSoundEffect("screech").stop(); mainScript.musicManager.getSoundEffect("knock").stop(); mainScript.musicManager.playSoundEffect("door"); door2.classList.add("doorOpen"); clickTrigger2.remove(); setTimeout(() => { window.story.show("end3"); }, 1000); } } } }); %><div style="text-align: center; height: 80%; width: 100%; position: absolute;margin-top: 5%;"> <h3>END</h3> <img src="assets/dream.gif" style="height: 45%; margin: 5%"/> </div> <% $(function () { mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/tower/corridor.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <div style="inset: 85% 0 0 0; background-color: #00000055;filter: blur(4px);"></div> <img src="assets/bigDoor4.gif" style="top: 50%;width: 13%;left: 70%;filter: brightness(2.3) hue-rotate(-30deg) blur(5px);"> <img id="bedroomDoor" class="interactable" src="assets/bigDoor4.gif" style="top: 50%;width: 13%;left: 70%;filter: brightness(2.3) hue-rotate(-30deg);"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "stairwell1"); document.getElementById("bedroomDoor").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("bedroom_dream"); }); s.myDiary.addPageItem("churn", 62, 64, 5); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/tower/stairwell.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img class="interactable" id="door_mines" style="width: 6%; top: 14%; left: 40.5%" src="assets/door_glitch1.gif"/> <div class="stairwellNumber">0</div> <img id="cross" class="hidden" style="width: 3%; top: 9%; left: 42%; opacity: 40%;" src="assets/cross.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "corridor1", 58, 57); mainScript.addArrow("up", "stairwell2", 2, 63); document.getElementById("door_mines").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("mine1"); }); if (s.myDiary.checkPageFound("scribble") && s.myDiary.checkPageFound("meatPlastic")) { document.getElementById("cross").classList.remove("hidden"); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/tower/stairwell2.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img class="interactable" id="door_factory" style="width: 6%; top: 14%; left: 40.5%" src="assets/door_glitch3.gif"/> <div class="stairwellNumber">W-4</div> <img id="cross" class="hidden" style="width: 3%; top: 9%; left: 42%; opacity: 40%;" src="assets/cross.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "stairwell1", 58, 57); mainScript.addArrow("up", "stairwell3", 2, 63); document.getElementById("door_factory").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("factory1"); }); if (s.myDiary.checkPageFound("cioran") && s.myDiary.checkPageFound("harvest") && s.myDiary.checkPageFound("workerSteps") && s.myDiary.checkPageFound("memo") && s.myDiary.checkPageFound("room")) { document.getElementById("cross").classList.remove("hidden"); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/tower/stairwell.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img class="interactable" id="door_office" style="width: 6%; top: 14%; left: 40.5%" src="assets/door_glitch4.gif"/> <div class="stairwellNumber">W-11</div> <img id="cross" class="hidden" style="width: 3%; top: 9%; left: 42%; opacity: 40%;" src="assets/cross.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "stairwell2", 58, 57); if (s.smokeUnlocked) { mainScript.addArrow("up", "stairwell4", 2, 63); } else { mainScript.addArrow("up", "stairwellLoop", 2, 63); } s.officeMark = 0; document.getElementById("door_office").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); if (s.officeUnlocked) { window.story.show("office0_new"); } else { window.story.show("office0"); } }); if (s.myDiary.checkPageFound("rain") && s.myDiary.checkPageFound("bird1040")) { document.getElementById("cross").classList.remove("hidden"); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/tower/stairwell.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img class="interactable" id="door_smoke" style="width: 6%; top: 14%; left: 40.5%;opacity: 60%;" src="assets/door_glitch6.gif"> <div class="stairwellNumber">1040</div> <img id="cross" style="width: 3%; top: 9%; left: 42%; opacity: 40%;" src="assets/cross.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "stairwell3", 58, 57); mainScript.addArrow("up", "stairwellLoop", 2, 63); document.getElementById("door_smoke").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("smoke1"); }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/tower/stairwell2.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); if (s.smokeUnlocked) { mainScript.addArrow("down", "stairwell4", 58, 57); } else { mainScript.addArrow("down", "stairwell3", 58, 57); } mainScript.addArrow("up", "stairwellLoop2", 2, 63); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/tower/stairwell.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); if (s.smokeUnlocked) { mainScript.addArrow("down", "stairwell4", 58, 57); } else { mainScript.addArrow("down", "stairwell3", 58, 57); } mainScript.addArrow("up", "stairwellLoop", 2, 63); }); %><div class="absoluteAlign bothHalves vignette"></div> <img src="assets/beach/waterUp.gif" style="width: 100%;filter: hue-rotate(70deg);"> <img id="human" class="knife-cursor" style="width: 10%; top: 39%; left: 45%;filter: brightness(0.8);" src="assets/human2.gif"/> <img style="width: 5%; top: 32%; left: 48%; pointer-events: none; opacity: 90%" src="assets/dream.gif"/> <img src="assets/beach/waterDown.gif" style="width: 100%;top: 75%;filter: saturate(1.6) hue-rotate(108deg);"> <div class="absoluteAlign bothHalves" style="pointer-events: none; background-image: url('assets/white2.gif'); background-size: 20%; mix-blend-mode: soft-light; opacity: 25%"></div> <% $(function () { mainScript.globalScript(); human.addEventListener("click", () => { s.human2Gone = true; s.dreamCount++; mainScript.musicManager.playSoundEffect("jingle1"); window.story.show("pureVoid"); }); mainScript.addArrow("down", "beach3"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/beach/f5.gif'); transform: scaleX(-1)"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "beach1", 90, 5); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/beach/f1.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("upleft", "beach0", 68, 2, 240); mainScript.addArrow("right", "beach2", 78); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/beach/f2.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "beach1", 78); mainScript.addArrow("right", "beach3", 78); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/beach/f3.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "beach2", 78); mainScript.addArrow("right", "beach4", 78); mainScript.addArrow("up", "beachWater", 38); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/beach/f4.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("downleft", "beach3", 90, 79); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/locker1.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "pool1", 65, 55); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/locker2.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "pool0"); mainScript.addArrow("right", "pool2"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/locker3.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "pool1"); mainScript.addArrow("up", "pool4", 75, 23); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/pool2.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "pool2"); mainScript.addArrow("upright", "pool7", 20); mainScript.addArrow("downleft", "pool5"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/pool1.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("downright", "pool4", 95, 10); mainScript.addArrow("upright", "pool6", 15, 10); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/pool3.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "pool5", 95, 5); mainScript.addArrow("right", "pool_underwater"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/pool6.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "pool4", 95, 90); mainScript.addArrow("up", "pool8", 35, 90); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/pool7.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "pool7"); mainScript.addArrow("up", "pool_underwater", 40, 47); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/pool/underwater.gif');filter: saturate(0) brightness(0.7);"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="human" class="knife-cursor" style="width: 25%; top: 35%; left: 32%;filter: saturate(0.6) hue-rotate(-30deg);" src="assets/human1.gif"> <img style="width: 10%; top: 20%; left: 32%; pointer-events: none; opacity: 90%" src="assets/dream.gif"> <img src="assets/pool/underwater.gif" style="width: 100%; mix-blend-mode: hard-light;opacity: 79%; pointer-events: none;filter: hue-rotate(-8deg) saturate(0.80);"> <div class="absoluteAlign bothHalves" style="pointer-events: none; background-image: url('assets/white2.gif'); background-size: 20%; mix-blend-mode: soft-light; opacity: 20%"></div> <% $(function () { mainScript.globalScript(); human.addEventListener("click", () => { s.human1Gone = true; s.dreamCount++; mainScript.musicManager.playSoundEffect("jingle1"); window.story.show("pureVoid"); }); }); %><div class="absoluteAlign bothHalves gameBg"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); /* <img class="arrow down" src="assets/arrow.gif" alt="arrow" style="rotate(90deg); top: 95%; left: 48%"/> <img class="arrow left" src="assets/arrow.gif" alt="arrow" style="rotate(180deg); top: 45%; left: 1%"/> <img class="arrow right" src="assets/arrow.gif" alt="arrow" style="top: 45%; left: 95%"/> function travel() { const gameBg = document.getElementByClass("gameBg"); if (gameBg.classList.contains("void1")) { gameBg.classList.remove("void1"); gameBg.classList.add("void2"); } else { gameBg.classList.remove("void2"); gameBg.classList.add("void1"); } } Array.from(document.querySelectorAll(".arrow")).forEach((arrow) => { arrow.addEventListener("click", travel); }); */ }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/smoke/black3.gif'); background-size: 0.3%; image-rendering: crisp-edges"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="door" style="width: 4%; top: 49%; left: 64%; transform: skew(-2deg, -3deg); cursor: pointer" src="assets/door_glitch6.gif"> <div class="absoluteAlign smokeBg1"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "smoke2", 75); mainScript.addArrow("right", "smoke3", 75); mainScript.addArrow("up", "smoke5", 45, 48); document.getElementById("door").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("stairwell4"); }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/smoke/black1.gif'); background-size: 4%"></div> <div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign smokeBg1" style="left: -1050px"></div> <img style="width: 10%; top: 0%; left: 33%" src="assets/smoke/person2.gif"/> <img style="width: 10%; top: 0%; left: 48%" src="assets/smoke/person2.gif"/> <img style="width: 10%; top: 0%; left: 63%" src="assets/smoke/person2.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "smoke1", 75); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/smoke/black2.gif'); background-size: 15%"></div> <div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign smokeBg1" style="left: -1050px"></div> <img style="width: 25%; top: 40%; left: 33%" src="assets/smoke/person5.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "smoke1", 75); mainScript.addArrow("right", "smoke4", 75); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/smoke/black2.gif'); background-size: 6%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="boss" style="width: 95%; top: -10%; left: 5%; cursor: pointer" src="assets/smoke/person3.gif"> <div class="absoluteAlign smokeBg1" style="left: -1150px; top: 25%"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "smoke3", 75); const boss = document.getElementById("boss"); if (!s.bossFlag1) { boss.addEventListener("click", () => { if (!s.bossFlag1) { mainScript.showDialogue("Boss", mainScript.dialogue.bossDialogue); s.bossFlag1 = true; boss.style.cursor = "default"; } }); } else { if (s.dreamCount < s.MAX_DREAM_COUNT) { boss.addEventListener("click", () => { mainScript.showDialogue("Boss", mainScript.dialogue.bossDialogue2); }); } else { boss.addEventListener("click", () => { if (!s.end2Flag) { mainScript.showDialogue("Boss", mainScript.dialogue.bossDialogueEnd); s.end2Flag = true; boss.style.cursor = "default"; } }); } } }); %><div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign smokeBg1" style="left: -1420px"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "smoke7", 45, 48); mainScript.addArrow("down", "smoke1"); }); %><div class="absoluteAlign bothHalves vignette"></div> <img src="assets/smoke/person6.gif" style="height: 200%; top: -140%"/> <div class="absoluteAlign smokeBg1" style="left: -1110px"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "smoke8"); mainScript.addArrow("down", "smoke5"); }); %><div class="absoluteAlign bothHalves vignette"></div> <img src="assets/smoke/person6.gif" style="height: 200%; top: -50%"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "smoke9"); mainScript.addArrow("down", "smoke7"); }); %><div class="absoluteAlign bothHalves vignette"></div> <img src="assets/smoke/person6.gif" style="height: 200%; top: 20%"/> <img id="end2" src="assets/smoke/person6b.gif" class="hidden" style="width: 100%; top: 20%"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "smoke8"); if (s.end2Flag) { document.getElementById("end2").classList.remove("hidden"); mainScript.addArrow("down", "smoke_end1", 70, 44); } }); %><div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit_bg.gif'); background-size: 150%; background-position: 100%; opacity: 20%;"></div> <div class="absoluteAlign bothHalves" style="pointer-events: none; background-image: url('assets/smoke/black2.gif'); background-size: 10%; opacity: 55%;mix-blend-mode: exclusion;"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "smoke_end2"); }); %><div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit_bg.gif'); background-size: 150%; background-position: 0%; opacity: 10%;"></div> <div class="absoluteAlign bothHalves" style="pointer-events: none; background-image: url('assets/smoke/black2.gif'); background-size: 10%; opacity: 25%;mix-blend-mode: exclusion;"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "smoke_end3"); }); %><div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit_bg.gif'); background-size: 150%; background-position: 50%; opacity: 5%;"></div> <div class="absoluteAlign bothHalves" style="pointer-events: none; background-image: url('assets/smoke/black2.gif'); background-size: 10%; opacity: 10%;mix-blend-mode: exclusion;"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "smoke_end4b"); }); %><div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "smoke_end5"); }); %><div style="text-align: center; height: 80%; width: 100%; position: absolute;margin-top: 5%;"> <h3>END</h3> <img src="assets/smoke/person1.gif" style="height: 75%;margin: 2%;"> </div> <% $(function () { mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f24.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img class="interactable" id="door_factory" style="width: 7.5%; top: 38%; left: 19%;transform: skew(7deg, -12deg);filter: brightness(0.6) hue-rotate(50deg);" src="assets/door_glitch3.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "factory2"); document.getElementById("door_factory").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("stairwell2"); }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f24b.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "factory1"); mainScript.addArrow("right", "factory3"); mainScript.addArrow("up", "factoryC", 75, 54); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f24.gif'); transform: scaleX(-1)"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.addArrow("left", "factory2"); mainScript.addArrow("up", "factoryT"); mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f19.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.addArrow("down", "factory3"); mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f9.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.addArrow("up", "factoryD", 75, 49); mainScript.addArrow("down", "factory2"); mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f9b.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.addArrow("up", "factory6", 64, 49); mainScript.addArrow("down", "factoryC"); mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f27.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.addArrow("up", "factory7", 47, 49); mainScript.addArrow("down", "factoryD", 92, 49); if (s.factoryShortcutOpen) { mainScript.addArrow("left", "factoryU", 70, 27); } mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f18.gif');background-size: 105%;background-position-x: 90%;"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.addArrow("up", "factoryK", 50, 48); mainScript.addArrow("down", "factory6"); mainScript.addArrow("left", "factory9"); mainScript.addArrow("right", "factoryA"); mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f12.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <!-- <img style="width: 3%; top: 55%; left: 13%" src="assets/factory/asset11.gif"/> --> <img style="width: 4.5%; top: 55%; left: 16%" src="assets/factory/asset11.gif"/> <img style="width: 8%; top: 55%; left: 21%" src="assets/factory/asset11.gif"/> <img style="width: 15%; top: 56%; left: 32%" src="assets/factory/asset11.gif"/> <% $(function () { mainScript.addArrow("up", "factoryE", 60, 10, 260); mainScript.addArrow("right", "factory7"); mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f12b.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 11%; top: 56%; left: 37%" src="assets/factory/asset11.gif"/> <img style="width: 7%; top: 55%; left: 28%" src="assets/factory/asset11.gif"/> <% $(function () { mainScript.addArrow("down", "factory9", 95, 40, 80); mainScript.globalScript(); s.myDiary.addPageItem("workerSteps", 40, 18, 5); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f23.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 15%; top: 54%; left: 65%" src="assets/factory/asset8.gif"/> <% $(function () { mainScript.addArrow("left", "factory7"); mainScript.addArrow("right", "factoryB"); mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f23b.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.addArrow("left", "factoryA"); mainScript.addArrow("right", "factoryF"); mainScript.addArrow("up", "factoryG", 45, 55, 315); mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f23c.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 10%; top: 68%; left: 35%;transform: scaleX(-1);" src="assets/factory/asset8.gif"> <img style="width: 10%; top: 68%; left: 55%;" src="assets/factory/asset8.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "factoryB"); mainScript.addArrow("right", "factoryA"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f1.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factoryB"); s.myDiary.addPageItem("memo", 50, 50, 7); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f18b.gif');background-size: 110%;background-position-x: 50%; background-position-y: top"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "factoryL", 55, 48); mainScript.addArrow("down", "factory7"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/g3.gif');background-size: 115%;background-position-y: bottom;"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "factoryM", 68, 48); mainScript.addArrow("right", "factory2A", 75); mainScript.addArrow("down", "factoryK"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/g4.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "factory_cables1", 78, 53); mainScript.addArrow("up", "factory_closet1", 78, 38); mainScript.addArrow("down", "factoryL"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/g1.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "factory2B", 75); mainScript.addArrow("downleft", "factoryL"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/g2.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory2A"); mainScript.addArrow("upright", "factory2D", 78, 68); mainScript.addArrow("up", "factory2C", 58, 34); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f32.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory2B"); s.myDiary.addPageItem("room", 40, 52, 5); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f30.gif');background-size: 105%;background-position-x: 110%;"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory2B"); mainScript.addArrow("up", "factory2E", 52); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f30b.gif');background-size: 105%;background-position-x: 80%;"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory2C"); mainScript.addArrow("up", "factory2F", 52); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f28.gif');background-size: 110%;background-position-x: right;"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory2E"); mainScript.addArrow("up", "factory2G", 52); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f25b.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="human" class="hidden" style="width: 9%; top: 52%; left: 45%;filter: brightness(0.5)" src="assets/human2.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory2F"); const human = document.getElementById("human"); if (s.myInventory.checkHasItem("Dream Extractor")) { human.classList.add("knife-cursor"); human.addEventListener("click", () => { mainScript.musicManager.playSoundEffect("knife"); window.story.show("beach0"); }); } else { human.classList.add("help-cursor"); } if (!s.human2Gone) { human.classList.remove("hidden"); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/l1.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 18%; top: 0%; left: 37%;filter: brightness(1.6);transform: skew(-8deg)" src="assets/factory/asset4.gif"> <img style="width: 18%; top: 0%; left: 67%;filter: brightness(1.4);transform: skew(5deg)" src="assets/factory/asset4.gif"> <img style="width: 18%; top: 66%; left: -5%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 13%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 25%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 40%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 55%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 70%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 85%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear; animation-delay: -2s" src="assets/factory/asset5.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear; animation-delay: -1s" src="assets/factory/asset5.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear" src="assets/factory/asset5.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "factory6"); mainScript.addArrow("left", "factoryV"); document.querySelector(".arrow.right").addEventListener("click", () => { s.factoryShortcutOpen = true; }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/l2.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 18%; top: 66%; left: -5%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 13%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 25%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 40%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 55%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 70%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 85%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear; animation-delay: -2s" src="assets/factory/asset5.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear; animation-delay: -1s" src="assets/factory/asset5.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear" src="assets/factory/asset5.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "factoryU"); mainScript.addArrow("left", "factoryW"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/l3.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 18%; top: 0%; left: 37%;filter: brightness(1.6);transform: skew(8deg)" src="assets/factory/asset4.gif"> <img style="width: 18%; top: 66%; left: -5%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 13%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 25%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 40%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 55%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 70%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 66%; left: 85%;filter: brightness(1.6);transform: skew(-15deg); opacity: 90%" src="assets/factory/asset1.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear; animation-delay: -2s" src="assets/factory/asset5.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear; animation-delay: -1s" src="assets/factory/asset5.gif"> <img style="width: 18%; top: 52%; left: -20%; animation: factoryAnim1 3s infinite linear" src="assets/factory/asset5.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "factoryV"); mainScript.addArrow("down", "mineG"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f2.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factoryM"); mainScript.addArrow("up", "factory_cables2"); mainScript.addArrow("right", "factory_cables3"); mainScript.addArrow("left", "factory_cables5"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f2b.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory_cables1"); mainScript.addArrow("right", "factory_cables4"); mainScript.addArrow("left", "factory_cables6"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f3.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "factory_cables4"); mainScript.addArrow("left", "factory_cables1"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f3b.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory_cables3"); mainScript.addArrow("left", "factory_cables2"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f8.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "factory_cables1"); mainScript.addArrow("up", "factory_cables6"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/f33.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "factory_cables2"); mainScript.addArrow("down", "factory_cables5"); s.myDiary.addPageItem("cioran", 60, 47.5, 5); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/h1.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factoryM"); mainScript.addArrow("left", "factory_closet2"); mainScript.addArrow("up", "factory_closet3"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/h2.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="human" class="hidden" style="width: 33%; top: 22%; left: 28%;filter: brightness(0.45) saturate(0.6) hue-rotate(-30deg);" src="assets/human1.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "factory_closet4"); mainScript.addArrow("right", "factory_closet1"); const human = document.getElementById("human"); if (s.myInventory.checkHasItem("Dream Extractor")) { human.classList.add("knife-cursor"); human.addEventListener("click", () => { mainScript.musicManager.playSoundEffect("knife"); window.story.show("pool0"); }); } else { human.classList.add("help-cursor"); } if (!s.human1Gone) { human.classList.remove("hidden"); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/h3.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory_closet1"); mainScript.addArrow("left", "factory_closet4"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/factory/h4.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "factory_closet2"); mainScript.addArrow("right", "factory_closet3"); s.myDiary.addPageItem("harvest", 60, 47.5, 5); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 20% 50%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img src="assets/form2.gif" style="width: 100%; mix-blend-mode: color-burn; pointer-events: none"/> <!-- <img class="interactable" id="door_mines" style="width: 10%; top: 30%; left: 44%" src="assets/door_glitch1.gif"/> --> <img class="interactable" id="door_mines" style="width: 8%; top: 46%; left: 64%; transform: skew(0deg, -6deg);" src="assets/door_glitch1.gif"/> <!-- <div style="width: 100%; height: 100%; background-color: #ff55551c;z-index: 6;pointer-events: none;mix-blend-mode: hard-light;"></div> --> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "mine2"); mainScript.addArrow("right", "mine3"); mainScript.addArrow("left", "mine4"); document.getElementById("door_mines").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("stairwell1"); }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 60% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mine1"); mainScript.addArrow("down", "mine9"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 20% 70%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img src="assets/form1.gif" style="width: 100%; mix-blend-mode: color-burn; pointer-events: none"/> <img style="width: 25%; top: 8%; left: 54%; z-index: 1" src="assets/mines/worker1.gif"/> <img style="width: 35%; top: 72%; left: 63%" src="assets/mines/meatpitH.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "mine1"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 0% 40%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img src="assets/form1.gif" style="width: 100%; mix-blend-mode: color-burn; pointer-events: none"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "mine1"); mainScript.addArrow("left", "mineG"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 25%; top: 38%; left: 35%" src="assets/mines/meatpitB.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mine9"); mainScript.addArrow("down", "mine7"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 100% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 55%; top: 70%; left: 13%" src="assets/mines/meatpitA.gif"/> <img style="width: 40%; top: 32%; left: 57%" src="assets/mines/worker2.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mine7"); mainScript.addArrow("right", "mineF"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 55%; top: 38%; left: 5%" src="assets/mines/meatpitH.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mine5"); mainScript.addArrow("right", "mineE"); mainScript.addArrow("down", "mine6"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 35%; top: 38%; left: 45%" src="assets/mines/meatpitF.gif"/> <img style="width: 20%; top: 48%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 45%; top: 68%; left: 15%" src="assets/mines/meatpitH.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "mineE"); mainScript.addArrow("up", "mineA"); mainScript.addArrow("down", "mineB"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 80% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mine2"); mainScript.addArrow("down", "mine5"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 20%; top: 20%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 20%; top: 74%; left: 32%" src="assets/mines/worker4.gif"/> <img style="width: 20%; top: 20%; left: 45%" src="assets/mines/worker4.gif"/> <img style="width: 20%; top: 14%; left: 75%" src="assets/mines/worker4.gif"/> <img style="width: 20%; top: 43%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 20%; top: 52%; left: 42%" src="assets/mines/worker4.gif"/> <img style="width: 20%; top: 69%; left: 65%" src="assets/mines/worker4.gif"/> <img style="width: 20%; top: 80%; left: 05%" src="assets/mines/worker4.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mineF"); mainScript.addArrow("down", "mine8"); mainScript.addArrow("right", "mineD"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 15%; top: 10%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 20%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 30%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 40%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 50%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 60%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 70%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 80%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 90%; left: 25%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 10%; left: 50%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 20%; left: 50%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 30%; left: 50%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 40%; left: 50%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 50%; left: 50%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 60%; left: 50%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 70%; left: 50%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 80%; left: 50%" src="assets/mines/worker4.gif"/> <img style="width: 15%; top: 90%; left: 50%" src="assets/mines/worker4.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mine8"); mainScript.addArrow("down", "mineC"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 45%; top: 68%; left: 15%" src="assets/mines/meatpitD.gif"/> <img style="width: 25%; top: 38%; left: 65%" src="assets/mines/worker3.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mineB"); mainScript.addArrow("down", "mineF"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 95%; top: 48%; left: 2%" src="assets/mines/meatpit3_top.gif"/> <img style="width: 59%; top: 57%; left: 45%" src="assets/mines/meatpit3_tendrils.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "mineA"); mainScript.addArrow("down", "pitA", 53, 52); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="cart" class="interactable hidden" style="width: 55%; top: 38%; left: 14%;" src="assets/mines/meatcart0.png"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "mine7"); mainScript.addArrow("right", "mine8"); s.myDiary.addPageItem("meatPlastic", 25, 47.5, 5); function takeCart() { s.takenCart = true; s.myInventory.addItem({ name: "meatcart", iconSrc: "assets/items/meatcart.gif" }); document.getElementById("cart").remove(); } function addMeat() { const cart = document.getElementById("cart"); s.addMeatToCart = true; cart.src = "assets/mines/meatcart1.gif"; cart.addEventListener("click", () => { takeCart(); }) } const cart = document.getElementById("cart"); if (s.takenCart === false) { if (s.addMeatToCart === true) { addMeat(); } else { if (!s.myInventory.checkHasItem("meat")) { cart.classList.add("noMeat", "help-cursor"); } cart.addEventListener("click", () => { if (s.myInventory.checkHasItem("meat")) { addMeat(); } }) } cart.classList.remove("hidden"); } else { cart.remove(); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 45%; top: 30%; left: 23%" src="assets/mines/meatpitA.gif"/> <img style="width: 45%; top: 60%; left: 3%" src="assets/mines/meatpitA.gif"/> <img style="width: 65%; top: 68%; left: 37%" src="assets/mines/meatpitA.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mineC"); mainScript.addArrow("down", "mineA"); mainScript.addArrow("left", "mine6"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif'); background-position: 0% 70%"></div> <div class="absoluteAlign bothHalves vignette"></div> <img src="assets/form2.gif" style="width: 100%; mix-blend-mode: color-burn; pointer-events: none"/> <img id="door" style="width: 20%; top: 30%; left: 38.5%" src="assets/mines/cart_door.gif"/> <img style="width: 90%; top: 40%; left: -40%; pointer-events: none" src="assets/mines/cart.gif"/> <img style="width: 90%; top: 40%; left: -40%; pointer-events: none" src="assets/mines/cart2.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "mine4"); const door = document.querySelector("#door"); if (s.myInventory.checkHasItem("meatcart")) { door.classList.add("meatcart-cursor"); door.addEventListener("click", () => { window.story.show("factoryW"); }) } else { door.classList.add("help-cursor"); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif');r; background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit_bg.gif'); background-size: 150%; background-position: 100%; opacity: 90%"/> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit3b.gif'); z-index: 1"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "mineD"); mainScript.addArrow("down", "pitB"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif');r; background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit_bg.gif'); background-size: 150%; background-position: 0%; opacity: 60%"/> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit3c.gif'); z-index: 1"/> <img class="interactable meat hidden" style="width: 12%; top: 30%; left: 24%" src="assets/mines/meatpit3_ballA.gif"/> <img class="interactable meat hidden" style="width: 9%; top: 68%; left: 66%" src="assets/mines/meatpit3_ballB.gif"/> <img class="interactable meat hidden" style="width: 20%; top: 15%; left: 58%" src="assets/mines/meatpit3_ballC.gif"/> <img class="interactable meat hidden" style="width: 8%; top: 50%; left: 49%" src="assets/mines/meatpit3_ballD.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "pitA"); mainScript.addArrow("down", "pitC"); function removeMeat() { Array.from(document.getElementsByClassName("meat")).forEach((e) => { e.remove(); }); }; function takeMeat() { s.takenMeat = true; s.myInventory.addItem({ name: "meat", iconSrc: "assets/items/meat.gif" }); removeMeat(); } if (!s.takenMeat) { Array.from(document.getElementsByClassName("meat")).forEach((e) => { e.classList.remove("hidden"); e.addEventListener("click", takeMeat); }); } else { removeMeat(); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/mines/9cave0.png.gif');r; background-position: 90% 100%; background-size: 250%"></div> <div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit_bg.gif'); background-size: 150%; background-position: 50%; opacity: 20%"/> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit3_bottom.gif'); z-index: 2"/> <div class="absoluteAlign bothHalves" style="background-image: url('assets/mines/meatpit3_bottom1.png'); z-index: 1"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "pitB"); s.myDiary.addPageItem("scribble", 35, 64, 6); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office20c.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img class="interactable" id="door_office" style="width: 5%; top: 37.5%; left: 36%; transform: scale(0.6, 2);opacity: 80%;" src="assets/door_glitch4_distort.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "office2", 35, 49); mainScript.addArrow("down", "office3b"); document.getElementById("door_office").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("stairwell3"); }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office19.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "office1", 35, 49); mainScript.addArrow("down", "office0_new"); mainScript.addArrow("left", "cubicle5", 58, 34); mainScript.addArrow("right", "cubicle3", 48, 58); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office20c.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <!-- doorway --> <img style="width: 5%; top: 27%; left: 58%; transform: scale(-0.2, 2.8) skew(-5deg, 15deg);filter: brightness(0) blur(3px);opacity: 0.8;" src="assets/door_glitch4_distort.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "office3", 35, 49); mainScript.addArrow("down", "office2"); mainScript.addArrow("right", "cubicle2", 47, 57); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office19.gif'); transform: scaleX(-1.03) translate(-1%);"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "office3b", 35, 49); mainScript.addArrow("down", "office1"); mainScript.addArrow("left", "cubicle1b", 48, 38); mainScript.addArrow("right", "cubicle4", 58, 63); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office20b.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <!-- doorway --> <img style="width: 5%; top: 33%; left: 60.5%; transform: scale(-0.5, 3);filter: brightness(0) blur(3px);opacity: 0.7;" src="assets/door_glitch4_distort.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "office0_new", 35, 49); mainScript.addArrow("down", "office3"); mainScript.addArrow("right", "office4", 52, 58, 325); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office3.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 20%; top: 18%; left: 70%" src="assets/office/officer1.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "office3"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office10.gif'); transform: scaleX(-1)"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 5%; top: 12%; left: 10%" src="assets/office/officer06.gif"/> <img style="width: 5%; top: 13%; left: 15%" src="assets/office/officer06.gif"/> <img style="width: 5%; top: 14%; left: 20%" src="assets/office/officer06.gif"/> <img style="width: 5%; top: 15%; left: 25%" src="assets/office/officer06.gif"/> <img style="width: 5%; top: 19%; left: 46%;transform: scaleX(-1);" src="assets/office/officer06.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "office1"); s.myDiary.addPageItem("rain", 37, 76, 5); if (document.querySelector(".page") !== null) { document.querySelector(".page").style.transform = "skew(-20deg, 25deg)"; } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office2.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 15%; top: 40%; left: 44%" src="assets/office/officer01.gif"/> <img style="width: 16%; top: 50%; left: 53%" src="assets/office/officer01.gif"/> <img style="width: 17%; top: 60%; left: 63%" src="assets/office/officer01.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "office2"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office12.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 12%; top: 46%; left: 28%" src="assets/office/officer02.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "office3"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office1.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 17%; top: 29%; left: 61%" src="assets/office/officer03.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "office2"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office18.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "office5", 60, 49); mainScript.addArrow("down", "office3b"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office13.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img class="interactable" id="door_smoke" style="width: 8%; top: 28.5%; left: 46%;opacity: 60%;" src="assets/door_glitch6.gif"> <div id="keypadPanel" class="panelFull panelSmall absoluteAlign hidden"> <!-- Keypad from https://gist.github.com/code-boxx/7fe1a40cd24e1e9c3ec33d2801afed10 Copyright Code Boxx, released under MIT License --> <div id="numPad"> <input type="text" id="numDisplay" class="noDec" readonly value="0"> <div id="numBWrap"></div> </div> </div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "office4"); mainScript.addArrow("left", "office6", 72, 36, 200); const panel = document.getElementById("keypadPanel"); mainScript.numpad.init(1040, () => { mainScript.closePanel(panel); s.smokeUnlocked = true; window.story.show("smoke1"); }); const door = document.getElementById("door_smoke"); door.addEventListener("click", () => { if (s.smokeUnlocked) { mainScript.musicManager.playSoundEffect("door"); window.story.show("smoke1"); } else { mainScript.openMenuPanel(panel); } }); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office7b.gif'); transform: scaleX(-1)"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "office5", 95, 35, 65); mainScript.addArrow("right", "conference2", 38, 57); mainScript.addArrow("left", "conference3a", 48, 6); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/boffice9.gif'); transform: scaleX(-1)"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 2%; top: 71%; left: 72%" src="assets/office/officer05.gif"/> <img style="width: 4%; top: 72%; left: 73%" src="assets/office/officer05.gif"/> <img style="width: 6%; top: 74%; left: 75%" src="assets/office/officer05.gif"/> <img style="width: 8%; top: 80%; left: 77%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 78%" src="assets/office/officer05.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "office6"); s.myDiary.addPageItem("bird1040", 44, 45, 5); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/boffice1b.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "conference3b"); mainScript.addArrow("right", "office6"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/boffice1a.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <img style="width: 7%; top: 78%; left: 13%" src="assets/office/officer05.gif"/> <img style="width: 7%; top: 78%; left: 23%" src="assets/office/officer05.gif"/> <img style="width: 7%; top: 78%; left: 33%" src="assets/office/officer05.gif"/> <img style="width: 7%; top: 78%; left: 43%" src="assets/office/officer05.gif"/> <img style="width: 7%; top: 78%; left: 53%" src="assets/office/officer05.gif"/> <img style="width: 7%; top: 78%; left: 63%" src="assets/office/officer05.gif"/> <img style="width: 7%; top: 78%; left: 73%" src="assets/office/officer05.gif"/> <img style="width: 7%; top: 78%; left: 83%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 8%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 18%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 28%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 38%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 48%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 58%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 68%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 78%" src="assets/office/officer05.gif"/> <img style="width: 10%; top: 87%; left: 88%" src="assets/office/officer05.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "conference3a"); }); %><div class="absoluteAlign bothHalves gameBg"></div> <div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign bothHalves tower1" style="background-image: url('assets/tower0.png');"></div> <div class="absoluteAlign bothHalves tower2" style="top: 0; bottom: 40%"></div> <img class="interactable" id="door_mines" style="width: 6%; top: 70%; left: 64%" src="assets/door_glitch1.gif"/> <img class="interactable" id="door_office" style="width: 6%; top: 24%; left: 64%" src="assets/door_glitch4.gif"/> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "tower1"); document.getElementById("door_mines").addEventListener("click", () => { window.story.show("mine1"); }); document.getElementById("door_office").addEventListener("click", () => { window.story.show("office0"); }); }); %><div class="absoluteAlign bothHalves gameBg"></div> <div class="absoluteAlign bothHalves vignette"></div> <div class="absoluteAlign bothHalves tower1" style="background-image: url('assets/tower1.png'); background-size: 85%; background-position: center 80%;"></div> <div class="absoluteAlign bothHalves tower2"></div> <img class="interactable" id="door_factory" style="width: 6%; top: 67%; left: 64%" src="assets/door_glitch3.gif"/> <img class="interactable" style="width: 6%; top: 4%; left: 64%" src="assets/door_glitch2.gif"/> <% $(function () { mainScript.globalScript(); document.getElementById("door_factory").addEventListener("click", () => { window.story.show("factory1"); }); mainScript.addArrow("down", "tower0"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office20c.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img class="interactable" id="door_office" style="width: 5%; top: 37%; left: 60%; transform: scale(-0.6, 2);" src="assets/door_glitch4_distort.gif" /> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "officeA", 35, 49); document.getElementById("door_office").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("stairwell3"); }); }); %><!-- <div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office20c.gif');"></div> --> <div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office20.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "officeA", 35, 49); const upArrow = document.querySelector("img.arrow.up"); upArrow.addEventListener("click", () => { if (s.officeMark < s.MAX_OFFICE_MARK) { s.officeMark++; } }) mainScript.addArrow("down", "office0"); if (s.officeMark === 11) { mainScript.addArrow("left", "office2b", 58, 34); } else { mainScript.addArrow("left", "cubicle1", 58, 34); } const imageNumber = Math.floor(s.officeMark / 5) + 1; for (let i = 0; i < imageNumber; i++) { const newTally = document.createElement("img"); newTally.classList.add("officeMark"); newTally.style.top = (59 - 10 * i) + "%"; if (i === imageNumber - 1) { /* last image */ newTally.src = "assets/office/mark" + (s.officeMark % 5) + ".png"; } else { newTally.src = "assets/office/mark5.png"; } document.querySelector("tw-passage").append(newTally); } }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office20c.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="officeMark" style="top: 59%; left: 8%;transform: rotate(-10deg) scale(0.7, 1) skew(-10deg, -10deg);width: 16%;" src="assets/office/mark8.png" /> <!-- doorway --> <img style="width: 5%; top: 33%; left: 60%; transform: scale(-0.5, 3);filter: brightness(0) blur(3px);opacity: 0.7;" src="assets/door_glitch4_distort.gif"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "office_detour1", 52, 58, 325); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office3.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <!-- <img style="width: 18%; top: 37%; left: 13%; z-index: 1" src="assets/mines/officer1.gif"/> --> <div id="formOpener" class="panelOpener interactable" identifier="form" style="width: 6.3%;height: 12%;top: 50%;left: 17%;transform: rotate(-25deg);background-image: url('assets/office/w11.png');background-size: contain;opacity: 70%;"></div> <div class="panelFull panelSmall absoluteAlign hidden" style="height: 90%; width: 50%;" identifier="form"> <img id="formFull" src="assets/office/w11.png" style="height: 100%"/> </div> <div style="top: 39%;left: 42%;width: 10%;height: 10%;transform: rotate(-10deg); color: #888; animation: flicker 2s infinite;text-align: center;font-size: 13px;"><p>WRONG NUMBER</p></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "officeA"); s.cubicle1Visited++; if (s.cubicle1Visited >= 2) { document.getElementById("formOpener").style["background-image"] = 'url("assets/office/w11_2.png")'; document.getElementById("formFull").src = "assets/office/w11_2.png"; } /* mainScript.addNpc("assets/office/officer1.gif", 37, 13, 18, "", mainScript.dialogue.wDialogue); */ }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office14.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "office_detour2", 65, 49, 315); mainScript.addArrow("downleft", "office2b"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office11.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("up", "office_detour3", 38, 71); mainScript.addArrow("downleft", "office_detour1"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office8.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <div id="phoneTable" class="interactable" style="inset: 60% 10% 10% 10%"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "office_detour2"); document.getElementById("phoneTable").addEventListener("click", () => { window.story.show("office_detour3_desk"); }) }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/desk.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div> <img id="phone" class="interactable" src="assets/office/phone.gif" style="width: 40%;left: 20%;top: 20%;"> <% $(function () { mainScript.globalScript(); mainScript.addArrow("down", "office_detour3"); document.getElementById("phone").addEventListener("click", () => { window.story.show("office_space1"); }) }); %><div class="absoluteAlign bothHalves gameBg" style="background-color: #000000;"></div> <div style="left: 40%; top: 30%"> <img src="assets/office/sign.png" style="width: 200px; position: absolute;filter: brightness(1.9) contrast(0.5);"> <div style="width: 200px; left: 30px; top: 65px; position: absolute;color: black;font-size: 28px;font-weight: bold;">TURN BACK</div> </div> <% $(function () { s.officeUnlocked = true; mainScript.globalScript(); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office7b.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("downleft", "office6", 95, 60); mainScript.addArrow("right", "conference6", 48, 90); mainScript.addArrow("left", "conference5", 38, 39); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/office4.gif'); transform: scaleX(-1)"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "office6"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/boffice6.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "office6"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/boffice3.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("right", "office7"); }); %><div class="absoluteAlign bothHalves gameBg" style="background-image: url('assets/office/boffice6.gif')"></div> <div class="absoluteAlign bothHalves vignette"></div> <% $(function () { mainScript.globalScript(); mainScript.addArrow("left", "office7"); }); %>