Sweep: Improve the Readme.md

[MartinYe1234]

Checklist

• Modify README.md ✓ e8aaede Edit
• Running GitHub Actions for README.md ✓ Edit

[sweep-ai-deprecated]

🚀 Here's the PR! #7

See Sweep's progress at the progress dashboard!

⚡ Sweep Basic Tier: I'm using GPT-4. You have 5 GPT-4 tickets left for the month and 3 for the day. (tracking ID: a8afcf66b3)

For more GPT-4 tickets, visit our payment portal. For a one week free trial, try Sweep Pro (unlimited GPT-4 tickets).

---

Tip

I can email you next time I complete a pull request if you set up your email here!

---

Actions (click)

• ↻ Restart Sweep

GitHub Actions✓

Here are the GitHub Actions logs prior to making any changes:

Sandbox logs for 28855ae

Checking README.md for syntax errors... ✅ README.md has no syntax errors! 1/1 ✓

Checking README.md for syntax errors...
✅ README.md has no syntax errors!

Sandbox passed on the latest master, so sandbox checks will be enabled for this issue.

---

Step 1: 🔎 Searching

I found the following snippets in your repository. I will now analyze these snippets and come up with a plan.

Some code snippets I think are relevant in decreasing order of relevance (click to expand). If some file is missing from here, you can mention the path in the ticket description.

https://github.com/MartinYe1234/MartinYe1234.github.io/blob/28855ae432a594a53edb88de6f86d39c598cdcab/README.md#L1-L0

MartinYe1234.github.io/styles/snakeStyle.css

