krzysiej/vue-mastermind
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Draft of a mastermind.

Browse Source
This commit is contained in:
kplaczek
2022-01-23 13:46:01 +01:00
parent f4d1c0a863
commit 03f3f0154e
4 changed files with 348 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -9,3 +9,5 @@ docs/_book
# TODO: where does this rule come from? # TODO: where does this rule come from?
test/ test/
/node_modules/
.idea

151
index.html Normal file
View File

@@ -0,0 +1,151 @@
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<title>Vue Mastermind</title>
<!-- <script src="https://unpkg.com/vue@next"></script>-->
<script src="node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button class="btn btn-primary" v-if="!isStarted" @click="startGame">Start game</button>
<button class="btn btn-secondary" v-if="isStarted" @click="stopGame">Stop game</button>
<button class="btn btn-warning" v-if="isStarted" @click="resetGame">Reset game</button>
<div class="d-flex justify-content-evenly">
<div v-for="holeIndex in numberOfHoles" @click="selectHole(holeIndex)"
:class="[possibleColors[currentAnswer[holeIndex]], {'hole--selected': selectedHole === holeIndex}]"
class="rounded-circle p-3 hole"></div>
<button class="btn btn-primary" @click="submitAnswer">Wyślij odpowiedź</button>
</div>
<div>Color picker:</div>
<div class="d-flex justify-content-evenly">
<div v-for="colorIndex in numberOfColors" @click="selectColor(colorIndex)"
:class="[possibleColors[colorIndex], {'hole--selected': selectedColor === colorIndex}]"
class="rounded-circle p-3 hole"
></div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
const mastermind = {
data() {
return {
isStarted: false,
numberOfColors: 8,
numberOfPossibleAnswers: 12,
numberOfHoles: 5,
code: [],
answers: [],
hints: [],
currentAnswer: [],
selectedColor: null,
selectedHole: null,
possibleColors: [
"blue", "purple", "pink", "red", "orange", "yellow", "teal", "cyan", "black", "gray"
]
}
},
methods: {
selectHole: function(index){
this.selectedHole = index;
if(this.selectedColor){
this.currentAnswer[index] = this.selectedColor;
}
},
selectColor: function (index) {
if(this.selectedHole){
this.currentAnswer[this.selectedHole] = index;
}
this.selectedColor = index;
},
startGame: function () {
this.isStarted = true;
this.currentAnswer = Array(this.numberOfHoles).fill(null);
},
resetGame: function () {
}
},
mounted() {
}
}
Vue.createApp(mastermind).mount('#app')
</script>
<style>
.blue {
background-color: dodgerblue;
}
.purple {
background-color: rebeccapurple
}
.pink {
background-color: deeppink
}
.red {
background-color: red
}
.orange {
background-color: orange
}
.yellow {
background-color: yellow
}
.teal {
background-color: teal
}
.cyan {
background-color: cyan
}
.black {
background-color: #555
}
.gray {
background-color: slategray
}
.hole.hole--selected {
border-color: black;
box-shadow: 0 0 4px #333;
}
.hole {
border: 2px solid #888;
box-shadow: 0 0 1px #777;
height: 50px;
width: 50px;
}
</style>
</body>
</html>

177
package-lock.json generated Normal file
View File

