%img.thumbnail{:src => 'https://assets.codepen.io/217233/bgThumb.PNG'} -# ============================================================================================================================== -# Game setup. -# ============================================================================================================================== - @introText = ["Your head is spinning and your temples throb.", "You awaken in a dimly lit storage cupboard, with no memory of where or who you are.", "A siren echoes through the hallways and the air is thick with the smell of blood..." ] - rows = 4 - segments = 16 - startingRow = 4 - startingSegment = 11 -# ============================================================================================================================== -# "Post processing" -# ============================================================================================================================== .postProcess .grain .grain .grain -# ============================================================================================================================== -# Game loading screen. -# This is a fake loader, no js. -# It's essentially just to try and let the assets load in in the background. -# ============================================================================================================================== .loader .loader_inner %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/caretakerLogo.png'} .loader_inner__cogs %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/Gear-1s-201px.gif'} %h2 Loading checkboxs... -# ============================================================================================================================== -# Game introductory text. -# ============================================================================================================================== .intro .intro_inner - @introText.each_with_index do | text, index | - if(index == 0) %input.introInput{:id => "introText-#{index + 1}", :type => 'radio', :checked => 'checked', :name => 'intro'} - else %input.introInput{:id => "introText-#{index + 1}", :type => 'radio', :name => 'intro'} .text %p #{text} %label{:for => "introText-#{index + 2}"} %input.introInput{:id => "introText-#{@introText.length() + 1}", :type => 'radio', :name => 'intro'} .overlay -# ============================================================================================================================== -# Game wrapper. -# ============================================================================================================================== .game %input#overlayObject-1{:type => 'checkbox', 'data-debug' => "Storage note"} %input#overlayObject-2{:type => 'checkbox', 'data-debug' => "Maintenance note"} %input#overlayObject-3{:type => 'checkbox', 'data-debug' => "Wardens note"} %input#overlayObject-4{:type => 'checkbox', 'data-debug' => "Photo"} %input#overlayObject-5{:type => 'checkbox', 'data-debug' => "Canteen Notice"} %input#overlayObject-6{:type => 'checkbox', 'data-debug' => "Access photo"} %input#overlayObject-7{:type => 'checkbox', 'data-debug' => "Radio"} %input#overlayObject-8{:type => 'checkbox', 'data-debug' => "Reception Note"} %input#overlayObject-9{:type => 'checkbox', 'data-debug' => "Infirmary note"} %input#overlayObject-10{:type => 'checkbox', 'data-debug' => "Scans"} %input#overlayObject-11{:type => 'checkbox', 'data-debug' => "Fusebox"} %input#overlayObject-12{:type => 'checkbox', 'data-debug' => "PC"} %input#overlayObject-13{:type => 'checkbox', 'data-debug' => "Security note"} %input#overlayObject-14{:type => 'checkbox', 'data-debug' => "Newspaper"} -# Key objects. These objects can be interacted with, but will only return a set response. Such as 'Nothing here'. Each object in our game must have an associated input with unique ID, and a corresponding label inside the segment it belongs to. %input#keyObject-1{:type => 'checkbox', 'data-debug' => "Warden office door"} %input#keyObject-2{:type => 'checkbox', 'data-debug' => "Warden office key"} %input#keyObject-3{:type => 'checkbox', 'data-debug' => "East wing door"} %input#keyObject-4{:type => 'checkbox', 'data-debug' => "Wardens key"} %input#keyObject-5{:type => 'checkbox', 'data-debug' => "Reception door"} %input#keyObject-6{:type => 'checkbox', 'data-debug' => "Coin"} %input#keyObject-7{:type => 'checkbox', 'data-debug' => "Visitation door"} %input#keyObject-8{:type => 'checkbox', 'data-debug' => "Visitation Key"} %input#keyObject-9{:type => 'checkbox', 'data-debug' => "Door to cells"} %input#keyObject-10{:type => 'checkbox', 'data-debug' => "Door control"} %input#keyObject-11{:type => 'checkbox', 'data-debug' => "Battery"} %input#keyObject-12{:type => 'checkbox', 'data-debug' => "Door to security"} %input#keyObject-13{:type => 'checkbox', 'data-debug' => "Hand"} %input#keyObject-14{:type => 'checkbox', 'data-debug' => "Hacksaw"} %input#keyObject-15{:type => 'checkbox', 'data-debug' => "Cells door"} %input#keyObject-16{:type => 'checkbox', 'data-debug' => "Cells door"} %input#keyObject-17{:type => 'checkbox', 'data-debug' => "Cells door"} %input#keyObject-18{:type => 'checkbox', 'data-debug' => "Cells door"} %input#keyObject-19{:type => 'checkbox', 'data-debug' => "Cells door"} %input#keyObject-20{:type => 'checkbox', 'data-debug' => "Cells door"} %input#keyObject-21{:type => 'checkbox', 'data-debug' => "Cells door"} %input#keyObject-22{:type => 'checkbox', 'data-debug' => "D Block door"} %input#keyObject-23{:type => 'checkbox', 'data-debug' => "PC Unlocked"} -# None key objects. These objects can be interacted with, but will only return a set response. Such as 'Nothing here'. Each object in our game must have an associated input with unique ID, and a corresponding label inside the segment it belongs to. %input#noneKeyObject-1{:type => 'checkbox', 'data-debug' => "Storage emergency light"} %input#noneKeyObject-2{:type => 'checkbox', 'data-debug' => "Storage toolbox"} %input#noneKeyObject-3{:type => 'checkbox', 'data-debug' => "Storage ladder"} %input#noneKeyObject-4{:type => 'checkbox', 'data-debug' => "Blood"} %input#noneKeyObject-5{:type => 'checkbox', 'data-debug' => "Fire exit"} %input#noneKeyObject-6{:type => 'checkbox', 'data-debug' => "Clock"} %input#noneKeyObject-7{:type => 'checkbox', 'data-debug' => "Whiteboard"} %input#noneKeyObject-8{:type => 'checkbox', 'data-debug' => "Mop and bucket"} %input#noneKeyObject-9{:type => 'checkbox', 'data-debug' => "Cooler"} %input#noneKeyObject-10{:type => 'checkbox', 'data-debug' => "Filing cabinet"} %input#noneKeyObject-11{:type => 'checkbox', 'data-debug' => "Books"} %input#noneKeyObject-12{:type => 'checkbox', 'data-debug' => "Monster"} %input#noneKeyObject-13{:type => 'checkbox', 'data-debug' => "Mr Clay"} %input#noneKeyObject-14{:type => 'checkbox', 'data-debug' => "Codepen poster"} %input#noneKeyObject-15{:type => 'checkbox', 'data-debug' => "Adam poster"} %input#noneKeyObject-16{:type => 'checkbox', 'data-debug' => "Tool rack"} %input#noneKeyObject-17{:type => 'checkbox', 'data-debug' => "Vending machine"} %input#noneKeyObject-18{:type => 'checkbox', 'data-debug' => "Broken lamp"} %input#noneKeyObject-19{:type => 'checkbox', 'data-debug' => "Sofa"} %input#noneKeyObject-20{:type => 'checkbox', 'data-debug' => "Calendar"} %input#noneKeyObject-21{:type => 'checkbox', 'data-debug' => "Box"} %input#noneKeyObject-22{:type => 'checkbox', 'data-debug' => "Cup"} %input#noneKeyObject-23{:type => 'checkbox', 'data-debug' => "Magazines"} %input#noneKeyObject-24{:type => 'checkbox', 'data-debug' => "Liars"} %input#noneKeyObject-25{:type => 'checkbox', 'data-debug' => "Kitchen front door"} %input#noneKeyObject-26{:type => 'checkbox', 'data-debug' => "Bin"} %input#noneKeyObject-27{:type => 'checkbox', 'data-debug' => "Bench"} %input#noneKeyObject-28{:type => 'checkbox', 'data-debug' => "Feed me"} %input#noneKeyObject-29{:type => 'checkbox', 'data-debug' => "Food"} %input#noneKeyObject-30{:type => 'checkbox', 'data-debug' => "Barrier"} %input#noneKeyObject-31{:type => 'checkbox', 'data-debug' => "Barrier door"} %input#noneKeyObject-32{:type => 'checkbox', 'data-debug' => "Staff vending"} %input#noneKeyObject-33{:type => 'checkbox', 'data-debug' => "Directors image"} %input#noneKeyObject-34{:type => 'checkbox', 'data-debug' => "Checkpoint body"} %input#noneKeyObject-35{:type => 'checkbox', 'data-debug' => "Death"} %input#noneKeyObject-36{:type => 'checkbox', 'data-debug' => "Computer"} %input#noneKeyObject-37{:type => 'checkbox', 'data-debug' => "Checkpoint filing cabinet"} %input#noneKeyObject-38{:type => 'checkbox', 'data-debug' => "Kitchen front door"} %input#noneKeyObject-39{:type => 'checkbox', 'data-debug' => "Mop"} %input#noneKeyObject-40{:type => 'checkbox', 'data-debug' => "Drip"} %input#noneKeyObject-41{:type => 'checkbox', 'data-debug' => "Collage"} %input#noneKeyObject-42{:type => 'checkbox', 'data-debug' => "Crashcart"} %input#noneKeyObject-43{:type => 'checkbox', 'data-debug' => "Revenge"} %input#noneKeyObject-44{:type => 'checkbox', 'data-debug' => "Sam"} %input#noneKeyObject-45{:type => 'checkbox', 'data-debug' => "Cell door"} %input#noneKeyObject-46{:type => 'checkbox', 'data-debug' => "Cell name"} %input#noneKeyObject-47{:type => 'checkbox', 'data-debug' => "Cell name"} %input#noneKeyObject-48{:type => 'checkbox', 'data-debug' => "Cell door"} %input#noneKeyObject-49{:type => 'checkbox', 'data-debug' => "Cell name"} %input#noneKeyObject-50{:type => 'checkbox', 'data-debug' => "Freedom"} %input#noneKeyObject-51{:type => 'checkbox', 'data-debug' => "Staris"} %input#noneKeyObject-52{:type => 'checkbox', 'data-debug' => "Landscape"} %input#noneKeyObject-53{:type => 'checkbox', 'data-debug' => "Coffee table"} %input#noneKeyObject-54{:type => 'checkbox', 'data-debug' => "Magazines"} %input#noneKeyObject-55{:type => 'checkbox', 'data-debug' => "Blood"} %input#noneKeyObject-56{:type => 'checkbox', 'data-debug' => "Filing cabinet"} %input#noneKeyObject-57{:type => 'checkbox', 'data-debug' => "Filing cabinet"} %input#noneKeyObject-58{:type => 'checkbox', 'data-debug' => "Coyier"} %input#noneKeyObject-59{:type => 'checkbox', 'data-debug' => "Lockers"} %input#noneKeyObject-60{:type => 'checkbox', 'data-debug' => "Shaw"} %input#noneKeyObject-61{:type => 'checkbox', 'data-debug' => "Evans"} %input#noneKeyObject-62{:type => 'checkbox', 'data-debug' => "Body"} %input#noneKeyObject-63{:type => 'checkbox', 'data-debug' => "Exit"} -# Movement checkboxes. As we can only traverse downards in the DOM, these must be above the actual viewport. -(1..rows).each do | row | -(1..segments).each do | segment | -# The starting point of the character needs to be initially checked, so we do this based on the game setup if the starting row and segment match. - if(row == startingRow && segment == startingSegment) %input{:type => 'radio', :id => "segment-#{segment + ((row - 1) * segments)}-forwards", :name => 'trigger'} %input{:type => 'radio', :id => "segment-#{segment + ((row - 1) * segments)}-back", :name => 'trigger', :checked => 'checked'} - else %input{:type => 'radio', :id => "segment-#{segment + ((row - 1) * segments)}-forwards", :name => 'trigger'} %input{:type => 'radio', :id => "segment-#{segment + ((row - 1) * segments)}-back", :name => 'trigger'} -# Game segments. .game_viewport -# Game tilemap. %img.tilemap{:draggable => 'false', :src => 'https://assets.codepen.io/217233/caretakerMap4.png'} -# Game segments | Create a div including controls for each segment in our game. -(1..rows).each do | row | -(1..segments).each do | segment | .game_viewport__segment -# Individual segments and object placement -# =============================================================== -# Storage room -# =============================================================== -if (row == 4 && segment == 11) -# Emergency light %label.object.look{:for => 'noneKeyObject-1'} %img.wallLight{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_light.png'} .response.response-1 The lights down here don't seem to be working. Good job I have this field torch. %label.closeResponse{:for => 'noneKeyObject-1'} -# Toolbox %label.object.look{:for => 'noneKeyObject-2'} %img.toolbox{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_toolbox.png'} .response.response-2 There's a heavy metal toolbox here. Nothing in it I need right now. %label.closeResponse{:for => 'noneKeyObject-2'} -# Ladder %label.object.look{:for => 'noneKeyObject-3'} %img.ladder{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_ladder.png'} .response.response-3 A workmans ladder. I see no use for this right now. %label.closeResponse{:for => 'noneKeyObject-3'} -# =============================================================== -# Storage room entrance -# =============================================================== -if (row == 4 && segment == 10) -# Blood %label.object.look{:for => 'noneKeyObject-4'} %img.blood{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_blood.png'} .response.response-4 Whos blood is this? Is this mine? %label.closeResponse{:for => 'noneKeyObject-4'} -# Note %label.object.look{:for => 'overlayObject-1'} %img.caretakerNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_caretakerNoteObject.png'} -# Fire exit %label.object.open{:for => 'noneKeyObject-5'} %img.fireEscape{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fireEscape.png'} .response.response-5 Locked tight. Looks like some kind of security lockdown has been initiated. %label.closeResponse{:for => 'noneKeyObject-5'} -# =============================================================== -# Maintenance level 1 with whiteboard -# =============================================================== -if (row == 4 && segment == 9) -# Clock %label.object.look{:for => 'noneKeyObject-6'} %img.clock{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_clock.png'} .response.response-6 The clock stopped working at 10.10pm. %label.closeResponse{:for => 'noneKeyObject-6'} -# Whiteboard %label.object.look{:for => 'noneKeyObject-7'} %img.whiteboard{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_whiteboard.png'} .response.response-7 Theres some notes here from a maintenance team, it's a list of things that need fixing. %label.closeResponse{:for => 'noneKeyObject-7'} -# Mop and bucket %label.object.look{:for => 'noneKeyObject-8'} %img.mop{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_mop.png'} .response.response-8 Has someone tried to mop up blood with this? %label.closeResponse{:for => 'noneKeyObject-8'} -# =============================================================== -# Maintenance level stairs -# =============================================================== -if (row == 4 && segment == 8) -# Cooler %label.object.search{:for => 'noneKeyObject-9'} %img.cooler{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cooler.png'} .response.response-9 There's nothing in here I need right now. Maybe some painkillers wouldn't go amiss. %label.closeResponse{:for => 'noneKeyObject-9'} -# =============================================================== -# East wing cork board -# =============================================================== -if (row == 3 && segment == 8) -# Note %label.object.look{:for => 'overlayObject-3'} %img.wardensNotice{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_wardensNotice.png'} -# =============================================================== -# Outside wardens office -# =============================================================== -if (row == 3 && segment == 9) -# Wardens office door %label.object.keyObject.open{:for => 'keyObject-1'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.fail There's a sign on the door that says Dr Mason. It's locked though. I'll need a key to get in. %label.closeResponse{:for => 'keyObject-1'} .response.success Alright, that unlocked the door. Let's see if this Dr Mason is home. -# =============================================================== -# Wardens office entrance -# =============================================================== -if (row == 3 && segment == 10) %label.object.search{:for => 'noneKeyObject-10'} %img.filingCabinet{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_filingCabinet.png'} .response.response-10 The drawers are littered with patient reports and test results. Is this some kind of hospital? %label.closeResponse{:for => 'noneKeyObject-10'} %label.object.look{:for => 'noneKeyObject-11'} %img.books{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_books.png'} .response.response-11 Assorted books on psychological practices. Looks like they have been read a few times. %label.closeResponse{:for => 'noneKeyObject-11'} -# =============================================================== -# Wardens office -# =============================================================== -if (row == 3 && segment == 11) -# Monster graffiti %label.object.look{:for => 'noneKeyObject-12'} %img.monster{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_monster.png'} .response.response-12 Monster? What does this mean? %label.closeResponse{:for => 'noneKeyObject-12'} -# Mr Clay's body %label.object.look{:for => 'noneKeyObject-13'} %img.mrClay{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_mrClay.png'} .response.response-13 Jesus. What happened to this guy! This is not good I have to get out of here. %label.closeResponse{:for => 'noneKeyObject-13'} -# Wardens key card %label.object.destroy.take{:for => 'keyObject-4'} %img.eastWingKeyCard{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_eastWingKeycard.png'} .glint .response I'm sorry Dr, but I'm going to need to borrow this keycard. -# =============================================================== -# Maintenance office -# =============================================================== -if (row == 4 && segment == 6) -# Codepen poster %label.object.look{:for => 'noneKeyObject-14'} %img.codepenPoster{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_codepen.png'} .response.response-14 There's a poster here with an odd symbol on it, I wonder what it means? %label.closeResponse{:for => 'noneKeyObject-14'} -# adam poster %label.object.look{:for => 'noneKeyObject-15'} %img.adamPoster{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_adam.png'} .response.response-15 A portrait of a man. Perhaps one of the maintenance guys is a fan of his. %label.closeResponse{:for => 'noneKeyObject-15'} -# Wardens office key %label.object.destroy.take{:for => 'keyObject-2'} %img.wardensOfficeKey{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_wardensOfficeKey.png'} .response There's a key here. There's a key chain on it. It says "Mr Mason's office spare". -# =============================================================== -# Maintenance office Back -# =============================================================== -if (row == 4 && segment == 5) -# Tool rack %label.object.look{:for => 'noneKeyObject-16'} %img.toolRack{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_toolRack.png'} .response.response-16 A plethora of tools. Wrenches, spanners and hammers. Nothing I need right now. %label.closeResponse{:for => 'noneKeyObject-16'} -# Note %label.object.look{:for => 'overlayObject-2'} %img.maintenanceNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_maintenanceNote.png'} -# =============================================================== -# East wing vending -# =============================================================== -if (row == 3 && segment == 6) -# Vending machine %label.object.look{:for => 'noneKeyObject-17'} %img.vendingMachine{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_vendingMachine.png'} .response.response-17 A vending machine, shame it's not working, I could certainly eat right now. %label.closeResponse{:for => 'noneKeyObject-17'} -# Broken lamp %label.object.look{:for => 'noneKeyObject-18'} .response.response-18 %label.closeResponse{:for => 'noneKeyObject-18'} %label.object.destroy.take{:for => 'keyObject-6'} %img.vendingSlot{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_coinSlot.png'} .response There's a staff badge here in the change slot. This will come in useful. -# =============================================================== -# East wing door -# =============================================================== -if (row == 3 && segment == 5) -# Broken lamp %label.object.look{:for => 'noneKeyObject-19'} %img.sofa{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_sofa.png'} .response.response-19 No time to rest. I need to find a way out of here. %label.closeResponse{:for => 'noneKeyObject-19'} -# East wing door %label.object.keyObject.open{:for => 'keyObject-3'} %img.doorTwo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.fail I need a keycard to get through this door. I wonder if there is one around somewhere. %label.closeResponse{:for => 'keyObject-3'} .response.success OK, that's unlocked. I need to find a way out of here so I can get some help. -# =============================================================== -# East wing vending -# =============================================================== -if (row == 3 && segment == 3) -# Broken lamp %label.object.look{:for => 'noneKeyObject-20'} %img.calendar{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_calendar.png'} .response.response-20 A colorful wall calendar. Todays date has been circled in red pen. %label.closeResponse{:for => 'noneKeyObject-20'} -# Broken lamp %label.object.search{:for => 'noneKeyObject-21'} %img.box{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_box.png'} .response.response-21 An empty box. It was probably used to restock this vending machine. %label.closeResponse{:for => 'noneKeyObject-21'} -# =============================================================== -# East wing Liars -# =============================================================== -if (row == 3 && segment == 2) -# Broken lamp %label.object.look{:for => 'noneKeyObject-22'} %img.mug{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_mug.png'} .response.response-22 A mug of black coffee. Strange, the mug is still warm to the touch. %label.closeResponse{:for => 'noneKeyObject-22'} -# Broken lamp %label.object.look{:for => 'noneKeyObject-23'} %img.magazine{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_magazines.png'} .response.response-23 A stack of various healthcare magazines. %label.closeResponse{:for => 'noneKeyObject-23'} -# Broken lamp %label.object.look{:for => 'noneKeyObject-24'} %img.liars{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_liars.png'} .response.response-24 The Mason Institute...so that's where I am. The name seems familiar. %label.closeResponse{:for => 'noneKeyObject-24'} -# Note %label.object.look{:for => 'overlayObject-4'} %img.photo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_photo.png'} -# =============================================================== -# Kitchen front door -# =============================================================== -if (row == 2 && segment == 4) -# Broken lamp %label.object.look{:for => 'noneKeyObject-25'} %img.doorTwo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.response-25 It's locked from the other side. There's no way in this way. %label.closeResponse{:for => 'noneKeyObject-25'} -# =============================================================== -# Canteen entrance -# =============================================================== -if (row == 2 && segment == 5) -# Broken lamp %label.object.search{:for => 'noneKeyObject-26'} %img.bin{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_bin.png'} .response.response-26 Full of food wrappers and empty soda cans. Nothing I can use here. %label.closeResponse{:for => 'noneKeyObject-26'} -# =============================================================== -# Canteen entrance 2 -# =============================================================== -if (row == 2 && segment == 6) -# Broken lamp %label.object.look{:for => 'noneKeyObject-27'} %img.bench{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_bench.png'} .response.response-27 A small wooden bench I'm guessing for the staff. The food is half eaten and still on the plate. %label.closeResponse{:for => 'noneKeyObject-27'} -# Broken lamp %label.object.look{:for => 'noneKeyObject-28'} %img.feedMe{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_feedMe.png'} .response.response-28 Who could have written this? %label.closeResponse{:for => 'noneKeyObject-28'} -# Broken lamp %label.object.look{:for => 'noneKeyObject-29'} %img.food{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_food.png'} .response.response-29 I don't want to guess at what this is... %label.closeResponse{:for => 'noneKeyObject-29'} -# Note %label.object.look{:for => 'overlayObject-5'} %img.canteenNotice{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_canteenNote.png'} -# =============================================================== -# Canteen entrance barrier -# =============================================================== -if (row == 2 && segment == 7) -# Broken lamp %label.object.look{:for => 'noneKeyObject-30'} %img.barrier{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_barrier.png'} .response.response-30 Someone has made a make-shift barrier here using benches and a vending machine. What were they trying to keep out? %label.closeResponse{:for => 'noneKeyObject-30'} -# Broken lamp %label.object.look{:for => 'noneKeyObject-31'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.response-31 There's just no way I can move all of this stuff on my own. I'll have to find another way around. %label.closeResponse{:for => 'noneKeyObject-31'} -# =============================================================== -# Access 2 -# =============================================================== -if (row == 2 && segment == 1) -# Note %label.object.look{:for => 'overlayObject-6'} %img.accessPhoto{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_accessPhoto.png'} -# Broken lamp %label.object.look{:for => 'noneKeyObject-38'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.response-38 The handles broken off. There must be something important behind this door... %label.closeResponse{:for => 'noneKeyObject-38'} -# =============================================================== -# Staff room -# =============================================================== -if (row == 1 && segment == 6) -# Note %label.object.look{:for => 'overlayObject-7'} %img.radio{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_radio_1.png'} -# Broken lamp %label.object.look{:for => 'noneKeyObject-32'} %img.staffVending{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_vendingMachine.png'} .response.response-32 Another vending machine full of snacks I can't get to. If I get desperate enough, I'll smash the glass. %label.closeResponse{:for => 'noneKeyObject-32'} -# =============================================================== -# Staff room 2 -# =============================================================== -if (row == 1 && segment == 7) -# Note %label.object.look{:for => 'noneKeyObject-33'} %img.directors{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_directors.png'} .response.response-33 Portraits of the board. Dr. H Desroches, Dr M Mosley and Dr D Khourshid. %label.closeResponse{:for => 'noneKeyObject-33'} -# =============================================================== -# Access 2 -# =============================================================== -if (row == 1 && segment == 5) -# Note %label.object.look{:for => 'overlayObject-8'} %img.receptionNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_maintenanceNote.png'} %label.object.keyObject.open{:for => 'keyObject-7'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.fail I need the staff room key to get in here. In must be around somewhere. %label.closeResponse{:for => 'keyObject-7'} .response.success I've opened the door using the staff key. -# =============================================================== -# Staff room -# =============================================================== -if (row == 1 && segment == 1) %label.object.keyObject.open{:for => 'keyObject-5'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.fail I need a staff badge to get through here. Maybe there's one around somewhere. %label.closeResponse{:for => 'keyObject-5'} .response.success I used the badge I found to open the door. -# =============================================================== -# Holding cell -# =============================================================== -if (row == 2 && segment == 8) %label.object.look{:for => 'noneKeyObject-34'} %img.checkpointBody{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_body.png'} .response.response-34 Poor guy has been eviscerated. So much blood. His name tag says 'J Dickinson'. %label.closeResponse{:for => 'noneKeyObject-34'} -# Wardens office door %label.object.keyObject.take{:for => 'keyObject-10'} %img.panel{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_panel.png'} .response.fail There's a control panel here that opens the checkpoint doors. Looks like it's been sabotaged. A new battery would fix it. %label.closeResponse{:for => 'keyObject-10'} .response.success Perfect, the control panel is powered and the door should now be unlocked. -# Broken lamp -# =============================================================== -# Holding cell -# =============================================================== -if (row == 2 && segment == 9) %label.object.look{:for => 'noneKeyObject-35'} %img.death{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_death.png'} .response.response-35 This doesn't bode well. I need to stay alert, there could be someone still in here with me. %label.closeResponse{:for => 'noneKeyObject-35'} %label.object.look{:for => 'noneKeyObject-36'} %img.computer{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_monitor.png'} .response.response-36 This was probably used to check patients in and out. It's not working right now. %label.closeResponse{:for => 'noneKeyObject-36'} %label.object.look{:for => 'noneKeyObject-37'} %img.checkpointCabinet{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_filingCabinet.png'} .response.response-37 A filing cabinet full of patient mugshots and bios. %label.closeResponse{:for => 'noneKeyObject-37'} -# Wardens office door %label.object.keyObject.open{:for => 'keyObject-9'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.fail The door is locked tight. I need to activate a control panel somewhere. %label.closeResponse{:for => 'keyObject-9'} .response.success The door is now open. I can go through. -# =============================================================== -# Security Door -# =============================================================== -if (row == 2 && segment == 14) %label.object.keyObject.open{:for => 'keyObject-12'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.fail There's a palm print scanner on this door. %label.closeResponse{:for => 'keyObject-12'} .response.success The door is now open. I can go through. -# =============================================================== -# Infirmary 1 -# =============================================================== -if (row == 3 && segment == 14) -# Note %label.object.look{:for => 'noneKeyObject-39'} %img.mopTwo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_mopTwo.png'} .response.response-39 There's a bucket here full of flesh and blood. %label.closeResponse{:for => 'noneKeyObject-39'} -# Wardens key card %label.object.destroy.search{:for => 'keyObject-14'} %img.hacksaw{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_medicalCabinet.png'} .response There's a surgical saw in here, I don't like what I may have to do with it. -# =============================================================== -# Infirmary 2 -# =============================================================== -if (row == 3 && segment == 15) -# Note %label.object.look{:for => 'noneKeyObject-40'} %img.drip{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_drip.png'} .response.response-40 A drip filled with a clear fluid. This looks like it's been used recently. %label.closeResponse{:for => 'noneKeyObject-40'} -# Note %label.object.look{:for => 'noneKeyObject-41'} %img.collage{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_collage.png'} .response.response-41 A collage of various medical photographs. %label.closeResponse{:for => 'noneKeyObject-41'} -# Note %label.object.look{:for => 'overlayObject-9'} %img.infirmaryNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_infirmaryNote.png'} -# =============================================================== -# Infirmary 3 -# =============================================================== -if (row == 3 && segment == 16) -# Note %label.object.look{:for => 'overlayObject-10'} %img.scans{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_scans.png'} -# Note %label.object.look{:for => 'noneKeyObject-42'} %img.crash{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_crashCart.png'} .response.response-42 A medical crash cart. This isn't powered so I can't use it. %label.closeResponse{:for => 'noneKeyObject-42'} -# Note %label.object.look{:for => 'noneKeyObject-43'} %img.revenge{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_revenge_1.png'} .response.response-43 Revenge. Poor guy. %label.closeResponse{:for => 'noneKeyObject-43'} -# Note %label.object.look.persist{:for => 'noneKeyObject-44'} %img.sam{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_sam.png'} .response.response-44 It's the bloodied remains of a security guard. His name tag says 'Sam Watts' %label.closeResponse{:for => 'noneKeyObject-44'} %label.object.keyObject.take{:for => 'keyObject-13'} %img.hand{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_hand.png'} .response.fail I don't like where this is going, but I would need something to do it with. %label.closeResponse{:for => 'keyObject-13'} .response.success Oh God, Ok I've done it. I'm so sorry Sam. -# =============================================================== -# Cells fuse -# =============================================================== -if (row == 2 && segment == 12) -# Note %label.object.look{:for => 'noneKeyObject-48'} %img.cellDoor{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellDoorOpen.png'} .response.response-48 This cell door has been opened and there's a foul smell coming from inside. %label.closeResponse{:for => 'noneKeyObject-48'} -# Note %label.object.look{:for => 'noneKeyObject-49'} %img.cellName{:draggable => 'false', :draggable => 'false', :draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellName.png'} .response.response-49 Patient #18. The rest of the name plaque has been scratched off. %label.closeResponse{:for => 'noneKeyObject-49'} -# Note %label.object.look{:for => 'noneKeyObject-50'} %img.freedom{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_freedom.png'} .response.response-50 Freedom. At least we have some things in common. %label.closeResponse{:for => 'noneKeyObject-50'} -# Note %label.object.look{:for => 'overlayObject-11'} %img.fuseBox{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseBox.png'} -# =============================================================== -# Cells door -# =============================================================== -if (row == 2 && segment == 13) -# Wardens office door %label.object.keyObject.open{:for => 'keyObject-15'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.fail The door is locked. I need to divert the cells backup power to it. There must be a fusebox around here somewhere. %label.closeResponse{:for => 'keyObject-15'} .response.success The door is now powered, I can go through. -# =============================================================== -# Cells entrance -# =============================================================== -if (row == 2 && segment == 10) -# Note %label.object.look{:for => 'noneKeyObject-45'} %img.cellDoor{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellDoor.png'} .response.response-45 These look like patient cells of some kind, It's locked and I can't hear anyone inside. %label.closeResponse{:for => 'noneKeyObject-45'} -# Note %label.object.look{:for => 'noneKeyObject-46'} %img.cellName{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellName.png'} .response.response-46 Patient #4. K. Van Sant. %label.closeResponse{:for => 'noneKeyObject-46'} -# =============================================================== -# Cells entrance -# =============================================================== -if (row == 2 && segment == 11) -# Note %label.object.look{:for => 'noneKeyObject-47'} %img.cellName{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellName.png'} .response.response-47 Patient #12. G. Park. %label.closeResponse{:for => 'noneKeyObject-47'} -# =============================================================== -# Reception 2 -# =============================================================== -if (row == 1 && segment == 3) -# Note %label.object.look{:for => 'noneKeyObject-51'} %img.stairs{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_stairs.png'} .response.response-51 Looks like this leads to more offices but the stairwell is blocked. %label.closeResponse{:for => 'noneKeyObject-51'} -# Note %label.object.look{:for => 'noneKeyObject-52'} %img.landscape{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_landscape.png'} .response.response-52 Even this serene landscape painting looks ominous. %label.closeResponse{:for => 'noneKeyObject-52'} -if (row == 1 && segment == 4) -# Note %label.object.look{:for => 'noneKeyObject-53'} %img.coffeeTable{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_coffeeTable.png'} .response.response-53 A small coffee table littered with half empty mugs and glasses. %label.closeResponse{:for => 'noneKeyObject-53'} -# =============================================================== -# Reception 3 -# =============================================================== -if (row == 1 && segment == 5) -# Note %label.object.look{:for => 'noneKeyObject-54'} %img.receptionMagazines{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_magazines.png'} .response.response-54 A stack of Mason Institute materials. Letterhead, brochures and the like. %label.closeResponse{:for => 'noneKeyObject-54'} -# Note %label.object.look{:for => 'noneKeyObject-55'} %img.receptionBlood{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_receptionBlood.png'} .response.response-55 I don't want to imagine what happened here. %label.closeResponse{:for => 'noneKeyObject-55'} -# Note %label.object.look{:for => 'noneKeyObject-56'} %img.filingCabinetReception{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_filingCabinet.png'} .response.response-56 Filled with patient visitation logs and receptionist notes. %label.closeResponse{:for => 'noneKeyObject-56'} -# =============================================================== -# pc -# =============================================================== -if (row == 2 && segment == 15) -# Note %label.object.look{:for => 'overlayObject-13'} %img.securityNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_infirmaryNote.png'} -# Note %label.object.look{:for => 'noneKeyObject-57'} %img.securityFilingCabinet{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_filingCabinet.png'} .response.response-57 Notes about patient 18's psycological profile. Particularly about his split personality disorder. %label.closeResponse{:for => 'noneKeyObject-57'} -# Note %label.object.look{:for => 'noneKeyObject-58'} %img.coyier{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_coyier_1.png'} .response.response-58 Head of security. C Coyier. %label.closeResponse{:for => 'noneKeyObject-58'} -# =============================================================== -# pc -# =============================================================== -if (row == 2 && segment == 16) -# Note %label.object.look{:for => 'noneKeyObject-59'} %img.lockers{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_lockers.png'} .response.response-59 A set of security lockers. I can't open any of them. %label.closeResponse{:for => 'noneKeyObject-59'} -# Note %label.object.look{:for => 'noneKeyObject-60'} %img.shaw{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_shaw.png'} .response.response-60 Security chief. S Shaw. %label.closeResponse{:for => 'noneKeyObject-60'} -# Note %label.object.look{:for => 'noneKeyObject-61'} %img.evans{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_evans.png'} .response.response-61 Riot specialist. C Evans. %label.closeResponse{:for => 'noneKeyObject-61'} %label.object.look{:for => 'overlayObject-12'} %img.crtObject{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_computer.png'} -# Wardens key card %label.object.destroy.take{:for => 'keyObject-23'} .response That's it! I've done it, the doors should now be unlocked. There's an emergency escape just above me! -# =============================================================== -# pc -# =============================================================== -if (row == 1 && segment == 13) %label.object.keyObject.open{:for => 'keyObject-22'} %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'} .response.fail This is the exit. I need to deactivate lockdown first. %label.closeResponse{:for => 'keyObject-22'} .response.success Yes it's open! Almost there. I can taste the freedom. -# =============================================================== -# pc -# =============================================================== -if (row == 1 && segment == 15) -# Note %label.object.look{:for => 'noneKeyObject-62'} %img.corpse{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_corpse.png'} .response.response-62 Wait. What? There's the body of a caretaker here. It looks as though he was changing the lights...does that mean... %label.closeResponse{:for => 'noneKeyObject-62'} -# =============================================================== -# pc -# =============================================================== -if (row == 1 && segment == 16) -# Note -# Note %label.object.look{:for => 'overlayObject-14'} %img.exit{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fireEscape.png'} .controls -# Control labels. %label.back{:for => "segment-#{segment + ((row - 1) * segments) - 1}-back"} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} %label.forward{:for => "segment-#{segment + ((row - 1) * segments) + 1}-forwards"} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveRight.png'} %label.up{:for => "segment-#{segment + ((row - 1) * segments) - segments}-forwards"} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveUp.png'} %label.down{:for => "segment-#{segment + ((row - 1) * segments) + segments}-forwards"} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveDown.png'} .segmentNumbers #{(row - 1) * 16 + segment} -# Main character. .player .player_sprite -# Level shroud to hide upper and lower levels .lightMap -# Overlay objects .overlayObjects .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_noteFull1.png'} %label{:for => 'overlayObject-1'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/updatedNote.png'} %label.show{:for => 'overlayObject-2'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_noteFull3_1.png'} %label.show{:for => 'overlayObject-3'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_staffPhoto.png'} %label.show{:for => 'overlayObject-4'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_canteenNoteFull.png'} %label.show{:for => 'overlayObject-5'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_accessPhotoFull.png'} %label.show{:for => 'overlayObject-6'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} %label.object.sneakyKey.take{:for => 'keyObject-8'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_sneakyKey.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_radioBack.png'} %input{:type => 'range', :min => '1', :max => '2', :value => '0', :step => '0.01'} %label.battery{:for => 'keyObject-11'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_battery.png'} %label.show{:for => 'overlayObject-7'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_receptionNoteFull_1.png'} %label.show{:for => 'overlayObject-8'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_infirmaryNoteFull.png'} %label.show{:for => 'overlayObject-9'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_scansFull.png'} %label.show{:for => 'overlayObject-10'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseBoxOverlay_3.png', :style => 'width: 710px;'} %label.show{:for => 'overlayObject-11'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} %label{:for => 'keyObject-16'} %img.switchFuse.switchOne{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'} %label{:for => 'keyObject-17'} %img.switchFuse.switchTwo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'} %label{:for => 'keyObject-18'} %img.switchFuse.switchThree{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'} %label{:for => 'keyObject-19'} %img.switchFuse.switchFour{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'} %label{:for => 'keyObject-20'} %img.switchFuse.switchFive{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'} %label{:for => 'keyObject-21'} %img.switchFuse.switchSix{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'} .overlayObject .content %img.crt{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_crt.png'} %label.show{:for => 'overlayObject-12'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} %input#pc1{:type => 'checkbox'} %img.crtPanel{:src => 'https://assets.codepen.io/217233/ct_crtPanel.png'} %input{:type => 'number', :min => '2844', :max => '2844', :value => '0000', :title => "Legs"} %label{:for => 'pc1'} %img.loginButton{:src => 'https://assets.codepen.io/217233/ct_crtLogin.png'} %label.deactivate{:for => 'keyObject-23'} %img{:src => 'https://assets.codepen.io/217233/ct_crtDeactivate.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_securityNoteFull.png'} %label.show{:for => 'overlayObject-13'} %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'} .overlayObject .content %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_newspaper.png', :style => 'width: 1210px;'} %p.end Thanks for playing, patient 18. Be sure to like and %a{:href => 'https://www.codepen.io/jcoulterdesign', :target => '_blank'} follow me on Codepen