From 7e5cf4638a802f1aef51a60cc93c9259c5f002df Mon Sep 17 00:00:00 2001 From: HSZemi Date: Mon, 16 Aug 2021 21:40:18 +0200 Subject: [PATCH] Add enlarged toggle --- src/components/draft/Draft.tsx | 23 +++++++++++++++++++++-- src/languages/de_DE.json | 1 + src/languages/en_GB.json | 1 + src/languages/es_ES.json | 3 ++- src/languages/pt_BR.json | 3 ++- src/languages/zh_CN.json | 2 ++ src/languages/zh_TW.json | 2 ++ src/sass/bulma.scss | 24 ++++++++++++++++++++++++ 8 files changed, 55 insertions(+), 4 deletions(-) diff --git a/src/components/draft/Draft.tsx b/src/components/draft/Draft.tsx index 75c85ea9..3a5d221e 100644 --- a/src/components/draft/Draft.tsx +++ b/src/components/draft/Draft.tsx @@ -53,6 +53,7 @@ interface IState { joined: boolean; flipped: boolean; smooch: boolean; + enlarged: boolean; simplifiedUI: boolean; } @@ -64,7 +65,8 @@ class Draft extends React.Component { const flipped = query.get('flipped') === 'true' || false; const smooch = query.get('smooch') === 'true' || false; const simplifiedUI = query.get('simplified') === 'true' || false; - this.state = {joined: false, flipped, smooch, simplifiedUI}; + const enlarged = query.get('enlarged') === 'true' || false; + this.state = {joined: false, flipped, smooch, simplifiedUI, enlarged}; } @@ -143,7 +145,6 @@ class Draft extends React.Component { } private toggleSimplifiedUI():void{ - console.log('Simplified UI Toggle') const newSimplifiedUIValue = !this.state.simplifiedUI; let searchParams = new URLSearchParams(this.props.location.search); searchParams.set('simplified', newSimplifiedUIValue.toString()); @@ -153,6 +154,16 @@ class Draft extends React.Component { this.setState({...this.state, simplifiedUI: newSimplifiedUIValue}); } + private toggleEnlarged():void{ + const newEnlargedValue = !this.state.enlarged; + let searchParams = new URLSearchParams(this.props.location.search); + searchParams.set('enlarged', newEnlargedValue.toString()); + this.props.history.replace({ + search: searchParams.toString() + }); + this.setState({...this.state, enlarged: newEnlargedValue}); + } + public render() { let presetName: JSX.Element = <>{this.props.preset.name}; if(this.props.preset.presetId){ @@ -163,6 +174,7 @@ class Draft extends React.Component { let className = 'section'; className += this.state.flipped ? ' flipped' : ''; className += this.state.smooch ? ' smooch' : ''; + className += this.state.enlarged ? ' enlarged' : ''; if(this.state.simplifiedUI) { ColorSchemeHelpers.addThemeClassName('has-simple-ui'); @@ -235,6 +247,13 @@ class Draft extends React.Component { }}/>

+

+ { + this.toggleEnlarged() + }}/> + +

diff --git a/src/languages/de_DE.json b/src/languages/de_DE.json index fff25883..30c85996 100644 --- a/src/languages/de_DE.json +++ b/src/languages/de_DE.json @@ -130,6 +130,7 @@ "flip": "Vertausche die Positionen von Host und Gast", "smooch": "Knutschmodus umschalten", "simplifiedUI": "schlichte Darstellung", + "enlarged": "Panels vergrößern", "validationFailed": "Validierungsfehler:", "errors": { "VLD_000": "Draft erwartet derzeit keine Aktion", diff --git a/src/languages/en_GB.json b/src/languages/en_GB.json index b79d3811..34c991d4 100644 --- a/src/languages/en_GB.json +++ b/src/languages/en_GB.json @@ -130,6 +130,7 @@ "flip": "Flip Host and Guest positions", "smooch": "Smooch mode", "simplifiedUI": "Simplified UI", + "enlarged": "Enlarge Panels", "validationFailed": "Validation(s) failed:", "errors": { "VLD_000": "Draft is currently not expecting actions", diff --git a/src/languages/es_ES.json b/src/languages/es_ES.json index cfcf1e37..e23e368a 100644 --- a/src/languages/es_ES.json +++ b/src/languages/es_ES.json @@ -129,7 +129,8 @@ "<0>BAN": "<0>BAN", "flip": "Voltear posiciones de Anfitrión e Invitado", "smooch": "Modo de beso", - "simplifiedUI": "Interfaz Simplificada", + "simplifiedUI": "Interfaz simplificada", + "enlarged": "Agrandar paneles", "validationFailed": "Fallaron la/s validaciónes:", "errors": { "VLD_000": "El Draft no esta esperando acciónes", diff --git a/src/languages/pt_BR.json b/src/languages/pt_BR.json index cb0c2cb0..84fdcf83 100644 --- a/src/languages/pt_BR.json +++ b/src/languages/pt_BR.json @@ -130,6 +130,7 @@ "flip": "Inverta a posição do Anfitrião e do Convidado", "smooch": "Alternar modo smooch", "simplifiedUI": "IU simplificada", + "enlarged": "Ampliar Painéis", "validationFailed": "A(s) validação(ões) falhou(aram):", "errors": { "VLD_000": "O draft não está esperando por ações atualmente", @@ -254,7 +255,7 @@ "admin": "Administrador", "new": "Novo", "presetName": "Nome da Definição", - "warning": "<0>Atenção!<1/>Isso é algo avançado,e você provavelmente não vai precisar disso se você quer criar um draft normal com as civilizações antigas.<3/><4>Por favor, use as urls de imagem que você espera que estejam funcionando daqui a dez anos ou mais!", + "warning": "<0>Atenção!<1/>Isso é algo avançado, e você provavelmente não vai precisar disso se você quer criar um draft normal com as civilizações antigas.<3/><4>Por favor, use as urls de imagem que você espera que estejam funcionando daqui a dez anos ou mais!", "option": { "name": "Nome", "unitImageUrl": "URL da imagem da unidade", diff --git a/src/languages/zh_CN.json b/src/languages/zh_CN.json index 00f2333c..587c1935 100644 --- a/src/languages/zh_CN.json +++ b/src/languages/zh_CN.json @@ -129,6 +129,8 @@ "<0>BAN": "<0>禁", "flip": "左右交换", "smooch": "面对面开关", + "simplifiedUI": "简化UI", + "enlarged": "放大界面", "validationFailed": "错误提示:", "errors": { "VLD_000": "现在无需任何操作", diff --git a/src/languages/zh_TW.json b/src/languages/zh_TW.json index 2702f778..bd3ae0d0 100644 --- a/src/languages/zh_TW.json +++ b/src/languages/zh_TW.json @@ -129,6 +129,8 @@ "<0>BAN": "<0>禁", "flip": "左右交換", "smooch": "面對面開關", + "simplifiedUI": "簡化版介面", + "enlarged": "放大面板", "validationFailed": "錯誤提示:", "errors": { "VLD_000": "現在無需任何操作", diff --git a/src/sass/bulma.scss b/src/sass/bulma.scss index fd2df3c9..9df081b9 100644 --- a/src/sass/bulma.scss +++ b/src/sass/bulma.scss @@ -434,6 +434,26 @@ div.stretchy-wrapper > div.stretchy-text { height: 80px; } +.enlarged .pick { + width: 150px; + height: 150px; +} + +.enlarged .steal { + width: 150px; + height: 150px; +} + +.enlarged .ban { + width: 120px; + height: 120px; +} + +.pick, .steal, .ban { + transition: width .6s, height .6s; +} + + .pick .stretchy-background { background: $pick-green; } @@ -850,6 +870,10 @@ html.has-simple-ui { width: 112px; height: 112px; } + .enlarged .ban { + width: 150px; + height: 150px; + } .ban .random-pick { top: 0;