start

cards/__init__.py

@@ -0,0 +1 @@
+# cards app

cards/admin.py

@@ -0,0 +1,8 @@
+from django.contrib import admin
+from .models import Dinosaur
+
+
+@admin.register(Dinosaur)
+class DinosaurAdmin(admin.ModelAdmin):
+    list_display = ('name', 'era', 'diet', 'speed', 'weight', 'intelligence')
+    search_fields = ('name', 'era', 'diet')

cards/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class CardsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'cards'

cards/forms.py

@@ -0,0 +1,14 @@
+from django import forms
+from .models import Dinosaur
+
+
+class DinosaurForm(forms.ModelForm):
+    class Meta:
+        model = Dinosaur
+        fields = [
+            'name', 'era', 'diet', 'description', 'image',
+            'speed', 'weight', 'intelligence', 'height',
+        ]
+        widgets = {
+            'description': forms.Textarea(attrs={'rows': 3}),
+        }

cards/migrations/0001_initial.py

@@ -0,0 +1,33 @@
+# Generated by Django 6.0 on 2025-12-04 20:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Dinosaur',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=120)),
+                ('era', models.CharField(choices=[('triassic', 'Triassic'), ('jurassic', 'Jurassic'), ('cretaceous', 'Cretaceous')], default='jurassic', max_length=32)),
+                ('diet', models.CharField(choices=[('herbivore', 'Herbivore'), ('carnivore', 'Carnivore'), ('omnivore', 'Omnivore')], default='herbivore', max_length=32)),
+                ('description', models.TextField(blank=True)),
+                ('image', models.ImageField(blank=True, null=True, upload_to='dinosaurs/')),
+                ('speed', models.PositiveSmallIntegerField(default=50)),
+                ('weight', models.PositiveSmallIntegerField(default=50)),
+                ('intelligence', models.PositiveSmallIntegerField(default=50)),
+                ('height', models.PositiveSmallIntegerField(default=50)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+            ],
+            options={
+                'ordering': ['-created_at', 'name'],
+            },
+        ),
+    ]

cards/migrations/__init__.py

@@ -0,0 +1 @@
+# migrations package

cards/models.py

@@ -0,0 +1,35 @@
+from django.db import models
+
+
+class Dinosaur(models.Model):
+    ERA_CHOICES = [
+        ('triassic', 'Triassic'),
+        ('jurassic', 'Jurassic'),
+        ('cretaceous', 'Cretaceous'),
+    ]
+
+    DIET_CHOICES = [
+        ('herbivore', 'Herbivore'),
+        ('carnivore', 'Carnivore'),
+        ('omnivore', 'Omnivore'),
+    ]
+
+    name = models.CharField(max_length=120)
+    era = models.CharField(max_length=32, choices=ERA_CHOICES, default='jurassic')
+    diet = models.CharField(max_length=32, choices=DIET_CHOICES, default='herbivore')
+    description = models.TextField(blank=True)
+    image = models.ImageField(upload_to='dinosaurs/', blank=True, null=True)
+
+    # Top-trump style stats (0-100)
+    speed = models.PositiveSmallIntegerField(default=50)
+    weight = models.PositiveSmallIntegerField(default=50)
+    intelligence = models.PositiveSmallIntegerField(default=50)
+    height = models.PositiveSmallIntegerField(default=50)
+
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    class Meta:
+        ordering = ['-created_at', 'name']
+
+    def __str__(self):
+        return self.name

cards/templates/cards/_card_item.html

@@ -0,0 +1,15 @@
+<div class="card" id="card-{{ card.pk }}">
+  <h3>{{ card.name }}</h3>
+  <div><strong>Era:</strong> {{ card.get_era_display }} — <strong>Diet:</strong> {{ card.get_diet_display }}</div>
+  <div>{{ card.description|linebreaksbr }}</div>
+  <ul>
+    <li>Speed: {{ card.speed }}</li>
+    <li>Weight: {{ card.weight }}</li>
+    <li>Intelligence: {{ card.intelligence }}</li>
+    <li>Height: {{ card.height }}</li>
+  </ul>
+  <div>
+    <button hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
+    <button hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
+  </div>
+</div>

cards/templates/cards/_cards_list.html

@@ -0,0 +1,8 @@
+{% load static %}
+<div class="grid">
+  {% for card in cards %}
+    {% include 'cards/_card_item.html' with card=card %}
+  {% empty %}
+    <p>No dinosaurs yet — add one!</p>
+  {% endfor %}
+</div>

cards/templates/cards/_form.html

