Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                %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
              
            
!

CSS

              
                /* ========================================================================================================================
The CSS for this is so massive I exceed Codepens 1mb limit. So I have had to load externally 
https://rawcdn.githack.com/jcoulterdesign/theCaretaker/a17b3dea4b8d4c39b36e28b8b0c19dde10d02605/caretakerFinal.css 

The pre processed version of this (sass) can be found on this pen. https://codepen.io/jcoulterdesign/pen/8a9b1fe7ee7d6b59a60eb8f814029fe3
It will not load however.
======================================================================================================================== */

body {
    background: black;
}

@keyframes thumbnail {
    0% {opacity: 1}
    100% {opacity: 0}
}

.thumbnail {
    animation: thumbnail 1s 10s forwards;
    position: absolute;
    z-index: -1;
    width: 100%;
    left: 0;
    top: 50%;
    pointer-events: none;
    opacity: 1;
    transform: translateY(-50%);
}


              
            
!

JS

              
                // No.
              
            
!
999px

Console