X/Y Games

.size-limit.json

@@ -41,6 +41,12 @@
     "running": false,
     "limit": "26 kB"
   },
+  {
+    "name": "> game/xy [server]",
+    "path": ".next/server/pages/game/xy.html",
+    "running": false,
+    "limit": "15 kB"
+  },
   {
     "name": "> diary [server]",
     "path": ".next/server/pages/diary.js",

components/common/ui/Input.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import bem from 'bem-css-modules';
+import cn from 'classnames';
 
 import Clickable from 'components/common/Clickable';
 import Icon from 'components/common/ui/Icon';
@@ -11,13 +12,26 @@ import styles from './input.module.scss';
 const b = bem(styles);
 
 const Input = React.forwardRef(
-  ({ pending, leftIcon, rightIcon, disabled, error, onRightClick, placeholder, ...props }, ref) => (
+  (
+    {
+      className,
+      pending,
+      leftIcon,
+      rightIcon,
+      disabled,
+      error,
+      onRightClick,
+      placeholder,
+      barColor,
+      ...props
+    },
+    ref
+  ) => (
     <>
       <div className={b()}>
         <input
           ref={ref}
-          className={b('control')}
-          type="text"
+          className={cn(b('control'), className)}
           disabled={disabled}
           placeholder={placeholder}
           aria-label={placeholder}
@@ -38,7 +52,7 @@ const Input = React.forwardRef(
             <Icon {...rightIcon} />
           </Clickable>
         )}
-        <span className={b('bar', { error: !!error })} />
+        <span className={b('bar', { error: !!error })} style={{ 'background-color': barColor }} />
       </div>
       {error && <p className={b('error')}>{error}</p>}
     </>
@@ -47,6 +61,7 @@ const Input = React.forwardRef(
 
 Input.propTypes = {
   /* eslint-disable react/require-default-props */
+  className: PropTypes.string,
   pending: PropTypes.bool,
   disabled: PropTypes.bool,
   leftIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
@@ -55,6 +70,7 @@ Input.propTypes = {
   error: PropTypes.node,
   onRightClick: PropTypes.func,
   placeholder: PropTypes.string,
+  barColor: PropTypes.string,
   /* eslint-enable */
 };
 

components/common/ui/input.module.scss

@@ -74,6 +74,19 @@
     }
   }
 
+  // remove number input arrows in Chrome, Safari, Edge, Opera
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  // remove number input arrows in Firefox
+  // stylelint-disable-next-line selector-no-qualifying-type
+  input[type='number'] {
+    appearance: textfield;
+  }
+
   // change autocomplete styles in Chrome
   input:-webkit-autofill,
   input:-webkit-autofill:hover,

components/layout/header/Header.js

@@ -18,6 +18,7 @@ const b = bem(styles);
 
 const Header = ({ toggleSidebar, color }) => {
   const router = useRouter();
+
   return (
     <header className={b()}>
       <Link className={b('logo')} route={ROUTES_NAMES.main} titleId="header.to-main">

constants/api.js

@@ -39,5 +39,9 @@ export default {
       get: slug => `${API_URL}/games/tinder/${slug}`,
       postStats: `${API_URL}/games/tinder/stats`,
     },
+    xy: {
+      get: slug => `${API_URL}/games/xy/${slug}`,
+      getOutcome: slug => `${API_URL}/games/xy/getOutcome/${slug}`,
+    },
   },
 };

features/layout/blocks/banner/BannerBlock.js

@@ -14,11 +14,13 @@ import styles from './banner.module.scss';
 const b = bem(styles);
 
 const CDN_HOST = 'https://res.cloudinary.com/wir-by/image/upload';
-const BANNERS_AVAILABLE = ['mapa', 'ny2021', 'tinder'];
+const BANNERS_AVAILABLE = ['mapa', NY2021, 'tinder', 'uzrost'];
+const BANNERS_WITH_SUBTITLE = [NY2021, 'tinder', 'uzrost'];
 const LINK = {
   mapa: { href: 'https://map.wir.by?utm_source=wirby-main-page' },
   [NY2021]: { route: `game/${NY2021}` },
   tinder: { route: `game/tinder` },
+  uzrost: { href: 'game/uzrost' },
 };
 const IMAGE_LINK = {
   mapa: (width, screen) =>
@@ -27,6 +29,8 @@ const IMAGE_LINK = {
     `${CDN_HOST}/c_scale,w_${width},f_auto,q_auto/v1607868560/production/banners/newyear2021-all-sizes/${screen}.png`,
   tinder: (width, screen) =>
     `${CDN_HOST}/c_scale,w_${width},f_auto,q_auto/v1613151926/production/banners/tinder-all-sizes/${screen}.png`,
+  uzrost: (width, screen) =>
+    `${CDN_HOST}/c_scale,w_${width},f_auto,q_auto/v1727982011/production/banners/uzrost-v2-all-sizes/${screen}.png`,
 };
 
 const BANNERS = banner =>
@@ -57,7 +61,7 @@ const BannerBlock = ({ block: { banner }, inViewport }) => {
       <div className={b()}>
         <Link {...linkProps}>
           <div className={cn(b('title'), b(`${banner}-title`))}>{title}</div>
-          {[NY2021, 'tinder'].includes(banner) && (
+          {BANNERS_WITH_SUBTITLE.includes(banner) && (
             <div className={cn(b('subtitle'), b(`${banner}-subtitle`))}>{subtitle}</div>
           )}
           <Picture sources={BANNERS(banner)} alt={title} inViewport={inViewport} />

features/layout/blocks/banner/banner.module.scss

@@ -236,4 +236,92 @@
       top: 198px;
     }
   }
+
+  &__uzrost-title {
+    color: $primary-white;
+    font-weight: 700;
+
+    @include screen-desktop {
+      font-size: 60px;
+      height: 66px;
+      left: 196px;
+      line-height: 66px;
+      top: 78px;
+      width: 645px;
+    }
+
+    @include screen-tablet-large {
+      font-size: 48px;
+      height: 60px;
+      left: 152px;
+      line-height: 60px;
+      top: 84px;
+      width: 515px;
+    }
+
+    @include screen-tablet {
+      font-size: 48px;
+      height: 48px;
+      left: 61px;
+      line-height: 48px;
+      top: 96px;
+      width: 515px;
+    }
+
+    @include screen-touch {
+      font-size: 48px;
+      height: 96px;
+      left: 59px;
+      line-height: 48px;
+      text-align: center;
+      top: 70px;
+      width: 362px;
+    }
+
+    @include screen-mobile {
+      font-size: 30px;
+      height: 72px;
+      left: 46px;
+      line-height: 36px;
+      text-align: center;
+      top: 136px;
+      width: 209px;
+    }
+  }
+
+  &__uzrost-subtitle {
+    color: $primary-white;
+    font-size: 16px;
+    font-weight: 400;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+    width: 177px;
+
+    @include screen-desktop {
+      left: 467px;
+      top: 54px;
+      width: 87px;
+    }
+
+    @include screen-tablet-large {
+      left: 320px;
+      top: 60px;
+    }
+
+    @include screen-tablet {
+      left: 224px;
+      top: 72px;
+    }
+
+    @include screen-touch {
+      left: 152px;
+      top: 46px;
+    }
+
+    @include screen-mobile {
+      left: 62px;
+      top: 112px;
+    }
+  }
 }