Commit b6e7a065 authored by f5-bit's avatar f5-bit
Browse files

feat: change color on checkPin (according to correctness)

parent be39a885
......@@ -4,7 +4,7 @@
<div id="title">
<h1>Bitte L&ouml;sungsziffern eingeben!</h1>
</div>
<Lock v-model="pin" :dial-count="3" @enter="checkPin" />
<Lock v-model="pin" :dial-count="4" @enter="checkPin" :state="state" />
</div>
</div>
</template>
......@@ -38,12 +38,26 @@ function equals<T extends Uint16Array>(a: T, b: T): boolean {
<script setup lang="ts">
import Lock from "./components/Lock.vue";
const pin = ref<string>("");
const state = ref<"default" | "correct" | "incorrect">("default");
const correct = ref(false);
let resetTimeout: number | undefined = undefined;
async function checkPin(pin: string) {
const hash = new Uint16Array(await sha256(unref(pin)));
console.log(hash);
correct.value = equals(hash, unref(correctHash));
if (equals(hash, unref(correctHash))) {
correct.value = true;
state.value = "correct";
} else {
correct.value = false;
state.value = "incorrect";
}
if (resetTimeout) {
window.clearTimeout(resetTimeout);
}
resetTimeout = window.setTimeout(() => {
state.value = 'default';
}, 5000)
}
</script>
</script>
\ No newline at end of file
<template>
<div class="myCenter">
<div id="lock" ref="lock" class="myLock">
<div id="lock" ref="lock" class="myLock" :class="state">
<div class="lockInset">
<div class="lockLine"></div>
<div class="lockWrapper">
......@@ -35,7 +35,7 @@ function* generateDigits(selected: Digit): Generator<Digit, void, void> {
</script>
<script setup lang="ts">
const props = defineProps<{ modelValue: string; dialCount?: number }>();
const props = defineProps<{ modelValue: string; dialCount?: number; state?:"default" | "correct" | "incorrect" }>();
const emits = defineEmits<{
(e: "update:modelValue", code: string): void;
(e: "enter", code: string): void;
......@@ -44,6 +44,7 @@ const emits = defineEmits<{
const combo = useVModel(props, "modelValue", emits);
const dialCount = toRef(props, "dialCount");
const state = toRef(props, "state");
const selection = computed(() => {
const selection: Digit[] = [];
......@@ -98,16 +99,28 @@ function dialMove(
0 2px 5px 1px rgba(0, 0, 0, 0.7);
}
.myLock .lockInset {
--color-background: linear-gradient(white, #dcd3ca);
--color-shadow: #b1aaa1;
display: inline-block;
position: relative;
padding: 23px;
background: linear-gradient(white, #dcd3ca);
background: var(--color-background);
border-radius: 15px;
box-shadow: inset 0 -8px 4px -4px #b1aaa1, 0 7px 10px rgba(0, 0, 0, 0.07),
box-shadow: inset 0 -8px 4px -4px var(--color-shadow), 0 7px 10px rgba(0, 0, 0, 0.07),
0 14px 10px rgba(0, 0, 0, 0.07), 0 20px 10px rgba(0, 0, 0, 0.07),
0 27px 10px rgba(0, 0, 0, 0.07), 0 34px 10px rgba(0, 0, 0, 0.07),
0 2px 3px 1px rgba(0, 0, 0, 0.5);
}
.myLock.correct .lockInset {
--color-background: linear-gradient(rgb(128, 214, 126), #3a8541);
--color-shadow: #0f4621;
}
.myLock.incorrect .lockInset {
--color-background: linear-gradient(rgb(214, 126, 126), #853a3a);
--color-shadow: #460f0f;
}
.myLock .lockLine {
position: absolute;
margin: auto -23px;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment