Day 2: Add Gamification System (Leaderboard & Scoring)

lewa/accounts/admin.py

@@ -13,9 +13,14 @@ class CustomUserAdmin(UserAdmin):
     list_display = [
         "email",
         "username",
+        "score",
         "is_staff",
         "is_active",
     ]
 
+    fieldsets = UserAdmin.fieldsets + (
+        ('Gamification', {'fields': ('score',)}),
+    )
+
 
 admin.site.register(CustomUser, CustomUserAdmin)

lewa/accounts/migrations/0001_initial.py

@@ -0,0 +1,45 @@
+# Generated by Django 5.2.1 on 2025-11-22 22:53
+
+import django.contrib.auth.models
+import django.contrib.auth.validators
+import django.utils.timezone
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('auth', '0012_alter_user_first_name_max_length'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='CustomUser',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('password', models.CharField(max_length=128, verbose_name='password')),
+                ('last_login', models.DateTimeField(blank=True, null=True, verbose_name='last login')),
+                ('is_superuser', models.BooleanField(default=False, help_text='Designates that this user has all permissions without explicitly assigning them.', verbose_name='superuser status')),
+                ('username', models.CharField(error_messages={'unique': 'A user with that username already exists.'}, help_text='Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.', max_length=150, unique=True, validators=[django.contrib.auth.validators.UnicodeUsernameValidator()], verbose_name='username')),
+                ('first_name', models.CharField(blank=True, max_length=150, verbose_name='first name')),
+                ('last_name', models.CharField(blank=True, max_length=150, verbose_name='last name')),
+                ('email', models.EmailField(blank=True, max_length=254, verbose_name='email address')),
+                ('is_staff', models.BooleanField(default=False, help_text='Designates whether the user can log into this admin site.', verbose_name='staff status')),
+                ('is_active', models.BooleanField(default=True, help_text='Designates whether this user should be treated as active. Unselect this instead of deleting accounts.', verbose_name='active')),
+                ('date_joined', models.DateTimeField(default=django.utils.timezone.now, verbose_name='date joined')),
+                ('score', models.IntegerField(default=0, help_text='Total XP earned by the user')),
+                ('groups', models.ManyToManyField(blank=True, help_text='The groups this user belongs to. A user will get all permissions granted to each of their groups.', related_name='user_set', related_query_name='user', to='auth.group', verbose_name='groups')),
+                ('user_permissions', models.ManyToManyField(blank=True, help_text='Specific permissions for this user.', related_name='user_set', related_query_name='user', to='auth.permission', verbose_name='user permissions')),
+            ],
+            options={
+                'verbose_name': 'user',
+                'verbose_name_plural': 'users',
+                'abstract': False,
+            },
+            managers=[
+                ('objects', django.contrib.auth.models.UserManager()),
+            ],
+        ),
+    ]

lewa/accounts/migrations/0002_customuser_score.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.1 on 2025-11-22 15:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('accounts', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='customuser',
+            name='score',
+            field=models.IntegerField(default=0, help_text='Total XP earned by the user'),
+        ),
+    ]

lewa/accounts/models.py

@@ -1,7 +1,25 @@
 from django.contrib.auth.models import AbstractUser
-
+from django.db import models
 
 class CustomUser(AbstractUser):
     """Custom user type; can get email by str(custom_user_instance)"""
+
+    # Store the total points earned by the user. 
+    score = models.IntegerField(default=0, help_text="Total XP earned by the user")
+
     def __str__(self):
         return self.email or self.username
+
+    def add_points(self, amount):
+        """Add points to the user's score."""
+        self.score += amount
+        self.save()
+
+    def remove_points(self, amount):
+        """Remove points from the user's score."""
+        self.score -= amount
+        self.save()
+
+    def get_score(self):
+        """Get the user's score."""
+        return self.score

lewa/core/templates/core/leaderboard.html

