v3 Arcade Lights Out Mode

[Gemma]

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

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:

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

[Gemma]

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

[Skyrider]

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.

[Gemma]

Does the demo link work for you?

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

[Skyrider]

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

[Gemma]

Try this,

In your v3ARCADE_PLAY template 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 it with:

<!-- 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:
{vb:raw footer}Below add:
</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.

[Skyrider]

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

[Gemma]

Just below:

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

Try adding:

<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

[Skyrider]

Nothing still I'm afraid, here's my play template:
{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.

[Gemma]

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

[Skyrider]

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

[Gemma]

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

Edit: Try replacing the part between <!-- main --> and <!-- /main --> with this

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

[Skyrider]

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

[Gemma]

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

[Gemma]

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

[Skyrider]

Looks actually pretty neat :)

[woffie]

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

[Gemma]

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

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

[woffie]

Try changing the headinclude template edit to this

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

[Gemma]

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]

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]

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]

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]

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?

[woffie]

I have tried every suggestion, nothing works. Oh well

[Mark.B]

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.

[Brandon Sheley]

nice addition, thanks for sharing :)

[Mark.B]

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):
$text = $text . "</div></div><div id='shadow'></div> ";

[stangger5]

For ibproarcade,,I put

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

right above the last

</table>

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

Thanks Gemma !!

[woffie]

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

[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. :(

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.

[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. :(

Should be working for you now :D

[ofir24]

you forgot my message :
https://vborg.vbsupport.ru/showpost.php?p=2267244&postcount=30

[Gemma]

you forgot my message :
https://vborg.vbsupport.ru/showpost.php?p=2267244&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:

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

<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:
{vb:raw footer}

Below add:
</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.

[ofir24]

i did it, the light is always off or always on

[woffie]

Should be working for you now :D

Thanks Gemma! Your awesome!

[Gemma]

@ofir24

In the v3ARCADE_PLAY template try adding:
<script type="text/javascript" src="clientscript/jquery/jquery-1.4.4.min.js"></script>After:
<vb:if condition="THIS_SCRIPT == 'arcade'">If that doesn't work, send me a PM with a link to your site and temporary admin access and I'll have a look.

[ofir24]

doesn't work, my site is on my computer, since it's my first forum ever, i need to fill the forum with information before i upload it to the net. you can try on your site, probably you have 1 on your computer for practicing and trying etc.

[Gemma]

doesn't work, my site is on my computer, since it's my first forum ever, i need to fill the forum with information before i upload it to the net. you can try on your site, probably you have 1 on your computer for practicing and trying etc.

I've no knowledge or experience of that, sorry. Only thing I can think of is that he paths aren't correct since your running it on your machine.

Maybe someone with better understanding of how that works can help you.

[Gemma]

Released version 2 - https://vborg.vbsupport.ru/showthread.php?t=277346

[Hippy]

great mod Gemma v2 better ? or just updated for vb4.1.10 thanks

[Gemma]

great mod Gemma v2 better ? or just updated for vb4.1.10 thanks

v2 is better IMO; you can see it in action here - http://www.forumbanter.com/arcade/game-452/

[datoneer]

Excellent. Sorry accidently rated terrible. Actually it is 5 stars! Sorry