WebDev

SMF Arcade => SMF Arcade Block Codes => Topic started by: Chen Zhen on July 06, 2013, 03:15:06 PM

Title: Horizontal latest scores block
Post by: Chen Zhen on July 06, 2013, 03:15:06 PM
Horizontal javascript marquee: Latest Scores

Use the code content shown below in a php portal block.
Some adjustable variables are at the start of the block code.

/*  Latest High Scores with Icons - Using javascript marquee */
global $boardurl;

/* For these dimensions... Set width to what suits your block, set height to what is needed for your images +5 */
$mar_width = 1400;
$mar_height = 55;
$mar_speed = 3;
$mar_pause = 1;

/* Thumbnail dimensions  */
$width = 50;
$height = 50;

/*  Number of scores to display,  games folder, enable thumbnail display */
$no_games = 29;  /* Set 1 to 29 games to display  */
$gamesUrl = $boardurl.'/Games/';
$show_thumbnail = true;

$mar_width = empty($mar_width) || $mar_width > 1400 ? 1400 : abs($mar_width);
$no_games = empty($no_games) || $no_games > 29 ? 29 : abs($no_games);

if ($no_games < 1) {$no_games = 1;}
/*  Execute the function and start the display  */
$display = latest_scores2($no_games,$gamesUrl, $width, $height, $show_thumbnail);
echo '
    <div style="display: flex-block;overflow:hidden;border: 0px;white-space: nowrap;">
        <div style="display: inline;position:relative;width:' . $mar_width . 'px;height:' . $mar_height . 'px;overflow:hidden;">
            <div style="display: inline;position:relative;width:' . $mar_width . 'px;height:' . $mar_height . 'px;">
                <div id="arcadeBlockInnerMarquee" style="position:relative;left:0px;top:0px;" onmouseover="arcadeMarqueeSpeedVar(true)" onmouseout="arcadeMarqueeSpeedVar(false)">
                    <div id="arcadeBlockInnerContainer1" style="display: inline;visibility:hidden;position:relative;"></div>
                </div>
            </div>
        </div>
    </div>';
echo javascript_marquee($display, $mar_width, $mar_height, $mar_speed, $mar_pause);

function javascript_marquee($display2, $mar_width, $mar_height, $mar_speed, $mar_pause)
{
    echo '
    <script type="text/javascript">
        var marqueewidth = "' . $mar_width . 'px";
        var marqueeheight = "' . $mar_height . 'px";
        var marqueespeed = "' . $mar_speed . '";
        var pauseit = "' . $mar_pause . '";
        var marqueecontentArcade1 = \'<span id="arcadeBlockInnerContainer1" style="font-face: Arial;white-space: nowrap;">' . $display2 . '</span>\';
        marqueespeed = Math.max(1, marqueespeed-1);
        var copyspeed = marqueespeed;
        var pausespeed = (pauseit==0) ? copyspeed: 0;
        document.getElementById("arcadeBlockInnerContainer1").innerHTML = marqueecontentArcade1;

        var actualwidth = "";
        var cross_marquee, ns_marquee;
        function arcadePopulateBlockContainer1(){
            cross_marquee = document.getElementById("arcadeBlockInnerMarquee");
            cross_marquee.style.left = parseInt(marqueewidth)+8+"px";
            cross_marquee.innerHTML = marqueecontentArcade1;
            actualwidth = document.getElementById("arcadeBlockInnerContainer1") ? document.getElementById("arcadeBlockInnerContainer1").offsetWidth : 0;
            lefttime=setInterval("scrollmarquee()",20);
        }

        function scrollmarquee(){
            if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
                cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px";
            else
                cross_marquee.style.left=parseInt(marqueewidth)+8+"px";
        }
        function arcadeMarqueeSpeedVar(pauseitz) {
            if (!pauseitz)
                copyspeed = marqueespeed;
            else {
                copyspeed = pausespeed;
            }
        }
        if (window.addEventListener)
            window.addEventListener("load", arcadePopulateBlockContainer1, false);
        else if (window.attachEvent)
            window.attachEvent("onload", arcadePopulateBlockContainer1);
        else
            window.onload = arcadePopulateBlockContainer1();
    </script>';
}

