Add basic libraries and file structure

issue-2
Garrett Mills 2 years ago
commit 3425b1d988
Signed by: garrettmills
GPG Key ID: D2BF5FBA8298F246
  1. 1
      .gitignore
  2. 28
      README.md
  3. 23
      index.html
  4. 9
      lib/README.md
  5. 11966
      lib/vue-2.6.11.js
  6. 63
      lib/vues6.js
  7. 9
      src/components.js
  8. 34
      src/components/GameBoard.component.js
  9. 22
      src/module/start.js

1
.gitignore vendored

@ -0,0 +1 @@
.idea*

@ -0,0 +1,28 @@
# Battleship
## EECS 448 - Project 1
This is a basic battleship game created as our submission for project 1 for EECS 448 at the University of Kansas.
## Structure Info
This project has been wired up to use Vue.js to help organize components of the game.
These components are defined in files that end in the `.component.js` extension, and are located in the `src/components/` directory.
The entry point for the project is the `index.html`. This file contains the basic logic for loading Vue, and adding the game board to the page.
Obviously, we'll flesh out the look-and-feel as we go along. This is just a basic starter for now.
## How to Run
The easiest way to run this project is by creating a basic static web server using Python. This is super simple:
1. Open a terminal or command prompt to the root of this project (i.e. the directory this file is in).
2. Start the server: `python -m http.server`
This will start a web server on port 8000. You can then run the game by navigating to http://localhost:8000/ from a web browser.
## Contributors
- Lucas Brakenridge
- Javier Barea Lara
- Garrett Mills
- Evan Powell
- Alec Horlick-Mills

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Battleship | EECS 448</title>
</head>
<body>
<h1>Battleship - EECS 448 Project 1</h1>
<p>Created by Lucas Brakenridge, Javier Barea Lara, Garrett Mills, Evan Powell, and Alec Horlick-Mills</p>
<!-- This is the container where the Vue.js application will render to. -->
<div id="wrapper">
<!-- The game board. See the "GameBoard.component.js" for this. -->
<app-game-board></app-game-board>
</div>
<script src="./lib/vue-2.6.11.js"></script>
<script src="./lib/vues6.js" type="module"></script>
<script src="./src/module/start.js" type="module"></script>
</body>
</html>

@ -0,0 +1,9 @@
The files in this directory are external libraries used in this project.
- Vue.js
- A front-end framework. Used under the terms of the MIT license.
- https://github.com/vuejs/vue
- VuES6.js
- A kind-of crappy loader for defining Vue components using ES6 classes.
- Also used under the terms of the MIT license.
- https://code.garrettmills.dev/garrettmills/vues6

File diff suppressed because it is too large Load Diff

@ -0,0 +1,63 @@
export default class VuES6Loader {
constructor(component_list) {
this.components = component_list
}
load() {
for ( const ComponentClass of Object.values(this.components) ) {
const method_properties = Object.getOwnPropertyNames(ComponentClass.prototype)
const watch = {}
method_properties.filter(x => x.startsWith('watch_')).some(method_name => {
const field_name = method_name.substr(6)
const handler = function(...args) {
return ComponentClass.prototype[method_name].bind(this)(...args)
}
watch[field_name] = handler
})
const methods = {}
method_properties.filter(x => !x.startsWith('watch_')).some(method_name => {
const handler = function(...args) {
return ComponentClass.prototype[method_name].bind(this)(...args)
}
methods[method_name] = handler
})
Vue.component(ComponentClass.selector, {
props: ComponentClass.props,
data: () => {
return new ComponentClass()
},
watch,
methods,
template: ComponentClass.template,
created: function() {
if ( typeof this.vue_on_create === 'function' ) this.vue_on_create()
},
updated: function() {
if ( typeof this.vue_on_update === 'function' ) this.vue_on_update()
},
mounted: function() {
if ( typeof this.vue_on_mount === 'function' ) this.vue_on_mount()
},
destroyed: function() {
if ( typeof this.vue_on_destroy === 'function' ) this.vue_on_destroy()
},
})
}
}
}
export class Component {
static get selector() { return '' }
static get template() { return '' }
static get props() { return [] }
vue_on_create() {}
vue_on_update() {}
vue_on_mount() {}
vue_on_destroy() {}
}

@ -0,0 +1,9 @@
import GameBoardComponent from './components/GameBoard.component.js'
/*
* This is where various components we define should be registered.
* Once they are listed here, they will be automatically loaded by Vue.js.
*/
export default {
GameBoardComponent
}

@ -0,0 +1,34 @@
import {Component} from '../../lib/vues6.js'
/*
* This is the HTML/JavaScript for the game board component.
* The "template" variable at the top defines the HTML for this component. It can contain references
* to methods and properties on the "GameBoardComponent" class shown below.
*
* For example, the "greeting" property is referenced in the template as "{{ greeting }}". When
* the page loads, this will be replaced by the value of the "greeting" property.
*
* The class below manages the logic referenced by the template. Then, we can use the component
* in the application by creating an HTML tag with the value of the "selector()" getter.
*
* In this case, that's the <app-game-board></app-game-board> tag in index.html.
*
* We can also use components w/in components, to keep code clean. For example, we could have
* a battleship component that we reference inside this game board component.
*/
const template = `
<div>
<p>The game board will go here. {{ greeting }}</p>
</div>
`
export default class GameBoardComponent extends Component {
static get selector() { return 'app-game-board' }
static get template() { return template }
static get props() { return [] }
greeting = 'Hello, world.'
async vue_on_create() {
console.log('The game board has been created!')
}
}

@ -0,0 +1,22 @@
import components from '../components.js'
import VuES6Loader from '../../lib/vues6.js'
/*
* This is a little script to load the components into Vue in a nice way.
*/
const loader = new VuES6Loader(components)
loader.load()
/*
* This is the Vue app itself.
*/
const app = new Vue({
el: '#wrapper',
data: {},
})
/*
* In case either needs to be accessed, they can with:
* import { app, loader } from './start.js'
*/
export { app, loader }
Loading…
Cancel
Save