Add enlarged toggle

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<IProps, IState> {
         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<IProps, IState> {
     }
 
     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<IProps, IState> {
         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<IProps, IState> {
         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<IProps, IState> {
                             }}/>
                             <label htmlFor="toggleSimplifiedUI" style={{paddingTop:1}}><Trans i18nKey='simplifiedUI'>Simplified UI</Trans></label>
                         </p>
+                        <p className="control">
+                            <input id="toggleEnlarged" type="checkbox" name="toggleEnlarged"
+                                   className="switch is-small is-rounded is-info" checked={this.state.enlarged} onChange={() => {
+                                this.toggleEnlarged()
+                            }}/>
+                            <label htmlFor="toggleEnlarged" style={{paddingTop:1}}><Trans i18nKey='enlarged'>Enlarge Panels</Trans></label>
+                        </p>
                     </div>
                 </div>
             </section>

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",

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",

src/languages/es_ES.json

@@ -129,7 +129,8 @@
   "<0></0>BAN": "<0></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",

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!</0><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!</4>",
+    "warning": "<0>Atenção!</0><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!</4>",
     "option": {
       "name": "Nome",
       "unitImageUrl": "URL da imagem da unidade",

src/languages/zh_CN.json

@@ -129,6 +129,8 @@
   "<0></0>BAN": "<0></0>禁",
   "flip": "左右交换",
   "smooch": "面对面开关",
+  "simplifiedUI": "简化UI",
+  "enlarged": "放大界面",
   "validationFailed": "错误提示:",
   "errors": {
     "VLD_000": "现在无需任何操作",

src/languages/zh_TW.json

@@ -129,6 +129,8 @@
   "<0></0>BAN": "<0></0>禁",
   "flip": "左右交換",
   "smooch": "面對面開關",
+  "simplifiedUI": "簡化版介面",
+  "enlarged": "放大面板",
   "validationFailed": "錯誤提示:",
   "errors": {
     "VLD_000": "現在無需任何操作",

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;