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