From b7c49517a20d249a541231bfce1c7474c7c3b255 Mon Sep 17 00:00:00 2001 From: Logan Connor Date: Fri, 1 Sep 2023 21:44:57 -0400 Subject: [PATCH] fixing the secondary cards --- .../card-content/CardContent.tsx | 553 +++++++++--------- 1 file changed, 276 insertions(+), 277 deletions(-) diff --git a/src/components/material-beautify-chinese-study/card-content/CardContent.tsx b/src/components/material-beautify-chinese-study/card-content/CardContent.tsx index 715fbe0..180aee6 100644 --- a/src/components/material-beautify-chinese-study/card-content/CardContent.tsx +++ b/src/components/material-beautify-chinese-study/card-content/CardContent.tsx @@ -1,312 +1,311 @@ -import { h, Component, Prop, Host, Element } from "@stencil/core"; -import { JSXBase } from "@stencil/core/internal"; +import { h, Component, Prop, Host, Element } from '@stencil/core'; +import { JSXBase } from '@stencil/core/internal'; import HanziWriter from 'hanzi-writer'; -import { DisplayType } from "../../../enums/DisplayType"; +import { DisplayType } from '../../../enums/DisplayType'; @Component({ tag: 'material-beautify-content', - styleUrl: '../styles/card-content.css', - shadow: true + styleUrl: '../styles/card-content.css', + shadow: true, }) export class CardContent { - @Prop() + @Prop() public vocab: string; - @Prop() + @Prop() public secondaryVocab: string; - @Prop() + @Prop() public phonic: string; - @Prop() - public sentence: string; - @Prop() - public secondarySentence: string; - @Prop() - public sentencePhonic: string; - @Prop() - public orientation: string; - @Prop() - public meaning: string; - @Prop() - public sentenceMeaning: string; - @Prop() - public type: string; - @Prop() - public phonicOrientation: string; + @Prop() + public sentence: string; + @Prop() + public secondarySentence: string; + @Prop() + public sentencePhonic: string; + @Prop() + public orientation: string; + @Prop() + public meaning: string; + @Prop() + public sentenceMeaning: string; + @Prop() + public type: string; + @Prop() + public phonicOrientation: string; - @Element() - private element: HTMLElement; + @Element() + private element: HTMLElement; - private _content: JSXBase.HTMLAttributes; - private _phonic: JSXBase.HTMLAttributes; + private _content: JSXBase.HTMLAttributes; + private _phonic: JSXBase.HTMLAttributes; - protected getContent() { - return this._content; - } + protected getContent() { + return this._content; + } - protected setWriting() { - if (this.orientation === "question") { - this._content = - - - - ; - } else { - this._content = - - ; - } - } + protected setWriting() { + if (this.orientation === 'question') { + this._content = ( + + + + ); + } else { + this._content = ; + } + } - protected setSecondarySentence() { - this._content = - - - - - ; - } + protected setSecondarySentence() { + this._content = ( + + + + + ); + } - protected setSecondaryRecognition() { - this._content = - - - - - - ; - } + protected setSecondaryRecognition() { + this._content = ( + + + + + + ); + } - protected setAudio() { - if (this.orientation === "question") { - const availableAnimations: string[] = [ - 'echo-spinner', - 'audio-line-spinner' - ]; + protected setAudio() { + if (this.orientation === 'question') { + const availableAnimations: string[] = ['echo-spinner', 'audio-line-spinner']; const randomAnimation: string = availableAnimations[Math.floor(Math.random() * availableAnimations.length)]; if (randomAnimation === 'audio-line-spinner') { - this._content = - -
-
-
-
-
- - ; + this._content = ( + +
+
+
+
+
+ + ); } else { - this._content = - -
- - } - } else { - this._content = - - - - ; - } - } + this._content = ( + +
+ + ); + } + } else { + this._content = ( + + + + ); + } + } - protected setSentence() { - this._content = - - - - - ; - } + protected setSentence() { + this._content = ( + + + + + ); + } - protected setTones() { - this._content = - - - - - - ; - } + protected setTones() { + this._content = ( + + + + + + ); + } - protected setRecognition() { - this._content = - - - - - - ; - } + protected setRecognition() { + this._content = ( + + + + + + ); + } - protected getPhonic() { - return this._phonic; - } - protected setPhonic() { - this._phonic = - { this.phonic } - ; - } + protected getPhonic() { + return this._phonic; + } + protected setPhonic() { + this._phonic = {this.phonic}; + } - private createStrokeOrderCharacter(): void { + private createStrokeOrderCharacter(): void { let delayBetweenAnimations: number = 500; - let characters: Array = this.vocab.split(''); - let drawingArea: HTMLElement = this.element.shadowRoot.querySelector('#stroke-order'); - while (drawingArea.firstChild) { - drawingArea.removeChild(drawingArea.firstChild); - } - let strokeOrderCharacters: Array = []; + let characters: Array = this.vocab.split(''); + let drawingArea: HTMLElement = this.element.shadowRoot.querySelector('#stroke-order'); + while (drawingArea.firstChild) { + drawingArea.removeChild(drawingArea.firstChild); + } + let strokeOrderCharacters: Array = []; - for (var i = 0; i < characters.length; i++) { - let idName = 'character-' + i; - let node = document.createElement('div'); - node.id = idName; - drawingArea.appendChild(node); + for (var i = 0; i < characters.length; i++) { + let idName = 'character-' + i; + let node = document.createElement('div'); + node.id = idName; + drawingArea.appendChild(node); - let strokeOrderCharacter = HanziWriter.create( - node, - characters[i], { - strokeColor: '#000000', - width: 50, - height: 50, - padding: 1, - delayBetweenStrokes: 500, - } - ); - strokeOrderCharacters.push(strokeOrderCharacter); - } + let strokeOrderCharacter = HanziWriter.create(node, characters[i], { + strokeColor: '#000000', + width: 50, + height: 50, + padding: 1, + delayBetweenStrokes: 500, + }); + strokeOrderCharacters.push(strokeOrderCharacter); + } - const animateNextCharacter = (current: number, hanziCharacters: Array) => { - const currentCharacter: any = hanziCharacters[current]; - const nextId: number = current + 1; - const nextCharacter: any = hanziCharacters[nextId]; - const nextNextId: number = current + 2; - const nextNextCharacter: any = hanziCharacters[nextNextId]; - const isLastCharacter = () => nextCharacter === undefined; - const isNextCharacterTheLastCharacter = () => nextNextCharacter === undefined; + const animateNextCharacter = (current: number, hanziCharacters: Array) => { + const currentCharacter: any = hanziCharacters[current]; + const nextId: number = current + 1; + const nextCharacter: any = hanziCharacters[nextId]; + const nextNextId: number = current + 2; + const nextNextCharacter: any = hanziCharacters[nextNextId]; + const isLastCharacter = () => nextCharacter === undefined; + const isNextCharacterTheLastCharacter = () => nextNextCharacter === undefined; - setTimeout(() => { - if (isLastCharacter()) { - currentCharacter.animateCharacter(); - } else { - if (isNextCharacterTheLastCharacter()) { - nextCharacter.animateCharacter(); - } else { - nextCharacter.animateCharacter({ - onComplete: () => animateNextCharacter(nextId, hanziCharacters) - }); - } - } - }, delayBetweenAnimations); - }; + setTimeout(() => { + if (isLastCharacter()) { + currentCharacter.animateCharacter(); + } else { + if (isNextCharacterTheLastCharacter()) { + nextCharacter.animateCharacter(); + } else { + nextCharacter.animateCharacter({ + onComplete: () => animateNextCharacter(nextId, hanziCharacters), + }); + } + } + }, delayBetweenAnimations); + }; - const animateFirstCharacterOnly = () => { - let firstCharacter: any = strokeOrderCharacters[0]; - firstCharacter.animateCharacter({ - onComplete: () => animateNextCharacter(0, strokeOrderCharacters) - }); - }; + const animateFirstCharacterOnly = () => { + let firstCharacter: any = strokeOrderCharacters[0]; + firstCharacter.animateCharacter({ + onComplete: () => animateNextCharacter(0, strokeOrderCharacters), + }); + }; - setTimeout(() => { - animateFirstCharacterOnly() - }, delayBetweenAnimations + delayBetweenAnimations); - }; + setTimeout(() => { + animateFirstCharacterOnly(); + }, delayBetweenAnimations + delayBetweenAnimations); + } - private processCardContent() { - switch (this.type.toLowerCase()) { - case "secondary-recognition" : - this.setSecondaryRecognition(); - break; - case "secondary-sentence" : - this.setSecondarySentence(); - break; - case "audio" : - this.setAudio() - break; - case "tones" : - this.setTones(); - break; - case "sentence" : - this.setSentence(); - break; - case "writing" : - this.setWriting(); - break; - case "recognition" : - default : - this.setRecognition(); - break; - } - } + private processCardContent() { + switch (this.type.toLowerCase()) { + case 'secondary-recognition': + this.setSecondaryRecognition(); + break; + case 'secondary-sentence': + this.setSecondarySentence(); + break; + case 'audio': + this.setAudio(); + break; + case 'tones': + this.setTones(); + break; + case 'sentence': + this.setSentence(); + break; + case 'writing': + this.setWriting(); + break; + case 'recognition': + default: + this.setRecognition(); + break; + } + } - render() { - this.setPhonic(); - this.processCardContent(); + render() { + this.setPhonic(); + this.processCardContent(); - return this.getContent(); - } + return this.getContent(); + } - componentDidRender() { - if (this.type.toLowerCase() === 'writing' && this.orientation === 'answer') { - this.createStrokeOrderCharacter(); - } - } -} \ No newline at end of file + componentDidRender() { + if (this.type.toLowerCase() === 'writing' && this.orientation === 'answer') { + this.createStrokeOrderCharacter(); + } + } +}