add two way opinion binding, expand i18n and profile

jonvog · Jun 7, 2022 · ceae35a · ceae35a
1 parent 0bf6cea
commit ceae35a
Show file tree

Hide file tree

Showing 36 changed files with 2,213 additions and 1,286 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,8 @@
 # Local Netlify folder
 .netlify
 # PWA
-sw.*
+sw.*
+
+___tesseract/
+tesseract.js/
+tesseract.js-core/
diff --git a/app/character-diversion/app.vue b/app/character-diversion/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <Html :lang="$i18n.locale" :class="$colorMode?.value">
+  <Html :lang="$i18n.locale" :class="$colorMode?.value" :dir="direction">
 
   <Body class="
         antialiased
@@ -50,20 +50,20 @@ export default {
   },
   computed: {
     showHeader() {
-      return !['/discourse', '/'].includes(this.$route.matched[0].path)
+      return !['/discourse', '/', '/profile'].includes(this.$route.matched[0].path)
+    },
+    direction() {
+      return ['he', 'ar'].includes(this.$i18n.locale) ? 'rtl' : 'ltr'
     }
   }
 }
 
 </script>
-<style scoped>
-.page-enter-active,
-.page-leave-active {
-  transition: opacity 0.5s;
+<style>
+:where([dir="rtl"] *) {
+  text-align: right;
 }
-
-.page-enter,
-.page-leave-active {
-  opacity: 0;
+:where([lang="he"] *) {
+  font-family: var(--font-hebrew);
 }
 </style>
diff --git a/app/character-diversion/assets/main.css b/app/character-diversion/assets/main.css
@@ -2,38 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
+.page-back-enter-active,
+.page-back-leave-active,
 .page-enter-active,
 .page-leave-active {
   transition: all var(--transition-duration-300) var(--transition-timing-function-default);
 }
 
-.page-enter-from,
-.page-leave-to {
+.page-back-leave-to,
+.page-enter-from {
+  transform: translateX(100%) scale(1);
   opacity: 0;
 }
-
-.slide-right-enter-active,
-.slide-right-leave-active,
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition: all var(--transition-duration-300) var(--transition-timing-function-default);
-}
-
-.slide-left-enter-from {
-  transform: translateX(100%);
-  opacity: 0.5;
-}
-.slide-left-leave-to {
-  transform: translateY(100%);
-  opacity: 0.5;
-}
-.slide-right-enter-from {
-  transform: scale(0.9);
-  opacity: 0.5;
-}
-.slide-right-leave-to {
-  transform: translateX(100%);
-  opacity: 0.5;
+.page-back-enter-from,
+.page-leave-to {
+  transform: translateX(0%) scale(0.95);
+  opacity: 0;
 }
 
 .slide-enter-active,
@@ -80,9 +64,17 @@
   opacity: 0;
   transform: scaleY(0.9) translate(0px, 0);
 }
-
-/* 3. ensure leaving items are taken out of layout flow so that moving
-      animations can be calculated correctly. */
 .fade-leave-active {
   position: absolute;
+}
+
+
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.5s;
+}
+
+.page-enter,
+.page-leave-active {
+  opacity: 0;
 }
diff --git a/app/character-diversion/components/Button.vue b/app/character-diversion/components/Button.vue
@@ -1,7 +1,7 @@
 <template>
   <component :is="to ? NuxtLink : ButtonDefault" :to="to" :title="title" :disabled="disabled" :class="color" class="button flex items-center justify-center gap-2">
     <slot></slot>
-    <font-awesome-icon v-if="icon" :icon="['fa', icon]" fixed-width />
+    <font-awesome-icon v-if="iconName" :icon="['fa', iconName || icon]" fixed-width />
   </component>
 </template>
 <script lang="ts">
@@ -41,6 +41,21 @@ export default {
       ].includes(e)
     }
   },
+  computed: {
+    iconName() {
+      switch(this.$i18n.locale) {
+        case 'he':
+          if (this.icon === 'arrow-left') {
+            return 'arrow-right'
+          }
+          if (this.icon === 'arrow-right') {
+            return 'arrow-left'
+          }
+          break
+      }
+      return this.icon
+    },
+  },
 }
 </script>
 

diff --git a/app/character-diversion/components/Card.vue b/app/character-diversion/components/Card.vue
@@ -0,0 +1,22 @@
+<template>
+	<div class="
+		rounded-md
+		border
+		bg-white
+		border-beige-200
+		hover:bg-beige-100
+		hover:border-beige-300
+		dark:bg-neutral-900
+		dark:border-neutral-700
+		dark:hover:bg-neutral-800
+		dark:hover:border-neutral-600
+		dark:text-white
+		">
+		<slot></slot>
+	</div>
+</template>
+
+<script lang="ts">
+</script>
+<style>
+</style>
diff --git a/app/character-diversion/components/Discourse/Card.vue b/app/character-diversion/components/Discourse/Card.vue
diff --git a/app/character-diversion/components/Discourse/Sidebar.vue b/app/character-diversion/components/Discourse/Sidebar.vue
@@ -6,7 +6,8 @@
 		<!-- <pre>{{ $state.opinion.form.attributes.annotations }}</pre> -->
 		<!-- <pre>{{ $state.discourse.current.attributes.opinions }}</pre> -->
 		<!-- <pre>{{ $state.opinion.annotationTool }}</pre> -->
