Starts on game

package.json

@@ -9,7 +9,9 @@
     "deploy": "aws --region us-west-2 --profile personal-website-dev s3 sync ./dist s3://dillonkharris-personal-website --delete"
   },
   "dependencies": {
+    "@ion-phaser/core": "^1.2.3",
     "core-js": "^3.6.5",
+    "phaser": "^3.24.1",
     "vue": "^2.6.11",
     "vuetify": "^2.2.11"
   },

src/App.vue

@@ -16,9 +16,6 @@
           mdi-arrow-left
         </v-icon>
       </v-hover>
-      <div class="d-flex align-center">
-      </div>
-
       <v-spacer></v-spacer>
       <div style="color: #3352a9;">Dillon Harris</div>
       <img
@@ -28,17 +25,6 @@
         width="55px"
         class="my-5 ml-5 mr-0"
       >
-
-
-
-      <!-- <v-btn
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-        text
-      >
-        <span class="mr-2">Latest Release</span>
-        <v-icon>mdi-open-in-new</v-icon>
-      </v-btn> -->
     </v-app-bar>
     <component
       v-bind:is="currentComponent"
@@ -53,6 +39,7 @@ import MyEducation from './MyEducation'
 import MyProjects from './MyProjects'
 import WorkExperience from './WorkExperience'
 import Home from './Home'
