Tutorial: Cambiar el karma numérico por iconos

[sumolari]

Una cosa que me gusta de SMF (entre otras) es el Karma. Aunque SMF incluye Karma, a mí no me gusta demasiado lo de "Karma: 1" o "Karma: 2 / -1", así que he estado viendo cómo cambiarlo por unos iconos que aumentarán según tengas más o menos Karma.

Ahora os explico cómo lo podéis implementar a cualquier tema.

Nota: Las modificaciones se realizan sobre el archivo Display.template.php del tema por defecto.

Sobre la línea 290 deberíamos ver algo así:

Code Select Expand

// Is karma display enabled?  Total or +/-?

Aquí realizaremos todas las modificaciones.

En la línea siguiente, después del último paréntesis  añadimos un corchete, quedando así la línea:

Code Select Expand

if ($modSettings['karmaMode'] == '1')  {

A continuación comentamos las dos siguientes líneas (/* y */), quedando así:

Code Select Expand

/* echo '<br />', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '<br />'; */

Con esto comentado siempre podremos volver a usar el Karma estándar si algo falla.
Seguimos modificando, antes del "elseif" añadimos un cierre de corchete ( } ), quedando así:

Code Select Expand

} elseif ($modSettings['karmaMode'] == '2')

Ahora comenzaremos a trabajar entre los corchetes que hemos escrito.

Lo primero que hacemos es definir el Karma total que tiene el usuario (restar el positivo y el negativo), añadimos esta línea después del código que hemos comentado:

Code Select Expand

$karma_total = $message['member']['karma']['good'] - $message['member']['karma']['bad'];

La variable karma_total contiene el total de Karma del usuario (puede ser negativo).
Ahora definimos un par de variables, primero el total de iconos que habrá como máximo, con esto evitaremos tener 50 líneas de iconitos.

La segunda es cada cuántos puntos de Karma se añade una estrella. Por ejemplo, si lo hacemos cada 10 puntos, un usuario con 22 puntos de Karma tendrá 2 iconos, mientras que si lo hacemos cada 2 puntos este mismo usuario tendrá 11 iconos.

Lo haremos cada 10 puntos de karma con un máximo de 10 iconos. El código que añadimos después del anterior es:

Code Select Expand

$iconos_total = 10;
$puntos_iconos = 10;

Tenemos que crear una nueva variable, que será el número de iconos a mostrar. Explico la parte teórica:

Tenemos X puntos de Karma, pero sólo cada 10 se mostrará un icono, luego el número de iconos a mostrar será X/10, sin embargo no mostraremos iconos a medias (números decimales), así que eliminamos los decimales redondeando a lo bajo (3.5 – 3, 3.7 – 3, etc).

¿Y en PHP? Pues añadimos otras dos líneas:

Code Select Expand

$total_iconos = $karma_total / $puntos_iconos;
$total_iconos = floor($total_iconos);

La primera calcula el número de iconos, la segunda lo redondea a la baja, eliminando decimales. Debemos añadir una variable más: el número de iconos que ya se han mostrado. Esta variable la definimos con el valor 0, ya que aumentará más tarde, cuando se muestre un icono, por ahora es para evitar fallos en el script.

Code Select Expand

$iconos = 0;

Ahora viene la parte más importante: donde se muestran los iconos.
Primero creamos una condición: si tiene más de 0 puntos de Karma mostramos unos iconos y si tiene menos, otros.

Con esto podremos hacer que lo usuarios con puntos negativos o nulos tengan un icono y los que tengan Karma positivo otros.

El código en cuestión es:

Code Select Expand

if($total_iconos > 0) {

} else {

}

Como podéis ver he dejado una línea entre cada condición, en la primera pondremos el bucle para mostrar los iconos positivos, en la segunda el que muestra los iconos del Karma negativo.

Vayamos a los iconos negativos primero. En mi caso no voy a poner más que un icono si no se tiene Karma o es negativo, para evitar problemas con los usuarios con bajo Karma. Así que el código es más sencillo:

Code Select Expand

echo '<img src="', $settings['theme_url'], '/images/no-karma.gif" title="No tiene Karma" alt="No tiene Karma" >';


Ahora pasamos al Karma positivo.

