@windward/games 0.0.9 → 0.1.0

package/components/content/blocks/flashcards/CardFace.vue

@@ -1,37 +1,33 @@
 <template>
-    <div
-        v-bind:style="{
-            color: textColor,
-        }"
-    >
-        <v-row class="card-header" align="center" justify="center">
-            <content-viewer v-model="settings.header" />
-        </v-row>
+    <v-container>
         <br />
         <div class="card-content">
+            <v-row align="center" justify="center">
+                <content-viewer :class="textClass" v-model="settings.text" />
+            </v-row>
+            <br />
             <v-row
-                :class="settings.img ? '' : ' text-justify  '"
+                no-gutters
                 align="center"
                 justify="center"
+                v-if="settings.img !== ''"
             >
-                <content-viewer :class="textClass" v-model="settings.text" />
-            </v-row>
-            <v-row align="center" justify="center" v-if="settings.img !== ''">
                 <v-img
                     contain
                     :aspect-ratio="16 / 9"
                     :src="settings.img"
                     :alt="settings.altText"
-                    max-height="250"
+                    max-height="210"
                     max-width="600"
                 />
             </v-row>
+            <br />
         </div>
-
-        <v-row class="card-footer" align="center" justify="center">{{
-            settings.footer
-        }}</v-row>
-    </div>
+        <v-row class="card-footer pt-4" align="center" justify="center">
+            {{ settings.footer }}&nbsp;
+            <v-icon color="primary">mdi-orbit-variant</v-icon>
+        </v-row>
+    </v-container>
 </template>
 
 <script>
