Code In The Dark

A client–server application of the Code In The Dark front-end game. Based on the original Tictail challenge: recreate a UI from a single screenshot using HTML & CSS and don’t see the result until time’s up!

• 2-player coding in Monaco editor with Emmet
• Live updates on a TV screen
• Admin controls for rounds and timing

Main /	TV /tv

Player editor /game?player=1|2	Admin panel /admin

Host Your Own Contest

1. Make sure all computers are on the same LAN

2. Install Node.js

3. Create .env file with ADMIN_PASSWORD=yourpassword. If you skip this, the default password is pass

4. Run npm i && npm start

5. On 2 laptops, open:

http://<server_ip>/game/?player=1
http://<server_ip>/game/?player=2

6. On the TV screen, open:

http://<server_ip>/tv/

Custom tasks

There are 12 prepared tasks in /tasks folder:

• chat.png
• vote-checkbox.png
• calendar.png
• confirm.png
• payments.png
• …

To add a new task, put your own screenshot in /tasks

Roadmap

• Player editor with live preview
• Monaco Editor
• Emmet
• Admin panel for rounds
• Basic admin password
• Real-time updates on TV screen
• Add Tailwind/Bootstrap options
• Tasks with assets & variables
• Switch code/preview on TV
• Pulling → WebSockets
• Add extra time to the round
• End game & show confetti
• Support 4 players
• Prompt In The Dark — AI rounds with ChatGPT/Deepseek etc. 🤓

Development

1. Install Node.js

2. Install dependencies

npm i

3. Run client and server apps

npm run dev

See also

• codeinthedark.com — the Code In The Dark contest by Tictail
• codeinthedark/editor — the original editor