86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
|
<button v-if="true"
|
|
@click="onclick"
|
|
class="gw-div"
|
|
:class="{
|
|
'less': correctness==-3,
|
|
'more': correctness==-2,
|
|
'default': correctness==0,
|
|
'cw-cp': correctness==4,
|
|
'cw-ip': correctness==3,
|
|
'cf-cp': correctness==2,
|
|
'cf-ip': correctness==1
|
|
}">
|
|
<slot></slot>
|
|
</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
export default {
|
|
data() {
|
|
return {
|
|
modal_open: false,
|
|
}
|
|
},
|
|
props: {
|
|
correctness: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
methods: {
|
|
onclick () {
|
|
if (this.correctness == 2) this.$emit('pressed_wordle');
|
|
}
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-enter-active {
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
.gw-div::first-letter {
|
|
font-weight: bold;
|
|
}
|
|
.gw-div {
|
|
border-radius: 10px;
|
|
padding: 8px;
|
|
margin: 5px;
|
|
justify-content: center;
|
|
background-color: grey;
|
|
color: white;
|
|
}
|
|
.gw-button {
|
|
}
|
|
|
|
.default {
|
|
background-color: var(--incorrect-guess)
|
|
}
|
|
.more {
|
|
background-color: rgb(255, 0, 0);
|
|
}
|
|
.less {
|
|
background-color: rgb(129, 112, 0);
|
|
}
|
|
.cw-cp {
|
|
background-color: var(--correct-guess)
|
|
}
|
|
.cw-ip {
|
|
background-color: rgb(98, 175, 99);
|
|
}
|
|
.cf-cp {
|
|
background-color: var(--partial-correct-guess);
|
|
border: solid white;
|
|
}
|
|
.cf-cp.hover {
|
|
background-color: #4CAF50; /* Green */
|
|
}
|
|
.cf-cp.focus {
|
|
background-color: red;
|
|
}
|
|
.cf-ip {
|
|
background-color: rgb(106, 108, 160);
|
|
}
|
|
</style> |