@@ -0,0 +1,47 @@
+<div class="card-form card">
+  {% if card %}
+    <form method="post" enctype="multipart/form-data" action="{% url 'cards:edit' card.pk %}" hx-post="{% url 'cards:edit' card.pk %}" hx-target="#card-{{ card.pk }}" hx-swap="outerHTML">
+  {% else %}
+    {# Create: insert the returned card into the grid, and let the view also send an OOB form fragment to replace the form container when needed #}
+    <form method="post" enctype="multipart/form-data" action="{% url 'cards:create' %}" hx-post="{% url 'cards:create' %}" hx-target="#cards-list .grid" hx-swap="afterbegin">
+  {% endif %}
+  {% csrf_token %}
+  {{ form.non_field_errors }}
+  <div class="row">
+    {{ form.name.label_tag }}<br>
+    {{ form.name }}
+  </div>
+  <div class="row">
+    {{ form.era.label_tag }}<br>
+    {{ form.era }}
+  </div>
+  <div class="row">
+    {{ form.diet.label_tag }}<br>
+    {{ form.diet }}
+  </div>
+  <div class="row">
+    {{ form.description.label_tag }}<br>
+    {{ form.description }}
+  </div>
+  <div class="row">
+    {{ form.image.label_tag }}<br>
+    {{ form.image }}
+  </div>
+  <div class="row">
+    {{ form.speed.label_tag }} {{ form.speed }}
+  </div>
+  <div class="row">
+    {{ form.weight.label_tag }} {{ form.weight }}
+  </div>
+  <div class="row">
+    {{ form.intelligence.label_tag }} {{ form.intelligence }}
+  </div>
+  <div class="row">
+    {{ form.height.label_tag }} {{ form.height }}
+  </div>
+  <div class="row">
+    <button type="submit">Save</button>
+    <button type="button" onclick="document.getElementById('htmx-form').innerHTML=''">Cancel</button>
+  </div>
+</form>
+</div>

cards/templates/cards/base.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>TopTrumps - Dinosaurs</title>
+    <script src="https://unpkg.com/htmx.org@1.9.5"></script>
+    <style>
+      body{font-family:system-ui,Segoe UI,Roboto,Arial;margin:20px}
+      .card{border:1px solid #ddd;padding:12px;margin:8px;border-radius:6px}
+      .controls{margin-bottom:12px}
+      .grid{display:flex;flex-wrap:wrap}
+      .grid .card{width:220px}
+      form .row{margin-bottom:8px}
+    </style>
+  </head>
+  <body>
+    <h1>TopTrumps — Dinosaurs</h1>
+    <div id="messages"></div>
+    {% block content %}{% endblock %}
+  </body>
+</html>

cards/templates/cards/list.html

@@ -0,0 +1,14 @@
+{% extends 'cards/base.html' %}
+
+{% block content %}
+  <div class="controls">
+    <button hx-get="{% url 'cards:create' %}" hx-target="#htmx-form" hx-swap="innerHTML">Add Dinosaur</button>
+  </div>
+
+  <div id="htmx-form"></div>
+
+  <div id="cards-list">
+    {% include 'cards/_cards_list.html' %}
+  </div>
+
+{% endblock %}

cards/urls.py

@@ -0,0 +1,11 @@
+from django.urls import path
+from . import views
+
+app_name = 'cards'
+
+urlpatterns = [
+    path('', views.card_list, name='list'),
+    path('create/', views.card_create, name='create'),
+    path('<int:pk>/edit/', views.card_edit, name='edit'),
+    path('<int:pk>/delete/', views.card_delete, name='delete'),
+]

cards/views.py

@@ -0,0 +1,73 @@
+from django.shortcuts import render, get_object_or_404, redirect
+from django.http import HttpResponse, HttpResponseBadRequest
+from django.template.loader import render_to_string
+from .models import Dinosaur
+from .forms import DinosaurForm
+
+
+def is_htmx(request):
+    return request.headers.get('HX-Request') == 'true'
+
+
+def card_list(request):
+    cards = Dinosaur.objects.all()
+    if is_htmx(request):
+        return render(request, 'cards/_cards_list.html', {'cards': cards})
+    return render(request, 'cards/list.html', {'cards': cards})
+
+
+def card_create(request):
+    if request.method == 'POST':
+        form = DinosaurForm(request.POST, request.FILES)
+        if form.is_valid():
+            card = form.save()
+            if is_htmx(request):
+                card_html = render_to_string('cards/_card_item.html', {'card': card}, request=request)
+                # Also return an out-of-band fragment to replace/clear the form container
+                form_html = render_to_string('cards/_form.html', {'form': DinosaurForm()}, request=request)
+                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
+                return HttpResponse(card_html + oob)
+            return redirect('cards:list')
+        else:
+            if is_htmx(request):
+                # Return the form as an out-of-band fragment so it updates the form container
+                form_html = render_to_string('cards/_form.html', {'form': form}, request=request)
+                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
+                return HttpResponse(oob)
+    else:
+        form = DinosaurForm()
+
+    return render(request, 'cards/_form.html', {'form': form})
+
+
+def card_edit(request, pk):
+    card = get_object_or_404(Dinosaur, pk=pk)
+    if request.method == 'POST':
+        form = DinosaurForm(request.POST, request.FILES, instance=card)
+        if form.is_valid():
+            card = form.save()
+            if is_htmx(request):
+                card_html = render_to_string('cards/_card_item.html', {'card': card}, request=request)
+                # Clear the form container via OOB so the edit form disappears after successful save
+                oob = '<div id="htmx-form" hx-swap-oob="true"></div>'
+                return HttpResponse(card_html + oob)
+            return redirect('cards:list')
+        else:
+            if is_htmx(request):
+                form_html = render_to_string('cards/_form.html', {'form': form, 'card': card}, request=request)
+                oob = f'<div id="htmx-form" hx-swap-oob="true">{form_html}</div>'
+                return HttpResponse(oob)
+    else:
+        form = DinosaurForm(instance=card)
+
+    return render(request, 'cards/_form.html', {'form': form, 'card': card})
+
+
+def card_delete(request, pk):
+    card = get_object_or_404(Dinosaur, pk=pk)
+    if request.method == 'POST':
+        card.delete()
+        if is_htmx(request):
+            return HttpResponse(status=204)
+        return redirect('cards:list')
+    return HttpResponseBadRequest('Only POST allowed')