The latest articles on DEV Community by Shree Santh B (@shreesanth78). https://dev.to/shreesanth78 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4170757%2F69258eae-416a-43fb-81d5-3bfa051c213a.jpeg https://dev.to/shreesanth78 en Shree Santh B Thu, 08 Oct 2026 10:01:29 +0000 https://dev.to/shreesanth78/prompt-heist-i-built-an-ancient-kingdom-game-that-teaches-ai-security-kg5 https://dev.to/shreesanth78/prompt-heist-i-built-an-ancient-kingdom-game-that-teaches-ai-security-kg5 <p>I built <strong>Prompt Heist</strong> for the Hacktoberfest Hack Day (Coimbatore x Init Club and Idea Club). It is a playable 2D ancient-fantasy adventure that teaches AI security by letting you try it, safely, against fictional guardians.</p> <h2> The idea </h2> <p>Prompt injection and jailbreaks are hard to grasp from slides. In Prompt Heist you travel a painted world map, walk your adventurer to a kingdom's gate, and try to talk your way past a guardian protecting a made-up secret. After every level, a short debrief explains why it worked and how a real system should defend against it.</p> <h2> How it plays </h2> <ul> <li> <strong>5 kingdoms:</strong> Civic Grids, Bio-Archives, Trade Ports, Risk Ledgers and Scrap Wastes, each with its own look and guardian.</li> <li> <strong>6 levels in each kingdom</strong>, on the same difficulty ladder: <ol> <li>The Friendly Guard</li> <li>The Reasoning Guard</li> <li>The Authority Checkpoint (checkpoint)</li> <li>The Game Master</li> <li>The Royal Clerk</li> <li>The Adaptive Boss</li> </ol> </li> <li>An animated messenger-knight walks the stone roads between levels.</li> <li>You get three strikes, a checkpoint after Level 3, victory and defeat screens, and a kingdom-completion ceremony that unlocks the next kingdom.</li> </ul> <h2> What you learn </h2> <p>Each debrief ties the game mechanic to a real lesson, for example:</p> <ul> <li>System prompts alone are not a security boundary.</li> <li>Claimed authority is not proof of identity.</li> <li>Exact-string filters fail when the representation changes.</li> <li>Translation and other transformations can slip past naive filters.</li> </ul> <p>Everything in the game is fictional. The debriefs remind players to test only systems they own or have permission to test.</p> <h2> How it is built </h2> <ul> <li>React, Vite and React Router in plain JavaScript.</li> <li>All art is original and drawn in code with inline SVG and CSS animation, so there are no image files to load.</li> <li>The walk cycle uses <code>requestAnimationFrame</code> to move the character along a spline path.</li> <li>A small API layer is ready for a Python FastAPI backend and an open-weight Gemma model served through Ollama.</li> <li>Victory is meant to be decided by the backend, never by the guard's own text. The prototype uses a mock server with simple keyword rules as a stand-in.</li> </ul> <h2> Try it </h2> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>git clone https://github.com/shreesanth-78/hacktoberfest-hack-day-coimbatore-x-init-club-and-idea-club.git <span class="nb">cd </span>hacktoberfest-hack-day-coimbatore-x-init-club-and-idea-club npm <span class="nb">install </span>npm run dev </code></pre> </div> <p>Then open <a href="http://localhost:5173" rel="noopener noreferrer">http://localhost:5173</a>.</p> <h2> What is next </h2> <ul> <li>Connect the real FastAPI and Gemma backend so the guardians respond with a live model.</li> <li>Replace the placeholder emoji state icons with SVG seals.</li> <li>Make the adaptive boss learn from real winning-message history.</li> </ul> <p>Source code: <a href="https://github.com/shreesanth-78/hacktoberfest-hack-day-coimbatore-x-init-club-and-idea-club" rel="noopener noreferrer">https://github.com/shreesanth-78/hacktoberfest-hack-day-coimbatore-x-init-club-and-idea-club</a></p> <p>Feedback and ideas are welcome!</p> hacktoberfest ai security react