The Arcive of Official vBulletin Modifications Site.

v3 Arcade Lights Out Mode · **Released**: 10-24-2011

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:

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.

Gemma · #2 10-25-2011, 08:12 PM

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>

Gemma · #3 10-29-2011, 08:18 PM

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

Skyrider · #4 11-03-2011, 01:23 PM

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 · #5 11-03-2011, 01:46 PM

Does the demo link work for you?

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

Skyrider · #6 11-03-2011, 02:50 PM

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

Gemma · #7 11-03-2011, 02:58 PM

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.

Skyrider · #8 11-03-2011, 03:25 PM

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 · #9 11-03-2011, 03:36 PM

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

Skyrider · #10 11-03-2011, 03:39 PM

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.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06785 seconds Memory Usage 2,363KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (13)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (9)postbit (3)postbit_attachment (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_postinfo_query fetch_postinfo fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!