12in12 Lights Out

Your browser lacks required capabilities. Please upgrade it or switch to another to continue.

Loading…

<<nobr>> <div class="hud" id="hud"></div> <br><<button toggleHUD>><<toggleHUD>><</button>> <<timed 0.1s>><<updateHUD>><</timed>> <<script>> $(document).ready(function(){ $('#hud').mouseenter( function(){$("#hud").css("background-color", "#333");}, ); $('#hud').mouseleave( function(){$("#hud").css("background-color", "#222");}, ); $('#hud').click(function(){ new Wikifier(null, '<<toggleHUD>>'); }); }); <</script>> <</nobr>>

<<widget updateLights>> <<set $bgColor to "">> <<set $fontColor to "">> <<set $linkColor to "">> <<if $lights < 0>> <<set $lights to 0>> <<elseif $lights > 4>> <<set $lights to 4>> <</if>> <<if $lights is 0>> <<set $bgColor to "#111">> <<set $fontColor to "#292827">> <<set $linkColor to "#4f4d42">> <<replace "#info">>We're in complete darkness.<</replace>> <<set $roomName to "Complete Darkness">> <<elseif $lights is 1>> <<set $bgColor to "#292827">> <<set $fontColor to "#4f4d42">> <<set $linkColor to "#706a53">> <<replace "#info">>One candle is lit.<</replace>> <<set $roomName to "A Dark Room">> <<elseif $lights is 2>> <<set $bgColor to "#4f4d42">> <<set $fontColor to "#706a53">> <<set $linkColor to "#292827">> <<replace "#info">>Two candles are lit.<</replace>> <<set $roomName to "A Dimly Lit Room">> <<elseif $lights is 3>> <<set $bgColor to "#706a53">> <<set $fontColor to "#292827">> <<set $linkColor to "#917f5e">> <<replace "#info">>Three candles are lit.<</replace>> <<set $roomName to "The Livingroom">> <<elseif $lights is 4>> <<set $bgColor to "#917f5e">> <<set $fontColor to "#111">> <<set $linkColor to "#e3c691">> <<replace "#info">>Fireplace is on fire!<</replace>> <<set $roomName to "A Well Lit Livingroom">> <</if>> <<set document.body.style.backgroundColor = $bgColor>> <<set document.body.style.color = $fontColor>> <<for _l to 0; _l < document.getElementsByTagName("a").length; _l++>> <<set document.getElementsByTagName("a")[_l].style.color = $fontColor>> <</for>> <</widget>> <<widget toggleTorch>> <<if $flashlight>> <<set $flashlight to false>> <<set document.getElementById("glass").style.opacity = 0>> <<else>> <<set $flashlight to true>> <<set document.getElementById("glass").style.opacity = 1>> <</if>> <<updateHUD>> <</widget>>  <<widget updateContent>> <<set _tmpContent to []>> <<set _contentDark to "<h1>$roomName</h1>">> <<set _contentLight to "<h1>Living Room</h1>">> <<if $currentRoom is 1>> <<set _tmpContent to $roomA>> <<set _contentDark += "This place smelled familiar.<br>">> <<set _contentLight += "This place looked familiar.<br>">> <<elseif $currentRoom is 2>> <<set _tmpContent to $roomB>> <<elseif $currentRoom is 3>> <<set _tmpContent to $roomC>> <</if>> <<if _tmpContent.length > 0>> <<set _contentLight += "The room contained a few items.<br>">> <<set _contentDark += "The room was not empty.<br>">> <<else>> <<set _contentLight += "There is nothing here.">> <<set _contentDark += "There is nothing here.">> <</if>> <<for _j to 0; _j < _tmpContent.length; _j++>> <<if _tmpContent[_j] is "candle">> <<set _contentLight += "<<link "+_tmpContent[_j] + ">><<lightCandle>><</link>><br>">> <<elseif _tmpContent[_j] is "litcandle">> <<set _contentLight += "<<link "+_tmpContent[_j] + ">><<pickupCandle>><</link>><br>">> <<else>> <<set _contentLight += "<<link "+_tmpContent[_j] + ">><<move " + _tmpContent[_j] + " " + $currentRoom + " 0>><</link>><br>">> <</if>> <<set _contentDark += _tmpContent[_j] + "<br>">> <</for>> <<replace "#litroom">>_contentLight<</replace>> <<replace "#darkroom">>_contentDark<</replace>> <<if $currentRoom is 1>> <<set $roomA to _tmpContent>> <<elseif $currentRoom is 2>> <<set $roomB to _tmpContent>> <<elseif $currentRoom is 3>> <<set $roomC to _tmpContent>> <</if>> <</widget>> <<widget lightCandle>> <<if $inventory.includes("lighter")>> <<set _tmpContent to []>> <<if $currentRoom is 1>> <<set _tmpContent to $roomA>> <<elseif $currentRoom is 2>> <<set _tmpContent to $roomB>> <<elseif $currentRoom is 3>> <<set _tmpContent to $roomC>> <</if>> <<for _i to 0; _i < _tmpContent.length; _i++>> <<if _tmpContent[_i] is "candle">> <<set _tmpContent[_i] to "litcandle">> <<set $lights++>> <<updateLights>> <<if $currentRoom is 1>> <<set $roomA to _tmpContent>> <<elseif $currentRoom is 2>> <<set $roomB to _tmpContent>> <<elseif $currentRoom is 3>> <<set $roomC to _tmpContent>> <</if>> <<updateContent>> <<break>> <</if>> <</for>> <<else>> <<replace "#info">>You have nothing to light this candle with.<</replace>> <</if>> <</widget>> <<widget pickupCandle>> <<set $lights-->> <<updateLights>> <<set _tmpContent to []>> <<if $currentRoom is 1>> <<set _tmpContent to $roomA>> <<elseif $currentRoom is 2>> <<set _tmpContent to $roomB>> <<elseif $currentRoom is 3>> <<set _tmpContent to $roomC>> <</if>> <<for _i to 0; _i < _tmpContent.length; _i++>> <<if _tmpContent[_i] is "litcandle">> <<set _tmpContent[_i] to "candle">> <<if $currentRoom is 1>> <<set $roomA to _tmpContent>> <<elseif $currentRoom is 2>> <<set $roomB to _tmpContent>> <<elseif $currentRoom is 3>> <<set $roomC to _tmpContent>> <</if>> <<move "candle" $currentRoom 0>> <<updateContent>> <<break>> <</if>> <</for>> <</widget>>

