Draft of a mastermind.

2022-01-23 13:46:01 +01:00
parent f4d1c0a863
commit 03f3f0154e
4 changed files with 348 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,5 @@ docs/_book
 # TODO: where does this rule come from?
 test/

+/node_modules/
+.idea
--- a/index.html
+++ b/index.html
@@ -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>
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -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"
+  }
+}