Add-On Releases - v3 Arcade Lights Out Mode

I did this a long time ago, so I'd advise you to back up your v3ARCADE_PLAY template before you do anything else, just incase I've forgotten something

I released a simplified version of this to Premium Members on v3arcade.com, now here is the more advanced version.

What Does This Do?
Basically, when you turn lights down, the entire page darkens and let you play the game in the 'dark' which cuts out distractions.

I've also added a section of code which will show a game description (if one is available) above the game instructions.

Open your headinclude template and add:

<vb:if condition="THIS_SCRIPT == 'arcade'">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/lights.js"></script>
<link rel="stylesheet" href="css/lights.css"/>
</vb:if>

Save the template.

In your v3ARCADE_PLAY template and find:

<!-- main -->
            <div class="blockrow">{vb:raw flashcode}</div>
            <vb:if condition="$game['instructions']">
                <div class="blockrow">{vb:raw game.instructions}</div>
            </vb:if>
            <!-- /main -->
        </td>

        <td valign="top" style="width: 200px; padding-left: 10px;">
            <!-- right area -->

Replace that with:

<!-- main -->
<div id="acontainer">
          <div id="header">   
            <div id="command"><a class="lightSwitcher" href="javascript:foo();">Turn off the lights</a></div>
        </div>
        <div id="movie">
            <div class="blockrow">{vb:raw flashcode}</div>
                        
            <!-- /main -->

<table width="700" border="0">
 <vb:if condition="$game['description']">
  <tr>
   <th scope="row"><span><b>Description:</b> {vb:raw game.description}<br/><br/></span></th>
    </tr>
    </vb:if>
<vb:if condition="$game['instructions']">
  <tr>
    <th scope="col"><span><b>Instructions:</b> {vb:raw game.instructions}</span></th>
    </tr>
    </vb:if>  
</table>
</td>
        <td valign="top" style="width: 200px; padding-left: 10px;">
            <!-- right area -->

Still in v3ARCADE_PLAY find:

{vb:raw footer}

Below that add:

</div>
    </div>
    <div id="shadow"></div>

Save the template.

Upload the contents of the zip file to your server using your FTP

css/lights.css
js/lights.js
images/arcade/light_bulb.png
images/arcade/light_bulb_off.png
images/arcade/shade5x5.png

You can see a live demo in our arcade, play a game and click on 'Turn The Lights Off'.

To upgrade from version 1.0.1 to version 1.0.2, unpack the archive and upload the files. No need to re-edit any templates

Version History
1.0.1 - Initial release on vB.org
1.0.2 - Added new lights.css file

If anyone wants to further develop any of my addons, you are free to do so.

[Gemma]

Originally Posted by woffie

Well, the link for turning on and off the lights is right above the game. I click on it and it changes status but does not actually turn off the lights.

I've updated this version. Sorry about that.

To upgrade from version 1.0.1 to version 1.0.2, unpack the archive and upload the files. No need to re-edit any templates(unless you've removed the edits ofcourse).

[woffie]

Kewl, hope the new version works for me. My members are gonna love this. I have some serious gamers on my site.

[woffie]

You do mean the headinclude for the forum not the arcade_headinclude right?

[Gemma]

Originally Posted by woffie

You do mean the headinclude for the forum not the arcade_headinclude right?

Yes.

[woffie]

Still not working for me.

[Mooff]

check whether you are already using a jquery file on your server and if you do include it above the code Gemma provided. Loading multiple jquery files on the same site does break the jquery functionality in many cases.

You could try to remove the jquery line and try this codeblock instead:

<vb:if condition="THIS_SCRIPT == 'arcade'">
<script type="text/javascript" src="js/lights.js"></script>
<link rel="stylesheet" href="css/lights.css"/>
</vb:if>

[Gemma]

Originally Posted by woffie

Still not working for me.

Can you try following the instructions in post #7

[ofir24]

how do i translate it to heb? i try to translate the words in js file but it didn't show good.

[Gemma]

Originally Posted by ofir24

how do i translate it to heb? i try to translate the words in js file but it didn't show good.

No sure to be honest, the only wording that would need changed is the bits in red.

in the v3Arcade_PLAY template edit

<div id="command"><a class="lightSwitcher" href="javascript:foo();">Turn off the lights</a></div>

And in the lights.js file

$(this).html("Turn off the lights").removeClass("turnedOff");
        else
            $(this).html("Turn on the lights").addClass("turnedOff");

[ofir24]

Originally Posted by Gemma

No sure to be honest, the only wording that would need changed is the bits in red.

in the v3Arcade_PLAY template edit

<div id="command"><a class="lightSwitcher" href="javascript:foo();">Turn off the lights</a></div>

And in the lights.js file

$(this).html("Turn off the lights").removeClass("turnedOff");
        else
            $(this).html("Turn on the lights").addClass("turnedOff");

that's exactly what i did, it translate it not good, how can i defined the coding langauge in js?