<<set $displayHUD to false>> <<set $inventory to ["flashlight"]>> <<set $roomA to ["candle", "candle", "candle", "lighter"]>> <<set $roomB to []>> <<set $roomC to ["secretObject"]>> <<set $currentRoom to 0>> <<set $lights to 0>>  <<set $flashlight to false>> <<set $roomName to "Complete Darkness">>

<div class="background">Under a seemingly unimportant container...</div><div class="glass" id="glass">...there is some hidden information.</div> <<script>> $(document).on('mousemove', function(e){ var circleX = e.pageX-200; var circleY = e.pageY-30; $("#glass").css('clipPath', 'circle(60px at '+circleX+'px '+circleY+'px)'); }); <</script>>

<h1>Room A</h1> <<set $currentRoom to 1>> <div id="room"></div> <div class="hud" id="hud"></div> <div id="info"></div> <div class="navL"><<button '<'>> <<goto "Room C">> <</button>></div> <div class="navR"><<button '>'>>  <<goto "Room B">>  <</button>></div> <<timed 0.1s>><<updateContent>><<updateHUD>><</timed>> <<script>> $(document).ready(function(){ $('#hud').mouseenter( function(){ $("#hud").css("background-color", "#333"); }, ); $('#hud').mouseleave( function(){ $("#hud").css("background-color", "#222"); }, ); }); <</script>>

<h1>Room B</h1> <<set $currentRoom to 2>> <div id="room"></div> <div class="hud" id="hud"></div> <div id="info"></div> <div class="navL"><<button '<'>> <<goto "Room A">> <</button>></div> <div class="navR"><<button '>'>> <<goto "Room C">> <</button>></div> <<timed 0.1s>><<updateContent>><<updateHUD>><</timed>> <<script>> $(document).ready(function(){ $('#hud').mouseenter( function(){ $("#hud").css("background-color", "#333"); }, ); $('#hud').mouseleave( function(){ $("#hud").css("background-color", "#222"); }, ); }); <</script>>

<h1>Room C</h1> <div class="background">So dark in here...</div><div class="glass" id="glass">...there is some hidden information.<div id="room"></div></div> <<set $currentRoom to 3>> <div class="hud" id="hud"></div> <div id="info"></div> <div class="navL"><<button '<'>> <<goto "Room B">> <</button>></div> <div class="navR"><<button '>'>> <<goto "Room A">> <</button>></div> <<timed 0.1s>><<updateContent>><<updateHUD>><</timed>> <<script>> $(document).ready(function(){ $('#hud').mouseenter( function(){ $("#hud").css("background-color", "#333"); }, ); $('#hud').mouseleave( function(){ $("#hud").css("background-color", "#222"); }, ); }); $(document).on('mousemove', function(e){ var circleX = e.pageX-200; var circleY = e.pageY-120; $("#glass").css('clipPath', 'circle(60px at '+circleX+'px '+circleY+'px)'); }); <</script>>

