{"name":"Code Playground Fun","description":"Create a playful code playground where users can write and run code using the Monaco Editor, complete with fun visual elements and interactive features.","photo":null,"view_count":8,"fork_count":0,"expires_at":null,"created_at":"2024-04-17T14:10:55.265564Z","updated_at":"2024-04-17T14:10:55.265566Z","user_id":28,"status":"PUBLIC","parent_id":1033,"id":1188,"user":{"photo":null,"email":null,"recess_id":"","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"oldj","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let currentFile = 'index.html';\nconst filesContent = {\n 'index.html': '\\n

Hello, Coders!

\\n',\n 'style.css': '/* Add your styles here */\\n',\n 'script.js': '// Add your JavaScript here\\n'\n};\n\nvar editor;\nvar modal = document.getElementById(\"outputModal\");\nvar btn = document.getElementById(\"runBtn\");\nvar span = document.getElementsByClassName(\"close\")[0];\n\nwindow.onload = function () {\n require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.27.0/min/vs' } });\n require(['vs/editor/editor.main'], function () {\n editor = monaco.editor.create(document.getElementById('container'), {\n value: filesContent[currentFile],\n language: getLanguageFromFileName(currentFile),\n theme: 'vs-dark',\n\n });\n\n document.querySelectorAll('#files li').forEach(item => {\n item.addEventListener('click', function () {\n switchFile(this.textContent);\n });\n });\n\n btn.onclick = function () {\n modal.style.display = \"block\";\n runCode(); // Ensure runCode is called when modal opens\n }\n\n span.onclick = function () {\n modal.style.display = \"none\";\n }\n\n window.onclick = function (event) {\n if (event.target == modal) {\n modal.style.display = \"none\";\n }\n }\n });\n};\n\nfunction switchFile(fileName) {\n filesContent[currentFile] = editor.getValue(); // Save current content\n\n currentFile = fileName; // Switch current file\n editor.setModel(monaco.editor.createModel(filesContent[currentFile], getLanguageFromFileName(currentFile)));\n\n // Remove 'active' class from all items\n document.querySelectorAll('#files li').forEach(item => item.classList.remove('active'));\n\n // Add 'active' class to the currently selected item\n document.querySelectorAll('#files li').forEach(li => {\n if (li.textContent === currentFile) li.classList.add('active');\n });\n}\n\nfunction getLanguageFromFileName(fileName) {\n if (fileName.endsWith('.html')) return 'html';\n if (fileName.endsWith('.css')) return 'css';\n if (fileName.endsWith('.js')) return 'javascript';\n return 'plaintext';\n}\n\nfunction runCode() {\n const iframe = document.getElementById('output');\n iframe.contentWindow.document.open();\n iframe.contentWindow.document.write(filesContent['index.html']);\n iframe.contentWindow.document.write('');\n iframe.contentWindow.document.write('\n\n

index.html
style.css
script.js

\n \n

\n\n \n \n \n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"title":"Interactive code editor","instruction":"Implement a web-based code editor using the Monaco Editor to allow users to write and run code.","created_at":"2024-04-04T02:32:36.974331","project_id":1188,"complete":false,"step_number":0,"updated_at":"2024-04-17T14:10:55.270678","id":6194},{"title":"Visual elements","instruction":"Add colorful and playful visual elements to the code playground to create an engaging environment.","created_at":"2024-04-04T02:32:36.974422","project_id":1188,"complete":false,"step_number":1,"updated_at":"2024-04-17T14:10:55.270825","id":6195},{"title":"User input and controls","instruction":"Implement user input and controls to interact with the visual elements and code editor.","created_at":"2024-04-04T02:32:36.974466","project_id":1188,"complete":false,"step_number":2,"updated_at":"2024-04-17T14:10:55.270902","id":6196},{"title":"Game logic","instruction":"Incorporate game-like elements and logic to make the code playground interactive and entertaining.","created_at":"2024-04-04T02:32:36.974508","project_id":1188,"complete":false,"step_number":3,"updated_at":"2024-04-17T14:10:55.270954","id":6197},{"title":"Scoring and achievements","instruction":"Introduce scoring and achievements to provide a sense of progression and accomplishment for the users.","created_at":"2024-04-04T02:32:36.974549","project_id":1188,"complete":false,"step_number":4,"updated_at":"2024-04-17T14:10:55.270997","id":6198},{"title":"Community sharing","instruction":"Allow users to share their creations and code with the community, fostering collaboration and creativity.","created_at":"2024-04-04T02:32:36.974670","project_id":1188,"complete":false,"step_number":5,"updated_at":"2024-04-17T14:10:55.271040","id":6199},{"title":"Responsive design","instruction":"Ensure the code playground is accessible and enjoyable across different devices and screen sizes.","created_at":"2024-04-04T02:32:36.974724","project_id":1188,"complete":false,"step_number":6,"updated_at":"2024-04-17T14:10:55.271082","id":6200},{"title":"Documentation and tutorials","instruction":"Provide clear documentation and tutorials to guide users in using the code playground and its features.","created_at":"2024-04-04T02:32:36.974766","project_id":1188,"complete":false,"step_number":7,"updated_at":"2024-04-17T14:10:55.271125","id":6201}]}