vb.org Archive
Page 1 of 5 1 23 Last »
Show 40 post(s) from this thread on one page

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)

Gemma 10-24-2011 10:00 PM
v3 Arcade Lights Out Mode
 
1 Attachment(s)
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.

Gemma 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 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 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 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 11-03-2011 02:50 PM
Yea, demo works fine: http://forum.esforces.com

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


All times are GMT. The time now is 08:40 AM.
Page 1 of 5 1 23 Last »
Show 40 post(s) from this thread on one page

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01283 seconds
  • Memory Usage 1,833KB
  • 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
  • (13)bbcode_code_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (2)pagenav_pagelink
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (10)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