Ledger Nano X - The secure hardware wallet
SHARE
TWEET

Untitled

a guest Apr 8th, 2020 113 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useEffect, useState } from "react";
  2. import "./SwitchConsole.css";
  3.  
  4. export default function SwitchConsole({ inputEvent }) {
  5.   const [buttonStates, setButtonStates] = useState({
  6.     KeyW: false,
  7.     KeyA: false,
  8.     KeyS: false,
  9.     KeyD: false,
  10.     KeyO: false,
  11.     KeyP: false,
  12.     KeyK: false,
  13.     KeyL: false,
  14.     ArrowUp: false,
  15.     ArrowLeft: false,
  16.     ArrowDown: false,
  17.     ArrowRight: false,
  18.   });
  19.  
  20.   useEffect(() => {
  21.     if (!inputEvent) return;
  22.  
  23.     setButtonStates((s) => ({
  24.       ...s,
  25.       [inputEvent.code]: inputEvent.type === "keydown",
  26.     }));
  27.   }, [inputEvent]);
  28.  
  29.   function getLeftStickStyles() {
  30.     let translateX = "translateX(0px)";
  31.     let translateY = "translateX(0px)";
  32.     if (buttonStates.KeyD) {
  33.       translateX = "translateX(300px)";
  34.     } else if (buttonStates.KeyA) {
  35.       translateX = "translateX(-300px)";
  36.     }
  37.  
  38.     if (buttonStates.KeyS) {
  39.       translateY = "translateY(300px)";
  40.     } else if (buttonStates.KeyW) {
  41.       translateY = "translateY(-300px)";
  42.     }
  43.  
  44.     return {
  45.       fill: "#3a3c3b",
  46.       transform: `${translateX} ${translateY}`,
  47.     };
  48.   }
  49.  
  50.   function getRightStickStyles() {
  51.     let translateX = "translateX(0px)";
  52.     let translateY = "translateX(0px)";
  53.     if (buttonStates.ArrowRight) {
  54.       translateX = "translateX(300px)";
  55.     } else if (buttonStates.ArrowLeft) {
  56.       translateX = "translateX(-300px)";
  57.     }
  58.  
  59.     if (buttonStates.ArrowDown) {
  60.       translateY = "translateY(300px)";
  61.     } else if (buttonStates.ArrowUp) {
  62.       translateY = "translateY(-300px)";
  63.     }
  64.  
  65.     return {
  66.       fill: "#3a3c3b",
  67.       transform: `${translateX} ${translateY}`,
  68.     };
  69.   }
  70.  
  71.   function getButtonFlashStyle(buttonState, currentColor) {
  72.     return {
  73.       fill: buttonState ? "#FFFFFF" : currentColor,
  74.     };
  75.   }
  76.  
  77.   return (
  78.     <svg
  79.       xmlns="http://www.w3.org/2000/svg"
  80.       xmlSpace="preserve"
  81.       width="2208.47px"
  82.       version="1.1"
  83.       style={{
  84.         shapeRendering: "geometricPrecision",
  85.         textRendering: "geometricPrecision",
  86.         imageRendering: "optimizeQuality",
  87.         fillRule: "evenodd",
  88.         clipRule: "evenodd",
  89.       }}
  90.       viewBox="0 0 25453 10856"
  91.       xmlnsXlink="http://www.w3.org/1999/xlink"
  92.     >
  93.       <g id="Capa_x0020_1">
  94.         <metadata id="CorelCorpID_0Corel-Layer" />
  95.         <g id="_2497485212656">
  96.           <path className="fil0 str0" d="M25453 2317c0,-1274 -1043,-2317 -2317,-2317l0 2317 2317 0z" />
  97.           <path className="fil0 str0" d="M0 2317c0,-1274 1043,-2317 2317,-2317l0 2317 -2317 0z" />
  98.           <path
  99.             className="fil0 str0"
  100.             d="M4020 77l17732 0c0,209 154,385 355,418l0 10361 -18511 0 0 -10356c233,0 424,-190 424,-423z"
  101.           />
  102.           <path
  103.             style={{ fill: "#000000" }}
  104.             className="fil1 str0"
  105.             d="M4398 421l17055 0c124,0 225,101 225,225l0 9498c0,124 -101,225 -225,225l-1057 0 0 -96c0,-59 -48,-106 -106,-106l-648 0c-58,0 -106,47 -106,106l0 96 -9484 0 0 -243c0,-80 -84,-146 -189,-146 -104,0 -188,66 -188,146l0 243 -3360 0 0 -96c0,-59 -48,-106 -106,-106l-648 0c-59,0 -106,47 -106,106l0 96 -1057 0c-124,0 -225,-101 -225,-225l0 -9498c0,-124 101,-225 225,-225z"
  106.           />
  107.           <rect className="fil2 str0" x={5485} y={1204} width={14732} height={8277.8} />
  108.           <path
  109.             style={{ fill: "#8fd4e3" }}
  110.             className="fil3 str0"
  111.             d="M22107 77l997 0c1257,0 2286,1029 2286,2286l0 6207c0,1257 -1029,2286 -2286,2286l-997 0 0 -10779z"
  112.           />
  113.           <path
  114.             style={{ fill: "#99dab0" }}
  115.             className="fil3 str0"
  116.             d="M2354 77l1228 0 0 10779 -1228 0c-1257,0 -2286,-1029 -2286,-2286l0 -6207c0,-1257 1029,-2286 2286,-2286z"
  117.           />
  118.           <rect className="fil4 str0" x={2735} y={949} width={566} height={201} />
  119.           <circle style={{ fill: "#4f5153" }} className="fil5 str1" cx={1846} cy={2669} r={841} />
  120.           <circle style={getLeftStickStyles()} className="analog-stick fil6 str1" cx={1846} cy={2669} r={674} />
  121.           <circle style={{ fill: "#8c9294" }} className="fil7 str0" cx={23061} cy={7897} r={421} />
  122.           <circle style={{ fill: "#3a3c3b" }} className="fil8 str0" cx={1915} cy={4859} r={392} />
  123.           <circle style={{ fill: "#3a3c3b" }} className="fil8 str0" cx={2793} cy={5669} r={392} />
  124.           <circle style={{ fill: "#3a3c3b" }} className="fil8 str0" cx={1920} cy={6489} r={392} />
  125.           <circle style={{ fill: "#3a3c3b" }} className="fil8 str0" cx={1084} cy={5674} r={392} />
  126.           <polygon className="fil9 str0" points="1915,4693 1987,4818 2059,4943 1915,4943 1770,4943 1842,4818 " />
  127.           <polygon className="fil9 str0" points="2960,5669 2835,5741 2710,5813 2710,5669 2710,5525 2835,5597 " />
  128.           <polygon className="fil9 str0" points="917,5674 1042,5602 1167,5530 1167,5674 1167,5819 1042,5746 " />
  129.           <polygon className="fil9 str0" points="1920,6656 1848,6531 1776,6406 1920,6406 2064,6406 1992,6531 " />
  130.           <rect
  131.             style={{ fill: "#434a4a" }}
  132.             className="fil8 str0"
  133.             x={2184}
  134.             y={7375}
  135.             width={667}
  136.             height={667}
  137.             rx={53}
  138.             ry={53}
  139.           />
  140.           <circle style={{ fill: "#303435" }} className="fil10 str2" cx={2517} cy={7709} r={217} />
  141.           <circle style={{ fill: "#3d4142" }} className="fil8" cx={23061} cy={7897} r={328} />
  142.           <polygon
  143.             className="fil4 str0"
  144.             points="22953,949 22771,949 22771,766 22570,766 22570,949 22387,949 22387,1150 22570,1150 22570,1332 22771,1332 22771,1150 22953,1150 "
  145.           />
  146.           <circle
  147.             style={getButtonFlashStyle(buttonStates.KeyO, "#5774b8")}
  148.             className="transitionFill fil8 str0"
  149.             cx={23673}
  150.             cy={2074}
  151.             r={392}
  152.           />
  153.           <circle
  154.             style={getButtonFlashStyle(buttonStates.KeyP, "#ec5c5c")}
  155.             className="transitionFill fil8 str0"
  156.             cx={24552}
  157.             cy={2884}
  158.             r={392}
  159.           />
  160.           <circle
  161.             style={getButtonFlashStyle(buttonStates.KeyL, "#e8d651")}
  162.             className="transitionFill fil8 str0"
  163.             cx={23678}
  164.             cy={3704}
  165.             r={392}
  166.           />
  167.           <circle
  168.             style={getButtonFlashStyle(buttonStates.KeyK, "#5eb08a")}
  169.             className="transitionFill fil8 str0"
  170.             cx={22842}
  171.             cy={2889}
  172.             r={392}
  173.           />
  174.           <circle style={{ fill: "#4f5153" }} className="fil11 str1" cx={23720} cy={5873} r={841} />
  175.           <circle style={getRightStickStyles()} className="analog-stick fil12 str1" cx={23720} cy={5873} r={674} />
  176.           <polygon
  177.             className="fil13"
  178.             points="22861,3019 22824,3019 22824,2907 22727,2759 22771,2759 22843,2877 22916,2759 22958,2759 22861,2907 "
  179.           />
  180.           <polygon
  181.             className="fil13"
  182.             points="23673,2041 23735,1945 23778,1945 23695,2068 23789,2204 23743,2204 23672,2095 23602,2204 23557,2204 23650,2067 23566,1945 23611,1945 "
  183.           />
  184.           <path
  185.             className="fil13"
  186.             d="M24502 2918l97 0 -48 -121 -49 121zm-38 95l-41 0 113 -258 32 0 112 258 -41 0 -27 -63 -122 0 -26 63z"
  187.           />
  188.           <path
  189.             className="fil13"
  190.             d="M23655 3823l45 0c31,0 64,-9 64,-45 0,-30 -21,-43 -61,-43l-48 0 0 88zm0 -119l47 0c28,0 51,-12 51,-40 0,-28 -22,-39 -57,-39l-41 0 0 79zm-36 -109l89 0c39,0 81,16 81,65 0,29 -18,49 -45,57l0 1c33,4 57,26 57,62 0,50 -43,74 -97,74l-85 0 0 -259z"
  191.           />
  192.           <path
  193.             style={{ fill: "#090b0c" }}
  194.             className="fil14"
  195.             d="M23123 7995c0,9 -4,13 -12,13l-100 0c-9,0 -13,-4 -13,-13l0 -75c0,-9 4,-12 13,-12l100 0c8,0 12,3 12,12l0 75zm132 -122c-62,-53 -124,-106 -186,-158 -6,-6 -11,-6 -16,0 -63,52 -125,105 -187,158 -11,10 -7,22 8,22l24 0c9,0 13,4 13,13l0 162c0,9 3,13 12,13l275 0c9,0 13,-4 13,-13l0 -162c0,-9 3,-13 12,-13l24 0c15,0 20,-12 8,-22z"
  196.           />
  197.         </g>
  198.       </g>
  199.     </svg>
  200.   );
  201. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top