Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 7342d20677 | |||
| 7cf7ec32db | |||
| 06590feea1 | |||
| 34635f0e0b | |||
| a88644aca7 | |||
| 1b1d2b88ad | |||
| 197554ffa8 | |||
| 29de49443a |
@@ -22,7 +22,7 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>Dwinzo (beta)</title>
|
<title>Aalai (beta)</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -7,109 +7,14 @@ export function LogoIcon() {
|
|||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<circle cx="16" cy="16" r="12" fill="var(--icon-default-color)" />
|
<circle cx="16" cy="16" r="15" fill="#6F42C1" />
|
||||||
<circle
|
<path
|
||||||
cx="16.0522"
|
d="M22.3164 16.7728C22.3164 16.2014 22.7839 15.7383 23.3606 15.7383C23.9373 15.7383 24.4047 16.2014 24.4047 16.7728V22.4624C24.4047 23.0338 23.9373 23.4969 23.3606 23.4969C22.7839 23.4969 22.3164 23.0338 22.3164 22.4624V16.7728Z"
|
||||||
cy="16.054"
|
fill="white"
|
||||||
r="8.45217"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.313043"
|
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M14.9362 15.3506L14.9146 15.2009C18.5863 14.6717 20.6134 12.573 21.3145 11.6953L21.4328 11.7897C20.7203 12.6813 18.6614 14.8137 14.9362 15.3506Z"
|
d="M8.24851 23.5C8.72367 23.5 9.14736 23.2036 9.30636 22.76L9.92543 21.0326C11.1025 17.7484 15.791 17.7502 16.9656 21.0352L17.582 22.7594C17.7407 23.2033 18.1645 23.5 18.6398 23.5C19.4155 23.5 19.9573 22.739 19.697 22.015L15.305 9.80047C15.0246 9.0207 14.2794 8.5 13.4439 8.5C12.6084 8.5 11.8633 9.0207 11.5829 9.80047L7.19104 22.0146C6.93066 22.7388 7.4726 23.5 8.24851 23.5Z"
|
||||||
fill="var(--icon-default-color-active)"
|
fill="white"
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M14.9522 15.8332C15.2664 15.8332 15.5211 15.5785 15.5211 15.2643C15.5211 14.95 15.2664 14.6953 14.9522 14.6953C14.6379 14.6953 14.3832 14.95 14.3832 15.2643C14.3832 15.5785 14.6379 15.8332 14.9522 15.8332Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M21.3523 12.3332C21.6665 12.3332 21.9212 12.0785 21.9212 11.7643C21.9212 11.45 21.6665 11.1953 21.3523 11.1953C21.038 11.1953 20.7833 11.45 20.7833 11.7643C20.7833 12.0785 21.038 12.3332 21.3523 12.3332Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M12.7492 22.3039C12.0462 21.4187 10.9309 19.5722 11.358 17.1484L11.5069 17.1749C11.0901 19.5401 12.1804 21.3445 12.8674 22.2096L12.7492 22.3039Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M11.4319 17.759C11.7461 17.759 12.0008 17.5043 12.0008 17.1901C12.0008 16.8758 11.7461 16.6211 11.4319 16.6211C11.1176 16.6211 10.8629 16.8758 10.8629 17.1901C10.8629 17.5043 11.1176 17.759 11.4319 17.759Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M12.7907 22.802C13.1049 22.802 13.3597 22.5473 13.3597 22.233C13.3597 21.9188 13.1049 21.6641 12.7907 21.6641C12.4765 21.6641 12.2217 21.9188 12.2217 22.233C12.2217 22.5473 12.4765 22.802 12.7907 22.802Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M21.7637 17.7187L21.6123 17.7145C21.6652 15.823 20.9421 14.0126 19.576 12.617C18.1535 11.1635 16.168 10.3387 14.1231 10.3506L14.1221 10.1993C16.2045 10.1912 18.2332 11.0285 19.6841 12.5111C21.0791 13.9363 21.8175 15.7859 21.7637 17.7187Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M21.6779 18.259C21.9921 18.259 22.2469 18.0043 22.2469 17.6901C22.2469 17.3758 21.9921 17.1211 21.6779 17.1211C21.3637 17.1211 21.1089 17.3758 21.1089 17.6901C21.1089 18.0043 21.3637 18.259 21.6779 18.259Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M14.1504 10.8567C14.4646 10.8567 14.7194 10.602 14.7194 10.2877C14.7194 9.97349 14.4646 9.71875 14.1504 9.71875C13.8362 9.71875 13.5814 9.97349 13.5814 10.2877C13.5814 10.602 13.8362 10.8567 14.1504 10.8567Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M17.0921 21.9098C12.5278 21.6847 9.43341 18.6962 8.05921 15.9744C7.04899 13.9733 6.89101 12.0235 7.64701 10.8856C8.13487 10.1512 8.85147 9.76527 9.94784 9.84153L9.79132 9.99806C8.74942 9.92522 8.22889 10.2831 7.77291 10.9693C7.04697 12.062 7.20838 13.9536 8.19419 15.9062C9.54902 18.59 12.6001 21.5366 17.0995 21.7585L17.0921 21.9098Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M10.6783 22.9379C8.56905 22.5921 7.13331 20.8917 7.03163 18.8823C6.93397 16.9494 8.12376 14.6516 11.0021 13.875L11.0414 14.0211C8.24462 14.7757 7.08812 17.0023 7.18295 18.8747C7.24576 20.1169 7.88473 21.5215 9.42609 22.2311C9.79584 22.4013 9.79131 22.364 10.2087 22.5205L10.6783 22.9379Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M10.9948 14.5286C11.3091 14.5286 11.5638 14.2738 11.5638 13.9596C11.5638 13.6454 11.3091 13.3906 10.9948 13.3906C10.6806 13.3906 10.4259 13.6454 10.4259 13.9596C10.4259 14.2738 10.6806 14.5286 10.9948 14.5286Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M20.5275 25.0396C20.4619 25.0396 20.3955 25.0366 20.3281 25.0303C19.0498 24.9115 17.8919 23.7306 17.2303 21.8712L17.3729 21.8203C18.0141 23.6229 19.124 24.7664 20.3421 24.8796C20.9978 24.942 21.5783 24.6777 21.8595 24.1942C22.1507 23.6941 22.141 23.2311 21.703 22.6036L21.8595 22.4471C22.3326 23.125 22.3121 23.7169 21.9903 24.2703C21.7082 24.7549 21.159 25.0396 20.5275 25.0396Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M17.0674 22.3957C17.3817 22.3957 17.6364 22.141 17.6364 21.8268C17.6364 21.5125 17.3817 21.2578 17.0674 21.2578C16.7532 21.2578 16.4985 21.5125 16.4985 21.8268C16.4985 22.141 16.7532 22.3957 17.0674 22.3957Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M18.6394 9.77763L18.4955 9.73042C18.8393 8.68792 19.4466 8.01625 20.1621 7.88813C20.6025 7.80864 21.0355 7.95895 21.2909 8.27915C21.5433 8.59551 21.7114 8.89502 21.5304 9.32094L21.3739 9.16442C21.5325 8.79116 21.3894 8.64514 21.1729 8.37357C20.9522 8.09696 20.5751 7.96803 20.1889 8.03723C19.5297 8.15506 18.9652 8.7896 18.6394 9.77763Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M18.5795 10.2981C18.8937 10.2981 19.1484 10.0434 19.1484 9.72912C19.1484 9.41489 18.8937 9.16016 18.5795 9.16016C18.2652 9.16016 18.0105 9.41489 18.0105 9.72912C18.0105 10.0434 18.2652 10.2981 18.5795 10.2981Z"
|
|
||||||
fill="var(--icon-default-color-active)"
|
|
||||||
stroke="var(--icon-default-color-active)"
|
|
||||||
strokeWidth="0.2"
|
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
@@ -118,97 +23,45 @@ export function LogoIcon() {
|
|||||||
export function LogoIconLarge() {
|
export function LogoIconLarge() {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
width="90"
|
width="324"
|
||||||
height="90"
|
height="90"
|
||||||
viewBox="0 0 90 90"
|
viewBox="0 0 324 90"
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<circle
|
<mask
|
||||||
cx="45.1957"
|
id="mask0_798_1085"
|
||||||
cy="45.1957"
|
style={{ maskType: "alpha" }}
|
||||||
r="31.2826"
|
maskUnits="userSpaceOnUse"
|
||||||
stroke="var(--accent-color)"
|
x="4"
|
||||||
strokeWidth="2"
|
y="4"
|
||||||
/>
|
width="317"
|
||||||
<path
|
height="81"
|
||||||
d="M40.7635 42.6069L40.7992 42.8543L41.0466 42.8187C55.1005 40.7931 62.8733 32.7466 65.5682 29.3739L65.7243 29.1786L65.5289 29.0225L65.0855 28.6684L64.8902 28.5124L64.7342 28.7077C62.1284 31.9696 54.5784 39.79 40.8943 41.7624L40.6468 41.798L40.6825 42.0455L40.7635 42.6069Z"
|
>
|
||||||
fill="var(--accent-color)"
|
<path
|
||||||
stroke="var(--accent-color)"
|
d="M160.406 10.4062C160.406 7.14432 163.05 4.5 166.312 4.5C169.575 4.5 172.219 7.14432 172.219 10.4062V62.1C172.219 65.025 173.25 67.5187 175.312 69.5812C177.375 71.6438 179.85 72.675 182.737 72.675H216.487C219.75 72.675 222.394 75.3193 222.394 78.5812C222.394 81.8432 219.75 84.4875 216.487 84.4875H182.737C178.65 84.4875 174.9 83.4937 171.487 81.5062C168.112 79.4812 165.412 76.7812 163.387 73.4062C161.4 69.9937 160.406 66.225 160.406 62.1V10.4062Z"
|
||||||
strokeWidth="0.5"
|
fill="#E8E8E8"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M41.0707 44.3747C42.2491 44.3747 43.2043 43.4194 43.2043 42.2411C43.2043 41.0627 42.2491 40.1074 41.0707 40.1074C39.8923 40.1074 38.9371 41.0627 38.9371 42.2411C38.9371 43.4194 39.8923 44.3747 41.0707 44.3747Z"
|
d="M308.906 10.35C308.906 7.11913 311.525 4.5 314.756 4.5C317.987 4.5 320.606 7.11913 320.606 10.35V78.75C320.606 81.9809 317.987 84.6 314.756 84.6C311.525 84.6 308.906 81.9809 308.906 78.75V10.35Z"
|
||||||
fill="var(--accent-color)"
|
fill="#E8E8E8"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M65.071 31.2502C66.2494 31.2502 67.2046 30.2949 67.2046 29.1165C67.2046 27.9382 66.2494 26.9829 65.071 26.9829C63.8926 26.9829 62.9374 27.9382 62.9374 29.1165C62.9374 30.2949 63.8926 31.2502 65.071 31.2502Z"
|
d="M10.4608 84.6008C12.9785 84.6008 15.2242 83.0176 16.0702 80.6464L19.3657 71.4098C25.6296 53.8525 50.4627 53.862 56.7133 71.424L59.9945 80.6431C60.8391 83.016 63.0853 84.6008 65.6041 84.6008C69.7233 84.6008 72.5981 80.5184 71.2099 76.64L47.9209 11.5775C46.4259 7.40053 42.4678 4.61328 38.0313 4.61328C33.5948 4.61328 29.6367 7.40053 28.1416 11.5775L4.85346 76.6378C3.46485 80.5172 6.34042 84.6008 10.4608 84.6008Z"
|
||||||
fill="var(--accent-color)"
|
fill="#E8E8E8"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
d="M32.6135 68.7896L32.7693 68.9857L32.9651 68.8296L33.4085 68.4763L33.6037 68.3207L33.4485 68.1253C30.8927 64.9067 26.8518 58.2123 28.3971 49.4438L28.4404 49.1979L28.1946 49.1542L27.6362 49.0551L27.3898 49.0114L27.3463 49.2579C25.7268 58.4481 29.957 65.4445 32.6135 68.7896Z"
|
d="M89.66 84.6008C92.1781 84.6008 94.4236 83.0176 95.2696 80.6464L98.5645 71.4098C104.829 53.8525 129.662 53.862 135.913 71.424L139.194 80.6431C140.038 83.016 142.285 84.6008 144.803 84.6008C148.922 84.6008 151.798 80.5184 150.409 76.64L127.121 11.5775C125.625 7.40053 121.667 4.61328 117.231 4.61328C112.794 4.61328 108.836 7.40053 107.34 11.5775L84.0527 76.6378C82.6641 80.5172 85.5397 84.6008 89.66 84.6008Z"
|
||||||
fill="var(--accent-color)"
|
fill="#E8E8E8"
|
||||||
stroke="var(--accent-color)"
|
/>
|
||||||
strokeWidth="0.5"
|
<path
|
||||||
/>
|
d="M238.16 84.6008C240.678 84.6008 242.923 83.0176 243.769 80.6464L247.064 71.4098C253.328 53.8525 278.162 53.862 284.413 71.424L287.694 80.6431C288.538 83.016 290.785 84.6008 293.303 84.6008C297.422 84.6008 300.298 80.5184 298.909 76.64L275.62 11.5775C274.125 7.40053 270.166 4.61328 265.73 4.61328C261.294 4.61328 257.336 7.40053 255.84 11.5775L232.553 76.6378C231.164 80.5172 234.04 84.6008 238.16 84.6008Z"
|
||||||
<path
|
fill="#E8E8E8"
|
||||||
d="M27.8694 51.592C29.0478 51.592 30.003 50.6367 30.003 49.4583C30.003 48.28 29.0478 47.3247 27.8694 47.3247C26.691 47.3247 25.7358 48.28 25.7358 49.4583C25.7358 50.6367 26.691 51.592 27.8694 51.592Z"
|
/>
|
||||||
fill="var(--accent-color)"
|
</mask>
|
||||||
/>
|
<g mask="url(#mask0_798_1085)">
|
||||||
<path
|
<rect width="324" height="84.6" fill="#9D67FF" />
|
||||||
d="M32.9652 70.5041C34.1435 70.5041 35.0988 69.5488 35.0988 68.3704C35.0988 67.1921 34.1435 66.2368 32.9652 66.2368C31.7868 66.2368 30.8315 67.1921 30.8315 68.3704C30.8315 69.5488 31.7868 70.5041 32.9652 70.5041Z"
|
</g>
|
||||||
fill="var(--accent-color)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M66.6067 51.6991L66.8567 51.7061L66.8636 51.4561C67.0676 44.1377 64.271 37.1369 58.994 31.7455C53.5053 26.1369 45.8325 22.9707 37.957 23.0012L37.7063 23.0022L37.708 23.2529L37.7118 23.8203L37.7135 24.0701L37.9632 24.0686C45.5642 24.0244 52.9448 27.0906 58.2312 32.4925L58.2312 32.4925C63.3084 37.6792 65.9926 44.4033 65.7964 51.4263L65.7894 51.6762L66.0393 51.6832L66.6067 51.6991Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
stroke="var(--accent-color)"
|
|
||||||
strokeWidth="0.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M66.2922 53.467C67.4705 53.467 68.4258 52.5117 68.4258 51.3333C68.4258 50.155 67.4705 49.1997 66.2922 49.1997C65.1138 49.1997 64.1585 50.155 64.1585 51.3333C64.1585 52.5117 65.1138 53.467 66.2922 53.467Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M38.0639 25.7077C39.2423 25.7077 40.1976 24.7524 40.1976 23.5741C40.1976 22.3957 39.2423 21.4404 38.0639 21.4404C36.8856 21.4404 35.9303 22.3957 35.9303 23.5741C35.9303 24.7524 36.8856 25.7077 38.0639 25.7077Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M13.468 25.6899C12.0099 27.8846 11.446 30.8409 11.7162 34.1762C11.9865 37.5136 13.093 41.2489 14.9988 45.024L15.222 44.9113L14.9988 45.024C20.182 55.2899 31.8559 66.569 49.0829 67.4189L49.3326 67.4312L49.3449 67.1815L49.3729 66.6141L49.3853 66.3644L49.1356 66.352C32.3736 65.5252 21.002 54.548 15.9513 44.5429L15.7295 44.6549L15.9513 44.5429C14.1144 40.9044 13.0501 37.3314 12.7802 34.1684C12.5101 31.0029 13.0366 28.2674 14.3566 26.2805C15.1989 25.0129 16.086 24.0714 17.2249 23.4752C18.3626 22.8796 19.7779 22.6151 21.6999 22.7494L21.8136 22.7574L21.8942 22.6768L22.4811 22.0899L22.8692 21.7018L22.3217 21.6637C20.2328 21.5184 18.4886 21.8123 17.0275 22.5047C15.5655 23.1975 14.4036 24.2815 13.468 25.6899ZM13.468 25.6899L13.6762 25.8282L13.468 25.6899Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
stroke="var(--accent-color)"
|
|
||||||
strokeWidth="0.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M25.003 71.2683L25.8544 71.4079L25.2096 70.8347L23.4487 69.2695L23.414 69.2386L23.3704 69.2223C22.7326 68.9831 22.3525 68.8627 22.0397 68.7635C21.9653 68.7399 21.8947 68.7175 21.8253 68.6951C21.4708 68.5802 21.1376 68.4592 20.4524 68.1438C14.7739 65.5298 12.4176 60.3578 12.1857 55.7717L12.1857 55.7717C11.8358 48.8628 16.101 40.6225 26.4705 37.8248L26.7118 37.7597L26.6468 37.5184L26.4993 36.9706L26.4342 36.7291L26.1927 36.7943C15.2798 39.7386 10.7471 48.4657 11.1189 55.8257L11.1189 55.8257C11.5061 63.4757 16.9748 69.952 25.003 71.2683Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
stroke="var(--accent-color)"
|
|
||||||
strokeWidth="0.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M26.2306 39.4767C27.409 39.4767 28.3642 38.5215 28.3642 37.3431C28.3642 36.1647 27.409 35.2095 26.2306 35.2095C25.0522 35.2095 24.097 36.1647 24.097 37.3431C24.097 38.5215 25.0522 39.4767 26.2306 39.4767Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M61.2074 79.1064L61.2074 79.1064C61.4678 79.1305 61.7244 79.1422 61.978 79.1422C64.4196 79.1422 66.5696 78.04 67.6795 76.1331L67.6795 76.133C68.2962 75.0725 68.6727 74.0249 68.6539 72.9029C68.6351 71.7796 68.2207 70.6132 67.3137 69.3137L67.1429 69.069L66.9319 69.28L66.345 69.8669L66.1969 70.015L66.3168 70.1868C67.1247 71.3442 67.4824 72.2492 67.5231 73.0742C67.5638 73.8967 67.2914 74.6784 66.7571 75.5963L66.757 75.5963C65.7608 77.3086 63.6885 78.2699 61.3064 78.0434L61.3058 78.0433C56.8839 77.6324 52.7763 73.4613 50.384 66.736L50.3002 66.5003L50.0645 66.5843L49.5296 66.775L49.2943 66.8589L49.378 67.0943C51.8719 74.1037 56.2694 78.6473 61.2074 79.1064Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
stroke="var(--accent-color)"
|
|
||||||
strokeWidth="0.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M49.0029 68.9821C50.1813 68.9821 51.1366 68.0268 51.1366 66.8485C51.1366 65.6701 50.1813 64.7148 49.0029 64.7148C47.8246 64.7148 46.8693 65.6701 46.8693 66.8485C46.8693 68.0268 47.8246 68.9821 49.0029 68.9821Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M55.0569 21.9844L54.8197 21.9066L54.2803 21.7295L54.0424 21.6515L54.1208 21.4137C55.4226 17.4661 57.749 14.8415 60.5635 14.3374C62.2955 14.0248 64.0152 14.6136 65.0364 15.8938M55.0569 21.9844L64.203 16.5598C64.2457 16.6134 64.2872 16.6652 64.3275 16.7154C64.6827 17.1587 64.939 17.4786 65.0681 17.8299C65.2013 18.1927 65.2025 18.6117 64.9221 19.2718L64.8561 19.427L64.9754 19.5463L65.5624 20.1332L65.8243 20.3952L65.9692 20.0542C66.3303 19.2044 66.3477 18.464 66.1387 17.7763C65.9332 17.1 65.5135 16.4918 65.0364 15.8938M55.0569 21.9844L55.1351 21.7473M55.0569 21.9844L55.1351 21.7473M65.0364 15.8938L64.841 16.0497M65.0364 15.8938L64.841 16.0497M64.841 16.0497C65.7364 17.172 66.3488 18.2377 65.8379 19.7016M64.841 16.0497C63.8831 14.849 62.2595 14.2853 60.6078 14.5834L65.8379 19.7016M65.8379 19.7016L65.9159 19.7797L65.7391 19.9565L65.5091 19.8587C65.5224 19.8272 65.5353 19.7959 65.5476 19.7649M65.8379 19.7016L65.5476 19.7649M65.5476 19.7649L65.1522 19.3695C65.715 18.0447 65.2644 17.4833 64.5263 16.5635L65.5476 19.7649ZM55.1351 21.7473C56.3456 18.077 58.4148 15.8065 60.7524 15.3887L60.7525 15.3886M55.1351 21.7473L60.7525 15.3886M60.7525 15.3886C62.1223 15.1432 63.4396 15.6032 64.2029 16.5597L60.7525 15.3886Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
stroke="var(--accent-color)"
|
|
||||||
strokeWidth="0.5"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M54.673 23.6159C55.8513 23.6159 56.8066 22.6606 56.8066 21.4823C56.8066 20.3039 55.8513 19.3486 54.673 19.3486C53.4946 19.3486 52.5393 20.3039 52.5393 21.4823C52.5393 22.6606 53.4946 23.6159 54.673 23.6159Z"
|
|
||||||
fill="var(--accent-color)"
|
|
||||||
/>
|
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,132 +1,151 @@
|
|||||||
import { useProductContext } from '../../../modules/simulation/products/productContext'
|
import { useProductContext } from "../../../modules/simulation/products/productContext";
|
||||||
import RegularDropDown from '../../ui/inputs/RegularDropDown';
|
import RegularDropDown from "../../ui/inputs/RegularDropDown";
|
||||||
import { useCompareProductDataStore, useLoadingProgress, useSaveVersion } from '../../../store/builder/store';
|
import {
|
||||||
import useModuleStore from '../../../store/useModuleStore';
|
useCompareProductDataStore,
|
||||||
import CompareLayOut from '../../ui/compareVersion/CompareLayOut';
|
useLoadingProgress,
|
||||||
import ComparisonResult from '../../ui/compareVersion/ComparisonResult';
|
useSaveVersion,
|
||||||
import { useComparisonProduct, useMainProduct } from '../../../store/simulation/useSimulationStore';
|
} from "../../../store/builder/store";
|
||||||
import { usePlayButtonStore } from '../../../store/usePlayButtonStore';
|
import useModuleStore from "../../../store/useModuleStore";
|
||||||
import { useEffect, useState } from 'react';
|
import CompareLayOut from "../../ui/compareVersion/CompareLayOut";
|
||||||
import { useDuplicateProductStore } from '../../../modules/duplicate/duplicateStores/duplicateProductStore';
|
import ComparisonResult from "../../ui/compareVersion/ComparisonResult";
|
||||||
import ProductsDuplicate from '../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct';
|
import {
|
||||||
|
useComparisonProduct,
|
||||||
|
useMainProduct,
|
||||||
|
} from "../../../store/simulation/useSimulationStore";
|
||||||
|
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useDuplicateProductStore } from "../../../modules/duplicate/duplicateStores/duplicateProductStore";
|
||||||
|
import ProductsDuplicate from "../../../modules/duplicate/duplicateSimulation/duplicateProduct/duplicateProduct";
|
||||||
|
|
||||||
function ComparisonScene() {
|
function ComparisonScene() {
|
||||||
const { isPlaying } = usePlayButtonStore();
|
const { isPlaying } = usePlayButtonStore();
|
||||||
const { products, getProductById } = useDuplicateProductStore();
|
const { products, getProductById } = useDuplicateProductStore();
|
||||||
const { isVersionSaved } = useSaveVersion();
|
const { isVersionSaved } = useSaveVersion();
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
const { selectedProductStore } = useProductContext();
|
const { selectedProductStore } = useProductContext();
|
||||||
const { selectedProduct } = selectedProductStore();
|
const { selectedProduct } = selectedProductStore();
|
||||||
const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
|
const { comparisonProduct, setComparisonProduct } = useComparisonProduct();
|
||||||
const { mainProduct } = useMainProduct();
|
const { mainProduct } = useMainProduct();
|
||||||
const { loadingProgress } = useLoadingProgress();
|
const { loadingProgress } = useLoadingProgress();
|
||||||
const { compareProductsData, setCompareProductsData } = useCompareProductDataStore();
|
const { compareProductsData, setCompareProductsData } =
|
||||||
const [shouldShowComparisonResult, setShouldShowComparisonResult] = useState(false);
|
useCompareProductDataStore();
|
||||||
|
const [shouldShowComparisonResult, setShouldShowComparisonResult] =
|
||||||
|
useState(false);
|
||||||
|
|
||||||
const handleSelectLayout = (option: string) => {
|
const handleSelectLayout = (option: string) => {
|
||||||
const product = products.find((product) => product.productName === option);
|
const product = products.find((product) => product.productName === option);
|
||||||
if (product) {
|
if (product) {
|
||||||
setComparisonProduct(product.productUuid, product.productName);
|
setComparisonProduct(product.productUuid, product.productName);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (compareProductsData.length === 2) return;
|
if (compareProductsData.length === 2) return;
|
||||||
|
|
||||||
// const productData = getProductById(selectedProduct.productUuid);
|
// const productData = getProductById(selectedProduct.productUuid);
|
||||||
|
|
||||||
// const newData = {
|
// const newData = {
|
||||||
// "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
|
// "productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
|
||||||
// "productName": "Product 2",
|
// "productName": "Product 2",
|
||||||
// "simulationData": {
|
// "simulationData": {
|
||||||
// "roiPercentage": 281.7214285714286,
|
// "roiPercentage": 281.7214285714286,
|
||||||
// "paybackPeriod": 1.7748028701097842,
|
// "paybackPeriod": 1.7748028701097842,
|
||||||
// "netProfit": 9860250,
|
// "netProfit": 9860250,
|
||||||
// "productionCapacity": 4599.25,
|
// "productionCapacity": 4599.25,
|
||||||
// "machineIdleTime": 1885,
|
// "machineIdleTime": 1885,
|
||||||
// "machineActiveTime": 646,
|
// "machineActiveTime": 646,
|
||||||
// "throughputData": 183.97
|
// "throughputData": 183.97
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// const existingIndex = compareProductsData.findIndex((item) =>
|
// const existingIndex = compareProductsData.findIndex((item) =>
|
||||||
// item.productUuid === productData?.productUuid
|
// item.productUuid === productData?.productUuid
|
||||||
// );
|
// );
|
||||||
|
|
||||||
// if (existingIndex !== -1) {
|
// if (existingIndex !== -1) {
|
||||||
// const updated = [...compareProductsData];
|
// const updated = [...compareProductsData];
|
||||||
// updated[existingIndex] = newData;
|
// updated[existingIndex] = newData;
|
||||||
// setCompareProductsData(updated);
|
// setCompareProductsData(updated);
|
||||||
// } else {
|
// } else {
|
||||||
// setCompareProductsData([...compareProductsData, newData]);
|
// setCompareProductsData([...compareProductsData, newData]);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
setCompareProductsData([
|
setCompareProductsData([
|
||||||
{
|
{
|
||||||
"productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf1",
|
productUuid: "70a4d942-f201-4364-bc19-de98ed41500a",
|
||||||
"productName": "Product 1",
|
productName: "Product 1",
|
||||||
"simulationData": {
|
simulationData: {
|
||||||
"roiPercentage": 273.9428571428571,
|
roiPercentage: 273.9428571428571,
|
||||||
"paybackPeriod": 1.8251981643721318,
|
paybackPeriod: 1.8251981643721318,
|
||||||
"netProfit": 9588000,
|
netProfit: 9588000,
|
||||||
"productionCapacity": 4508.5,
|
productionCapacity: 4508.5,
|
||||||
"machineIdleTime": 1450,
|
machineIdleTime: 1450,
|
||||||
"machineActiveTime": 430,
|
machineActiveTime: 430,
|
||||||
"throughputData": 180.34
|
throughputData: 180.34,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"productUuid": "15193386-ec58-4ec6-8a92-e665a39eebf2",
|
productUuid: "70a4d942-f201-4364-bc19-de98ed41500b",
|
||||||
"productName": "Product 2",
|
productName: "Product 2",
|
||||||
"simulationData": {
|
simulationData: {
|
||||||
"roiPercentage": 281.7214285714286,
|
roiPercentage: 281.7214285714286,
|
||||||
"paybackPeriod": 1.7748028701097842,
|
paybackPeriod: 1.7748028701097842,
|
||||||
"netProfit": 9860250,
|
netProfit: 9860250,
|
||||||
"productionCapacity": 4599.25,
|
productionCapacity: 4599.25,
|
||||||
"machineIdleTime": 1885,
|
machineIdleTime: 1885,
|
||||||
"machineActiveTime": 646,
|
machineActiveTime: 646,
|
||||||
"throughputData": 183.97
|
throughputData: 183.97,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
])
|
]);
|
||||||
}, [compareProductsData]); // ✅ Runs only once on mount
|
}, [compareProductsData]); // ✅ Runs only once on mount
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
|
if (mainProduct && comparisonProduct && compareProductsData.length > 1) {
|
||||||
const hasMain = compareProductsData.some(val => val.productUuid === mainProduct.productUuid);
|
const hasMain = compareProductsData.some(
|
||||||
const hasComparison = compareProductsData.some(val => val.productUuid === comparisonProduct.productUuid);
|
(val) => val.productUuid === mainProduct.productUuid
|
||||||
if (hasMain && hasComparison && mainProduct.productUuid !== comparisonProduct.productUuid) {
|
);
|
||||||
setShouldShowComparisonResult(true);
|
const hasComparison = compareProductsData.some(
|
||||||
} else {
|
(val) => val.productUuid === comparisonProduct.productUuid
|
||||||
setShouldShowComparisonResult(false);
|
);
|
||||||
}
|
if (
|
||||||
} else {
|
hasMain &&
|
||||||
setShouldShowComparisonResult(false);
|
hasComparison &&
|
||||||
}
|
mainProduct.productUuid !== comparisonProduct.productUuid
|
||||||
}, [compareProductsData, mainProduct, comparisonProduct]);
|
) {
|
||||||
|
setShouldShowComparisonResult(true);
|
||||||
|
} else {
|
||||||
|
setShouldShowComparisonResult(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setShouldShowComparisonResult(false);
|
||||||
|
}
|
||||||
|
}, [compareProductsData, mainProduct, comparisonProduct]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
{isVersionSaved && activeModule === "simulation" && selectedProduct && (
|
||||||
<>
|
<>
|
||||||
{isVersionSaved && activeModule === "simulation" && selectedProduct && (
|
{comparisonProduct && !isPlaying && (
|
||||||
<>
|
<div className="initial-selectLayout-wrapper">
|
||||||
{comparisonProduct && !isPlaying &&
|
<RegularDropDown
|
||||||
<div className="initial-selectLayout-wrapper">
|
header={selectedProduct.productName}
|
||||||
<RegularDropDown
|
options={products.map((l) => l.productName)} // Pass layout names as options
|
||||||
header={selectedProduct.productName}
|
onSelect={handleSelectLayout}
|
||||||
options={products.map((l) => l.productName)} // Pass layout names as options
|
search={false}
|
||||||
onSelect={handleSelectLayout}
|
/>
|
||||||
search={false}
|
</div>
|
||||||
/>
|
)}
|
||||||
</div>
|
<CompareLayOut />
|
||||||
}
|
|
||||||
<CompareLayOut />
|
|
||||||
|
|
||||||
<ProductsDuplicate projectId={"684bcd620a64bc2a815a88d6"} />
|
<ProductsDuplicate projectId={"6842c683d4c6ce57664da93b"} />
|
||||||
|
|
||||||
{(shouldShowComparisonResult && !loadingProgress) && <ComparisonResult />}
|
{shouldShowComparisonResult && !loadingProgress && (
|
||||||
</>
|
<ComparisonResult />
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ComparisonScene;
|
export default ComparisonScene;
|
||||||
|
|||||||
@@ -120,9 +120,7 @@ function MainScene() {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
className={`scene-container${
|
className={`scene-container`}
|
||||||
comparisonProduct?.productUuid ? " half-view" : ""
|
|
||||||
}`}
|
|
||||||
id="work-space-three-d-canvas"
|
id="work-space-three-d-canvas"
|
||||||
style={{
|
style={{
|
||||||
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
|
height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ const LoadingPage: React.FC<LoadingPageProps> = ({ progress }) => {
|
|||||||
<div className="logo">
|
<div className="logo">
|
||||||
<LogoIconLarge />
|
<LogoIconLarge />
|
||||||
</div>
|
</div>
|
||||||
<div className="content">Entering A New World of Dwinzo</div>
|
<div className="content">Entering A New World with your Aalai</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="progress-container">
|
<div className="progress-container">
|
||||||
<div className="progress-value">{validatedProgress}%</div>
|
<div className="progress-value">{validatedProgress}%</div>
|
||||||
|
|||||||
@@ -53,8 +53,8 @@ const ComparisonResult = () => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
// Color palette
|
// Color palette
|
||||||
const purpleDark = "#6a0dad";
|
const purpleDark = "#3466F1";
|
||||||
const purpleLight = "#b19cd9";
|
const purpleLight = "#FFC527";
|
||||||
|
|
||||||
const throughputData = {
|
const throughputData = {
|
||||||
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
|
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
|
||||||
@@ -71,7 +71,6 @@ const ComparisonResult = () => {
|
|||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const cycleTimePieData = {
|
const cycleTimePieData = {
|
||||||
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
|
labels: [comparedProducts[0]?.productName, comparedProducts[1]?.productName],
|
||||||
datasets: [
|
datasets: [
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ ChartJS.register(
|
|||||||
const EnergyUsage = ({comparedProducts}:any) => {
|
const EnergyUsage = ({comparedProducts}:any) => {
|
||||||
const data = useMemo(() => {
|
const data = useMemo(() => {
|
||||||
const randomizeData = () =>
|
const randomizeData = () =>
|
||||||
Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300);
|
Array.from({ length: 7 }, () => Math.floor(Math.random() * 10));
|
||||||
|
|
||||||
return {
|
return {
|
||||||
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
|
labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
|
||||||
@@ -30,7 +30,7 @@ const EnergyUsage = ({comparedProducts}:any) => {
|
|||||||
{
|
{
|
||||||
label: "Simulation 1",
|
label: "Simulation 1",
|
||||||
data: randomizeData(),
|
data: randomizeData(),
|
||||||
borderColor: "#6a0dad",
|
borderColor: "#3466F1",
|
||||||
fill: false,
|
fill: false,
|
||||||
tension: 0.5, // More curved line
|
tension: 0.5, // More curved line
|
||||||
pointRadius: 0, // Remove point indicators
|
pointRadius: 0, // Remove point indicators
|
||||||
@@ -38,7 +38,7 @@ const EnergyUsage = ({comparedProducts}:any) => {
|
|||||||
{
|
{
|
||||||
label: "Simulation 2",
|
label: "Simulation 2",
|
||||||
data: randomizeData(),
|
data: randomizeData(),
|
||||||
borderColor: "#b19cd9",
|
borderColor: "#FFC527",
|
||||||
fill: false,
|
fill: false,
|
||||||
tension: 0.5,
|
tension: 0.5,
|
||||||
pointRadius: 0,
|
pointRadius: 0,
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ export default function PostProcessingDuplicate() {
|
|||||||
return (
|
return (
|
||||||
<EffectComposer autoClear={false}>
|
<EffectComposer autoClear={false}>
|
||||||
<N8AO
|
<N8AO
|
||||||
color="black"
|
color="#323232"
|
||||||
aoRadius={20}
|
aoRadius={20}
|
||||||
intensity={7}
|
intensity={7}
|
||||||
distanceFalloff={4}
|
distanceFalloff={4}
|
||||||
|
|||||||
@@ -1,142 +1,142 @@
|
|||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useEventsStore } from "../../../../store/simulation/useEventsStore";
|
|
||||||
import useModuleStore from "../../../../store/useModuleStore";
|
import useModuleStore from "../../../../store/useModuleStore";
|
||||||
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
|
import { usePlayButtonStore } from "../../../../store/usePlayButtonStore";
|
||||||
|
import { useDuplicateEventsStore } from "../../duplicateStores/duplicateEventStore";
|
||||||
|
|
||||||
function PointsDuplicate() {
|
function PointsDuplicate() {
|
||||||
const { events } = useEventsStore();
|
const { events } = useDuplicateEventsStore();
|
||||||
const { activeModule } = useModuleStore();
|
const { activeModule } = useModuleStore();
|
||||||
const { isPlaying } = usePlayButtonStore();
|
const { isPlaying } = usePlayButtonStore();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
{activeModule === "simulation" && (
|
||||||
<>
|
<>
|
||||||
{activeModule === "simulation" && (
|
<group name="EventPointsGroup" visible={!isPlaying}>
|
||||||
<>
|
{events.map((event, index) => {
|
||||||
<group name="EventPointsGroup" visible={!isPlaying}>
|
const usedEvent = event;
|
||||||
{events.map((event, index) => {
|
|
||||||
const usedEvent = event;
|
|
||||||
|
|
||||||
if (usedEvent.type === "transfer") {
|
if (usedEvent.type === "transfer") {
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
||||||
key={`${index}-${usedEvent.modelUuid}`}
|
key={`${index}-${usedEvent.modelUuid}`}
|
||||||
position={usedEvent.position}
|
position={usedEvent.position}
|
||||||
rotation={usedEvent.rotation}
|
rotation={usedEvent.rotation}
|
||||||
>
|
>
|
||||||
{usedEvent.points.map((point, j) => (
|
{usedEvent.points.map((point, j) => (
|
||||||
<mesh
|
<mesh
|
||||||
name="Event-Sphere"
|
name="Event-Sphere"
|
||||||
uuid={point.uuid}
|
uuid={point.uuid}
|
||||||
key={`${index}-${point.uuid}`}
|
key={`${index}-${point.uuid}`}
|
||||||
position={new THREE.Vector3(...point.position)}
|
position={new THREE.Vector3(...point.position)}
|
||||||
userData={{
|
userData={{
|
||||||
modelUuid: usedEvent.modelUuid,
|
modelUuid: usedEvent.modelUuid,
|
||||||
pointUuid: point.uuid,
|
pointUuid: point.uuid,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<sphereGeometry args={[0.1, 16, 16]} />
|
<sphereGeometry args={[0.1, 16, 16]} />
|
||||||
<meshStandardMaterial color="orange" />
|
<meshStandardMaterial color="orange" />
|
||||||
</mesh>
|
</mesh>
|
||||||
))}
|
))}
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
} else if (usedEvent.type === "vehicle") {
|
} else if (usedEvent.type === "vehicle") {
|
||||||
const point = usedEvent.point;
|
const point = usedEvent.point;
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
||||||
key={`${index}-${usedEvent.modelUuid}`}
|
key={`${index}-${usedEvent.modelUuid}`}
|
||||||
position={usedEvent.position}
|
position={usedEvent.position}
|
||||||
rotation={usedEvent.rotation}
|
rotation={usedEvent.rotation}
|
||||||
>
|
>
|
||||||
<mesh
|
<mesh
|
||||||
name="Event-Sphere"
|
name="Event-Sphere"
|
||||||
uuid={point.uuid}
|
uuid={point.uuid}
|
||||||
position={new THREE.Vector3(...point.position)}
|
position={new THREE.Vector3(...point.position)}
|
||||||
userData={{
|
userData={{
|
||||||
modelUuid: usedEvent.modelUuid,
|
modelUuid: usedEvent.modelUuid,
|
||||||
pointUuid: point.uuid,
|
pointUuid: point.uuid,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<sphereGeometry args={[0.1, 16, 16]} />
|
<sphereGeometry args={[0.1, 16, 16]} />
|
||||||
<meshStandardMaterial color="blue" />
|
<meshStandardMaterial color="blue" />
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
} else if (usedEvent.type === "roboticArm") {
|
} else if (usedEvent.type === "roboticArm") {
|
||||||
const point = usedEvent.point;
|
const point = usedEvent.point;
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
||||||
key={`${index}-${usedEvent.modelUuid}`}
|
key={`${index}-${usedEvent.modelUuid}`}
|
||||||
position={usedEvent.position}
|
position={usedEvent.position}
|
||||||
rotation={usedEvent.rotation}
|
rotation={usedEvent.rotation}
|
||||||
>
|
>
|
||||||
<mesh
|
<mesh
|
||||||
name="Event-Sphere"
|
name="Event-Sphere"
|
||||||
uuid={point.uuid}
|
uuid={point.uuid}
|
||||||
position={new THREE.Vector3(...point.position)}
|
position={new THREE.Vector3(...point.position)}
|
||||||
userData={{
|
userData={{
|
||||||
modelUuid: usedEvent.modelUuid,
|
modelUuid: usedEvent.modelUuid,
|
||||||
pointUuid: point.uuid,
|
pointUuid: point.uuid,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<sphereGeometry args={[0.1, 16, 16]} />
|
<sphereGeometry args={[0.1, 16, 16]} />
|
||||||
<meshStandardMaterial color="green" />
|
<meshStandardMaterial color="green" />
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
} else if (usedEvent.type === "machine") {
|
} else if (usedEvent.type === "machine") {
|
||||||
const point = usedEvent.point;
|
const point = usedEvent.point;
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
||||||
key={`${index}-${usedEvent.modelUuid}`}
|
key={`${index}-${usedEvent.modelUuid}`}
|
||||||
position={usedEvent.position}
|
position={usedEvent.position}
|
||||||
rotation={usedEvent.rotation}
|
rotation={usedEvent.rotation}
|
||||||
>
|
>
|
||||||
<mesh
|
<mesh
|
||||||
name="Event-Sphere"
|
name="Event-Sphere"
|
||||||
uuid={point.uuid}
|
uuid={point.uuid}
|
||||||
position={new THREE.Vector3(...point.position)}
|
position={new THREE.Vector3(...point.position)}
|
||||||
userData={{
|
userData={{
|
||||||
modelUuid: usedEvent.modelUuid,
|
modelUuid: usedEvent.modelUuid,
|
||||||
pointUuid: point.uuid,
|
pointUuid: point.uuid,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<sphereGeometry args={[0.1, 16, 16]} />
|
<sphereGeometry args={[0.1, 16, 16]} />
|
||||||
<meshStandardMaterial color="purple" />
|
<meshStandardMaterial color="purple" />
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
} else if (usedEvent.type === "storageUnit") {
|
} else if (usedEvent.type === "storageUnit") {
|
||||||
const point = usedEvent.point;
|
const point = usedEvent.point;
|
||||||
return (
|
return (
|
||||||
<group
|
<group
|
||||||
key={`${index}-${usedEvent.modelUuid}`}
|
key={`${index}-${usedEvent.modelUuid}`}
|
||||||
position={usedEvent.position}
|
position={usedEvent.position}
|
||||||
rotation={usedEvent.rotation}
|
rotation={usedEvent.rotation}
|
||||||
>
|
>
|
||||||
<mesh
|
<mesh
|
||||||
name="Event-Sphere"
|
name="Event-Sphere"
|
||||||
uuid={point.uuid}
|
uuid={point.uuid}
|
||||||
position={new THREE.Vector3(...point.position)}
|
position={new THREE.Vector3(...point.position)}
|
||||||
userData={{
|
userData={{
|
||||||
modelUuid: usedEvent.modelUuid,
|
modelUuid: usedEvent.modelUuid,
|
||||||
pointUuid: point.uuid,
|
pointUuid: point.uuid,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<sphereGeometry args={[0.1, 16, 16]} />
|
<sphereGeometry args={[0.1, 16, 16]} />
|
||||||
<meshStandardMaterial color="red" />
|
<meshStandardMaterial color="red" />
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
})}
|
})}
|
||||||
</group>
|
</group>
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
);
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default PointsDuplicate;
|
export default PointsDuplicate;
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
import { upsertProductOrEventApi } from '../../../../services/simulation/products/UpsertProductOrEventApi';
|
|
||||||
import { getAllProductsApi } from '../../../../services/simulation/products/getallProductsApi';
|
import { getAllProductsApi } from '../../../../services/simulation/products/getallProductsApi';
|
||||||
import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
|
import { usePlayButtonStore, useResetButtonStore } from '../../../../store/usePlayButtonStore';
|
||||||
import { useSceneContext } from '../../../scene/sceneContext';
|
import { useSceneContext } from '../../../scene/sceneContext';
|
||||||
|
|||||||
@@ -1,18 +1,13 @@
|
|||||||
import React from 'react'
|
import PointsDuplicate from "./duplicatePoint/duplicatePoint";
|
||||||
import ProductsDuplicate from './duplicateProduct/duplicateProduct'
|
import TriggerDuplicate from "./duplicateTrigger/duplicateTrigger";
|
||||||
import PointsDuplicate from './duplicatePoint/duplicatePoint'
|
|
||||||
import TriggerDuplicate from './duplicateTrigger/duplicateTrigger'
|
|
||||||
|
|
||||||
function SimulationDuplicate() {
|
function SimulationDuplicate() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
<PointsDuplicate />
|
||||||
<PointsDuplicate />
|
<TriggerDuplicate />
|
||||||
|
</>
|
||||||
<TriggerDuplicate />
|
);
|
||||||
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SimulationDuplicate
|
export default SimulationDuplicate;
|
||||||
|
|||||||
@@ -147,7 +147,7 @@ function TriggerDuplicate() {
|
|||||||
start={startPoint.toArray()}
|
start={startPoint.toArray()}
|
||||||
end={endPoint.toArray()}
|
end={endPoint.toArray()}
|
||||||
mid={midPoint.toArray()}
|
mid={midPoint.toArray()}
|
||||||
color={"#c4abf1"}
|
color={"#FFC527"}
|
||||||
lineWidth={4}
|
lineWidth={4}
|
||||||
dashed={true}
|
dashed={true}
|
||||||
dashSize={0.75}
|
dashSize={0.75}
|
||||||
@@ -157,7 +157,7 @@ function TriggerDuplicate() {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
<Arrows connections={connections} color={'#c4abf1'} />
|
<Arrows connections={connections} color={'#FFC527'} />
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,39 +12,42 @@ import { Color } from "three";
|
|||||||
import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
|
import SimulationDuplicate from "./duplicateSimulation/duplicateSimulation";
|
||||||
|
|
||||||
export default function DuplicateScene() {
|
export default function DuplicateScene() {
|
||||||
const projectId = "684bcd620a64bc2a815a88d6";
|
const projectId = "6842c683d4c6ce57664da93b";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Canvas
|
<Canvas
|
||||||
id="sceneCanvas"
|
id="sceneCanvas"
|
||||||
shadows
|
shadows
|
||||||
color="#aaaa"
|
color="#aaaa"
|
||||||
eventPrefix="client"
|
eventPrefix="client"
|
||||||
style={{
|
style={{
|
||||||
pointerEvents: 'none'
|
pointerEvents: "none",
|
||||||
}}
|
}}
|
||||||
onContextMenu={(e) => {
|
onContextMenu={(e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}}
|
}}
|
||||||
onCreated={(e) => {
|
onCreated={(e) => {
|
||||||
e.scene.background = new Color(0x19191d);
|
e.scene.background = new Color(0x19191d);
|
||||||
}}
|
}}
|
||||||
gl={{ powerPreference: "high-performance", antialias: true, preserveDrawingBuffer: true }}
|
gl={{
|
||||||
>
|
powerPreference: "high-performance",
|
||||||
|
antialias: true,
|
||||||
|
preserveDrawingBuffer: true,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Sun />
|
||||||
|
|
||||||
<Sun />
|
<Shadows />
|
||||||
|
|
||||||
<Shadows />
|
<ControlsDuplicate />
|
||||||
|
|
||||||
<ControlsDuplicate />
|
<PostProcessingDuplicate />
|
||||||
|
|
||||||
<PostProcessingDuplicate />
|
<Environment files={background} environmentIntensity={1.5} />
|
||||||
|
|
||||||
<Environment files={background} environmentIntensity={1.5} />
|
<BuilderDuplicate projectId={projectId} />
|
||||||
|
|
||||||
<BuilderDuplicate projectId={projectId} />
|
<SimulationDuplicate />
|
||||||
|
</Canvas>
|
||||||
<SimulationDuplicate />
|
);
|
||||||
</Canvas>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
@@ -150,7 +150,7 @@ export function ArrowOnQuadraticBezier({
|
|||||||
start,
|
start,
|
||||||
mid,
|
mid,
|
||||||
end,
|
end,
|
||||||
color = "#42a5f5",
|
color = "#3466F1",
|
||||||
}: {
|
}: {
|
||||||
start: number[];
|
start: number[];
|
||||||
mid: number[];
|
mid: number[];
|
||||||
|
|||||||
@@ -421,7 +421,7 @@ function TriggerConnector() {
|
|||||||
end: endPoint,
|
end: endPoint,
|
||||||
});
|
});
|
||||||
|
|
||||||
setHelperLineColor(sphereIntersects.length > 0 ? "#6cf542" : "red");
|
setHelperLineColor(sphereIntersects.length > 0 ? "#3466F1" : "red");
|
||||||
} else {
|
} else {
|
||||||
setCurrentLine(null);
|
setCurrentLine(null);
|
||||||
}
|
}
|
||||||
@@ -477,7 +477,7 @@ function TriggerConnector() {
|
|||||||
start={startPoint.toArray()}
|
start={startPoint.toArray()}
|
||||||
end={endPoint.toArray()}
|
end={endPoint.toArray()}
|
||||||
mid={midPoint.toArray()}
|
mid={midPoint.toArray()}
|
||||||
color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#6f42c1"}
|
color={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? "red" : "#42a5f5"}
|
||||||
lineWidth={4}
|
lineWidth={4}
|
||||||
dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true}
|
dashed={toolMode === '3D-Delete' && hoveredLineKey === connection.id ? false : true}
|
||||||
dashSize={0.75}
|
dashSize={0.75}
|
||||||
@@ -496,7 +496,7 @@ function TriggerConnector() {
|
|||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|
||||||
<Arrows connections={connections} color="#6f42c1"/>
|
<Arrows connections={connections} color="#42a5f5"/>
|
||||||
|
|
||||||
{currentLine && (
|
{currentLine && (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -130,7 +130,7 @@ const UserAuth: React.FC = () => {
|
|||||||
<div className="logo-icon">
|
<div className="logo-icon">
|
||||||
<LogoIconLarge />
|
<LogoIconLarge />
|
||||||
</div>
|
</div>
|
||||||
<h1>Welcome to Dwinzo</h1>
|
<h1>Welcome to Aalai</h1>
|
||||||
<p>
|
<p>
|
||||||
{isSignIn ? (
|
{isSignIn ? (
|
||||||
<>
|
<>
|
||||||
|
|||||||
@@ -8,7 +8,12 @@
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
||||||
.regularDropdown-container {
|
.regularDropdown-container {
|
||||||
background: var(--background-color);
|
background: #FFC527;
|
||||||
|
.key,
|
||||||
|
.icon {
|
||||||
|
color: #323232;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -19,7 +24,11 @@
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
||||||
.regularDropdown-container {
|
.regularDropdown-container {
|
||||||
background: var(--background-color);
|
background: #3466f1;
|
||||||
|
.key,
|
||||||
|
.icon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -55,8 +64,8 @@
|
|||||||
cursor: ew-resize;
|
cursor: ew-resize;
|
||||||
transition: transform 0.1s ease;
|
transition: transform 0.1s ease;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
// pointer-events: all;
|
pointer-events: all;
|
||||||
opacity: 0;
|
// opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chooseLayout-container {
|
.chooseLayout-container {
|
||||||
@@ -71,7 +80,7 @@
|
|||||||
.compare-layout-canvas-container {
|
.compare-layout-canvas-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 50vw;
|
width: 100vw;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
@@ -265,7 +274,7 @@
|
|||||||
.metric-value {
|
.metric-value {
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
font-size: var(--font-size-xlarge);
|
font-size: var(--font-size-xlarge);
|
||||||
color: var(--background-color-accent);
|
color: #14ca44;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -401,9 +410,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.simulation-tag {
|
.simulation-tag {
|
||||||
background: var(--background-color-button);
|
background: #FFC527;
|
||||||
|
color: #323232;
|
||||||
color: var(--icon-default-color-active);
|
font-weight: 600;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@@ -431,7 +440,7 @@
|
|||||||
|
|
||||||
.energy-usage-wrapper {
|
.energy-usage-wrapper {
|
||||||
.value {
|
.value {
|
||||||
padding-top: 25px;
|
padding-top: 100px;
|
||||||
font-size: var(--font-size-xxxlarge);
|
font-size: var(--font-size-xxxlarge);
|
||||||
color: var(--background-color-accent);
|
color: var(--background-color-accent);
|
||||||
}
|
}
|
||||||
@@ -439,7 +448,7 @@
|
|||||||
|
|
||||||
.simulation-details {
|
.simulation-details {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 12px;
|
top: 12px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
|
|
||||||
.simulation-wrapper {
|
.simulation-wrapper {
|
||||||
@@ -447,6 +456,16 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
|
|
||||||
|
&.sim-1 {
|
||||||
|
.icon {
|
||||||
|
background-color: #3466f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.sim-2 {
|
||||||
|
.icon {
|
||||||
|
background-color: #FFC527;
|
||||||
|
}
|
||||||
|
}
|
||||||
.icon {
|
.icon {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
@@ -457,9 +476,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chart {
|
.chart {
|
||||||
|
height: 80px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 40px;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -476,9 +496,16 @@
|
|||||||
.layer-wrapper {
|
.layer-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
&:first-child {
|
||||||
&:last-child {
|
.key {
|
||||||
justify-content: end;
|
color: #3466f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
// justify-content: end;
|
||||||
|
.key {
|
||||||
|
color: #FFC527;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -516,6 +543,16 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
&:first-child {
|
||||||
|
.layer-name {
|
||||||
|
color: #3466f1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
.layer-name {
|
||||||
|
color: #FFC527;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.layer-name {
|
.layer-name {
|
||||||
color: var(--background-color-accent);
|
color: var(--background-color-accent);
|
||||||
|
|||||||
@@ -48,6 +48,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.loading-hero-container {
|
.loading-hero-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
.logo {
|
.logo {
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -18,6 +18,9 @@
|
|||||||
height: 80px;
|
height: 80px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
@include flex-center;
|
@include flex-center;
|
||||||
|
svg{
|
||||||
|
scale: 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
|
|||||||
Reference in New Issue
Block a user