<<nobr>> <<set $currentRoom to 1>> <div class="background" id="cover"> <p id="darkroom"></p><p>darkness</p> <p id="info"></p> </div><div class="glass" id="glass"> <p id="litroom"></p><p>revealed</p> </div> <<timed 0.01s>><<updateContent>><<updateLights>><<updateHUD>><<set document.getElementById("glass").style.opacity = 0>><</timed>> <div class="hud" id="hud"></div> <<script>> $(document).ready(function(){ $('a').mouseenter(function(){ $(this).css("color", State.variables.linkColor); $(this).css("opacity", "1"); }); $('a').mouseleave(function(){ $(this).css("color", State.variables.fontColor); /*$(this).css("opacity", "0.5");*/ }); $('#hud').mouseenter( function(){ $("#hud").css("background-color", "#333"); }, ); $('#hud').mouseleave( function(){ $("#hud").css("background-color", "#222"); }, ); }); $(document).on('mousemove', function(e){ var circleX = e.pageX; var circleY = e.pageY-30; if (State.variables.flashlight){ $("#glass").css('clipPath', 'circle(100px at '+circleX+'px '+circleY+'px)'); } }); <</script>> <</nobr>>

<<widget updateHUD>> <<set _hud to "<div class='center'><table><tr>">> <<for _i to 0; _i < $inventory.length; _i++>> <<if $inventory[_i] is "flashlight">> <<set _state to "">> <<if $flashlight>> <<set _state to "on">> <<else>> <<set _state to "off">> <</if>> <<set _hud += "<td><<link " + $inventory[_i] +">><<toggleTorch>><</link>>("+_state+")</td>">> <<else>> <<set _hud += "<td><<link " + $inventory[_i] +">><<move " + $inventory[_i] + " 0 " + $currentRoom + ">><</link>></td>">> <</if>> <</for>> <<set _hud += "</tr></table></div>">> <<if $inventory.length is 0>> <<set _hud to "<div class='center'><table><tr><td>You have nothing.</td></tr></table></div>">> <</if>> <<if $displayHUD>> <<set _hud += "<br><div class='center'><<link close>><<turnHUD off>><</link>></div>">> <<else>> <<set _hud += "<br><div class='center'><<link open>><<turnHUD on>><</link>></div>">> <</if>> <<replace "#hud">>_hud<</replace>> <<if $displayHUD>> <<set document.getElementById('hud').style.top = "0px">> <<else>> <<set document.getElementById('hud').style.top = "-120px">> <</if>> <</widget>>  <<widget turnHUD>> <<set _status to $args[0]>> <<if _status is "on" && !$displayHUD>> <<set $displayHUD to true>> <<set document.getElementById('hud').style.animation = "slide 0.5s ease-out">> <<timed 0.49s>> <<set document.getElementById('hud').style.top = "0">> <<set document.getElementById('hud').style.animation = "">> <</timed>>  <<elseif _status is "off" && $displayHUD>> <<set $displayHUD to false>> <<set document.getElementById('hud').style.animation = "slide 0.5s ease-out reverse">> <<timed 0.49s>> <<set document.getElementById('hud').style.top = "-120px">> <<set document.getElementById('hud').style.animation = "">> <</timed>>  <</if>> <<updateHUD>> <</widget>>  <<widget move>> <<set _item to $args[0]>> <<set _origin to $args[1]>> <<set _target to $args[2]>> <<if _origin is 0>> <<set _oList to $inventory>> <<elseif _origin is 1>> <<set _oList to $roomA>> <<elseif _origin is 2>> <<set _oList to $roomB>> <<elseif _origin is 3>> <<set _oList to $roomC>> <</if>> <<if _target is 0>> <<set _tList to $inventory>> <<elseif _target is 1>> <<set _tList to $roomA>> <<elseif _target is 2>> <<set _tList to $roomB>> <<elseif _target is 3>> <<set _tList to $roomC>> <</if>> <<set _tList.push(_item)>> <<for _k to 0; _k < _oList.length; _k++>> <<if _oList[_k] is _item>> <<set _oList.delete(_item)>>  <<break>> <</if>> <</for>> <<if _target is 0>> <<set $inventory to _tList>> <<elseif _target is 1>> <<set $roomA to _tList>> <<elseif _target is 2>> <<set $roomB to _tList>> <<elseif _target is 3>> <<set $roomC to _tList>> <</if>> <<if _origin is 0>> <<set $inventory to _oList>> <<elseif _origin is 1>> <<set $roomA to _oList>> <<elseif _origin is 2>> <<set $roomB to _oList>> <<elseif _origin is 3>> <<set $roomC to _oList>> <</if>> <<updateContent>> <<updateHUD>> <</widget>>