WebDoom: Retro FPS Reimagined

[{"_1":2,"_161":-5,"_162":-5},"loaderData",{"_3":4,"_55":56,"_160":-5},"root",{"_5":6,"_19":-5,"_20":-5,"_21":22,"_36":-5,"_37":-5,"_38":-5,"_39":-5,"_40":41,"_42":43,"_52":41,"_53":54},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"SUPABASE_URL","https://hello.websim.com","SUPABASE_ANON_KEY","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9jamVmZ2NqamlxeWt3YWR2dnJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTE4MzI5OTMsImV4cCI6MjAyNzQwODk5M30.vsreOYwk8pKsr8NFlzpIzWAiD-vXj6ijv_Bhn1vYtHs","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","NODE_ENV","production","authUser","user","snapshotData",{"_23":-5,"_24":-5,"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5},"lastProjectId","sidebarTab","homepageTab","feedTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","plan","balances","rewards","pinned","has_default_username",false,"origins",{"_44":45,"_46":47,"_48":49,"_50":51},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","isMobile","theme","auto","slug",{"_57":58,"_103":104,"_135":136,"_153":154,"_155":-5,"_156":157,"_158":-5,"_159":-5},"site",{"_59":57,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_76":77,"_78":79,"_80":81,"_86":87,"_97":98,"_99":100,"_101":-5,"_102":-5},"_type","id","JO82Cchtsn3qfXu9C","parent_id","5zw6FlTgre85t3We9","created_at","2024-07-13T22:46:00.58406+00:00","state","done","model","sonnet","lore",{"_72":73,"_74":75},"version",1,"attachments",[],"title","WebDoom: Interactive Code Editor","url","https://websim.ai","prompt",{"_82":83,"_84":85},"type","plaintext","text","To integrate a real-time code editor using Ace Editor within the WebSim environment for the WebDoom game, here is the full implementation that allows you to edit and run the code dynamically. This setup includes the game canvas for rendering the game and the Ace Editor for code editing.\n\n### Complete Implementation\n\n**index.html**\n```html\n\n\n\n \n \n WebDoom: Retro FPS Reimagined\n \n\n\n

\n \n

\n \n \n \n \n\n\n```\n\n**doom.js**\n```javascript\nconst canvas = document.getElementById('gameCanvas');\nconst gl = canvas.getContext('webgl');\n\nif (!gl) {\n alert('WebGL not supported, falling back on experimental-webgl');\n gl = canvas.getContext('experimental-webgl');\n}\n\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\ngl.viewport(0, 0, canvas.width, canvas.height);\ngl.clearColor(0.0, 0.0, 0.0, 1.0);\ngl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n// Placeholder for shaders and game logic\nconst vertexShaderSource = `\n attribute vec4 aVertexPosition;\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n void main(void) {\n gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;\n }\n`;\n\nconst fragmentShaderSource = `\n void main(void) {\n gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n }\n`;\n\nconst loadShader = (type, source) => {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n return null;\n }\n\n return shader;\n};\n\nconst vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);\nconst fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);\n\nconst shaderProgram = gl.createProgram();\ngl.attachShader(shaderProgram, vertexShader);\ngl.attachShader(shaderProgram, fragmentShader);\ngl.linkProgram(shaderProgram);\n\nif (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {\n console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));\n}\n\ngl.useProgram(shaderProgram);\n\nconst programInfo = {\n program: shaderProgram,\n attribLocations: {\n vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),\n },\n uniformLocations: {\n projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),\n modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),\n },\n};\n\nconst buffers = initBuffers(gl);\n\nfunction initBuffers(gl) {\n const positionBuffer = gl.createBuffer();\n gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);\n\n const positions = [\n 1.0, 1.0,\n -1.0, 1.0,\n 1.0, -1.0,\n -1.0, -1.0,\n ];\n\n gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);\n\n return {\n position: positionBuffer,\n };\n}\n\nfunction drawScene(gl, programInfo, buffers) {\n gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n const fieldOfView = 45 * Math.PI / 180;\n const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;\n const zNear = 0.1;\n const zFar = 100.0;\n const projectionMatrix = mat4.create();\n\n mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);\n\n const modelViewMatrix = mat4.create();\n\n mat4.translate(modelViewMatrix, modelViewMatrix, [-0.0, 0.0, -6.0]);\n\n {\n const numComponents = 2;\n const type = gl.FLOAT;\n const normalize = false;\n const stride = 0;\n const offset = 0;\n gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);\n gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset);\n gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);\n }\n\n gl.useProgram(programInfo.program);\n\n gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);\n gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix);\n\n {\n const offset = 0;\n const vertexCount = 4;\n gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);\n }\n}\n\ndrawScene(gl, programInfo, buffers);\n\nwindow.addEventListener('resize', () => {\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n gl.viewport(0, 0, canvas.width, canvas.height);\n drawScene(gl, programInfo, buffers);\n});\n\nconst editor = ace.edit(\"editor\");\neditor.setTheme(\"ace/theme/monokai\");\neditor.session.setMode(\"ace/mode/javascript\");\neditor.setValue(`\n// WebGL and game logic code here...\nconst canvas = document.getElementById('gameCanvas');\nconst gl = canvas.getContext('webgl');\n\nif (!gl) {\n alert('WebGL not supported, falling back on experimental-webgl');\n gl = canvas.getContext('experimental-webgl');\n}\n\ncanvas.width = window.innerWidth;\ncanvas.height = window.innerHeight;\n\ngl.viewport(0, 0, canvas.width, canvas.height);\ngl.clearColor(0.0, 0.0, 0.0, 1.0);\ngl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);\n\n// Placeholder for shaders and game logic\nconst vertexShaderSource = \\`\n attribute vec4 aVertexPosition;\n uniform mat4 uModelViewMatrix;\n uniform mat4 uProjectionMatrix;\n void main(void) {\n gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;\n }\n\\`;\n\nconst fragmentShaderSource = \\`\n void main(void) {\n gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n }\n\\`;\n\nconst loadShader = (type, source) => {\n const shader = gl.createShader(type);\n gl.shaderSource(shader, source);\n gl.compileShader(shader);\n\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));\n gl.deleteShader(shader);\n return null;\n }\n\n return shader;\n};\n\nconst vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);\nconst fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);\n\nconst shaderProgram = gl.createProgram();\ngl.attachShader(shaderProgram, vertexShader);\ngl.attachShader(shaderProgram, fragmentShader);\ngl.linkProgram(shaderProgram);\n\nif (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {\n console.error('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));\n}\n\ngl.useProgram(shaderProgram);\n\nconst programInfo = {\n program: shaderProgram,\n attribLocations: {\n vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),\n },\n uniformLocations: {\n projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),\n modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),\n },\n};\n\nconst buffers = initBuffers(gl);\n\nfunction initBuffers(gl) {\n const positionBuffer = gl.createBuffer();\n gl.bind","owner",{"_59":20,"_60":88,"_64":89,"_90":91,"_92":-5,"_93":-5,"_94":95,"_96":41},"75ac29a2-852e-4d98-87c3-bf7b56d60a92","2024-04-09T01:16:13.337484+00:00","username","deathbefore","discord_id","discord_username","avatar_url","https://avatars.websim.ai/75ac29a2-852e-4d98-87c3-bf7b56d60a92/oKogpOfFV5ZootFay.webp","is_admin","link_url","/p/ah8jdnga8z0hnuu3aa35","versioned_link_url","/p/ah8jdnga8z0hnuu3aa35/1","deleted_at","yapping","project",{"_59":103,"_60":105,"_64":106,"_107":108,"_76":77,"_109":110,"_55":111,"_112":113,"_114":73,"_115":-5,"_62":116,"_117":73,"_101":-5,"_118":41,"_119":120,"_125":126,"_127":-5,"_128":129,"_130":41,"_131":-5,"_132":133,"_134":-5},"ah8jdnga8z0hnuu3aa35","2024-07-13T23:00:26.710017+00:00","updated_at","2024-09-20T23:58:50.521+00:00","visibility","public","webdoom-interactive-code-editor","created_by",{"_59":20,"_60":88,"_64":89,"_90":91,"_92":-5,"_93":-5,"_94":95,"_96":41},"current_version","last_posted_version","h_87acnc143sh6odfeie","parent_version","posted","stats",{"_121":122,"_123":73,"_124":122},"views",0,"likes","comments","auto_set_current",true,"description","comments_mode","open","enable_chat","from_template","domains",[],"thumbnail","project_revision",{"_59":135,"_60":137,"_72":73,"_64":108,"_138":-5,"_62":-5,"_139":-5,"_140":-5,"_112":141,"_142":143,"_145":105,"_107":108,"_101":-5,"_119":146,"_148":41,"_149":61,"_150":-5,"_151":-5,"_152":-5},"019211df-c499-7481-8d6b-91252345ecb6","visited_at","parent_revision_version","parent_revision_project_id",{"_59":20,"_60":88,"_64":89,"_90":91,"_92":-5,"_93":-5,"_94":95,"_96":41},"meta",{"_72":144},"1","project_id",{"_147":122},"multiplayer_count","draft","site_id","chat_session_id","chat_session_run_index","current_screenshot_url","cursor","eyJpZCI6IjAxOTIxMWRmLWM0OTktNzQ4MS04ZDZiLTkxMjUyMzQ1ZWNiNiJ9","token","included",[],"branch","dehydratedState","routes/browser/layout","actionData","errors"]