Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Plasma Arc Project</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap'); | |
| body { margin: 0; padding: 0; overflow: hidden; background-color: black; } | |
| </style> | |
| <script type="module"> | |
| const config = { | |
| backgroundColor: 'black', font: 'Orbitron, monospace', fontSize: '16px', fontColor: 'white', name: 'Plasma Arc Project', version: 'v1.0.0', | |
| fpsFontSize: '14px', versionFontSize: '10px', canvasId: 'plasma-arc-canvas', padding: 10 | |
| }; | |
| const state = { | |
| fpsX: config.padding * 7, fpsY: config.padding, nameX: null, nameY: null, versionY: null, lastFrameTime: 0, fps: 0, smoothFPS: 0 | |
| }; | |
| function lerp(start, end, amount) { | |
| return start + (end - start) * amount; | |
| } | |
| function createCanvas() { | |
| const canvas = document.createElement('canvas'); | |
| canvas.id = config.canvasId; | |
| document.body.appendChild(canvas); | |
| return canvas; | |
| } | |
| function initializeCanvas(canvas, context) { | |
| resizeCanvas(canvas); | |
| fillCanvasWithColor(canvas, context); | |
| updateTextPositions(canvas); | |
| } | |
| function resizeCanvas(canvas) { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| function fillCanvasWithColor(canvas, context) { | |
| context.fillStyle = config.backgroundColor; | |
| context.fillRect(0, 0, canvas.width, canvas.height); | |
| } | |
| function updateTextPositions(canvas) { | |
| state.nameX = canvas.width - config.padding; | |
| state.nameY = canvas.height - config.padding * 2; | |
| state.versionY = canvas.height - config.padding; | |
| } | |
| function drawText(context, text, x, y, fontSize, textAlign, textBaseline) { | |
| context.font = `${fontSize} ${config.font}`; | |
| context.fillStyle = config.fontColor; | |
| context.textAlign = textAlign; | |
| context.textBaseline = textBaseline; | |
| context.fillText(text, x, y); | |
| } | |
| function formatFPS(fps) { | |
| return Math.round(fps); | |
| } | |
| function main() { | |
| document.body.style.margin = 0; | |
| document.body.style.padding = 0; | |
| const canvas = createCanvas(); | |
| const context = canvas.getContext('2d'); | |
| initializeCanvas(canvas, context); | |
| function tick(currentTime) { | |
| const deltaTime = (currentTime - state.lastFrameTime) / 1000; | |
| state.lastFrameTime = currentTime; | |
| const currentFPS = 1 / deltaTime; | |
| state.smoothFPS = lerp(state.smoothFPS, currentFPS, 0.1); | |
| context.clearRect(0, 0, canvas.width, canvas.height); | |
| fillCanvasWithColor(canvas, context); | |
| drawText(context, `${formatFPS(state.smoothFPS)} fps`, state.fpsX, state.fpsY, config.fpsFontSize, 'right', 'top'); | |
| drawText(context, config.name, state.nameX, state.nameY, config.fontSize, 'right', 'bottom'); | |
| drawText(context, config.version, state.nameX, state.versionY, config.versionFontSize, 'right', 'bottom'); | |
| requestAnimationFrame(tick); | |
| } | |
| window.addEventListener('resize', () => initializeCanvas(canvas, context)); | |
| requestAnimationFrame(tick); | |
| } | |
| window.addEventListener('DOMContentLoaded', main); | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> | |