Commit 31108e7
Changed files (5)
006.GamePad/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>006.GamePad</title>
+ <link rel="stylesheet" href="./style.css">
+ <link rel="stylesheet" href="../assets/common.css">
+ <link rel="shortcut icon" href="../assets/favicon.png" type="image/png">
+ <script src="../assets/common.js"></script>
+</head>
+
+<body>
+ <!-- Modal Section -->
+ <input class="modal-state" id="modal" type="checkbox" />
+ <div class="modal">
+ <label class="modal__bg" for="modal"></label>
+ <div class="modal__inner" style="width: 30%;">
+ <label class="modal__close" for="modal"></label>
+ <h2>006.GamePad</h2>
+ <p class="modal__p">
+ <ul>
+ <li>
+ A simple gamepad design using SVG and JavaScript.
+ </li>
+
+
+ </ul>
+ </p>
+ </div>
+ </div>
+
+ <!-- Main Content -->
+ <h1>GamePad</h1>
+ <p id="tooltip"></p>
+ <svg id="controller" style="opacity: 25%;" width="500" height="330" viewBox="0 0 300 230" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <g id="Group">
+ <path id="BACK"
+ d="M135.211 80.9539C135.211 84.7195 132.245 87.7721 128.585 87.7721C124.926 87.7721 121.959 84.7195 121.959 80.9539C121.959 77.1883 124.926 74.1357 128.585 74.1357C132.245 74.1357 135.211 77.1883 135.211 80.9539Z"
+ fill="black" />
+ <path id="START"
+ d="M177.081 80.9539C177.081 84.7195 174.114 87.7721 170.454 87.7721C166.795 87.7721 163.828 84.7195 163.828 80.9539C163.828 77.1883 166.795 74.1357 170.454 74.1357C174.114 74.1357 177.081 77.1883 177.081 80.9539Z"
+ fill="black" />
+ <path id="Vector"
+ d="M93.5101 25.5259C96.8048 25.3967 96.8048 25.3967 97.9899 26.3124C98.1486 26.4303 98.3075 26.5481 98.4711 26.6695C99.0392 27.1 99.5902 27.5502 100.141 28.0026C100.453 28.2575 100.766 28.5121 101.078 28.7665C101.277 28.9285 101.475 29.0909 101.672 29.2539C101.863 29.41 102.055 29.5633 102.25 29.7138C102.599 30 102.599 30 102.937 30.3463C104.453 31.747 106.125 31.5775 108.093 31.5605C108.467 31.5623 108.841 31.5646 109.215 31.5677C110.027 31.5728 110.839 31.5734 111.65 31.5705C112.857 31.5659 114.065 31.5692 115.272 31.5741C117.428 31.5826 119.584 31.5831 121.741 31.5801C123.628 31.5775 125.514 31.5775 127.401 31.5798C127.655 31.5801 127.908 31.5805 128.162 31.5808C128.543 31.5812 128.924 31.5817 129.307 31.5821C132.854 31.5864 136.402 31.5881 139.95 31.584C140.083 31.5838 140.217 31.5837 140.355 31.5835C141.44 31.5821 142.527 31.5808 143.611 31.5794C147.846 31.5741 152.08 31.5769 156.315 31.5863C161.075 31.5967 165.835 31.6017 170.595 31.5981C171.102 31.5977 171.609 31.5973 172.118 31.597C172.242 31.5969 172.367 31.5969 172.496 31.5967C174.381 31.5955 176.268 31.5986 178.153 31.6038C180.297 31.6096 182.441 31.6096 184.586 31.6017C185.786 31.5974 186.985 31.5977 188.185 31.6047C189.081 31.6095 189.978 31.6055 190.874 31.598C191.236 31.5963 191.599 31.5974 191.96 31.6017C194.305 31.6594 194.305 31.6594 196.288 30.5538C196.568 30.2755 196.829 29.9877 197.093 29.6927C197.284 29.5308 197.478 29.373 197.679 29.2227C197.912 29.0417 197.912 29.0417 198.151 28.8572C198.237 28.7897 198.324 28.7223 198.413 28.6528C198.896 28.2778 199.374 27.8981 199.844 27.508C202.259 25.511 202.259 25.511 203.849 25.5297C204.028 25.5316 204.204 25.5334 204.387 25.5353C204.567 25.5382 204.745 25.5411 204.93 25.5442C205.168 25.5468 205.168 25.5468 205.411 25.5494C215.067 25.6872 224.884 27.3967 233.662 31.5365C233.805 31.6032 233.948 31.6699 234.094 31.7387C237.892 33.5319 241.266 35.8371 244.417 38.6044C244.57 38.7376 244.722 38.871 244.878 39.0083C245.61 39.6593 246.298 40.3177 246.928 41.0675C247.197 41.3854 247.477 41.6887 247.759 41.9942C249.588 44.056 251.046 46.3684 252.186 48.87C252.624 49.8286 253.076 50.6349 253.778 51.4308C255.004 52.9162 255.728 54.6501 256.44 56.418C256.55 56.6844 256.659 56.9508 256.768 57.2171C257.161 58.1819 257.55 59.1485 257.939 60.1153C258.02 60.3168 258.101 60.5184 258.183 60.72C261.669 69.3763 265.131 78.0463 268.341 86.8103C268.576 87.451 268.814 88.0901 269.057 88.7278C269.475 89.8233 269.857 90.9281 270.217 92.0436C270.381 92.5506 270.556 93.0392 270.767 93.5309C271.08 94.2622 271.318 95.0136 271.561 95.7711C271.762 96.3888 271.979 96.9926 272.223 97.5934C272.597 98.5122 272.899 99.451 273.205 100.393C273.414 101.035 273.632 101.667 273.89 102.29C274.334 103.381 274.703 104.498 275.083 105.612C275.213 105.995 275.344 106.377 275.476 106.759C275.948 108.143 276.403 109.53 276.83 110.929C276.966 111.354 277.115 111.761 277.289 112.173C277.578 112.869 277.804 113.576 278.027 114.295C278.346 115.315 278.669 116.335 279.001 117.353C279.041 117.472 279.079 117.594 279.121 117.718C279.201 117.967 279.282 118.216 279.363 118.465C279.58 119.13 279.797 119.796 280.013 120.461C280.078 120.661 280.078 120.661 280.144 120.865C280.525 122.034 280.904 123.205 281.282 124.377C281.376 124.665 281.47 124.954 281.562 125.243C281.945 126.424 282.313 127.609 282.676 128.796C282.744 129.018 282.744 129.018 282.813 129.242C282.943 129.669 283.074 130.098 283.205 130.525C283.268 130.731 283.268 130.731 283.332 130.941C286.792 142.299 286.792 142.299 288.089 147.686C288.257 148.374 288.441 149.057 288.639 149.737C289.056 151.185 289.429 152.641 289.802 154.101C289.839 154.247 289.876 154.391 289.914 154.542C290.48 156.756 291.005 158.973 291.485 161.207C291.628 161.859 291.78 162.507 291.932 163.157C293.557 170.091 294.851 177.082 294.844 184.225C294.844 184.356 294.844 184.487 294.844 184.62C294.84 186.92 294.75 189.196 294.507 191.485C294.492 191.628 294.478 191.773 294.462 191.92C293.691 199.074 291.22 206.177 286.825 211.921C286.671 212.122 286.671 212.122 286.516 212.328C285.703 213.371 284.816 214.344 283.905 215.301C283.822 215.388 283.739 215.476 283.655 215.565C282.47 216.804 281.243 217.927 279.866 218.947C279.614 219.134 279.363 219.327 279.114 219.517C275.161 222.502 269.345 225.809 264.238 225.442C263.722 225.314 263.313 225.096 262.855 224.827C262.706 224.749 262.556 224.669 262.402 224.587C259.358 222.939 256.596 220.737 253.944 218.528C253.867 218.463 253.788 218.398 253.709 218.332C252.499 217.328 251.333 216.286 250.184 215.212C249.97 215.014 249.755 214.82 249.537 214.626C248.418 213.623 247.354 212.569 246.29 211.507C246.214 211.43 246.137 211.355 246.057 211.275C245.259 210.482 244.477 209.682 243.746 208.828C243.3 208.316 242.829 207.83 242.363 207.34C241.578 206.511 240.833 205.67 240.121 204.777C239.799 204.38 239.461 204.002 239.117 203.624C238.393 202.829 237.718 202.001 237.042 201.165C236.818 200.893 236.594 200.621 236.371 200.349C235.555 199.352 234.761 198.34 233.969 197.324C233.846 197.166 233.723 197.007 233.596 196.846C232.465 195.386 231.371 193.899 230.282 192.407C230.199 192.293 230.116 192.18 230.03 192.063C228.273 189.657 226.53 187.232 224.933 184.715C222.289 180.565 218.729 177.174 214.456 174.738C214.304 174.65 214.304 174.65 214.15 174.561C208.407 171.285 202.026 170.024 195.469 170.051C195.059 170.05 194.647 170.05 194.236 170.048C193.349 170.047 192.462 170.047 191.576 170.048C190.256 170.051 188.938 170.05 187.618 170.048C185.262 170.047 182.906 170.047 180.549 170.05C178.487 170.051 176.425 170.053 174.361 170.051C174.224 170.051 174.088 170.051 173.946 170.051C173.388 170.051 172.832 170.051 172.275 170.051C167.057 170.05 161.84 170.053 156.622 170.057C151.994 170.06 147.366 170.06 142.739 170.059C141.552 170.059 140.368 170.059 139.182 170.059C139.036 170.059 138.89 170.059 138.739 170.059C134.864 170.057 130.987 170.057 127.111 170.059C126.695 170.06 126.277 170.06 125.86 170.06C125.582 170.06 125.306 170.06 125.029 170.06C122.969 170.062 120.908 170.06 118.848 170.06C116.503 170.06 114.16 170.06 111.815 170.064C110.506 170.065 109.196 170.065 107.887 170.065C107.009 170.064 106.132 170.065 105.254 170.067C104.756 170.068 104.258 170.068 103.76 170.067C94.0657 170.044 85.0823 173.153 78.1122 180.014C77.5149 180.622 76.9979 181.285 76.479 181.959C76.3666 182.102 76.2542 182.243 76.1384 182.391C75.1948 183.594 74.3345 184.837 73.4961 186.115C72.3041 187.933 71.0952 189.731 69.7994 191.476C69.5436 191.822 69.2899 192.167 69.0366 192.515C67.8515 194.134 66.6447 195.737 65.4163 197.324C65.3448 197.416 65.2734 197.508 65.1998 197.604C63.5143 199.779 61.7547 201.895 59.9555 203.977C59.7296 204.24 59.5057 204.504 59.2823 204.768C58.2369 206.004 57.15 207.193 56.0389 208.37C55.8151 208.609 55.5933 208.852 55.3729 209.095C54.3079 210.27 53.2056 211.403 52.0825 212.521C51.7876 212.815 51.4937 213.11 51.1997 213.405C50.2792 214.327 49.355 215.227 48.3612 216.069C48.0883 216.318 47.8162 216.567 47.5449 216.817C46.7147 217.575 45.856 218.285 44.9809 218.988C44.8106 219.128 44.6403 219.268 44.4701 219.409C36.7228 225.76 36.7228 225.76 33.2483 225.543C26.9353 224.829 20.5673 220.147 16.0949 215.916C15.8807 215.714 15.8807 215.714 15.6621 215.508C14.5638 214.444 13.6276 213.297 12.7146 212.074C12.649 211.987 12.5834 211.901 12.516 211.81C10.0676 208.548 8.2333 204.899 6.97998 201.021C6.89194 200.753 6.79729 200.488 6.70126 200.222C4.01547 192.781 4.06817 184.039 5.03217 176.274C5.04661 176.156 5.06121 176.036 5.07626 175.914C5.56702 171.935 6.32758 168.052 7.25931 164.154C7.41265 163.509 7.55954 162.862 7.7072 162.215C7.85086 161.587 7.99683 160.96 8.14295 160.331C8.2714 159.778 8.39924 159.227 8.52707 158.674C9.18423 155.837 9.86213 153.007 10.623 150.197C10.7352 149.779 10.8458 149.362 10.9566 148.946C11.437 147.142 11.9349 145.344 12.4645 143.554C12.8001 142.414 13.1112 141.268 13.4156 140.119C13.7584 138.827 14.1271 137.548 14.5389 136.278C14.7926 135.491 15.0235 134.703 15.2402 133.905C15.8586 131.637 16.5509 129.393 17.3055 127.168C17.5481 126.447 17.7691 125.723 17.9771 124.994C18.3901 123.546 18.8769 122.123 19.3612 120.699C19.6961 119.708 20.0117 118.717 20.3004 117.712C20.7431 116.177 21.2664 114.671 21.7895 113.163C21.9774 112.619 22.1648 112.076 22.3518 111.532C22.3965 111.403 22.4411 111.273 22.487 111.141C22.7865 110.265 23.0672 109.387 23.3281 108.501C23.4724 108.046 23.6374 107.604 23.8069 107.156C24.0275 106.566 24.2279 105.967 24.4304 105.37C24.4994 105.167 24.4994 105.167 24.5697 104.959C24.7155 104.532 24.8611 104.103 25.0066 103.675C25.1983 103.109 25.3904 102.545 25.5827 101.98C25.6259 101.853 25.6691 101.725 25.7137 101.593C25.9441 100.915 26.1841 100.244 26.4376 99.5754C26.5884 99.1759 26.731 98.7734 26.8737 98.3708C27.3944 96.9081 27.9231 95.4499 28.4514 93.9903C28.6271 93.5047 28.8026 93.0192 28.9782 92.5337C29.0918 92.2202 29.2053 91.9068 29.3189 91.5918C29.3705 91.4505 29.422 91.3076 29.4751 91.1601C29.6243 90.7483 29.7738 90.335 29.9233 89.9232C30.0014 89.7081 30.0014 89.7081 30.0811 89.4868C30.3854 88.6494 30.6923 87.812 31.0049 86.9777C31.0476 86.8625 31.0903 86.7488 31.1342 86.6305C34.1287 78.6267 37.1917 70.6471 40.4245 62.7356C40.6634 62.1506 40.9008 61.5652 41.1379 60.9795C41.4784 60.1386 41.8208 59.2986 42.1655 58.4594C42.3056 58.1181 42.4454 57.7767 42.5848 57.4351C44.4636 52.8461 44.4636 52.8461 45.97 50.9442C46.5615 50.1843 46.9653 49.4096 47.3625 48.5339C49.4571 43.9165 53.2093 39.6327 57.2993 36.6586C57.6071 36.4336 57.9104 36.2031 58.214 35.9725C63.6094 31.9209 70.033 29.3708 76.5366 27.7337C76.7937 27.6687 76.7937 27.6687 77.056 27.6025C79.2524 27.0627 81.4723 26.6964 83.7101 26.3796C83.8265 26.363 83.9432 26.3464 84.0632 26.3293C86.0377 26.0497 88.0093 25.8254 90.0002 25.6978C90.1936 25.6848 90.1936 25.6848 90.391 25.6716C91.1521 25.6218 91.9128 25.5835 92.675 25.5577C92.9534 25.5482 93.2319 25.5374 93.5101 25.5259ZM77.2473 35.2241C77.0979 35.2562 76.9486 35.2885 76.7948 35.3217C74.612 35.7997 72.4682 36.4112 70.3331 37.0679C70.1975 37.1094 70.0622 37.1508 69.9227 37.1937C62.988 39.3483 56.099 42.6377 50.741 47.6234C50.4091 47.9303 50.0704 48.2236 49.7249 48.5147C48.6913 49.418 47.8179 50.4745 46.9687 51.5493C46.7949 51.7692 46.7949 51.7692 46.6176 51.9934C45.3832 53.7179 44.5706 55.6166 43.7805 57.5704C43.6677 57.8462 43.5549 58.122 43.442 58.3978C43.1432 59.1284 42.8463 59.8597 42.5498 60.5913C42.3114 61.1784 42.0718 61.7648 41.8322 62.3513C40.1816 66.3923 38.585 70.4531 37.0162 74.5265C36.6851 75.3861 36.3528 76.2453 36.0183 77.1036C34.3775 81.3158 32.8004 85.5519 31.2347 89.7926C30.9397 90.59 30.6429 91.389 30.3453 92.1864C29.1708 95.3332 29.1708 95.3332 28.0488 98.4984C27.8285 99.1375 27.6026 99.7736 27.3755 100.41C26.6761 102.369 25.9836 104.328 25.3323 106.304C24.9268 107.531 24.5084 108.754 24.0873 109.977C22.4291 114.794 20.8029 119.624 19.3099 124.494C19.1223 125.103 18.9293 125.711 18.7357 126.318C18.2475 127.859 17.7777 129.405 17.3094 130.951C17.1685 131.415 17.0266 131.879 16.8847 132.343C16.4611 133.729 16.0393 135.113 15.6472 136.508C15.5129 136.98 15.3757 137.45 15.2366 137.919C14.7328 139.624 14.2525 141.331 13.8094 143.054C13.5867 143.919 13.3584 144.781 13.118 145.639C13.088 145.747 13.058 145.855 13.0271 145.965C12.8764 146.504 12.7252 147.042 12.574 147.582C11.9379 149.851 11.3282 152.12 10.7979 154.417C10.6765 154.937 10.5485 155.455 10.4194 155.972C10.3827 156.12 10.3827 156.12 10.3454 156.27C10.2034 156.834 10.0556 157.398 9.90269 157.959C9.23785 160.419 8.70146 162.902 8.17429 165.394C8.01634 166.139 7.8547 166.883 7.68984 167.627C6.88902 171.251 6.31929 174.885 5.95406 178.579C5.93901 178.722 5.9241 178.866 5.90874 179.014C5.75201 180.728 5.76308 182.448 5.762 184.167C5.76185 184.334 5.76169 184.502 5.76154 184.672C5.764 188.638 6.06807 192.512 6.87596 196.402C6.91437 196.591 6.91437 196.591 6.95355 196.783C8.09578 202.225 10.5708 207.612 14.0975 211.921C14.2228 212.077 14.3482 212.234 14.4773 212.395C16.1826 214.494 18.1102 216.433 20.294 218.031C20.5478 218.219 20.7984 218.409 21.0489 218.6C24.4603 221.161 29.4214 224.174 33.803 224.26C34.0894 224.269 34.0894 224.269 34.3815 224.279C35.5855 224.217 36.6739 223.457 37.6729 222.839C37.7912 222.767 37.9096 222.693 38.0315 222.618C40.1719 221.281 42.158 219.744 44.0984 218.134C44.4756 217.822 44.8585 217.518 45.2402 217.212C45.9598 216.624 46.6439 216.002 47.3218 215.365C47.746 214.967 48.1755 214.58 48.6168 214.201C49.3089 213.597 49.96 212.956 50.609 212.305C50.7308 212.183 50.8527 212.062 50.9783 211.936C51.2343 211.681 51.49 211.424 51.7457 211.168C52.1341 210.779 52.5234 210.39 52.9128 210.002C53.1628 209.753 53.4128 209.502 53.6627 209.252C53.8351 209.08 53.8351 209.08 54.0111 208.904C54.6358 208.276 55.2357 207.635 55.8126 206.964C56.1549 206.567 56.5125 206.186 56.8696 205.804C57.5376 205.082 58.1659 204.335 58.7829 203.568C59.107 203.175 59.4438 202.798 59.7889 202.424C60.413 201.738 60.9843 201.022 61.5516 200.291C62.0022 199.71 62.4639 199.143 62.9387 198.582C63.8099 197.544 64.6267 196.467 65.4446 195.386C65.737 195.001 66.032 194.62 66.3273 194.237C67.4197 192.821 68.477 191.392 69.476 189.907C69.9683 189.177 70.4764 188.463 71.0053 187.759C71.7264 186.796 72.3801 185.794 73.0315 184.782C74.2734 182.859 75.5919 181.085 77.1766 179.428C77.3279 179.27 77.4784 179.11 77.6282 178.951C83.25 172.969 91.8045 169.357 99.9705 169.036C101.197 169.006 102.424 169.011 103.65 169.014C104.065 169.013 104.479 169.013 104.894 169.013C105.79 169.011 106.687 169.011 107.584 169.011C108.918 169.013 110.252 169.013 111.585 169.011C113.968 169.009 116.351 169.009 118.734 169.011C120.819 169.011 122.904 169.011 124.989 169.011C125.127 169.011 125.266 169.011 125.408 169.011C125.971 169.011 126.533 169.011 127.096 169.011C132.367 169.009 137.639 169.011 142.909 169.013C147.589 169.014 152.268 169.014 156.948 169.013C162.209 169.011 167.471 169.009 172.732 169.011C173.295 169.011 173.856 169.011 174.416 169.011C174.624 169.011 174.624 169.011 174.836 169.011C176.919 169.011 179.003 169.011 181.086 169.011C183.456 169.009 185.826 169.009 188.196 169.011C189.52 169.013 190.846 169.013 192.171 169.011C193.057 169.011 193.944 169.011 194.83 169.013C195.334 169.013 195.838 169.013 196.342 169.013C198.951 169.008 201.466 169.108 204.028 169.647C204.22 169.689 204.22 169.689 204.418 169.729C209.78 170.859 215.259 173.02 219.373 176.735C219.505 176.852 219.635 176.969 219.771 177.088C220.032 177.322 220.291 177.557 220.55 177.792C220.878 178.09 221.213 178.377 221.553 178.665C222.169 179.206 222.691 179.793 223.214 180.423C223.309 180.538 223.309 180.538 223.406 180.655C224.537 182.022 225.566 183.433 226.536 184.918C226.9 185.476 227.269 186.032 227.636 186.587C227.707 186.695 227.777 186.802 227.851 186.913C228.635 188.097 229.446 189.262 230.282 190.41C230.403 190.576 230.403 190.576 230.526 190.746C233.642 195.027 236.89 199.202 240.352 203.209C240.578 203.471 240.802 203.736 241.025 204C241.916 205.054 242.83 206.077 243.778 207.081C244.255 207.585 244.72 208.093 245.178 208.613C246.091 209.63 247.059 210.59 248.025 211.553C248.346 211.873 248.664 212.193 248.984 212.512C249.19 212.72 249.397 212.925 249.603 213.133C249.697 213.227 249.791 213.32 249.887 213.417C250.465 213.992 251.061 214.537 251.677 215.069C252.02 215.364 252.352 215.668 252.685 215.972C253.492 216.701 254.328 217.386 255.173 218.067C255.35 218.211 255.525 218.354 255.7 218.498C257.594 220.044 259.573 221.442 261.635 222.753C261.755 222.828 261.874 222.903 261.996 222.982C263.57 223.97 264.801 224.52 266.697 224.213C273.161 222.67 279.803 218.567 284.059 213.457C284.179 213.323 284.3 213.188 284.425 213.051C287.356 209.757 289.387 205.864 290.973 201.78C291.027 201.643 291.081 201.506 291.134 201.365C291.545 200.279 291.847 199.18 292.125 198.054C292.172 197.866 292.218 197.677 292.267 197.484C293.304 193.197 293.65 188.965 293.644 184.562C293.644 184.374 293.642 184.187 293.642 183.993C293.636 180.719 293.458 177.514 292.971 174.277C292.955 174.171 292.94 174.066 292.923 173.957C292.677 172.313 292.377 170.681 292.049 169.053C292.024 168.928 291.998 168.804 291.973 168.675C291.004 163.884 289.828 159.145 288.624 154.41C288.384 153.466 288.146 152.523 287.912 151.58C287.863 151.386 287.816 151.191 287.765 150.991C287.674 150.624 287.584 150.255 287.491 149.886C287.209 148.748 286.895 147.625 286.554 146.503C286.321 145.722 286.124 144.931 285.923 144.141C285.575 142.792 285.19 141.46 284.776 140.13C284.446 139.059 284.137 137.982 283.838 136.901C283.102 134.248 282.364 131.59 281.459 128.99C281.236 128.345 281.043 127.695 280.858 127.039C280.553 125.966 280.231 124.9 279.9 123.837C279.841 123.646 279.783 123.456 279.721 123.26C279.061 121.145 278.371 119.037 277.678 116.932C277.498 116.383 277.318 115.836 277.139 115.288C276.247 112.571 275.335 109.864 274.396 107.164C274.162 106.488 273.93 105.814 273.7 105.138C273.085 103.344 272.441 101.562 271.79 99.7829C271.308 98.4615 270.833 97.1401 270.375 95.8095C269.13 92.2064 267.775 88.6433 266.437 85.074C266.368 84.8896 266.299 84.7053 266.228 84.5147C265.019 81.2896 263.8 78.0661 262.548 74.8559C262.499 74.7277 262.448 74.5995 262.396 74.4673C260.334 69.1829 258.223 63.9156 256.076 58.6651C256.003 58.4866 256.003 58.4866 255.929 58.3045C252.825 50.7056 247.569 45.7286 240.404 41.8351C240.138 41.6895 239.874 41.5392 239.611 41.3886C233.106 37.7487 225.516 35.6388 218.191 34.4558C217.979 34.4207 217.979 34.4207 217.762 34.385C217.454 34.3345 217.146 34.2845 216.837 34.2352C216.444 34.1717 216.051 34.1067 215.657 34.0405C213.863 33.7426 212.067 33.5232 210.258 33.3414C209.803 33.2952 209.349 33.2462 208.894 33.1968C202.657 32.548 196.381 32.5658 190.118 32.5715C188.942 32.5726 187.765 32.5716 186.588 32.5709C184.285 32.5692 181.982 32.5693 179.679 32.5703C177.663 32.571 175.647 32.5712 173.631 32.5709C173.496 32.5709 173.362 32.5709 173.223 32.5709C172.677 32.5707 172.13 32.5706 171.583 32.5706C166.471 32.5696 161.361 32.5704 156.249 32.5721C151.727 32.5735 147.204 32.5733 142.68 32.5719C137.577 32.5703 132.473 32.5696 127.371 32.5706C126.825 32.5707 126.28 32.5707 125.734 32.5709C125.599 32.5709 125.465 32.5709 125.327 32.5709C123.314 32.5713 121.301 32.5709 119.289 32.5701C116.996 32.5692 114.704 32.5695 112.41 32.5712C111.244 32.5719 110.078 32.5723 108.912 32.5712C98.2731 32.5621 87.6796 32.9524 77.2473 35.2241Z"
+ fill="white" />
+ <path id="xbox-R1"
+ d="M203.962 26.7325C204.112 26.7319 204.112 26.7319 204.266 26.7311C204.596 26.7305 204.927 26.7325 205.255 26.7348C205.369 26.7353 205.483 26.7357 205.599 26.7362C207.743 26.7456 209.865 26.8631 211.997 27.0805C212.15 27.0954 212.303 27.1102 212.46 27.1256C216.913 27.5674 221.413 28.3603 225.671 29.7483C226.019 29.8591 226.373 29.9618 226.725 30.0647C231.081 31.3658 235.455 33.4087 239.193 35.9922C239.281 36.052 239.369 36.1117 239.459 36.1732C240.825 37.1078 242.102 38.1238 243.342 39.2188C243.42 39.2872 243.499 39.3556 243.578 39.4259C246.085 41.6293 248.083 44.1474 249.949 46.9013C249.898 47.0027 249.847 47.1041 249.795 47.2086C249.695 47.1116 249.597 47.0145 249.494 46.9145C247.005 44.5517 244.159 42.7629 241.191 41.0626C241.017 40.9621 241.017 40.9621 240.839 40.8595C236.486 38.3611 231.542 36.5573 226.696 35.3293C226.284 35.2232 225.875 35.1104 225.465 34.9959C222.953 34.3005 220.405 33.8161 217.836 33.3802C217.721 33.3605 217.604 33.3408 217.486 33.3204C210.671 32.1645 203.84 31.7512 196.94 31.5364C197.373 31.0962 197.806 30.6695 198.284 30.2766C198.389 30.1898 198.495 30.103 198.604 30.0135C198.713 29.9235 198.824 29.8335 198.937 29.7407C199.052 29.6468 199.166 29.5531 199.285 29.4563C202.619 26.735 202.619 26.735 203.962 26.7325Z"
+ fill="black" />
+ <path id="Vector_2"
+ d="M193.252 103.752C193.374 103.782 193.497 103.813 193.621 103.844C195.463 104.32 197.123 104.981 198.784 105.903C199.033 106.036 199.033 106.036 199.286 106.172C202.241 107.809 204.734 110.395 206.466 113.278C206.528 113.381 206.591 113.482 206.654 113.588C209.333 118.102 210.209 123.686 208.924 128.796C208.898 128.902 208.872 129.008 208.845 129.118C207.927 132.724 206.217 135.747 203.7 138.476C203.594 138.593 203.49 138.71 203.381 138.83C200.228 142.147 195.264 144.573 190.682 144.805C190.165 144.814 189.649 144.819 189.133 144.816C188.816 144.814 188.501 144.816 188.185 144.817C182.69 144.824 177.669 142.563 173.777 138.727C171.598 136.511 169.956 133.905 168.976 130.947C168.943 130.851 168.91 130.754 168.876 130.654C168.149 128.509 167.848 126.545 167.862 124.273C167.86 124.072 167.859 123.869 167.859 123.661C167.86 122.374 167.966 121.149 168.207 119.885C168.24 119.714 168.24 119.714 168.274 119.541C169.361 114.252 172.717 109.547 177.205 106.585C181.919 103.587 187.781 102.375 193.252 103.752ZM173.72 111.165C170.362 115.086 168.702 120.121 168.976 125.262C169.475 130.931 171.938 135.797 176.314 139.472C178.542 141.251 181.2 142.56 183.975 143.192C184.112 143.224 184.248 143.256 184.39 143.29C189.37 144.45 194.627 143.482 198.982 140.844C203.498 137.977 206.618 133.509 207.875 128.325C208.159 127.037 208.185 125.782 208.185 124.465C208.185 124.152 208.188 123.838 208.19 123.523C208.21 118.998 206.508 114.687 203.547 111.28C203.433 111.145 203.321 111.01 203.204 110.87C200.801 108.091 197.574 106.227 194.079 105.173C193.927 105.127 193.927 105.127 193.773 105.081C192.071 104.594 190.408 104.471 188.643 104.481C188.446 104.48 188.251 104.478 188.048 104.478C182.443 104.489 177.497 107.13 173.72 111.165Z"
+ fill="white" />
+ <path id="Vector_3"
+ d="M87.388 63.9566C87.5093 64.0437 87.6307 64.1309 87.756 64.2206C89.892 65.8359 91.6958 67.8111 93.073 70.1026C93.1349 70.2048 93.1968 70.3071 93.2606 70.4125C96.0674 75.1412 96.7624 80.8502 95.4312 86.1757C94.6231 89.1273 93.2349 91.9083 91.2292 94.2254C91.1636 94.3022 91.0978 94.3805 91.0302 94.4589C88.5348 97.3798 85.338 99.4848 81.7029 100.726C81.6012 100.762 81.4995 100.797 81.3946 100.834C79.4707 101.456 77.5489 101.676 75.5371 101.653C75.1991 101.648 74.8612 101.65 74.5231 101.65C73.3031 101.648 72.1406 101.567 70.9475 101.293C70.8418 101.272 70.7361 101.25 70.6271 101.227C67.5068 100.583 64.4263 99.1053 62.0358 96.991C61.9049 96.8773 61.774 96.7621 61.6391 96.6453C61.2545 96.3042 60.8758 95.9585 60.4994 95.6082C60.4064 95.5237 60.3136 95.4392 60.2179 95.3516C57.7725 93.033 56.3175 90.0062 55.2753 86.8502C55.1974 86.6228 55.1974 86.6228 55.1181 86.3893C54.5559 84.6499 54.458 82.9152 54.4686 81.0976C54.4674 80.8963 54.4663 80.6935 54.4651 80.4861C54.4746 75.6705 56.1688 71.1572 59.2702 67.4906C59.3706 67.3716 59.3706 67.3716 59.473 67.2506C62.7912 63.3781 67.735 60.572 72.8712 60.1526C78.0857 59.8299 83.1133 60.8114 87.388 63.9566ZM69.872 61.9592C69.7719 61.9855 69.6719 62.0117 69.5688 62.0389C67.0947 62.6999 64.7587 64.0058 62.8041 65.6468C62.6724 65.7571 62.5407 65.8674 62.4049 65.981C58.5531 69.3328 56.0174 74.0514 55.5826 79.1679C55.275 84.507 56.782 89.7081 60.3457 93.7644C63.8308 97.6594 68.5185 100.181 73.7733 100.551C79.1341 100.809 84.2449 99.1544 88.2768 95.5913C90.5666 93.5094 92.1744 91.1954 93.4067 88.3713C93.5272 88.0948 93.6525 87.8213 93.7782 87.5478C94.0238 86.9316 94.1786 86.3247 94.3214 85.6794C94.3473 85.5657 94.3733 85.452 94.4 85.3352C94.4715 85.0218 94.5419 84.7068 94.6095 84.3918C94.637 84.2766 94.6643 84.1613 94.6927 84.043C94.7819 83.5129 94.7911 82.989 94.7943 82.4528C94.7952 82.3406 94.7961 82.2284 94.7969 82.1117C94.7985 81.872 94.7994 81.6338 94.8 81.3941C94.8015 81.0377 94.8063 80.6797 94.8111 80.3232C94.8253 78.3342 94.5416 76.4692 93.8988 74.5776C93.8601 74.4633 93.8212 74.3488 93.7813 74.2311C92.02 69.2655 88.302 65.4367 83.6512 63.0839C79.3775 61.1339 74.4058 60.6794 69.872 61.9592Z"
+ fill="white" />
+ <path id="xbox-L2"
+ d="M93.7852 4.24223C94.015 4.23537 94.2446 4.22691 94.4742 4.21713C96.8321 4.11766 96.8321 4.11766 97.6345 4.65934C98.0882 5.05912 98.4654 5.48877 98.8322 5.95372C98.9592 6.10936 98.9592 6.10936 99.0886 6.26814C99.3452 6.58402 99.5987 6.90181 99.8517 7.22002C99.9968 7.4004 100.142 7.58091 100.288 7.76115C100.562 8.10165 100.834 8.44283 101.106 8.78443C101.709 9.53924 102.326 10.2849 102.941 11.031C103.01 11.1145 103.079 11.198 103.15 11.2841C103.291 11.453 103.433 11.6207 103.577 11.7871C104.112 12.408 104.112 12.408 104.182 12.8279C104.132 13.1113 104.132 13.1113 103.986 13.2471C103.539 13.2824 103.094 13.3096 102.646 13.3318C102.36 13.3472 102.074 13.3627 101.788 13.3783C101.637 13.3863 101.486 13.3943 101.33 13.4026C98.3434 13.563 95.3854 13.7899 92.4194 14.1498C92.1857 14.1774 92.1857 14.1774 91.9473 14.2057C88.3624 14.6343 84.8072 15.2573 81.2922 16.024C80.8738 16.1153 80.4547 16.2046 80.0356 16.2937C78.4657 16.6326 76.9312 17.028 75.4 17.4881C74.9208 17.6318 74.4403 17.7677 73.9556 17.8958C66.8267 19.7824 59.7503 22.6486 53.5129 26.2683C52.3207 26.9583 52.3207 26.9583 51.8394 27.0777C51.6906 26.9931 51.5418 26.9085 51.3885 26.8213C51.4432 25.9727 51.7599 25.3052 52.1584 24.5381C52.2228 24.4132 52.2871 24.2882 52.3535 24.1595C52.9027 23.1131 53.513 22.1364 54.2429 21.1816C54.3418 21.0514 54.3418 21.0514 54.4429 20.9187C55.4022 19.6681 56.4237 18.5023 57.5811 17.3923C57.673 17.3031 57.7647 17.2141 57.8594 17.1222C59.1913 15.8335 60.5477 14.6439 62.107 13.5785C62.2756 13.4609 62.4441 13.3434 62.6126 13.226C71.3479 7.20208 82.9325 4.54251 93.7852 4.24223Z"
+ fill="black" />
+ <path id="xbox-L2-Path"
+ d="M94.2361 3.67204C94.474 3.66959 94.7117 3.66528 94.9494 3.65944C97.3907 3.6006 97.3907 3.6006 98.2092 4.24608C98.67 4.71917 99.051 5.22498 99.4206 5.77136C99.5485 5.95435 99.5485 5.95435 99.679 6.14104C99.9377 6.51241 100.193 6.88593 100.448 7.25991C100.594 7.47194 100.741 7.68414 100.887 7.89602C101.164 8.29627 101.439 8.6973 101.713 9.09878C102.32 9.98595 102.942 10.8628 103.563 11.7403C103.633 11.8385 103.702 11.9367 103.773 12.0379C103.915 12.2366 104.059 12.4339 104.205 12.6298C104.744 13.3604 104.744 13.3604 104.808 13.8476C104.75 14.1741 104.75 14.1741 104.597 14.3278C104.133 14.3579 103.672 14.3788 103.208 14.3937C102.912 14.4047 102.616 14.4158 102.32 14.427C102.163 14.4327 102.007 14.4384 101.845 14.4442C98.7526 14.5585 95.688 14.7505 92.6121 15.096C92.3697 15.1223 92.3698 15.1223 92.1225 15.1493C88.405 15.5596 84.714 16.1952 81.0616 16.998C80.6268 17.0936 80.1914 17.1869 79.7559 17.28C78.1248 17.6345 76.529 18.0551 74.9352 18.5507C74.4364 18.7054 73.9365 18.851 73.4323 18.9876C66.0177 20.9994 58.6364 24.145 52.1069 28.182C50.859 28.9515 50.859 28.9515 50.3585 29.0781C50.2064 28.9767 50.0543 28.8753 49.8976 28.7708C49.9723 27.7908 50.3141 27.0266 50.7427 26.1491C50.8119 26.0062 50.8811 25.8631 50.9525 25.7159C51.543 24.519 52.1951 23.4041 52.9706 22.3175C53.0757 22.1693 53.0757 22.1693 53.1831 22.0182C54.2021 20.595 55.2836 19.2713 56.5045 18.0153C56.6014 17.9144 56.6983 17.8136 56.7981 17.7096C58.2034 16.2512 59.6319 14.9079 61.2676 13.7132C61.4445 13.5812 61.6213 13.4494 61.7982 13.3175C70.9627 6.56003 83.0031 3.7607 94.2361 3.67204ZM80.6769 6.41084C80.3083 6.49427 79.9389 6.57341 79.5692 6.65238C74.9699 7.66186 70.4213 9.36167 66.338 11.7157C66.0853 11.8612 66.0853 11.8612 65.8273 12.0098C63.0563 13.6662 60.5369 15.6452 58.1946 17.8617C57.9805 18.0633 57.9805 18.0633 57.762 18.2692C55.6991 20.2674 54.0498 22.6305 52.5864 25.0927C52.5198 25.2044 52.4531 25.3161 52.3844 25.4311C52.2919 25.5895 52.2919 25.5895 52.1976 25.7511C52.1154 25.8914 52.1154 25.8914 52.0316 26.0344C51.887 26.3287 51.8094 26.6071 51.7414 26.927C52.427 26.6786 53.0412 26.3276 53.6715 25.9667C56.4487 24.4081 59.2966 23.0205 62.2279 21.7798C62.3313 21.7358 62.4347 21.692 62.5412 21.6468C70.7539 18.1781 79.4844 15.7553 88.3099 14.4814C88.486 14.4559 88.6619 14.4304 88.8433 14.4041C93.5518 13.7375 98.3083 13.402 103.06 13.2522C102.856 12.8252 102.629 12.4368 102.362 12.047C102.283 11.933 102.205 11.819 102.125 11.7014C101.998 11.5183 101.998 11.5183 101.869 11.3316C101.782 11.2041 101.694 11.0767 101.604 10.9453C100.859 9.86288 100.106 8.7858 99.3491 7.71149C99.2651 7.5921 99.1812 7.47287 99.0947 7.3498C98.972 7.17602 98.972 7.17602 98.847 6.99855C98.681 6.75702 98.5202 6.51195 98.3636 6.26426C97.8089 5.33868 97.8089 5.33868 96.9142 4.80152C96.3207 4.7353 95.7344 4.73637 95.1377 4.7439C94.9577 4.74513 94.7776 4.74651 94.5921 4.7479C89.9192 4.82196 85.2324 5.37064 80.6769 6.41084Z"
+ fill="white" />
+ <path id="xbox-L1"
+ d="M91.6941 26.7589C92.3712 26.7287 93.0481 26.707 93.7258 26.6942C93.9465 26.6895 94.1671 26.683 94.3876 26.6746C95.957 26.6182 96.9203 26.8553 98.1434 27.8491C98.2367 27.9214 98.3299 27.994 98.4261 28.0686C98.661 28.2573 98.8874 28.4563 99.1132 28.6557C99.925 29.3633 100.759 30.0335 101.615 30.6871C102.276 31.1971 102.276 31.1971 102.446 31.5366C102.336 31.5409 102.226 31.5454 102.114 31.55C94.2725 31.8512 94.2725 31.8512 86.466 32.6122C86.3404 32.6283 86.2147 32.6446 86.0852 32.6613C82.4824 33.1315 78.9357 33.759 75.4033 34.6096C75.2463 34.6468 75.0892 34.6838 74.9273 34.7223C65.6868 36.9282 56.9444 40.7917 49.7439 47.0552C49.7439 44.8689 53.4934 41.6274 54.968 40.141C55.3638 39.763 55.774 39.4121 56.1972 39.0654C56.3267 38.9531 56.4562 38.8408 56.5897 38.7251C66.2026 30.4798 79.3077 27.3356 91.6941 26.7589Z"
+ fill="black" />
+ <path id="xbox-R2"
+ d="M205.66 4.24336C205.431 4.23642 205.201 4.22781 204.972 4.21783C202.616 4.11627 202.616 4.11628 201.813 4.68116C201.36 5.09793 200.982 5.54577 200.615 6.03035C200.488 6.19256 200.488 6.19256 200.359 6.35805C200.102 6.68727 199.849 7.01848 199.596 7.35013C199.45 7.53813 199.305 7.72626 199.16 7.91412C198.885 8.26899 198.613 8.62459 198.34 8.98062C197.738 9.7673 197.121 10.5444 196.505 11.3221C196.436 11.4091 196.367 11.4962 196.296 11.5859C196.156 11.762 196.013 11.9367 195.869 12.1102C195.334 12.7573 195.334 12.7573 195.264 13.1947C195.313 13.4898 195.313 13.4898 195.459 13.6312C195.906 13.6675 196.35 13.6955 196.798 13.7182C197.084 13.734 197.37 13.7499 197.656 13.7659C197.807 13.7741 197.958 13.7823 198.113 13.7908C201.097 13.9552 204.053 14.189 207.016 14.5613C207.25 14.5898 207.25 14.5898 207.488 14.6191C211.07 15.0624 214.622 15.7081 218.134 16.5036C218.552 16.5983 218.97 16.6909 219.389 16.7834C220.957 17.135 222.491 17.5456 224.02 18.0234C224.499 18.1726 224.979 18.3137 225.463 18.4468C232.585 20.4055 239.654 23.3846 245.883 27.1492C247.074 27.8669 247.074 27.8669 247.555 27.9908C247.704 27.9025 247.852 27.8143 248.006 27.7233C247.952 26.8395 247.636 26.1446 247.238 25.346C247.174 25.216 247.11 25.0858 247.044 24.9519C246.496 23.8624 245.887 22.8457 245.158 21.8519C245.06 21.7163 245.06 21.7163 244.959 21.5782C244.001 20.2765 242.981 19.0632 241.826 17.9081C241.734 17.8153 241.643 17.7226 241.548 17.627C240.218 16.2859 238.864 15.0481 237.307 13.9399C237.138 13.8175 236.97 13.6953 236.802 13.5731C228.078 7.30661 216.505 4.54666 205.66 4.24336Z"
+ fill="black" />
+ <path id="xbox-R2-Path"
+ d="M203.748 3.66837C203.957 3.67206 204.164 3.67559 204.373 3.67867C204.968 3.68911 205.564 3.70709 206.159 3.72599C206.303 3.72968 206.448 3.73337 206.597 3.73705C217.627 4.0276 229.364 7.28819 238.118 14.1741C238.253 14.2789 238.387 14.3837 238.525 14.4917C242.91 17.9873 246.954 22.6482 248.873 28.0026C248.902 28.4251 248.902 28.4251 248.873 28.7708C248.823 28.8215 248.772 28.8722 248.72 28.9245C247.888 28.8721 247.32 28.6324 246.636 28.1851C246.432 28.0579 246.227 27.9313 246.023 27.8051C245.912 27.7374 245.803 27.6696 245.69 27.5999C240.598 24.5249 235.062 22.2644 229.46 20.3097C229.089 20.1795 228.722 20.0457 228.353 19.9096C226.751 19.3198 225.122 18.8634 223.47 18.4307C223.092 18.3311 222.714 18.2292 222.337 18.1265C221.607 17.9287 220.874 17.7399 220.141 17.5544C220.004 17.5197 219.867 17.4848 219.728 17.449C211.75 15.4417 203.547 14.6165 195.343 14.3803C195.19 14.3754 195.038 14.3706 194.879 14.3656C194.68 14.36 194.68 14.3601 194.475 14.3545C194.174 14.3278 194.174 14.3278 194.02 14.1741C193.934 13.6338 194.011 13.4209 194.303 12.9509C194.438 12.7749 194.575 12.6002 194.712 12.4264C194.869 12.2213 195.024 12.0158 195.179 11.8099C195.265 11.6975 195.35 11.5848 195.437 11.4688C195.946 10.7849 196.427 10.0826 196.911 9.38228C197.015 9.23278 197.12 9.08328 197.227 8.92917C197.745 8.18489 198.257 7.43785 198.762 6.68436C198.856 6.54515 198.951 6.40579 199.048 6.26228C199.225 6.00108 199.4 5.7388 199.572 5.47483C200.715 3.79806 201.761 3.60953 203.748 3.66837ZM201.111 5.38863C200.354 6.37214 199.647 7.38391 198.95 8.41044C198.608 8.91288 198.261 9.41101 197.911 9.90745C197.816 10.0434 197.72 10.1796 197.621 10.3198C197.433 10.5849 197.246 10.8498 197.058 11.1144C196.972 11.237 196.886 11.3596 196.797 11.4859C196.72 11.5934 196.645 11.7008 196.566 11.8116C196.258 12.28 195.986 12.7633 195.711 13.2522C195.8 13.257 195.887 13.2618 195.978 13.2667C204.396 13.7216 204.396 13.7216 208.003 14.1741C208.179 14.1956 208.357 14.2173 208.54 14.2394C212.587 14.7371 216.584 15.4943 220.537 16.4988C220.911 16.5938 221.284 16.6875 221.657 16.7806C224.801 17.5643 227.866 18.4894 230.91 19.5987C231.199 19.7041 231.489 19.8086 231.78 19.9132C234.452 20.882 237.048 21.9754 239.627 23.1675C240.057 23.3662 240.489 23.5619 240.919 23.7568C242.753 24.5946 244.497 25.5792 246.238 26.5945C246.581 26.7921 246.581 26.7921 247.029 26.927C246.12 23.8946 243.775 21.1054 241.59 18.8807C241.323 18.6075 241.057 18.3313 240.793 18.055C239.657 16.882 238.485 15.8097 237.17 14.8417C236.979 14.7021 236.79 14.561 236.603 14.4189C233.536 12.1056 230.134 10.4105 226.594 8.95006C226.408 8.87186 226.221 8.79364 226.029 8.71298C225.554 8.52276 225.079 8.34883 224.597 8.18182C224.483 8.14233 224.369 8.10284 224.251 8.06213C217.785 5.84681 210.787 4.79908 203.96 4.76312C203.791 4.76174 203.622 4.76036 203.448 4.75882C203.292 4.75943 203.135 4.76005 202.972 4.76082C202.766 4.76128 202.766 4.76128 202.554 4.76175C201.967 4.82167 201.534 4.97255 201.111 5.38863Z"
+ fill="white" />
+ <path id="xbox-b"
+ d="M254 81C254 86.5228 249.523 91 244 91C238.477 91 234 86.5228 234 81C234 75.4772 238.477 71 244 71C249.523 71 254 75.4772 254 81Z"
+ fill="black" />
+ <path id="B"
+ d="M249.532 72.1088C252.015 73.8887 253.656 76.2736 254.203 79.2936C254.432 80.9117 254.371 82.5496 253.79 84.0845C253.736 84.2351 253.683 84.3872 253.626 84.5424C252.705 86.9409 251.008 88.8953 248.72 90.0769C248.618 90.1352 248.515 90.1921 248.411 90.252C246.197 91.4582 243.605 91.5319 241.191 90.9988C238.582 90.2167 236.345 88.5834 234.891 86.2648C233.585 83.8279 233.011 80.7796 233.816 78.0922C234.652 75.3602 236.349 73.2116 238.811 71.7608C242.239 70.0009 246.247 70.0279 249.532 72.1088ZM236.581 75.1729C234.902 77.3178 234.51 79.5949 234.738 82.2408C235.023 84.5025 236.185 86.4876 237.914 87.9703C240.118 89.6297 242.437 90.3504 245.186 90.0769C247.739 89.6297 249.935 88.3176 251.447 86.2157C252.905 84.0938 253.411 81.3696 252.963 78.8345C252.358 76.3299 250.808 74.3579 248.672 72.9642C244.523 70.5922 239.673 71.5846 236.581 75.1729Z"
+ fill="white" />
+ <path id="xbox-a"
+ d="M234 101C234 106.523 229.523 111 224 111C218.477 111 214 106.523 214 101C214 95.4772 218.477 91 224 91C229.523 91 234 95.4772 234 101Z"
+ fill="black" />
+
+ <path id="A"
+ d="M230.256 92.2156C232.385 93.852 233.895 96.0615 234.367 98.7334C234.699 101.697 234.195 104.512 232.433 106.978C230.687 109.111 228.3 110.661 225.519 110.973C222.338 111.17 219.591 110.54 217.128 108.398C215.192 106.585 213.897 104.223 213.804 101.542C213.744 98.2371 213.744 98.2371 214.456 96.6838C214.565 96.4379 214.565 96.4379 214.677 96.1859C215.962 93.5601 218.188 91.7224 220.909 90.6914C224.063 89.705 227.562 90.3888 230.256 92.2156ZM222.757 91.4873C220.663 91.7163 218.806 92.8825 217.375 94.379C217.249 94.4973 217.249 94.4973 217.12 94.6187C215.892 95.8725 215.03 97.8699 214.917 99.6031C214.903 99.7767 214.889 99.9488 214.874 100.127C214.765 102.67 215.607 104.892 217.231 106.834C219.059 108.794 221.444 109.864 224.126 109.965C226.571 109.89 228.996 108.833 230.743 107.132C232.453 105.202 233.468 102.785 233.388 100.185C233.339 99.5539 233.23 98.9808 233.047 98.3739C233 98.2095 232.954 98.0451 232.904 97.8745C232.158 95.5237 230.583 93.6584 228.435 92.4415C226.556 91.5672 224.816 91.3614 222.757 91.4873Z"
+ fill="white" />
+ <path id="xbox-y"
+ d="M234 61C234 66.5228 229.523 71 224 71C218.477 71 214 66.5228 214 61C214 55.4772 218.477 51 224 51C229.523 51 234 55.4772 234 61Z"
+ fill="black" />
+
+ <path id="Y"
+ d="M229.245 52.0181C229.951 52.4554 230.583 52.9575 231.204 53.5083C231.348 53.6307 231.348 53.6307 231.494 53.7556C233.198 55.3085 234.369 57.8117 234.487 60.1146C234.559 63.3344 233.839 65.9721 231.569 68.3642C229.36 70.5145 226.696 71.5973 223.621 71.5575C220.926 71.4486 218.644 70.3146 216.761 68.4123C216.641 68.2972 216.521 68.1821 216.396 68.0635C214.619 66.2566 213.732 63.6687 213.658 61.1619C213.72 57.9073 215.055 55.3779 217.366 53.1368C218.554 52.088 219.992 51.4173 221.524 51.05C221.69 50.9968 221.854 50.9438 222.025 50.8891C224.422 50.2785 227.106 50.8656 229.245 52.0181ZM217.375 54.7375C215.528 56.8897 214.706 59.2816 214.885 62.1003C215.101 64.2775 216.212 66.4877 217.836 67.9514C220.222 69.8173 222.498 70.5087 225.519 70.2561C227.674 69.9368 229.381 68.8493 230.896 67.3368C230.985 67.25 231.073 67.1633 231.165 67.0739C232.665 65.4756 233.292 63.2849 233.269 61.1427C233.267 60.9874 233.266 60.832 233.264 60.6719C233.207 58.2378 232.29 56.2833 230.607 54.5166C228.834 52.8434 226.534 51.9064 224.097 51.9238C223.97 51.9247 223.841 51.9256 223.709 51.9264C221.189 51.9757 219.182 52.9942 217.375 54.7375Z"
+ fill="white" />
+ <path id="xbox-x"
+ d="M214 81C214 86.5228 209.747 91 204.5 91C199.253 91 195 86.5228 195 81C195 75.4772 199.253 71 204.5 71C209.747 71 214 75.4772 214 81Z"
+ fill="black" />
+
+ <path id="X"
+ d="M210.615 72.561C212.658 74.1314 214.07 76.322 214.609 78.8606C214.837 82.0993 214.519 85.0264 212.326 87.5831C210.602 89.4945 208.339 90.9711 205.725 91.1892C202.431 91.3383 199.831 90.7882 197.276 88.5695C195.244 86.6305 194.042 84.0369 193.976 81.2251C193.951 78.3883 194.733 75.9185 196.739 73.8321C196.857 73.7169 196.974 73.6015 197.093 73.4829C197.201 73.3739 197.309 73.265 197.419 73.1527C201.05 69.6813 206.641 69.749 210.615 72.561ZM197.332 74.8337C195.764 76.8356 194.821 79.2041 195.096 81.7798C195.552 84.4579 196.734 86.7334 198.907 88.4113C199.785 88.9967 200.7 89.4407 201.703 89.7695C201.806 89.8049 201.909 89.8387 202.015 89.874C204.427 90.547 206.867 90.0061 209.021 88.8507C209.806 88.3805 210.439 87.812 211.076 87.1575C211.16 87.0776 211.245 86.9992 211.331 86.9163C212.81 85.4028 213.525 83.1964 213.582 81.136C213.535 78.4202 212.629 76.2195 210.781 74.2433C209.014 72.5362 206.773 71.6804 204.333 71.5718C201.649 71.6543 199.108 72.8088 197.332 74.8337Z"
+ fill="white" />
+ <path id="Vector_4"
+ d="M128.469 73.4154C128.612 73.4167 128.753 73.4177 128.901 73.419C129.964 73.4446 130.846 73.5884 131.793 74.0973C131.926 74.166 132.058 74.2347 132.197 74.3055C133.666 75.1226 134.546 76.1545 135.327 77.6313C135.391 77.7408 135.454 77.8504 135.52 77.9631C136.284 79.4827 136.184 81.663 135.691 83.2579C134.78 85.5165 133.424 86.9685 131.178 87.9257C131.052 87.9811 130.926 88.0364 130.797 88.0948C129.068 88.714 127.14 88.5127 125.493 87.7721C124.955 87.4971 124.453 87.1944 123.956 86.8502C123.858 86.7826 123.761 86.715 123.66 86.6459C122.249 85.558 121.315 83.6743 121.037 81.9334C120.883 79.727 121.324 77.7087 122.767 75.9874C124.373 74.3015 126.134 73.3887 128.469 73.4154ZM123.628 76.8095C122.392 78.3691 122.047 80.1434 122.266 82.0871C122.677 83.7603 123.559 85.2015 124.991 86.1818C126.691 87.1944 128.303 87.4464 130.222 87.0315C131.826 86.5322 132.959 85.5857 133.944 84.2382C134.173 83.788 134.173 83.788 134.357 83.3163C134.42 83.1611 134.484 83.0059 134.551 82.8461C135.078 81.3741 135.007 79.8361 134.405 78.3995C133.407 76.3873 132.089 75.4543 130.016 74.6543C127.498 74.1966 125.378 74.9926 123.628 76.8095Z"
+ fill="white" />
+ <path id="Vector_5"
+ d="M175.146 75.1051C176.431 76.1372 177.406 77.7024 177.734 79.3214C177.943 81.6369 177.599 83.6635 176.196 85.5826C174.747 87.2896 172.964 88.2069 170.735 88.4451C168.569 88.5188 166.648 87.8151 165.056 86.3401C164.273 85.515 163.715 84.6776 163.291 83.6236C163.242 83.5099 163.192 83.3946 163.142 83.2779C162.561 81.6937 162.579 79.7101 163.252 78.1655C163.315 78.04 163.378 77.9143 163.444 77.7849C163.507 77.6561 163.57 77.5275 163.636 77.3948C164.651 75.5333 166.119 74.4091 168.054 73.6364C170.581 72.9162 173.086 73.6184 175.146 75.1051ZM165.46 76.7118C164.134 78.4027 163.845 80.1311 164.059 82.2407C164.469 83.8556 165.453 85.2861 166.825 86.2356C168.473 87.1775 170.093 87.4248 171.963 87.053C173.644 86.5352 175.073 85.4274 175.939 83.874C176.091 83.5391 176.225 83.2026 176.351 82.8553C176.414 82.7124 176.477 82.5695 176.543 82.4236C176.935 80.7549 176.611 79.0886 175.793 77.6025C174.847 76.1366 173.372 75.0584 171.672 74.6136C169.232 74.2703 167.164 74.8869 165.46 76.7118Z"
+ fill="white" />
+ <path id="xbox-RAnalog"
+ d="M198.56 111.153C201.921 113.943 204.451 117.513 204.916 121.948C205.058 124.11 205.091 126.304 204.433 128.387C204.377 128.573 204.32 128.758 204.261 128.95C203.619 130.89 202.705 132.628 201.375 134.182C201.271 134.309 201.168 134.436 201.061 134.567C198.675 137.376 195.077 139.473 191.392 139.931C186.159 140.311 182.017 139.167 178.003 135.752C175.026 132.959 173.17 128.969 173.007 124.894C172.963 123.158 173.118 121.543 173.525 119.856C173.557 119.715 173.588 119.574 173.62 119.429C174.603 115.586 177.519 112.165 180.872 110.161C186.342 107.038 193.521 107.244 198.56 111.153Z"
+ fill="black" />
+ <path id="xbox-RAnalog-Path"
+ d="M188.068 107.445C188.385 107.445 188.701 107.442 189.018 107.439C190.795 107.432 192.427 107.619 194.093 108.252C194.217 108.298 194.342 108.346 194.469 108.393C196.606 109.229 198.366 110.378 200.047 111.93C200.15 112.019 200.251 112.109 200.355 112.201C203.256 114.879 204.997 119.164 205.162 123.045C205.28 127.89 203.588 132.115 200.285 135.669C197.043 138.85 192.701 140.54 188.173 140.521C184.319 140.403 180.441 139.025 177.614 136.361C177.535 136.288 177.457 136.216 177.376 136.142C174.396 133.412 172.253 129.555 172.061 125.456C171.904 120.229 173.164 116.033 176.764 112.173C179.734 109.111 183.835 107.445 188.068 107.445ZM177.181 113.617C174.211 117.056 173.078 120.98 173.312 125.451C173.594 128.564 174.974 131.551 176.999 133.902C177.081 134.005 177.162 134.108 177.247 134.216C178.825 136.169 181.378 137.757 183.76 138.512C184.027 138.596 184.027 138.596 184.301 138.684C188.317 139.848 192.635 139.132 196.264 137.167C199.894 134.97 202.333 131.568 203.464 127.493C204.419 123.365 203.642 119.135 201.423 115.573C201.133 115.162 200.832 114.773 200.508 114.389C200.342 114.191 200.342 114.191 200.173 113.988C197.63 111.071 194.096 108.982 190.185 108.664C185.153 108.429 180.656 109.855 177.181 113.617Z"
+ fill="white" />
+ <path id="xbox-LAnalog"
+ d="M84.56 68.1529C87.9208 70.9429 90.451 74.5133 90.9162 78.9483C91.0577 81.11 91.0905 83.3041 90.4333 85.3872C90.3766 85.5726 90.32 85.7579 90.2615 85.9496C89.6188 87.8902 88.7048 89.628 87.3746 91.1821C87.2711 91.3088 87.1675 91.4355 87.0609 91.567C84.6747 94.3757 81.0769 96.4732 77.3915 96.931C72.1586 97.3112 68.0169 96.1674 64.0027 92.752C61.0264 89.9591 59.1702 85.9686 59.0072 81.8942C58.9633 80.1579 59.1177 78.5434 59.5253 76.8556C59.5566 76.7149 59.5876 76.5743 59.6198 76.4293C60.6028 72.586 63.5194 69.1648 66.8718 67.1606C72.3421 64.0384 79.5206 64.2435 84.56 68.1529Z"
+ fill="black" />
+ <path id="xbox-LAnalog-Path"
+ d="M74.6752 64.2701C74.9917 64.2698 75.3082 64.267 75.6249 64.2641C77.402 64.2561 79.0344 64.4431 80.7001 65.0764C80.8239 65.1231 80.9479 65.17 81.0756 65.2183C83.2128 66.0536 84.9721 67.2036 86.654 68.7543C86.7557 68.8438 86.8576 68.933 86.9625 69.0251C89.8628 71.7029 91.6033 75.9892 91.7682 79.8699C91.8869 84.7145 90.1945 88.9398 86.891 92.4937C83.6501 95.6743 79.3069 97.3644 74.7794 97.346C70.9261 97.2277 67.0474 95.8494 64.2212 93.1852C64.1425 93.113 64.0637 93.0408 63.9827 92.967C61.003 90.2367 58.8602 86.3801 58.6685 82.2807C58.5111 77.0539 59.7712 72.8575 63.3707 68.9976C66.3406 65.936 70.442 64.2696 74.6752 64.2701ZM63.7879 70.4416C60.8173 73.8799 59.6853 77.8055 59.919 82.2761C60.202 85.389 61.5807 88.3759 63.6066 90.7268C63.688 90.8297 63.7695 90.9327 63.8532 91.0402C65.4318 92.9931 67.9858 94.5818 70.3672 95.3363C70.6345 95.4208 70.6345 95.4208 70.9074 95.5083C74.9233 96.673 79.2409 95.957 82.8704 93.9918C86.5006 91.7946 88.9398 88.3929 90.0708 84.3181C91.027 80.1895 90.2487 75.9599 88.0296 72.3981C87.7401 71.9865 87.4385 71.5981 87.1149 71.2127C86.9488 71.0148 86.9488 71.0148 86.7793 70.8131C84.2371 67.8961 80.7033 65.8058 76.7922 65.4879C71.7603 65.2527 67.2634 66.6788 63.7879 70.4416Z"
+ fill="white" />
+ <path id="LEFT"
+ d="M98.8842 120.545C96.2558 118.517 91.8689 118.502 90.2005 121.065C89.9725 121.417 89.7604 121.775 89.5652 122.139C88.5076 124.108 87.9641 126.219 87.9641 128.351C87.9641 130.483 88.5076 132.594 89.5652 134.563C89.7604 134.927 89.9725 135.285 90.2005 135.636C91.8689 138.2 96.2558 138.185 98.8842 136.157L104.239 132.024C106.867 129.995 106.867 126.706 104.239 124.678L98.8842 120.545Z"
+ stroke="white" stroke-width="2" />
+ <path id="RIGHT"
+ d="M125.444 136.349C128.072 138.377 132.459 138.392 134.127 135.828C134.355 135.477 134.567 135.119 134.763 134.755C135.82 132.786 136.364 130.675 136.364 128.543C136.364 126.411 135.82 124.3 134.763 122.331C134.567 121.967 134.355 121.609 134.127 121.258C132.459 118.694 128.072 118.709 125.444 120.737L120.089 124.87C117.461 126.899 117.461 130.188 120.089 132.216L125.444 136.349Z"
+ stroke="white" stroke-width="2" />
+ <path id="DOWN"
+ d="M104.604 139.272C102.576 141.9 102.561 146.287 105.124 147.956C105.476 148.184 105.833 148.396 106.198 148.591C108.167 149.649 110.278 150.192 112.41 150.192C114.542 150.192 116.653 149.649 118.622 148.591C118.986 148.396 119.344 148.184 119.695 147.956C122.259 146.287 122.244 141.9 120.215 139.272L116.083 133.918C114.054 131.289 110.765 131.289 108.737 133.918L104.604 139.272Z"
+ stroke="white" stroke-width="2" />
+ <path id="UP"
+ d="M120.023 115.017C122.052 112.389 122.067 108.002 119.503 106.334C119.152 106.106 118.794 105.894 118.43 105.698C116.46 104.641 114.349 104.097 112.218 104.097C110.086 104.097 107.975 104.641 106.006 105.698C105.642 105.894 105.283 106.106 104.933 106.334C102.369 108.002 102.384 112.389 104.412 115.017L108.544 120.372C110.574 123 113.862 123 115.891 120.372L120.023 115.017Z"
+ stroke="white" stroke-width="2" />
+ </g>
+ </svg>
+ <p class="character-dialog">
+ Hello
+ </p>
+ <div class="Character" id="character-hitbox">
+ <img class="Character_spritesheet pixelart" src="../assets/images/female_aesprite.png" id="character" alt="Character" />
+ </div>
+
+
+ <!-- Footer -->
+ <div class="footer">
+ <label for="modal">(i)</label>
+ <a class="arrow" href="../"></a>
+ </div>
+</body>
+<script src="./script.js"></script>
+
+</html>
\ No newline at end of file
006.GamePad/script.js
@@ -0,0 +1,296 @@
+const tooltip = document.getElementById("tooltip");
+const hitbox = document.getElementById("character-hitbox");
+const character = document.getElementById("character");
+const dialog = document.querySelector(".character-dialog");
+
+const gamepads = {};
+const deadZone = 0.05;
+const controller = document.getElementById("controller");
+const backBtn = document.getElementById("BACK");
+const startBtn = document.getElementById("START");
+const leftBtn = document.getElementById("LEFT");
+const rightBtn = document.getElementById("RIGHT");
+const upBtn = document.getElementById("UP");
+const downBtn = document.getElementById("DOWN");
+
+const btnX = document.getElementById("xbox-x");
+const btnY = document.getElementById("xbox-y");
+const btnA = document.getElementById("xbox-a");
+const btnB = document.getElementById("xbox-b");
+
+const btnL1 = document.getElementById("xbox-L1");
+const btnR1 = document.getElementById("xbox-R1");
+
+const btnL2 = document.getElementById("xbox-L2");
+const btnR2 = document.getElementById("xbox-R2");
+const btnL2Path = document.getElementById("xbox-L2-Path");
+const btnR2Path = document.getElementById("xbox-R2-Path");
+
+const leftAnalog = document.getElementById("xbox-LAnalog");
+const rightAnalog = document.getElementById("xbox-RAnalog");
+const leftAnalogPath = document.getElementById("xbox-LAnalog-Path");
+const rightAnalogPath = document.getElementById("xbox-RAnalog-Path");
+
+const dialogs = [
+ "I'm not a photographer,<br/> but I can picture us together.",
+ "Do you have a name, or can I call you mine?",
+ "If you were a vegetable,<br/> you'd be a cute-cumber.",
+ "Do you have a map?<br/> I keep getting lost in your eyes.",
+ "Are you a magician?<br/> Whenever I look at you, everyone else disappears.",
+ "If you were a fruit,<br/> you'd be a fineapple.",
+ "Do you like Star Wars?<br/> Because Yoda one for me!",
+ "If you were a cat,<br/> you'd purr-fect.",
+ "Are you a bank loan?<br/> Because you have my interest.",
+ "Do you have a sunburn,<br/> or are you always this hot?",
+ "Do you like raisins?<br/> How do you feel about a date?",
+ "If you were a triangle,<br/> you'd be acute one.",
+ "Are you a campfire?<br/> Because you're hot and I want s'more.",
+ "Do you like science?<br/> Because I've got my ion you.",
+ "Are you a beaver?<br/> Because daaaaaam.",
+ "Are you a parking ticket?<br/> Because you've got FINE written all over you.",
+]
+
+function removeGamepad(gamepad) {
+ delete gamepads[gamepad.index];
+}
+
+function addGamepad(gamepad) {
+ gamepads[gamepad.index] = gamepad;
+ requestAnimationFrame(updateStatus);
+ if (Object.keys(gamepads).length > 1) {
+ tooltip.innerHTML = "Multiple gamepads connected! Please use only one.";
+ controller.style.opacity = 0.25;
+ return;
+ }
+ controller.style.opacity = 0.85;
+ tooltip.innerHTML = gamepad.id;
+ hitbox.style.visibility = "visible";
+ dialog.style.visibility = "visible";
+ dialog.innerHTML = "Hello Gorgeous! ";
+}
+
+function pressuredButton(btn, path, state) {
+ btn.style.opacity = state;
+ btn.style.transform = `translate(0,${state * 7}px)`
+ path.style.transform = `translate(0,${state * 7}px)`
+}
+
+function activateButton(btn, state) {
+ if (state) {
+ btn.style.fill = "var(--lightGold)";
+ } else {
+ btn.style.fill = "black";
+ }
+}
+function analogButton(btn, path, x, y,isAnalogLeftStick) {
+ if (Math.abs(x) < deadZone) x = 0;
+ if (Math.abs(y) < deadZone) y = 0;
+
+ btn.style.transform = `translate(${x * 10}px,${y * 10}px)`
+ path.style.transform = `translate(${x * 10}px,${y * 10}px)`
+
+ if(!isAnalogLeftStick){
+ return
+ }
+
+ // move the character around the screen and dont let it go out of screen
+ let characterX = hitbox.getBoundingClientRect().x;
+ let characterY = hitbox.getBoundingClientRect().y;
+ let characterWidth = hitbox.getBoundingClientRect().width;
+ let characterHeight = hitbox.getBoundingClientRect().height;
+ let windowWidth = window.innerWidth;
+ let windowHeight = window.innerHeight;
+ let characterNewX = characterX + x * 1.5;
+ let characterNewY = characterY + y * 1.5;
+
+
+ let characterDirection = "";
+ character.classList.toggle("face-up", false);
+ character.classList.toggle("face-down", false);
+ character.classList.toggle("face-left", false);
+ character.classList.toggle("face-right", false);
+
+ if(x === 0 && y === 0){
+ return;
+ }
+ if (x > 0) {
+ characterDirection = "right";
+ character.classList.toggle("face-right", true);
+ } else if (x < 0) {
+ character.classList.toggle("face-left", true);
+ characterDirection = "left";
+ } else if (y > 0) {
+ character.classList.toggle("face-down", true);
+ characterDirection = "down";
+ } else if (y < 0) {
+ character.classList.toggle("face-up", true);
+ characterDirection = "up";
+ }
+
+ // if (characterNewX < 0) {
+ // hitbox.style.left = 0;
+ // } else if (characterNewX + characterWidth > windowWidth) {
+ // hitbox.style.left = windowWidth - characterWidth + "px";
+ // } else {
+ // hitbox.style.left = characterNewX + "px";
+ // }
+
+ // if (characterNewY < 0) {
+ // hitbox.style.top = 0;
+ // }
+ // else if (characterNewY + characterHeight > windowHeight) {
+ // hitbox.style.top = windowHeight - characterHeight + "px";
+ // } else {
+ // hitbox.style.top = characterNewY + "px";
+ // }
+}
+
+function updateStatus() {
+ if (Object.keys(gamepads).length > 1) return;
+ let gamepad = navigator.getGamepads()[0];
+ if (gamepad) {
+ const {
+ buttons,
+ axes
+ } = gamepad;
+
+ const [
+ A_key,
+ B_key,
+ X_key,
+ Y_key,
+ L1_key,
+ R1_key,
+ L2_key,
+ R2_key,
+ bk_key,
+ strt_key,
+ LStick_key,
+ RStick_key,
+ dPad_up,
+ dPad_down,
+ dPad_left,
+ dPad_right
+ ] = buttons.map(button => button.value);
+
+ const [
+ leftAnalogX,
+ leftAnalogY,
+ rightAnalogX,
+ rightAnalogY
+ ] = axes;
+
+ activateButton(upBtn, dPad_up);
+ activateButton(downBtn, dPad_down);
+ activateButton(leftBtn, dPad_left);
+ activateButton(rightBtn, dPad_right);
+ activateButton(backBtn, bk_key);
+ activateButton(startBtn, strt_key);
+ activateButton(btnX, X_key);
+ activateButton(btnY, Y_key);
+ activateButton(btnA, A_key);
+ activateButton(btnB, B_key);
+ activateButton(btnL1, L1_key);
+ activateButton(btnR1, R1_key);
+ activateButton(btnL2, L2_key);
+ activateButton(btnR2, R2_key);
+ activateButton(leftAnalog, LStick_key);
+ activateButton(rightAnalog, RStick_key);
+
+ pressuredButton(btnL2, btnL2Path, L2_key);
+ pressuredButton(btnR2, btnR2Path, R2_key);
+
+ analogButton(leftAnalog, leftAnalogPath, leftAnalogX, leftAnalogY,true);
+ analogButton(rightAnalog, rightAnalogPath, rightAnalogX, rightAnalogY,false);
+ }
+ requestAnimationFrame(updateStatus);
+}
+
+window.addEventListener("gamepadconnected", (e) => addGamepad(e.gamepad));
+window.addEventListener("gamepaddisconnected", (e) => removeGamepad(e.gamepad));
+tooltip.innerHTML = "Connect a gamepad and press any button!";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// document.addEventListener("DOMContentLoaded", function () {
+// const character = document.getElementById("character");
+// const char = document.getElementById("char");
+
+// let posX = window.innerWidth / 2;
+// let posY = window.innerHeight / 2;
+// const speed = 2;
+// const keysPressed = {};
+
+// function moveCharacter() {
+// let moved = false;
+
+// if (keysPressed["w"]) {
+// posY -= speed;
+// moved = true;
+// char.classList.toggle("face-up", true);
+// } else {
+// char.classList.toggle("face-up", false);
+// }
+
+// if (keysPressed["a"]) {
+// posX -= speed;
+// moved = true;
+// char.classList.toggle("face-left", true);
+// } else {
+// char.classList.toggle("face-left", false);
+// }
+
+// if (keysPressed["s"]) {
+// posY += speed;
+// moved = true;
+// char.classList.toggle("face-down", true);
+// } else {
+// char.classList.toggle("face-down", false);
+// }
+
+// if (keysPressed["d"]) {
+// posX += speed;
+// moved = true;
+// char.classList.toggle("face-right", true);
+// } else {
+// char.classList.toggle("face-right", false);
+// }
+
+// // Keep the character within the window boundaries
+// posX = Math.max(0, Math.min(window.innerWidth - 50, posX));
+// posY = Math.max(0, Math.min(window.innerHeight - 50, posY));
+
+// if (moved) {
+// character.style.left = posX + "px";
+// character.style.top = posY + "px";
+// }
+// }
+
+// function gameLoop() {
+// moveCharacter();
+// requestAnimationFrame(gameLoop);
+// }
+
+// document.addEventListener("keydown", function (event) {
+// keysPressed[event.key.toLowerCase()] = true;
+// });
+
+// document.addEventListener("keyup", function (event) {
+// keysPressed[event.key.toLowerCase()] = false;
+// });
+
+// gameLoop();
+// });
006.GamePad/style.css
@@ -0,0 +1,64 @@
+#tooltip{
+ color: var(--gold);
+ margin-top: 25px;
+ margin-bottom: 50px;
+}
+
+:root {
+ --pixel-size: 1;
+ }
+
+ .Character {
+ width: calc(48px * var(--pixel-size));
+ height: calc(96px * var(--pixel-size));
+ overflow: hidden;
+ position:relative;
+ visibility: hidden;
+ display: flex;
+}
+
+.character-dialog{
+ font-size: 10px;
+ color: var(--gold);
+ text-shadow: 1px 1px 0px var(--black);
+ text-align: center;
+ width: 100%;
+ margin-bottom: 5px;
+ visibility: hidden;
+}
+
+ .Character_spritesheet {
+ animation: moveSpritesheet 1.2s steps(12) infinite;
+ width: calc(576px * var(--pixel-size));
+ position: absolute;
+ }
+
+ .pixelart {
+ image-rendering: pixelated;
+ }
+
+ .face-down {
+ top: calc(-96px * var(--pixel-size)) !important;
+ }
+
+ .face-left {
+ top: calc(-192px * var(--pixel-size));
+ }
+
+ .face-right {
+ top: calc(-288px * var(--pixel-size));
+ }
+
+ .face-up {
+ top: calc(-384px * var(--pixel-size)) !important;
+ }
+
+ @keyframes moveSpritesheet {
+ from {
+ transform: translate3d(0px,0,0)
+ }
+ to {
+ transform: translate3d(-100%,0,0)
+ }
+ }
+
\ No newline at end of file
assets/images/female_aesprite.png
Binary file
index.html
@@ -33,6 +33,7 @@
<a href="./003.3n+1/" class="opacity-75 hover:opacity-100 hover:text-yellow-400">003.3n+1</a>
<a href="./004.Maze-Runner/" class="opacity-75 hover:opacity-100 hover:text-yellow-400">004.Maze-Runner</a>
<a href="./005.MiniMax/" class="opacity-75 hover:opacity-100 hover:text-yellow-400">005.MiniMax</a>
+ <a href="./006.GamePad/" class="opacity-75 hover:opacity-100 hover:text-yellow-400">006.GamePad</a>
</div>
</body>