Hugging Face's logo

Spaces:
p3nGu1nZz
/
plasma-arc
Running

App Files Community
p3nGu1nZz commited on
Commit
d4a90dc
•
1 Parent(s): 605271b

initialization bitches

Browse files
Files changed (1) hide show
  1. index.html +99 -18
index.html CHANGED
@@ -1,19 +1,100 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Plasma Arc Project</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
9
+ body { margin: 0; padding: 0; overflow: hidden; background-color: black; }
10
+ </style>
11
+ <script type="module">
12
+ const config = {
13
+ backgroundColor: 'black', font: 'Orbitron, monospace', fontSize: '16px', fontColor: 'white', name: 'Plasma Arc Project', version: 'v1.0.0',
14
+ fpsFontSize: '14px', versionFontSize: '10px', canvasId: 'plasma-arc-canvas', padding: 10
15
+ };
16
+
17
+ const state = {
18
+ fpsX: config.padding * 7, fpsY: config.padding, nameX: null, nameY: null, versionY: null, lastFrameTime: 0, fps: 0, smoothFPS: 0
19
+ };
20
+
21
+ function lerp(start, end, amount) {
22
+ return start + (end - start) * amount;
23
+ }
24
+
25
+ function createCanvas() {
26
+ const canvas = document.createElement('canvas');
27
+ canvas.id = config.canvasId;
28
+ document.body.appendChild(canvas);
29
+ return canvas;
30
+ }
31
+
32
+ function initializeCanvas(canvas, context) {
33
+ resizeCanvas(canvas);
34
+ fillCanvasWithColor(canvas, context);
35
+ updateTextPositions(canvas);
36
+ }
37
+
38
+ function resizeCanvas(canvas) {
39
+ canvas.width = window.innerWidth;
40
+ canvas.height = window.innerHeight;
41
+ }
42
+
43
+ function fillCanvasWithColor(canvas, context) {
44
+ context.fillStyle = config.backgroundColor;
45
+ context.fillRect(0, 0, canvas.width, canvas.height);
46
+ }
47
+
48
+ function updateTextPositions(canvas) {
49
+ state.nameX = canvas.width - config.padding;
50
+ state.nameY = canvas.height - config.padding * 2;
51
+ state.versionY = canvas.height - config.padding;
52
+ }
53
+
54
+ function drawText(context, text, x, y, fontSize, textAlign, textBaseline) {
55
+ context.font = `${fontSize} ${config.font}`;
56
+ context.fillStyle = config.fontColor;
57
+ context.textAlign = textAlign;
58
+ context.textBaseline = textBaseline;
59
+ context.fillText(text, x, y);
60
+ }
61
+
62
+ function formatFPS(fps) {
63
+ return Math.round(fps);
64
+ }
65
+
66
+ function main() {
67
+ document.body.style.margin = 0;
68
+ document.body.style.padding = 0;
69
+
70
+ const canvas = createCanvas();
71
+ const context = canvas.getContext('2d');
72
+ initializeCanvas(canvas, context);
73
+
74
+ function tick(currentTime) {
75
+ const deltaTime = (currentTime - state.lastFrameTime) / 1000;
76
+ state.lastFrameTime = currentTime;
77
+ const currentFPS = 1 / deltaTime;
78
+
79
+ state.smoothFPS = lerp(state.smoothFPS, currentFPS, 0.1);
80
+
81
+ context.clearRect(0, 0, canvas.width, canvas.height);
82
+ fillCanvasWithColor(canvas, context);
83
+
84
+ drawText(context, `${formatFPS(state.smoothFPS)} fps`, state.fpsX, state.fpsY, config.fpsFontSize, 'right', 'top');
85
+ drawText(context, config.name, state.nameX, state.nameY, config.fontSize, 'right', 'bottom');
86
+ drawText(context, config.version, state.nameX, state.versionY, config.versionFontSize, 'right', 'bottom');
87
+
88
+ requestAnimationFrame(tick);
89
+ }
90
+
91
+ window.addEventListener('resize', () => initializeCanvas(canvas, context));
92
+ requestAnimationFrame(tick);
93
+ }
94
+
95
+ window.addEventListener('DOMContentLoaded', main);
96
+ </script>
97
+ </head>
98
+ <body>
99
+ </body>
100
  </html>