+import MyGames from './MyGames'
 
 export default {
   name: 'App',
@@ -62,6 +49,7 @@ export default {
     MyEducation,
     MyProjects,
     WorkExperience,
+    MyGames,
     Home
   },
   data () {
@@ -73,6 +61,9 @@ export default {
   methods: {
     setCurrentComponent (comp) {
       this.theCurrentComponent = comp
+    },
+    initializeGame() {
+      this.initialize = true;
     }
   },
   computed: {

src/Game.js

@@ -0,0 +1,40 @@
+import {GamePiece} from "./GamePiece"
+import {GameArea} from "./GameArea"
+
+export class Game {
+  constructor (width, height, color, x, y) {
+    this.gamePiece = new GamePiece(width, height, color, x, y)
+    this.gameArea = new GameArea()
+  }
+
+  startGame () {
+    this.gameArea.start();
+    setInterval(() => {}, 2000);
+  }
+
+  update () {
+    console.log("update")
+    this.clear()
+    this.gamePiece.update(this.gameArea.context)
+  }
+
+  clear() {
+    this.gameArea.context.clearRect(0, 0, this.gameArea.canvas.width, this.gameArea.canvas.height);
+  }
+
+  moveup () {
+    this.gamePiece.speedY -= 1; 
+  }
+
+  movedown () {
+    this.gamePiece.speedY += 1; 
+  }
+
+  moveleft () {
+    this.gamePiece.speedX -= 1; 
+  }
+
+  moveright () {
+    this.gamePiece.speedX += 1; 
+  }
+}

src/GameArea.js

@@ -0,0 +1,12 @@
+export class GameArea {
+  constructor () {
+    this.canvas = document.createElement("canvas")
+  }
+
+  start () {
+    this.canvas.width = 480;
+    this.canvas.height = 270;
+    this.context = this.canvas.getContext("2d");
+    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
+  }
+}

src/GamePiece.js

@@ -0,0 +1,21 @@
+export class GamePiece {
+  constructor (width, height, color, x, y) {
+    this.width = width
+    this.height = height
+    this.color = color
+    this.x = x
+    this.y = y
+    this.speedX = 0
+    this.speedY = 0
+  }
+
+  newPos () {
+    this.x += this.speedX
+    this.y += this.speedY        
+  }
+
+  update (context) {
+    context.fillStyle = this.color;
+    context.fillRect(this.x, this.y, this.width, this.height);
+  }
+}

src/Home.vue

@@ -156,6 +156,17 @@
 
             </v-row>
           </v-card>
+          <v-card
+            class="mx-auto mb-10"
+            @click="$emit('card-clicked', 'MyGames')"
+          >
+          <v-list-item three-line>
+            <v-list-item-content>
+              <v-list-item-title class="headline mb-1">Games</v-list-item-title>
+              <v-list-item-subtitle>See some web games I'm Working On</v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+          </v-card>
       </v-row>
     </v-main>
   </v-app>

src/MyGames.vue

@@ -0,0 +1,118 @@
+<template>
+  <v-app>
+    <v-main>
+      <div>
+        <v-btn @click="postRequest()" small color="primary">make post request</v-btn>
+    <!-- <v-btn @click="start()" small color="primary">Start Game</v-btn> -->
+    <!-- <canvas id="myCanvas" width="100%" height="500" /> -->
+  </div>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+
+import {Game} from './Game.js'
+import {Test} from './Test.js'
+
+export default {
+  name: 'App',
+
+  components: {
+    // HelloWorld,
+  },
+
+  data () {
+    return {
+      myGame: null,
+      response: null,
+      data: null
+    }
+  },
+  created() {
+    const app = this
+    window.addEventListener("keydown", function(e) {
+      // space and arrow keys
+      if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
+        if (e.keyCode === 37) {
+          app.left()
+        } else if (e.keyCode === 39) {
+          app.right()
+        } else if (e.keyCode === 38) {
+          app.up()
+        } else if (e.keyCode === 40) {
+          app.down()
+        } else if (e.keyCode === 32) {
+          app.space()
+        }
+        e.preventDefault();
+      }
+    }, false);
+  },
+
+  methods: {
+    postRequest () {
+  //     const requestOptions = {
+  //   method: "POST",
+  //   headers: { "Content-Type": "application/json" },
+  //   body: JSON.stringify({ title: "Vue POST Request Example" })
+  // };
+
+  // fetch("https://jsonplaceholder.typicode.com/posts", requestOptions)
+  //   .then(response => (this.response = response.json()))
+  //   .then(data => (this.data = data));
+
+  // console.log(this.response)
+  // console.log(this.data)
+      const requestOptions = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(
+        {
+          "name": "Dillon Harris",
+          "email": "[email protected]",
+          "resume": "https://www.linkedin.com/in/dillon-harris-489237159/detail/overlay-view/urn:li:fsd_profileTreasuryMedia:(ACoAACXxjOkB1_HWqHyglulne08X2VC1dBXJqAc,1600873866162)/",
+          "phone": "5057933568", // optional
+          "github": "https://github.com/dillonkh", // optional
+          "website": "http://dillonkharris-personal-website.s3-website-us-west-2.amazonaws.com/", // optional
+          "location": "SLC", // optional
+          "favorite_candy": "Reese's", // optional
+          "superpower": "APIs?" // optional
+        }
+      )
+      };
+      fetch("https://contact.plaid.com/jobs", requestOptions)
+        .then(response => (this.response = response.json()))
+        .then(data => (this.data = data));
+
+      console.log(this.response)
+      console.log(this.data)
+    },
+    start () {
+      console.log(new Test().getFull())
+      this.myGame = new Game(30, 30, "red", 10, 120)
+      this.myGame.startGame()
+    },
+    up () {
+      this.myGame.moveup()
+      console.log(this.myGame.gamePiece.y)
+    },
+    down () {
+      this.myGame.movedown()
+    },
+    left () {
+      this.myGame.moveleft()
+    },
+    right () {
+      this.myGame.moveright()
+    },
+  },
+};
+</script>
+
+<style>
+#myCanvas {
+  border:1px solid #d3d3d3;
+  background-color: #f1f1f1;
+}
+</style>

src/Test.js

@@ -0,0 +1,17 @@
+export class Test {
+  constructor () {
+    this.name = "Dillon"
+    this.last = "Harris"
+  }
+
+  getFirst() {
+    return this.name
+  }
+  getLast() {
+    return this.last
+  }
+  getFull() {
+    return this.getFirst() + " " + this.getLast()
+  }
+}
+

src/main.js

@@ -1,8 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
-import vuetify from './plugins/vuetify';
+import vuetify from './plugins/vuetify'
+import { defineCustomElements as defineIonPhaser } from '@ion-phaser/core/loader'
 
 Vue.config.productionTip = false
+Vue.config.ignoredElements = [/ion-\w*/]
+
+defineIonPhaser(window)
 
 new Vue({
   vuetify,