initial commit

4 years ago · 83ebec1405
20 changed files with 20936 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -1,2 +1,24 @@
				@@ -1,2 +1,24 @@
-# loveLetterFrontend
+# frontend

+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
				@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
				@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,46 @@
				@@ -0,0 +1,46 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "socket.io": "^4.4.1",
+    "socket.io-client": "^4.4.1",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,20 @@
				@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <!-- <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css" /> -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/scratch.txt
+++ b/scratch.txt
@ -0,0 +1,12 @@
				@@ -0,0 +1,12 @@
+VUEjs with socket.io
+https://www.digitalocean.com/community/tutorials/vuejs-vue-socketio
+
+Setting Vue to run over https
+https://stackoverflow.com/questions/45807049/how-to-run-vue-js-dev-serve-with-https
+
+Using socket.io with vue
+https://lukashermann.dev/writing/socketio-with-vue-and-vuex/
+
+#Guide to do multiplayer game with Vue and Socket.io
+https://blog.logrocket.com/how-to-create-a-2d-multiplayer-game-with-vue-js-and-socket-io-174ef2818e65/
+
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,48 @@
				@@ -0,0 +1,48 @@
+<template>
+  <div id="app">
+    <game-lobby v-bind:players="players"/>
+  </div>
+</template>
+
+<script>
+  import io from "socket.io-client"
+  import GameLobby from '@/components/GameLobby.vue'
+  import { socketUrl } from './config/appConfig'
+
+  export default {
+    name: 'app',
+    components: {
+      GameLobby
+    },
+    data() {
+      return {
+        socket: {},
+        players: []
+      }
+    },
+    created() {
+      // this.socket = io("wss://localhost:9000")
+      // this.socket = io("https://localhost:9000")
+      // this.socket = io("https://192.168.50.149:9000")
+      // this.socket = io("wss://192.168.50.149:9000")
+      this.socket = io(socketUrl)
+    },
+    mounted () {
+      this.socket.on("connect", () => {
+        console.log(`app.socket.id: ${this.socket.id}`)
+      })
+      this.socket.on("msg", (data) => {
+        console.log(data)
+      })
+      this.socket.on('playersUpdate', (data) => {
+        // console.log(`playersUpdate:`)
+        let playersUpdate = data
+        // console.log(playersUpdate)
+        this.players = playersUpdate
+      })
+    }
+  }
+</script>
+
+<style>
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/GameLobby.vue
+++ b/src/components/GameLobby.vue
@ -0,0 +1,80 @@
				@@ -0,0 +1,80 @@
+<template>
+  <div id="game-lobby">
+    <p>Love Letter</p>
+    <form>
+      <label>pick a username</label>
+      <input type="text">
+    </form>
+    <table-selection v-bind:tables="tables" />
+    <players-list v-bind:players="players"/>
+    <lobby-admin v-if="showLobbyAdmin" />
+  </div>
+</template>
+
+<script>
+  import TableSelection from '@/components/TableSelection.vue'
+  import LobbyAdmin from '@/components/LobbyAdmin.vue'
+  import PlayersList from '@/components/PlayersList.vue'
+  export default {
+    name: 'game-lobby',
+    components: {
+      TableSelection,
+      PlayersList,
+      LobbyAdmin,
+    },
+    data () {
+      return {
+        showLobbyAdmin: true,
+        tables: [
+          {
+            number: 1,
+            playerCount: "3/4",
+            playerListString: "Bob, Joe, Fred",
+            inviteCode: "http://banana.com",
+            gameId: "AAAAA11111"
+          },
+          {
+            number: 2,
+            playerCount: "3/4",
+            playerListString: "Jon, Jim, Bill",
+            inviteCode: "http://banana.com",
+            gameId: "BBBBB22222"
+          },
+          {
+            number: 3,
+            playerCount: "1/4",
+            playerListString: "Tim",
+            inviteCode: "http://banana.com",
+            gameId: "CCCCC33333"
+          }
+        ],
+        // players: [
+        //   {
+        //     id: 1,
+        //     username: 'username1'
+        //   },
+        //   {
+        //     id: 2,
+        //     username: 'username2'
+        //   }
+        // ]
+      }
+    },
+    methods: {},
+    computed: {},
+    props: {
+      players: Array
+    }
+  }
+</script>
+
+<style scoped>
+  #game-lobby {
+    background-color: rgb(255, 203, 92);
+    width: 100vw;
+    height: 100vh;
+  }
+  .input {
+    background: white;
+  }
+</style>
--- a/src/components/Junk/EmployeeForm.vue
+++ b/src/components/Junk/EmployeeForm.vue
@ -0,0 +1,45 @@
				@@ -0,0 +1,45 @@
