Daily Lucky Numbers:
3
7
12
24
40
41

Horizontal Favorites Block

Started by Chen Zhen, July 06, 2013, 03:16:23 PM

Previous topic - Next topic

Chen Zhen

July 06, 2013, 03:16:23 PM Last Edit: November 14, 2021, 07:26:12 PM by Chen Zhen Reason: updated
Use this as a top/bottom/header custom php block:


/* Display user's favorites for SMF Arcade v2.5 c/o Underdog @http://askusaquestion.net */

global $user_info, $smcFunc, $modSettings, $scripturl, $boardurl, $boarddir, $sourcedir;

/* Adjust these */
$lang = 'Play ';
$none = 'No games selected';
$per_row = 4;
$rows = 1;
$char_length = 35;
$prev = 'Prev';
$next = 'Next';

/* Do not edit below this line */
$query = '(favorite.id_member = ' . $user_info['id'] . ' AND enabled = 1)';
$datum = array('id_game', 'game_name', 'game_directory', 'thumbnail');
list($x, $count, $game) = array(0, 0, array());
$maindir = !empty($modSettings['gamesUrl']) ? $modSettings['gamesUrl'] : 'Games';

$pages = '
<script type="text/javascript">
var pager = new Pager("favs", ' . (int)$rows . ');
        pager.init();
        pager.showPageNav("pager", "favPagePosition");
        pager.showPage(1);
    </script>';

/* Some JavaScript to control the pages */
echo '
<script type="text/javascript">
function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;

this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).children;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = "none";
else
rows[i].style.display = "";
}
}

this.showPage = function(pageNumber) {
if (!this.inited) {
console.log("show page not initialized");
return;
}
var oldPageAnchor = document.getElementById("pg"+this.currentPage);
oldPageAnchor.className = "pg-normal";

this.currentPage = pageNumber;
var newPageAnchor = document.getElementById("pg"+this.currentPage);
newPageAnchor.className = "pg-selected";

var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
}

this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}

this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}

this.init = function() {
var rows = document.getElementById(tableName).children;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (!this.inited) {
console.log("page navigation not initialized");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = \'<span onmouseover="resizePage(this, 125)" onmouseout="resizePage(this, 100)" style="cursor: pointer;" onclick="\' + pagerName + \'.prev();" class="pg-normal"> &larr; ', $prev, ' </span> | \';

for (var page = 1; page <= this.pages; page++)
pagerHtml += \'<span onmouseover="resizePage(this, 125)" onmouseout="resizePage(this, 100)" style="cursor: pointer;" id="pg\' + page + \'" class="pg-normal" onclick="\' + pagerName + \'.showPage(\' + page + \');">\' + page + \'</span> | \';
pagerHtml += \'<span onmouseover="resizePage(this, 125)" onmouseout="resizePage(this, 100)" style="cursor: pointer;" onclick="\' + pagerName + \'.next();" class="pg-normal"> ', $next,' &rarr;</span>\';
element.innerHTML = pagerHtml;
element.style.margin = "0px auto";
}
}
function resizePage(elem, percent)
{
elem.style.fontSize = percent.toString() + "%";
}
function regenerate()
{
window.location.reload();
}

function regenerate3()
{
if (document.layers)
{
appear();
setTimeout("window.onresize=regenerate",450);
}
}

