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/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>