vb.org Archive - Add-On Releases - v3 Arcade Lights Out Mode

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Add-ons (https://vborg.vbsupport.ru/forumdisplay.php?f=245)

- - Add-On Releases - v3 Arcade Lights Out Mode (https://vborg.vbsupport.ru/showthread.php?t=272803)

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 :o

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:

Code:

<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:

Code:

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

Code:

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

Code:

{vb:raw footer}

Below that add:

Code:

</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.

Sorry, I had a bit of the code wrong. If you had already installed and it wasn't working, change the headinclude template to this:

Code:

<vb:if condition="THIS_SCRIPT == 'arcade'">

<link rel="stylesheet" href="css/lights.css"/>

<script type="text/javascript" src="js/lights.js"></script>

</vb:if>

Updated the css file to fix a problem when viewing with Google Chrome. If you're updating, just replace the css file.

Installed, doesn't seem to work on Google Chrome. In fact, it doesn't work at all I'm afraid. I tried IE, FireFox and Chrome. None of them worked. I copy/pasted the exact lines as instructed.

Does the demo link work for you?

Can you PM me a link to your site so I can have a look

Yea, demo works fine: http://forum.esforces.com

Try this,

In your v3ARCADE_PLAY template find:

Code:

<!-- 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 it with:

Code:

<!-- main -->

<vb:if condition="THIS_SCRIPT == 'arcade'">

<script type="text/javascript">

        $(document).ready(function(){

    $("#shadow").css("height", $(document).height()).hide();

    $(".lightSwitcher").click(function(){

        $("#shadow").toggle();

        if ($("#shadow").is(":hidden"))

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

        else

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

    });

}); 

    </script>

</vb:if>

<link rel="stylesheet" href="css/lights.css"/>

<div id="acontainer">

          <div id="header">   

            <div id="command"><a class="lightSwitcher" href="javascript:void(0)">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 -->

Find:

Code:

{vb:raw footer}

Below add:

Code:

</div>

    </div>

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

Upload the images and the css file, no need to upload the js file or do the headinclude template edit.

Doesn't work either I'm afraid. Makes the light button unclickable. Nothing happens. Not even the light text changes to on.

Btw, I know this is off-topic, but I've made a edit reply in the main arcade thread regarding new threads/replies on highscores ^^.

Just below:

Code:

<vb:if condition="THIS_SCRIPT == 'arcade'">

Try adding:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

If that doesn't work, can you send me your v3ARCADE_PLAY template so I can have a look

Nothing still I'm afraid, here's my play template:

Code:

{vb:stylevar htmldoctype}

<html xmlns="http://www.w3.org/1999/xhtml" dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}">

<head>

<!-- no cache headers -->

<meta http-equiv="Pragma" content="no-cache" />

<meta http-equiv="Expires" content="-1" />

<meta http-equiv="Cache-Control" content="no-cache" />

<!-- end no cache headers -->

{vb:raw headinclude}



{vb:raw arcade_headinclude}



<title>{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}} - {vb:raw vboptions.arcadename} - {vb:raw game.title}</title>

{vb:raw headinclude_bottom}

</head>

<body>

{vb:raw header}

{vb:raw navbar}



<div id="pagetitle" class="pagetitle">

        <h1>{vb:raw game.title}</h1>

</div>



<table cellpadding="0" cellspacing="0" border="0" align="center">

        <tr>

                <td align="center" class="blockbody" valign="top">











<!-- main -->

<vb:if condition="THIS_SCRIPT == 'arcade'">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript">

        $(document).ready(function(){

    $("#shadow").css("height", $(document).height()).hide();

    $(".lightSwitcher").click(function(){

        $("#shadow").toggle();

        if ($("#shadow").is(":hidden"))

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

        else

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

    });

}); 

    </script>

</vb:if>

<link rel="stylesheet" href="css/lights.css"/>

