Impostata tastiera e visualizzazione, FIX mettere pulsante nell'header, ToDo Catturare valori dei componenti alla conferma del mess

geografia-vue/src/components/ChatPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="chat-preview">
+  <button class="chat-preview" name="chat-preview">
     <div class="chat-picture">
       <figure>
         <img src="chat-picture" alt="chat-picture">

geografia-vue/src/components/keyboard/Keyboard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="keyboard" @click="selectWord">
+  <div class="keyboard" @click="selectedWord('⛸️')">
     <p>I'm writing hereee</p>
   </div>
 </template>
@@ -7,8 +7,8 @@
 <script>
 export default {
   methods: {
-    selectedWord() {
+    selectedWord(word) {
-      this.$emit("selectedWord", "a");
+      this.$emit("selectedWord", word);
     },
   },
 };

geografia-vue/src/components/keyboard/KeyboardWord.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="keyboard-word">
-    <p>placeholder word</p>
+    <label for="word">
+      <input type="text" />
+    </label>
   </div>
 </template>
 

geografia-vue/src/components/keyboard/MessageComposition.vue

@@ -1,28 +1,35 @@
 <script setup>
 import Keyboard from "./Keyboard.vue";
 import KeyboardWord from "./KeyboardWord.vue";
+import PhraseType from "./PhraseType.vue";
 </script>
 
 <template>
   <div>
-    <KeyboardWord :key="soggetto" @click="test" />
+    <button alt="Back" name="Back" @click="this.$emit('hideMessageHistory')">←</button>
-    <KeyboardWord :key="oggetto" @click="test" />
+    <KeyboardWord ref="subject" />
-    <KeyboardWord :key="verbo" @click="test" />
+    <KeyboardWord ref="object" />
+    <KeyboardWord ref="verb" />
+    <PhraseType />
+    <button name="confirm" @click="confirm">OK?</button>
     <Keyboard @selectedWord="selectedWord" />
   </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return { focus: "" };
-  },
   methods: {
-    test(e) {
+    selectedWord(e) {
-      console.log(e);
+      console.log("selectedWord", e);
     },
-    selectedWord() {
+    confirm() {
-      console.log("selectedWord");
+      var message = {
+        subject: this.$refs.subject.items,
+        object: this.$refs.object.items,
+        verb: this.$refs.verb.items,
+        tipo_frase: this.$refs.phraseType.items,
+      };
+      console.log(message);
     },
   },
 };

geografia-vue/src/components/keyboard/PhraseType.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="phrase-type-selection" @click="popup = true">
+    <p>+|-|?-|?+</p>
+  </div>
+  <div class="popup" v-if="popup">
+    <button name="phrase-type" value="+" @click="selectedPhraseType('+')">
+      +
+    </button>
+    <button name="phrase-type" value="-" @click="selectedPhraseType('-')">
+      -
+    </button>
+    <button name="phrase-type" value="?-" @click="selectedPhraseType('?-')">
+      ?-
+    </button>
+    <button name="phrase-type" value="?+" @click="selectedPhraseType('?+')">
+      ?+
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return { phraseType: null, popup: false };
+  },
+  methods: {
+    selectedPhraseType(phraseType) {
+      this.phraseType = phraseType;
+    },
+  },
+};
+</script>
+<style scoped></style>