@@ -42,16 +38,21 @@ export default {
     components: { ContentViewer },
     props: {
         settings: { type: Object },
-        textColor: { type: String },
+        side: { type: String },
     },
     computed: {
         textClass() {
             if (
                 !this.settings.img &&
                 this.settings.text &&
-                this.settings.text.length < 300
+                this.settings.text.length < 100 &&
+                this.side === 'front'
             ) {
-                return 'centered'
+                return 'text-justify centered card-content--bold'
+            }
+
+            if (this.side === 'front') {
+                return 'text-center card-content--bold'
             }
             if (
                 !this.settings.img &&
@@ -59,38 +60,35 @@ export default {
                 (MathHelper.containsMathML(this.settings.text.length) ||
                     MathHelper.containsLatex(this.settings.text.length))
             ) {
-                return 'centered'
+                return 'text-justify centered'
             }
 
-            if (
-                !this.settings.img &&
-                this.settings.text &&
-                this.settings.text.length > 100 &&
-                !(
-                    MathHelper.containsMathML(this.settings.text.length) ||
-                    MathHelper.containsLatex(this.settings.text.length)
-                )
-            ) {
-                return 'paragraph'
-            }
 
-            return ''
+            return 'px-6  text-justify'
         },
     },
     methods: {},
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .card-header {
-    font-weight: bold;
 }
 .card-content {
+    color: var(--v-primary-base);
+    font-size: 1rem;
+}
+.card-content--bold {
     font-weight: bold;
-    margin: 5px;
+    font-size: 1.5rem;
+}
+
+p.card-content {
+    font-size: 1.5rem !important;
 }
 .card-footer {
     font-weight: bold;
+    color: var(--v-primary-base);
 }
 .centered {
     margin: 0;
@@ -102,11 +100,12 @@ export default {
 .card-footer {
     margin: 0;
     position: absolute;
-    top: 95%;
+    top: 90%;
     left: 50%;
     transform: translate(-50%, -50%);
+    color: var(--v-primary-base);
 }
 .paragraph {
-    margin: 2%;
+    margin: 5%;
 }
 </style>

package/components/content/blocks/flashcards/Flashcard.vue

@@ -1,33 +1,31 @@
 <template>
-    <v-container>
-        <v-card
-            @click="toggleCard"
-            v-show="value"
-            :class="cardClass"
-            max-height="900"
-            min-height="460"
-        >
-            <card-face :settings="frontFace"></card-face>
+    <v-container style="height: 100%" class="div-container">
+        <v-card outlined @click="toggleCard" v-show="value" :class="cardClass">
+            <v-card-text>
+                <card-face :settings="frontFace" side="front"></card-face>
+            </v-card-text>
         </v-card>
-        <v-card
-            @click="toggleCard"
-            v-show="!value"
-            :class="cardClass"
-            max-height="900"
-            min-height="460"
-        >
-            <card-face :settings="backFace"></card-face>
+        <v-card outlined @click="toggleCard" v-show="!value" :class="cardClass">
+            <v-card-title class="card-title">
+                <v-row align="center" justify="center">{{
+                    backFace.header
+                }}</v-row>
+            </v-card-title>
+            <v-card-text>
+                <cardFace :settings="backFace" side="back"></cardFace>
+            </v-card-text>
         </v-card>
     </v-container>
 </template>
 <script>
 import CardFace from './CardFace'
+import _ from 'lodash'
 export default {
     components: { CardFace },
     data() {
         return {
             settings: {},
-            cardClass: 'animated flashcard',
+            flip: false,
         }
     },
     props: {
@@ -37,6 +35,22 @@ export default {
     },
 
     computed: {
+        cardClass() {
+            let result = 'animated flashcard'
+            if (this.flip) {
+                result = result + ' flipInY'
+            }
+
+            if (this.frontFace.img === '' && this.backFace.img === '') {
+                result = result + ' flashcard--size-md'
+            }
+
+            if (this.frontFace.img !== '' || this.backFace.img !== '') {
+                result = result + ' flashcard--size-lg'
+            }
+
+            return result
+        },
         frontFace() {
             return {
                 img:
@@ -49,7 +63,7 @@ export default {
                 text: this.options.front.text,
                 header: this.options.front.header,
                 footer: this.$t(
-                    'plugin.games.components.content.blocks.flashcard.click_to_show_back'
+                    'windward.games.components.content.blocks.flashcard.flip_card'
                 ),
             }
         },
@@ -65,7 +79,7 @@ export default {
                 text: this.options.back.text,
                 header: this.options.back.header,
                 footer: this.$t(
-                    'plugin.games.components.content.blocks.flashcard.click_to_show_front'
+                    'windward.games.components.content.blocks.flashcard.flip_card'
                 ),
             }
         },
@@ -73,29 +87,96 @@ export default {
     methods: {
         toggleCard() {
             //only flip card when user click
-            this.cardClass = 'animated flipInY flashcard'
+            this.flip = true
+            //this.cardClass = 'animated flipInY flashcard flashcard--size-md'
             this.$emit('input', !this.value)
         },
     },
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .center {
     text-align: center;
 }
 
+.card-title {
+    background-color: var(--v-primary-base);
+    color: var(--v-background-base);
+}
 .flashcard {
     cursor: pointer;
-    border-radius: 10px;
-    max-height: 100vh;
-    margin: 0.5em;
-    padding: 25px;
-    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.4);
+    border: 1px solid;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
     text-align: center;
 }
+.div-container {
+    container-type: inline-size;
+}
+@container (width >1168px) {
+    .flashcard--size-md {
+        min-height: 60%;
+        width: 90%;
+        top: 20%;
+        left: 5%;
+    }
+
+    .flashcard--size-lg {
+        min-height: 90%;
+        width: 90%;
+        top: 5%;
+        left: 5%;
+    }
+}
+@container (width < 1168px) {
+    .flashcard--size-md {
+        min-height: 60%;
+        width: 88%;
+        top: 20%;
+        left: 6%;
+    }
+
+    .flashcard--size-lg {
+        min-height: 90%;
+        width: 88%;
+        top: 5%;
+        left: 6%;
+    }
+}
+@container (width < 850px) {
+    .flashcard--size-md {
+        min-height: 60%;
+        width: 84%;
+        top: 20%;
+        left: 8%;
+    }
+
+    .flashcard--size-lg {
+        min-height: 90%;
+        width: 84%;
+        top: 5%;
+        left: 8%;
+    }
+}
+@container (width < 650px) {
+    .flashcard--size-md {
+        min-height: 90%;
+        width: 76%;
+        top: 5%;
+        left: 12%;
+    }
+
+    .flashcard--size-lg {
+        min-height: 90%;
+        width: 76%;
+        top: 5%;
+        left: 12%;
+    }
+}
 
 .flashcard:hover {
-    box-shadow: 0 0px 25px rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0px 12px rgba(0, 0, 0, 0.8);
+    background-color: var(--v-background-darken1);
 }
 
 .animated {

package/components/content/blocks/flashcards/FlashcardSlides.vue

@@ -10,7 +10,6 @@
         <br />
         <v-carousel
             v-model="block.metadata.config.currentSlide"
-            show-arrows-on-hover
             hide-delimiters
         >
             <template #prev="{ on, attrs }">
@@ -87,7 +86,9 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
             this.block.metadata.config.currentSlide = 0
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.games.components.content.blocks.flashcard.title'
+            )
             this.block.metadata.config.instructions = ''
         }