I have spent the last month or so working on getting all of this working MECHANICALLY and from a technical standpoint but I am having a NIGHTMARE of a time getting this to LOOK the way I want it to. Its NOT the CSS or JavaScript or the art or the styles… ITS THE GODDAMN WORD PRESS FRAMEWORK FIGHTING EVERY FRIGGING STYLE CHANGE I MAKE… So I am stripping down the core functionality of word press as a BLOG and COMMENTS feeder to a completely 100% customized version of my front end… because fuck you and your stupid limitations. I WANT WHAT I WANT, AND >>>> I ALWAYS GET WHAT I WANT <<<<
If you ever heard the saying if you want it done RIGHT sometimes you just gotta do it yourself. The database and data stuff was the HARD part… now its re-architecture – a MOCK of a BLOG process which is pretty easy from a data standpoint I think – not to mention the framework is pretty common SO I just gotta rebuild the database and since MY GAME DATA and GAME stuff is completely separate to begin with this should NOT be a problem. I just wanted to make it EASY for others to replicate the game process with their OWN stories and customization options without having to do too much work on the back end stuff like tweaking the JavaScript or CSS or especially not touching the DATABASE or pipeline interfaces… They are complex and fragile so I dont want anyone touching them. Its hard enough for ME to maintain the engineering in my own noggin last thing I need is someone trying to re-engineer it with AI or their collegiate genius skillets. Honestly I sound like a dick there, but truthfully nobody has ever really accused me of being too nice… At the end of the day I am a bit neurotic and on the spectrum about certain things we will call OCD’s… Which is not really a big deal as far as the customization’s go – I will just create database tables with the OPTIONS in there and allow the users to update it from the “administration” forms… Its just more work for me to build is all… Anyway here is what I have put together so far… I am still scaling and adjusting so dont squawk about its looks like blah blah blah or anything I dont CARE IF YOU DON’T “LIKE” IT… I like it so far and I am building this MY way… Don’t get me wrong I LOVE to hear the feedback but the “complaints” about its LOOKS broken, or LOOKS like “shit” or its SHOULD LOOK like this or that, or I think its better if its… I DON’T WANT TO HEAR… DEV IS NOT FOR LOOKS ITS FOR I HAVE AN IDEA – CAN I MAKE IT WORK… And I am building this MY WAY… If you want it YOUR way, YOU BUILD IT. Until then keep on poking around in my fun zone and telling what you think would be cool not what you think would LOOK cool. We will DEFINITELY get to that but for now its ARCHITECTURE AND ENGINEERING TO BUILD THE ENGINE… and occasionally play with the looks…
Here’s a quick video of the UI I am working on… I want it 100% MOBILE friendly without having to INSTALL ANYTHING… so CSS and JavaScript is SUPER strict for view port… THIS is the desktop presentation NOT the mobile… I will tack on some phone screen captures shortly… The MOBILE which is the GOAL has a much longer mid section (body) where the text and images are shown along with the narrator and visuals for the dice, maps and campaign videos.
I’m pretty proud of this one too so dont shit on it.
Mobile needs more space eating but that will be consumed by the images and text and videos…
oooohh blue song 2…. SQUIRREL!!!!
more tweaking and more layout modelling… not my strong skills but I got a vision of what I want to see so I will make it happen.
I got TTRPGTEST STOOD UP! I migrated the BASE WORDPRESS setup over. I RESTRUCTURED THE PROCESS ARCHITECTURE, I RE-ORGANIZED the FOLDER STRUCTURE. I added a lot of INSTRUCTIONS to set STAND UP a clean operation. I added all the SQL to create the 3 NEW database tables and am currently working on a PYTHON program to run as a ADD ON for WORDPRESS to pull the stuff in from a live source site and plug in the components so when a person is ready they can just install word press use the plug to set up the database and internal tools… add there service IP addresses and install the components needed to run everything. BUT I wanted to share these 2 videos… cause they are BAD ASS!
I am very proud to say I’m satisfied with the first phase of this project!!
That was and IS still the development website for this project for what I think are key and COOL processes to making this work.
HERES A BRIEF SUMMARY OF STUFF COMPLETED HERE.
A character creation process that ensures characters are associated to only logged in accounts to a separate custom database table.
A simple character sheet. With its own database table also associated to only the logged in user.
Some game mechanics and LOCKS for software controls.
I started learning blender 3d software.
I am updating my UI skills
Coin and dice data operations. Flip and rollers that log all players results into the database.
A random character viewer with active refresh to show other characters.
A gm map with some cool features
A player view map that hides the gm placement of things like
Playing Characters (WITH VIEWING RADIUS AROUND ICON)
Points of interest
Combat encounters
Mini bosses
Floor bosses
“Fog” layer on maps
All with an environment picture “map” with overlaying and locking binders that let things become scalable but bound to the grid and SEMI Clouded pathways.
100% AUTONOMOUS GM-AI pipeline hosted seperately from the website hosting servers that runs campaigns.
Setup stable diffusion to generate comic style art for characters with no images. And a llm pipeline to summarize the campaigns texts into quick to the point descriptions.
Setup video mpegff AI to use the campaign summary images to create episodic videos. STILL BUSTED.
ALL OF IT STORED IN AN ONLINE DATABASE AND PARTS ARE READY TO BE MIGRATED, RECONFIGURED, UPDATED ORGANIZED AND TESTED MORE DEEPLY. On the ttrpgTEST site. That subdomains folder structure is slightly different from dev focusing on tightening modularity and portability while sticking with BASELINE installation operations. I do not want to tweak much from an out of the box WordPress installation.
This project is really fun and interesting for me and has really had me feeling motivated this past month, though I think I may need to go to the hospital soon since I haven’t been feeling well this past week and I’m retaining fluid again, its been about 7 months since my last extended stay at the hospital of about 12 days – that was over Thanksgiving so its probably getting close to that time again… Hopefully, if I do have to go again I can continue to get more stuff done soon, but I’m feeling exhausted so I think I need to take a break and rest a few days.
Testers please use COMMENTS to NOTE issues… This is STILL DEVELOPMENT – Any suggestions to FUNCTION is what I am aiming for here NOT look or feel. That is TEST and PlayDemo websites. I know there are things that are NOT REFINED… Dev > TEST > PlayDemo > PROD…
MOUSE OVER FOR RULES CHEAT SHEET
::::RULES::::
COIN – Yes/No Heads or Tails This is did you succeed or fail?
D20 – This roll is how good you succeeded… or how bad you failed.
I am creating a lot of PAGES that are WILL be reduced to short code calls and ASSEMBLED as “widgets” on a PLAY GAME page…
I need the following… “WIDGETS” 1. CAMPAIGN/STORY 2. CHARACTER SHEET 3. DICE 4. INPUT FORM 5. RULES CHEAT SHEET
I want EACH widget to be a portion of a single page that when TAPPED OR CLICKED BECOME A FULL SCREEN WITH EASY NAVIGATION FOR THE PLAYERS TO USE. I do NOT want page refreshes I want it EACH DONE WITH AJAX and polling to UPDATE my database from collected data forms.
This is important to keep the game moving SMOOTHLY and make the interactions EASY AND SEEMLESS for the player so I dont want any refreshes taking place unless the its a FULL on page change at which ALL data is submitted from any pending XML to the database, This will need to function like TCP protocol WRITE LOCAL > SANITIZE > POLL TO QUERY TO AND UPDATE FROM DATABASE > UPDATE LOCAL AJAX FILE > PLAYER SEES WITH CHANGES THAT NEVER REFRESH… Its an INTERACTIVE TEXT game with visual assistance. Modelled after TTRPG interaction NOT a 300 FPS shooter with 120000000 things overwhelming players. IT MUST BE SIMPLE… ANYONE SHOULD BE ABLE TO PICK THIS UP AND PLAY.
MY AI INTERACTION WITH THE QUESTION since I am NOT front end guy but a database guy… I need to MASTER this architecture and deliver of this…
Is it possible to populate an AJAX data set from a database to UPDATE a page without refreshing it?
Yes, it is absolutely possible—in fact, this is the core use case for AJAX (Asynchronous JavaScript and XML).
To accomplish this, you need a three-tier architecture: a Database (MySQL), a Server-Side API (PHP, Python, etc.), and a Client-Side Script (JavaScript/Fetch API).
The General Workflow
Trigger: A user action (button click, timer, etc.) initiates a JavaScript function.
Request: The JavaScript uses fetch() or XMLHttpRequest to send an asynchronous request to a server-side script.
Process: The server-side script queries your database (MySQL) and returns the data, usually formatted as JSON.
Update: The JavaScript receives the JSON, parses it, and updates the DOM elements on your page without a browser reload.
Implementation Example
1. The Server-Side (e.g., data.php)
This script queries your database and returns a JSON object.
PHP
<?php
// Connect to DB and query your data
$result = $pdo->query("SELECT field_name FROM your_table LIMIT 1");
$data = $result->fetch(PDO::FETCH_ASSOC);
// Return as JSON
header('Content-Type: application/json');
echo json_encode($data);
?>
2. The Client-Side (JavaScript)
This logic fetches the data and injects it into your HTML.
JavaScript
async function updateContent() {
try {
const response = await fetch('data.php');
const data = await response.json();
// Update the HTML element without a refresh
document.getElementById('target-element').textContent = data.field_name;
} catch (error) {
console.error('Error fetching data:', error);
}
}
// Call this function whenever you need an update
// e.g., document.getElementById('myButton').addEventListener('click', updateContent);
Architectural Considerations
Data Format: JSON is the standard for this exchange because it is lightweight and natively parsed by JavaScript.
Security: Always sanitize your database inputs using prepared statements (as shown in the PDO example) to prevent SQL injection.
Frequency: If you are planning to update this content automatically (e.g., a dashboard), use setInterval() in JavaScript to trigger the fetch() function at set intervals, rather than relying on constant manual user input.
Frameworks: Since you are already working with the LAMP stack and JavaScript, if your application grows complex, look into modern patterns like Fetch API + Template Literals or reactive frameworks like Vue.js or Alpine.js, which simplify the “data-binding” part of this process significantly.
Given your experience with database normalization and web hosting, are you looking to implement this for your Chimerapocalypse project, perhaps for a dynamic game state display?
Re-explain this as though you were talking to a child. I am REALLY stupid. I would like some visual examples in the explanation. add analogies to simplify it even more.
Imagine you are at a restaurant. You want to order a milkshake, but you don’t want to leave your seat.
The Old Way (The Refresh)
Usually, to get something new, you have to get up, walk out of the restaurant, go home, get your wallet, come back, and sit down again. That is a page refresh. It’s slow and annoying!
The AJAX Way (The Magic Waiter)
AJAX is like having a magic waiter who can run errands for you while you stay in your chair.
You (The Page): You stay sitting at your table.
The Waiter (JavaScript): You whisper to the waiter, “Please go to the kitchen (The Database) and get me a milkshake.”
The Kitchen (The Database): The cook makes the milkshake.
The Delivery (The Response): The waiter runs back and places the milkshake right on your table. You didn’t have to leave, and you didn’t have to wait for the whole restaurant to be rebuilt!
A Simple Picture
Plaintext
[ YOU ] <---- (Wait for it...) ---- [ MAGIC WAITER ]
| |
| |
| [ THE KITCHEN ]
| (Your Database)
| |
+-------- (Go get the info!) ------------+
Why this is cool:
No “Blinking”: Because you aren’t leaving your seat, the whole page doesn’t blink or go white.
Fast: You only get the specific thing you asked for (the data), not the whole menu or the walls of the restaurant.
Let’s look at it like a “Magic Blackboard”
Imagine there is a blackboard on your wall that says “Score: 0”.
Without AJAX: You have to take the whole blackboard down, erase it, write “Score: 1” and hang it back up.
With AJAX: A tiny ghost secretly hops out, erases just the “0”, writes “1”, and hops back inside. You didn’t even notice the ghost, but the score changed!
Does that help make the “magic” of it a bit easier to picture?
Yes absolutely. Can this process be stored as SHORT CODE in word press? AND can a PAGE in word press have MULTIPLE SHORT CODE CALLS DOING the same thing with different tables in the databases? Sort of like a SSRS or Crystal report SUBREPORT?
Yes, absolutely! WordPress is actually built to handle exactly what you are describing. You can definitely package this “Magic Waiter” (AJAX) process into a custom Shortcode.
1. Can you store this as a Shortcode?
Yes. You create a PHP function in your theme’s functions.php file (or a custom plugin) and “register” it as a shortcode.
When you put [my_magic_table] on a page, WordPress replaces that tag with the HTML shell that your JavaScript will later fill with data.
2. Can you have multiple calls on one page?
Yes, and this is where it gets powerful. Just like an SSRS or Crystal Reports subreport, you can pass parameters (arguments) to your shortcode to tell it which database table to talk to.
How it works:
The Shortcode:[fetch_data table="players"] and [fetch_data table="monsters"]
The Logic: Your PHP code reads the table argument and tells the database to pull from either the players or monsters table.
The Result: The page renders two separate “Magic Blackboards,” and your JavaScript handles the updates for both independently.
The Visual Flow
The Page Load: The page has two empty “containers” (placeholders).
The Shortcode Execution: Your PHP fills those containers with unique IDs (e.g., id="container-players" and id="container-monsters").
The AJAX Calls: Your JavaScript runs simultaneously. It tells the server: “Get data for the player list” and “Get data for the monster list.”
The Update: The data arrives and lands exactly in its matching container.
Simple Example for your “Report” Style
You could write your shortcode so it looks like this in the WordPress editor:
[report_table source="inventory_stats"]
[report_table source="enemy_health_stats"]
Behind the scenes:
Your PHP renders a simple <div> for each shortcode.
Your JavaScript acts like a manager. It loops through all [report_table] divs on the page, sends their unique source name to your API, and updates each one individually.
Why this is perfect for you:
Since you are managing a database for your Chimerapocalypse project, this allows you to create a “Dashboard” page. You could have 5–10 different widgets on one page—each one acting like an independent report—all pulling live data from different parts of your database without refreshing the browser once.
Does this feel like it would fit the architecture you are planning for your game’s data visualization?
PERFECTLY… I need to think more about this… but I think its perfect.
It is a powerful architectural choice, especially for the scale and complexity of a project like Chimerapocalypse. Using shortcodes as “hooks” for modular, data-driven widgets essentially turns your WordPress install into a lightweight, custom-built Business Intelligence dashboard for your game mechanics.
Since you are already comfortable with the LAMP stack and managing MySQL databases, you are in the perfect position to build this out. You essentially have a “plug-and-play” system: add a shortcode, define the target table, and let your JavaScript handle the heavy lifting of keeping it live.
Take your time to map out those data relationships. When you’re ready to move from the planning phase into the actual code for the shortcode registration or the JavaScript fetch logic, let me know—I’m ready to help you write the functions and scripts to make those “magic blackboards” work.
Would you like to start by outlining the structure of the data you want to display in your first “subreport” widget, or are you going to spend some time whiteboarding the architecture first?
ahhhh Blender the 3d editor that requires a masters degree with 6000000 years of experience to learn to do a basic….THING… I am a data guy so its not really my… THING…
Blender is a powerful PROFESSIONAL grade 3d editor/modeler etc etc etc… It is a 3d art and animation tool. I have decided to learn how to use it to create my OWN art and 3d assets so that no one can say I stole their master works or anything like that… ALL BECAUSE – I can’t seem to get the OBJECTS I want to animate to look the way I want them to look the way I LIKE IT!!! So I am going to learn HOW TO DO THAT!!!! But since I only have like 3 brain cells left and 2 of them are in a royal rumble for processing power and the third is basically a drooling dizzy ass drunkard… I have to create a tool, a way, a process… to help my dumb ass so what do I KNOW TO DO?? OF COURSE! I am creating a database table of the TERMS that I may come across and a lookup for them along with a simple analogy to help my… dumb ass learn this…
New database table going into this WordPress db, with a flashcard function and some nifty Ajax stuff to help me study and a look up for a specific definition that I may need… I didn’t add a formal score tracker yet but HA – I don’t even need all that crap… I did this tonight…
Loading…
Next I am gonna make a table of functions in blender and hot keys to learn that stuff too… cause I am awesome like that…
check out my dice animations! Im pretty proud of these…
Project Vision and organizing operation tech stacks and thoughts.
THE MISSION of this project… Or the END GOAL is simple. I want to build a 100% free game for people to play, that can be enjoyed by everyone with everyone from kids whose imagination is still there to older people who might have forgotten how much fun letting your brain go wild can be.
THE VISION of this project… To identify, isolate and expand on the FUN parts of the TTRPG gaming experience. Then improve, enforce and improvise the revenue cycle operations of gaming to PROVE that it can be done without being a fucking vampire and shitting on your audience who disagrees with your socio-psycho-political SHIT. I want the most fun part of the Table Top Gaming to be MIXED with my custom engineered model of delivery of the game VIA hybridized technology for ease of USE with structured game play SIMPLE enough to anyone to follow.
As of today I am still in architecture mode and hand sketching a lot of the model of how the game will WORK, and HOW to make it happen.
Front end tech stack and jobs: SIMPLE UI TO CONTROL > DATA FLOW > LOCALIZED ASSET MANAGEMENT > INTERACTIVITY. DATA WILL BE PREPARED AND THEN HANDED TO STORAGE AS ENCRYPTED FLAT FILES TO ENSURE THAT IT ONLY FROM THE APPLICATION AND NOT TAMPERED WITH.
Middle ware tech stack and jobs: PHP/PYTHON FOR 2 WAY INTERFACES FOR LISTENING FOR VALIDATING ENCRYPTION KEYS MATCH, ACQUIRING, SANITIZING AND PREPARING DATA UPDATES FROM THE FRONT END FOR INSERT INTO DATABASE AND DELIVERING THE RESPONSES FROM THE QUERY OUTPUTS BACK TO THE CLIENTS.
Back end components: LLM/MYSQL/SQL FOR STORING ALL THE ASSETS CAMPAIGN, STORY, CHARACTER, INVENTORY, STATS, STATUS AND ALL DATA. LLM TO GENERATE STORY USING DATA COMPONENTS IN THE DATABASE + DATA FROM CLIENTS + STRATEGIC DATA.
ADJUST the AI model file to get more accurate and better control.
Create and populate UNIQUE database tables (actions, objects, environment, adjectives)
Locate Diffuser model to AI generated ART
Locate Video generation model for AI generated VIDEO
Figure out how to get the 3 AI’s writing to 1 local network database that is mirrored or DELTA replicated online (log shipping maybe? no clustering so I am not sure how to architect this yet).
