@windward/games 0.0.4 → 0.0.6

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

@@ -4,107 +4,98 @@
             <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-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 :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"
-                                    />
+                    <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>
-                                <!-- /ROW -->
+                                <!-- /Cell in row -->
                             </template>
-                        </div>
+                        </v-container>
                     </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>
+                    <!-- Clues -->
+                    <v-col cols="12" class="crossword-clues">
+                        <CrosswordClues
+                            :down="downWords"
+                            :across="acrossWords"
+                            @click="onClickClue"
+                        ></CrosswordClues>
                     </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 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>
@@ -115,91 +106,16 @@
 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')
-    },
-}
+import Crypto from '~/helpers/Crypto'
+import CrosswordClues from './CrosswordClues.vue'
 
 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,
-        },
-    },
+    components: { CrosswordClues },
+    props: {},
     beforeMount() {
+        this.id = Crypto.id()
         if (_.isEmpty(this.block)) {
             this.block = {}
         }
@@ -215,157 +131,244 @@ export default {
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }
-        this.onSetUpData()
     },
     data() {
         return {
-            selectedWords: [],
+            id: '',
+            highlightIndex: -1,
             acrossWords: [],
             downWords: [],
+            error: '',
             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
+        wordMap() {
+            const map = _.cloneDeep(
+                _.get(this.block, 'metadata.config.words', [])
             )
-        },
 
-        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
+            // Toss out crossword items that are missing the word or clue
+            return map.filter((v) => {
+                return !_.isEmpty(v.word) && !_.isEmpty(v.clue)
+            })
         },
-
-        down: function () {
-            let downWord
-            switch (this.lang) {
-                case 'ES':
-                    downWord = 'Verticales'
-                    break
-                default:
-                    downWord = 'Down'
-                    break
+        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'
+                    }
+                })
             }
-            return downWord
+            classValue += ' ' + crosswordSize
+            return classValue
         },
     },
     watch: {
         render(newVal) {
             if (newVal === true) {
-                this.onSetUpData(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.generateGrid()
-        this.$nextTick(function () {
-            window.addEventListener('resize', this.getWindowWidth)
-            this.getWindowWidth()
-        })
+        this.onSetUpData()
     },
     methods: {
-        onSetUpData(withoutMount = null) {
-            if (_.isEmpty(this.block.metadata.config.words)) {
-                this.block.metadata.config.words = []
-                this.wordsWithReflexions = this.dummyWordData
-                this.dummyData = true
+        onClickClue(word) {
+            if (this.highlightIndex !== word.index) {
+                this.highlightIndex = word.index
             } 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)
-                    }
-                })
+                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'
 
-                deleteArray.forEach((index) => {
-                    this.block.metadata.config.words.splice(index)
-                })
+                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 (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 (_.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'
                     )
                 }
             }
-            if (withoutMount) {
-                this.generateGrid()
+
+            // 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: function (index1, index2) {
-            let id = `item${index1 + 1}-${index2 + 1}`
+        index(rowIndex, cellIndex) {
+            let id = `${this.id}-cell-${rowIndex + 1}-${cellIndex + 1}`
             return id
         },
 
-        pattern: function (value) {
+        pattern(value) {
             if (value) {
                 let pattern = `^[${value.toLowerCase()}${value.toUpperCase()}]{1}$`
                 return pattern
             }
         },
 
-        equalsLetters: function (letter1, letter2) {
-            if (letter1 === null) {
+        equalsLetters(letter1, letter2) {
+            if (letter1 === null || typeof letter1 === 'undefined') {
                 letter1 = ''
             }
-            if (letter2 === null) {
+            if (letter2 === null || typeof letter2 === 'undefined') {
                 letter2 = ''
             }
             return (
@@ -373,10 +376,7 @@ export default {
                 letter1.toLowerCase() === letter2.toLowerCase()
             )
         },
-        setRandomWords: function () {
-            let words = this.shuffle(this.wordsWithReflexions)
-            this.selectedWords = words
-        },
+
         shuffle(array) {
             let currentIndex = array.length,
                 randomIndex
@@ -396,147 +396,278 @@ export default {
 
             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)
+        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++
             }
 
-            this.grid = grid
+            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 grid in
-            if (this.grid.length < MATRIX_LENGTH) {
-                // add rows
-                while (this.grid.length < MATRIX_LENGTH) {
-                    this.grid.push([])
+            // 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)
                 }
-                // 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()
-        },
+            // Generate the legend now that everything's filled
+            const legend = cw.getLegend(grid)
+
+            this.acrossWords = legend.across
+            this.downWords = legend.down
 
-        getWindowWidth: function () {
-            if (
-                this.$refs['crossword-container'].parentElement.parentElement &&
-                this.$refs['crossword-container'].parentElement.parentElement
-                    .clientWidth < 1200
-            ) {
-                this.smallContainer = true
+            if (!_.isEmpty(this.grid)) {
+                this.grid.splice(0)
             }
+
+            this.grid = grid
         },
     },
-    beforeDestroy() {
-        window.removeEventListener('resize', this.getWindowWidth)
-    },
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .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;
+    background: var(--v-success-base);
+    color: #fff;
 }
 
 .crossword-board-container {
     position: relative;
-    /* background: #fff; */
+    padding-top: 5px;
+    overflow: auto;
 }
 
 .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;
+    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 #000;
+    border: 1px solid #333;
     position: relative;
-    z-index: 100;
     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: #ffff74;
-    border: 1px solid #000;
-    outline: 1px solid #000;
+    background: var(--v-error-base);
+    border: 1px solid #333;
 }
 
 .crossword-board__item--blank {
-    background-color: #75489794;
-    border: 1px solid #000;
-    outline: 1px solid #000;
+    background-color: #111 !important;
+    border: 1px solid #333;
 }
 
 .crossword-clues {
-    /* position: absolute;
-    margin-top: 650px; */
+    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;
-    /* top: 0;
-    left: 650px;
-    width: 650px; */
+    user-select: none;
+    pointer-events: none;
 }
 
-.crossword-clues__list {
-    margin: 0 0 0 60px;
-    padding: 0;
-    display: inline-block;
-    vertical-align: top;
+@media (max-width: 1570px) {
+    .crossword-col-4 {
+        width: 500px;
+        height: 500px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
 }
-
-.crossword-clues__list-title {
-    font-weight: bold;
-    padding: 4px;
+@media (max-width: 1480px) {
+    .crossword-col-4 {
+        width: 400px;
+        height: 400px;
+    }
+    .crossword-board-container {
+        box-sizing: content-box !important;
+    }
 }
-
-.crossword-clues__list-item {
-    margin: 0;
-    padding: 4px;
+@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>