add keybinds to btns in exam

README.md

@@ -18,7 +18,7 @@ The newest at the moment of me writing this (December 13th 2025) are the (visual
 - [x] <b>Fixed?</b> Needs testing, but should be fine question-mark? - fix pinia middleware between pages, MAJOR ISSUE - finishing exam sometimes redirects to homepage instead of results
 - [x] question timers
 - [x] exam (& results?) warning leave message on exit and timer end (and definitely on refresh)
-- [ ] add keybinds:
+- [x] add keybinds:
   - S - start
   - D - nast.pyt
   - X - koniec egzaminu (na pewno chcesz zakonczyc egzamin?)

components/bar/right/Exam.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core';
+
 const props = defineProps<{
   countBasic: number;
   countAdvanced: number;
@@ -23,13 +25,35 @@ function tryEndExam() {
     emit('endExam');
   }
 }
+
+const startButton = useTemplateRef('start-button');
+
+onKeyStroke(['S', 's'], () => {
+  startButton.value?.click();
+});
+
+const nextButton = useTemplateRef('next-button');
+
+onKeyStroke(['D', 'd'], () => {
+  nextButton.value?.click();
+});
+
+const endButton = useTemplateRef('end-button');
+
+onKeyStroke(['X', 'x'], () => {
+  endButton.value?.click();
+});
 </script>
 
 <template>
   <div
     class="flex flex-col items-stretch p-4 gap-10 border-l border-base-300 bg-base-100"
   >
-    <button class="btn btn-warning btn-xl" @click="tryEndExam()">
+    <button
+      ref="end-button"
+      class="btn btn-warning btn-xl"
+      @click="tryEndExam()"
+    >
       Zakończ egzamin
     </button>
 
@@ -55,7 +79,13 @@ function tryEndExam() {
     >
       <span>Czas na zapoznanie się z pytaniem</span>
       <div class="flex flex-row items-stretch gap-2">
-        <div class="btn btn-primary" @click="emit('nextTime')">START</div>
+        <div
+          ref="start-button"
+          class="btn btn-primary"
+          @click="emit('nextTime')"
+        >
+          START
+        </div>
         <div class="h-full flex-1 relative">
           <progress
             class="progress progress-warning w-full h-full"
@@ -83,9 +113,48 @@ function tryEndExam() {
       </div>
     </div>
 
-    <div class="flex-1"></div>
+    <div class="flex-1">
+      <span class="text-xl">Skróty klawiszowe</span>
+      <table class="table table-sm">
+        <tbody>
+          <tr>
+            <td>S</td>
+            <td>niebieski przycisk start</td>
+          </tr>
+          <tr>
+            <td>D</td>
+            <td>następne pytanie</td>
+          </tr>
+          <tr>
+            <td>X</td>
+            <td>zakończ egzamin</td>
+          </tr>
+          <tr>
+            <td>T / Y</td>
+            <td>Tak</td>
+          </tr>
+          <tr>
+            <td>N</td>
+            <td>Nie</td>
+          </tr>
+          <tr>
+            <td>A</td>
+            <td>A</td>
+          </tr>
+          <tr>
+            <td>B</td>
+            <td>B</td>
+          </tr>
+          <tr>
+            <td>C</td>
+            <td>C</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
     <button
+      ref="next-button"
       class="btn btn-warning btn-xl"
       :disabled="ending || setBasic"
       @click="emit('nextQuestion')"

components/question/Advanced.vue

@@ -1,10 +1,36 @@
 <script lang="ts" setup>
-defineProps<{
+import { onKeyStroke } from '@vueuse/core';
+
+const props = defineProps<{
   question: Question;
   phase: string;
 }>();
 
 const answer = defineModel<string | null | undefined>();
+
+const aButton = useTemplateRef('A-button');
+
+onKeyStroke(['A', 'a'], () => {
+  if (props.phase != 'result') {
+    aButton.value[0].click();
+  }
+});
+
+const bButton = useTemplateRef('B-button');
+
+onKeyStroke(['B', 'b'], () => {
+  if (props.phase != 'result') {
+    bButton.value[0].click();
+  }
+});
+
+const cButton = useTemplateRef('C-button');
+
+onKeyStroke(['C', 'c'], () => {
+  if (props.phase != 'result') {
+    cButton.value[0].click();
+  }
+});
 </script>
 
 <template>
@@ -25,6 +51,7 @@ const answer = defineModel<string | null | undefined>();
       >
         <input
           :id="`odp_${element}`"
+          :ref="`${element}-button`"
           v-model="answer"
           type="radio"
           name="abc"

components/question/Basic.vue

@@ -1,10 +1,28 @@
 <script lang="ts" setup>
-defineProps<{
+import { onKeyStroke } from '@vueuse/core';
+
+const props = defineProps<{
   question: Question;
   phase: string;
 }>();
 
 const answer = defineModel<string | null | undefined>();
+
+const yesButton = useTemplateRef('true-button');
+
+onKeyStroke(['T', 't', 'Y', 'y'], () => {
+  if (props.phase != 'result') {
+    yesButton.value[0].click();
+  }
+});
+
+const noButton = useTemplateRef('false-button');
+
+onKeyStroke(['N', 'n'], () => {
+  if (props.phase != 'result') {
+    noButton.value[0].click();
+  }
+});
 </script>
 
 <template>
@@ -19,6 +37,7 @@ const answer = defineModel<string | null | undefined>();
         <input
           v-for="[element, value] of Object.entries({ TAK: true, NIE: false })"
           :id="`odp_${element}`"
+          :ref="`${value}-button`"
           :key="`btn_answer_${element}`"
           v-model="answer"
           type="radio"