commit
6e46901c90
|
|
@ -16,7 +16,6 @@
|
|||
"astro": "^1.7.2",
|
||||
"astro-eslint-parser": "^0.14.0",
|
||||
"eslint": "^8.44.0",
|
||||
"flowbite": "^1.7.0",
|
||||
"flowbite-typography": "^1.0.3",
|
||||
"phaser": "^3.60.0",
|
||||
"shiki": "^0.14.3",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
<svg width="169" height="133" viewBox="0 0 169 133" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M164.295 56.3359L133.293 75.7852L134.58 102.781L167.852 68.1232L164.295 56.3359Z" fill="#FF3141" stroke="black" stroke-width="0.745489"/>
|
||||
<path d="M3.59817 61.5937C3.23014 65.0223 2.23257 66.8818 0.605469 67.1724C1.67083 67.9762 1.88875 69.6324 1.25921 72.1408C0.774958 74.9592 1.61272 76.4555 3.7725 76.6299C5.64173 63.2063 9.68042 51.4292 15.8886 41.2986C12.8184 45.2598 9.60779 47.1581 6.25674 46.9934C6.33422 49.5406 6.95406 51.2888 8.11628 52.2379C5.63689 53.6907 3.66597 54.2718 2.20351 53.9812C2.15509 57.5357 2.61997 60.0732 3.59817 61.5937ZM51.0891 4.73241C50.4402 5.36195 49.8107 6.01569 49.2005 6.69365C45.3071 10.9551 42.2466 15.8509 40.0191 21.3811C46.3531 10.4079 54.0528 5.64766 63.1181 7.10043C63.6798 6.27719 63.3553 5.26994 62.1447 4.07867C58.3966 0.814784 54.7114 1.0327 51.0891 4.73241ZM121.069 32.5384C122.008 33.7297 122.817 34.7999 123.495 35.749C128.134 42.1993 131.882 52.7997 134.74 67.5501C134.807 67.9569 134.88 68.354 134.957 68.7414C136.381 68.2184 137.519 67.2983 138.371 65.9811C136.405 64.7705 134.793 62.3153 133.534 58.6156C134.938 58.1216 135.921 57.4873 136.483 56.7124C135.098 56.2766 133.834 54.543 132.691 51.5115C133.611 51.6084 134.531 50.9256 135.451 49.4631C132.275 47.3227 129.229 43.2404 126.313 37.2163C124.832 34.1752 123.083 32.6159 121.069 32.5384ZM94.0765 8.93091C93.6601 8.38855 93.2581 7.88492 92.8707 7.42003C91.0015 5.14403 89.4761 3.61378 88.2945 2.82929C84.4398 0.0399762 81.1178 0.0399762 78.3285 2.82929C77.8249 3.97213 78.3092 5.05202 79.7813 6.06896C80.1493 6.32078 80.8418 6.23845 81.8588 5.82199C84.4641 4.776 86.7885 5.00844 88.832 6.51932C90.1492 7.46846 91.4034 8.66942 92.5947 10.1222C94.5317 12.4369 97.5632 13.6669 101.689 13.8122C98.6092 13.1343 96.0717 11.5072 94.0765 8.93091Z" fill="#130704"/>
|
||||
<path d="M111.975 21.4681C109.059 18.0589 105.926 15.628 102.575 14.1752C102.478 14.1268 102.382 14.0881 102.285 14.059L102.139 14.0154C101.975 13.9476 101.825 13.8798 101.689 13.812C97.5632 13.6667 94.5318 12.4367 92.5947 10.122C91.4035 8.66923 90.1492 7.46827 88.8321 6.51913C86.7885 5.00825 84.4641 4.77581 81.8588 5.8218C80.8419 6.23826 80.1494 6.32059 79.7813 6.06877C78.3092 5.05184 77.8249 3.97195 78.3286 2.8291C75.8298 3.77824 70.4352 4.1947 62.1447 4.07848C63.3554 5.26975 63.6798 6.277 63.1181 7.10024C54.0528 5.64747 46.3531 10.4077 40.0191 21.3809C42.2467 15.8507 45.3072 10.9549 49.2006 6.69346C46.4016 8.27214 44.0723 10.1559 42.2128 12.3447C40.3532 14.5336 37.3121 17.042 33.0894 19.8701C28.8376 22.7078 23.7917 28.8627 17.9515 38.3347C17.2736 39.4292 16.5859 40.417 15.8886 41.2984C9.68045 51.429 5.64176 63.2061 3.77253 76.6297C3.72411 76.9106 3.68536 77.1914 3.65631 77.4723C2.17449 99.0701 2.85729 116.13 5.70471 128.653C6.38267 131.2 7.09937 132.464 7.85481 132.445L129.945 130.368C130.943 130.387 131.635 129.767 132.023 128.508C137.427 108.886 138.405 88.9637 134.957 68.7412C134.88 68.3538 134.807 67.9567 134.74 67.5499C131.882 52.7995 128.134 42.1991 123.495 35.7488C122.817 34.7997 122.008 33.7295 121.069 32.5382C118.783 29.6036 115.752 25.9136 111.975 21.4681ZM45.2926 25.6957C49.157 21.6279 53.2925 19.9475 57.6993 20.6546C62.1157 21.3809 65.5055 24.2865 67.8686 29.3712C70.2705 34.4946 70.9388 40.3153 69.8735 46.8334C68.8081 53.3321 66.3384 58.6299 62.4643 62.7267C58.6097 66.8332 54.479 68.5233 50.0722 67.7969C45.6558 67.0899 42.2563 64.1746 39.8738 59.0512C37.4913 53.9471 36.8327 48.1409 37.898 41.6325C38.9634 35.1144 41.4283 29.8022 45.2926 25.6957ZM74.1737 30.1121C76.2172 25.7538 79.0646 23.3567 82.7159 22.9209C86.3769 22.5141 89.7861 24.2042 92.9434 27.991C96.1298 31.7779 98.1153 36.5769 98.8998 42.388C99.7036 48.1506 99.0838 53.2305 97.0402 57.6275C95.0451 62.0245 92.2122 64.4216 88.5415 64.8187C84.8709 65.2545 81.452 63.5645 78.285 59.7485C75.1373 55.981 73.1616 51.2014 72.3577 45.4097C71.5538 39.6083 72.1591 34.5091 74.1737 30.1121ZM47.4863 84.2131L57.4378 82.7458L71.3698 79.4771C75.0114 78.7411 78.4351 78.2132 81.6409 77.8936C90.832 76.9929 98.2024 77.8694 103.752 80.5231C104.769 81.0074 105.728 81.5546 106.628 82.1647C110.967 85.7095 111.418 92.2227 107.98 101.704C107.273 104.068 106.076 106.208 104.391 108.126C100.168 112.91 92.8901 116.237 82.5561 118.106C79.515 118.649 76.1978 119.075 72.6047 119.385C62.9099 119.83 54.5468 118.639 47.5154 115.811C43.9997 114.397 40.8278 112.576 37.9997 110.348C31.8787 105.564 28.4405 100.736 27.6851 95.8643C27.0071 89.4237 30.2904 86.0243 37.5349 85.6659L47.4863 84.2131Z" fill="#FF3141"/>
|
||||
<path d="M37.5354 85.6655C30.291 86.0238 27.0077 89.4233 27.6857 95.8639C28.4411 100.736 31.8793 105.564 38.0003 110.348C40.8284 112.576 44.0002 114.396 47.5159 115.81L47.4869 84.2127L37.5354 85.6655ZM103.753 80.5227C98.203 77.8689 90.8326 76.9924 81.6414 77.8932L82.5567 118.106C92.8907 116.237 100.169 112.91 104.392 108.125L103.753 80.5227ZM106.629 82.1643C105.728 81.5541 104.77 81.0069 103.753 80.5227L104.392 108.125C106.077 106.208 107.273 104.067 107.98 101.704C111.418 92.2223 110.968 85.709 106.629 82.1643ZM57.4383 82.7454L47.4869 84.2127L47.5159 115.81C54.5473 118.638 62.9104 119.83 72.6052 119.384C76.1984 119.074 79.5156 118.648 82.5567 118.106L81.6414 77.8932C78.4357 78.2128 75.012 78.7406 71.3704 79.4767L57.4383 82.7454Z" fill="#FDFBFD"/>
|
||||
<path d="M82.716 22.9214C79.0647 23.3572 76.2172 25.7543 74.1737 30.1126C72.1592 34.5096 71.5539 39.6089 72.3577 45.4102C73.1616 51.2019 75.1374 55.9815 78.285 59.7491C81.452 63.565 84.8709 65.255 88.5415 64.8192C92.2122 64.4221 95.0451 62.0251 97.0402 57.628C99.0838 53.231 99.7037 48.1511 98.8998 42.3885C98.1153 36.5774 96.1298 31.7784 92.9434 27.9916C89.7861 24.2047 86.3769 22.5146 82.716 22.9214ZM79.7523 41.4006C79.6264 40.19 79.6651 39.144 79.8685 38.2626C80.101 37.4103 80.4496 36.9503 80.9145 36.8825C81.3794 36.8341 81.8201 37.2021 82.2365 37.9866C82.6433 38.7808 82.9193 39.7783 83.0646 40.9793C83.2196 42.1899 83.1857 43.2214 82.9629 44.0737C82.7402 44.9938 82.3963 45.4684 81.9315 45.4974C81.4569 45.5652 81.0114 45.1875 80.5949 44.3643C80.1978 43.5798 79.917 42.5919 79.7523 41.4006ZM57.6993 20.6551C53.2926 19.9481 49.157 21.6284 45.2927 25.6962C41.4283 29.8027 38.9634 35.115 37.8981 41.633C36.8327 48.1414 37.4913 53.9477 39.8738 59.0517C42.2564 64.1752 45.6559 67.0904 50.0723 67.7974C54.479 68.5238 58.6097 66.8337 62.4644 62.7272C66.3384 58.6304 68.8081 53.3327 69.8735 46.834C70.9388 40.3159 70.2706 34.4951 67.8687 29.3717C65.5055 24.287 62.1157 21.3815 57.6993 20.6551ZM55.2151 41.3425C55.4281 39.8122 55.8398 38.558 56.4499 37.5798C57.0891 36.5629 57.7477 36.1028 58.4257 36.1997C59.123 36.2965 59.6315 36.9164 59.9511 38.0592C60.3191 39.1924 60.3966 40.5241 60.1835 42.0543C59.9898 43.5652 59.5492 44.8195 58.8615 45.817C58.2513 46.7952 57.5976 47.2456 56.9003 47.1681C56.2223 47.0712 55.709 46.4611 55.3603 45.3376C55.0698 44.1948 55.0214 42.8631 55.2151 41.3425Z" fill="#FBF2FD"/>
|
||||
<path d="M79.8683 38.2621C79.6649 39.1434 79.6262 40.1894 79.7521 41.4001C79.9167 42.5913 80.1976 43.5792 80.5947 44.3637C81.0112 45.1869 81.4567 45.5647 81.9312 45.4969C82.3961 45.4678 82.74 44.9932 82.9627 44.0732C83.1855 43.2209 83.2194 42.1894 83.0644 40.9788C82.9191 39.7778 82.6431 38.7802 82.2363 37.9861C81.8199 37.2016 81.3792 36.8335 80.9143 36.882C80.4494 36.9498 80.1008 37.4098 79.8683 38.2621ZM56.4497 37.5793C55.8395 38.5575 55.4279 39.8117 55.2149 41.342C55.0212 42.8625 55.0696 44.1942 55.3601 45.3371C55.7088 46.4605 56.2221 47.0707 56.9001 47.1676C57.5974 47.245 58.2511 46.7947 58.8613 45.8165C59.5489 44.8189 59.9896 43.5647 60.1833 42.0538C60.3964 40.5236 60.3189 39.1919 59.9509 38.0587C59.6313 36.9159 59.1228 36.296 58.4255 36.1992C57.7475 36.1023 57.0889 36.5623 56.4497 37.5793Z" fill="#051917"/>
|
||||
<path d="M92.8711 7.41992C93.2585 7.88481 93.6604 8.38843 94.0769 8.9308C96.072 11.507 98.6095 13.1341 101.689 13.8121C101.825 13.8799 101.975 13.9477 102.14 14.0155C99.2633 12.5821 96.1737 10.3836 92.8711 7.41992Z" fill="#DE0103"/>
|
||||
<path d="M101.689 13.8122C98.6092 13.1343 96.0717 11.5072 94.0765 8.93091C93.6601 8.38855 93.2581 7.88492 92.8707 7.42003C91.0015 5.14403 89.4761 3.61378 88.2945 2.82929C84.4398 0.0399763 81.1178 0.0399763 78.3285 2.82929C77.8249 3.97213 78.3092 5.05202 79.7813 6.06896C80.1493 6.32077 80.8418 6.23845 81.8588 5.82199C84.4641 4.776 86.7885 5.00844 88.832 6.51932C90.1492 7.46846 91.4034 8.66941 92.5947 10.1222C94.5317 12.4369 97.5632 13.6669 101.689 13.8122ZM101.689 13.8122C101.825 13.88 101.975 13.9478 102.139 14.0156C99.2629 12.5822 96.1734 10.3837 92.8707 7.42003M121.069 32.5384C118.783 29.6038 115.752 25.9138 111.975 21.4683C109.059 18.0591 105.926 15.6282 102.575 14.1754C102.478 14.127 102.382 14.0882 102.285 14.0592L102.139 14.0156M134.957 68.7413C134.88 68.3539 134.807 67.9569 134.739 67.5501C131.882 52.7996 128.134 42.1993 123.495 35.749C122.817 34.7999 122.008 33.7296 121.069 32.5384C123.083 32.6159 124.832 34.1752 126.313 37.2163C129.229 43.2404 132.275 47.3227 135.451 49.4631C134.531 50.9256 133.611 51.6084 132.691 51.5115C133.834 54.543 135.098 56.2766 136.483 56.7124C135.921 57.4872 134.938 58.1216 133.534 58.6156C134.793 62.3153 136.405 64.7705 138.371 65.9811C137.519 67.2983 136.381 68.2184 134.957 68.7413ZM134.957 68.7413C138.405 88.9639 137.427 108.886 132.023 128.508C131.635 129.767 130.943 130.387 129.945 130.368L7.85478 132.445C7.09934 132.465 6.38264 131.201 5.70468 128.653C2.85726 116.131 2.17446 99.0703 3.65628 77.4725C3.68534 77.1916 3.72408 76.9107 3.7725 76.6299C1.61272 76.4555 0.774958 74.9592 1.25921 72.1408C1.88875 69.6324 1.67083 67.9762 0.605469 67.1724C2.23257 66.8818 3.23014 65.0223 3.59817 61.5937C2.61997 60.0732 2.15509 57.5357 2.20351 53.9812C3.66597 54.2718 5.63689 53.6907 8.11628 52.2379C6.95406 51.2888 6.33422 49.5406 6.25674 46.9934C9.60779 47.1581 12.8184 45.2598 15.8886 41.2986C16.5859 40.4172 17.2736 39.4293 17.9515 38.3349C23.7916 28.8629 28.8376 22.708 33.0894 19.8703C37.3121 17.0422 40.3532 14.5338 42.2127 12.3449C44.0723 10.1561 46.4015 8.27232 49.2005 6.69365C49.8107 6.01569 50.4402 5.36195 51.0891 4.73241C54.7114 1.0327 58.3966 0.814784 62.1447 4.07867C70.4352 4.19489 75.8298 3.77843 78.3285 2.82929M62.1447 4.07867C63.3553 5.26994 63.6798 6.27719 63.1181 7.10043C54.0528 5.64766 46.3531 10.4079 40.0191 21.3811C39.9222 21.5555 39.8205 21.7395 39.714 21.9332M47.4863 84.2133L57.4377 82.746L71.3698 79.4773C75.0114 78.7412 78.4351 78.2134 81.6408 77.8938C90.832 76.9931 98.2024 77.8696 103.752 80.5233C104.769 81.0075 105.728 81.5548 106.628 82.1649C110.967 85.7097 111.418 92.2229 107.98 101.705C107.273 104.068 106.076 106.208 104.391 108.126C100.168 112.91 92.8901 116.237 82.5561 118.106C79.515 118.649 76.1978 119.075 72.6046 119.385C62.9098 119.83 54.5467 118.639 47.5153 115.811C43.9996 114.397 40.8278 112.576 37.9997 110.349C31.8787 105.564 28.4405 100.736 27.6851 95.8645C27.0071 89.4239 30.2904 86.0244 37.5348 85.6661L47.4863 84.2133ZM47.4863 84.2133L47.5153 115.811M15.8886 41.2986C9.68043 51.4292 5.64173 63.2063 3.7725 76.6299M81.6408 77.8938L82.5561 118.106M49.2005 6.69365C45.3071 10.9551 42.2466 15.8509 40.0191 21.3811M103.752 80.5233L104.391 108.126M60.1835 42.054C59.9898 43.5649 59.5491 44.8191 58.8614 45.8167C58.2513 46.7949 57.5975 47.2452 56.9002 47.1678C56.2223 47.0709 55.7089 46.4607 55.3603 45.3373C55.0697 44.1944 55.0213 42.8627 55.215 41.3422C55.4281 39.8119 55.8397 38.5577 56.4499 37.5795C57.0891 36.5625 57.7477 36.1025 58.4256 36.1994C59.1229 36.2962 59.6314 36.9161 59.951 38.0589C60.3191 39.1921 60.3965 40.5238 60.1835 42.054ZM69.8734 46.8336C68.8081 53.3323 66.3384 58.6301 62.4643 62.7269C58.6096 66.8334 54.4789 68.5234 50.0722 67.797C45.6558 67.09 42.2563 64.1748 39.8738 59.0514C37.4912 53.9473 36.8327 48.1411 37.898 41.6327C38.9634 35.1146 41.4282 29.8023 45.2926 25.6958C49.157 21.6281 53.2925 19.9477 57.6992 20.6547C62.1156 21.3811 65.5054 24.2867 67.8686 29.3713C70.2705 34.4948 70.9388 40.3155 69.8734 46.8336ZM83.0646 40.979C83.2195 42.1896 83.1856 43.2211 82.9629 44.0734C82.7401 44.9934 82.3963 45.468 81.9314 45.4971C81.4568 45.5649 81.0113 45.1871 80.5949 44.3639C80.1978 43.5794 79.9169 42.5915 79.7522 41.4003C79.6263 40.1896 79.6651 39.1436 79.8685 38.2623C80.1009 37.41 80.4496 36.95 80.9145 36.8822C81.3793 36.8337 81.82 37.2018 82.2365 37.9863C82.6433 38.7804 82.9193 39.778 83.0646 40.979ZM98.8997 42.3881C99.7036 48.1508 99.0837 53.2306 97.0402 57.6277C95.045 62.0247 92.2121 64.4218 88.5415 64.8189C84.8708 65.2547 81.452 63.5646 78.285 59.7487C75.1373 55.9812 73.1615 51.2016 72.3577 45.4099C71.5538 39.6085 72.1591 34.5093 74.1736 30.1123C76.2172 25.754 79.0646 23.3569 82.7159 22.9211C86.3769 22.5143 89.786 24.2043 92.9434 27.9912C96.1298 31.7781 98.1152 36.5771 98.8997 42.3881Z" stroke="black" stroke-width="0.87166" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
|
||||
<svg width="33" height="53" viewBox="0 0 33 53" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.0133 0.670076C12.0873 11.9725 9.40142 12.9708 -3.98258 9.58949C7.31986 17.5155 8.31817 20.2013 4.93684 33.5854C12.8629 22.2829 15.5486 21.2846 28.9327 24.666C17.6303 16.7399 16.6319 14.0541 20.0133 0.670076ZM27.2696 32.0069C22.2291 39.1949 20.5208 39.8298 12.0092 37.6793C19.197 42.7199 19.832 44.4282 17.6816 52.9398C22.722 45.7519 24.4304 45.1169 32.9419 47.2673C25.754 42.2268 25.1192 40.5187 27.2696 32.0069Z" fill="white" fill-opacity="0.7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 565 B |
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" fill="#EDF8F1"/>
|
||||
<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" stroke="#49B76E" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 285 B |
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" fill="#D14B62" fill-opacity="0.1"/>
|
||||
<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" stroke="#D14B62" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 304 B |
|
|
@ -1,3 +1,4 @@
|
|||
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="119" height="119" rx="7.5" fill="#E6FDFE" stroke="#60C6CB"/>
|
||||
|
||||
<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="1.03516" y="1.51172" width="118" height="118" rx="9" stroke="#60C6CB" stroke-width="2"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 197 B After Width: | Height: | Size: 206 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.46484 7.19141L7.46484 1.19141L13.4648 7.19141" stroke="#0348A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 243 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.1604 0.568359L10.9927 8.73414L2.82691 0.568359L0.10498 3.29029L8.27076 11.4561L0.10498 19.6218L2.82691 22.3438L10.9927 14.178L19.1604 22.3438L21.8823 19.6218L13.7165 11.4561L21.8823 3.29029L19.1604 0.568359Z" fill="#0348A8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 342 B |
|
|
@ -0,0 +1,5 @@
|
|||
|
||||
<svg width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="20" cy="20.5586" r="20" fill="#73BFE1"/>
|
||||
<path d="M23.75 18.6465C23.75 18.9449 23.6315 19.231 23.4205 19.442C23.2095 19.653 22.9234 19.7715 22.625 19.7715C22.3266 19.7715 22.0405 19.653 21.8295 19.442C21.6185 19.231 21.5 18.9449 21.5 18.6465C21.5 18.3481 21.6185 18.062 21.8295 17.851C22.0405 17.64 22.3266 17.5215 22.625 17.5215C22.9234 17.5215 23.2095 17.64 23.4205 17.851C23.6315 18.062 23.75 18.3481 23.75 18.6465ZM29.75 14.5215V26.5215V28.0215C29.75 28.4193 29.592 28.8008 29.3107 29.0821C29.0294 29.3634 28.6478 29.5215 28.25 29.5215H11.75C11.3522 29.5215 10.9706 29.3634 10.6893 29.0821C10.408 28.8008 10.25 28.4193 10.25 28.0215V25.0215V14.5215C10.25 14.1237 10.408 13.7421 10.6893 13.4608C10.9706 13.1795 11.3522 13.0215 11.75 13.0215H28.25C28.6478 13.0215 29.0294 13.1795 29.3107 13.4608C29.592 13.7421 29.75 14.1237 29.75 14.5215ZM28.25 24.7121V14.5215H11.75V23.2121L15.1906 19.7715C15.473 19.4932 15.8536 19.3373 16.25 19.3373C16.6464 19.3373 17.027 19.4932 17.3094 19.7715L21.5 23.9621L23.4406 22.0215C23.723 21.7432 24.1036 21.5873 24.5 21.5873C24.8964 21.5873 25.277 21.7432 25.5594 22.0215L28.25 24.7121Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.68115 13.4375L1.68115 7.4375L7.68115 1.4375" stroke="#0348A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 241 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.09814 13.4375L7.09814 7.4375L1.09814 1.4375" stroke="#0348A8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 241 B |
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="148" height="41" viewBox="0 0 148 41" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M86.1816 0V39.6748H97.6575V27.3315H98.0989L103.837 40.5564L115.754 37.9114L106.926 22.0415L113.989 9.25744L102.954 6.61246L97.6575 18.1843V0H86.1816Z" fill="#FDE40D"/>
|
||||
<path d="M0.171817 33.3876V16.8932H4.74643V33.3876H0.171817ZM2.46986 14.767C1.78976 14.767 1.2063 14.5415 0.719482 14.0905C0.239827 13.6323 0 13.0846 0 12.4475C0 11.8175 0.239827 11.277 0.719482 10.8259C1.2063 10.3678 1.78976 10.1387 2.46986 10.1387C3.14997 10.1387 3.72985 10.3678 4.20951 10.8259C4.69632 11.277 4.93973 11.8175 4.93973 12.4475C4.93973 13.0846 4.69632 13.6323 4.20951 14.0905C3.72985 14.5415 3.14997 14.767 2.46986 14.767Z" fill="#004AAD"/>
|
||||
<path d="M12.9856 23.8518V33.3876H8.41096V16.8932H12.7708V19.8034H12.9641C13.3292 18.844 13.9413 18.0852 14.8004 17.5268C15.6595 16.9612 16.7011 16.6784 17.9253 16.6784C19.0707 16.6784 20.0694 16.929 20.9214 17.4301C21.7733 17.9313 22.4355 18.6472 22.908 19.5778C23.3805 20.5014 23.6167 21.6038 23.6167 22.8853V33.3876H19.0421V23.7014C19.0493 22.692 18.7915 21.9045 18.2689 21.339C17.7463 20.7662 17.0268 20.4799 16.1105 20.4799C15.4948 20.4799 14.9507 20.6123 14.4782 20.8772C14.0129 21.1421 13.6478 21.5287 13.3829 22.037C13.1252 22.5381 12.9927 23.143 12.9856 23.8518Z" fill="#004AAD"/>
|
||||
<path d="M35.9956 16.8932V20.3295H26.0624V16.8932H35.9956ZM28.3175 12.9414H32.8921V28.319C32.8921 28.7414 32.9566 29.0707 33.0854 29.307C33.2143 29.536 33.3933 29.6971 33.6224 29.7902C33.8586 29.8833 34.1307 29.9298 34.4385 29.9298C34.6533 29.9298 34.868 29.9119 35.0828 29.8761C35.2976 29.8331 35.4622 29.8009 35.5768 29.7795L36.2963 33.1836C36.0672 33.2552 35.745 33.3375 35.3298 33.4306C34.9146 33.5308 34.4099 33.5916 33.8157 33.6131C32.7132 33.6561 31.7467 33.5093 30.9163 33.1728C30.093 32.8364 29.4522 32.3138 28.9941 31.605C28.5359 30.8963 28.3104 30.0014 28.3175 28.9204V12.9414Z" fill="#004AAD"/>
|
||||
<path d="M46.3153 33.7098C44.6186 33.7098 43.1582 33.3661 41.934 32.6789C40.717 31.9844 39.7791 31.0037 39.1205 29.7365C38.4619 28.4622 38.1325 26.9552 38.1325 25.2156C38.1325 23.5189 38.4619 22.0298 39.1205 20.7483C39.7791 19.4669 40.7062 18.4682 41.9018 17.7523C43.1045 17.0364 44.5148 16.6784 46.1328 16.6784C47.2209 16.6784 48.2339 16.8538 49.1718 17.2046C50.1168 17.5483 50.94 18.0673 51.6416 18.7617C52.3504 19.4561 52.9016 20.3295 53.2954 21.3819C53.6891 22.4271 53.886 23.6513 53.886 25.0545V26.3109H39.9581V23.4759H49.5798C49.5798 22.8173 49.4366 22.2338 49.1503 21.7256C48.8639 21.2173 48.4666 20.8199 47.9583 20.5336C47.4572 20.2401 46.8737 20.0933 46.2079 20.0933C45.5135 20.0933 44.8978 20.2544 44.3609 20.5765C43.8311 20.8915 43.4159 21.3175 43.1152 21.8544C42.8145 22.3842 42.6606 22.9748 42.6535 23.6263V26.3216C42.6535 27.1378 42.8038 27.8429 43.1045 28.4371C43.4123 29.0313 43.8455 29.4895 44.4039 29.8117C44.9623 30.1338 45.6245 30.2949 46.3905 30.2949C46.8988 30.2949 47.3641 30.2233 47.7865 30.0801C48.2089 29.937 48.5704 29.7222 48.8711 29.4358C49.1718 29.1495 49.4009 28.7987 49.5584 28.3834L53.7893 28.6626C53.5746 29.6792 53.1343 30.5669 52.4685 31.3258C51.8099 32.0775 50.9579 32.6645 49.9127 33.0869C48.8747 33.5021 47.6755 33.7098 46.3153 33.7098Z" fill="#004AAD"/>
|
||||
<path d="M56.8713 33.3876V16.8932H61.3063V19.7711H61.4781C61.7788 18.7474 62.2835 17.9742 62.9923 17.4516C63.701 16.9218 64.5171 16.657 65.4407 16.657C65.6697 16.657 65.9167 16.6713 66.1816 16.6999C66.4465 16.7286 66.6792 16.7679 66.8796 16.818V20.8772C66.6648 20.8128 66.3677 20.7555 65.9883 20.7054C65.6089 20.6553 65.2617 20.6302 64.9467 20.6302C64.2737 20.6302 63.6724 20.777 63.1426 21.0705C62.62 21.3569 62.2048 21.7578 61.8969 22.2732C61.5963 22.7887 61.4459 23.3829 61.4459 24.0558V33.3876H56.8713Z" fill="#004AAD"/>
|
||||
<path d="M73.4758 33.699C72.4234 33.699 71.4855 33.5165 70.6623 33.1514C69.839 32.7791 69.1875 32.2314 68.7078 31.5084C68.2354 30.7781 67.9991 29.8689 67.9991 28.7808C67.9991 27.8644 68.1673 27.0948 68.5038 26.472C68.8403 25.8492 69.2985 25.348 69.8783 24.9686C70.4582 24.5892 71.1169 24.3028 71.8542 24.1095C72.5988 23.9162 73.3791 23.7802 74.1952 23.7014C75.1545 23.6012 75.9277 23.5082 76.5148 23.4222C77.1018 23.3292 77.5278 23.1932 77.7927 23.0142C78.0575 22.8352 78.19 22.5703 78.19 22.2195V22.1551C78.19 21.475 77.9752 20.9488 77.5457 20.5765C77.1233 20.2043 76.5219 20.0181 75.7416 20.0181C74.9183 20.0181 74.2633 20.2007 73.7764 20.5658C73.2896 20.9237 72.9675 21.3748 72.81 21.9188L68.579 21.5752C68.7938 20.573 69.2161 19.7067 69.8461 18.9765C70.4761 18.2391 71.2887 17.6735 72.2838 17.2798C73.286 16.8789 74.4458 16.6784 75.7631 16.6784C76.6794 16.6784 77.5564 16.7858 78.394 17.0006C79.2388 17.2154 79.9869 17.5483 80.6384 17.9993C81.297 18.4503 81.816 19.0302 82.1955 19.7389C82.5749 20.4405 82.7646 21.2817 82.7646 22.2625V33.3876H78.4262V31.1003H78.2974C78.0325 31.6157 77.6781 32.0703 77.2342 32.4641C76.7904 32.8507 76.257 33.1549 75.6342 33.3769C75.0114 33.5916 74.2919 33.699 73.4758 33.699ZM74.7859 30.5419C75.4588 30.5419 76.053 30.4095 76.5685 30.1446C77.0839 29.8725 77.4884 29.5074 77.7819 29.0492C78.0754 28.5911 78.2222 28.072 78.2222 27.4921V25.7418C78.079 25.8348 77.8821 25.9207 77.6316 25.9995C77.3882 26.0711 77.1125 26.1391 76.8047 26.2035C76.4969 26.2608 76.189 26.3145 75.8812 26.3646C75.5734 26.4076 75.2942 26.4469 75.0436 26.4827C74.5067 26.5615 74.0377 26.6868 73.6368 26.8586C73.2359 27.0304 72.9245 27.2631 72.7026 27.5566C72.4807 27.8429 72.3697 28.2009 72.3697 28.6304C72.3697 29.2533 72.5952 29.7293 73.0462 30.0587C73.5044 30.3808 74.0843 30.5419 74.7859 30.5419Z" fill="#004AAD"/>
|
||||
<path d="M127.069 14.6403V18.5547H115.754V14.6403H127.069ZM118.323 10.1387H123.534V27.6558C123.534 28.137 123.607 28.5121 123.754 28.7812C123.901 29.0422 124.105 29.2257 124.366 29.3317C124.635 29.4377 124.945 29.4907 125.295 29.4907C125.54 29.4907 125.785 29.4703 126.029 29.4295C126.274 29.3806 126.462 29.3439 126.592 29.3194L127.412 33.1972C127.151 33.2787 126.784 33.3725 126.311 33.4785C125.838 33.5927 125.263 33.662 124.586 33.6865C123.33 33.7354 122.229 33.5682 121.283 33.185C120.345 32.8017 119.615 32.2063 119.093 31.399C118.571 30.5916 118.315 29.5722 118.323 28.3408V10.1387Z" fill="#004AAD"/>
|
||||
<path d="M138.751 33.7966C136.851 33.7966 135.208 33.3929 133.822 32.5856C132.443 31.77 131.379 30.6365 130.629 29.1849C129.879 27.7251 129.503 26.0329 129.503 24.1083C129.503 22.1674 129.879 20.4712 130.629 19.0196C131.379 17.5598 132.443 16.4262 133.822 15.6189C135.208 14.8034 136.851 14.3956 138.751 14.3956C140.651 14.3956 142.291 14.8034 143.669 15.6189C145.055 16.4262 146.123 17.5598 146.874 19.0196C147.624 20.4712 147.999 22.1674 147.999 24.1083C147.999 26.0329 147.624 27.7251 146.874 29.1849C146.123 30.6365 145.055 31.77 143.669 32.5856C142.291 33.3929 140.651 33.7966 138.751 33.7966ZM138.776 29.7598C139.64 29.7598 140.362 29.5152 140.941 29.0259C141.52 28.5284 141.956 27.8515 142.25 26.9952C142.552 26.139 142.702 25.1644 142.702 24.0716C142.702 22.9789 142.552 22.0043 142.25 21.148C141.956 20.2918 141.52 19.6149 140.941 19.1174C140.362 18.62 139.64 18.3712 138.776 18.3712C137.903 18.3712 137.169 18.62 136.574 19.1174C135.987 19.6149 135.542 20.2918 135.24 21.148C134.947 22.0043 134.8 22.9789 134.8 24.0716C134.8 25.1644 134.947 26.139 135.24 26.9952C135.542 27.8515 135.987 28.5284 136.574 29.0259C137.169 29.5152 137.903 29.7598 138.776 29.7598Z" fill="#004AAD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.2 KiB |
|
|
@ -0,0 +1,274 @@
|
|||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userId');
|
||||
let gameId;
|
||||
let submitNotic;
|
||||
|
||||
console.log(userId);
|
||||
let startTime = Date.now();
|
||||
|
||||
|
||||
const url = window.location.href;
|
||||
const gameName = url.split('/');
|
||||
const gameType = gameName[3].split('?id=');
|
||||
let gameVersion;
|
||||
if(gameType[0] == "guided-tracing"){
|
||||
gameVersion = gameType[0].split('?')[0];
|
||||
gameId = gameName[4];
|
||||
console.log('Type - 1');
|
||||
|
||||
} else if(gameName.length == 4){
|
||||
gameVersion = gameName[3].split('?')[0];
|
||||
gameId = urlParams.get('id');
|
||||
}
|
||||
else if(gameName.length == 5){
|
||||
gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
|
||||
gameId = urlParams.get('id');
|
||||
console.log('Type - 2');
|
||||
}else if(gameName.length == 6){
|
||||
gameVersion = gameType[0] + '-' + gameName[4];
|
||||
gameId = urlParams.get('id');
|
||||
console.log('Type - 3');
|
||||
}
|
||||
// console.log("Here is game name ", gameType[0])
|
||||
|
||||
// console.log(gameVersion)
|
||||
let imageCode;
|
||||
let gameScore;
|
||||
|
||||
// if(scoreTotal){
|
||||
// gameScore = scoreTotal;
|
||||
// }else{
|
||||
// gameScore = 0;
|
||||
// }
|
||||
|
||||
|
||||
function submitUserData(drawingZone) {
|
||||
submitButton.setVisible(false);
|
||||
snapshotButton.setVisible(false);
|
||||
customCursor.setVisible(false);
|
||||
muteIcon.setVisible(false);
|
||||
retryButton.setVisible(false);
|
||||
galleryButton.setVisible(false);
|
||||
const endTime = Date.now();
|
||||
const timeDifference = endTime - startTime;
|
||||
const timeDifferenceInSeconds = timeDifference / 1000;
|
||||
// console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
|
||||
|
||||
|
||||
// console.log('This is from main point', scoreTotal);
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
submitButton.setVisible(true);
|
||||
snapshotButton.setVisible(true);
|
||||
customCursor.setVisible(true);
|
||||
muteIcon.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
galleryButton.setVisible(true);
|
||||
if(gameType[0] == 'drawing'){
|
||||
// submitButton.setVisible(true);
|
||||
// snapshotButton.setVisible(true);
|
||||
// customCursor.setVisible(true);
|
||||
// galleryButton.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
document.body.appendChild(image);
|
||||
// Download the snapshot as an image
|
||||
// const link = document.createElement('a');
|
||||
// link.href = image.src;
|
||||
// link.download = 'my_drawing.png';
|
||||
// link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
}else if( gameType[0] == "guided-tracing"){
|
||||
// submitButton.setVisible(true);
|
||||
// snapshotButton.setVisible(true);
|
||||
// customCursor.setVisible(true);
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
document.body.appendChild(image);
|
||||
// Download the snapshot as an image
|
||||
// const link = document.createElement('a');
|
||||
// link.href = image.src;
|
||||
// link.download = `guided-tracing-${gameId}.png`;
|
||||
// link.click();
|
||||
document.body.removeChild(image);
|
||||
imageCode = image.src;
|
||||
}
|
||||
|
||||
|
||||
let userData = {
|
||||
'gameName': gameVersion,
|
||||
'gameID': gameId,
|
||||
'screenShot': imageCode,
|
||||
'userId' : userId,
|
||||
'gameTime' : timeDifferenceInSeconds
|
||||
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
console.log(response.status, " Data Saved Succesfully");
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
|
||||
// Clear the drawing
|
||||
// graphics.clear();
|
||||
});
|
||||
};
|
||||
|
||||
function calculateFromAI(){
|
||||
let progress = 0;
|
||||
let starValue = 4;
|
||||
let maxStarValue = 5;
|
||||
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
progressIncrement();
|
||||
function addStarScalingStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
transform: scale(0); /* Initial state before animation */
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
addStarScalingStyles();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
loadingMainContainer.style.display = 'flex';
|
||||
|
||||
const loadingDiv = document.getElementById('loadingState');
|
||||
loadingDiv.style.display = 'flex';
|
||||
|
||||
const containerDiv = document.createElement('div');
|
||||
containerDiv.classList.add('w-full');
|
||||
containerDiv.style.display = 'flex';
|
||||
containerDiv.style.flexDirection = 'column';
|
||||
containerDiv.style.justifyContent = 'center';
|
||||
containerDiv.style.alignItems = 'center';
|
||||
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'HOLD ON.';
|
||||
paragraph.style.fontSize = '16px';
|
||||
paragraph.style.fontWeight = '600';
|
||||
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(paragraph);
|
||||
|
||||
const progressBarContainer = document.createElement('div');
|
||||
progressBarContainer.style.position = 'relative';
|
||||
progressBarContainer.style.display = 'flex';
|
||||
progressBarContainer.style.alignItems = 'center';
|
||||
progressBarContainer.style.border = '1px solid #AFB8E6';
|
||||
progressBarContainer.style.height = '10px';
|
||||
progressBarContainer.style.width = '100%';
|
||||
progressBarContainer.style.marginTop = '30px';
|
||||
progressBarContainer.style.marginBottom = '30px';
|
||||
containerDiv.appendChild(progressBarContainer);
|
||||
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.style.height = '10px';
|
||||
progressBar.style.backgroundColor = '#D7DCF2';
|
||||
progressBar.style.width = '0%';
|
||||
progressBarContainer.appendChild(progressBar);
|
||||
|
||||
loadingDiv.appendChild(containerDiv);
|
||||
|
||||
const calculationText = document.createElement('p');
|
||||
calculationText.textContent = 'Your stars are being calculated...';
|
||||
calculationText.style.fontSize = '14px';
|
||||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
let userData = {
|
||||
'name' : 'Worksheet Name Here'
|
||||
};
|
||||
console.log(userData);
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/test`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
function retryGame(){
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const userId = urlParams.get('userId');
|
||||
|
|
@ -13,14 +17,19 @@ const gameName = url.split('/');
|
|||
const gameType = gameName[3].split('?id=');
|
||||
let gameVersion;
|
||||
|
||||
console.log("Here is game name ", gameName)
|
||||
// console.log("Here is game name ", gameType[0])
|
||||
|
||||
if(gameType[0] == "guided-tracing"){
|
||||
gameVersion = gameType[0].split('?')[0];
|
||||
gameId = gameName[4];
|
||||
console.log('Type - 1');
|
||||
} else if(gameName.length == 5){
|
||||
gameVersion = gameName[3];
|
||||
|
||||
} else if(gameName.length == 4){
|
||||
gameVersion = gameName[3].split('?')[0];
|
||||
gameId = urlParams.get('id');
|
||||
}
|
||||
else if(gameName.length == 5){
|
||||
gameVersion = gameName[3] + '-' + gameName[4].split('?')[0];
|
||||
gameId = urlParams.get('id');
|
||||
console.log('Type - 2');
|
||||
}else if(gameName.length == 6){
|
||||
|
|
@ -29,7 +38,7 @@ if(gameType[0] == "guided-tracing"){
|
|||
console.log('Type - 3');
|
||||
}
|
||||
|
||||
// console.log(gameType[0])
|
||||
console.log(gameVersion)
|
||||
|
||||
function submitUserData(drawingZone) {
|
||||
const endTime = Date.now();
|
||||
|
|
@ -86,6 +95,93 @@ function submitUserData(drawingZone) {
|
|||
} else{
|
||||
starValue = 3;
|
||||
}
|
||||
let maxStarValue = 5;
|
||||
|
||||
let progress = 0;
|
||||
|
||||
function progressIncrement() {
|
||||
const interval = setInterval(() => {
|
||||
if (progress >= 100) {
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
progress += 10;
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
progressIncrement();
|
||||
function addStarScalingStyles() {
|
||||
const style = document.createElement('style');
|
||||
style.innerHTML = `
|
||||
@keyframes scaleUp {
|
||||
0% {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.star {
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
transform: scale(0); /* Initial state before animation */
|
||||
opacity: 0; /* Initial opacity */
|
||||
animation: scaleUp 0.5s ease forwards;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
addStarScalingStyles();
|
||||
const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
|
||||
|
||||
const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
|
||||
const starContainer = document.getElementById('star-container');
|
||||
let scoreBoard = document.getElementById('scoreBoard');
|
||||
let loadingMainContainer = document.getElementById('loadingMainContainer');
|
||||
loadingMainContainer.style.display = 'flex';
|
||||
|
||||
const loadingDiv = document.getElementById('loadingState');
|
||||
loadingDiv.style.display = 'flex';
|
||||
|
||||
const containerDiv = document.createElement('div');
|
||||
containerDiv.classList.add('w-full');
|
||||
containerDiv.style.display = 'flex';
|
||||
containerDiv.style.flexDirection = 'column';
|
||||
containerDiv.style.justifyContent = 'center';
|
||||
containerDiv.style.alignItems = 'center';
|
||||
|
||||
const paragraph = document.createElement('p');
|
||||
paragraph.textContent = 'HOLD ON.';
|
||||
paragraph.style.fontSize = '16px';
|
||||
paragraph.style.fontWeight = '600';
|
||||
paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(paragraph);
|
||||
|
||||
const progressBarContainer = document.createElement('div');
|
||||
progressBarContainer.style.position = 'relative';
|
||||
progressBarContainer.style.display = 'flex';
|
||||
progressBarContainer.style.alignItems = 'center';
|
||||
progressBarContainer.style.border = '1px solid #AFB8E6';
|
||||
progressBarContainer.style.height = '10px';
|
||||
progressBarContainer.style.width = '100%';
|
||||
progressBarContainer.style.marginTop = '30px';
|
||||
progressBarContainer.style.marginBottom = '30px';
|
||||
containerDiv.appendChild(progressBarContainer);
|
||||
|
||||
const progressBar = document.createElement('div');
|
||||
progressBar.style.height = '10px';
|
||||
progressBar.style.backgroundColor = '#D7DCF2';
|
||||
progressBar.style.width = '0%';
|
||||
progressBarContainer.appendChild(progressBar);
|
||||
|
||||
loadingDiv.appendChild(containerDiv);
|
||||
|
||||
const calculationText = document.createElement('p');
|
||||
calculationText.textContent = 'Your stars are being calculated...';
|
||||
calculationText.style.fontSize = '14px';
|
||||
calculationText.style.fontWeight = '600';
|
||||
calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
|
||||
containerDiv.appendChild(calculationText);
|
||||
|
||||
let userData = {
|
||||
'gameName': gameVersion,
|
||||
|
|
@ -95,31 +191,49 @@ function submitUserData(drawingZone) {
|
|||
'gameTime' : timeDifferenceInSeconds,
|
||||
'score' : scoreTotal,
|
||||
'star' : starValue
|
||||
// 'starts': formattedDateTime,
|
||||
// 'game_start' : gameStartTime,
|
||||
};
|
||||
console.log(userData);
|
||||
|
||||
fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type' : 'application/json'
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(userData)
|
||||
})
|
||||
.then(response => {
|
||||
if(response.ok){
|
||||
console.log('Data Saved', response.status)
|
||||
if(response.status == 200){
|
||||
submitNotic.setVisible(true);
|
||||
setTimeout(() => {
|
||||
if (response.ok) {
|
||||
if (response.status == 200) {
|
||||
loadingMainContainer.style.display = 'none';
|
||||
loadingDiv.style.display = 'none';
|
||||
starContainer.style.display = 'flex';
|
||||
starContainer.style.flexDirection = 'row';
|
||||
document.getElementById('countStar').innerHTML = starValue;
|
||||
for (let i = 0; i < starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = starSVG;
|
||||
starDiv.classList.add('star');
|
||||
starContainer.appendChild(starDiv);
|
||||
setTimeout(() => {
|
||||
starDiv.style.opacity = '1';
|
||||
starDiv.style.animationDelay = `${i * 0.5}s`;
|
||||
}, i * 500);
|
||||
}
|
||||
for (let i = 0; i < maxStarValue - starValue; i++) {
|
||||
const starDiv = document.createElement('div');
|
||||
starDiv.innerHTML = blankStar;
|
||||
starContainer.appendChild(starDiv);
|
||||
}
|
||||
scoreBoard.style.display = 'flex';
|
||||
}
|
||||
} else{
|
||||
// console.log('Something Wrong', response)
|
||||
} else {
|
||||
console.log('Something went wrong', response);
|
||||
}
|
||||
}, 100);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('An error occured', error)
|
||||
});
|
||||
console.error('An error occurred', error);
|
||||
});
|
||||
|
||||
// Clear the drawing
|
||||
// graphics.clear();
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
<div class="shadow-md">
|
||||
<div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
|
||||
<div>
|
||||
<img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
|
||||
<img src="/assets/top_logo.svg" alt="" draggable="false" class="select-none">
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1 pb-2">
|
||||
<button><img src="/assets/svg/mute.svg" alt=""></button>
|
||||
|
|
|
|||
|
|
@ -4,53 +4,37 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -256,7 +240,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
|
|
@ -445,6 +429,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
|
||||
|
||||
|
|
@ -603,11 +588,11 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log("Score Total", scoreTotal)
|
||||
}
|
||||
if(counter === 8){
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
// resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
// resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -621,69 +606,35 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* Animation styles */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%); /* Start below the viewport */
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0); /* End at its original position */
|
||||
}
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%); /* Initially off-screen to the right */
|
||||
opacity: 0; /* Initially hidden */
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,49 +1,34 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
|
||||
let starNumberOfTime = localStorage.getItem('starValue');
|
||||
console.log(starNumberOfTime);
|
||||
const numberOfTimes = starNumberOfTime;
|
||||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
|
||||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button onclick="" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
|
|
@ -51,6 +36,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -276,12 +265,14 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.image("border", '/assets/svg/border.svg');
|
||||
this.load.image("borderCorrect", '/assets/svg/border-correct.svg');
|
||||
this.load.image("borderWrong", '/assets/svg/border-wrong.svg');
|
||||
this.load.spritesheet("target1", assetsList.right_image1,{
|
||||
frameWidth: 100,
|
||||
frameHeight: 100,
|
||||
|
|
@ -459,28 +450,54 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
|
||||
|
||||
});
|
||||
|
||||
let counter = 0;
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
if (match !== undefined) {
|
||||
scoreTotal++;
|
||||
counter++;
|
||||
return 'borderCorrect';
|
||||
} else {
|
||||
console.log(`Score Total: ${scoreTotal}`);
|
||||
return 'borderWrong';
|
||||
}
|
||||
};
|
||||
|
||||
// Create target zones and their borders
|
||||
targetZones.forEach((targetZone) => {
|
||||
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
|
||||
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.5).setScale(1);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, 'border');
|
||||
|
||||
blocks.forEach((block, index) => {
|
||||
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
});
|
||||
|
||||
// Add interactive blocks and handle drag events
|
||||
blocks.forEach((block) => {
|
||||
const newBlock = this.add
|
||||
.sprite(block.x, block.y, block.textureKey, 1)
|
||||
.setOrigin(0, 0)
|
||||
.setInteractive({ draggable: true });
|
||||
|
||||
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
|
||||
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
newBlock.setScale(1.3);
|
||||
newBlock.x = dragX;
|
||||
newBlock.y = dragY;
|
||||
});
|
||||
|
||||
newBlock.on("dragend", () => {
|
||||
newBlock.setScale(1.0);
|
||||
let droppedOnTargetZone = false;
|
||||
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
|
|
@ -493,77 +510,39 @@ import Layout from '../../layouts/Layout.astro';
|
|||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
// console.log(isMatch(newBlock.texture.key, targetZone.name))
|
||||
|
||||
// if(isMatch(newBlock.texture.key, targetZone.name)){
|
||||
// score++;
|
||||
// // console.log(score);
|
||||
// if(score === 4){
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
// let finalDom;
|
||||
// }
|
||||
// console.log(score)
|
||||
// if(score >= 2){
|
||||
// console.log("Win")
|
||||
// } else{
|
||||
// console.log("Loose")
|
||||
// }
|
||||
// }
|
||||
//counter++; // Increment the counter when a match is found
|
||||
|
||||
// Check if the block matches the target and update the specific border
|
||||
const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
|
||||
targetZoneBorders[targetIndex].setTexture(borderCondition); // Update only the matched border
|
||||
|
||||
if (counter === 4) {
|
||||
submitButton.setVisible(true); // Show submit button if required counter reached
|
||||
}
|
||||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
targetZoneBorders[targetIndex].setVisible(true); // Make the border visible
|
||||
targetZoneBorders[targetIndex].setAlpha(1); // Set border to fully visible
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!droppedOnTargetZone) {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
newBlock.setPosition(block.x, block.y); // Reset position if not dropped on any target zone
|
||||
}
|
||||
if (droppedBlocks.length === targetZones.length)
|
||||
{
|
||||
displayResult(droppedBlocks);
|
||||
|
||||
if (droppedBlocks.length === targetZones.length) {
|
||||
displayResult(droppedBlocks); // Display results when all blocks are dropped
|
||||
}
|
||||
});
|
||||
});
|
||||
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
|
||||
// font: '600 30px Quicksand',
|
||||
// fill: '#fff',
|
||||
// backgroundColor: 'blue',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// })
|
||||
});
|
||||
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
})
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
// console.log("Score Total", scoreTotal)
|
||||
// resultView.setVisible(false);
|
||||
}
|
||||
if(counter === 4){
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
|
||||
// const footerBorder = this.add.graphics();
|
||||
// const footerX = 0; const footerY = window.innerHeight / 1.07;
|
||||
// const footerLineWidth = window.innerWidth;
|
||||
|
|
@ -615,64 +594,30 @@ import Layout from '../../layouts/Layout.astro';
|
|||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
/* Animation styles */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%); /* Start below the viewport */
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0); /* End at its original position */
|
||||
}
|
||||
}
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%); /* Initially off-screen to the right */
|
||||
opacity: 0; /* Initially hidden */
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
|
||||
}
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,53 +4,38 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -259,10 +244,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
|
|
@ -425,6 +410,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
|
||||
const blocks = [
|
||||
|
|
@ -545,12 +531,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log("Score Total", scoreTotal)
|
||||
}
|
||||
if(counter === 4){
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -586,64 +568,18 @@ import Layout from '../../layouts/Layout.astro';
|
|||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
.clip-art-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -305,7 +305,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
// this.load.image("bg", '/assets/bgwhite.jpg');
|
||||
|
|
|
|||
|
|
@ -228,7 +228,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
|
|
|
|||
|
|
@ -237,7 +237,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
|
|
|
|||
|
|
@ -4,53 +4,38 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -259,10 +244,10 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
|
|
@ -424,6 +409,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
|
||||
const blocks = [
|
||||
|
|
@ -535,7 +521,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
console.log(counter)
|
||||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
|
|
@ -544,30 +530,13 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// console.log("Score Total", scoreTotal)
|
||||
}
|
||||
if(counter === 4){
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
|
||||
// font: '900 24px quicksand',
|
||||
// fill: '#05b3a4',
|
||||
// backgroundColor: '#7c4c23',
|
||||
// padding: { x: 20, y: 10 },
|
||||
// borderRadius: '15px', // Border radius
|
||||
// shadow: {
|
||||
// offsetX: 2, // X offset for the shadow
|
||||
// offsetY: 2, // Y offset for the shadow
|
||||
// color: '#000', // Shadow color
|
||||
// blur: 5, // Shadow blur
|
||||
// fill: true // Apply shadow to fill (background color)
|
||||
// }
|
||||
// });
|
||||
const displayResult = (droppedBlocks) => {
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
|
|
@ -585,64 +554,30 @@ import Layout from '../../layouts/Layout.astro';
|
|||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
/* Animation styles */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%); /* Start below the viewport */
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0); /* End at its original position */
|
||||
}
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%); /* Initially off-screen to the right */
|
||||
opacity: 0; /* Initially hidden */
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -232,7 +232,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
// this.load.image("bg", '/assets/bgwhite.jpg');
|
||||
// this.load.image("target1", assetsList.right_image1);
|
||||
|
|
|
|||
|
|
@ -2,55 +2,40 @@
|
|||
import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -290,12 +275,14 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.image("borderCorrect", '/assets/svg/border-correct.svg');
|
||||
this.load.image("borderWrong", '/assets/svg/border-wrong.svg');
|
||||
|
||||
// this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/svg/border.svg');
|
||||
|
|
@ -452,6 +439,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -506,6 +494,34 @@ import Layout from '../../layouts/Layout.astro';
|
|||
},
|
||||
];
|
||||
// console.log('test blocks',blocks[0])
|
||||
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
}
|
||||
//resultView scoreTotal
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if (match !== undefined) {
|
||||
scoreTotal++;
|
||||
counter++;
|
||||
return 'borderCorrect';
|
||||
} else {
|
||||
console.log(`Score Total: ${scoreTotal}`);
|
||||
return 'borderWrong';
|
||||
}
|
||||
|
||||
// if(counter === 8){
|
||||
// // console.log(counter)
|
||||
// submitButton.setVisible(true);
|
||||
// retryButton.setVisible(true);
|
||||
// }
|
||||
};
|
||||
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone, index) => {
|
||||
|
|
@ -528,7 +544,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let droppedOnTargetZone = false;
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (
|
||||
Phaser.Geom .Intersects.RectangleToRectangle(
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
)
|
||||
|
|
@ -540,6 +556,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
droppedBlocks.push(newBlock);
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
}
|
||||
const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
|
||||
targetZoneBorders[targetIndex].setTexture(borderCondition);
|
||||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
|
|
@ -564,29 +582,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
window.location.reload();
|
||||
})
|
||||
// retryButton.setVisible(false);
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
}
|
||||
//resultView scoreTotal
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if(match){
|
||||
scoreTotal++;
|
||||
// console.log(scoreTotal)
|
||||
}
|
||||
if(counter === 8){
|
||||
// console.log(counter)
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
const displayResult = (droppedBlocks) => {
|
||||
|
|
@ -598,69 +594,35 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
/* Animation styles */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%); /* Start below the viewport */
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0); /* End at its original position */
|
||||
}
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%); /* Initially off-screen to the right */
|
||||
opacity: 0; /* Initially hidden */
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -259,7 +259,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
|
|
|
|||
|
|
@ -4,53 +4,37 @@ import Layout from '../../layouts/Layout.astro';
|
|||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
<!-- <h2>{data.name}</h2> -->
|
||||
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
|
||||
</div>
|
||||
</div>
|
||||
<div id="overlap">
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="verryGood" class="displayNone ">
|
||||
<!-- <p>Congratulations!</p>
|
||||
<p>You win the Game!</p> -->
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<!-- <div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
<a href="" >
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div id="good" class="displayNone">
|
||||
<!-- <p>Oops!</p>
|
||||
<p>You Lost the Game!</p>
|
||||
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a> -->
|
||||
</div>
|
||||
<div id="lost" class="displayNone"></div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
const drawingZone = {
|
||||
|
|
@ -255,7 +239,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
// this.load.image("tick", '/assets/tick.png');
|
||||
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
|
|
@ -436,6 +420,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// window.location.reload();
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
|
||||
|
|
@ -592,10 +577,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
if(counter === 8){
|
||||
// console.log(counter)
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -609,69 +592,35 @@ import Layout from '../../layouts/Layout.astro';
|
|||
</script>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
background: #020202;
|
||||
cursor: crosshair;
|
||||
} */
|
||||
/* canvas{display:block} */
|
||||
/* h1 {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #fff;
|
||||
font-family: "Source Sans Pro";
|
||||
font-size: 5em;
|
||||
font-weight: 900;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #7c4c23;
|
||||
text-align: center;
|
||||
margin-top: 7%;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
font-family: quicksand;
|
||||
}
|
||||
#overlap .verryGood{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
height: fit-content;
|
||||
/* Animation styles */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%); /* Start below the viewport */
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0); /* End at its original position */
|
||||
}
|
||||
}
|
||||
#overlap .good{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
#overlap .lost{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
place-items: center;
|
||||
font-size: 40px;
|
||||
font-weight: bolder;
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%); /* Initially off-screen to the right */
|
||||
opacity: 0; /* Initially hidden */
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
|
||||
}
|
||||
.displayNone {
|
||||
display: none;
|
||||
}
|
||||
#result {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -228,7 +228,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
this.load.image("topMatch", "/assets/top_match.jpg");
|
||||
this.load.image("topLogo", "/assets/top_logo.jpg");
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tick", '/assets/tick.png');
|
||||
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
||||
this.load.image("border", '/assets/squar.png');
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
|
||||
let maxScore;
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
|
|
@ -134,7 +134,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
|
||||
function preload() {
|
||||
this.load.image('outline', assetsList.image);
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
let maxScore;
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
|
|
@ -134,7 +135,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
|
||||
function preload() {
|
||||
this.load.image('outline', assetsList.image);
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
|
|
|
|||
|
|
@ -3,14 +3,118 @@ import Layout from '../../layouts/Layout.astro';
|
|||
---
|
||||
<Layout title='Drawing Game'>
|
||||
<main>
|
||||
<div>
|
||||
<div id="parentMainContainer"class="hidden">
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute z-10" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16"></div>
|
||||
</div>
|
||||
<div id="scoreBoard" class="z-10 w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
|
||||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button onclick="history.back();" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-10 right-10" id="bottomAnimateClipart">
|
||||
<div class="flex flex-row z-50 place-items-end clip-art">
|
||||
<img src="/assets/clip-art-with-hand.svg" alt="Clip Art" class="">
|
||||
<div class="relative bg-yellow-500 rounded-[4px] -ml-[10px]" style="background: linear-gradient(74.79deg, #E8EBFF 4.63%, #DDC9F1 97.93%); height: 200px; box-shadow: 0px 4px 8px 3px #CAD1F5;">
|
||||
<img src="/assets/svg/bg-star.svg" alt="Left Star" class="absolute left-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
|
||||
<img src="/assets/svg/bg-star.svg" alt="Right Star" class="absolute right-0 top-1/4 transform -translate-y-1/2 w-12 h-12">
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex flex-col space-y-3 px-10 py-10 w-[348px] h-[187px] ">
|
||||
<p class="text-center text-[14px] font-[600] text-[#394FC0]">Want to find how much stars you’ve earned?</p>
|
||||
<button class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();" >Ask to Beanie</button>
|
||||
<a href="" class="text-center text-[12px] font-[600] text-[#394FC0] underline decoration-2 underline-offset-[4px]">Skip</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="gallerySliderId" class="hidden p-2 z-10 absolute inset-0 bg-black w-full h-screen bg-opacity-50 flex justify-center items-center">
|
||||
<div class="w-full max-w-6xl bg-white rounded-lg">
|
||||
<div class="flex justify-between p-3">
|
||||
<p class="text-[19px] font-[700]">Attempt 2</p>
|
||||
<button onclick="closeGallery();"> <img src="/assets/svg/crossIcon.svg"></button>
|
||||
</div>
|
||||
<div class="relative w-full aspect-video overflow-hidden rounded-b-lg shadow-lg">
|
||||
<img id="slideImage" src="" alt="" class="slide active w-full h-full aspect-video transition-transform duration-500" />
|
||||
|
||||
<button id="prevButton" class="flex justify-center items-center w-[40px] h-[40px] absolute left-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/leftIcon.svg" alt=""></button>
|
||||
<button id="nextButton" class="flex justify-center items-center w-[40px] h-[40px] absolute right-4 top-1/2 transform -translate-y-1/2 bg-[#F4F7FF] text-gray-800 p-2 rounded-full shadow-lg hover:bg-gray-100 transition"><img src="/assets/svg/rightIcon.svg" alt=""></button>
|
||||
|
||||
<div id="slidetInfo" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-2 text-center text-white">
|
||||
<h2 class="text-lg font-bold" id="imageTitle">Image Title</h2>
|
||||
<p class="text-sm" id="imageDescription">Description goes here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</main>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script src="/saveGameAI.js" is:inline></script>
|
||||
<script is:inline>
|
||||
const jsonData = [
|
||||
{
|
||||
"src": "/assets/back.jpeg",
|
||||
"title": "Image Title 1",
|
||||
"description": "Description for image 1 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/background.jpg",
|
||||
"title": "Image Title 2",
|
||||
"description": "Description for image 2 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/backgroundImage.png",
|
||||
"title": "Image Title 3",
|
||||
"description": "Description for image 3 goes here."
|
||||
},
|
||||
{
|
||||
"src": "/assets/beanieImage.png",
|
||||
"title": "Image Title 4",
|
||||
"description": "Description for image 4 goes here."
|
||||
}
|
||||
];
|
||||
let currentSlide = 0;
|
||||
function updateSlide(){
|
||||
const slide = jsonData[currentSlide];
|
||||
document.getElementById('slideImage').src = slide.src;
|
||||
document.getElementById('imageTitle').textContent = slide.title;
|
||||
document.getElementById('imageDescription').textContent = slide.description;
|
||||
}
|
||||
document.getElementById('nextButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide + 1) % jsonData.length;
|
||||
console.log(currentSlide)
|
||||
updateSlide();
|
||||
})
|
||||
document.getElementById('prevButton').addEventListener('click', () => {
|
||||
currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
|
||||
updateSlide();
|
||||
})
|
||||
updateSlide();
|
||||
let parentMainContainer = document.getElementById('parentMainContainer');
|
||||
let gallerySliderId = document.getElementById('gallerySliderId');
|
||||
function closeGallery(){
|
||||
parentMainContainer.classList.add('hidden');
|
||||
gallerySliderId.classList.add('hidden');
|
||||
|
||||
}
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
|
||||
|
|
@ -22,12 +126,14 @@ import Layout from '../../layouts/Layout.astro';
|
|||
};
|
||||
let topLogoWidth;
|
||||
let muteIconWidth;
|
||||
let galleryIconWidth;
|
||||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
var assetsList = {}
|
||||
var snapshotButton;
|
||||
let submitButton;
|
||||
let galleryButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let scoreTotal = 0;
|
||||
|
|
@ -35,24 +141,28 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let noticeHeight;
|
||||
let muteIcon;
|
||||
let retryButton;
|
||||
let maxScore;
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
resetIconWidth = 1.47;
|
||||
tickIconWidth = 1.24;
|
||||
muteIconWidth = 1.65;
|
||||
resetIconWidth = 1.40;
|
||||
tickIconWidth = 1.21;
|
||||
cancelIconWidth = 1.08;
|
||||
galleryIconWidth = 2;
|
||||
}else if(isTab){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.6;
|
||||
resetIconWidth = 1.43;
|
||||
tickIconWidth = 1.29;
|
||||
cancelIconWidth = 1.18;
|
||||
galleryIconWidth = 1.81;
|
||||
}else{
|
||||
topLogoWidth = 6;
|
||||
muteIconWidth = 1.3;
|
||||
resetIconWidth = 1.26;
|
||||
tickIconWidth = 1.222;
|
||||
cancelIconWidth = 1.185;
|
||||
galleryIconWidth = 1.345;
|
||||
}
|
||||
|
||||
if(isMobile){
|
||||
|
|
@ -139,12 +249,13 @@ import Layout from '../../layouts/Layout.astro';
|
|||
|
||||
function preload() {
|
||||
this.load.image('outline', assetsList.image);
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
this.load.image("resetIcon", '/assets/svg/reset.svg');
|
||||
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
|
||||
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
|
||||
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
|
||||
this.load.image('colorButton', '/assets/color_button.png');
|
||||
}
|
||||
|
|
@ -184,10 +295,12 @@ import Layout from '../../layouts/Layout.astro';
|
|||
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
|
||||
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
|
||||
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
|
||||
galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
|
||||
|
||||
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
window.location.reload();
|
||||
// window.location.reload();
|
||||
graphics.clear();
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -202,8 +315,18 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// });
|
||||
submitButton.setVisible(true);
|
||||
submitButton.setInteractive().on('pointerdown', () => {
|
||||
// windowLoad();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
parentMainContainer.classList.remove('hidden');
|
||||
if(isMobile){
|
||||
colorContainer.style.display = 'none';
|
||||
// parentMainContainer.classList.remove('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
galleryButton.setInteractive().on('pointerdown', () => {
|
||||
parentMainContainer.classList.remove('hidden');
|
||||
gallerySliderId.classList.remove('hidden');
|
||||
});
|
||||
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
|
|
@ -224,6 +347,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
graphics = this.add.graphics();
|
||||
const colorContainer = document.createElement('div');
|
||||
colorContainer.style.zIndex = '1';
|
||||
colorContainer.style.position = 'absolute';
|
||||
colorContainer.style.top = '13%';
|
||||
colorContainer.style.left = '10px';
|
||||
|
|
@ -235,7 +359,23 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
if(isMobile){
|
||||
colorContainer.style.display = 'none';
|
||||
colorContainer.style.flexDirection = 'row';
|
||||
|
||||
}
|
||||
colorContainer.style.backgroundColor = '#FFFFFF';
|
||||
colorContainer.style.padding = '30px 20px';
|
||||
colorContainer.style.borderRadius = '80px';
|
||||
colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
|
||||
colorContainer.style.left = '0px';
|
||||
colorContainer.style.top = '50%';
|
||||
colorContainer.style.transform = 'translate(0, -50%)';
|
||||
colorContainer.style.border = '1px solid #F9F9F9';
|
||||
|
||||
let colorEraserCont = document.createElement('div');
|
||||
colorEraserCont.style.display = 'flex';
|
||||
colorEraserCont.style.flexDirection = 'row';
|
||||
|
||||
colorContainer.appendChild(colorEraserCont);
|
||||
|
||||
let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
|
||||
if(!isMobile){
|
||||
|
|
@ -277,7 +417,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
});
|
||||
// Append the color picker to the color container data
|
||||
colorContainer.appendChild(colorPicker);
|
||||
|
||||
// const colors = data.colors;
|
||||
// var colors = colorList;
|
||||
var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
|
||||
|
|
@ -325,7 +465,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
button.style.height = `45px`;
|
||||
}
|
||||
button.innerHTML = `
|
||||
<svg width="125" height="24" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="125" height="25" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
|
||||
<g style="mix-blend-mode:multiply">
|
||||
<path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
|
||||
|
|
@ -492,8 +632,11 @@ import Layout from '../../layouts/Layout.astro';
|
|||
buttonsContainer.style.position = 'absolute';
|
||||
buttonsContainer.style.display = 'flex';
|
||||
buttonsContainer.style.flexDirection = 'row';
|
||||
buttonsContainer.style.top = '0%';
|
||||
buttonsContainer.style.marginTop = '30px';
|
||||
buttonsContainer.style.top = '50%';
|
||||
// buttonsContainer.style.transform = 'translate(0, -50%)';
|
||||
// buttonsContainer.style.marginTop = '30px';
|
||||
|
||||
|
||||
if(!isMobile){
|
||||
// buttonsContainer.style.position = 'fixed';
|
||||
buttonsContainer.style.top = '10%';
|
||||
|
|
@ -526,16 +669,19 @@ import Layout from '../../layouts/Layout.astro';
|
|||
clearDrawing();
|
||||
});
|
||||
colorViewButton.setInteractive().on('pointerdown', () => {
|
||||
if(clearButton.style.display === 'block') {
|
||||
clearButton.style.display = 'none';
|
||||
if(eraserButton.style.display === 'block') {
|
||||
eraserButton.style.display = 'none';
|
||||
}else{
|
||||
clearButton.style.display = 'block';
|
||||
eraserButton.style.display = 'block';
|
||||
}
|
||||
})
|
||||
// Create the Eraser button
|
||||
const eraserButton = document.createElement('button');
|
||||
if(isMobile){
|
||||
eraserButton.style.display = 'none';
|
||||
}
|
||||
// eraserButton.textContent = 'Eraser';
|
||||
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"> </i>';
|
||||
eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
|
||||
eraserButton.style.color = 'blue';
|
||||
// eraserButton.style.border = '3px solid blue';
|
||||
// eraserButton.style.color = 'white';
|
||||
|
|
@ -546,8 +692,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
if(isMobile){
|
||||
eraserButton.style.padding = '4px 4px';
|
||||
}else{
|
||||
eraserButton.style.padding = '5px 5px';
|
||||
eraserButton.style.marginTop = '0px';
|
||||
eraserButton.style.padding = '5px 9px';
|
||||
eraserButton.style.top = '50%';
|
||||
eraserButton.style.marginBottom = '15px';
|
||||
}
|
||||
eraserButton.style.fontWeight = 'bold';
|
||||
|
|
@ -556,9 +702,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
eraserButton.addEventListener('click', () => {
|
||||
isErasing = !isErasing;
|
||||
if (isErasing) {
|
||||
// eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
|
||||
eraserButton.style.color = 'red';
|
||||
eraserButton.style.border = '3px solid red';
|
||||
eraserButton.style.border = '2px solid #0348A8';
|
||||
} else {
|
||||
// Return to drawing mode
|
||||
// eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
|
||||
|
|
@ -567,10 +711,13 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
});
|
||||
// Add the Clear and Eraser buttons to the container
|
||||
buttonsContainer.appendChild(clearButton);
|
||||
colorPicker.appendChild(clearButton);
|
||||
buttonsContainer.appendChild(eraserButton).setVisible;
|
||||
|
||||
// colorPicker.appendChild(eraserButton);
|
||||
// colorPicker.appendChild(eraserButton);
|
||||
// colorPicker.appendChild(eraserButton);
|
||||
|
||||
colorEraserCont.append(colorPicker);
|
||||
colorEraserCont.append(eraserButton);
|
||||
// colorContainer.appendChild(eraserButton);
|
||||
const sliderContainer = document.createElement('div');
|
||||
sliderContainer.style.backgroundColor = '#fff';
|
||||
|
||||
|
|
@ -663,6 +810,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
customCursor.setVisible(false);
|
||||
muteIcon.setVisible(false);
|
||||
retryButton.setVisible(false);
|
||||
galleryButton.setVisible(false);
|
||||
|
||||
|
||||
drawingZone.renderer.snapshot((image) => {
|
||||
|
|
@ -671,6 +819,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
customCursor.setVisible(true);
|
||||
muteIcon.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
galleryButton.setVisible(true);
|
||||
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
|
|
@ -848,5 +997,37 @@ import Layout from '../../layouts/Layout.astro';
|
|||
.clear-button {
|
||||
background-color: blue;
|
||||
}
|
||||
/* Animation styles */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%); /* Start below the viewport */
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0); /* End at its original position */
|
||||
}
|
||||
}
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%); /* Initially off-screen to the right */
|
||||
opacity: 0; /* Initially hidden */
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
|
||||
}
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
.slide{
|
||||
display: none;
|
||||
}
|
||||
.active{
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -3,14 +3,39 @@ import Layout from '../../layouts/Layout.astro';
|
|||
---
|
||||
<Layout title='Drawing Game'>
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
|
||||
</div>
|
||||
</div>
|
||||
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
|
||||
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
|
||||
<div class="flex flex-row space-x-4 items-center justify-center">
|
||||
<div id="star-container"></div>
|
||||
</div>
|
||||
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
|
||||
<img class="z-10" src="/assets/clip-art.svg" alt="" />
|
||||
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
|
||||
</div>
|
||||
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
|
||||
<button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
|
||||
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</main>
|
||||
</div>
|
||||
<div class="clip-art-container absolute bottom-0 right-0">
|
||||
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
|
||||
</div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script src="/saveGameData.js" is:inline></script>
|
||||
<script is:inline>
|
||||
function showAnimation() {
|
||||
const clipArt = document.querySelector('.clip-art');
|
||||
clipArt.classList.add('show');
|
||||
}
|
||||
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
||||
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
|
||||
// const drawingZone = {
|
||||
|
|
@ -39,7 +64,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let image2Bottom;
|
||||
let noticeWidth;
|
||||
let noticeHeight;
|
||||
|
||||
let maxScore;
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
muteIconWidth = 1.8;
|
||||
|
|
@ -154,7 +179,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
function preload() {
|
||||
this.load.image('image1', assetsList.image1);
|
||||
this.load.image('image2', assetsList.image2);
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
|
|
@ -248,6 +273,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// windowLoad();
|
||||
// submitUserData();
|
||||
submitUserData(this);
|
||||
showAnimation();
|
||||
})
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
if(!isMobile){
|
||||
|
|
@ -710,4 +736,30 @@ import Layout from '../../layouts/Layout.astro';
|
|||
.clear-button {
|
||||
background-color: blue;
|
||||
}
|
||||
/* Animation styles */
|
||||
@keyframes slideInUp {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(100%); /* Start below the viewport */
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0); /* End at its original position */
|
||||
}
|
||||
}
|
||||
|
||||
.clip-art-container {
|
||||
overflow: hidden; /* Prevents overflow during the animation */
|
||||
}
|
||||
|
||||
.clip-art {
|
||||
transform: translateX(100%); /* Initially off-screen to the right */
|
||||
opacity: 0; /* Initially hidden */
|
||||
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
|
||||
}
|
||||
|
||||
.clip-art.show {
|
||||
transform: translateX(0); /* Move the image into view */
|
||||
opacity: 1; /* Fade in */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
let resetIconWidth;
|
||||
let tickIconWidth;
|
||||
let cancelIconWidth;
|
||||
let maxScore;
|
||||
|
||||
if(isMobile){
|
||||
topLogoWidth = 4.5;
|
||||
|
|
@ -135,7 +136,7 @@ import Layout from '../../layouts/Layout.astro';
|
|||
|
||||
function preload() {
|
||||
this.load.image('outline', assetsList.image);
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.image("tickIcon", '/assets/svg/tick2.svg');
|
||||
this.load.image("muteIcon", '/assets/svg/mute.svg');
|
||||
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
this.load.svg('number0', '/assets/numeric/n0.svg');
|
||||
this.load.svg('layer1', '/assets/numeric/n0.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around-close.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
this.load.svg('number1', '/assets/numeric/n1.svg');
|
||||
this.load.svg('layer1', '/assets/numeric/n1.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/numeric/n2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/roll-slant.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer1', '/assets/numeric/n3.svg');
|
||||
this.load.svg('layer2', '/assets/numeric/n3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/roll-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/numeric/n4_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.audio('audioOne', '/assets/audio/down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll-around.mp3');
|
||||
this.load.audio('audioThree', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/numeric/n6_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/curve-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/loop.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/numeric/n7_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/slide.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/numeric/n8_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-snake.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll-up.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/numeric/n9_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/curve-around.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/tall-down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.audio('audioOne', '/assets/audio/slant-left.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slant-right.mp3');
|
||||
this.load.audio('audioThree', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/capital-letter/b_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterC', '/assets/capital-letter/c.svg');
|
||||
this.load.svg('layer1', '/assets/capital-letter/c.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/capital-letter/d_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.audio('audioThree', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/capital-letter/f_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/capital-letter/g_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/capital-letter/h_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/capital-letter/i_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterJ', '/assets/capital-letter/j.svg');
|
||||
this.load.svg('layer1', '/assets/capital-letter/j.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-hook.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/capital-letter/k_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/capital-letter/l_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer4', '/assets/capital-letter/m_l4.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slant.mp3');
|
||||
this.load.audio('audioThree', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterO', '/assets/capital-letter/o.svg');
|
||||
this.load.svg('layer1', '/assets/capital-letter/o.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around-close.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/capital-letter/p_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/capital-letter/q_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
|
||||
this.load.audio('audioThree', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterS', '/assets/capital-letter/s.svg');
|
||||
this.load.svg('layer1', '/assets/capital-letter/s.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around-snake.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/capital-letter/t_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterU', '/assets/capital-letter/u.svg');
|
||||
this.load.svg('layer1', '/assets/capital-letter/u.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down-curve-up.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer1', '/assets/capital-letter/v_l1.svg');
|
||||
this.load.svg('layer2', '/assets/capital-letter/v_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/capital-letter/w_l3.svg');
|
||||
this.load.svg('layer4', '/assets/capital-letter/w_l4.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/capital-letter/x_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/slant.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/cross.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.audio('audioOne', '/assets/audio/slant-right.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slant-left.mp3');
|
||||
this.load.audio('audioThree', '/assets/audio/down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/capital-letter/z_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/slide.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/as_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/small-down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/bs_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterC', '/assets/small-letter/cs.svg');
|
||||
this.load.svg('layer1', '/assets/small-letter/cs.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/ds_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/es_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/fs_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/cross.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/gs_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/down-tail.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/hs_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll-down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/is_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/small-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/dot.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/js_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/down-tail.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/dot.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slant-in.mp3');
|
||||
this.load.audio('audioThree', '/assets/audio/slant-out.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterL', '/assets/small-letter/ls.svg');
|
||||
this.load.svg('layer1', '/assets/small-letter/ls.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/small-letter/ms_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/small-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll-down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/ns_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/small-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll-down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterO', '/assets/small-letter/os.svg');
|
||||
this.load.svg('layer1', '/assets/small-letter/os.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around-close.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/ps_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/down-tail.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll-around.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/qs_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/down-hook.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/rs_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/small-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/roll.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('letterS', '/assets/small-letter/ss.svg');
|
||||
this.load.svg('layer1', '/assets/small-letter/ss.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around-snake.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/ts_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/cross.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/us_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/small-down-curve-up.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/small-down.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer1', '/assets/small-letter/vs_l1.svg');
|
||||
this.load.svg('layer2', '/assets/small-letter/vs_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer3', '/assets/small-letter/ws_l3.svg');
|
||||
this.load.svg('layer4', '/assets/small-letter/ws_l4.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/slant.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ let scoreTotal = 0; let isDrawing = false;
|
|||
this.load.svg('layer2', '/assets/small-letter/xs_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/slant.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/cross.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.image('topLogo', '/assets/top_logo.svg');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue