@windward/games 0.0.3 → 0.0.5

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

@@ -0,0 +1,673 @@
+<template>
+    <v-container>
+        <div>
+            <h2>{{ block.metadata.config.title }}</h2>
+            <p>{{ block.metadata.config.instructions }}</p>
+        </div>
+        <v-alert v-if="wordMap.length === 0" type="info" class="text-center">
+            <p>
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.crossword.initial_setup'
+                    )
+                }}
+            </p>
+        </v-alert>
+        <v-alert
+            v-if="wordMap.length > 0 && error"
+            type="error"
+            class="text-center"
+        >
+            <p>
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.crossword.validation_error'
+                    )
+                }}
+            </p>
+            <p>{{ error }}</p>
+        </v-alert>
+        <div
+            v-if="!error"
+            class="crossword-container"
+            ref="crossword-container"
+        >
+            <div v-if="grid">
+                <v-row>
+                    <v-col cols="12" class="crossword-board-container">
+                        <v-container :class="containerClass">
+                            <!-- Rows in grid -->
+                            <template v-for="(row, rowIndex) in grid">
+                                <!-- Cell in row -->
+                                <template v-for="(item, cellIndex) in row">
+                                    <div
+                                        :key="`${id}-cell-parent-${rowIndex}-${cellIndex}`"
+                                        :index="`${id}-cell-parent-${rowIndex}-${cellIndex}`"
+                                        :class="
+                                            cellClass(
+                                                item,
+                                                form[rowIndex][cellIndex],
+                                                isHighlighted(item)
+                                            )
+                                        "
+                                    >
+                                        <div
+                                            v-if="getPositionNumber(item)"
+                                            class="crossword-board__item--number"
+                                        >
+                                            {{ getPositionNumber(item) }}
+                                        </div>
+                                        <input
+                                            v-if="item"
+                                            v-model="form[rowIndex][cellIndex]"
+                                            :id="index(rowIndex, cellIndex)"
+                                            type="text"
+                                            minlength="1"
+                                            maxlength="1"
+                                            :pattern="pattern(item.char)"
+                                            required="required"
+                                        />
+                                    </div>
+                                </template>
+                                <!-- /Cell in row -->
+                            </template>
+                        </v-container>
+                    </v-col>
+                    <!-- Clues -->
+                    <v-col cols="12" class="crossword-clues">
+                        <CrosswordClues
+                            :down="downWords"
+                            :across="acrossWords"
+                            @click="onClickClue"
+                        ></CrosswordClues>
+                    </v-col>
+                </v-row>
+                <v-row class="d-flex justify-center">
+                    <v-col cols="12" class="d-flex justify-center">
+                        <v-btn
+                            color="primary"
+                            class="ma-3"
+                            @click="onSetUpData"
+                        >
+                            {{
+                                $t(
+                                    'plugin.games.components.content.blocks.crossword.play_again'
+                                )
+                            }}
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </div>
+        </div>
+    </v-container>
+</template>
+
+<script>
+import { Crossword } from './Crossword'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import _ from 'lodash'
+import Crypto from '~/helpers/Crypto'
+import CrosswordClues from './CrosswordClues.vue'
+
+export default {
+    name: 'CrossWordPuzzle',
+    extends: BaseContentBlock,
+    components: { CrosswordClues },
+    props: {},
+    beforeMount() {
+        this.id = Crypto.id()
+        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 = ''
+        }
+    },
+    data() {
+        return {
+            id: '',
+            highlightIndex: -1,
+            acrossWords: [],
+            downWords: [],
+            error: '',
+            matrix: null,
+            grid: null,
+            form: null,
+        }
+    },
+    computed: {
+        wordMap() {
+            const map = _.cloneDeep(
+                _.get(this.block, 'metadata.config.words', [])
+            )
+
+            // Toss out crossword items that are missing the word or clue
+            return map.filter((v) => {
+                return !_.isEmpty(v.word) && !_.isEmpty(v.clue)
+            })
+        },
+        containerClass() {
+            let classValue = ''
+            let crosswordSize = 'crossword--sm'
+
+            // Apply the column size
+            classValue +=
+                'crossword-board crossword-col-' +
+                _.get(this.block, 'metadata.columns', 12) / 3
+
+            // If we're still showing sample data, figure out the size on that
+            // We do this instead of hardcoding (since it changes based on locale)
+            if (!_.isEmpty(this.wordMap)) {
+                // if render is true then see what grid size should be based on longest word
+                this.wordMap.forEach((element) => {
+                    if (element.word.length > 13) {
+                        crosswordSize = 'crossword--lg'
+                    }
+                })
+            }
+            classValue += ' ' + crosswordSize
+            return classValue
+        },
+    },
+    watch: {
+        render(newVal) {
+            if (newVal === true) {
+                // on render reset up grid and look for word changes
+                this.onSetUpData()
+            }
+        },
+        block: {
+            deep: true,
+            handler() {
+                // on render reset up grid and look for word changes
+                this.onSetUpData()
+            },
+        },
+    },
+    mounted() {
+        this.onSetUpData()
+    },
+    methods: {
+        onClickClue(word) {
+            if (this.highlightIndex !== word.index) {
+                this.highlightIndex = word.index
+            } else {
+                this.highlightIndex = -1
+            }
+        },
+        isHighlighted(cell) {
+            const acrossIndex = _.get(cell, 'across.index', false)
+            const downIndex = _.get(cell, 'down.index', false)
+
+            if (acrossIndex !== false) {
+                return this.highlightIndex === acrossIndex
+            } else if (downIndex !== false) {
+                return this.highlightIndex === downIndex
+            } else {
+                return false
+            }
+        },
+        cellClass(cell, formValue, isHighlighted) {
+            let cellClass = 'crossword-board__item crossword-board__item--blank'
+            if (cell) {
+                cellClass = 'crossword-board__item'
+
+                if (this.equalsLetters(formValue, cell.char)) {
+                    cellClass += ' crossword-board__item--valid'
+                }
+                if (isHighlighted) {
+                    cellClass += ' crossword-board__item--highlighted'
+                }
+            }
+
+            return cellClass
+        },
+        getPositionNumber(cell) {
+            const isAcross = _.get(cell, 'across.isStartOfWord', false)
+            const isDown = _.get(cell, 'down.isStartOfWord', false)
+
+            if (isAcross) {
+                return cell.across.position
+            } else if (isDown) {
+                return cell.down.position
+            } else {
+                return 0
+            }
+        },
+        onSetUpData(generate = true) {
+            this.error = ''
+            this.highlightIndex = -1
+
+            if (_.isEmpty(this.wordMap)) {
+                this.error = this.$t(
+                    'plugin.games.components.content.blocks.crossword.error.min_words'
+                )
+            } else {
+                // checks if there are any words that don't share letters with any others
+                const letterCheck = this.onCheckWordsShareLetters(this.wordMap)
+
+                if (this.wordMap.length < 2) {
+                    this.error = this.$t(
+                        'plugin.games.components.content.blocks.crossword.error.min_words'
+                    )
+                } else if (letterCheck.length > 0) {
+                    // if a word doesn't share letters load with dummy data and alert the user
+                    let words = letterCheck.toString()
+                    this.error = this.$t(
+                        'plugin.games.components.content.blocks.crossword.error.words_no_shared_letters',
+                        [words]
+                    )
+                } else if (!this.validateWordMaxLength(this.wordMap)) {
+                    this.error = this.$t(
+                        'plugin.games.components.content.blocks.crossword.error.word_length_max_limit'
+                    )
+                } else if (!this.validateWordMinLength(this.wordMap)) {
+                    this.error = this.$t(
+                        'plugin.games.components.content.blocks.crossword.error.word_length_min_limit'
+                    )
+                }
+            }
+
+            // this is true if render is toggled back to true
+            if (generate && this.error === '') {
+                this.generateGrid(this.wordMap)
+            }
+        },
+        validateWordMaxLength(wordMap) {
+            let isValid = true
+            // inputs are not allowed over 20
+            // this was added to check if imports have more than 20 characters
+            wordMap.forEach((element) => {
+                if (_.isEmpty(element) || _.isEmpty(element.word)) {
+                    isValid = false
+                    return
+                }
+                if (element.word.length > 20) {
+                    isValid = false
+                }
+            })
+            return isValid
+        },
+        validateWordMinLength(wordMap) {
+            let isValid = true
+            // inputs are not allowed over 20
+            // this was added to check if imports have more than 20 characters
+            wordMap.forEach((element) => {
+                if (_.isEmpty(element) || _.isEmpty(element.word)) {
+                    isValid = false
+                    return
+                }
+                if (element.word.length < 2) {
+                    isValid = false
+                }
+            })
+            return isValid
+        },
+        onCheckWordsShareLetters(wordMap) {
+            let arrayOfWordsLetters = []
+            let wordsThatDontShareLetters = []
+
+            // splits words into an array of letters that is in an array
+            wordMap.forEach((element) => {
+                if (_.isEmpty(element) || _.isEmpty(element.word)) {
+                    return
+                }
+                element.word = element.word.toUpperCase()
+                const letterArray = element.word.split('')
+                arrayOfWordsLetters.push(letterArray)
+            })
+
+            for (let i = 0; i < arrayOfWordsLetters.length; i++) {
+                let shareLetters = false
+                let theyShareLetters = false
+                // loop over individual letters to check if any words share the letters
+                arrayOfWordsLetters[i].forEach((letter) => {
+                    wordMap.forEach((element) => {
+                        const elementIndex = wordMap.indexOf(element)
+                        // prevents from checking the letters against the word they came from
+                        if (elementIndex !== i) {
+                            // checks if the word from the block being looped over contains the letter
+                            theyShareLetters = element.word.includes(letter)
+                            // if it does contain the letter shareLetters is true and will not push
+                            //the word into the array for words that don't share any letters
+                            if (theyShareLetters) {
+                                shareLetters = true
+                            }
+                        }
+                    })
+                })
+                if (!shareLetters) {
+                    // this holds all words that don't share any letters with other words
+                    wordsThatDontShareLetters.push(wordMap[i].word)
+                }
+            }
+            return wordsThatDontShareLetters
+        },
+        index(rowIndex, cellIndex) {
+            let id = `${this.id}-cell-${rowIndex + 1}-${cellIndex + 1}`
+            return id
+        },
+
+        pattern(value) {
+            if (value) {
+                let pattern = `^[${value.toLowerCase()}${value.toUpperCase()}]{1}$`
+                return pattern
+            }
+        },
+
+        equalsLetters(letter1, letter2) {
+            if (letter1 === null || typeof letter1 === 'undefined') {
+                letter1 = ''
+            }
+            if (letter2 === null || typeof letter2 === 'undefined') {
+                letter2 = ''
+            }
+            return (
+                letter1.toUpperCase() === letter2.toUpperCase() ||
+                letter1.toLowerCase() === letter2.toLowerCase()
+            )
+        },
+
+        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(wordMap) {
+            let MATRIX_LENGTH = 13
+            wordMap.forEach((e) => {
+                if (e.word.length > 13) {
+                    MATRIX_LENGTH = 20
+                }
+            })
+
+            let grid = null
+            let cw = null
+            let attempts = 0
+            let correctSize = false
+
+            //while (!grid || grid.length > MATRIX_LENGTH) {
+            // // Create crossword object with the words and clues
+
+            // create the crossword grid (try to make it have a 1:1 width to height ratio in 10 tries)
+            // Sometimes the crossword will generate a 21x21 matrix even though we defined a 20x20.
+            while (attempts < 10 && !correctSize) {
+                // Re-randomize the words
+                const randomized = this.shuffle(wordMap)
+                const words = randomized.map((w) => w.word)
+                const clues = randomized.map((w) => w.clue)
+
+                cw = new Crossword(words, clues)
+
+                // We set 10 tries so we don't try calculating the grid forever
+                grid = cw.getSquareGrid(10)
+
+                // Verify the size of the grid
+                correctSize =
+                    grid.length <= MATRIX_LENGTH &&
+                    grid[0].length <= MATRIX_LENGTH
+
+                attempts++
+            }
+
+            if (grid.length > MATRIX_LENGTH) {
+                this.error = this.$t(
+                    'plugin.games.components.content.blocks.crossword.error.could_not_generate'
+                )
+                return false
+            }
+
+            if (_.isEmpty(grid)) {
+                this.error = this.$t(
+                    'plugin.games.components.content.blocks.crossword.error.unknown'
+                )
+
+                return false
+            }
+
+            this.form = [...Array(MATRIX_LENGTH)].map(() =>
+                Array(MATRIX_LENGTH).fill('')
+            )
+
+            // fill empty grid spots in
+            // add rows first
+            while (grid.length < MATRIX_LENGTH) {
+                grid.push([])
+            }
+            // add columns
+            for (let row = 0; row < grid.length; row++) {
+                while (grid[row].length < MATRIX_LENGTH) {
+                    grid[row].push(null)
+                }
+            }
+
+            // Generate the legend now that everything's filled
+            const legend = cw.getLegend(grid)
+
+            this.acrossWords = legend.across
+            this.downWords = legend.down
+
+            if (!_.isEmpty(this.grid)) {
+                this.grid.splice(0)
+            }
+
+            this.grid = grid
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.crossword-board__item--valid {
+    background: var(--v-success-base);
+    color: #fff;
+}
+
+.crossword-board-container {
+    position: relative;
+    padding-top: 5px;
+    overflow: auto;
+}
+
+.crossword-board {
+    position: relative;
+    background: transparent;
+    display: grid;
+    list-style-type: none;
+    padding: 0;
+    box-sizing: content-box !important;
+    border: 1px solid #000;
+}
+.crossword-board.crossword--sm {
+    grid-template: repeat(13, 7.69231%) / repeat(13, 7.69231%);
+}
+.crossword-board.crossword--lg {
+    grid-template: repeat(20, 5%) / repeat(20, 5%);
+}
+.crossword-col-4 {
+    width: 800px;
+    height: 800px;
+}
+.crossword-col-3 {
+    width: 550px;
+    height: 550px;
+}
+.crossword-col-2 {
+    width: 450px;
+    height: 450px;
+}
+.crossword-col-1 {
+    width: 220px;
+    height: 220px;
+}
+.crossword-board__item {
+    border: 1px solid #333;
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+.crossword-board__item > input {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+}
+.crossword-board.crossword--sm .crossword-board__item--number {
+    font-size: 75%;
+    line-height: 100%;
+}
+.crossword-board.crossword--lg .crossword-board__item--number {
+    font-size: 50%;
+    line-height: 100%;
+}
+
+.crossword-board__item:not(.crossword-board__item--valid) {
+    background-color: #fff;
+
+    &.crossword-board__item--highlighted {
+        animation: animated-highlight 2s linear infinite;
+        @keyframes animated-highlight {
+            0% {
+                filter: brightness(120%);
+                background-color: var(--v-secondary-lighten1);
+            }
+
+            50% {
+                filter: brightness(100%);
+                background-color: var(--v-secondary-lighten1);
+            }
+
+            100% {
+                filter: brightness(120%);
+                background-color: var(--v-secondary-lighten1);
+            }
+        }
+    }
+}
+
+.crossword-board__item:active:not(.crossword-board__item--valid),
+.crossword-board__item:focus:not(.crossword-board__item--valid) {
+    background: var(--v-error-base);
+    border: 1px solid #333;
+}
+
+.crossword-board__item--blank {
+    background-color: #111 !important;
+    border: 1px solid #333;
+}
+
+.crossword-clues {
+    background: var(--v-content-background-base);
+    position: sticky;
+    bottom: 100px;
+    border-radius: 5px;
+}
+.crossword-board__item--number {
+    position: relative;
+    height: 0;
+    width: 0;
+    color: #000;
+    user-select: none;
+    pointer-events: none;
+}
+
+@media (max-width: 1570px) {
+    .crossword-col-4 {
+        width: 500px;
+        height: 500px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
+}
+@media (max-width: 1480px) {
+    .crossword-col-4 {
+        width: 400px;
+        height: 400px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
+}
+@media (max-width: 1360px) {
+    .crossword-col-4 {
+        width: 350px;
+        height: 350px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
+}
+@media (max-width: 1300px) {
+    .crossword-col-4 {
+        width: 300px;
+        height: 300px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
+}
+@media (max-width: 1263px) {
+    .crossword-col-4 {
+        width: 550px;
+        height: 550px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
+}
+@media (max-width: 823px) {
+    .crossword-col-4 {
+        width: 400px;
+        height: 400px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
+}
+@media (max-width: 631px) {
+    .crossword-col-4 {
+        width: 300px;
+        height: 300px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
+}
+@media (max-width: 565px) {
+    .crossword-col-4 {
+        width: 300px;
+        height: 300px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+        padding-top: 12px;
+        padding-left: 12px;
+    }
+}
+</style>