Initial Commit

2025-09-30 18:47:23 +10:00
commit fc9a447257
4 changed files with 111 additions and 0 deletions
--- a/app.py
+++ b/app.py
@@ -0,0 +1,35 @@
+import json
+from operator import mod
+from tokenize import String
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+
+player1 = {"name": "Player 1", "xpos": 1, "ypos": 1}
+
+app = Flask(__name__)
+CORS(app)
+@app.route('/api/send', methods=['POST'])
+
+def receive_data():
+    data = request.get_json()
+    # Input data is the form [reset(bool), isPressed(json)]
+
+    # Handle Resetting
+    if (data['reset']):
+        player1['xpos'] = 0
+        player1['ypos'] = 0
+    
+    # Handle key presses
+    if (data['keyDown']['ArrowUp'] == True):
+        player1['ypos'] -= 1
+    if (data['keyDown']['ArrowDown'] == True):
+        player1['ypos'] += 1
+    if (data['keyDown']['ArrowRight'] == True):
+        player1['xpos'] += 1
+    if (data['keyDown']['ArrowLeft'] == True):
+        player1['xpos'] -= 1
+    
+    return jsonify(player1)
+
+if __name__ == '__main__':
+    app.run(debug=True)
--- a/index.css
+++ b/index.css
@@ -0,0 +1,3 @@
+#canvas {
+    border: 1px solid black;
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,12 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="index.css">
+    </head>
+    
+    <body>
+        <p id="response"></p>
+        <canvas id="canvas" width="480" height="270"></canvas>
+    </body>
+    
+    <script src="index.js"></script>
+</html>
--- a/index.js
+++ b/index.js
@@ -0,0 +1,61 @@
+// Send data to backend function
+function sendData(data) {
+      fetch('http://localhost:5000/api/send', {
+         method: 'POST',
+         headers: {
+           'Content-Type': 'application/json'
+         },
+         body: JSON.stringify(data)
+      })
+      .then(res => res.json())
+      .then(data => {
+        ctx.clearRect(0, 0, 480, 270);
+        ctx.beginPath();
+        ctx.arc(data.xpos, data.ypos, 10, 0, Math.PI * 2);
+        ctx.fill();
+        reset = false
+      })
+      .catch(err => console.error('Error:', err));
+    }
+
+// Set up canvas    
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d'); // 2D context
+
+// Track key presses
+var keyDown = {
+  "ArrowUp": false,
+  "ArrowDown": false,
+  "ArrowRight": false,
+  "ArrowLeft": false,
+}
+
+document.addEventListener('keydown', function (e) {
+  let f = e.key
+  if (f === "ArrowUp") {
+    keyDown.ArrowUp = true;
+  } else if (f === "ArrowDown") {
+    keyDown.ArrowDown = true;
+  } else if (f === "ArrowRight") {
+    keyDown.ArrowRight = true;
+  } else if (f === "ArrowLeft") {
+    keyDown.ArrowLeft = true;
+  }
+})
+
+document.addEventListener('keyup', function (e) {
+  let f = e.key
+  if (f === "ArrowUp") {
+    keyDown.ArrowUp = false;
+  } else if (f === "ArrowDown") {
+    keyDown.ArrowDown = false;
+  } else if (f === "ArrowRight") {
+    keyDown.ArrowRight = false;
+  } else if (f === "ArrowLeft") {
+    keyDown.ArrowLeft = false;
+  }
+})
+
+// Start Game
+var reset = true
+setInterval(() => sendData({reset, keyDown}), 16);