Advertisement:

Author Topic: Tutorial: Cambiar el karma numérico por iconos  (Read 6950 times)

Offline sumolari

  • Semi-Newbie
  • *
  • Posts: 54
  • Gender: Male
    • Sumolari.com
Tutorial: Cambiar el karma numérico por iconos
« on: August 31, 2008, 02:56:14 PM »
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]
// 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]
if ($modSettings['karmaMode'] == '1')  {
A continuación comentamos las dos siguientes líneas (/* y */), quedando así:

Code: [Select]
/* 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]
} 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]
$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]
$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]
$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]
$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]
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]
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]
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]
// 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]
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]
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]
} while();
Nos situamos en la línea de arriba, metemos una nueva línea y en ella ponemos:

Code: [Select]
$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]
} while ();
Y añadimos entre los paréntesis:

Code: [Select]
$total_iconos > $iconos
Con esto ya está el sistema.

El código final quedará así:

Code: [Select]
// 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.
« Last Edit: September 01, 2008, 01:48:02 AM by sumolari »

Offline sumolari

  • Semi-Newbie
  • *
  • Posts: 54
  • Gender: Male
    • Sumolari.com
Re: Tutorial: Cambiar el karma numérico por iconos
« Reply #1 on: August 31, 2008, 03:00:35 PM »
Se me olvidó subir el archivo Display.template.php modificado  ;D.
« Last Edit: September 01, 2008, 01:24:46 AM by sumolari »

Offline M-DVD

  • SMF Hero
  • ******
  • Posts: 1,650
  • Gender: Male
  • Step by step will update the mods to SMF 2RC2
Re: Tutorial: Cambiar el karma numérico por iconos
« Reply #2 on: August 31, 2008, 03:31:00 PM »
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]
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 />';

Offline 4Kstore

  • SMF Hero
  • ******
  • Posts: 4,317
  • Gender: Male
    • agustintari on Facebook
    • @agustintarifa on Twitter
    • SSIMPLE TEAM PAGE
Re: Tutorial: Cambiar el karma numérico por iconos
« Reply #3 on: August 31, 2008, 03:34:00 PM »
gracias, alguien tendra alguna captura para ver el resultado final ?

saludos!
¡¡NEW MOD: Sparkles User Names!!!

Offline ~BeneKiD

  • Full Member
  • ***
  • Posts: 628
  • Gender: Male
  • www.carlosbeneyto.com
    • CarlosBeneyto.com
Re: Tutorial: Cambiar el karma numérico por iconos
« Reply #4 on: August 31, 2008, 03:45:14 PM »
Si por favor... alguna captura para ver el resultado pro favor... k me interesa mxooo
TERRITORIODD.com Descargas Directas de las ISOS, CSO y ROMS de PSP NDS Wii X360, PELICULAS, SERIES MUSICA y SOFTWARE... Todo lo necesario totalmente GRATIS!!

-PS3
-Playstation Portable
-Nintendo DS
-Nintendo Wii
-Xbox 360
-iOS & Android


HTTP://WWW.TERRITORIODD.COM
Quote from: Visitanos!

Offline ElDon

  • Sophist Member
  • *****
  • Posts: 1,219
  • Gender: Male
  • Smf + Smf
    • Posicionamiento Web
Re: Tutorial: Cambiar el karma numérico por iconos
« Reply #5 on: August 31, 2008, 03:47:45 PM »
Esta bien chulo el aporte lo que te digo es que en ves de tutoria pongas aporte, yo pense que querias algo asi jeejeje
***NUEVO*** 2,500 Vistas Youtube!!! [PREGUNTAS?]
Posicionamiento SEO
Necesitas Comprar Trafico?
Descarga Nuestro Reporte SEO Gratis!!!

Offline sumolari

  • Semi-Newbie
  • *
  • Posts: 54
  • Gender: Male
    • Sumolari.com
Re: Tutorial: Cambiar el karma numérico por iconos
« Reply #6 on: September 01, 2008, 01:48:27 AM »
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  :D, pero también tenía ese "echo" de más, así que lo he borrado y os lo dejo aquí editado.

Code: [Select]
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:








« Last Edit: September 01, 2008, 02:17:55 AM by sumolari »

Offline M-DVD

  • SMF Hero
  • ******
  • Posts: 1,650
  • Gender: Male
  • Step by step will update the mods to SMF 2RC2
Re: Tutorial: Cambiar el karma numérico por iconos
« Reply #7 on: September 01, 2008, 09:17:52 AM »
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  :P

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 />';

Offline sumolari

  • Semi-Newbie
  • *
  • Posts: 54
  • Gender: Male
    • Sumolari.com
Re: Tutorial: Cambiar el karma numérico por iconos
« Reply #8 on: September 02, 2008, 01:10:23 AM »
Cierto, después del:
Code: [Select]
if ($total_iconos > 0) {

} else {

}

Añades un:
Code: [Select]
echo '<br />';

Y listo, ya hay salto de línea.

Code: [Select]
if ($total_iconos > 0) {

} else {

}
echo '<br />';