danbarber/chess
1
0
Fork 0
mirror of https://github.com/danbee/chess synced 2025-03-04 08:39:06 +00:00
Code Issues Releases Wiki Activity

We're rendering a chessboard

Browse Source
This commit is contained in:
Daniel Barber 2016-11-14 15:55:20 +00:00
commit 99d01d2129
Signed by: danbarber
GPG Key ID: 931D8112E0103DD8
11 changed files with 3835 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
public
node_modules

16
README.md Normal file
View File

@ -0,0 +1,16 @@
# Chess
A multiplayer chess game using Vue, VueX.
## Instructions
To get started, simply run the following command in your terminal...
```bash
yarn install
brunch watch -s
```
## License
This code is licensed under [MIT](), see [license.md](license.md) for details.

21
app/application.js Normal file
View File

@ -0,0 +1,21 @@
"use strict";
import Vue from "vue";
import App from 'components/app';
import store from "store";
class Main {
constructor() {
console.log("App initialized.");
// create a root instance
new Vue({
el: '#app',
store,
render: h => h(App)
});
}
};
export default new Main;

16
app/assets/index.html Normal file
View File

@ -0,0 +1,16 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Brunch Demo</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="app">
</div>
<script src="vendor.js"></script>
<script src="app.js"></script>
<script>require('application');</script>
</body>
</html>

13
app/components/app.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div id="app">
<chess-board></chess-board>
</div>
</template>
<script>
import ChessBoard from './chess-board';
export default {
components: { ChessBoard }
};
</script>

18
app/components/chess-board.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div class="board">
<div v-for="row in board" class="board-row">
<div v-for="square in row" class="board-square">
</div>
</div>
</div>
</template>
<script>
export default {
computed: {
board() {
return this.$store.state.board;
}
},
};
</script>

63
app/store.js Normal file
View File

@ -0,0 +1,63 @@
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
board: [
[
{ type: "rook", colour: "black" },
{ type: "knight", colour: "black" },
{ type: "bishop", colour: "black" },
{ type: "king", colour: "black" },
{ type: "queen", colour: "black" },
{ type: "bishop", colour: "black" },
{ type: "knight", colour: "black" },
{ type: "rook", colour: "black" },
],
[
{ type: "pawn", colour: "black" },
{ type: "pawn", colour: "black" },
{ type: "pawn", colour: "black" },
{ type: "pawn", colour: "black" },
{ type: "pawn", colour: "black" },
{ type: "pawn", colour: "black" },
{ type: "pawn", colour: "black" },
{ type: "pawn", colour: "black" },
],
[null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null],
[null, null, null, null, null, null, null, null],
[
{ type: "pawn", colour: "white" },
{ type: "pawn", colour: "white" },
{ type: "pawn", colour: "white" },
{ type: "pawn", colour: "white" },
{ type: "pawn", colour: "white" },
{ type: "pawn", colour: "white" },
{ type: "pawn", colour: "white" },
{ type: "pawn", colour: "white" },
],
[
{ type: "rook", colour: "white" },
{ type: "knight", colour: "white" },
{ type: "bishop", colour: "white" },
{ type: "king", colour: "white" },
{ type: "queen", colour: "white" },
{ type: "bishop", colour: "white" },
{ type: "knight", colour: "white" },
{ type: "rook", colour: "white" },
],
],
},
getters: {
chessBoard: state => {
},
},
mutations: {
}
});
export default store;

58
app/styles/main.scss Normal file
View File

@ -0,0 +1,58 @@
body {
background: #124031;
}
$board-square-size: 8vw;
$base-font-size: 16px;
$black-square-color: #824c34;
$white-square-color: #d0bfa1;
$square-outline-color: darken($black-square-color, 20%);
.board {
display: inline-block;
font-size: 0;
border: 0.3vw solid black;
}
.board-square {
position: relative;
border: 0.2vw solid $square-outline-color;
display: inline-block;
font-size: $base-font-size;
width: $board-square-size;
height: $board-square-size;
img {
position: absolute;
margin: 0;
width: $board-square-size;
}
}
%black-square {
background: $black-square-color;
}
%white-square {
background: $white-square-color;
}
.board-row:nth-child(odd) {
.board-square:nth-child(odd) {
@extend %black-square;
}
.board-square:nth-child(even) {
@extend %white-square;
}
}
.board-row:nth-child(even) {
.board-square:nth-child(odd) {
@extend %white-square;
}
.board-square:nth-child(even) {
@extend %black-square;
}
}

18
brunch-config.js Normal file
View File

@ -0,0 +1,18 @@
module.exports = {
files: {
javascripts: {
joinTo: {
'vendor.js': /^(?!app\/)/,
'app.js': /^app\//
}
},
stylesheets: {
joinTo: 'app.css'
}
},
plugins: {
babel: {
presets: ['es2015', 'es2016']
}
}
}

16
package.json Normal file
View File

@ -0,0 +1,16 @@
{
"name": "simple-brunch",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-brunch": "^6.0.6",
"babel-plugin-transform-runtime": "^6.15.0",
"brunch": "^2.9.1",
"javascript-brunch": "^2.0.0",
"jquery": "^3.1.1",
"sass-brunch": "^2.7.0",
"vue": "^2.0.5",
"vue-brunch": "^1.2.3",
"vuex": "^2.0.0"
}
}

3594
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff