diff --git a/src/components/wiki-captcha-js/wiki-api.dto.ts b/src/components/wiki-captcha-js/wiki-api.dto.ts index e7deaee..ebb4d08 100644 --- a/src/components/wiki-captcha-js/wiki-api.dto.ts +++ b/src/components/wiki-captcha-js/wiki-api.dto.ts @@ -1,28 +1,32 @@ export class WikiApiDto { public sessionId: string; public questionList: QuestionDto[]; } export class QuestionDto { public questionText: string; public questionId: string; public questionType: QUESTION_TYPES; public answersAvailable: AnswerDto[]; } export class AnswerDto { public imgUrl: string; public text: string; public userAnswer: UserAnswerDto; } export class UserAnswerDto { public userInput: string; public selected: boolean = false; } +export class UserAnswersResponseDto { + public human: boolean; +} + export enum QUESTION_TYPES { IMAGE = 'IMG', FREE_TEXT = 'INPUT', OPTIONS = 'OPTIONS' } diff --git a/src/components/wiki-captcha-js/wiki-captcha-js.css b/src/components/wiki-captcha-js/wiki-captcha-js.css index bd89dc4..2352291 100644 --- a/src/components/wiki-captcha-js/wiki-captcha-js.css +++ b/src/components/wiki-captcha-js/wiki-captcha-js.css @@ -1,100 +1,121 @@ :host { font-family: sans-serif; border: 2px solid var(--color-primary, black); margin: 2rem; padding: 1rem; display: block; max-width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.26); border-radius: 3px; width: 20rem; overflow: hidden; } .wiki-captcha-box { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; max-width: 100%; padding-left: 1rem; padding-right: 1rem; } .wiki-captcha-img-container { display: flex; flex-wrap: wrap; width: 15rem; max-width: 100%; justify-content: center; border-radius: 3px; overflow: hidden; align-self: center; border: 2px solid var(--color-primary, black); box-shadow: 0 2px 8px rgba(0,0,0,.26); } .wiki-captcha-img, .wiki-captcha-img-selected { - width: 4rem; + width: 100%; height: 6rem; flex: 1 0 30%; /* 3 images per row */ - cursor: pointer; } -.wiki-captcha-img-selected { - outline: 4px solid var(--color-primary-img-highlight, black); - width: 4rem; +.wiki-captcha-img-overlay { + display: inline-block; + position: relative; + width: 33.3%; height: 6rem; - outline-offset: -4px; + z-index: 1; + cursor: pointer; +} + +.wiki-captcha-img-overlay-on:after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(117, 1, 117, 0.5); +} + +.wiki-captcha-img-overlay-off:after { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: rgba(117, 1, 117, 0.0); } .wiki-captcha-footer { display: flex; align-items: center; padding-top: .5rem; } .wiki-captcha-powered-by { display: flex; justify-content: flex-end; padding-top: .5rem; } .wiki-captcha-powered-by-icon { max-width: 20%; } .wiki-captcha-submit { } button, button:focus { outline: none; } button { font: inherit; padding: 0.25rem 0.5rem; border: 1px solid var(--color-primary, black); background: var(--color-primary, black); color: var(--color-primary-inverse, white); cursor: pointer; } button:hover, button:active { background: var(--color-primary-highlight, grey); border-color: var(--color-primary-highlight, grey); } button:disabled { background: #ccc; border-color: #ccc; color: white; cursor: not-allowed; } p { align-self: center; } diff --git a/src/components/wiki-captcha-js/wiki-captcha-js.tsx b/src/components/wiki-captcha-js/wiki-captcha-js.tsx index fb7a67c..169eb17 100644 --- a/src/components/wiki-captcha-js/wiki-captcha-js.tsx +++ b/src/components/wiki-captcha-js/wiki-captcha-js.tsx @@ -1,125 +1,134 @@ import {Component, State} from '@stencil/core'; -import {AnswerDto, UserAnswerDto, WikiApiDto} from './wiki-api.dto'; +import {AnswerDto, UserAnswerDto, UserAnswersResponseDto, WikiApiDto} from './wiki-api.dto'; @Component({ tag: 'wikidata-captcha-js', styleUrl: './wiki-captcha-js.css', shadow: true }) export class WikiCaptchaJs { private readonly WIKI_DATA_URL = 'http://192.168.1.142:8080'; private readonly WIKI_DATA_ICON = 'https://upload.wikimedia.org/wikipedia/commons/6/66/Wikidata-logo-en.svg'; private readonly IMAGES_PER_CAPTCHA = 9; @State() private questionList: WikiApiDto; @State() private loading = false; componentDidLoad() { this.fetchQuestions(); } render() { let question = null; let questionText = null; let images = null; let htmlContent = null; if (this.questionList && this.questionList.questionList.length > 0) { question = this.questionList.questionList[0]; questionText = question.questionText; const maxImageSize = question.answersAvailable.length < this.IMAGES_PER_CAPTCHA ? question.answersAvailable.length : this.IMAGES_PER_CAPTCHA; images = (question.answersAvailable.slice(0, maxImageSize).map(a => - ( - )) + (
)) ); } if (this.loading) { htmlContent ={questionText}
,