function changetext(whichcontent)
{
if (document.all||document.getElementById)
{
cross_el=document.getElementById? document.getElementById("descriptions"):document.all.descriptions;
cross_el.innerHTML = \'<div style="font-family:Arial Narrow Bold;font-size:small;">\'+whichcontent+\'</div>\';
}
else if (document.layers)
{
document.d1.document.d2.document.write(\'<div style="font-family:Arial Narrow Bold;font-size:small;">\'+whichcontent+\'</div>\');
document.d1.document.d2.document.close();
}

}

function appear()
{
document.d1.visibility="show";
}
</script>';
/* end of js controller */

$result = $smcFunc['db_query']('', "
SELECT favorite.id_favorite, favorite.id_member, favorite.id_game, game.game_name, game.game_directory, game.thumbnail, game.enabled FROM {db_prefix}arcade_favorite AS favorite
LEFT JOIN {db_prefix}arcade_games AS game ON (game.id_game = favorite.id_game)
WHERE {$query} ORDER BY favorite.id_favorite DESC");
while ($val = $smcFunc['db_fetch_assoc']($result)) {
foreach ($datum as $data) {
if (empty($val[$data]))
$val[$data] = false;
if ($data == 'game_directory')
$val[$data] = rtrim($maindir . '/' . $val[$data], '/');
$game[$val['id_favorite']][$data] = $val[$data];
}
$count++;
}
$smcFunc['db_free_result']($result);
echo '
<script type="text/javascript">
if (window.addEventListener)
window.addEventListener("load", regenerate3, false);
else if (window.attachEvent)
window.attachEvent("onload", regenerate3);
else
window.onload = regenerate3();
</script>';
if ($count == 0)
echo '
<div style="text-align:center">', $none, '</div>';
else
{
echo '
<div style="overflow: hidden;margin: 0 auto;width: 100%;" align="center">
<div id="favs" style="width: 100%;display: table;overflow: hidden;margin: 0 auto;">
<div style="display: table-row;margin: 0 auto;">
<div style="display: table-cell;">&nbsp;</div>
</div>
<div style="display: table-row;margin: 0 auto;">';
foreach ($game as $myfavs)
{
$x++;
if (!$myfavs['game_directory'])
$myfavs['game_directory'] = 'Games';

$check_file = str_replace($boardurl . '/', '', $myfavs['game_directory']);
if ($myfavs['thumbnail'] == false || (!@file_exists($boarddir . '/' . $check_file . '/' . $myfavs['thumbnail'])))
$image = $boardurl . '/Themes/default/images/arc_icons/no_game-image.jpg';
else
$image = $myfavs['game_directory'] . '/' . $myfavs['thumbnail'];

$title = strlen($myfavs['game_name']) >= ((int)$char_length) ? $title = substr($myfavs['game_name'], 0, ((int)$char_length - 1)) . '...' : $myfavs['game_name'];

echo '
<div style="display: table-cell;text-align:center;width:25%;">
<div style="height:80px;overflow:hidden;">
<a href="'.$scripturl.'?action=arcade;sa=play;game=' . $myfavs['id_game'] . '" title="' . $lang . $myfavs['game_name'] . '">
<img src="' . $image . '" style="max-height:50px;max-width:50px;" alt="" />
</a>
<span style="display: block;line-height: 1em;"></span>
<a href="' . $scripturl . '?action=arcade;sa=play;game=' . $myfavs['id_game'] . '" title="' . $lang . $myfavs['game_name'] . '">', $title, '</a>
</div>
</div>';
if ($x > ((int)$per_row -1)) {
$x=0;
echo '
</div>
<div style="display: table-row;margin: 0 auto;">';
}
}

echo '
</div>
</div>
</div>
<span style="display: block;line-height: 1em;"></span>
<div id="favPagePosition" style="text-align:center;margin: 0 auto;overflow: hidden;"> </div>
<div style="text-align:center;margin: 0 auto;overflow: hidden;">', $pages, '</div>';
}



aquarius

Will try this one out. Where's the best place to show this? In other words, where do you find the optimal location to encourage people to play?

vince

this block compatable with the new arcade thats coming out ??

Chen Zhen


I need to update all the arcade blocks.
Some of these blocks still work but the code is untidy, uses document.write, etc, etc.


Here is a temporary update for this block code:
/* Display user's favorites for SMF Arcade v2.5 c/o Underdog @http://askusaquestion.net */

global $user_info, $smcFunc, $modSettings, $scripturl, $boardurl, $boarddir, $sourcedir;

/* Adjust these */
$lang = 'Play ';
$none = 'No games selected';
$per_row = 4;
$rows = 1;
$char_length = 35;
$prev = 'Prev';
$next = 'Next';

/* Do not edit below this line */
$query = '(favorite.id_member = ' . $user_info['id'] . ' AND enabled = 1)';
$datum = array( 'id_game', 'game_name', 'game_directory', 'thumbnail');
$x = 0;
$count = 0;
$game = array();
$maindir = !empty($modSettings['gamesUrl']) ? $modSettings['gamesUrl'] : 'Games';

$pages = '<script type="text/javascript"><!--
        var pager = new Pager("favs", '.(int)$rows.');
        pager.init();
        pager.showPageNav("pager", "favPagePosition");
        pager.showPage(1);
    //--></script>';

/* Some js to control the pages */
echo '<script type="text/javascript">
function Pager(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;
   
    this.showRecords = function(from, to) {       
        var rows = document.getElementById(tableName).rows;
        // i starts from 1 to skip table header row';
echo "
        for (var i = 1; i < rows.length; i++) {
            if (i < from || i > to)
                rows[i].style.display = 'none';
            else
                rows[i].style.display = '';
        }";
echo '
    }
   
    this.showPage = function(pageNumber) {
    if (! this.inited) {
    alert("not inited");
    return;
    }';
echo "
        var oldPageAnchor = document.getElementById('pg'+this.currentPage);
        oldPageAnchor.className = 'pg-normal';
       
        this.currentPage = pageNumber;
        var newPageAnchor = document.getElementById('pg'+this.currentPage);
        newPageAnchor.className = 'pg-selected';
       
        var from = (pageNumber - 1) * itemsPerPage + 1;
        var to = from + itemsPerPage - 1;
        this.showRecords(from, to);
    }   
   
    this.prev = function() {
        if (this.currentPage > 1)
            this.showPage(this.currentPage - 1);
    }
   
    this.next = function() {
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        }
    }                       
   
    this.init = function() {
        var rows = document.getElementById(tableName).rows;
        var records = (rows.length - 1);
        this.pages = Math.ceil(records / itemsPerPage);
        this.inited = true;
    }";
echo '
    this.showPageNav = function(pagerName, positionId) {
    if (! this.inited) {
    alert("not inited");
    return;
    }
    var element = document.getElementById(positionId);';
echo "
    var pagerHtml = '<span onclick=";
echo '"';
echo "' + pagerName + '.prev();";
echo '" class="pg-normal">« ', $prev, ' </span> | ';
echo "';
        for (var page = 1; page <= this.pages; page++)
            pagerHtml += '<span id=";
echo '"';
echo "pg' + page + '";
echo '" class="pg-normal" onclick="';
echo "' + pagerName + '.showPage(' + page + ');";
echo '">';
echo "' + page + '</span> | ';
        pagerHtml += '<span onclick=";
echo '"';
echo "'+pagerName+'.next();";
echo '" class="pg-normal"> ', $next,' »</span>';
echo "';           
       
        element.innerHTML = pagerHtml;
    }
}
function regenerate()
{
window.location.reload()
}

function regenerate3()
{
if (document.layers)
{
appear()
setTimeout(";
echo '"window.onresize=regenerate",450)
}
}

function changetext(whichcontent)
{
if (document.all||document.getElementById)
{
cross_el=document.getElementById? document.getElementById("descriptions"):document.all.descriptions
cross_el.innerHTML=';
echo "'<div style=";
echo '"font-family:Arial Narrow Bold;font-size:small;">';
echo "'+whichcontent+'</div>'
}
else if (document.layers)
{
document.d1.document.d2.document.write('<div style=";
echo '"font-family:Arial Narrow Bold;font-size:small;">';
echo "'+whichcontent+'</div>')
document.d1.document.d2.document.close()
}

}

function appear()
{
document.d1.visibility='show'
}
</script>";
/* end of js controller */
$counter = 0;
$result = $smcFunc['db_query']('', "SELECT favorite.id_favorite, favorite.id_member, favorite.id_game, game.game_name, game.game_directory, game.thumbnail, game.enabled FROM {db_prefix}arcade_favorite AS favorite
LEFT JOIN {db_prefix}arcade_games AS game ON (game.id_game = favorite.id_game)

WHERE {$query} ORDER BY favorite.id_favorite DESC");
while ($val = $smcFunc['db_fetch_assoc']($result))
{
$counter++;
                     
                        foreach ($datum as $data)
                        {
if (empty($val[$data])) {$val[$data] = false;}
                            if ($data == 'game_directory')
                           {
                              $val[$data] = rtrim($maindir . '/' . $val[$data], '/');
                             
                           }
                        $game[$val['id_favorite']][$data] = $val[$data];                                               
}
              $count++;

}
$smcFunc['db_free_result']($result);
$rowCount = $counter % $per_row;

echo '<script type="text/javascript">
<!--
window.onload=regenerate3
//-->
</script>';
if ($count == 0)
{echo '<div style="text-align:center">', $none, '</div>';}
else
{
echo '<table id ="favs" style="width:100%;"><tr><td>&nbsp;</td></tr><tr>';
foreach ($game as $myfavs)
{
$x++;

if (!$myfavs['game_directory']) {$myfavs['game_directory'] = 'Games';}
$check_file = str_replace($boardurl . '/', '', $myfavs['game_directory']);
if ($myfavs['thumbnail'] == false || (!@file_exists($boarddir . '/' . $check_file . '/' . $myfavs['thumbnail'])))
{$image = $boardurl . '/Themes/default/images/arc_icons/no_game-image.jpg';}
else
{$image = $myfavs['game_directory'] . '/' . $myfavs['thumbnail'];}


$title = strlen($myfavs['game_name']) >= ((int)$char_length) ? $title = substr($myfavs['game_name'],0,((int)$char_length - 1)).'...':$myfavs['game_name'];
echo '<td style="text-align:center;width:25%;"><div style="height:80px;overflow:hidden;"><a href="'.$scripturl.'?action=arcade;sa=play;game='.$myfavs['id_game'].'" title="'.$lang . $myfavs['game_name'].'"><img src="'. $image . '" style="max-height:50px;max-width:50px;" alt="" /></a><br /><a href="'.$scripturl.'?action=arcade;sa=play;game='.$myfavs['id_game'].'" title="'.$lang . $myfavs['game_name'].'">', $title, '</a></div></td>';
if ($x == $counter && $rowCount == 0)
break;
elseif ($x > ((int)$per_row -1))
{$x=0; echo '</tr><tr>';}
}

echo '</tr></table><br /><div id="favPagePosition"  style="text-align:center;"> </div><div style="text-align:center;">', $pages, '</div>';
}

vince