Final submission

.glitch-assets

@@ -0,0 +1,26 @@
+{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"}
+{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"}
+{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"}
+{"uuid":"adSBq97hhhpFNUna","deleted":true}
+{"uuid":"adSBq97hhhpFNUnb","deleted":true}
+{"uuid":"adSBq97hhhpFNUnc","deleted":true}
+{"name":"favicon-32.png","date":"2022-09-21T02:28:14.675Z","url":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-32.png","type":"image/png","size":1252,"imageWidth":32,"imageHeight":32,"thumbnail":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-32.png","thumbnailWidth":32,"thumbnailHeight":32,"uuid":"yTqzonjJDipBAqjg"}
+{"name":"favicon-192.png","date":"2022-09-21T02:28:14.675Z","url":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-192.png","type":"image/png","size":5148,"imageWidth":192,"imageHeight":192,"thumbnail":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-192.png","thumbnailWidth":192,"thumbnailHeight":192,"uuid":"HXf2iEXreXTWSgCZ"}
+{"name":"favicon-128.png","date":"2022-09-21T02:28:14.675Z","url":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-128.png","type":"image/png","size":3417,"imageWidth":128,"imageHeight":128,"thumbnail":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-128.png","thumbnailWidth":128,"thumbnailHeight":128,"uuid":"4xHjxtZ8FnhUNS6D"}
+{"name":"favicon-180.png","date":"2022-09-21T02:28:14.675Z","url":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-180.png","type":"image/png","size":4645,"imageWidth":180,"imageHeight":180,"thumbnail":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-180.png","thumbnailWidth":180,"thumbnailHeight":180,"uuid":"kVf9jHHgKIHVPEEH"}
+{"uuid":"kVf9jHHgKIHVPEEH","deleted":true}
+{"uuid":"HXf2iEXreXTWSgCZ","deleted":true}
+{"uuid":"4xHjxtZ8FnhUNS6D","deleted":true}
+{"uuid":"yTqzonjJDipBAqjg","deleted":true}
+{"name":"favicon-32.ico","date":"2022-09-21T02:31:50.079Z","url":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-32.ico","type":"image/x-icon","size":185021,"imageWidth":256,"imageHeight":256,"thumbnail":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-32.ico","thumbnailWidth":256,"thumbnailHeight":256,"uuid":"ZGJj05QZIbdXfIZJ"}
+{"uuid":"ZGJj05QZIbdXfIZJ","deleted":true}
+{"name":"favicon-32.ico","date":"2022-09-21T02:37:01.466Z","url":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-32.ico","type":"image/x-icon","size":185021,"imageWidth":256,"imageHeight":256,"thumbnail":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-32.ico","thumbnailWidth":256,"thumbnailHeight":256,"uuid":"STwTHTldrFhX7GmS"}
+{"name":"favicon-128.png","date":"2022-09-22T07:37:59.872Z","url":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-128.png","type":"image/png","size":3417,"imageWidth":128,"imageHeight":128,"thumbnail":"https://cdn.glitch.global/04504a76-c2dc-4490-8331-5de633431be7/favicon-128.png","thumbnailWidth":128,"thumbnailHeight":128,"uuid":"QzRhoKXUK048Tt3x"}
+{"uuid":"STwTHTldrFhX7GmS","deleted":true}
+{"uuid":"QzRhoKXUK048Tt3x","deleted":true}
+{"name":"favicon-32.ico","date":"2022-10-08T20:13:23.910Z","url":"https://cdn.glitch.global/944f9333-48b6-4ac6-a6d8-a2987934d6d8/favicon-32.ico","type":"image/x-icon","size":766,"imageWidth":32,"imageHeight":32,"thumbnail":"https://cdn.glitch.global/944f9333-48b6-4ac6-a6d8-a2987934d6d8/favicon-32.ico","thumbnailWidth":32,"thumbnailHeight":32,"uuid":"LzgkwRwKRt3Cy2gl"}
+{"uuid":"LzgkwRwKRt3Cy2gl","deleted":true}
+{"name":"2.jpg","date":"2022-10-11T01:02:46.795Z","url":"https://cdn.glitch.global/944f9333-48b6-4ac6-a6d8-a2987934d6d8/2.jpg","type":"image/jpeg","size":9968,"imageWidth":200,"imageHeight":200,"thumbnail":"https://cdn.glitch.global/944f9333-48b6-4ac6-a6d8-a2987934d6d8/2.jpg","thumbnailWidth":200,"thumbnailHeight":200,"uuid":"WoTOpUHoAyCRVsN6"}
+{"uuid":"WoTOpUHoAyCRVsN6","deleted":true}
+{"name":"PushBox.png","date":"2022-10-11T05:00:33.412Z","url":"https://cdn.glitch.global/944f9333-48b6-4ac6-a6d8-a2987934d6d8/PushBox.png","type":"image/png","size":821,"imageWidth":128,"imageHeight":128,"thumbnail":"https://cdn.glitch.global/944f9333-48b6-4ac6-a6d8-a2987934d6d8/PushBox.png","thumbnailWidth":128,"thumbnailHeight":128,"uuid":"A2sMGi4mfi2JJOL9"}
+{"uuid":"A2sMGi4mfi2JJOL9","deleted":true}

Layout.js

@@ -0,0 +1,14 @@
+const layout = {
+  canvas: {
+    height: "510",
+    width: "510",
+  },
+
+  buttons: {
+    width: 13 + "em",
+  },
+
+  button: {
+    visibility: "hidden",
+  },
+};

README.md

@@ -1,49 +1,16 @@
-# Final Project
-*Due October 13th (final day of the term)*
-
-For your final project, you'll implement a web application that exhibits understanding of the course materials. 
-This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
-
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
-
-- Static web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data (database), authentication, and possibly server-side computation. 
-- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) The video should be posted on YouTube or some other accessible video hosting service. Make sure your video is less than five minutes, but long enough to successfully  explain your project and show it in action. There is no minimum video length.
-
-## Project ideation
-Excellent projects typically serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. 
-
-### Deliverables
-
-#### Form Team (due 9/25)
-Students are will work in teams of 3-5 students for the project; teams of two can be approved with the permission of the instructor. Working in teams should help enable you to build a good project in a limited amount of time.  Use the `#project-logistics` channel in Discord to pitch ideas for final projects and/or find fellow team members as needed.
-
-Teams must be in place by end of day on Sunday, September 25th. If you have not identified a team at this point, you will be assigned a team. You will be given some class time on Monday to work on your proposal, but please plan on reserving additional time outside of class as needed.
-
-#### Proposal (due 9/27) 
-Provide an outline of your project direction and the names of associated team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline. Please include a general description of a project, and list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript etc.). Two to four paragraps should provide enough level of detail. Name the file proposal.md and submit a pull request by Tuesday, September 27th at 11:59 PM (end of day). Only one pull request is required per team.
-
-There are no other scheduled checkpoints for your project. 
-
-#### Turning in Your Project
-Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
-
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
-
-1. A brief description of what you created, and a link to the project itself (two paragraphs of text)
-2. Any additional instructions that might be needed to fully use your project (login information etc.)
-3. An outline of the technologies you used and how you used them.
-4. What challenges you faced in completing the project.
-5. What each group member was responsible for designing / developing.
-6. A link to your project video.
-
-Think of 1,3, and 4 in particular in a similar vein to the design / tech achievements for A1—A4… make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
-
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use Node.js. Your client-side scripting language should be either JavaScript or TypeScript.
+# final_project:
+Authors:
+- Cather Zhang
+- Jordan Wecler
+- Mark Renzi
+
+1. [Project link](https://pushbox.glitch.me/)  
+The project is called PushBox. It is a game where the player can login with their github account, and play. The purpose of the game is to remove all pairs of blocks of the same color by pushing them together. A player can control the character with the arrow keys or on screen buttons to move around and push blocks by moving into them.  
+
+    Once the player starts moving, there is a timer to keep track of how long it takes to solve the puzzle. The number of moves used to solve the board is also tracked. Once the puzzle is solved, the player can click "submit" to submit their scores to the leaderboard, where only their best times and fewest number of moves is saved. 
+
+2. The player can log in with their GitHub account, and any instructions required to play are on the navigation bar at the top of the screen.
+3. The game GUI was created on HTML canvas using React. The login is through passport.js using the oauth2 github strategy, and scoreboard data is stored in MongoDB. The conversion from React JSX files to JS is done using Babel CLI.
+4. The biggest challenges of this project stemmed from converting our React App to regular JavaScript, as there was a learning curve to defining scripts in our package.JSON file that would run in the terminal inside of Glitch.
+5. Cather was responsible for making the game with react app. Mark was responsible for the MongoDB scoreboard implementation, Babel JSX to JS setup on Glitch, GitHub login, and UI using Bulma. Jordan was responsible for making new levels and implementing UI changes.
+6. [Presentation video](https://www.youtube.com/watch?v=VZ5HhVQbso8)

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react"]
+}

boundary/Boundary.js

@@ -0,0 +1,82 @@
+const LEVELOFFSETH = 5;
+const BOXSIZE = 50;
+const OFFSET = 3;
+var isDraw = false;
+
+class Rectangle {
+    constructor(x, y, width, height) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+    }
+
+    //If (x,y) is contained in the rectangle
+    contains(x, y) {
+        return x >= this.x && x <= (this.x + this.width) && y >= this.y && y <= (this.y + this.height);
+    }
+}
+
+
+/**
+ * redraw the canvas from model
+ * @param {*} model 
+ * @param {*} canvasObj 
+ * @param {*} appObj 
+ * @returns 
+ */
+function redrawCanvas(model, canvasObj, appObj) {
+    //for testing purposes
+    if (typeof canvasObj === "undefined") {return;}
+
+    const ctx = canvasObj.getContext('2d');
+
+    //for testing purposes
+    if (ctx === null) {return;}
+
+    //clear the canvas area
+    ctx.clearRect(0,0,canvasObj.width, canvasObj.height)
+
+    if (model.puzzle && !model.victory) {
+      isDraw = false;
+      drawPuzzle(ctx, model.puzzle);
+    }
+    else {
+      ctx.fillStyle = "white";
+      ctx.fillRect(0, 0, canvasObj.width, canvasObj.height);  
+      ctx.fillStyle = "red";
+      ctx.font = "30px Segoe UI";
+      ctx.textAlign = "center";
+      ctx.fillText("FINISH!",255,240);
+    }
+}
+
+
+
+function drawPuzzle(ctx, puzzle) {
+
+    const img = new Image();
+    img.src = "./assets/2.jpg"
+    ctx.shadowColor = "black";
+
+    puzzle.squares.forEach(square => {
+        let rect = computeRectangle(square);
+        ctx.fillStyle = square.color;
+        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    })
+
+    let rect = computeRectangle(puzzle.player);
+    img.onload = function() {
+        if (!isDraw) {
+
+            ctx.drawImage(img, rect.x, rect.y, rect.width, rect.height);
+            isDraw = true
+        }
+    }
+}
+
+function computeRectangle(square) {
+    let c = square.location();
+    let rect = new Rectangle(BOXSIZE*c.column + OFFSET + LEVELOFFSETH, BOXSIZE*c.row + OFFSET + LEVELOFFSETH, BOXSIZE-2*OFFSET, BOXSIZE-2*OFFSET);
+    return rect;
+}

controller/Controller.js

@@ -0,0 +1,20 @@
+// import Model from '../model/Model.js';
+
+function move(model, dir) {
+  if (model.puzzle.canMove(dir)) {
+    if (firstMove == true) {
+      startTimer();
+      firstMove = false;
+    }
+
+    model.puzzle.move(dir);
+    model.numMoves += 1;
+    model.isWin();
+    return model.copy();
+  } else return model;
+}
+
+function reset(model) {
+  firstMove = true;
+  return new Model(model.info);
+}

lib/App.js

@@ -0,0 +1,67 @@
+let model = null;
+let setModel = null;
+function App() {
+  //default to level 1
+  [model, setModel] = React.useState(new Model(level1));
+  const appRef = React.useRef(null);
+  const canvasRef = React.useRef(null);
+  React.useEffect(() => {
+    redrawCanvas(model, canvasRef.current, appRef.current);
+  }, [model]);
+  const moveHandler = direction => {
+    let newModel = move(model, direction);
+    setModel(newModel);
+  };
+  const resetHandler = () => {
+    let newModel = reset(model);
+    setModel(newModel);
+  };
+  return /*#__PURE__*/React.createElement("main", {
+    ref: appRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "is-flex is-flex-direction-row is-flex-wrap-wrap is-justify-content-space-evenly"
+  }, /*#__PURE__*/React.createElement("canvas", {
+    tabIndex: "1",
+    ref: canvasRef,
+    width: layout.canvas.width,
+    height: layout.canvas.height
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "is-flex is-align-items-center is-flex-direction-row is-justify-content-space-evenly is-flex-grow-1 box"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: layout.buttons,
+    className: "is-flex is-flex-direction-row is-flex-wrap-wrap is-justify-content-center"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "button is-size-4",
+    style: layout.button
+  }, "a"), /*#__PURE__*/React.createElement("button", {
+    className: "button has-background-dark has-text-white-ter is-size-4",
+    onClick: e => moveHandler(Up),
+    disabled: !model.puzzle.canMove(Up)
+  }, "^"), /*#__PURE__*/React.createElement("button", {
+    className: "button is-size-4",
+    style: layout.button
+  }, "a"), /*#__PURE__*/React.createElement("button", {
+    className: "button has-background-dark has-text-white-ter is-size-4",
+    onClick: e => moveHandler(Left),
+    disabled: !model.puzzle.canMove(Left)
+  }, "<"), /*#__PURE__*/React.createElement("button", {
+    className: "button has-background-dark has-text-white-ter is-size-4",
+    onClick: e => moveHandler(Down),
+    disabled: !model.puzzle.canMove(Down)
+  }, "v"), /*#__PURE__*/React.createElement("button", {
+    className: "button has-background-dark has-text-white-ter is-size-4",
+    onClick: e => moveHandler(Right),
+    disabled: !model.puzzle.canMove(Right)
+  }, ">")), /*#__PURE__*/React.createElement("label", {
+    className: "box has-background-black-ter has-text-white-ter mt-5 mr-2"
+  }, "Moves: " + model.numMoves), /*#__PURE__*/React.createElement("div", {
+    className: "is-flex is-flex-direction-column"
+  }, /*#__PURE__*/React.createElement("button", {
+    id: "formButton",
+    onClick: e => add(),
+    className: "button is-success is-large"
+  }, "Submit"), /*#__PURE__*/React.createElement("button", {
+    className: "button is-danger is-large",
+    onClick: e => resetHandler()
+  }, "Reset")))));
+}

lib/index.js

@@ -0,0 +1,2 @@
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render( /*#__PURE__*/React.createElement(React.StrictMode, null, /*#__PURE__*/React.createElement(App, null)));

manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "PushBox",
+  "name": "PushBox Game",
+  "icons": [
+  {
+    "src":"/assets/favicon-32.ico",
+    "sizes": "32x32",
+    "type": "image/ico"
+  }
+ ],
+ "start_url": "/",
+ "background_color": "hsl(48, 100%, 67%)",
+ "Theme_color": "hsl(48, 100%, 96%)",
+ "display": "standalone"
+}