Resource icon

XenForo XF Arcade - Lights Off Mode

Gemma

Captain
This is the same mod that I released for v3 Arcade

What Does This Do?
Basically, when you turn lights down, the entire page darkens* and lets you play the game in the 'dark' which cuts out distractions. Also known as Cinema Mode.

*You can also change the fade background colour to match that of your forum and blank everything out except the game.

Upload the contents of the zip file to your forum root (where index.php is located)

Open arcade_play template and at the beginning find:
Code:
<xen:title>{xen:phrase arcade_play} {$game.title}</xen:title>

Above that add:
Code:
<style type="text/css">
        #lights { /* This is the container which holds the light switch */
            position:relative; /* Set the position of the light switch to relative so it can be placed above the "dimming" layer */
            z-index:500; /* Set the height on the Z axis to 500 which is above the "dimmed" layer */
        }
 
        object { /* The object tag is what the swf files are held in */
            outline:none; /* Set the outline of swf objects to none so when you click on it you don't get a border around the swf */
        }
 
        #fade { /* This is the "dimmed" layer which fades in when the lights go off */
            display: none; /* Set the display to none which hides the layer */
            background: #000; /* Set the color to black */
            position: fixed; left: 0; top: 0; /* Set the position to fixed so when the user scrolls it stays with them */
            width: 100%; height: 100%; /* Set the width and height to 100% of the browser window */
            opacity: .95; /* Set the layer's opacity to .90 which is 90% */
            z-index:100; /* Set the height on the Z axis to 100 which is below the "light switch" layer */
        }
    </style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var flashvars = false;
 
    var params = {
        movie: "Lights.swf",
        quality: "high",
        allowScriptAccess: "always",
        wmode: "transparent"
    };
 
    var attributes = false;
 
    swfobject.embedSWF("Lights.swf", "lights", "100", "100", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    function lightsOn(){
        //When you turn the lights back on fade out the "dim" layer over 500 milliseconds and then remove it
        $('#fade').fadeOut(500,function() { $("#fade").remove(); });
    };
 
    function lightsOff(){
        $('body').append('<div id="fade"></div>'); //When you turn the lights off add the "dimmed" layer to the page
        $('#fade').fadeIn(250); //Fade in the "dim" layer over 250 milliseconds
    };
</script>

You can change the following lines to suit yourself.

Code:
background: #000; /* Set the color to black */
opacity: .95; /* Set the layer's opacity to .95 which is 95% */

Still in the arcade_play template, find the last </div> and add this code before it
Code:
<div align="center">
<div id="lights"></div></div>

If you've not made any prior changes to your arcade_play template you can replace the whole code with this

Code:
<style type="text/css">
        #lights { /* This is the container which holds the light switch */
            position:relative; /* Set the position of the light switch to relative so it can be placed above the "dimming" layer */
            z-index:500; /* Set the height on the Z axis to 500 which is above the "dimmed" layer */
        }
 
        object { /* The object tag is what the swf files are held in */
            outline:none; /* Set the outline of swf objects to none so when you click on it you don't get a border around the swf */
        }
 
        #fade { /* This is the "dimmed" layer which fades in when the lights go off */
            display: none; /* Set the display to none which hides the layer */
            background: #000; /* Set the color to black */
            position: fixed; left: 0; top: 0; /* Set the position to fixed so when the user scrolls it stays with them */
            width: 100%; height: 100%; /* Set the width and height to 100% of the browser window */
            opacity: .95; /* Set the layer's opacity to .90 which is 90% */
            z-index:100; /* Set the height on the Z axis to 100 which is below the "light switch" layer */
        }
    </style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var flashvars = false;
 
    var params = {
        movie: "Lights.swf",
        quality: "high",
        allowScriptAccess: "always",
        wmode: "transparent"
    };
 
    var attributes = false;
 
    swfobject.embedSWF("Lights.swf", "lights", "100", "100", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    function lightsOn(){
        //When you turn the lights back on fade out the "dim" layer over 500 milliseconds and then remove it
        $('#fade').fadeOut(500,function() { $("#fade").remove(); });
    };
 
    function lightsOff(){
        $('body').append('<div id="fade"></div>'); //When you turn the lights off add the "dimmed" layer to the page
        $('#fade').fadeIn(250); //Fade in the "dim" layer over 250 milliseconds
    };
</script>
<xen:title>{xen:phrase arcade_play} {$game.title}</xen:title>
<xen:h1>{$game.title}</xen:h1>
 
<xen:description>
    {$game.description}
</xen:description>
 
<xen:navigation>
    <xen:breadcrumb href="{xen:link full:arcade/browse, $category}">{$category.title}</xen:breadcrumb>
    <xen:breadcrumb href="{xen:link full:arcade/play, $game}">{$game.title}</xen:breadcrumb>
</xen:navigation>
<xen:if is="{$xenOptions.xfarcade_play_display} == 1">
    <div class="sectionMain">
<xen:else />
    <div class="xenForm sectionMain">
</xen:if>
<div class="actionList">
{xen:raw $player}
</div>
<div align="center">
<div id="lights"></div></div>
</div>
 

Attachments

  • XFA - Lights Out Mode.zip
    8.6 KB · Views: 206
  • lightsout.jpg
    lightsout.jpg
    75.8 KB · Views: 206
  • normal.jpg
    normal.jpg
    84.1 KB · Views: 208
Back
Top