@windward/games 0.0.3 → 0.0.4

package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue

@@ -0,0 +1,542 @@
+<template>
+    <v-container>
+        <div>
+            <h2>{{ block.metadata.config.title }}</h2>
+            <p>{{ block.metadata.config.instructions }}</p>
+        </div>
+        <div class="d-flex justify-center" v-if="dummyData">
+            {{
+                $t(
+                    'plugin.games.components.content.blocks.crossword.placeholder'
+                )
+            }}
+        </div>
+        <!-- I've used this template as guide:
+    https://codepen.io/adrianroworth/pen/OpeyZq
+    54 3544 570127 -->
+        <div class="crossword-container" ref="crossword-container">
+            <div v-if="grid" class="crossword-board-container">
+                <v-row>
+                    <v-col :class="[smallContainer ? 'col-12' : 'col-7']">
+                        <div class="crossword-board">
+                            <template v-for="(row, index1) in grid">
+                                <!-- ROW -->
+                                <template v-for="(item, index2) in row">
+                                    <input
+                                        v-if="item"
+                                        :key="`row-${index1}-${index2}`"
+                                        :id="index(index1, index2)"
+                                        class="crossword-board__item"
+                                        :class="{
+                                            'crossword-board__item--valid':
+                                                equalsLetters(
+                                                    form[index1][index2],
+                                                    item.char
+                                                ),
+                                        }"
+                                        type="text"
+                                        minlength="1"
+                                        maxlength="1"
+                                        :pattern="pattern(item.char)"
+                                        required="required"
+                                        v-model="form[index1][index2]"
+                                    />
+                                    <span
+                                        v-else
+                                        :key="`row-${index1}-${index2}`"
+                                        :id="index(index1, index2)"
+                                        class="crossword-board__item--blank"
+                                    />
+                                </template>
+                                <!-- /ROW -->
+                            </template>
+                        </div>
+                    </v-col>
+                    <v-col
+                        :class="[
+                            smallContainer
+                                ? ['col-12', 'px-5', 'my-5']
+                                : 'col-4',
+                        ]"
+                    >
+                        <div class="crossword-clues">
+                            <dl
+                                v-if="across.length > 0"
+                                class="crossword-clues__list crossword-clues__list--across"
+                            >
+                                <dt class="crossword-clues__list-title">
+                                    {{ this.across }}
+                                </dt>
+                                <dd
+                                    class="crossword-clues__list-item"
+                                    v-for="(word, index) in acrossWords"
+                                    :key="`across-${word.word}-${index}`"
+                                >
+                                    <span class="hightlighted"
+                                        >{{ index + 1 }}. {{ word.clue }}</span
+                                    >
+                                </dd>
+                            </dl>
+                            <dl
+                                v-if="down.length > 0"
+                                class="crossword-clues__list crossword-clues__list--down"
+                            >
+                                <dt class="crossword-clues__list-title">
+                                    {{ this.down }}
+                                </dt>
+                                <dd
+                                    class="crossword-clues__list-item"
+                                    v-for="(word, index) in downWords"
+                                    :key="`down-${word.word}-${index}`"
+                                >
+                                    <span class="hightlighted"
+                                        >{{ index + 1 }}. {{ word.clue }}</span
+                                    >
+                                </dd>
+                            </dl>
+                        </div>
+                    </v-col>
+                </v-row>
+                <v-row v-if="showPlayAgain" class="d-flex justify-center">
+                    <v-btn size="sm" class="m-3 primary" @click="playAgain">
+                        {{
+                            $t(
+                                'plugin.games.components.content.blocks.crossword.play_again'
+                            )
+                        }}
+                    </v-btn>
+                </v-row>
+            </div>
+        </div>
+    </v-container>
+</template>
+
+<script>
+import { Crossword } from './Crossword'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import _ from 'lodash'
+
+var CrosswordUtils = {
+    PATH_TO_PNGS_OF_NUMBERS: 'numbers/',
+
+    toHtml: function (grid, show_answers) {
+        if (grid == null) return
+        var html = []
+        html.push("<table class='crossword'>")
+        var label = 1
+        for (var r = 0; r < grid.length; r++) {
+            html.push('<tr>')
+            for (var c = 0; c < grid[r].length; c++) {
+                var cell = grid[r][c]
+                var is_start_of_word = false
+                var css_class, char
+                if (cell == null) {
+                    char = '&nbsp;'
+                    css_class = 'no-border'
+                } else {
+                    char = cell['char']
+                    css_class = ''
+                    is_start_of_word =
+                        (cell['across'] &&
+                            cell['across']['is_start_of_word']) ||
+                        (cell['down'] && cell['down']['is_start_of_word'])
+                }
+
+                if (is_start_of_word) {
+                    var img_url =
+                        CrosswordUtils.PATH_TO_PNGS_OF_NUMBERS + label + '.png'
+                    html.push(
+                        "<td class='" +
+                            css_class +
+                            "' title='" +
+                            r +
+                            ', ' +
+                            c +
+                            "' style=\"background-image:url('" +
+                            img_url +
+                            '\')">'
+                    )
+                    label++
+                } else {
+                    html.push(
+                        "<td class='" +
+                            css_class +
+                            "' title='" +
+                            r +
+                            ', ' +
+                            c +
+                            "'>"
+                    )
+                }
+
+                if (show_answers) {
+                    html.push(char)
+                } else {
+                    html.push('&nbsp;')
+                }
+            }
+            html.push('</tr>')
+        }
+        html.push('</table>')
+        return html.join('\n')
+    },
+}
+
+export default {
+    name: 'CrossWordPuzzle',
+    extends: BaseContentBlock,
+    props: {
+        lang: {
+            type: String,
+            default: 'EN',
+            validator: function (value) {
+                // The value must match one of these strings
+                return ['EN', 'ES'].indexOf(value) !== -1
+            },
+        },
+        showPlayAgain: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
+        this.onSetUpData()
+    },
+    data() {
+        return {
+            selectedWords: [],
+            acrossWords: [],
+            downWords: [],
+            matrix: null,
+            grid: null,
+            form: null,
+            smallContainer: false,
+            dummyData: false,
+            wordsWithReflexions: [],
+            dummyWordData: [
+                {
+                    word: 'Coffee',
+                    description:
+                        'Many people drink it in the morning with milk or cream.',
+                },
+                {
+                    word: 'Tea',
+                    description: "British people drink it at 5 o' clock.",
+                },
+                {
+                    word: 'Peach',
+                    description: 'Juicy, round fruit with a stone-like seed.',
+                },
+                {
+                    word: 'Grape',
+                    description: 'You make wine from this fruit.',
+                },
+                {
+                    word: 'Primero',
+                    description:
+                        'Que ocupa el lugar número uno en una serie ordenada. Dicho de una persona o de una cosa: Que precede a las demás de su especie en orden, tiempo, lugar, situación, clase o jerarquía.',
+                },
+                {
+                    word: 'Lemon',
+                    description: 'You make lemonade from this fruit.',
+                },
+            ],
+        }
+    },
+    computed: {
+        words: function () {
+            return this.selectedWords.map(
+                (wordWithReflexion) => wordWithReflexion.word
+            )
+        },
+
+        clues: function () {
+            return this.selectedWords.map(
+                (wordWithReflexion) => wordWithReflexion.description
+            )
+        },
+
+        across: function () {
+            let acrossWord
+            switch (this.lang) {
+                case 'ES':
+                    acrossWord = 'Horizontales'
+                    break
+                default:
+                    acrossWord = 'Across'
+                    break
+            }
+            return acrossWord
+        },
+
+        down: function () {
+            let downWord
+            switch (this.lang) {
+                case 'ES':
+                    downWord = 'Verticales'
+                    break
+                default:
+                    downWord = 'Down'
+                    break
+            }
+            return downWord
+        },
+    },
+    watch: {
+        render(newVal) {
+            if (newVal === true) {
+                this.onSetUpData(true)
+            }
+        },
+    },
+    mounted() {
+        this.generateGrid()
+        this.$nextTick(function () {
+            window.addEventListener('resize', this.getWindowWidth)
+            this.getWindowWidth()
+        })
+    },
+    methods: {
+        onSetUpData(withoutMount = null) {
+            if (_.isEmpty(this.block.metadata.config.words)) {
+                this.block.metadata.config.words = []
+                this.wordsWithReflexions = this.dummyWordData
+                this.dummyData = true
+            } else {
+                let deleteArray = []
+                this.block.metadata.config.words.forEach(function callback(
+                    value,
+                    index
+                ) {
+                    if (
+                        (value.description === '' && value.word === '') ||
+                        (value.description === null && value.word === null)
+                    ) {
+                        deleteArray.push(index)
+                    }
+                })
+
+                deleteArray.forEach((index) => {
+                    this.block.metadata.config.words.splice(index)
+                })
+
+                if (this.block.metadata.config.words.length < 2) {
+                    this.wordsWithReflexions = this.dummyWordData
+                    this.dummyData = true
+                } else {
+                    this.dummyData = false
+                    this.wordsWithReflexions = _.cloneDeep(
+                        this.block.metadata.config.words
+                    )
+                }
+            }
+            if (withoutMount) {
+                this.generateGrid()
+            }
+        },
+        index: function (index1, index2) {
+            let id = `item${index1 + 1}-${index2 + 1}`
+            return id
+        },
+
+        pattern: function (value) {
+            if (value) {
+                let pattern = `^[${value.toLowerCase()}${value.toUpperCase()}]{1}$`
+                return pattern
+            }
+        },
+
+        equalsLetters: function (letter1, letter2) {
+            if (letter1 === null) {
+                letter1 = ''
+            }
+            if (letter2 === null) {
+                letter2 = ''
+            }
+            return (
+                letter1.toUpperCase() === letter2.toUpperCase() ||
+                letter1.toLowerCase() === letter2.toLowerCase()
+            )
+        },
+        setRandomWords: function () {
+            let words = this.shuffle(this.wordsWithReflexions)
+            this.selectedWords = words
+        },
+        shuffle(array) {
+            let currentIndex = array.length,
+                randomIndex
+
+            // While there remain elements to shuffle.
+            while (currentIndex !== 0) {
+                // Pick a remaining element.
+                randomIndex = Math.floor(Math.random() * currentIndex)
+                currentIndex--
+
+                // And swap it with the current element.
+                ;[array[currentIndex], array[randomIndex]] = [
+                    array[randomIndex],
+                    array[currentIndex],
+                ]
+            }
+
+            return array
+        },
+        generateGrid: function () {
+            const MATRIX_LENGTH = 13
+
+            let grid
+
+            while (!grid || grid.length > MATRIX_LENGTH) {
+                // // Create crossword object with the words and clues
+                this.setRandomWords()
+                var cw = new Crossword(this.words, this.clues)
+                // create the crossword grid (try to make it have a 1:1 width to height ratio in 10 tries)
+                var tries = 10
+                grid = cw.getSquareGrid(tries)
+            }
+
+            this.grid = grid
+
+            this.form = [...Array(MATRIX_LENGTH)].map(() =>
+                Array(MATRIX_LENGTH).fill('')
+            )
+
+            // fill grid in
+            if (this.grid.length < MATRIX_LENGTH) {
+                // add rows
+                while (this.grid.length < MATRIX_LENGTH) {
+                    this.grid.push([])
+                }
+                // add columns
+                this.grid.forEach((row) => {
+                    while (row.length < MATRIX_LENGTH) {
+                        row.push(null)
+                    }
+                })
+
+                let legend = cw.getLegend(this.grid)
+                this.acrossWords = legend.across
+                this.downWords = legend.down
+            }
+        },
+
+        playAgain: function () {
+            this.generateGrid()
+        },
+
+        getWindowWidth: function () {
+            if (
+                this.$refs['crossword-container'].parentElement.parentElement &&
+                this.$refs['crossword-container'].parentElement.parentElement
+                    .clientWidth < 1200
+            ) {
+                this.smallContainer = true
+            }
+        },
+    },
+    beforeDestroy() {
+        window.removeEventListener('resize', this.getWindowWidth)
+    },
+}
+</script>
+
+<style>
+.crossword-board__item--valid {
+    background: #9aff67;
+}
+
+.hightlighted {
+    background: rgba(255, 255, 255, 0.95);
+    padding: 3px 5px;
+    margin: -3px -5px;
+    line-height: 1.7;
+    display: inline;
+}
+
+.crossword-board-container {
+    position: relative;
+    /* background: #fff; */
+}
+
+.crossword-board {
+    position: relative;
+    z-index: 1;
+    background: transparent;
+    border: 1px solid #000;
+    width: 650px;
+    height: 650px;
+    display: grid;
+    grid-template: repeat(13, 7.69231%) / repeat(13, 7.69231%);
+    list-style-type: none;
+    padding: 0;
+    margin: 0 auto;
+}
+
+.crossword-board__item {
+    border: 1px solid #000;
+    position: relative;
+    z-index: 100;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+.crossword-board__item:not(.crossword-board__item--valid) {
+    background-color: #fff;
+}
+
+.crossword-board__item:active:not(.crossword-board__item--valid),
+.crossword-board__item:focus:not(.crossword-board__item--valid) {
+    background: #ffff74;
+    border: 1px solid #000;
+    outline: 1px solid #000;
+}
+
+.crossword-board__item--blank {
+    background-color: #75489794;
+    border: 1px solid #000;
+    outline: 1px solid #000;
+}
+
+.crossword-clues {
+    /* position: absolute;
+    margin-top: 650px; */
+    color: #000;
+    /* top: 0;
+    left: 650px;
+    width: 650px; */
+}
+
+.crossword-clues__list {
+    margin: 0 0 0 60px;
+    padding: 0;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.crossword-clues__list-title {
+    font-weight: bold;
+    padding: 4px;
+}
+
+.crossword-clues__list-item {
+    margin: 0;
+    padding: 4px;
+}
+</style>

package/components/content/blocks/wordJumble/WordJumble.vue

@@ -19,7 +19,7 @@
                         v-for="(word, index) in block.metadata.config.words"
                         :key="index"
                     >
-                        <v-row class="d-flex justify-center outline ma-2">
+                        <v-row class="d-flex justify-center ma-2">
                             <p class="pa-3 mb-0 clueAndJumble">
                                 <span class="spanBold"
                                     >{{
@@ -36,15 +36,22 @@
                                 {{ shuffle(word.value) }}
                             </p>
                         </v-row>
-                        <v-container :key="'feedback'" :class="feedbackStatus">
-                            <br />
-                            <v-row
-                                class="d-flex justify-space-around"
-                                align="center"
-                                justify="center"
-                                >{{ feedback }}
+                        <v-container
+                            v-if="showFeedback"
+                            :key="'feedback'"
+                            :class="feedbackStatus"
+                        >
+                            <v-row class="d-flex" align="center">
+                                <v-col cols="4"></v-col>
+                                <v-col cols="4" class="d-flex justify-center">
+                                    <p class="">{{ feedback }}</p>
+                                </v-col>
+                                <v-col cols="4" class="d-flex justify-end">
+                                    <v-icon @click="onHideFeedback">
+                                        mdi-alpha-x-circle-outline</v-icon
+                                    >
+                                </v-col>
                             </v-row>
-                            <br />
                         </v-container>
                         <v-row class="justify-center mt-4">
                             <Jumble
@@ -124,6 +131,7 @@ export default {
                 'plugin.games.components.content.blocks.word_jumble.feedback'
             ),
             showAnswer: false,
+            showFeedback: false,
             resetValue: false,
             studentResponse: '',
             feedbackStatus: '',
@@ -166,8 +174,12 @@ export default {
             // reveal prop changed to true to show answer
             this.showAnswer = true
         },
+        onHideFeedback() {
+            this.showFeedback = false
+        },
         onCheckAnswer(word) {
             this.studentResponse = this.studentResponse.toLowerCase()
+            this.showFeedback = true
             const answer = word.value.toLowerCase()
             if (this.studentResponse === answer) {
                 // updates class
@@ -202,7 +214,7 @@ export default {
         },
         onSlideChanged() {
             // this function is called when the slide is changed
-            // reset the game each time this occurs via props due to fact 
+            // reset the game each time this occurs via props due to fact
             // that components do not remount on slides each time the slide is revisited
             // updates class
             this.feedbackStatus = ''