Add index.html, configure front end

hunter-richardson · Jun 29, 2024 · df3c700 · df3c700
1 parent a704b77
commit df3c700
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 149 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/res/picta/favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- <title>Structor Verborum</title> -->
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/figura.ts"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
     "deploy": "node src/scriptura/expedire.ts"
   },
   "dependencies": {
-    "pinia": "^2.1.7",
     "pleasejs": "^0.4.2",
     "vue": "^3.4.21"
   },

diff --git a/src/facies/index.vue → src/facies/appositus.vue b/src/facies/index.vue → src/facies/appositus.vue
@@ -1,6 +1,7 @@
 <script lang='ts'>
   import { useTheme } from 'vuetify';
   import { defineComponent, type ComponentOptionsWithoutProps } from 'vue';
+  import draggable from 'vuedraggable';
   import { transducatur, transduceretne } from '../scriptura/transducere';
   import { referretne, referatur } from '../scriptura/referre';
   import Cocutor, { type Crustulum } from '../miscella/cocutor';
@@ -60,22 +61,24 @@
     ];
 
   const componenta: ComponentOptionsWithoutProps = {
+    'draggable': draggable,
     'gustulare': gustulare,
     'calculare': calculare,
     'quaerere': quaerere,
     'numerare': numerare
   };
 
   const data = (): {
-    name: string,
-    gustulus: Gustulus,
-    locutionis: boolean,
-    referret: boolean,
+    separatores: Separatores,
     transduceret: boolean,
+    referret: boolean,
+    locutionis: boolean,
+    gustulus: Gustulus,
     crustula: Crustula,
-    separatores: Separatores,
+    trahens: boolean,
+    annulus: string,
     annuli: Annuli,
-    annulus: string;
+    name: string;
   } => {
     return {
       name: crustula.lingua === 'anglica' ? 'Phrase Factory' : 'Structor Verborum',
@@ -85,6 +88,7 @@
       transduceret: transduceretne(),
       separatores: separatores,
       crustula: crustula,
+      trahens: false,
       annuli: [],
       annulus: ''
     };
@@ -197,31 +201,33 @@
 <template lang='vue'>
 	<gustulare :gustulus='gustulus' />
   <template v-if="crustula.assensus === 'assensit'">
-    <v-speed-dial id='crustula' location='bottom center' transition='fade-transition' open-on-click>
-      <template #activator='{ props: activator }'>
-        <v-fab v-bind='activator' size='medium' icon='cake' />
-      </template>
-      <v-fab key='facies' id='crustula.facies'
-             :icon="crustula.facies === 'fusca' ? 'light_mode' : 'dark_mode'"
-             @click="coque({ nomen: 'facies', valor: crustula.facies === 'fusca' ? 'illustris' : 'fusca' });" />
-      <v-fab key='apices' id='crustula.apices'
-             :text="crustula.apices === 'ita' ? 'ā' : 'a'"
-             @click="coque({ nomen: 'apices', valor: crustula.apices === 'ita' ? 'non' : 'ita' });" />
-      <v-fab key='magnas' id='crustula.magnas'
-             :text="crustula.magnas === 'ita' ? 'A' : 'a'"
-             @click="coque({ nomen: 'magnas', valor: crustula.magnas === 'ita' ? 'non' : 'ita' });" />
-      <v-fab key='utendaU' id='crustula.utendaU'
-             :text="crustula.utendaU === 'ita' ? 'v' : 'u'"
-             @click="coque({ nomen: 'utendaU', valor: crustula.utendaU === 'ita' ? 'non' : 'ita' });" />
-      <v-btn-toggle key='separator'>
-        <v-btn v-for='separator in separatores' :key='separator'
-               @click="coque({ nomen: 'separator', valor: separator.clavis })"
-               :text="` ${separator.valor} `" :id="`crustula.separator.${separator.clavis}`"
-               selected-class='text-primary' />
-      </v-btn-toggle>
-    </v-speed-dial>
-  </template>
-  <v-card>
+    <draggable @start='trahens = true' @end='trahens = false'>
+      <v-speed-dial id='crustula' location='bottom center' transition='fade-transition' open-on-click>
+        <template #activator='{ props: activator }'>
+          <v-fab v-bind='activator' size='medium' icon='cake' />
+        </template>
+<v-fab key='facies' id='crustula.facies'
+       :icon="crustula.facies === 'fusca' ? 'light_mode' : 'dark_mode'"
+       @click="coque({ nomen: 'facies', valor: crustula.facies === 'fusca' ? 'illustris' : 'fusca' });" />
+<v-fab key='apices' id='crustula.apices'
+       :text="crustula.apices === 'ita' ? 'ā' : 'a'"
+       @click="coque({ nomen: 'apices', valor: crustula.apices === 'ita' ? 'non' : 'ita' });" />
+<v-fab key='magnas' id='crustula.magnas'
+       :text="crustula.magnas === 'ita' ? 'A' : 'a'"
+       @click="coque({ nomen: 'magnas', valor: crustula.magnas === 'ita' ? 'non' : 'ita' });" />
+<v-fab key='utendaU' id='crustula.utendaU'
+       :text="crustula.utendaU === 'ita' ? 'v' : 'u'"
+       @click="coque({ nomen: 'utendaU', valor: crustula.utendaU === 'ita' ? 'non' : 'ita' });" />
+<v-btn-toggle key='separator'>
+          <v-btn v-for='separator in separatores' :key='separator'
+                  @click="coque({ nomen: 'separator', valor: separator.clavis })"
+                  :text="` ${separator.valor} `" :id="`crustula.separator.${separator.clavis}`"
+                  selected-class='text-primary' />
+        </v-btn-toggle>
+</v-speed-dial>
+</draggable>
+</template>
+<v-card>
     <v-app-bar density='compact' location='top' absolute flat tile>
       <v-app-bar-title text='StructorVerborum' />
       <template v-if='!locutionis'>
@@ -252,14 +258,14 @@
           </v-hover>
         </v-avatar>
       </v-card>
-    </v-app-bar>
-    <v-tabs v-model='annulus' align-tabs='center' density='compact' grow hide-slider mandatory>
+</v-app-bar>
+<v-tabs v-model='annulus' align-tabs='center' density='compact' grow hide-slider mandatory>
       <template v-for='annulus in annuli'>
         <v-tab :v-bind:key='annulus' :value='annulus' selected-class='text-primary'
                :id="`annulus_${annulus}`" density='compact' :text='annulus.titula' tile />
       </template>
     </v-tabs>
-    <v-tabs-window v-model='annulus'>
+<v-tabs-window v-model='annulus'>
       <v-tabs-window-item value='quaerere'>
         <quaerere />
       </v-tabs-window-item>
@@ -270,41 +276,50 @@
         <calculare />
       </v-tabs-window-item>
     </v-tabs-window>
-  </v-card>
-  <template v-if='!crustula.assensus'>
-    <v-footer absolute>
-      <div class='text-center'>
-        <span class='text-left'>
-          <div id='titulus.latinus'>
-            Hic crustula utantur ut singulas opteris pro usu tibi, aut crustula condita negare
-            optares et situm immutatum utereris, atque solum crustulum conditum erit renutus
-            eorum.<br><br>Noteris quod crustula plura mutabunt modum pariendo locutionum ergo
-            infidum esset vertere huc illucque.
-          </div>
-          <v-btn-toggle>
-            <v-btn text='Assentio' id='assentio' append-icon='handshake'
-                   @click="coque({ nomen: 'assensus', valor: 'assensit' });" />
-            <v-btn text='Nego' id='nego' append-icon='block'
-                   @click="coque({ nomen: 'assessus', valor: 'negavit' });" />
-          </v-btn-toggle>
-        </span>
-        <span class='text-left'>
-          <div id='titulus.anglicus'>
-            Here cookies are used so that you may choose details for your own experience. Or you can
-            choose not to store cookies and use the site unchanged; in this case, the only cookie
-            stored would be your refusal of them.<br><br>Note that most of these cookies will modify
-            the method of generating phrases, so switching them back-and-forth between modes will be
-            unreliable.
-          </div>
-          <v-btn-toggle>
-            <v-btn text='Agree' append-icon='handshake'
-                   @click="coque({ nomen: 'assensus', valor: 'assensit' });
-                           coque({ nomen: 'lingua', valor: 'anglica' });" />
-            <v-btn text='Refuse' append-icon='block'
-                   @click="coque({ nomen: 'assessus', valor: 'negavit' });" />
-          </v-btn-toggle>
-        </span>
-      </div>
-    </v-footer>
-  </template>
+</v-card>
+<template v-if='!crustula.assensus'>
+  <v-footer absolute>
+    <div class='text-center'>
+      <span class='text-left'>
+        <div id='titulus.latinus'>
+          Hic crustula utantur ut singulas opteris pro usu tibi, aut crustula condita negare
+          optares et situm immutatum utereris, atque solum crustulum conditum erit renutus
+          eorum.<br><br>Noteris quod crustula plura mutabunt modum pariendo locutionum ergo
+          infidum esset vertere huc illucque.
+        </div>
+        <v-btn-toggle>
+          <v-btn text='Assentio' id='assentio' append-icon='handshake'
+                 @click="coque({ nomen: 'assensus', valor: 'assensit' });" />
+          <v-btn text='Nego' id='nego' append-icon='block'
+                 @click="coque({ nomen: 'assessus', valor: 'negavit' });" />
+        </v-btn-toggle>
+      </span>
+      <span class='text-left'>
+        <div id='titulus.anglicus'>
+          Here cookies are used so that you may choose details for your own experience. Or you can
+          choose not to store cookies and use the site unchanged; in this case, the only cookie
+          stored would be your refusal of them.<br><br>Note that most of these cookies will modify
+          the method of generating phrases, so switching them back-and-forth between modes will be
+          unreliable.
+        </div>
+        <v-btn-toggle>
+          <v-btn text='Agree' append-icon='handshake' @click="coque({ nomen: 'assensus', valor: 'assensit' });
+          coque({ nomen: 'lingua', valor: 'anglica' });" />
+          <v-btn text='Refuse' append-icon='block'
+                 @click="coque({ nomen: 'assessus', valor: 'negavit' });" />
+        </v-btn-toggle>
+      </span>
+    </div>
+  </v-footer>
+</template>
 </template>
+
+<style>
+  .v-speed-dial {
+    position: absolute;
+  }
+
+  .v-btn--floating {
+    position: relative;
+  }
+</style>
diff --git a/src/facies/quaerere.vue b/src/facies/quaerere.vue
@@ -1,15 +1,21 @@
 <script lang='ts'>
   import { defineComponent, defineModel, type ComponentOptionsWithoutProps } from 'vue';
-  import Dictionarium, { type Lemma, type Eventus, type Quaerenda } from '../miscella/dictionarium';
-  import { anglicum, categoriae } from '../miscella/enumerationes';
   import inflectere from './inflectere.vue';
   import specere from './specere.vue';
   import loqui from './loqui.vue';
   import onerare from './onerare.vue'
+  import gustulare from './gustulare.vue';
+  import Gustulus from '../scriptura/gustulus';
+  import Dictionarium, { type Lemma, type Eventus, type Quaerenda } from '../miscella/dictionarium';
+  import { anglicum, categoriae } from '../miscella/enumerationes';
   import Cocutor from '../miscella/cocutor';
   import type { Verbum } from '../praebeunda/verba';
-  import Gustulus from '../scriptura/gustulus';
-  import gustulare from './gustulare.vue';
+
+  type Columnae = {
+    title: string,
+    key: string,
+    filter: ((verbum: Verbum, quaerendum: any) => boolean);
+  }[];
 
   const eventus: Eventus | undefined = defineModel<Eventus>('eventus').value;
   const verbum: Verbum | undefined = defineModel<Verbum>('verbum').value;
@@ -33,11 +39,7 @@
     };
   });
 
-  const columnae: {
-    title: string,
-    key: string,
-    filter: ((verbum: Verbum, quaerendum: any) => boolean)
-  }[] = [
+  const columnae: Columnae = [
     {
       latinum: 'lemma',
       anglicum: 'term',
@@ -83,15 +85,11 @@
     verbum: Verbum | undefined,
     quaerenda: Quaerenda,
     gustulus: Gustulus,
+    columnae: Columnae,
     onerans: boolean,
     anglica: boolean,
     lemmae: Lemma[],
     error: boolean,
-    columnae: {
-      title: string,
-      key: string,
-      filter: ((verbum: Verbum, quaerendum: string) => boolean) | ((verbum: Verbum, selecta: string[]) => boolean);
-    }[],
     categoriae: {
       title: string,
       value: string;

diff --git a/src/facies/specere.vue b/src/facies/specere.vue
@@ -38,11 +38,11 @@
       gustulus: new Gustulus({}),
       anglica: lingua === 'anglica',
       enclitica: enclitica,
+      propriabile: false,
+      multiplex: false,
       eventus: eventus,
       verbum: verbum,
       encliticum: '',
-      propriabile: false,
-      multiplex: false,
       valores: [],
     };
   };