improve Ai prompt for Chat feature and readme

The Ai prompt needs some improvement like it was giving away all the results easily. So i improved the prompt and also the readme!!

move groq api calls behind a vercel serverless function

(used ai to figure this out, as i didn’t know i had to make a serverless function to set the key in vercel)

Before

• groq api key is assigned to window.ENV_GROQ_KEY in config.js and wasn’t accessible in the deployment link
• both the tipster chat and final scene verify fetch directly to api.groq.com from the frontend

Now

• api key lives only in the vercel dashboard as GROQ_API_KEY
• all groq calls go through /api/chat.js which runs server-side on vercel
• frontend fetches /api/chat and gets back only the text it needs

keyboard login, implemented groq key, tipster fix, readme

Before

• login required clicking on-screen buttons, no keyboard support
• gemini key was used
• tipster was still giving away information directly instead of asking questions
• no readme :(

Now

• typing digits, backspace, and enter on the keyboard works on the login screen
• a small hint below the OS name tells players to check the console or devlog for the password
• groq api key is used since it allows more rps
• both tipster and final scene use the shared helper so both benefit from fallback
• tipster system prompt now enforces Socratic mode like every response must end with a question, player must reach every
• finally write readme

demo video link(contains spoilers, also chat feature still sucks somehow,so try to find the answer without using it)
https://drive.google.com/file/d/1oXJNCq0buNGMcFJXMV2Xquk60hl_5HqE/view?usp=sharing
demo was long so i couldnt attach it

window resizing, final scene font fixes, submit button color

Before

• windows could only be dragged, no way to resize them
• all final scene text was tiny pixel sizes (5px to 11px), basically unreadable at normal screen distance
• ending screens had illegibly small text for the reveal lines

Now

• all windows are resizable by dragging any edge or corner, with a minimum size of 320x240
• a subtle resize grip indicator shows in the bottom right corner of every window
• cursor changes to the appropriate resize direction arrow when hovering near window edges
• final scene title bumped from 11px to 18px, prompt from 8px to 13px, textarea input from 7px to 12px
• choice button text and ending reveal lines also got increases( can’t right its increement also :”) )
  This still didn’t fulfill the Font issue so Next i will make the New window which have change font size feature in it, so user can change size according to their preference

final scene, tipster polish, cursor and font fixes, BG images fixes

Note

read this devlog after you have played the game since it contains all the SPOILERS!

Before

• no final scene existed, no way to submit a theory or reach an ending
• tipster chat header used a plain gradient, no tab_bg image like other windows
• chat bubble font was 6px, barely readable especially against the background image
• start menu was missing Submit Theory as an app option on the desktop (as i need to make it)

Now

• double-clicking Submit Theory opens a fullscreen theory input powered by gemini verification
• correct theory unlocks three ending choices with animated reveal screens
• do your job sends sarah back and shows a case closed stamp with delayed text fade-in
• hide the truth fades in three lines slowly and ends with “some cases are better left unsolved”
• call the police triggers a phone ring animation then injects a threatening email from unknown sender
• wrong theory shows “you still haven’t found the truth. go away.” and lets player try again
• tipster header now uses tab_bg.jpg with luminosity blend matching all other window titlebars
• chat bubble font bumped from 6px to 8px with line-height 2.2 so messages are readable
  note:
  I think text is still not readable enough so in next devlog i will work on making it readable

anonymous tipster - full feature devlog

Before

• no AI assistance in the game at all
• a help me button existed with hardcoded hint strings that was basically useless

Now

• a glowing pink icon sits bottom-right above the taskbar, pulsing to draw attention
• clicking it opens a chat window
• an anonymous tipster persona powered by gemini 3.1 flash lite preview responds to the player
• every message rebuilds the system prompt injecting what files and emails the player has opened this session
• tipster never volunteers information, always asks what the player thinks first
• if the player gives a correct interpretation it confirms and nudges forward
• if the player gives up it switches to direct mode with a concrete folder or file instruction
• gemini key lives in config.js which is in .gitignore and never touches the repo
• last 3 exchanges sent to gemini so context stays!

what i had to suffer for this(aka why it took so long) :”)