+<template>
+  <div id="employee-form">
+    <form @submit.prevent="handleSubmit">
+      <label>Employee name</label>
+      <input v-model="employee.name" type="text" />
+      <label>Employee email</label>
+      <input v-model="employee.email" type="text" />      
+      <button>Add Employee</button>
+    </form>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'employee-form',
+    data() {
+      return {
+        employee: {
+          name: '',
+          email: ''
+        }
+      }
+    },
+    methods: {
+      handleSubmit() {
+        console.log('testing handleSubmit')
+        this.$emit('add:employee', this.employee)
+      }
+    },
+    computed: {
+      invalidName() {
+        return this.employee.name === ''
+      },
+      invalidEmail() {
+        return this.employee.email === ''
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  form {
+    margin-bottom: 2rem;
+  }
+</style>
--- a/src/components/Junk/EmployeeTable.vue
+++ b/src/components/Junk/EmployeeTable.vue
@ -0,0 +1,29 @@
				@@ -0,0 +1,29 @@
+<template>
+  <div id="employee-table">
+    <table>
+      <thead>
+        <tr>
+          <th>Employee name</th>
+          <th>Employee email</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="employee in employees" :key="employee.id">
+          <td>{{ employee.name }}</td>
+          <td>{{ employee.email }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'employee-table',
+    props: {
+      employees: Array
+    }
+  }
+</script>
+
+<style scoped></style>
--- a/src/components/Junk/HelloWorld.vue
+++ b/src/components/Junk/HelloWorld.vue
@ -0,0 +1,58 @@
				@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/components/LobbyAdmin.vue
+++ b/src/components/LobbyAdmin.vue
@ -0,0 +1,25 @@
				@@ -0,0 +1,25 @@
+<template>
+  <div id="lobby-admin">
+    <table>
+
+    </table>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'lobby-admin',
+  }
+</script>
+
+<style scoped>
+  #lobby-admin {
+    border: 4px solid rgb(0, 255, 221);
+    height: 300px;
+    width: 100vw;
+    background-color: black;
+    color: white;
+    position: absolute;
+    bottom: 0;
+  }
+</style>
--- a/src/components/PlayersList.vue
+++ b/src/components/PlayersList.vue
@ -0,0 +1,34 @@
				@@ -0,0 +1,34 @@
+<template>
+  <div id="players-List">
+    <p>Love Letter</p>
+      <table>
+        <thead>
+          <tr>
+            <th>Online Players</th>
+            <th>Connected</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="player in players" :key="player.id">
+            <td>{{ player.username }}</td>
+            <td>{{ player.connected }}</td>
+          </tr>
+        </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'players-List',
+    props: {
+      players: Array
+    }
+  }
+</script>
+
+<style scoped>
+  table, th, td {
+    border: 1px solid black;
+  }
+</style>
--- a/src/components/TableSelection.vue
+++ b/src/components/TableSelection.vue
@ -0,0 +1,41 @@
				@@ -0,0 +1,41 @@
+<template>
+  <div id="table-selection">
+    <table>
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>playerCount</th>
+            <th>players</th>
+            <th>inviteCode</th>
+            <th>gameId</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="table in tables" :key="table.number">
+            <td>{{ table.number }}</td>
+            <td>{{ table.playerCount }}</td>
+            <td>{{ table.playerListString }}</td>
+            <td>{{ table.inviteCode }}</td>
+            <td>{{ table.gameId }}</td>
+          </tr>
+        </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'table-selection',
+    props: {
+      tables: Array
+    }
+  }
+</script>
+
+<style scoped>
+  table, th, td {
+    border: 1px solid black;
+    background-color: gray;
+    color: white;
+  }
+</style>
--- a/src/config/appConfig.js
+++ b/src/config/appConfig.js
@ -0,0 +1,4 @@
				@@ -0,0 +1,4 @@
+const socketUrl = "wss://localhost:9000"
+module.exports = {
+  socketUrl: socketUrl
+}
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,9 @@
				@@ -0,0 +1,9 @@
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+
+// socketio
+// import socket from './socket'
+// App.prototype.$socket = socket
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,8 @@
				@@ -0,0 +1,8 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true,
+  devServer: {
+    https: true,
+    port: 443
+  }
+})