Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Add-ons
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
v3 Arcade Lights Out Mode Details »»
v3 Arcade Lights Out Mode
Version: 1.0.2, by Gemma Gemma is offline
Developer Last Online: Nov 2023 Show Printable Version Email this Page

Category: Add-On Releases - Version: 4.x.x Rating:
Released: 10-24-2011 Last Update: 11-10-2011 Installs: 14
Template Edits
Re-useable Code Additional Files  
No support by the author.

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.

Download Now

File Type: zip v3 Arcade Lights Out 1.0.2.zip (6.4 KB, 57 views)

Screenshots

File Type: jpg lights.jpg (80.0 KB, 0 views)
File Type: jpg lights_out.jpg (27.2 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.

Comments
  #2  
Old 10-25-2011, 08:12 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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>
Reply With Quote
  #3  
Old 10-29-2011, 08:18 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Updated the css file to fix a problem when viewing with Google Chrome. If you're updating, just replace the css file.
Reply With Quote
  #4  
Old 11-03-2011, 01:23 PM
Skyrider Skyrider is offline
 
Join Date: Feb 2006
Location: Netherlands
Posts: 1,392
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #5  
Old 11-03-2011, 01:46 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Does the demo link work for you?

Can you PM me a link to your site so I can have a look
Reply With Quote
  #6  
Old 11-03-2011, 02:50 PM
Skyrider Skyrider is offline
 
Join Date: Feb 2006
Location: Netherlands
Posts: 1,392
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Yea, demo works fine: http://forum.esforces.com
Reply With Quote
  #7  
Old 11-03-2011, 02:58 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
  #8  
Old 11-03-2011, 03:25 PM
Skyrider Skyrider is offline
 
Join Date: Feb 2006
Location: Netherlands
Posts: 1,392
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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 ^^.
Reply With Quote
  #9  
Old 11-03-2011, 03:36 PM
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Location: Scotland
Posts: 1,229
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Reply With Quote
  #10  
Old 11-03-2011, 03:39 PM
Skyrider Skyrider is offline
 
Join Date: Feb 2006
Location: Netherlands
Posts: 1,392
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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.
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 12:04 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.08275 seconds
  • Memory Usage 2,367KB
  • 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