The Invisible Smoke Factory

<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 were edited from the original to fade in/out. In some cases duration was shortened and other effects were 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> </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" class="hidden">[[CONTINUE|start]]</p> </div> <% $(function () { mainScript.globalScript(); const loading = document.createElement("h3"); loading.innerText = "...LOADING, PLEASE WAIT..."; const container = document.getElementById("container"); container.insertBefore(loading, container.firstChild); mainScript.preload( ['assets/bedroom/sleep.gif', 'assets/arrow.gif', 'assets/beach/f1.gif', 'assets/beach/f2.gif', 'assets/beach/f3.gif', 'assets/beach/f4.gif', 'assets/beach/f5.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/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/bigDoor4.gif', 'assets/black1.gif', 'assets/black2.gif', '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/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/items/meat.gif', 'assets/items/meatcart.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/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/locker4.gif', 'assets/pool/locker5.gif', 'assets/pool/locker6.gif', 'assets/pool/pool1.gif', 'assets/pool/pool2.gif', 'assets/pool/pool3.gif', 'assets/pool/pool6.gif', 'assets/pool/pool7.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/title1.gif', 'assets/tower/corridor.gif', 'assets/tower/stairwell.gif', 'assets/tower/stairwell2.gif', 'assets/white2.gif', 'assets/white3.gif'], () => { document.getElementById("proceed").classList.remove("hidden"); } ); }); %>

<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.0.0</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; }); %>

<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> <% $(function () { mainScript.globalScript(); document.getElementById("above").innerText = s.myDiary.foundPages.length; document.getElementById("below").innerText = s.myDiary.pages.length; 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 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: brightness(1.1)" src="assets/bedroom/diary.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"></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> <% $(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"); const windows10 = window.story.render("Windows10"); computer.innerHTML = windows10; 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>  <% $(function () { mainScript.globalScript(); document.getElementById("door1").addEventListener("click", () => { mainScript.musicManager.playSoundEffect("door"); window.story.show("corridor1"); }); /* s.myDiary.addPageItem("room", 22, 67, 5); */ }); %>

<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", () => { window.story.show("bedroom_end"); }); }); %>

<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="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"); }, 800); } } } }); %>

<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%;"/> <p>[[Menu|start]]</p> </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/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/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: 8%; top: 46%; left: 64%; transform: skew(0deg, -6deg);" src="assets/door_glitch1.gif"/>  <% $(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: 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"); } 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');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/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/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">  <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"></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/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/office3.gif');"></div> <div class="absoluteAlign bothHalves vignette"></div>  <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/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.7);"> <div style="width: 200px; left: 30px; top: 65px; position: absolute;color: black;font-size: 28px;font-weight: bold;">TRY AGAIN</div> </div> <% $(function () { s.officeUnlocked = true; mainScript.globalScript(); }); %>

<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"></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>