<div id="acontainer">

          <div id="header">   

            <div id="command"><a class="lightSwitcher" href="javascript:void(0)">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 -->











                        <div class="collapse">

                                <h3 class="blockhead">

                                        <a href="#top" class="collapse" id="collapse_v3_gamepanel"><img src="{vb:stylevar imgdir_button}/collapse_40b.png" alt="" title="{vb:rawphrase collapse_this_category}" /></a>

                                        {vb:raw game.title}

                                </h3>

        

                                <div class="blockbody formcontrols" id="v3_gamepanel">

                                        <div class="blockrow" align="center">

                                                <img src="./{vb:raw vboptions.arcadeimages}/{vb:raw game.stdimage}" border="0" alt="{vb:raw game.title}" class="v3_gameicon" width="{vb:raw vboptions.arcadethumbsize}" height="{vb:raw vboptions.arcadethumbsize}" />



                                                <vb:if condition="!$show['challenge'] AND !$show['tournament'] AND !($game['gamepermissions'] & $vbulletin->bf_misc_gamepermissions['disablescoring'])">

                                                        <div>

                                                                <vb:if condition="$game['highscorerid']">

                                                                        {vb:rawphrase x_champion, {vb:raw game.title}}:

                                                                        <div>

                                                                                <vb:if condition="$game['awardimg']">

                                                                                        <img src="{vb:raw vboptions.arcadeimages}/{vb:raw game.awardimg}" alt="" border="0" <vb:if condition="$vboptions['arcadeawards'] == 4">width="{vb:raw vboptions.arcademinithumbsize}" height="{vb:raw vboptions.arcademinithumbsize}"</vb:if> />

                                                                                </vb:if>

                                                                                <strong><a href="{vb:link member, {vb:raw game}, null, 'highscorerid', 'username'}<vb:if condition="$vboptions['friendlyurl'] < 3">&amp;<vb:else />?</vb:if>tab=v3arcade_stats" target="_blank">{vb:raw game.username}</a></strong>

                                                                        </div>

                                                                <vb:else />

                                                                        <vb:if condition="$game['awardimg']">

                                                                                <img src="{vb:raw vboptions.arcadeimages}/{vb:raw game.awardimg}" alt="" border="0" <vb:if condition="$vboptions['arcadeawards'] == 4">width="{vb:raw vboptions.arcademinithumbsize}" height="{vb:raw vboptions.arcademinithumbsize}"</vb:if> /> {vb:rawphrase help_yourself, {vb:raw game.title}}

                                                                        </vb:if>

                                                                </vb:if>

                                                        </div>

                                                </div>



                                                <div class="blockrow" align="center">

                                                        {vb:rawphrase score_to_beat, {vb:raw game.title}}:<br />

                                                        {vb:raw game.highscore}

                                                </div>

                                                

                                                <vb:if condition="$show['pbest']">

                                                        <div class="blockrow" align="center">

                                                                {vb:rawphrase your_high_score}:<br />

                                                                {vb:raw pbest.score}

                                                        </div>

                                                </vb:if>

        

                                                <div class="blockrow" align="center">

                                                        <a href="arcade.php?{vb:raw session.sessionurl}{vb:raw catpagedata}">&laquo; {vb:rawphrase back_to_the_arcade, {vb:raw game.title}}</a><br />

                                                        <a href="arcade.php?{vb:raw session.sessionurl}do=scores&amp;gameid={vb:raw game.gameid}">{vb:rawphrase view_high_scores, {vb:raw game.title}} &raquo;</a>

                                                </div>

                                        </vb:if>

        

                                        <vb:if condition="$show['challenge']">

                                                <h3 class="blocksubhead" align="center">{vb:rawphrase opponent}:</h3>

                                                <div class="blockrow">

                                                        <a href="{vb:link member, {vb:raw game}, null, 'ouserid', 'username'}<vb:if condition="$vboptions['friendlyurl'] < 3">&amp;<vb:else />?</vb:if>tab=v3arcade_stats" target="_blank">{vb:raw game.username}</a>

                                                        <div align="center"><img src="{vb:raw challenger.useravatar}" alt="" {vb:raw challenger.avdimensions}/></div>

                                                </div>

                                        </vb:if>

                                        <vb:if condition="$show['tournament']">

                                                <div class="blockrow" align="center">

                                                        {vb:rawphrase tournament_play_info, {vb:raw tournament.title}, {vb:raw tournament.round}, {vb:raw currentround.tries}, {vb:raw tournament.numtries}, {vb:raw currentround.score}}

                                                </div>

                                        </vb:if>

                                        <vb:if condition="$res_dropbits">

                                                <div class="blockrow" align="center">

                                                        <div id="gameres_menu" class="popupmenu">

                                                                <a class="popupctrl" href="javascript://">{vb:rawphrase resolution}: <span id="gameres_row">{vb:raw resolution}</span>%</a>

                                                                <ul class="popupbody popuphover">

                                                                        {vb:raw res_dropbits}

                                                                </ul>

                                                        </div>

                                                </div>

                                        </vb:if>

                                        <div class="blockrow" align="center">

                                                <vb:if condition="!$show['challenge'] AND !$show['tournament']">

                                                        <img src="{vb:raw vboptions.arcadeimages}/backtip.gif" border="0" alt="" />

                                                <vb:else />

                                                        {vb:rawphrase challenge_warning}

                                                </vb:if>

                                        </div>

                                </div>

                        </div>

                        <!-- /right area-->

                </td>

        </tr>

</table>



{vb:raw footer}

</div>

    </div>

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

</body>

</html>

With the adjustments from the one you have given me.

Strange, your template works perfectly on my site - are you running any javascript compressor on your site?

Not that I know off.. I can't find any plugins that use compression capabilities. Maybe a conflict with another plugin?

Could be, I'll put together a noConflict version and post it later

Edit: Try replacing the part between  and  with this

Code:

<!-- main -->

<vb:if condition="THIS_SCRIPT == 'arcade'">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript">

var lo=$.noConflict();

        lo(document).ready(function(){

    lo("#shadow").css("height", lo(document).height()).hide();

    lo(".lightSwitcher").click(function(){

        lo("#shadow").toggle();

        if (lo("#shadow").is(":hidden"))

            lo(this).html("Turn off the lights").removeClass("turnedOff");

        else

            lo(this).html("Turn on the lights").addClass("turnedOff");

    });

}); 

    </script>