/*  Function to read the db for latest scores and relevant info */
function latest_scores2($no_games,$gamesUrl, $width, $height, $show_thumbnail)
{
    $start = 0;
    $count = $no_games;
    $display = '&nbsp;';
    $space1 = '<span style="padding-left: 3em;"></span>';
    $space2 = '<span style="padding-left: 14em;"></span>';
    $space3 =  '<span style="padding-left: 1em;"></span>';
  /* show latest high scores */
    global $smcFunc, $scripturl, $db_prefix, $txt;

    $result = $smcFunc['db_query']('', '
        SELECT game.id_game, game.game_name, game.thumbnail, game.game_directory, score.score, score.position,
        IFNULL(mem.id_member, 0) AS id_member, IFNULL(mem.real_name, score.player_name) AS real_name,  score.end_time
        FROM {db_prefix}arcade_scores AS score
        INNER JOIN {db_prefix}arcade_games AS game ON (game.id_game = score.id_game)
        LEFT JOIN {db_prefix}members AS mem ON (mem.id_member = score.id_member)
        ORDER BY end_time DESC
        LIMIT {int:start}, {int:count}',
        array(
            'start' => $start,
            'count' => $count,
            'empty' => '',
        )
    );

    while ($game = $smcFunc['db_fetch_assoc']($result))
    {
        $game_thumb = $gamesUrl.$game['game_directory'].'/'.$game['thumbnail'];

        $scoring = '<a style="padding: 0.075em 0em 0.075em 0em;" href="'.$scripturl.'?action=arcade;sa=highscore;game='.$game['id_game'].'">Scored: '. $game['score'].'</a>';
        $thumb = '';
        if ($show_thumbnail == true)
            $thumb = '<a href="'.$scripturl.'?action=arcade;sa=play;game='.$game['id_game'].'"><img src="'.$game_thumb.'" style="border: 0px;height: ' . $height . 'px;width: ' . $width . 'px;" alt="'.$game['game_name'].'" title="Play '.$game['game_name'].'" /></a>' . $space3;

        $display .= $thumb . '<span style="width: 14em;min-width: 14em;"><span style="max-width: 12em;line-height: 98%;min-height: ' . $height . 'px;vertical-align: middle;position: absolute;padding: 0.15em 0em 0.15em 0em;"><a style="vertical-align: middle;padding: 0.075em 0em 0.075em 0em;" href="'.$scripturl.'?action=arcade;sa=play;game='.$game['id_game'].'">' . $game['game_name'] . '</a><span style="display: block;"></span><a style="padding: 0.075em 0em 0.075em 0em;" href="'.$scripturl.'?action=profile;u='.$game['id_member'].'">' . $game['real_name'] . '</a><span style="display: block;"></span>' . $scoring . '</span></span>' . $space2;

    }
    $smcFunc['db_free_result']($result);
    return $display;
}
Title: Re: Horizontal latest scores block
Post by: johannes47 on October 09, 2013, 08:54:05 AM
Hello Underdog,
I had a question for you, how can I get this bar in the middle, if I put it on my 24 inch monitor then it is good, but other than seeing that a 19 inch hebebn a large scroll bar. I can change this or would you like me to change the script. that would be great, because I really looked like this. I have the script attached to maybe change that for me. I thank you for the effort

greetings Johannnes
Title: Re: Horizontal latest scores block
Post by: Chen Zhen on October 09, 2013, 09:31:02 PM
johannes47,

  Edit your portal block and look to the bottom right where you will see an input box titled Custom Body Style.
Enter overflow:hidden; into that input box. This should remove the unwanted scroll bar.
Title: Re: Horizontal latest scores block
Post by: karim on September 10, 2018, 12:53:37 PM
hello can't see the link
thanks
Title: Re: Horizontal latest scores block
Post by: showzamani on December 24, 2018, 09:02:08 PM
I could not see the additional file
Title: Re: Horizontal latest scores block
Post by: Hero on February 05, 2019, 07:06:35 PM
Unfortunately the file or the code is missing here.
Title: Re: Horizontal latest scores block
Post by: Chen Zhen on February 05, 2019, 07:48:00 PM

Lots of the older attachments got lost a while back.
I will have to make a new one and update the initial post.
Keep checking this thread as I should have time to do it later this week.
Title: Re: Horizontal latest scores block
Post by: Hero on February 05, 2019, 08:05:03 PM
Ok thx.
Title: Re: Horizontal latest scores block
Post by: Chen Zhen on November 20, 2021, 01:22:57 PM

I found an old backup of this forum with most of the old content!
Although, as with many of the block codes this had to be reworked.

This block code is now available in the first post of the thread.
Title: Re: Horizontal latest scores block
Post by: Rowdy on November 20, 2021, 06:35:50 PM
The code works great on

SMF 2.1 RC4
Arcade 2.66 RC11
EhPortal 1.39.6 © 2024, WebDev