diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..34ee645
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,45 @@
+module.exports = {
+ env: {
+ browser: true,
+ es6: true
+ },
+ extends: [
+ "eslint:recommended",
+ "@nuxtjs/eslint-config-typescript",
+
+ // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+ "plugin:@typescript-eslint/eslint-recommended",
+
+ // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict
+ // with prettier
+ "prettier/@typescript-eslint",
+
+ // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors.
+ // Make sure this is always the last configuration in the extends array.
+ "plugin:prettier/recommended"
+ ],
+ globals: {
+ Atomics: "readonly",
+ SharedArrayBuffer: "readonly"
+ },
+ plugins: ["vue", "@typescript-eslint"],
+ rules: {
+ camelcase: "off",
+ "no-console": ["error", { allow: ["warn", "error"] }],
+
+ "no-useless-constructor": "off",
+ "@typescript-eslint/no-useless-constructor": "error",
+
+ "no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": [
+ "error",
+ {
+ vars: "all",
+ args: "after-used",
+ ignoreRestSiblings: false
+ }
+ ],
+
+ "getter-return": "off"
+ }
+};
diff --git a/.gitignore b/.gitignore
index a9bdd25..646ce7e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
.nuxt/
dist/
node_modules/
-static/ecmascript-explained-2019
diff --git a/.gitmodules b/.gitmodules
deleted file mode 100644
index 7e5a9ea..0000000
--- a/.gitmodules
+++ /dev/null
@@ -1,6 +0,0 @@
-[submodule "sumbodules/ecmascript-explained-2019"]
- path = sumbodules/ecmascript-explained-2019
- url = git@github.com:GeorgeSG/ecmascript-explained-2019.git
-[submodule "submodules/ecmascript-explained-2019"]
- path = submodules/ecmascript-explained-2019
- url = git@github.com:GeorgeSG/ecmascript-explained-2019.git
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..7de6938
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "semi": true,
+ "singleQuote": true,
+ "printWidth": 100
+}
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index 963354f..0000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "printWidth": 120
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 1273088..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "files.exclude": {
- "**/.nuxt/": true,
- "**/dist/": true,
- "**/node_modules/": true,
- "submodules/": true
- }
-}
diff --git a/Makefile b/Makefile
deleted file mode 100644
index ef4d607..0000000
--- a/Makefile
+++ /dev/null
@@ -1,8 +0,0 @@
-clean:
- rm -rf ./static/ecmascript-explained-2019
-
-prod:
- mkdir -p ./static
- cd ./submodules/ecmascript-explained-2019 && make prod
- cp -r ./submodules/ecmascript-explained-2019/dist ./static/ecmascript-explained-2019
- yarn && yarn generate
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
index 868d4a2..8ab2d3a 100644
--- a/assets/styles/main.scss
+++ b/assets/styles/main.scss
@@ -1,12 +1,3 @@
-/*
-Colors: ;
-Light Blue: #19C4FF
-Dark Blue: #0085B2
-Light Orange: #FF8F19
-Dark Orange: #B26009
-Light Gray: #f5f5f5
-*/
-
html,
body {
margin: 0;
@@ -14,7 +5,7 @@ body {
font-family: "Verdana", sans-serif;
font-size: 100%;
- background: #f5f5f5;
+ background: $color-light-gray;
color: #333;
}
@@ -29,7 +20,7 @@ h1 {
margin-top: 3em;
margin-bottom: 0;
font-size: 2em;
- color: #0085b2;
+ color: $color-dark-blue;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}
diff --git a/assets/styles/variables.scss b/assets/styles/variables.scss
new file mode 100644
index 0000000..eb0ca20
--- /dev/null
+++ b/assets/styles/variables.scss
@@ -0,0 +1,10 @@
+$color-light-blue: #19C4FF;
+$color-dark-blue: #0085B2;
+$color-light-orange: #FF8F19;
+$color-dark-orange: #B26009;
+$color-gray: #bbb;
+$color-light-gray: #f5f5f5;
+$color-dark-gray: #666;
+
+$color-white: #ffffff;
+
diff --git a/components/TicTacToe/Board/Board.vue b/components/TicTacToe/Board/Board.vue
index 24efc6d..369d395 100644
--- a/components/TicTacToe/Board/Board.vue
+++ b/components/TicTacToe/Board/Board.vue
@@ -5,21 +5,22 @@
:key="index"
:state="cellState"
:disabled="finished"
- @select="$emit('place', index)")
+ @select="$emit('place', index)"
+ )
@@ -30,8 +31,8 @@ export default class Board extends Vue {
margin: 0 auto;
width: 210px;
height: 210px;
- background: #fff;
- border-left: 1px solid #ccc;
- border-top: 1px solid #ccc;
+ background: $color-white;
+ border-left: 1px solid $color-gray;
+ border-top: 1px solid $color-gray;
}
diff --git a/components/TicTacToe/Board/Cell/Cell.vue b/components/TicTacToe/Board/Cell/Cell.vue
index 5c0be2f..38632ad 100644
--- a/components/TicTacToe/Board/Cell/Cell.vue
+++ b/components/TicTacToe/Board/Cell/Cell.vue
@@ -1,26 +1,30 @@
- input.cell(:disabled="disabled" type="button" @click="$emit('select')" :class="classNames")
+ input.cell(:disabled="disabled" type="button" @click="onSelect" :class="classNames")
@@ -28,15 +32,15 @@ export default class Cell extends Vue {
.cell {
width: 70px;
height: 70px;
- background: #fff;
+ background: $color-white;
border-top: 0;
border-left: 0;
- border-right: 1px solid #ccc;
- border-bottom: 1px solid #ccc;
+ border-right: 1px solid $color-gray;
+ border-bottom: 1px solid $color-gray;
&:not(.placed):not(:disabled):hover {
cursor: pointer;
- background: #0085b2;
+ background: $color-dark-blue;
}
&:not(.placed):not(:disabled):active {
diff --git a/components/TicTacToe/TicTacToe.vue b/components/TicTacToe/TicTacToe.vue
index 59894a3..0c6064b 100644
--- a/components/TicTacToe/TicTacToe.vue
+++ b/components/TicTacToe/TicTacToe.vue
@@ -10,47 +10,49 @@
label(:class="{ selected: difficulty === 'hard'}")
input#hard(type="radio" v-model="difficulty" name="difficulty" value="hard")
| hard
+
Board(:cellStates="cellStates" :finished="finished" @place="place")
button.new-game(@click="newGame") new game
p.result {{ lastResultString }}
.stats
h2 stats
table
- tr
- td wins
- td.wins.count {{ wins }}
- tr
- td draws
- td.draws.count {{ draws }}
- tr
- td losses
- td.losses.count {{ losses }}
+ tbody
+ tr
+ td wins
+ td.wins.count {{ wins }}
+ tr
+ td draws
+ td.draws.count {{ draws }}
+ tr
+ td losses
+ td.losses.count {{ losses }}