</vb:if>

<link rel="stylesheet" href="css/lights.css"/>

<div id="acontainer">

          <div id="header">   

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

        </div>

        <div id="movie">

            <div class="blockrow">{vb:raw flashcode}</div>

                        

            <!-- /main -->

Sorry mate, still doesn't work :(. I have to find the plugin that is causing this.

Quote:

Originally Posted by FF|Skyrider (Post 2264199)

Sorry mate, still doesn't work :(. I have to find the plugin that is causing this.

If you cannot find a solution you can try the other version I released on v3arcade.com

http://www.v3arcade.com/forums/showthread.php?t=3952

I might go back and add some better visuals to that one when I get time at the weekend

Started working on a new version at the weekend, still got some tweaking to do but I got distracted by Battlefield 3 :D

Looks actually pretty neat :)

Gemma, this is so kewl! I have tried the old and this new version and still cant get it to work.

Quote:

Originally Posted by woffie (Post 2265864)

Gemma, this is so kewl! I have tried the old and this new version and still cant get it to work.

Try changing the headinclude template edit to this

Code:

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

Quote:

Originally Posted by Gemma (Post 2266616)

Try changing the headinclude template edit to this

Code:

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

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.

Quote:

Originally Posted by woffie (Post 2266814)

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).

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

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

Quote:

Originally Posted by woffie (Post 2267078)

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

Yes.

Still not working for me.

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:

Code:

<vb:if condition="THIS_SCRIPT == 'arcade'">

<script type="text/javascript" src="js/lights.js"></script>

<link rel="stylesheet" href="css/lights.css"/>

</vb:if>

Quote:

Originally Posted by woffie (Post 2267104)

Still not working for me.

Can you try following the instructions in post #7

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

Quote:

Originally Posted by ofir24 (Post 2267218)

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

Code:

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

And in the lights.js file

Code:

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

        else

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

Quote:

Originally Posted by Gemma (Post 2267243)

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

in the v3Arcade_PLAY template edit

Code:

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

And in the lights.js file

Code:

$(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?

I have tried every suggestion, nothing works. Oh well

Thanks Gemma, I have this working spot on in v3Arcade.

You may be interested to know that I also got this working in ibProArcade, the code is almost the same, *except* it wouldn't work in IE for reasons I can't fathom.
But, it's fine in v3Arcade in IE.

nice addition, thanks for sharing :)

Managed to get this version working in IE ibProArcade.

Tip for anyone trying that:
Instead of the footer instructions, add this to the copyright function in skin_arcade (or skin_v3arcade):

Code:

$text = $text . "</div></div><div id='shadow'></div> ";

For ibproarcade,,I put

PHP Code:


		
			
</div></div><div id='shadow'></div>

right above the last

PHP Code:


		
			
</table>

in the function game($game,$top,$extra) code..

Thanks Gemma !!

Awesome, it works on an arcade it was not made for and I can't get it to work on the one it was written for. :(

Quote:

Originally Posted by woffie (Post 2268052)

Awesome, it works on an arcade it was not made for and I can't get it to work on the one it was written for. :(

If you want me to have a go at installing it for you (or checking for conflicts) PM me a temporary admin account on your site and I'll have a look. Can't really say why its not working without testing.

Quote:

Originally Posted by woffie (Post 2268052)

Awesome, it works on an arcade it was not made for and I can't get it to work on the one it was written for. :(

Should be working for you now :D

Quote:

Originally Posted by ofir24 (Post 2268487)

you forgot my message :
https://vborg.vbsupport.ru/showpost....4&postcount=30

Don't know if this will work or not :o

Go to AdminCP > Languages & Phrases > Phrase Manager

Add two new phrases

Phrase Type: Global
Product: vBulletin
Var Name: lights_on
Text: Your translation of 'Turn The Lights On'

Do the same but for lights_off

Then in your v3ARCADE_PLAY find:

Code:

<!-- 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 with:

Code:

<vb:if condition="THIS_SCRIPT == 'arcade'">

<script type="text/javascript">

        $(document).ready(function(){

    $("#shadow").css("height", $(document).height()).hide();

    $(".lightSwitcher").click(function(){

        $("#shadow").toggle();

        if ($("#shadow").is(":hidden"))

            $(this).html("{vb:rawphrase lights_off}").removeClass("turnedOff");

        else

            $(this).html("vb:rawphrase lights_on").addClass("turnedOff");

    });

}); 

    </script>

</vb:if>

<link rel="stylesheet" href="css/lights.css"/>

<div id="acontainer">

          <div id="header">   

            <div id="command"><a class="lightSwitcher" href="javascript:void(0)">{vb:rawphrase lights_on}</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 -->

Find:

Code:

{vb:raw footer}

Below add:

Code:

</div>

    </div>

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

Save.

Upload the lights.css file and the images, no need for the lights.js file or headinclude template edit.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02129 seconds Memory Usage 1,936KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (26)bbcode_code_printable (2)bbcode_php_printable (11)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: