152 lines
4.0 KiB
HTML
152 lines
4.0 KiB
HTML
<!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>
|