@@ -0,0 +1,177 @@
{
"name": "vue-mastermind",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/parser": {
"version": "7.16.12",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.16.12.tgz",
"integrity": "sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A=="
},
"@vue/compiler-core": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.28.tgz",
"integrity": "sha512-mQpfEjmHVxmWKaup0HL6tLMv2HqjjJu7XT4/q0IoUXYXC4xKG8lIVn5YChJqxBTLPuQjzas7u7i9L4PAWJZRtA==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/shared": "3.2.28",
"estree-walker": "^2.0.2",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.28.tgz",
"integrity": "sha512-KA4yXceLteKC7VykvPnViUixemQw3A+oii+deSbZJOQKQKVh1HLosI10qxa8ImPCyun41+wG3uGR+tW7eu1W6Q==",
"requires": {
"@vue/compiler-core": "3.2.28",
"@vue/shared": "3.2.28"
}
},
"@vue/compiler-sfc": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.28.tgz",
"integrity": "sha512-zB0WznfEBb4CbGBHzhboHDKVO5nxbkbxxFo9iVlxObP7a9/qvA5kkZEuT7nXP52f3b3qEfmVTjIT23Lo1ndZdQ==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.28",
"@vue/compiler-dom": "3.2.28",
"@vue/compiler-ssr": "3.2.28",
"@vue/reactivity-transform": "3.2.28",
"@vue/shared": "3.2.28",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7",
"postcss": "^8.1.10",
"source-map": "^0.6.1"
}
},
"@vue/compiler-ssr": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.28.tgz",
"integrity": "sha512-z8rck1PDTu20iLyip9lAvIhaO40DUJrw3Zv0mS4Apfh3PlfWpF5dhsO5g0dgt213wgYsQIYVIlU9cfrYapqRgg==",
"requires": {
"@vue/compiler-dom": "3.2.28",
"@vue/shared": "3.2.28"
}
},
"@vue/reactivity": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.28.tgz",
"integrity": "sha512-WamM5LGv7JIarW+EYAzYFqYonZXjTnOjNW0sBO93jRE9I1ReAwfH8NvQXkPA3JZ3fuF6SGDdG8Y9/+dKjd/1Gw==",
"requires": {
"@vue/shared": "3.2.28"
}
},
"@vue/reactivity-transform": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.28.tgz",
"integrity": "sha512-zE8idNkOPnBDd2tKSIk84hOQZ+jXKvSy5FoIIVlcNEJHnCFnQ3maqeSJ9KoB2Rf6EXUhFTiTDNRlYlXmT2uHbQ==",
"requires": {
"@babel/parser": "^7.16.4",
"@vue/compiler-core": "3.2.28",
"@vue/shared": "3.2.28",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7"
}
},
"@vue/runtime-core": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.28.tgz",
"integrity": "sha512-sVbBMFUt42JatTlXbdH6tVcLPw1eEOrrVQWI+j6/nJVzR852RURaT6DhdR0azdYscxq4xmmBctE0VQmlibBOFw==",
"requires": {
"@vue/reactivity": "3.2.28",
"@vue/shared": "3.2.28"
}
},
"@vue/runtime-dom": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.28.tgz",
"integrity": "sha512-Jg7cxZanEXXGu1QnZILFLnDrM+MIFN8VAullmMZiJEZziHvhygRMpi0ahNy/8OqGwtTze1JNhLdHRBO+q2hbmg==",
"requires": {
"@vue/runtime-core": "3.2.28",
"@vue/shared": "3.2.28",
"csstype": "^2.6.8"
}
},
"@vue/server-renderer": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.28.tgz",
"integrity": "sha512-S+MhurgkPabRvhdDl8R6efKBmniJqBbbWIYTXADaJIKFLFLQCW4gcYUTbxuebzk6j3z485vpekhrHHymTF52Pg==",
"requires": {
"@vue/compiler-ssr": "3.2.28",
"@vue/shared": "3.2.28"
}
},
"@vue/shared": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.28.tgz",
"integrity": "sha512-eMQ8s9j8FpbGHlgUAaj/coaG3Q8YtMsoWL/RIHTsE3Ex7PUTyr7V91vB5HqWB5Sn8m4RXTHGO22/skoTUYvp0A=="
},
"csstype": {
"version": "2.6.19",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
"integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
},
"estree-walker": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
"magic-string": {
"version": "0.25.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
"integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
"requires": {
"sourcemap-codec": "^1.4.4"
}
},
"nanoid": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
"integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA=="
},
"picocolors": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
},
"postcss": {
"version": "8.4.5",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
"integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
"requires": {
"nanoid": "^3.1.30",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.1"
}
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"source-map-js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
},
"sourcemap-codec": {
"version": "1.4.8",
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
"vue": {
"version": "3.2.28",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.2.28.tgz",
"integrity": "sha512-U+jBwVh3RQ9AgceLFdT7i2FFujoC+kYuGrKo5y8aLluWKZWPS40WgA2pyYHaiSX9ydCbEGr3rc/JzdqskzD95g==",
"requires": {
"@vue/compiler-dom": "3.2.28",
"@vue/compiler-sfc": "3.2.28",
"@vue/runtime-dom": "3.2.28",
"@vue/server-renderer": "3.2.28",
"@vue/shared": "3.2.28"
}
}
}
}

18
package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "vue-mastermind",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://git.techtube.pl/krzysiej/vue-mastermind.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^3.2.28"
}
}