Lines 1 to 84 in 28855ae

	/* home logo */
	.homeLogo img {
	border: none;
	height: 128px;
	width: 128px;
	float: left;
	}
	body{
	background: url(../images/snakeBACK.png);
	}
	/* controls how the canvas looks */
	canvas {
	border: 3px solid black;
	background: url(../images/snakeBackground.png);
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 600px;
	height: 600px;
	}
	/* controls big banner at the very top of the page */
	header{
	background: url(../images/snakeGameBANNER.png);
	background-size: 100% 100%;
	width: 100%;
	height: 128px;
	}
	/* Intro screen background */
	.intro {
	display: none;
	position: absolute;
	z-index: 1;
	padding-top: 130px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.2);
	}
	.intro-content {
	background: url(../images/snakeIntro.png);
	background-size: 100% 100%;
	background-color: rgb(0, 200, 55);
	margin: auto;
	padding: 20px;
	border: 1px solid dimgrey;
	width: 600px;
	height: 600px;
	font-size: large;
	}
	.start{
	position: relative;
	top:530px;
	border: 5px solid rgb(31, 105, 51);
	background-color:rgb(0, 200, 55);
	padding: 16px 32px;
	float: right;
	font-size: large;
	}
	.start:hover{
	background-color:rgb(0, 150, 41);
	cursor: pointer;
	}
	.exit{
	position: relative;
	top:530px;
	border: 5px solid rgb(31, 105, 51);
	background-color:rgb(0, 200, 55);
	padding: 16px 32px;
	float:left;
	font-size: large;
	}
	.exit:hover{
	background-color:rgb(0, 150, 41);
	cursor: pointer;
	}
	*{
	font-family: Monospace;

MartinYe1234.github.io/js/snake.js

Lines 1 to 181 in 28855ae

	var canvas; // stores canvas
	var context; // stores context
	// split canvas up to a 24x24 grid, each containing the position and state of the grid
	// stored as [[x,y],state], where x and y is top left of grid
	// state -1 means empty, state 0 means food, state 1 means snake occupied
	var gameGrid = [];
	var eventQueue = [];
	var travelSpeed = 1; // speed at which snake moves is based on playerScore
	var foodImage = new Image(25, 25);
	var timeToMove = 1;
	var introToggled = false;
	//this is the snake
	class Snake {
	constructor(color, sideLength, gridX, gridY, velocity) {
	this.color = color;
	this.sideLength = sideLength;
	this.gridX = gridX;
	this.gridY = gridY;
	this.velocity = velocity; // velocity is a list [x,y], representing x and y components of the snakes velocity
	this.positioning = [
	[this.gridX, this.gridY]
	];
	}
	update() {
	if (timeToMove < 0) {
	timeToMove = 1;
	eventHandler(eventQueue.shift());
	let vx = this.velocity[0];
	let vy = -this.velocity[1]; // this is done so that a negative velocity will move snake down the screen
	//update our position
	let previousGrid = JSON.parse(JSON.stringify(this.positioning));
	let headX = previousGrid[0][0],
	headY = previousGrid[0][1]; // head of the snake
	headY += vy;
	headX += vx;
	// check for player crossing out side of edges
	if (headX > 23 || headX < 0 || headY < 0 || headY > 23) {
	restartGame();
	}
	if (this.positioning.length == 1) { // move the snake
	this.positioning[0] = [headX, headY];
	} else { // for all lengths greater than 1
	for (let i = 0; i < this.positioning.length; i++) { // update positioning
	if (i == 0) {
	this.positioning[0] = [headX, headY];
	} else {
	this.positioning[i] = [previousGrid[i - 1][0], previousGrid[i - 1][1]];
	}
	}
	}
	// check if the player dies, occurs when player strikes themselves
	if (this.positioning.length > 4) { //only possible when player is longer than 4
	let head = this.positioning[0];
	for (let i = 3; i < this.positioning.length; i++) {
	if (equals(head, this.positioning[i])) {
	restartGame();
	}
	}
	}
	}
	}
	draw(ctx) {
	ctx.fillStyle = this.color;
	for (let i = 0; i < this.positioning.length; i++) {
	var gridX = this.positioning[i][0],
	gridY = this.positioning[i][1];
	var x = gameGrid[gridX][gridY][0][0],
	y = gameGrid[gridX][gridY][0][1];
	ctx.fillRect(x, y, this.sideLength, this.sideLength);
	}
	}
	}
	class Food {
	constructor(gridX, gridY) {
	this.img = foodImage;
	this.gridX = gridX;
	this.gridY = gridY;
	}
	update(ctx) {
	let foodX = gameGrid[this.gridX][this.gridY][0][0],
	foodY = gameGrid[this.gridX][this.gridY][0][1]; // generate position to place food piece
	// draw food on canvas
	ctx.drawImage(food.img, foodX, foodY);
	}
	}
	// function used to initiliaze necessary items on page load
	function startGame() {
	canvas = document.getElementById("game"); // stores canvas
	context = canvas.getContext("2d"); // stores context
	interval = setInterval(draw, 20); // set the refresh rate of the canvas
	document.addEventListener('keydown', function(e) {
	eventQueue.push(e.key);
	}, false); // add event listners
	// create our game piece
	generateGrid();
	foodImage.src = "../images/snakeFood.png"; // load in images
	snake = new Snake('rgb(18,178,0)', 25, 11, 11, [0, 0]);
	food = new Food(genInt(), genInt());
	toggleIntro();
	}
	function restartGame(){ // after first respawn
	toggleIntro();
	snake = new Snake('rgb(18,178,0)', 25, 11, 11, [0, 0]);
	food = new Food(genInt(), genInt());
	}
	// generates a random integer between 0 and 23 inclusive
	function genInt() {
	var min = 0;
	var max = 23;
	return Math.floor(Math.random() * (max - min + 1) + min)
	}
	// handles all keyboard events
	function eventHandler(e) {
	if ((e == "w") && (snake.velocity[0] <= 0)) {
	snake.velocity = [-travelSpeed, 0]
	} // w key
	else if ((e == "s") && (snake.velocity[0] >= 0)) {
	snake.velocity = [travelSpeed, 0]
	} // s key
	else if ((e == "a") && (snake.velocity[1] >= 0)) {
	snake.velocity = [0, travelSpeed]
	} // a key
	else if ((e == "d") && (snake.velocity[1] <= 0)) {
	snake.velocity = [0, -travelSpeed]
	} // d key
	}
	function generateGrid() {
	for (let i = 0; i < 24; i++) {
	gameGrid[i] = [];
	for (let j = 0; j < 24; j++) {
	gameGrid[i][j] = [];
	gameGrid[i][j] = [
	[j * 25, i * 25], -1
	] // reversed so rows will be together
	}
	}
	}
	// our draw function that constantly updates our canvas
	function draw() {
	//clear screen everytime
	context.clearRect(0, 0, canvas.width, canvas.height);
	snake.draw(context);
	snake.update();
	food.update(context);
	updateGame(snake, food);
	}
	function equals(p1, p2) { // checks for collisions
	return JSON.stringify(p1) == JSON.stringify(p2);
	}
	function updateGame(player, food) { // checks for collisions
	// for movement of snake
	timeToMove -= 0.03 + player.positioning.length/100;
	// check if snake eats food
	if (equals(player.positioning[0], [food.gridX, food.gridY])) {
	food.gridX = genInt();
	food.gridY = genInt();
	let last = player.positioning[player.positioning.length - 1];
	player.positioning.push(last);
	}
	}
	function toggleIntro() { // used to start and end screens
	var startScreen = document.getElementById("intro");
	var score = snake.positioning.length-1;
	var message = "PREVIOUS SCORE: "+ score.toString(10);
	if (introToggled) {
	startScreen.style.display = "none";
	} else {
	startScreen.style.display = "block";
	}
	document.getElementById("score").innerHTML = message;

MartinYe1234.github.io/js/graphClasses.js

Lines 1 to 75 in 28855ae

	class Graph{
	constructor(){
	this.nodes = [];
	this.graph = {}; // this is the graph in adjacency list form
	this.edgeList = [];
	}
	addNode(node){
	// Adds a node to the graph
	this.graph[node.name] = [];
	this.nodes.push(node);
	}
	addEdge(edge){
	// Adds a bi-directional weighted edge
	let nodeU = edge.u.name, nodeV = edge.v.name;
	this.graph[nodeU].push([nodeV, edge.weight]);
	this.graph[nodeV].push([nodeU, edge.weight]);
	this.edgeList.push(edge);
	let temp_set = new Set(this.edgeList); // ensure no duplicate edges
	this.edgeList = Array.from(temp_set);
	}
	delNode(node){
	let nodes = this.nodes; // this is required because apparently you can't reference this. inside a foreach function
	let edgeList = this.edgeList;
	let graph = this.graph;
	let nodeIndex = this.nodes.indexOf(node); // remove node for nodes list
	nodes.splice(nodeIndex, 1);
	edgeList.forEach(function(edge){ // remove all edges with the node in it
	if((edge.u == node) || (edge.v == node)){
	let edgeIndex = edgeList.indexOf(edge);
	edgeList[edgeIndex] = -1;
	}
	});
	edgeList = edgeList.filter(function(edge){
	if(edge!=-1){
	return edge;
	}
	});
	this.edgeList = edgeList;
	graph = {}; // remove all mentions of node for the adjacency list, done by rebuilding it from scratch
	nodes.forEach(function(node){
	graph[node.name] = [];
	});
	edgeList.forEach(function(edge){
	let nodeU = edge.u.name, nodeV = edge.v.name;
	graph[nodeU].push([nodeV, edge.weight]);
	graph[nodeV].push([nodeU, edge.weight]);
	});
	}
	delEdge(edge){
	let nodeU = edge.u.name, nodeV = edge.v.name;
	let edgeIndex = this.edgeList.indexOf(edge); // delete from edgeList
	this.edgeList.splice(edgeIndex, 1);
	let index1 = this.graph[nodeU].indexOf([nodeV, edge.weight]); // delete from adjacency list
	this.graph[nodeU].splice(index1, 1)
	let index2 = this.graph[nodeV].indexOf([nodeU, edge.weight]);
	this.graph[nodeV].splice(index2, 1)
	}
	drawGraph(ctx){
	this.edgeList.forEach(function(edge){edge.draw(ctx)});
	this.nodes.forEach(function(node){node.draw(ctx)});
	}
	updateNodeStates(x, y){ // used for updating all node states after mouse click
	// returns whether or not a change occured in the states
	let somethingWasSelected = false;
	this.nodes.forEach(function(node){
	if(node.isSelected(x, y)){ // if the node was selected
	somethingWasSelected = true;
	if (mode != "addnode"){
	node.toggleState("selected");
	}
	}
	});
	return somethingWasSelected;
	}

MartinYe1234.github.io/js/graphInterface.js

Lines 1 to 201 in 28855ae

	var canvas;
	var context;
	var mode; // used to determine what event should happen when the user clicks on the screen
	var myGraph;
	var nodeName = 0;
	var colours = { // dictionary of colours to represent different the many different statuses of the nodes/edges
	unselectedInnerNode : 'rgb(0, 22, 121)',
	unselectedOuterNode : 'rgb(0, 12, 68)',
	unselectedEdge : 'rgb(0, 12, 68)',
	selectedInnerNode: 'rgb(158, 1, 1)',
	selectedOuterNode : 'rgb(100, 0, 0)',
	selectedEdge : 'rgb(100, 0, 0)',
	finalisedInnerNode : 'rgb(200, 92, 0)',
	finalisedOuterNode : 'rgb(181, 68, 0)',
	finalisedEdge : 'rgb(181, 68, 0)',
	startInner : 'rgb(9, 219, 65)',
	startOuter : 'rgb(5, 166, 48)',
	targetInner : 'rgb(150, 0, 224)',
	targetOuter : 'rgb(106, 0, 158)'
	};
	var primary = -1; // used for adding edges
	var secondary = -1;
	var targetNode = -1; // used for graph algorithms
	var startNode = -1;
	var selectedAlgorithm = "null";
	function initialiseScreen() {
	canvas = document.getElementById("screen");
	context = canvas.getContext("2d");
	interval = setInterval(draw, 50);
	context.canvas.width = window.innerWidth;
	context.canvas.height = window.innerHeight;
	myGraph = new Graph();
	let buttons = document.querySelectorAll('input');
	buttons.forEach(function(button){
	button.addEventListener('click', toggleMode, false);
	});
	canvas.addEventListener('click', canvasEvents, false);
	}
	// our draw function that constantly updates our canvas
	function draw() {
	//clear screen everytime
	context.clearRect(0, 0, canvas.width, canvas.height);
	if(mode == "run"){
	animateGraph(context, selectedAlgorithm);
	}
	else{
	myGraph.drawGraph(context);
	}
	}
	// used to handle button inputs
	function toggleMode(){
	if (this.value == "Add Node"){
	mode = "addnode";
	}
	else if (this.value == "Add Edge"){
	mode = "addedge";
	}
	else if (this.value == "Delete Edge"){
	mode = "deledge";
	}
	else if (this.value == "Delete Node"){
	mode = "delnode";
	}
	else if (this.value == "Select Start"){
	mode = "setstart";
	}
	else if (this.value == "Select Target"){
	mode = "settarget";
	}
	else if (this.value == "Reset"){
	initialiseScreen();
	}
	else if (this.value == "BFS"){
	selectedAlgorithm = "BFS";
	}
	else if (this.value == "DFS"){
	selectedAlgorithm = "DFS";
	}
	else if (this.value == "tobeadded"){
	selectedAlgorithm = "tobeadded";
	}
	else if (this.value == "Run"){
	mode = "run";
	}
	}
	// determine what happens everytime the user clicks within the canvas
	function canvasEvents(e){
	let mouseX = e.clientX - canvas.offsetLeft, mouseY = e.clientY - canvas.offsetTop;
	if(mode == "addnode"){
	canvasAddNode(myGraph, mouseX, mouseY);
	}
	else if(mode == "addedge"){
	canvasAddEdge(myGraph, mouseX, mouseY);
	}
	else if(mode == "delnode"){
	canvasDelNode(myGraph, mouseX, mouseY);
	}
	else if(mode == "deledge"){
	canvasDelEdge(myGraph, mouseX, mouseY);
	}
	else if(mode == "setstart"){
	canvasSetStart(myGraph, mouseX, mouseY);
	}
	else if(mode == "settarget"){
	canvasSetTarget(myGraph, mouseX, mouseY);
	}
	}
	/*
	Helper Functions for canvasEvents
	*/
	function canvasAddNode(graph, x, y){
	if(!graph.updateNodeStates(x, y)){ // when adding nodes, they can not be within each other
	let newNode = new Node(nodeName, x, y);
	graph.addNode(newNode);
	nodeName++;
	};
	}
	function canvasAddEdge(graph, x, y){
	if(graph.updateNodeStates(x, y)){ // a node must be selected
	graph.nodes.forEach(function(node){
	if(primary == -1 && node.state == "selected"){
	primary = node;
	}
	else if(primary != -1 && primary != node && node.state == "selected"){
	secondary = node;
	}
	if (primary != -1 && secondary != -1){ //add the edge and reset primary and secondary
	newEdge = new Edge(primary, secondary)
	if (graph.edgeList.indexOf(newEdge) == -1){
	graph.addEdge(newEdge);
	} // no duplicate edges allowed
	primary.toggleState("unselected");
	secondary.toggleState("unselected");
	primary = -1;
	secondary = -1;
	}
	});// loop through each node in all nodes of the graph
	}
	}
	function canvasDelNode(graph, x, y){
	if(graph.updateNodeStates(x, y)){
	graph.nodes.forEach(function(node){
	if(node.state == "selected"){
	graph.delNode(node);
	}
	});
	}
	}
	function canvasDelEdge(graph, x, y){
	if(graph.updateNodeStates(x, y)){
	graph.nodes.forEach(function(node){
	if(primary == -1 && node.state == "selected"){
	primary = node;
	}
	else if(primary != -1 && primary != node && node.state == "selected"){
	secondary = node;
	}
	if (primary != -1 && secondary != -1){ //add the edge and reset primary and secondary
	edge=1;
	graph.edgeList.forEach(function(edge){
	if(((edge.u==primary)&&(edge.v==secondary))||((edge.u==secondary)&&(edge.v==primary))){
	graph.delEdge(edge);
	}
	});
	primary.toggleState("unselected");
	secondary.toggleState("unselected");
	primary = -1;
	secondary = -1;
	}
	});// loop through each node in all nodes of the graph
	}
	}
	function canvasSetStart(graph, x, y){
	if(graph.updateNodeStates(x, y)){ // if a node was selected
	graph.nodes.forEach(function(node){
	if(node.state == "start"){ // only 1 start node allowed
	node.toggleState("unselected");
	}
	if(node.state == "selected"){
	node.toggleState("start");
	startNode = node;
	}
	});
	}
	}
	function canvasSetTarget(graph, x, y){
	if(graph.updateNodeStates(x, y)){ // if a node was selected
	graph.nodes.forEach(function(node){
	if(node.state == "target"){ // only 1 target node allowed
	node.toggleState("unselected");
	}
	if(node.state == "selected"){
	node.toggleState("target");
	targetNode = node;
	}
	});

---

Step 2: ⌨️ Coding

• Modify README.md ✓ e8aaede Edit

Modify README.md with contents:
• Replace the current content of the README.md file with a title for the project. This could be something like "# Snake Game with Graph Interface".
• Add a brief description of the project. This should explain that the project is a snake game that also includes graph classes and a graph interface.
• Add a section on how to use the project. This should include instructions on how to run the game, as well as how to use the graph interface.
• Add a section on the different files in the project. This should explain what each file does. For example, the snake.js file contains the main game logic, the graphClasses.js file contains classes related to graphs, the graphInterface.js file contains functions for interacting with the graph, and the snakeStyle.css file contains the CSS for the game.
• Add a section on any dependencies or requirements for the project. If there are any specific libraries or frameworks that need to be installed, this should be mentioned here.
• Add any other important information that a user might need to know. This could include any known issues, future plans for the project, or how to contribute.

--- 
+++ 
@@ -1 +1,22 @@
-test
+# Snake Game with Graph Interface
+
+This project is a classic snake game enhanced with graph classes and a graph interface. The snake game is built with JavaScript and allows for a traditional gaming experience, while the graph functionality adds an educational twist allowing users to interact with graph data structures.
+
+## How to Use
+
+To run the snake game, simply open the `index.html` file in a web browser and use the arrow keys to control the snake. To interact with the graph interface, switch to the graph mode within the game or open the graph interface HTML file if available.
+
+## File Descriptions
+
+- `snake.js`: Contains the main game logic for the snake game.
+- `graphClasses.js`: Defines classes for graph data structures.
+- `graphInterface.js`: Provides functions for user interaction with the graph.
+- `snakeStyle.css`: Contains styles for the snake game.
+
+## Dependencies
+
+This project uses vanilla JavaScript and does not require any additional libraries or frameworks to be installed.
+
+## Additional Information
+
+Please note that the project is a work in progress and may contain bugs or incomplete features. Future plans include adding more graph algorithms and enhancing the game's UI. Contributions to the project are welcome; please submit issues or pull requests through GitHub.

• Running GitHub Actions for README.md ✓ Edit

Check README.md with contents:

Ran GitHub Actions for e8aaede52b893ea27133bf1d0967cdf0fb3d896f:

---

Step 3: 🔁 Code Review

I have finished reviewing the code for completeness. I did not find errors for sweep/improve_the_readmemd.

---

🎉 Latest improvements to Sweep:

• We just released a dashboard to track Sweep's progress on your issue in real-time, showing every stage of the process – from search to planning and coding.
• Sweep uses OpenAI's latest Assistant API to plan code changes and modify code! This is 3x faster and significantly more reliable as it allows Sweep to edit code and validate the changes in tight iterations, the same way as a human would.
• Try using the GitHub issues extension to create Sweep issues directly from your editor! GitHub Issues and Pull Requests.

---

💡 To recreate the pull request edit the issue title or description. To tweak the pull request, leave a comment on the pull request.
^{Join Our Discord}