some fixes and improvements to the crafting UI

game/hud/src/components/HUD/ActionAlert.tsx

@@ -8,12 +8,12 @@ import * as React from 'react';
 import { styled } from '@csegames/linaria/react';
 import { isEqual } from 'lodash';
 
-const fadeTime = 1000;
+const fadeTime = 2000;
 
 const FadeAlertItem = styled.div`
   position: fixed;
   color: #FFFFFF;
-  font-weight: medium;
+  font-weight: bold;
   font-size: 15px;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
   z-index: 9999;
@@ -40,6 +40,7 @@ export interface State {
   alertMessage: string;
   clientX: number;
   clientY: number;
+  messageStyles: React.CSSProperties;
 }
 
 export class ActionAlert extends React.Component<Props, State> {
@@ -51,13 +52,18 @@ export class ActionAlert extends React.Component<Props, State> {
       alertMessage: '',
       clientX: 0,
       clientY: 0,
+      messageStyles: null,
     };
   }
 
   public render() {
-    const { alertMessage, clientX, clientY } = this.state;
+    const { alertMessage, clientX, clientY, messageStyles } = this.state;
     return alertMessage ? (
-      <FadeAlertItem style={{ top: `${clientY}px`, left: `${clientX}px`  }}>{alertMessage}</FadeAlertItem>
+      <FadeAlertItem
+        style={{ top: `${clientY}px`, left: `${clientX}px`, ...messageStyles }}
+      >
+        {alertMessage}
+      </FadeAlertItem>
     ) : null;
   }
 
@@ -80,11 +86,14 @@ export class ActionAlert extends React.Component<Props, State> {
     }
   }
 
-  private handleShowAlert = (alertMessage: string, mousePos: { clientX: number, clientY: number }) => {
-    this.setState({ alertMessage, clientX: mousePos.clientX, clientY: mousePos.clientY });
+  private handleShowAlert = (
+    alertMessage: string,
+    mousePos: { clientX: number, clientY: number },
+    messageStyles?: React.CSSProperties,
+  ) => {
+    this.setState({ alertMessage, clientX: mousePos.clientX, clientY: mousePos.clientY, messageStyles });
     this.removeTimer = window.setTimeout(() =>
-      this.setState({ alertMessage: '', clientX: 0, clientY: 0 }),
+      this.setState({ alertMessage: '', clientX: 0, clientY: 0, messageStyles: null }),
     fadeTime);
   }
 }
-

game/hud/src/components/fullscreen/Crafting/components/NumberWheel/NumberWheelInput.tsx

@@ -55,6 +55,8 @@ export interface State {
 }
 
 class NumberWheelInput extends React.Component<Props, State> {
+  private inputRef: HTMLInputElement = null;
+
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -71,6 +73,8 @@ class NumberWheelInput extends React.Component<Props, State> {
         inputClassName={InputStyle}
         value={`${this.props.prevValueDecorator || ''}${this.state.tempValue}${this.props.trailValueDecorator || ''}`}
         onChange={this.onInputChange}
+        onFocus={() => this.placeCursor() }
+        getRef={r => this.inputRef = r}
       />
     );
   }
@@ -80,29 +84,60 @@ class NumberWheelInput extends React.Component<Props, State> {
     if (prevProps.value !== this.props.value && this.props.value !== this.state.tempValue) {
       this.setState({ tempValue: this.props.value });
     }
+    this.placeCursor();
   }
 
-  private onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let inputValue = e.target.value;
-
-    if (this.props.prevValueDecorator) {
-      // Remove prevalue decorator before turning value into number
-      inputValue = inputValue.replace(this.props.prevValueDecorator, '');
+  private placeCursor = () => {
+    const valueLength = this.inputRef.value.length;
+    const cursorPos = this.inputRef.selectionStart;
+    if (this.props.trailValueDecorator && (cursorPos > valueLength - this.props.trailValueDecorator.length)) {
+      const newPos = valueLength - this.props.trailValueDecorator.length;
+      this.inputRef.setSelectionRange(newPos, newPos);
+    } else if (this.props.prevValueDecorator && (cursorPos < this.props.prevValueDecorator.length)) {
+      const newPos = this.props.prevValueDecorator.length;
+      this.inputRef.setSelectionRange(newPos, newPos);
     }
+  }
 
-    const newVal = Number(inputValue);
-    if (typeof newVal === 'number') {
+  private onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // get start and end of the number to remove the decorators
+    const start = this.props.prevValueDecorator ? this.props.prevValueDecorator.length : 0;
+    const end = this.props.trailValueDecorator
+      ? - this.props.trailValueDecorator.length
+      : e.target.value.length;
+
+    const newVal = Number(e.target.value.slice(start, end));
+    const validationMessage = this.validateInput(newVal);
+    if (validationMessage === 'ok') {
       this.setState({ tempValue: newVal });
       this.onChange(newVal);
+    } else {
+      const { left, top } = e.target.getBoundingClientRect();
+      game.trigger(
+        'show-action-alert',
+        validationMessage,
+        { clientX: left - validationMessage.length, clientY: top - 8 },
+        { color: 'red' },
+      );
+      this.setState({ tempValue: this.props.value });
     }
   }
 
-  private onChange = (newVal: number) => {
-    if (newVal <= this.props.maxValue && newVal >= this.props.minValue) {
-      this.props.onChange(newVal);
-    } else {
-      this.setState({ tempValue: this.props.value });
+  private validateInput = (value: number): string => {
+    if (value > this.props.maxValue) {
+      return (`Maximum: ${this.props.maxValue}`);
+    }
+    if (value < this.props.minValue) {
+      return (`Minimum: ${this.props.minValue}`);
     }
+    if (isNaN(value)) {
+      return ('No number');
+    }
+    return 'ok';
+  }
+
+  private onChange = (newVal: number) => {
+    this.props.onChange(newVal);
   }
 }
 

game/hud/src/components/fullscreen/Crafting/components/OutputItems/CustomNameEdit.tsx

@@ -14,6 +14,8 @@ import { getJobContext } from 'fullscreen/Crafting/lib/utils';
 import { TextInput } from 'shared/TextInput';
 import { MediaBreakpoints } from 'fullscreen/Crafting/lib/MediaBreakpoints';
 
+const NAME_LENGTH_MAX = 28;
+
 const Container = styled.div`
   width: 144px;
   height: 144px;
@@ -97,8 +99,15 @@ class CustomName extends React.Component<Props, State> {
   }
 
   private onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ value: e.target.value });
-    this.onCustomNameChange(e.target.value);
+    if (e.target.value.length > NAME_LENGTH_MAX) {
+      const { left, top } = e.target.getBoundingClientRect();
+      game.trigger('show-action-alert', 'Name is too long', { clientX: left - 4, clientY: top - 4 }, { color: 'red' });
+    }
+    const newVal = e.target.value.length > NAME_LENGTH_MAX
+      ? e.target.value.slice(0, NAME_LENGTH_MAX)
+      : e.target.value;
+    this.setState({ value: newVal });
+    this.onCustomNameChange(newVal);
   }
 
   private onCustomNameChange = (customName: string) => {