@windward/games 0.0.4 → 0.0.6

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

@@ -0,0 +1,91 @@
+<template>
+    <v-row>
+        <v-col
+            cols="6"
+            v-if="down.length > 0"
+            :class="`crossword-clues__list crossword-clues__list--down`"
+        >
+            <h3 class="crossword-clues__list-title">
+                {{
+                    $t(`plugin.games.components.content.blocks.crossword.down`)
+                }}
+            </h3>
+            <v-list dense>
+                <v-list-item-group v-model="selectedItem">
+                    <v-list-item
+                        class="crossword-clues__list-item"
+                        v-for="word in down"
+                        :key="word.index"
+                        :value="word.index"
+                        @click="onClick(word)"
+                    >
+                        {{ word.position }}.
+                        {{ word.clue }}
+                    </v-list-item>
+                </v-list-item-group>
+            </v-list>
+        </v-col>
+        <v-col
+            cols="6"
+            v-if="across.length > 0"
+            :class="`crossword-clues__list crossword-clues__list--across`"
+        >
+            <h3 class="crossword-clues__list-title">
+                {{
+                    $t(
+                        `plugin.games.components.content.blocks.crossword.across`
+                    )
+                }}
+            </h3>
+            <v-list dense>
+                <v-list-item-group v-model="selectedItem">
+                    <v-list-item
+                        class="crossword-clues__list-item"
+                        v-for="word in across"
+                        :key="word.index"
+                        :value="word.index"
+                        @click="onClick(word)"
+                    >
+                        {{ word.position }}.
+                        {{ word.clue }}
+                    </v-list-item>
+                </v-list-item-group>
+            </v-list>
+        </v-col>
+    </v-row>
+</template>
+
+<script>
+export default {
+    name: 'CrosswordClues',
+    components: {},
+    props: {
+        down: {
+            type: Array,
+            required: false,
+            default: () => [],
+        },
+        across: {
+            type: Array,
+            required: false,
+            default: () => [],
+        },
+    },
+    data() {
+        return {
+            selectedItem: null,
+        }
+    },
+    methods: {
+        onClick(word) {
+            this.$emit('click', word)
+        },
+    },
+}
+</script>
+
+<style scoped>
+.crossword-clues__list-item {
+    padding: 4px;
+}
+</style>

package/components/content/blocks/crosswordPuzzle/CrosswordElements.ts

@@ -1,8 +1,8 @@
 class CrosswordCell {
-    public char!: any
+    public char!: string
     public across!: any
     public down!: any
-    constructor(letter) {
+    constructor(letter: string) {
         this.char = letter // the actual letter for the cell on the crossword
         // If a word hits this cell going in the "across" direction, this will be a CrosswordCellNode
         this.across = null
@@ -14,10 +14,12 @@ class CrosswordCell {
 // You can tell if the Node is the start of a word (which is needed if you want to number the cells)
 // and what word and clue it corresponds to (using the index)
 class CrosswordCellNode {
-    public is_start_of_word!: any
+    public isStartOfWord!: any
     public index!: any
-    constructor(is_start_of_word, index) {
-        this.is_start_of_word = is_start_of_word
+    public position = -1
+
+    constructor(isStartOfWord: any, index: any) {
+        this.isStartOfWord = isStartOfWord
         this.index = index // use to map this node to its word or clue
     }
 
@@ -27,7 +29,7 @@ class CrosswordCellNode {
 class WordElement {
     public word!: any
     public index!: any
-    constructor(word, index) {
+    constructor(word: any, index: any) {
         this.word = word // the actual word
         this.index = index // use to map this node to its word or clue
     }