commit
3425b1d988
@ -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…
Reference in new issue