-		<Image :source="$state.discourse.current.attributes.featuredImage" />
+		<!-- {{$state.discourse.current.attributes.featuredImage}} -->
+		<Image :src="$state.discourse.current.attributes.featuredImage.data?.attributes" />
 		<h3 class="text-lg font-bold border-beige-300 p-5 flex w-full hover:bg-white cursor-pointer"
 			:class="{ 'border-b': !sidebarMinimized }" @click="sidebarMinimized = !sidebarMinimized">Opinions</h3>
 		<ListOpinions v-if="!sidebarMinimized" />

diff --git a/app/character-diversion/components/DiscourseCard.vue b/app/character-diversion/components/DiscourseCard.vue
@@ -0,0 +1,25 @@
+<template>
+	<Card class="min-h-[200px]">
+		<NuxtLink :to="`/discourse/${discourse.id}`" class="p-5 flex flex-col h-full">
+			<h2 class="text-2xl font-bold leading-5">{{ discourse.attributes.title }}</h2>
+			<span>{{ discourse.attributes.author.data?.attributes.name }}</span>
+			<span class="mt-auto"> {{ $f.utils.relativeTime(discourse.attributes.publishedAt) }}</span>
+		</NuxtLink>
+	</Card>
+</template>
+
+<script lang="ts">
+import { Discourse } from '@/types'
+export default {
+	name: 'Discourse Card',
+	props: {
+		discourse: Object as () => Discourse,
+	},
+	data() {
+		return {
+		}
+	},
+}
+</script>
+<style>
+</style>
diff --git a/app/character-diversion/components/Form/Signup.vue b/app/character-diversion/components/Form/Signup.vue
@@ -9,7 +9,6 @@
 </template>
 
 <script lang="ts">
