8.2. active key state

ApayRus · Jun 26, 2022 · f5ab715 · f5ab715
1 parent 3c24e6d
commit f5ab715
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/components/Key.js b/components/Key.js
@@ -24,12 +24,18 @@ const getKeyLabels = keyContent => {
 
 const Key = {
 	template: `
-    <div class="key">
-        <div class="main">{{main}}</div>
-        <div class="shifted">{{shifted}}</div>
-    </div>`,
+    <div
+		:class="[
+				'key', 
+				{active: activeKey.code === keyContent.code}
+				]"
+	>
+	<div class="main">{{main}}</div>
+	<div class="shifted">{{shifted}}</div>
+</div>`,
 	props: {
-		keyContent: Object
+		keyContent: Object,
+		activeKey: Object
 	},
 	computed: {
 		main() {

diff --git a/components/Keyboard.js b/components/Keyboard.js
@@ -10,7 +10,8 @@ const Keyboard = {
 		>
 			<vue-key
 				v-for="keyContent in row"
-				:keyContent="keyContent"
+				:keyContent="keyContent" 
+				:activeKey="activeKey" 
 			/>
 		</div>
 	</div>`,
@@ -41,6 +42,10 @@ const Keyboard = {
 			const { code, key, shiftKey } = event
 			/* write event parts to the state: */
 			this.activeKey = { code, key, shiftKey }
+			/* if there was old timeout, we clear it*/
+			clearTimeout(this.timeout)
+			/* store a new timeout for the last pressed key */
+			this.timeout = setTimeout(() => (this.activeKey = { code: '' }), 1000)
 		})
 	},