En el Karma positivo la cosa cambia, ahora sí aumentarán los iconos, así que usaremos un bucle.
Puede que haya bucles que se ajusten mejor a las necesidades, pero como no soy un experto, usaré un bucle do... while.

Así que en la línea que le corresponde al Karma positivo añadiremos:

Code Select Expand

do {

}  while ();

La línea en blanco que hay entre los dos es para poner ahí más código, como  antes.

Demos un repaso al código que tenemos por ahora:

Code Select Expand

// Is karma display enabled?  Total or +/-?
if ($modSettings['karmaMode'] == '1') {
/* echo '<br />', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '<br />'; */
$karma_total = $message['member']['karma']['good'] - $message['member']['karma']['bad'];
$iconos_total = 10;
$puntos_iconos = 10;
$total_iconos = $karma_total / $puntos_iconos;
$total_iconos = floor($total_iconos);
if($total_iconos > 0) {
do {

} while ();
} else {
echo '<img src="', $settings['theme_url'], '/images/no-karma.gif" title="No tiene Karma" alt="No tiene Karma" >';
}
} elseif ($modSettings['karmaMode'] == '2')

Bien, ahora sigamos. Nos situamos en la línea vacía (aproximadamente línea 303) y añadimos un if para hacer una condición: si el máximo de iconos a mostrar el más que los iconos que ya se han mostrado, sigue mostrando, si no, pues sigue con el código.

En PHP:

Code Select Expand

if ($iconos_total > $iconos) {

}

Otra línea en blanco dentro del if, esta vez para mostrar las imágenes, así que en esa línea añadimos:

Code Select Expand

echo '<img src="', $settings['theme_url'], '/images/karma.gif" title="Tiene ', $karma_total ,' Karma" alt="Karma" >';

Un par de líneas más abajo veremos un trozo de código parecido a esto:

Code Select Expand

} while();

Nos situamos en la línea de arriba, metemos una nueva línea y en ella ponemos:

Code Select Expand

$iconos++;

Ya estamos cerca de acabar el proceso. Ahora sólo nos queda añadir la condición del bucle.
Vamos a una línea que tiene un código así:

Code Select Expand

} while ();

Y añadimos entre los paréntesis:

Code Select Expand

$total_iconos > $iconos

Con esto ya está el sistema.

El código final quedará así:

Code Select Expand

// Is karma display enabled?  Total or +/-?
if ($modSettings['karmaMode'] == '1') {
/* echo '<br />', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '<br />'; */
$karma_total = $message['member']['karma']['good'] - $message['member']['karma']['bad'];
$iconos_total = 10;
$puntos_iconos = 10;
$total_iconos = $karma_total / $puntos_iconos;
$total_iconos = floor($total_iconos);
$total_iconos = $total_iconos;
$iconos = 0;
if($total_iconos > 0) {
do {
if ($iconos_total > $iconos) {
echo '<img src="', $settings['theme_url'], '/images/karma.gif" title="Tiene ', $karma_total ,' Karma" alt="Karma" >';
}
$iconos++;
} while ($total_iconos > $iconos);
} else {
echo '<img src="', $settings['theme_url'], '/images/no-karma.gif" title="No tiene Karma" alt="No tiene Karma" >';
}
} elseif ($modSettings['karmaMode'] == '2')
echo '<br />', $modSettings['karmaLabel'], ' +', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '<br />';


Nota: Puede que el tutorial sea un poco confuso y que en algunos puntos me contradiga. Esto es porque mientras realizaba las modificaciones me surgieron problemas y tuve que cambiar cosas. El código correcto es el que se ve al final, unas líneas arriba, y el que está en el archivo Display.template.php.

Si tenéis dudas o problemas no dudéis en preguntarme.

Nota 2: No soy un experto en PHP, y el código no está para nada optimizado, seguro que se puede hacer mucho mejor. Si alguien quiere mejorarlo, ¡bienvenido sea!

Nota 3: Al ponerme a probar un poco más el código vi otros fallos que pensaba que estaban arreglados. El código correcto es el último y el tutorial lo actualizaré más tarde.

[sumolari]

Se me olvidó subir el archivo Display.template.php modificado  .

[M-DVD]

Esta bueno el aporte, aunque creo que por ahí ya hay algo posteado sobre como hacer eso del karma de una forma similar a vBulletin.

En todo caso tu código se puede mejorar de esta forma, lo hice en frío, así que puede ser que tenga un errorcillo.

Code Select Expand


if ($modSettings['karmaMode'] == '1') {
/* echo '<br />', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '<br />'; */
$karma_total = $message['member']['karma']['good'] - $message['member']['karma']['bad'];
$iconos_maximo = 15; // Este es el numero maximo de iconos que tendra,  por lo que si tiene karma 1 millon, solo le saldran 15 iconos
$puntos_iconos = 10; // Esta es la cantidad de puntos de karma que vale cada icono.
$total_iconos = floor($karma_total / $puntos_iconos);
echo 'Total iconos ', $total_iconos,' <br />';
if ($total_iconos > 0)
echo str_repeat('<img src="', $settings['theme_url'], '/images/karma.gif" title="Tiene ', $karma_total ,' Karma" alt="Karma" >',($total_iconos > $iconos_maximo) ? $iconos_maximo : $total_iconos);
else
echo '<img src="', $settings['theme_url'], '/images/no-karma.gif" title="No tiene Karma" alt="No tiene Karma" >';
}
elseif ($modSettings['karmaMode'] == '2')
echo '<br />', $modSettings['karmaLabel'], ' +', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '<br />';


[4Kstore]

gracias, alguien tendra alguna captura para ver el resultado final ?

saludos!

[~BeneKiD]

Si por favor... alguna captura para ver el resultado pro favor... k me interesa mxooo

[ElDon]

Esta bien chulo el aporte lo que te digo es que en ves de tutoria pongas aporte, yo pense que querias algo asi jeejeje

[sumolari]

Esta bien chulo el aporte lo que te digo es que en ves de tutoria pongas aporte, yo pense que querias algo asi jeejeje

Jaja, la próxima vez lo haré así  .

He modificado el código, primero porque se me pasó borrar un trozo que lo que hace es mostrar el número de iconos que se deberían mostrar (para mis pruebas con el filtro y demás), que no era útil y además molestaba.
No estaba incluído en el tutorial, pero se me pasó quitarlo del archivo final.

Por otro lado el filtro no funcionaba (y eso que había estabo probando), así que he modificado un poco el script y ya. He quitado el bucle que estaba dentro del primero y lo he cambiado por un if, así comprueba que imprimen todas las imágenes y no se pasan.

He actualizado el código final del primer post y el archivo adjunto.

También he mirado el código que ha mejorado M-DVD, y se reduce bastante  , pero también tenía ese "echo" de más, así que lo he borrado y os lo dejo aquí editado.

Code Select Expand


if ($modSettings['karmaMode'] == '1') {
/* echo '<br />', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '<br />'; */
$karma_total = $message['member']['karma']['good'] - $message['member']['karma']['bad'];
$iconos_maximo = 15; // Este es el numero maximo de iconos que tendra,  por lo que si tiene karma 1 millon, solo le saldran 15 iconos
$puntos_iconos = 10; // Esta es la cantidad de puntos de karma que vale cada icono.
$total_iconos = floor($karma_total / $puntos_iconos);
if ($total_iconos > 0)
   echo str_repeat('<img src="', $settings['theme_url'], '/images/karma.gif" title="Tiene ', $karma_total ,' Karma" alt="Karma" >',($total_iconos > $iconos_maximo) ? $iconos_maximo : $total_iconos);
else
   echo '<img src="', $settings['theme_url'], '/images/no-karma.gif" title="No tiene Karma" alt="No tiene Karma" >';
}
elseif ($modSettings['karmaMode'] == '2')
echo '<br />', $modSettings['karmaLabel'], ' +', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '<br />';


Ya he actualizado el tutorial del primer post.

Capturas:

[M-DVD]

Si me parecía un poco redundante que se escribiera "Total de Iconos" a la vez se muestran las imágenes, pero así es como lo tenías 

Algo que he notado es que la señal de conectado y no conectado te queda en la misma línea que los iconos de karma.

Antes del } pon un echo '<br />';

[sumolari]

Cierto, después del:

Code Select Expand


if ($total_iconos > 0) {

} else {

}


Añades un:

Code Select Expand


echo '<br />';


Y listo, ya hay salto de línea.

Code Select Expand


if ($total_iconos > 0) {

} else {

}
echo '<br />';