-import axios from 'axios'
 export default {
   data() {
     return {

diff --git a/app/character-diversion/components/Glyphs/AnnotationTool.vue b/app/character-diversion/components/Glyphs/AnnotationTool.vue
@@ -1,13 +1,13 @@
 <template>
 	<circle v-for="annotation in allAnnotations" :cx="annotation.x" :cy="annotation.y" :r="radius"
-		class="fill-beige-300/10 stroke-beige-400/30 stroke pointer-events-none" :stroke-width="strokeWidth" />
+		class="fill-beige-300/10 stroke-beige-400/30 stroke" :class="{ 'pointer-events-none': edit, 'hover:fill-info-500/20 hover:stroke-info-500/70 cursor-pointer': !edit }" :stroke-width="strokeWidth" @click="activateOpinion(annotation.opinionId)"/>
 	<circle v-if="show" :cx="pointerPosition.x" :cy="pointerPosition.y" :r="radius / 1.25"
 		class="fill-info-500/20 stroke-info-500/70 stroke" :stroke-width="strokeWidth" @click="addAnnotation" />
 	<circle v-for="annotation in currentAnnotations" :cx="annotation.x" :cy="annotation.y" :r="radius"
 		class="fill-yellow-500/20 stroke-yellow-500/50 stroke hover:fill-alert-500/20 hover:stroke-alert-500/50"
 		:class="{ 'pointer-events-none': !edit || $f.utils.arrayContainsObject(allAnnotations, annotation)}"
-		:stroke-width="strokeWidth" @click="removeAnnotation(annotation)" @mouseenter="hoverRemove = true"
-		@mouseleave="hoverRemove = false" />
+		:stroke-width="strokeWidth" @click="removeAnnotation(annotation)" @pointerenter="hoverRemove = true"
+		@pointerleave="hoverRemove = false" />
 </template>
 <script lang="ts">
 import { SamsaGlyph, Opinion } from "~~/types"
@@ -41,6 +41,13 @@ export default {
 		}
 	},
 	methods: {
+		activateOpinion(id: string) {
+			const opinions = this.$state.discourse.current.attributes.opinions.data
+			console.log(opinions)
+			const opinion = opinions.find((opinion: Opinion) => opinion.id === id)
+			const selected = JSON.parse(JSON.stringify(opinion))
+			this.$state.opinion.active = selected
+		},
 		removeAnnotation(annotation: object) {
 			const annotations = this.$state.opinion.form.attributes.annotations[this.glyph.id]
 			annotations.splice(this.$f.utils.arrayContainsObject(annotations, annotation), 1)
@@ -77,7 +84,16 @@ export default {
 		},
 		allAnnotations() {
 			const annotations = []
-			this.$state.discourse.current.attributes.opinions.data.forEach((opinion: Opinion) => opinion.attributes.annotations && opinion.attributes.annotations[this.glyph.id]?.forEach((e) => annotations.push(e)))
+			this.$state.discourse.current.attributes.opinions.data.forEach((opinion: Opinion) => {
+				if (opinion.attributes.annotations) {
+					opinion.attributes.annotations[this.glyph.id]?.forEach((e) => {
+						console.log(this.currentAnnotations, e, this.$f.utils.arrayContainsObject(this.currentAnnotations, e))
+						if (this.$f.utils.arrayContainsObject(this.currentAnnotations, e) === undefined) {
+							annotations.push({...e, opinionId: opinion.id})
+						}
+					})
+				}
+			})
 			return annotations
 		},
 		pointerPosition() {

diff --git a/app/character-diversion/components/Glyphs/G.vue b/app/character-diversion/components/Glyphs/G.vue
@@ -20,6 +20,6 @@ export default {
 </script>
 <style scoped>
 :global(:where(.glyph-default)) {
-	fill: black;
+	fill: currentColor;
 }
 </style>
diff --git a/app/character-diversion/components/Glyphs/MiniGlyph.vue b/app/character-diversion/components/Glyphs/MiniGlyph.vue
@@ -2,7 +2,7 @@
 	<div class="flex items-center relative" :class="{'cursor-none': edit}">
 		<svg v-if="path || frame" :style="`width: ${fontSize}em; min-width: ${fontSize}em;`" :viewBox="viewBox"
 			:transform="transform" class="h-full" ref="svg"
-			@mouseleave="$state.opinion.annotationTool.id = null"
+			@pointerleave="$state.opinion.annotationTool.id = null"
 		>
 			<!-- <GlyphsGrid v-if="annotations" :width="characterWidth" :strokeWidth="strokeWidth" :scale="scale" /> -->
 			<GlyphsFrame v-if="frame" :scale="scale" :end="characterWidth" :strokeWidth="strokeWidth" />
@@ -59,7 +59,7 @@ export default {
 				this.scaling = (1000 / parseInt(window.getComputedStyle(this.$refs.svg).fontSize))
 				this.strokeWidth = this.scaling + 'px'
 			})
-			this.$refs.svg.addEventListener('mousemove', ({ offsetX, offsetY }) => { this.pointer = { x: offsetX, y: offsetY } })
+			this.$refs.svg.addEventListener('pointermove', ({ offsetX, offsetY }) => { this.pointer = { x: offsetX, y: offsetY } })
 		}
 	},
 	watch: {

diff --git a/app/character-diversion/components/Glyphs/Selection.vue b/app/character-diversion/components/Glyphs/Selection.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="grid grid-cols-autofill-16 gap-1 p-1" v-if="$state.opinion.font && $state.opinion.form.attributes">
-		<div
-			class="flex justify-center w-full h-16 bg-white rounded-md relative cursor-pointer border border-beige-100 hover:border-beige-200 hover:bg-neutral-50 overflow-hidden"
+		<Card
+			class="flex justify-center w-full h-16 relative overflow-hidden"
 			:class="{'opacity-10': dim(glyph.id)}"
 			v-for="(glyph, k) in $state.opinion.font.glyphs" :key="glyph.id" :title="glyph.name"
-			@mousedown="active = true, $f.glyphMethods.toggleGlyph(glyph.id)"
-			@mouseenter="active && $f.glyphMethods.toggleGlyph(glyph.id)">
-			<!-- @mousedown="active = true, first = k"
-          @mouseenter="active && (last = k)" -->
+			@pointerdown="active = true, $f.glyphMethods.toggleGlyph(glyph.id)"
+			@pointerenter="active && $f.glyphMethods.toggleGlyph(glyph.id)">
+			<!-- @pointerdown="active = true, first = k"
+          @pointerenter="active && (last = k)" -->
 			<GlyphsMiniGlyph class="text-4xl" :glyph="glyph" :tuple="$state.opinion.form.attributes.axes" :annotations="true" />
 			<Input type="checkbox" v-model="$state.opinion.form.attributes.glyphs" :value="glyph.id"
 				containerClass="absolute w-fit right-0 p-1 pointer-events-none" class="info z-10" />
@@ -25,7 +25,7 @@
 				{{ opinionTitles(glyph.id).length
 				}}
 			</div>
-		</div>
+		</Card>
 	</div>
 </template>
 
@@ -48,7 +48,7 @@ export default {
 		// }
 	},
 	mounted() {
-		window.addEventListener('mouseup', () => this.active = false);
+		window.addEventListener('pointerup', () => this.active = false);
 	},
 	methods: {
 		dim(id: number) {

diff --git a/app/character-diversion/components/Image.vue b/app/character-diversion/components/Image.vue
@@ -1,10 +1,10 @@
 <template>
-	<img v-if="source?.data" :src="src" :style="`--aspect-ratio: ${aspectRatio}`" />
+	<img v-if="src" :src="source" :style="`--aspect-ratio: ${aspectRatio}`" />
 </template>
 <script lang="ts">
 export default {
 	props: {
-		source: {
+		src: {
 			type: Object,
 		},
 		size: {
@@ -17,9 +17,10 @@ export default {
 		},
 	},
 	computed: {
-		src() {
-			console.log(process.env)
-			return 'http://localhost:1337' + this.source.data.attributes.formats[this.size].url
+		source() {
+			// console.log('this.src?.formats[this.size]?.url')
+			console.log(this.src)
+			return 'http://localhost:1337' + this.src?.formats[this.size]?.url
 		},
 	},
 }