Hugging Face's logo

Spaces:
failfast
/
2D-GameCreator
Running

App Files Community
2
NERDDISCO commited on
Commit
c976217
•
1 Parent(s): 884bca0

feat: added gameLoop that uses delta to draw

Browse files
Files changed (3) hide show
  1. public/js/utils.js +40 -2
  2. src/constants/baseGame.ts +5 -10
  3. src/utils/share.tsx +54 -29
public/js/utils.js CHANGED
@@ -9,6 +9,44 @@ function handleResize() {
9
  handleResize();
10
  window.addEventListener("resize", handleResize, { passive: true });
11
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  const clients = {
13
  host: "__ESDEKA::host__",
14
  guest: "__ESDEKA::guest__",
@@ -52,12 +90,12 @@ function handleTemplate(template) {
52
  Function("Template", `${template}`)();
53
  }
54
 
55
- subscribe("2DGameGPT", event => {
56
  const { action } = event.data;
57
  switch (action.type) {
58
  case "call":
59
  host.current = event.source;
60
- answer(event.source, "2DGameGPT");
61
  handleTemplate(action.payload.template);
62
  break;
63
  case "broadcast":
 
9
  handleResize();
10
  window.addEventListener("resize", handleResize, { passive: true });
11
 
12
+ function createGameLoop(callback) {
13
+ let lastTimestamp;
14
+
15
+ function gameLoop(timestamp) {
16
+ if (lastTimestamp) {
17
+ const delta = timestamp - lastTimestamp;
18
+
19
+ if (delta >= 1000 / 60) {
20
+ lastTimestamp = timestamp;
21
+ callback(delta);
22
+ }
23
+ } else {
24
+ lastTimestamp = timestamp;
25
+ }
26
+ requestAnimationFrame(gameLoop);
27
+ }
28
+
29
+ return gameLoop;
30
+ }
31
+
32
+ function downloadCanvasImage() {
33
+ // Get the canvas element
34
+ const canvas = document.getElementById('canvas');
35
+
36
+ // Create a new 'a' element
37
+ let link = document.createElement('a');
38
+
39
+ // Set the download attribute with a file name
40
+ link.download = 'canvas_image.png';
41
+
42
+ // Get the data URL for the canvas
43
+ link.href = canvas.toDataURL();
44
+
45
+ // Trigger the click event on the link
46
+ link.click();
47
+ }
48
+
49
+
50
  const clients = {
51
  host: "__ESDEKA::host__",
52
  guest: "__ESDEKA::guest__",
 
90
  Function("Template", `${template}`)();
91
  }
92
 
93
+ subscribe("2DGameCreator", event => {
94
  const { action } = event.data;
95
  switch (action.type) {
96
  case "call":
97
  host.current = event.source;
98
+ answer(event.source, "2DGameCreator");
99
  handleTemplate(action.payload.template);
100
  break;
101
  case "broadcast":
src/constants/baseGame.ts CHANGED
@@ -2,17 +2,12 @@ export const baseGame = {
2
  default: `const canvas = document.querySelector('canvas');
3
  canvas.style.backgroundColor = '#fff';
4
  const ctx = canvas.getContext('2d');
5
- const w = canvas.width;
6
- const h = canvas.height;
7
-
8
- function draw(){
9
- const FPS = 60;
10
 
 
11
  // TODO: Add drawing logic here
12
-
13
- // NEVER stop the loop
14
- setTimeout(requestAnimationFrame(draw),1000/FPS)
15
  }
16
- draw();
17
- `.trim(),
 
 
18
  };
 
2
  default: `const canvas = document.querySelector('canvas');
3
  canvas.style.backgroundColor = '#fff';
4
  const ctx = canvas.getContext('2d');
 
 
 
 
 
5
 
6
+ function draw(delta) {
7
  // TODO: Add drawing logic here
 
 
 
8
  }
9
+
10
+ // NEVER stop the gameloop
11
+ requestAnimationFrame(createGameLoop(draw));
12
+ `.trim(),
13
  };
src/utils/share.tsx CHANGED
@@ -3,7 +3,7 @@ import { renderToString } from "react-dom/server";
3
  export const wrappers: Record<"js" | "html" | "css" | "miniHtml", (content?: string) => string> = {
4
  html(content) {
5
  return `<!DOCTYPE html>
6
- <!-- generated with https://failfa.st -->
7
  ${renderToString(
8
  <html lang="en">
9
  <head>
@@ -21,7 +21,7 @@ ${renderToString(
21
  },
22
  miniHtml() {
23
  return `
24
- <!-- generated with https://failfa.st -->
25
  ${renderToString(
26
  <>
27
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
@@ -32,7 +32,8 @@ ${renderToString(
32
  },
33
  css() {
34
  return `/**
35
- * generated with https://failfa.st
 
36
  */
37
 
38
  * {
@@ -44,36 +45,14 @@ html, body {
44
  height: 100%;
45
  width: 100%;
46
  overflow: hidden;
47
- background: #a9a9a9;
48
- }
49
- .failfast {
50
- position: fixed;
51
- display: "flex";
52
- align-items: center;
53
- align-content: center;
54
- z-index: 1;
55
- top: 0;
56
- left: 0;
57
- margin: 8px;
58
- padding: 6px 16px;
59
- background: black;
60
- color: white;
61
- text-decoration: none;
62
- border-radius: 4px;
63
- font-family: sans-serif;
64
- }
65
- .failfast svg {
66
- height: 1em;
67
- width: 1em;
68
- font-size: 24px;
69
- margin: 0 0 -4px 4px;
70
  }
71
  `;
72
  },
73
  js(content) {
74
  return `
75
  /**
76
- * generated with https://failfa.st
 
77
  */
78
 
79
 
@@ -86,7 +65,7 @@ import confetti from "https://cdn.skypack.dev/[email protected]";
86
  /**
87
  * Helper to handle the resize of the window > canvas automatically
88
  */
89
- function __2DGameGPT__ResizeHelper(){
90
  const _canvas = document.querySelector("canvas")
91
  _canvas.width = window.innerWidth;
92
  _canvas.height = window.innerHeight;
@@ -100,7 +79,53 @@ function __2DGameGPT__ResizeHelper(){
100
  handleResize();
101
  window.addEventListener("resize", handleResize, { passive: true });
102
  }
103
- __2DGameGPT__ResizeHelper()
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
104
 
105
  /**
106
  * Generated 2D game
 
3
  export const wrappers: Record<"js" | "html" | "css" | "miniHtml", (content?: string) => string> = {
4
  html(content) {
5
  return `<!DOCTYPE html>
6
+ <!-- generated with https://huggingface.co/spaces/failfast/2D-GameCreator by https://failfa.st -->
7
  ${renderToString(
8
  <html lang="en">
9
  <head>
 
21
  },
22
  miniHtml() {
23
  return `
24
+ <!-- generated with https://huggingface.co/spaces/failfast/2D-GameCreator by https://failfa.st -->
25
  ${renderToString(
26
  <>
27
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
 
32
  },
33
  css() {
34
  return `/**
35
+ * generated with https://huggingface.co/spaces/failfast/2D-GameCreator
36
+ * by https://failfa.st
37
  */
38
 
39
  * {
 
45
  height: 100%;
46
  width: 100%;
47
  overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  }
49
  `;
50
  },
51
  js(content) {
52
  return `
53
  /**
54
+ * generated with https://huggingface.co/spaces/failfast/2D-GameCreator
55
+ * by https://failfa.st
56
  */
57
 
58
 
 
65
  /**
66
  * Helper to handle the resize of the window > canvas automatically
67
  */
68
+ function __2DGameCreator__ResizeHelper(){
69
  const _canvas = document.querySelector("canvas")
70
  _canvas.width = window.innerWidth;
71
  _canvas.height = window.innerHeight;
 
79
  handleResize();
80
  window.addEventListener("resize", handleResize, { passive: true });
81
  }
82
+ __2DGameCreator__ResizeHelper()
83
+
84
+ function __2DGameCreator__downloadCanvasImage() {
85
+ // Get the canvas element
86
+ const canvas = document.getElementById('canvas');
87
+
88
+ // Create a new 'a' element
89
+ let link = document.createElement('a');
90
+
91
+ // Set the download attribute with a file name
92
+ link.download = 'canvas_image.png';
93
+
94
+ // Get the data URL for the canvas
95
+ link.href = canvas.toDataURL();
96
+
97
+ // Trigger the click event on the link
98
+ link.click();
99
+ }
100
+
101
+ // Uncomment if you want to take screenshots of the canvas
102
+ /*document.addEventListener("keydown", (e) => {
103
+ if (e.isComposing || e.code === "KeyS") {
104
+ __2DGameCreator__downloadCanvasImage();
105
+ return;
106
+ }
107
+ });*/
108
+
109
+ function createGameLoop(callback) {
110
+ let lastTimestamp;
111
+
112
+ function gameLoop(timestamp) {
113
+ if (lastTimestamp) {
114
+ const delta = timestamp - lastTimestamp;
115
+
116
+ if (delta >= 1000 / 60) {
117
+ lastTimestamp = timestamp;
118
+ callback(delta);
119
+ }
120
+ } else {
121
+ lastTimestamp = timestamp;
122
+ }
123
+ requestAnimationFrame(gameLoop);
124
+ }
125
+
126
+ return gameLoop;
127
+ }
128
+
129
 
130
  /**
131
  * Generated 2D game