@@ -0,0 +1,87 @@
+{% extends "base.html" %}
+
+{% block content %}
+<section class="hero is-african-theme-4 is-medium">
+  <div class="hero-body">
+    <div class="container has-text-centered">
+        <div class="content is-large">
+            <h1 class="has-text-white">
+                <i class="fas fa-trophy"></i> Hall of Fame
+            </h1>
+            <p class="has-text-light">
+                Top learners contribute to <strong>preserve African Languages</strong> through their writing systems.
+            </p>
+        </div>
+    </div>
+  </div>
+</section>
+
+<section class="section has-background-black-bis">
+  <div class="container">
+    <div class="columns is-centered">
+      <div class="column is-8-desktop is-10-tablet">
+
+        <div class="card box has-background-secondary">
+          <div class="card-content p-0"> 
+
+            <table class="table is-fullwidth is-hoverable has-background-transparent has-text-white">
+              <thead>
+                <tr>
+                  <th class="has-text-grey-light has-text-centered p-4">Rank</th>
+                  <th class="has-text-grey-light p-4">Learner</th>
+                  <th class="has-text-grey-light has-text-right p-4">Cowries 🐚</th>
+                </tr>
+              </thead>
+              <tbody>
+                {% for leader in leaders %}
+                <tr>
+
+                  <td class="has-text-centered is-vcentered is-size-5 p-4">
+                    {% if forloop.counter == 1 %}🥇
+                    {% elif forloop.counter == 2 %}🥈
+                    {% elif forloop.counter == 3 %}🥉
+                    {% else %}
+                      <span class="has-text-grey">#{{ forloop.counter }}</span>
+                    {% endif %}
+                  </td>
+
+                  <td class="is-vcentered p-4">
+                    <div class="is-flex is-align-items-center">
+                      <figure class="image is-32x32 mr-3">
+                         <div class="is-rounded is-flex is-justify-content-center is-align-items-center has-background-grey-dark has-text-white has-text-weight-bold leaderboard-avatar">
+                            {{ leader.username|slice:":1"|upper }}
+                         </div>
+                      </figure>
+
+                      <div>
+                        <span class="has-text-weight-bold has-text-white">{{ leader.username }}</span>
+                        {% if leader == request.user %}
+                          <span class="tag is-primary is-light is-small ml-2">You</span>
+                        {% endif %}
+                      </div>
+                    </div>
+                  </td>
+
+                  <td class="has-text-right is-vcentered p-4">
+                    <span class="tag is-medium has-text-weight-bold has-text-white leaderboard-score">
+                      {{ leader.score }} 🐚
+                    </span>
+                  </td>
+                </tr>
+                {% empty %}
+                <tr>
+                  <td colspan="3" class="has-text-centered p-6 has-text-grey">
+                    No scores yet. Start learning!
+                  </td>
+                </tr>
+                {% endfor %}
+              </tbody>
+            </table>
+
+          </div>
+        </div>
+        </div>
+    </div>
+  </div>
+</section>
+{% endblock %}

lewa/core/urls.py

@@ -16,4 +16,5 @@
         views.writing_systems,
         name="writing-systems",
     ),
+    path('leaderboard/', views.leaderboard_view, name="leaderboard"),
 ]

lewa/core/views.py

@@ -1,5 +1,6 @@
 """Django views, you can find the templates at `templates/core/`."""
 from django.shortcuts import render
+from django.contrib.auth import get_user_model
 from .models import LewaData
 
 
@@ -50,3 +51,12 @@ def writing_systems(request, writing_system=None):
     data = LewaData.get_writing_systems()
 
     return render(request, "core/writing_systems.html", {"writing_systems": data})
+
+
+def leaderboard_view(request):
+    User = get_user_model()
+
+    # Fetch top 10 users, ordered by highest score first
+    leaders = User.objects.filter(is_active=True).order_by('-score')[:10]
+
+    return render(request, 'core/leaderboard.html', {'leaders': leaders})

lewa/lewa/settings.py

@@ -171,6 +171,13 @@
     },
 }
 
+if DEBUG:
+    # In development, use the standard static storage (no hashing/compression)
+    # so you don't have to run 'collectstatic' every time you change CSS.
+    STORAGES["staticfiles"] = {
+        "BACKEND": "django.contrib.staticfiles.storage.StaticFilesStorage",
+    }
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
@@ -215,10 +222,6 @@
 # Email verification (set to "mandatory" for production)
 ACCOUNT_EMAIL_VERIFICATION = "none"  # Options: "none", "optional", "mandatory"
 
-# Login with either username or email
-ACCOUNT_AUTHENTICATION_METHOD = 'username_email' 
-ACCOUNT_EMAIL_REQUIRED = True
-
 # Social account providers configuration
 SOCIALACCOUNT_PROVIDERS = {
     "google": {

lewa/templates/base.html

@@ -38,6 +38,7 @@
                         <a class="navbar-item" href="/">Home</a>
                         <a class="navbar-item" href="{% url 'about' %}">About</a>
                         <a class="navbar-item" href="{% url 'languages' %}">Languages</a>
+                        <a class="navbar-item" href="{% url 'leaderboard' %}">🏆 Leaderboard</a>
                         <a class="navbar-item" href="{% url 'account_login' %}">Login</a>
                         <a class="navbar-item button is-primary"
                            href="{% url 'account_signup' %}">Sign Up</a>