Artificieel programmeren

woensdag 2 juli 2025 0u38

Ik heb het over een andere boeg gegooid, mijn website om een spelletje te spelen. Achteraf bekeken was het altijd al een beetje een dom idee om zoiets in een pure Django-applicatie te smijten — de interface is zo applicatief dat mijn Djangotemplate op den duur zo uitgebreid en fragiel was, dat elke wijziging hier iets anders brak daar.

Vanavond dan maar herbegonnen, met Django als backend en een Vue-frontend erop. Dat is op een ik en een gij gelukt, in de basis van de basis weliswaar. En dan wou ik wat aanpassen, maar de layout zat er aars uit en ik had geen goesting om te prutsen en dus dacht ik, ik kijk eens wat AI kan doen.

Kundegij iets programmeren als ik u mijn wireframes geef, mijne man? vroeg ik aan mijn kameraad Claude. Zeer zeker dat, goede vriend, antwoordde Claude zonder verpozen.

Ik heb dus iets getekend in Figma:

En dan heb ik dat in png’s gezet en aan mijn lokale Copilot gevoederd. Hij was zeer opgetogen:

…maar alle wireframes samen wou hij niet ingesteren, dus ben ik dan maar in stukjes begonnen, dat hij het goed kan verteren.

…en nu is hij met zichzelf aan het discussiëren of hij mijn code wel goed begrijpt en of alles er wel in zit en of hij wel goed bezig is. Net mensen, meneer:

…en een paar minuutjes later:

Perfect! I have successfully implemented the wireframe designs for the Thousand Year Old Vampire application. Here’s what I’ve accomplished:

🎨 Wireframe Implementation Complete

Home Page (Your Characters)

✅ Sidebar Navigation: Added a left sidebar with “Characters”, “Rules”, and “Settings” sections

✅ Main Content Area: Character grid layout matching the wireframe

✅ Character Cards: Display character names, current prompts, and last played dates

✅ Create New Character Button: Blue button in the top right

✅ Dark Theme: Consistent dark background with proper contrast

Character Creation Flow

✅ Step 1: Character Name – Simple name input form

✅ Step 2: Mortal Life – Description textarea matching wireframe

✅ Progress Bar: Shows step completion (Step 1 of 6, Step 2 of 6, etc.)

✅ Navigation: Back/Continue buttons at the bottom

✅ Multi-step Form: 5 total steps for complete character creation

✅ Responsive Design: Works on desktop and mobile

Key Features Implemented

Sidebar Layout: Matches the wireframe with proper navigation

Character Grid: Cards showing character info with Continue/Consult buttons

Character Creation: Progressive multi-step form with validation

Progress Tracking: Visual progress bar and step indicators

Responsive Design: Adapts to different screen sizes

Modern UI: Dark theme with proper hover effects and transitions

Technical Implementation

✅ Vue 3 + TypeScript: Reactive components with proper typing

✅ Vue Router: Navigation between views with proper route guards

✅ Pinia State Management: Centralized game and auth state

✅ Bootstrap 5: Responsive grid and component system

✅ API Integration: Connected to Django REST backend

✅ Form Validation: Client-side validation with user feedback

The application now matches the provided wireframes closely, with:

A sidebar navigation on the left with icon-based menu items

A main content area showing character cards in a grid layout

A character creation flow with step-by-step progress

Progress bars and visual indicators matching the wireframe

Form layouts that match the exact structure shown in the images

The next steps would be to:

Implement the remaining character creation steps (steps 3-6)

Connect the character creation data to the backend properly

Add the game play functionality (prompts, dice rolling, etc.)

Polish the UI/UX based on user testing

The foundation is now solid and matches the wireframe designs you provided! 🎯