• tipster had no awareness of what the player had actually opened before so spend time figuring out what to do here, so i send last 3 messages to gemini also as context and also made levels that gemini will know of what level/files user has explored till now
• gemini volunteered the full truth unprompted without waiting for the player so i had to restrict my prompt way toooo much

hi!!
In this devlog, i restructured all the code, remove the mails or photos that was too obvious. I also brainstorm the whole flow of the Game
like what should go into MAILs, PHOTOS, where should be final stuff and how can user connect the dots
Also, i made sure everything points to some clue!!! before it was too messy but now i made it look clean and delete all the unnecessary stuff! All the stuff in every folder is finalized.
And i added a help me button that guides user, but i think its not so good, so I will replace it with something actually helping and not so obvious in the next ship!
i think now i will only make a new big push of code and get it done as most of the flow is already done in the code!

Hi!!
So before, it was just a PIXELOS
but then i thought, why not i make it a Crime Investigation Game like now
YOU are A detective and you got this PIXELOS of girl Named Sarah and her parents assign the job to you to find out about their missing girl! Now you are searching through her OS finding all the clues!! WOuld u find out the real kidnapper?!

Ok smthn like this, i wanna go on more but i think i shouldnt as this devlog should contain technical stuff also
so i made a new MAIL window also which shows the mail of the Girl Sarah and then also a case Notes window which shows the basic case notes like initial details!!! i have figured out all the flow of the game tho
so stay tuned!!!!!!!!
(i know i took a longg longg break for this project but…)

HI!
in this devlog i built the boot animation.set up array of boot steps where each step has a message, a progress percentage, and a delay in ms. a recursive setTimeout function go thro them one by one updating the loading bar and status text. the start logo spins using a CSS keyframe animation. when all steps get finished it hides the boot screen and shows the login page. restart also goes through the full boot sequence!!!

HI!!!
in this devlog i built the boot and login system
the page now starts with a login screen instead of jumping straight to the desktop
built a tryLogin function that checks the credentials and either dismisses the screen or shakes the form and shows an error. the shutdown button triggers a black overlay saying restarting, user has to reload to get back in. restart does the same black screen but after 2.5 seconds it would) automatically brings the login screen back. empty fields also count as valid so you can just hit enter and get in quickly.

HI!!!
in this devlog i rebuilt the window management system
the old code just toggled a class and had no concept of which window was on top.
so, i replaced it with a z-index counter that increments every time a window is focused so the last clicked window is always on top. minimize now hides the window but keeps the taskbar button visible and grayed out. clicking that grayed button restores the window to its exact last position.
the taskbar button also now correctly toggles!!!!

hi!! in this devlog i setup2 the start menu for PixelOS.
so the structure was already there from last session so this was mostly about getting the interactions right. clicking the start button toggles the menu open and closed and adds a glow to the button so you know its active. clicking any app in the menu opens that window and closes the menu at the same time. i also added a listener on the desktop so clicking anywhere outside the menu closes it. the shut down and restart buttons trigger a toast notification saying restarting and shutting down.
I also changed the wallpaper!

Browser window
hi!! in this devlog i built the Browser window for PixelOS!
i set up a pages object where each key is a pixel url and value is a function that returns html.
this made it really easy to add new pages later on… i also built a proper browser history array with a current index ptr so back and forward work correctly. clicking links inside pages navigates too.

hi!!
in this devlog i built the text editor window for PixelOS!
double clicking a txt file now opens it with the content loaded instead of browser alert that i had set before.
i wrote an openEditor function that takes a file object and populates the textarea. also added live word and character counting that updates on every keystroke, and replaced all alerts with a proper toast notification. the save button and new button r also working!

hi!!
in this devlog i built the file explorer window for PixelOS!
i set up a fake file system as a javascript object with folders and files nested inside each other. clicking the desktop icon or taskbar button opens the window, and you can double click folders to go inside them. i also built a navigation history stack so the back button remembers where you came from. dragging the window also works!!!

hi!!
in this devlog i set up the static website for PixelOS! Just put static icons there for now!well, took me alot of time searching for right wallpaper and icons TT and then i also had to remove the backgrounds of icon using canva :”) wallpaper is in png while all icons are in svg format!
for now, i styled the taskbar with the start button, app shortcuts, and a live clock!!!
i will work in increements and set more things in my webos!

password: 2010 btw u could have find it out by seeing the crack on keys