Pong Duel: A Real-time Battle

{"name":"Jippity Multiplayer Pong","description":"Multiplayer pong, host or join a game!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/gp5avuh0ytkds94hcevy","view_count":5,"fork_count":0,"expires_at":null,"created_at":"2025-01-11T00:13:35.364230Z","updated_at":"2025-01-11T00:13:35.364232Z","user_id":70,"status":"PRIVATE","parent_id":5470,"id":5472,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":500,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"// Retrieve Ably API key from localStorage\nconst ablyApiKey = localStorage.getItem('ablyApiKey');\n\n// Ably setup\nconst ably = new Ably.Realtime(ablyApiKey);\n\n// Global variables for paddles and ball\nlet leftPaddle;\n\nlet rightPaddle;\n\nlet ball;\n\nlet isHost = false;\n\n// Flag to determine if this player is the host\nlet gameCode;\n\nconst channel = ably.channels.get('pong-duel');\n\nlet gameInitialized = false;\n\nlet gameState = 'start';\n\nlet gameCodeInput;\n\n// Global variable to act as a timer for publishing\nlet lastPublishTime = 0;\n\nfunction setup() {\n createCanvas(800, 600);\n background(135, 206, 235); // Sky blue background\n\n // Create an input field for the game code\n gameCodeInput = createInput('');\n gameCodeInput.position(width / 2 - 100, height / 2 + 20); // Position the input field\n gameCodeInput.size(250); // Set the size of the input field\n gameCodeInput.attribute('placeholder', 'Enter Join Code'); // Add placeholder text\n gameCodeInput.hide(); // Hide the input field initially\n}\n\nfunction draw() {\n if (gameState === 'start') {\n drawStartScreen(); // Show the start screen\n } else if (gameState === 'host') {\n drawHostScreen(); // Show the host screen with game code and start button\n } else if (gameState === 'game') {\n drawGame(); // Show the game\n }\n}\n\nclass Paddle {\n constructor(x, y, channel, playerId) {\n this.x = x;\n this.y = y;\n this.targetY = y;\n this.oldY = y;\n this.width = 20;\n this.height = 100;\n this.speed = 5;\n this.channel = channel;\n this.playerId = playerId;\n this.updateInterval = 50; // Time between updates in milliseconds\n this.timeSinceLastUpdate = 0;\n }\n\n display() {\n rect(this.x, this.y, this.width, this.height);\n }\n\n move(upKey, downKey) {\n let moved = false;\n\n if ((this.playerId === 'player1' && isHost) || (this.playerId === 'player2' && !isHost)) {\n if (keyIsDown(upKey) && this.y > 0) {\n this.y -= this.speed;\n moved = true;\n } else if (keyIsDown(downKey) && this.y < height - this.height) {\n this.y += this.speed;\n moved = true;\n }\n\n if (millis() - lastPublishTime > this.updateInterval) {\n if (moved) {\n this.channel.publish('paddleMove', { y: this.y, playerId: this.playerId });\n }\n }\n } else {\n // Smoother linear interpolation for guest\n this.timeSinceLastUpdate += deltaTime;\n let lerpFactor = min(this.timeSinceLastUpdate / this.updateInterval, 1);\n this.y = lerp(this.oldY, this.targetY, lerpFactor);\n }\n }\n}\n\nclass Ball {\n constructor() {\n this.x = 400;\n this.y = 300;\n this.radius = 15;\n this.speedX = 4;\n this.speedY = 4;\n this.targetX = 400;\n this.targetY = 300;\n this.oldX = 400;\n this.oldY = 300;\n this.updateInterval = 50; // Time between updates in milliseconds\n this.timeSinceLastUpdate = 0;\n }\n\n display() {\n ellipse(this.x, this.y, this.radius * 2, this.radius * 2);\n }\n\n move() {\n if (isHost) {\n this.x += this.speedX;\n this.y += this.speedY;\n\n // Ball collision with top and bottom walls\n if (this.y - this.radius <= 0 || this.y + this.radius >= height) {\n this.speedY *= -1;\n }\n\n // Improved collision detection with left paddle\n if (this.x - this.radius <= leftPaddle.x + leftPaddle.width &&\n this.x > leftPaddle.x &&\n this.y >= leftPaddle.y && this.y <= leftPaddle.y + leftPaddle.height) {\n this.speedX *= -1;\n this.x = leftPaddle.x + leftPaddle.width + this.radius; // Adjust position to prevent sticking\n }\n\n // Improved collision detection with right paddle\n if (this.x + this.radius >= rightPaddle.x &&\n this.x < rightPaddle.x + rightPaddle.width &&\n this.y >= rightPaddle.y && this.y <= rightPaddle.y + rightPaddle.height) {\n this.speedX *= -1;\n this.x = rightPaddle.x - this.radius; // Adjust position to prevent sticking\n }\n\n // Ball collision with left and right walls\n if (this.x - this.radius <= 0 || this.x + this.radius >= width) {\n // Reset ball to the center\n this.x = width / 2;\n this.y = height / 2;\n this.speedX *= -1; // Change direction\n }\n\n // Publish ball position every 50ms\n if (millis() - lastPublishTime > this.updateInterval) {\n channel.publish('ballMove', { x: this.x, y: this.y });\n lastPublishTime = millis();\n }\n } else {\n // Smoother linear interpolation for guest\n this.timeSinceLastUpdate += deltaTime;\n let lerpFactor = min(this.timeSinceLastUpdate / this.updateInterval, 1);\n this.x = lerp(this.oldX, this.targetX, lerpFactor);\n this.y = lerp(this.oldY, this.targetY, lerpFactor);\n }\n }\n\n updatePosition(data) {\n this.oldX = this.targetX;\n this.oldY = this.targetY;\n this.targetX = data.x;\n this.targetY = data.y;\n this.timeSinceLastUpdate = 0;\n }\n}\n\n// Check if the key is available\nif (!ablyApiKey) {\n alert(\"Ably API key not found in localStorage. Please set it before starting the game.\");\n}\n\n// Show join input\nfunction showJoinInput() {\n // Show the input for the game code\n}\n\n// Generate a simple 6-character game code\nfunction generateGameCode() {\n return Math.random().toString(36).substr(2, 6).toUpperCase();\n}\n\n// Draw the host screen\nfunction drawHostScreen() {\n background(135, 206, 235); // Sky blue background\n textAlign(CENTER);\n textSize(32);\n fill(255); // White text\n text(\"Game Code: \" + gameCode, width / 2, height / 2 - 20);\n text(\"Press 'Start Game' to begin!\", width / 2, height / 2 + 20);\n}\n\n// Modify the mousePressed function to handle joining a game\nfunction mousePressed() {\n if (gameState === 'start') {\n if (mouseX > width / 2 - 100 && mouseX < width / 2 + 100 && mouseY > height / 2 - 60 && mouseY < height / 2 - 20) {\n hostGame(); // Call the host game function\n } else if (mouseX > width / 2 - 100 && mouseX < width / 2 + 100 && mouseY > height / 2 + 20 && mouseY < height / 2 + 60) {\n gameCodeInput.show(); // Show the input field for the game code\n gameCodeInput.value(''); // Clear the input field\n gameState = 'join'; // Change state to joining\n }\n } else if (gameState === 'join') {\n joinGame(); // Call the join game function when the input is used\n }\n}\n\n// Join game function\nfunction joinGame() {\n gameCode = gameCodeInput.value(); // Get the value from the input field\n\n // Check if the game code is valid (this is optional)\n if (gameCode) {\n initializeGame(); // Start the game\n gameState = 'game'; // Change state to game\n gameCodeInput.hide();\n } else {\n alert(\"Please enter a valid game code.\"); // Alert if the game code is invalid\n }\n}\n\nfunction drawGame() {\n background(135, 206, 235);\n\n if (leftPaddle && rightPaddle && ball) {\n leftPaddle.display();\n leftPaddle.move(87, 83);\n\n rightPaddle.display();\n rightPaddle.move(87, 83);\n\n ball.display();\n ball.move();\n }\n}\n\nfunction drawStartScreen() {\n if (gameState === 'game') {\n return; // If the game has started, do not draw the start screen\n }\n\n background(135, 206, 235); // Sky blue background\n textAlign(CENTER);\n textSize(48);\n fill(255); // White text\n text(\"Pong Duel\", width / 2, height / 4);\n\n textSize(32);\n text(\"Host Game\", width / 2, height / 2 - 20);\n text(\"Join Game\", width / 2, height / 2 + 40);\n}\n\n// Start game function\nfunction startGame() {\n if (gameCode) { // Ensure game code is valid\n initializeGame(); // Start the game\n document.getElementById('startGameButton').style.display = 'none'; // Hide the start game button\n gameCodeInput.hide(); // Hide the game code input field\n } else {\n alert(\"Game code is invalid. Please try again.\"); // Alert if the game code is invalid\n }\n}\n\nfunction initializeGame() {\n leftPaddle = new Paddle(50, height / 2 - 50, channel, 'player1');\n rightPaddle = new Paddle(width - 70, height / 2 - 50, channel, 'player2');\n ball = new Ball();\n\n channel.subscribe('paddleMove', (message) => {\n if (message.data.playerId === 'player1' && !isHost) {\n leftPaddle.oldY = leftPaddle.targetY;\n leftPaddle.targetY = message.data.y;\n leftPaddle.timeSinceLastUpdate = 0;\n } else if (message.data.playerId === 'player2' && isHost) {\n rightPaddle.oldY = rightPaddle.targetY;\n rightPaddle.targetY = message.data.y;\n rightPaddle.timeSinceLastUpdate = 0;\n }\n });\n\n if (!isHost) {\n channel.subscribe('ballMove', (message) => {\n ball.updatePosition(message.data);\n });\n }\n\n gameState = 'game';\n}\n\nfunction copyInvite() {\n const inviteText = `Play Jippity Pong Multiplayer with me! Go to https://jippity.pro/projects/5471, enter this API key [${ablyApiKey}], hit start game and use this join code: [${gameCode}]`;\n navigator.clipboard.writeText(inviteText).then(() => {\n alert(\"Invite copied to clipboard! Send it to a friend!\");\n }, () => {\n alert(\"Failed to copy invite. Please try again.\");\n });\n}\n\n// Host game function\nfunction hostGame() {\n gameCode = generateGameCode(); // Generate a new game code\n console.log(`Game Code: ${gameCode}`); // Log the game code for sharing\n isHost = true; // Set this player as the host\n gameState = 'host'; // Change state to show host controls\n document.getElementById('copyInviteButton').style.display = 'block'; // Show the copy invite button\n document.getElementById('startGameButton').style.display = 'block'; // Show the start game button\n}\n\n","style.css":"body {\n margin: 0;\n}\n\ncanvas {\n display: block;\n}\n\ninput {\n font-size: 20px;\n /* Increase font size for better visibility */\n padding: 10px;\n /* Add padding for a nicer look */\n border-radius: 5px;\n /* Rounded corners */\n border: 2px solid #ccc;\n /* Border style */\n}","index.html":"\n\n\n\n \n \n Pong Duel: A Real-time Battle\n \n \n \n\n\n\n \n \n \n\n\n"},"chat_history":[{"message":"improve the ui of the join code input, it should say 'enter join code' before you start typing.","project_id":5472,"created_at":"2025-01-11T00:00:56.889907Z","output_tokens":null,"sender":"human","code_id":201934,"deleted":0,"input_tokens":null,"id":102053},{"message":"

\n# Reasoning\nThe user wants to improve the user interface by adding a placeholder to the input field for the game join code. This is a simple HTML change and is within the project's scope.\n

\n\n

\n# Answer: \n

\n\nAdding a placeholder text to the input field is definitely possible and will enhance the UI.\n\nCould you confirm if you'd like any other styling changes apart from adding the placeholder text? For instance, do you want to change the color or size of the input field?","project_id":5472,"created_at":"2025-01-11T00:00:56.897582Z","output_tokens":134,"sender":"ai","code_id":201934,"deleted":0,"input_tokens":5091,"id":102054},{"message":"bigger","project_id":5472,"created_at":"2025-01-11T00:01:15.830707Z","output_tokens":null,"sender":"human","code_id":201934,"deleted":0,"input_tokens":null,"id":102055},{"message":"

\n# Reasoning\nThe user wants to enhance the UI by adding a placeholder text and increasing the size of the input field for the game join code. This involves modifying the JavaScript and CSS to include a placeholder and adjust the styling of the input.\n

\n\n

\n# Answer: \n

\n\nWe can add a placeholder to the input field and increase its size to improve the UI. Let's make these changes.\n\n### Step 1: Update the JavaScript to include a placeholder\n\nYou will need to modify the `setup` function in your `script.js` file to add a placeholder text to the input field.\n\n```javascript\nfunction setup() {\n createCanvas(800, 600);\n background(135, 206, 235); // Sky blue background\n\n // Create an input field for the game code\n gameCodeInput = createInput('');\n gameCodeInput.position(width / 2 - 100, height / 2 + 20); // Position the input field\n gameCodeInput.size(250); // Set the size of the input field\n gameCodeInput.attribute('placeholder', 'Enter Join Code'); // Add placeholder text\n gameCodeInput.hide(); // Hide the input field initially\n}\n```\n\n- **Explanation:**\n - Updated the `size` method to increase the width of the input field to `250`.\n - Used the `attribute` method to add a placeholder text \"Enter Join Code\" to the input field.\n\n### Step 2: Update the CSS to adjust styling\n\nIf you want to further adjust the styling, you can add custom styles in your `style.css` file. Here is an example:\n\n```css\nbody { \n margin: 0; \n} \n\ncanvas { \n display: block; \n}\n\ninput {\n font-size: 20px; /* Increase font size for better visibility */\n padding: 10px; /* Add padding for a nicer look */\n border-radius: 5px; /* Rounded corners */\n border: 2px solid #ccc; /* Border style */\n}\n```\n\n- **Explanation:**\n - Increased the `font-size` for better visibility.\n - Added `padding` to give a nicer look to the input field.\n - Used `border-radius` for rounded corners and `border` for styling.\n\nIf you'd like any additional changes, let me know!","project_id":5472,"created_at":"2025-01-11T00:01:15.839035Z","output_tokens":511,"sender":"ai","code_id":201934,"deleted":0,"input_tokens":5070,"id":102056},{"message":"

Add your new assets to the code

\n\n```javascript\nfunction preload() {\n\n\tcoverimg = loadImage(\"@asset('coverimg')\");\n}\n```","project_id":5472,"created_at":"2025-01-11T00:02:29.215208Z","output_tokens":null,"sender":"script","code_id":201937,"deleted":0,"input_tokens":null,"id":102057}],"assets":[{"project_id":5472,"creator":null,"cloudinary_id":"gp5avuh0ytkds94hcevy","deleted":false,"id":57681,"created_at":"2025-01-11T00:02:28.846141Z","name":"coverimg","resource_type":"image","tags":null}],"messages_sent":8,"comments":[],"steps":[]}