Merge pull request 's33' (#45) from newb2 into master

Reviewed-on: #45

package.json

@@ -17,6 +17,7 @@
     "astro-eslint-parser": "^0.14.0",
     "eslint": "^8.44.0",
     "flowbite-typography": "^1.0.3",
+    "html2canvas": "^1.4.1",
     "phaser": "^3.60.0",
     "shiki": "^0.14.3",
     "tailwind-scrollbar": "^3.0.4",

public/assets/bg-star.svg

@@ -0,0 +1,20 @@
+<svg width="121" height="121" viewBox="0 0 121 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4126 115.787C19.8985 114.112 21.2639 107.552 21.2639 107.552L27.369 113.403L60.1015 95.9766L92.8969 114.903L99.6269 108.807C99.6269 108.807 100.189 114.133 99.6269 115.787C98.858 118.049 97.4089 118.881 95.4323 119.59C93.7998 120.176 90.0446 119.946 90.0446 119.946L60.1015 102.704C60.1015 102.704 41.6796 112.319 29.8756 119.946C29.8756 119.946 25.9562 120.657 24.1855 119.946C22.2765 119.18 21.0992 118.024 20.4126 115.787Z" fill="url(#paint0_linear_6328_4264)"/>
+<path d="M119.781 43.9461C119.397 42.7568 118.672 41.7068 117.695 40.9269C116.719 40.147 115.534 39.6717 114.29 39.5603L79.6497 36.4147L65.9524 4.35427C64.9421 2.00477 62.642 0.484375 60.0865 0.484375C57.5309 0.484375 55.2306 2.005 54.2208 4.36013L40.5232 36.415L5.87788 39.5603C4.6346 39.6742 3.45208 40.1505 2.47694 40.9301C1.5018 41.7097 0.776923 42.7584 0.392182 43.9461C-0.398019 46.3765 0.331704 49.042 2.25739 50.7223L28.4412 73.6852L20.7201 107.696C20.1552 110.197 21.1256 112.782 23.2007 114.282C24.3157 115.087 25.6207 115.498 26.9365 115.498C28.071 115.498 29.1962 115.192 30.2065 114.587L60.0865 96.729L89.9556 114.587C92.1413 115.902 94.8966 115.782 96.9669 114.282C97.9804 113.548 98.756 112.532 99.197 111.362C99.638 110.191 99.7251 108.916 99.4474 107.696L91.7266 73.6852L117.91 50.727C118.852 49.9043 119.531 48.8231 119.864 47.6175C120.197 46.412 120.168 45.1353 119.781 43.9461Z" fill="#FFD211"/>
+<path d="M0.207031 52.9141V46.6641L28.9254 73.6811L27.955 78.1922L0.207031 52.9141Z" fill="url(#paint1_linear_6328_4264)"/>
+<path d="M120.094 52.9141V46.6641L91.3754 73.6811L92.3458 78.1922L120.094 52.9141Z" fill="url(#paint2_linear_6328_4264)"/>
+<defs>
+<linearGradient id="paint0_linear_6328_4264" x1="60.0299" y1="95.9766" x2="60.0299" y2="120.19" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6328_4264" x1="14.5662" y1="46.6641" x2="14.5662" y2="78.1922" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+<linearGradient id="paint2_linear_6328_4264" x1="105.735" y1="46.6641" x2="105.735" y2="78.1922" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+</defs>
+</svg>

public/assets/clip-art-with-hand.svg

@@ -1,11 +0,0 @@
-
-<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>

public/assets/result-star.svg

@@ -0,0 +1,32 @@
+<svg width="129" height="128" viewBox="0 0 129 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_8863_7800)">
+<path d="M24.3345 115.303C23.8203 113.627 25.1857 107.067 25.1857 107.067L31.2908 112.919L64.0234 95.4922L96.8188 114.418L103.549 108.323C103.549 108.323 104.111 113.649 103.549 115.303C102.78 117.565 101.331 118.396 99.3542 119.105C97.7216 119.691 93.9665 119.462 93.9665 119.462L64.0234 102.22C64.0234 102.22 45.6015 111.835 33.7975 119.462C33.7975 119.462 29.8781 120.172 28.1074 119.462C26.1984 118.695 25.021 117.539 24.3345 115.303Z" fill="url(#paint0_linear_8863_7800)"/>
+<path d="M123.703 43.4618C123.319 42.2725 122.594 41.2224 121.617 40.4425C120.641 39.6626 119.456 39.1873 118.212 39.0759L83.5716 35.9304L69.8743 3.8699C68.8639 1.52039 66.5639 0 64.0083 0C61.4528 0 59.1525 1.52063 58.1427 3.87576L44.4451 35.9306L9.79975 39.0759C8.55647 39.1898 7.37396 39.6661 6.39881 40.4457C5.42367 41.2253 4.6988 42.274 4.31406 43.4618C3.52386 45.8921 4.25358 48.5576 6.17927 50.2379L32.363 73.2008L24.642 107.212C24.0771 109.712 25.0475 112.297 27.1225 113.797C28.2376 114.603 29.5426 115.013 30.8583 115.013C31.9929 115.013 33.1181 114.707 34.1284 114.103L64.0083 96.2447L93.8775 114.103C96.0632 115.418 98.8184 115.298 100.889 113.797C101.902 113.064 102.678 112.048 103.119 110.877C103.56 109.706 103.647 108.432 103.369 107.212L95.6485 73.2008L121.832 50.2426C122.774 49.4199 123.453 48.3387 123.786 47.1332C124.118 45.9276 124.09 44.651 123.703 43.4618Z" fill="#FFD211"/>
+<path d="M4.12891 52.4297V46.1797L32.8473 73.1967L31.8769 77.7078L4.12891 52.4297Z" fill="url(#paint1_linear_8863_7800)"/>
+<path d="M124.016 52.4297V46.1797L95.2972 73.1967L96.2677 77.7078L124.016 52.4297Z" fill="url(#paint2_linear_8863_7800)"/>
+</g>
+<defs>
+<filter id="filter0_d_8863_7800" x="0" y="0" width="128.016" height="127.781" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8863_7800"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8863_7800" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_8863_7800" x1="63.9518" y1="95.4922" x2="63.9518" y2="119.706" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8863_7800" x1="18.4881" y1="46.1797" x2="18.4881" y2="77.7078" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+<linearGradient id="paint2_linear_8863_7800" x1="109.656" y1="46.1797" x2="109.656" y2="77.7078" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD9F02"/>
+<stop offset="1" stop-color="#FDCF03"/>
+</linearGradient>
+</defs>
+</svg>

public/assets/svg/draw-cursor.svg

@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.832" cy="12.6328" r="12" fill="#F7A915"/>
+<path d="M12.834 3.76953L12.834 21.9905" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
+</svg>

public/assets/svg/eraser-cursor.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.9375" width="23" height="23" fill="white"/>
+<rect x="0.5" y="0.9375" width="23" height="23" stroke="black"/>
+<path d="M12.1367 3.52344L12.1367 22.1211" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
+<path d="M2.83594 12.8242H21.4336" stroke="black" stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="3 3"/>
+</svg>

public/galleryFunction.js

@@ -0,0 +1,45 @@
+      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(){
+        gallerySliderId.classList.add('hidden');
+        
+    }

public/saveGameAI.js

@@ -1,15 +1,15 @@
     function retryGame(){
         window.location.reload();
     }
-
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
-    const userId = urlParams.get('userId');
+    const childId = urlParams.get('childId');
     const gameVersion = urlParams.get('gameName');
-    let gameId;
+    const gameId = urlParams.get('id');
+    const spriteName = urlParams.get('spriteName');
+    const assignmentId = urlParams.get('assignmentId');
+    const worksheetId = urlParams.get('worksheetId');
     let submitNotic;
-
-    console.log(userId);
     let startTime = Date.now();
 
 
@@ -40,6 +40,7 @@
     // console.log(gameVersion)
     let imageCode;
     let gameScore;
+    let timeDifferenceInSeconds;
 
     // if(scoreTotal){
     //     gameScore = scoreTotal;
@@ -50,25 +51,38 @@
 
 function submitUserData(drawingZone) {
     submitButton.setVisible(false);
-    snapshotButton.setVisible(false);
+    galleryButton.setVisible(false);
     customCursor.setVisible(false);
+    snapshotButton.setVisible(false);
+    if(!gameType[0] === 'guided-tracing'){
+        snapshotButton.setVisible(false);
+        customCursor.setVisible(false);
+        galleryButton.setVisible(false);
+    }
     muteIcon.setVisible(false);
     retryButton.setVisible(false);
-    galleryButton.setVisible(false);
+    
     const endTime = Date.now();
     const timeDifference = endTime - startTime;
-    const timeDifferenceInSeconds = timeDifference / 1000;
+    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);
+        galleryButton.setVisible(true);
         customCursor.setVisible(true);
+        snapshotButton.setVisible(true);
+        if(!gameType[0] == "guided-tracing"){
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            galleryButton.setVisible(true);
+        }
+
         muteIcon.setVisible(true);
         retryButton.setVisible(true);
-        galleryButton.setVisible(true);
+        
         if(gameType[0] == 'drawing'){
             // submitButton.setVisible(true);
             // snapshotButton.setVisible(true);
@@ -102,47 +116,15 @@ function submitUserData(drawingZone) {
             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 calculateFromAI(){
+        let progress = 0;
+        let starValue;
         
         function progressIncrement() {
             const interval = setInterval(() => {
@@ -177,9 +159,7 @@ function calculateFromAI(){
             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');
@@ -227,49 +207,139 @@ function calculateFromAI(){
         calculationText.style.fontWeight = '600';
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
-        let userData = {
-            'name' : 'Worksheet Name Here'
+        let userDataForStar = {
+            gameName: gameVersion,
+            childId: childId,
+            gameID: gameId,
+            gameTime: timeDifferenceInSeconds,
+            screenShot: imageCode
         };
-        console.log(userData);
-        fetch(`https://game-du.teachertrainingkolkata.in/items/test`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(userData)
+        
+        // First API call
+        fetch(`https://api.teachertrainingkolkata.in/api/aiEvaluateImageToStar`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userDataForStar)
         })
         .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';
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
             }
-            } else {
-            console.log('Something went wrong', response);
-            }
-        }, 100);
+            return response.json();
+        })
+        .then(data => {
+            setTimeout(() => {
+                if (data && data.message === "Game data saved successfully") {
+                    let starValue = data.data.gameStar; // Ensure starValue is available
+        
+                    let feedbackMessage = '';
+                    if (starValue >= 1 && starValue <= 3) {
+                        feedbackMessage = "You're making progress! Let's keep going!";
+                    } else if (starValue >= 4 && starValue <= 6) {
+                        feedbackMessage = "Nice work! You're improving every day!";
+                    } else if (starValue >= 7 && starValue <= 8) {
+                        feedbackMessage = "Amazing work! Keep it up!";
+                    } else if (starValue >= 9 && starValue <= 10) {
+                        feedbackMessage = "Outstanding! You're a true superstar!";
+                    } else {
+                        feedbackMessage = "Invalid star value.";
+                    }
+        
+                    loadingMainContainer.style.display = 'none';
+                    loadingDiv.style.display = 'none';
+                    starContainer.style.display = 'flex';
+                    starContainer.style.flexDirection = 'row';
+                    document.getElementById('get-star-value').innerHTML = starValue;
+                    document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                    scoreBoard.style.display = 'flex';
+        
+                    if (scoreBoard.style.display === 'flex') {
+                        const bottomAnimateClipart = document.getElementById('bottomAnimateClipart');
+                        bottomAnimateClipart.classList.remove('hidden');
+                        bottomAnimateClipart.classList.add('-translate-x-full', 'transition-transform', 'duration-700');
+                        setTimeout(() => {
+                            bottomAnimateClipart.classList.add('hidden');
+                            bottomAnimateClipart.classList.remove('translate-x-full');
+                        }, 100);
+                    }
+        
+                    // ✅ Now create `userData` inside the correct scope where starValue exists
+                    let userData = {
+                        gameName: gameVersion,
+                        gameID: gameId,
+                        screenShot: imageCode,
+                        childId: childId,
+                        gameTime: timeDifferenceInSeconds,
+                        gameStar: starValue // ✅ Now correctly assigned
+                    };
+        
+                    // ✅ Now perform the second fetch request
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(userData)
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.screenshotUrl) {
+                            fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify(userData)
+                            })
+                            .then(response => {
+                                setTimeout(() => {
+                                    if (response.ok && response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                    }
+                                }, 100);
+                            })
+                            .catch(error => {
+                                console.error('An error occurred', error);
+                            });
+        
+                            // Final API Call
+                            const userAnotherData = {
+                                assignmentId: assignmentId,
+                                worksheetId: worksheetId,
+                                studentId: childId,
+                                submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
+                            };
+                            const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q';
+        
+                            fetch(`https://beanstalkedu.in/api/one/v1/akademy/worksheet/submissions`, {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json',
+                                    'Authorization': authToken
+                                },
+                                body: JSON.stringify(userAnotherData)
+                            })
+                            .then(response => response.json())
+                            .then(data => {
+                                console.log('Submission API response', data);
+                            })
+                            .catch(error => {
+                                console.error('An error occurred', error);
+                            });
+                        }
+                    })
+                    .catch(error => {
+                        console.error('An error occurred', error);
+                    });
+                }
+            }, 150);
         })
         .catch(error => {
-        console.error('An error occurred', error);
-        });
+            console.error('An error occurred', error);
+        });        
     }

public/saveGameData copy 2.js

@@ -0,0 +1,243 @@
+function retryGame(){
+    window.location.reload();
+}
+ 
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const userId = urlParams.get('childId');
+const gameVersion = urlParams.get('gameName');
+const gameId = urlParams.get('id');
+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;
+
+// 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 == 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(gameVersion)
+
+function submitUserData(drawingZone) {
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    const timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+    let imageCode;
+    let gameScore;
+
+    if(scoreTotal){
+        gameScore = scoreTotal;
+    }else{
+        gameScore = 0;
+    }
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        if(gameType[0] == 'drawing'){
+            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 = '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 starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
+        let maxStarValue = 10;
+        let progress = 0;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
+        
+        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="48" height="48" 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="48" height="48" 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,
+            'gameID': gameId,
+            'screenShot': imageCode,
+            'userId' : userId,
+            'gameTime' : timeDifferenceInSeconds,
+            'score' : scoreTotal,
+            'gameStar' : starValue
+        };
+        console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        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('wsSavedImg').classList.remove('-z-10');
+                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                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);
+        });
+            
+            // Clear the drawing
+            // graphics.clear();
+        });        
+};

public/saveGameData copy.js

@@ -0,0 +1,243 @@
+function retryGame(){
+    window.location.reload();
+}
+ 
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const userId = urlParams.get('childId');
+const gameVersion = urlParams.get('gameName');
+const gameId = urlParams.get('id');
+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;
+
+// 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 == 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(gameVersion)
+
+function submitUserData(drawingZone) {
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    const timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+    let imageCode;
+    let gameScore;
+
+    if(scoreTotal){
+        gameScore = scoreTotal;
+    }else{
+        gameScore = 0;
+    }
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        if(gameType[0] == 'drawing'){
+            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 = '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 starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
+        let maxStarValue = 10;
+        let progress = 0;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
+        
+        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="48" height="48" 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="48" height="48" 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,
+            'gameID': gameId,
+            'screenShot': imageCode,
+            'userId' : userId,
+            'gameTime' : timeDifferenceInSeconds,
+            'score' : scoreTotal,
+            'gameStar' : starValue
+        };
+        console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        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('wsSavedImg').classList.remove('-z-10');
+                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                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);
+        });
+            
+            // Clear the drawing
+            // graphics.clear();
+        });        
+};

public/saveGameData.js

@@ -1,15 +1,17 @@
 function retryGame(){
     window.location.reload();
 }
-
+ 
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-const userId = urlParams.get('userId');
+const childId = urlParams.get('childId');
 const gameVersion = urlParams.get('gameName');
-let gameId;
+const assignmentId = urlParams.get('assignmentId');
+const worksheetId = urlParams.get('worksheetId');
+const gameId = urlParams.get('id');
 let submitNotic;
 
-console.log(userId);
+// console.log(childId);
 let startTime = Date.now();
 
 
@@ -39,8 +41,6 @@ const gameType = gameName[3].split('?id=');
 //     console.log('Type - 3');
 // }
 
-console.log(gameVersion)
-
 function submitUserData(drawingZone) {
     const endTime = Date.now();
     const timeDifference = endTime - startTime;
@@ -57,48 +57,44 @@ function submitUserData(drawingZone) {
     }
     // console.log('This is from main point', scoreTotal);
     drawingZone.renderer.snapshot((image) => {
-        if(gameType[0] == 'drawing'){
-            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 = '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 starValue;
-        if(scoreTotal === maxScore){
-            starValue = 5;
-        } else if(scoreTotal === maxScore - 1){
-            starValue = 4;
-        } else{
-            starValue = 3;
-        }
-        let maxStarValue = 5;
+        submitButton.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;
+        let starValue = Math.round((scoreTotal / maxScore) * 10);
+        starValue = starValue === 0 ? 3 : starValue;
+        // console.log('Star Value', starValue);
+        // console.log('starValue', starValue)
+        // if(scoreTotal === maxScore){
+        //     starValue = 5;
+        // } else if(scoreTotal === maxScore - 1){
+        //     starValue = 4;
+        // } else{
+        //     starValue = 3;
+        // }
+        let maxStarValue = 10;
         let progress = 0;
-        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
+        let feedbackMessage = '';
+        if (starValue >= 1 && starValue <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+          } else if (starValue >= 4 && starValue <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+          } else if (starValue >= 7 && starValue <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+          } else if (starValue >= 9 && starValue <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+          } else {
+            feedbackMessage = "Invalid star value.";
+          }
+
         
         function progressIncrement() {
             const interval = setInterval(() => {
@@ -133,9 +129,7 @@ function submitUserData(drawingZone) {
             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');
@@ -184,60 +178,103 @@ function submitUserData(drawingZone) {
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        let userData = {
-            'gameName': gameVersion,
-            'gameID': gameId,
-            'screenShot': imageCode,
-            'userId' : userId,
-            'gameTime' : timeDifferenceInSeconds,
-            'score' : scoreTotal,
-            'gameStar' : starValue
+        const saveUserDataForScreenshot = {
+            gameName: gameVersion,
+            gameID: gameId,      
+            screenShot: imageCode,
+            childId: childId,      
+            gameTime: timeDifferenceInSeconds         
         };
-        console.log(userData);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        body: JSON.stringify(userData)
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGalleryImage`, {
+            method: 'POST',
+            headers: {
+                'Content-Type' : 'application/json'
+            },
+            body: JSON.stringify(saveUserDataForScreenshot)
         })
-        .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('wsSavedImg').classList.remove('-z-10');
-                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
-                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';
+        .then(response => response.json())
+        .then(data => {
+            console.log('Gallery Response Data', data)
+
+            if(data.screenshotUrl){
+                let userData = {
+                    'gameName': gameVersion,
+                    'gameID': gameId,
+                    'screenShot': imageCode,
+                    'childId' : childId,
+                    'gameTime' : timeDifferenceInSeconds,
+                    'score' : scoreTotal,
+                    'gameStar' : starValue
+                };
+                // console.log(userData);
+                fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(userData)
+                })
+                .then(response => {
+                    setTimeout(() => { 
+                        if (response.ok) {
+                            // console.log('Response Code', response.status)
+                            if (response.status == 200) {
+                                document.getElementById('saved-toast').classList.remove('hidden');
+                                setTimeout(() => {
+                                    document.getElementById('saved-toast').classList.add('hidden');
+                                }, 1500);
+                                loadingMainContainer.style.display = 'none';
+                                loadingDiv.style.display = 'none';
+                                starContainer.style.display = 'flex';
+                                // starContainer.style.flexDirection = 'row';
+                                // document.getElementById('wsSavedImg').classList.remove('-z-10');
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                document.getElementById('get-star-value').innerHTML = starValue;
+                                // const starDiv = document.createElement('div');
+                                // starDiv.innerHTML = starSVG;   
+                                // starContainer.appendChild(starDiv);   
+                                // starDiv.classList.add('star');  
+                                scoreBoard.style.display = 'flex';
+                            }
+                        } else {
+                        console.log('Something went wrong', response);
+                        }
+                    }, 100);
+                })
+                .catch(error => {
+                    console.error('An error occurred', error);
+                });
+                const userAnotherData = {
+                    assignmentId: assignmentId,
+                    worksheetId: worksheetId,
+                    studentId: childId,
+                    submissionFile: data.screenshotUrl.split('/')[4].split('?')[0],
+                };
+                const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                // console.log('Starting submissions API call');
+                fetch(`https://beanstalkedu.in/api/one/v1/akademy/worksheet/submissions`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': authToken
+                    },
+                    body: JSON.stringify(userAnotherData)
+                })
+                .then(response => {
+                    // console.log('Submissions API Response:', response);
+                    return response.json();
+                })
+                .then(data => {
+                    // console.log('Submissions Response Data:', data);
+                })
+                .catch(error => {
+                    console.error('Error in Submissions API:', error);
+                });
+
             }
-            } else {
-            console.log('Something went wrong', response);
-            }
-        }, 100);
         })
         .catch(error => {
-        console.error('An error occurred', error);
-        });
-            
-            // Clear the drawing
-            // graphics.clear();
-        });        
+            console.error('An error occoured', error)
+        })
+    });        
 };

public/saveTracingGameData.js

@@ -0,0 +1,128 @@
+function retryGame(){
+    window.location.reload();
+}
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const childId = urlParams.get('childId');
+const gameVersion = urlParams.get('gameName');
+const gameId = urlParams.get('id');
+let submitNotic;
+
+// console.log(childId);
+let startTime = Date.now();
+
+
+const url = window.location.href;
+const gameName = url.split('/');
+const gameType = gameName[3].split('?id=');
+// let gameVersion;iVBORw0KGgoAAAANSUhEUgAAB4A
+//     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(gameVersion)
+
+function submitUserData(drawingZone) {
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    const timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+    let imageCode;
+    let gameScore;
+
+    if(scoreTotal){
+        gameScore = scoreTotal;
+    }else{
+        gameScore = 0;
+    }
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        if(gameType[0] == 'drawing'){
+            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 = '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 starValue;
+        if(scoreTotal === maxScore){
+            starValue = 5;
+        } else if(scoreTotal === maxScore - 1){
+            starValue = 4;
+        } else{
+            starValue = 3;
+        }
+        let userData = {
+            'gameName': gameVersion,
+            'gameID': gameId,
+            'screenShot': imageCode,
+            'childId' : childId,
+            'gameTime' : timeDifferenceInSeconds,
+            'score' : scoreTotal,
+            'gameStar' : starValue
+        };
+        console.log(userData);
+        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(userData)
+        })
+        .then(response => {
+        setTimeout(() => { 
+            if (response.ok) {
+            if (response.status == 200) {
+                document.getElementById('wsSavedImg').classList.remove('-z-10');
+            }
+            } else {
+            console.log('Something went wrong', response);
+            }
+        }, 100);
+        })
+        .catch(error => {
+        console.error('An error occurred', error);
+        });
+            
+            // Clear the drawing
+            // graphics.clear();
+        });        
+};

src/pages/cross/cross_phonics_v1.astro

@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="">
     <main>
-        <div>
+        <div class="specific">
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
                 <div class="shadow-md">
                     <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
@@ -11,70 +11,79 @@ import Layout from "../../layouts/Layout.astro";
                             <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>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
-                            <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button id="downloadBtn" onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
                     <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
+
                 </div>
-                <div class="container mx-auto px-4">
-                    <!-- <div class="flex flex-col">
-                        <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
-                    </div> -->
+                <div class="container mx-auto px-4" id="snapshotDiv">
                     <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a1" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label1"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox " value="a1"/>
                                 
-                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a2" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label2"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox " value="a2"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a3" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label3"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox " value="a3"/>
                                 
-                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a4" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label4"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
+                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox " value="a4"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a5" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label5"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox " value="a5"/>
                                 
-                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
-                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
+                                <label for="a6" class="round-checkbox-label">
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label6"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
+                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox " value="a6"/>
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
                             <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
-                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
+                            <!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
                         </div>
                     </form>
                 </div>
             </section>
-        </div>
+        </div>  
         <div class="absolute inset-0" style="display: none;" id="allParentDiv">
             <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">
@@ -83,29 +92,74 @@ import Layout from "../../layouts/Layout.astro";
             <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 id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </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 id="starFeedbackMessage" 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%);"></p>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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>
+                  <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 onclick="retryGame()" 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-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
+        </div>      
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
         </div>
     </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+    function retryGame(){
+        window.location.reload();
+    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userId');
+    const childId = params.get('childId');
     const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let gameData = null;
     let totalPoints = 0;
@@ -114,14 +168,18 @@ import Layout from "../../layouts/Layout.astro";
     // let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
     let wrongCount = 0;
     let starValue;
-    let maxStarValue = 5;
+    let maxScore = 6;
     let progress = 0;
     const progressBar = document.createElement('div');
-
+    let totalCorrectFromApi = 0;
     fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -143,7 +201,7 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById("label6").innerHTML = gameData.label6;
             }
             // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
+            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
 
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             for (let i = 1; i <= 6; i++) {
@@ -152,13 +210,6 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
 
-        function showClipArt() {
-        const clipArtContainer = document.querySelector('.clip-art-container');
-
-        clipArtContainer.classList.remove('hidden');
-        clipArtContainer.classList.add('slide-in');
-    }
-
     function addStarScalingStyles() {
         const style = document.createElement('style');
         style.innerHTML = `
@@ -210,6 +261,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
         if (checkedCount < 1) {
@@ -244,26 +296,34 @@ import Layout from "../../layouts/Layout.astro";
                 totalPoints += 1;
             }
         });
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
 
-        // Move the userData object creation inside the saveUserData function if needed
-        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
-        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
-
-        let userData = {
-            'gameName': gameName,
-            'gameID': gameId,
-            'userId': userId,
-            'gameTime': timeDifferenceInSeconds,
-            'score': totalPoints,
-            'gameStar': starValue
-        };
         // console.log(userData);
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
-        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');
@@ -311,52 +371,144 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-            .then(response => {
-                if (response.ok) {
-                    setTimeout(() => {
-                        if (response.ok) {
-                            if (response.status == 200) {
-                                document.getElementById('allParentDiv').style.display = 'block';
-                                loadingMainContainer.style.display = 'none';
-                                loadingDiv.style.display = 'none';
-                                starContainer.style.display = 'flex';
-                                starContainer.style.flexDirection = 'row';
-                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
-                                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);
-                } else {
-                    // console.log('Something Wrong', response);
+
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
                 }
-            })
-            .catch(error => {
-                console.error('An error occurred', error);
-            });
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
+                    let userData = {
+                        'gameName': gameName,
+                        'gameID': gameId,
+                        'childId': childId,
+                        'gameTime': timeDifferenceInSeconds,
+                        'score': totalPoints,
+                        'gameStar': percentage
+                    };
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(userData)
+                    })
+                    .then(response => {
+                        if (response.ok) {
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
+                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
+                        } else {
+                            // console.log('Something Wrong', response);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('An error occurred', error);
+                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://beanstalkedu.in/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
     }
 
 
@@ -430,7 +582,7 @@ import Layout from "../../layouts/Layout.astro";
         color: #7C4C23;
         padding-top: 10px;
     }
-    #LearningArea, #LearningSubArea_copy{
+    #LearningArea, #LearningSubArea{
         font-size: 20px;
         color: #7C4C23;
         font-weight: bold;

src/pages/cross/cross_phonics_v2.astro

@@ -11,18 +11,18 @@ import Layout from "../../layouts/Layout.astro";
                             <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>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
                     <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                 </div>
-                <div class="container mx-auto px-4">
+                <div class="container mx-auto px-4" id="snapshotDiv">
                     <!-- <div class="flex flex-col">
                         <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
+                        <p id="LearningSubArea"></p>
                     </div> -->
                     <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-2 select-none" id="gameDescription"></p>
                     <form id="contactForm">
@@ -101,29 +101,74 @@ import Layout from "../../layouts/Layout.astro";
             <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 id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </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 id="starFeedbackMessage" 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%);"></p>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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>
+                  <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 onclick="retryGame()" 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-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
-        </div>     
+        </div> 
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>    
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>  
     </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+    function retryGame(){
+        window.location.reload();
+    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userId');
+    const childId = params.get('childId');
     const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let url = window.location.href;
     let urlSplit = url.split('/');
@@ -131,14 +176,18 @@ import Layout from "../../layouts/Layout.astro";
     let totalPoints = 0;
     let wrongCount = 0;
     let starValue;
-    let maxStarValue = 5;
+    let maxScore = 9;
     let progress = 0;
     const progressBar = document.createElement('div');
-    
+    let totalCorrectFromApi = 0;
     fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -169,19 +218,13 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById("label9").innerHTML = gameData.label9;
             }
             // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
+            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             for (let i = 1; i <= 9; i++) {
                 const imageId = `image${i}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
-        function showClipArt() {
-        const clipArtContainer = document.querySelector('.clip-art-container');
-
-        clipArtContainer.classList.remove('hidden');
-        clipArtContainer.classList.add('slide-in');
-    }
 
     function addStarScalingStyles() {
         const style = document.createElement('style');
@@ -253,17 +296,6 @@ import Layout from "../../layouts/Layout.astro";
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
-        // const checkboxValues = {
-        //     a1: document.getElementById('a1').checked,
-        //     a2: document.getElementById('a2').checked,
-        //     a3: document.getElementById('a3').checked,
-        //     a4: document.getElementById('a4').checked,
-        //     a5: document.getElementById('a5').checked,
-        //     a6: document.getElementById('a6').checked,
-        //     a7: document.getElementById('a7').checked,
-        //     a8: document.getElementById('a8').checked,
-        //     a9: document.getElementById('a9').checked,
-        // };
         const checkboxValues = checkboxes.map(id => {
             const checkbox = document.getElementById(id);
             const element = document.getElementById('image' + id.slice(-1));
@@ -281,23 +313,34 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
 
-        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
-        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
-        let userData = {
-            'gameName': gameName,
-            'gameID': gameId,
-            'userId': userId,
-            'gameTime': timeDifferenceInSeconds,
-            'score': totalPoints,
-            'gameStar': starValue
-        };
-        // console.log(userData);
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
+
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
-        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');
@@ -345,52 +388,139 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-            .then(response => {
-                if (response.ok) {
-                    setTimeout(() => {
-                        if (response.ok) {
-                            if (response.status == 200) {
-                                document.getElementById('allParentDiv').style.display = 'block';
-                                loadingMainContainer.style.display = 'none';
-                                loadingDiv.style.display = 'none';
-                                starContainer.style.display = 'flex';
-                                starContainer.style.flexDirection = 'row';
-                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
-                                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);
-                } else {
-                    // console.log('Something Wrong', response);
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
                 }
-            })
-            .catch(error => {
-                console.error('An error occurred', error);
-            });
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
+                    let userData = {
+                        'gameName': gameName,
+                        'gameID': gameId,
+                        'childId': childId,
+                        'gameTime': timeDifferenceInSeconds,
+                        'score': totalPoints,
+                        'gameStar': percentage
+                    };
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(userData)
+                    })
+                    .then(response => {
+                        if (response.ok) {
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
+                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
+                        } else {
+                            // console.log('Something Wrong', response);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('An error occurred', error);
+                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://beanstalkedu.in/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
     }
 
     document.addEventListener('DOMContentLoaded', function () {
@@ -464,7 +594,7 @@ import Layout from "../../layouts/Layout.astro";
         color: #7C4C23;
         padding-top: 10px;
     }
-    #LearningArea, #LearningSubArea_copy{
+    #LearningArea, #LearningSubArea{
         font-size: 20px;
         color: #7C4C23;
         font-weight: bold;

src/pages/cross/v1.astro

@@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="">
     <main>
-        <div>
+        <div class="specific">
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
                 <div class="shadow-md">
                     <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
@@ -11,70 +11,79 @@ import Layout from "../../layouts/Layout.astro";
                             <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>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
-                            <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button id="downloadBtn" onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
                     <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
+
                 </div>
-                <div class="container mx-auto px-4">
-                    <!-- <div class="flex flex-col">
-                        <p id="LearningArea"></p>
-                        <p id="LearningSubArea_copy"></p>
-                    </div> -->
+                <div class="container mx-auto px-4" id="snapshotDiv">
                     <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a1" class="round-checkbox-label">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label1"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox " value="a1"/>
                                 
                                 <label for="a2" class="round-checkbox-label">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label2"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox " value="a2"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a3" class="round-checkbox-label">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label3"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox " value="a3"/>
                                 
                                 <label for="a4" class="round-checkbox-label">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label4"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
+                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox " value="a4"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a5" class="round-checkbox-label">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label5"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox " value="a5"/>
                                 
                                 <label for="a6" class="round-checkbox-label">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
+                                    <div class="flex flex-col place-items-center">
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                        <p id="label6"></p>
+                                    </div>
                                 </label>
-                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
+                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox " value="a6"/>
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
                             <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
-                            <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
+                            <!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
                         </div>
                     </form>
                 </div>
             </section>
-        </div>
+        </div>  
         <div class="absolute inset-0" style="display: none;" id="allParentDiv">
             <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">
@@ -83,29 +92,74 @@ import Layout from "../../layouts/Layout.astro";
             <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 id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </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 id="starFeedbackMessage" 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%);"></p>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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>
+                  <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 onclick="retryGame()" 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-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
-        </div>     
+        </div>      
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </div>
     </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+    function retryGame(){
+        window.location.reload();
+    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userId');
+    const childId = params.get('childId');
     const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let gameData = null;
     let url = window.location.href;
@@ -114,15 +168,19 @@ import Layout from "../../layouts/Layout.astro";
     let totalPoints = 0;
     let wrongCount = 0;
     let starValue;
-    let maxStarValue = 5;
+    let maxScore = 6;
     let progress = 0;
     const progressBar = document.createElement('div');
-
+    let totalCorrectFromApi = 0;
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -144,7 +202,7 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById("label6").innerHTML = gameData.label6;
             }
             // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
+            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
 
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             for (let i = 1; i <= 6; i++) {
@@ -153,13 +211,6 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
 
-        function showClipArt() {
-        const clipArtContainer = document.querySelector('.clip-art-container');
-
-        clipArtContainer.classList.remove('hidden');
-        clipArtContainer.classList.add('slide-in');
-    }
-
     function addStarScalingStyles() {
         const style = document.createElement('style');
         style.innerHTML = `
@@ -248,23 +299,34 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
 
-        // Move the userData object creation inside the saveUserData function if needed
-        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
-        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
-        let userData = {
-            'gameName': gameName,
-            'gameID': gameId,
-            'userId': userId,
-            'gameTime': timeDifferenceInSeconds,
-            'score': totalPoints,
-            'gameStar': starValue
-        };
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
+
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
-        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');
@@ -311,53 +373,144 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.fontWeight = '600';
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
-        // console.log(userData);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-            .then(response => {
-                if (response.ok) {
-                    setTimeout(() => {
-                        if (response.ok) {
-                            if (response.status == 200) {
-                                document.getElementById('allParentDiv').style.display = 'block';
-                                loadingMainContainer.style.display = 'none';
-                                loadingDiv.style.display = 'none';
-                                starContainer.style.display = 'flex';
-                                starContainer.style.flexDirection = 'row';
-                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
-                                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);
-                } else {
-                    // console.log('Something Wrong', response);
+
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
                 }
-            })
-            .catch(error => {
-                console.error('An error occurred', error);
-            });
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
+                    let userData = {
+                        'gameName': gameName,
+                        'gameID': gameId,
+                        'childId': childId,
+                        'gameTime': timeDifferenceInSeconds,
+                        'score': totalPoints,
+                        'gameStar': percentage
+                    };
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(userData)
+                    })
+                    .then(response => {
+                        if (response.ok) {
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
+                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
+                        } else {
+                            // console.log('Something Wrong', response);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('An error occurred', error);
+                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://beanstalkedu.in/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
     }
 
     document.addEventListener('DOMContentLoaded', function () {
@@ -431,7 +584,7 @@ import Layout from "../../layouts/Layout.astro";
         color: #7C4C23;
         padding-top: 10px;
     }
-    #LearningArea, #LearningSubArea_copy{
+    #LearningArea, #LearningSubArea{
         font-size: 20px;
         color: #7C4C23;
         font-weight: bold;

src/pages/cross/v2.astro

@@ -11,14 +11,14 @@ import Layout from "../../layouts/Layout.astro";
                             <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>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
                 </div>
-                <div class="container mx-auto px-4">
+                <div class="container mx-auto px-4" id="snapshotDiv">
                     <p class="sm:text-2xl md:text-3xl lg:text-3xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="" class="flex flex-row place-content-between ">
@@ -96,29 +96,74 @@ import Layout from "../../layouts/Layout.astro";
             <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 id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </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 id="starFeedbackMessage" 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%);"></p>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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>
+                  <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 onclick="retryGame()" 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-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
+        </div>
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
         </div>
     </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+    function retryGame(){
+        window.location.reload();
+    }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userId');
+    const childId = params.get('childId');
     const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let wrongCount = 0;
     let url = window.location.href;
@@ -127,14 +172,18 @@ import Layout from "../../layouts/Layout.astro";
     let maxPoint = 9;
     let starValue; 
     let totalPoints = 0;
-    let maxStarValue = 5;
+    let maxScore = 9;
     let progress = 0;
     const progressBar = document.createElement('div');
-
+    let totalCorrectFromApi = 0;
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
@@ -170,12 +219,6 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
-        function showClipArt() {
-            const clipArtContainer = document.querySelector('.clip-art-container');
-
-            clipArtContainer.classList.remove('hidden');
-            clipArtContainer.classList.add('slide-in');
-        }
 
         function addStarScalingStyles() {
             const style = document.createElement('style');
@@ -266,24 +309,34 @@ import Layout from "../../layouts/Layout.astro";
         });
 
 
-        wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
-        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
+        const answersList = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
         
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
 
-        let userData = {
-            'gameName': gameName,
-            'gameID': gameId,
-            'userId': userId,
-            'gameTime': timeDifferenceInSeconds,
-            'score': totalPoints,
-            'gameStar': starValue
-        };
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
-        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');
@@ -331,52 +384,143 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
 
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-            .then(response => {
-                if (response.ok) {
-                    setTimeout(() => {
-                        if (response.ok) {
-                            if (response.status == 200) {
-                                document.getElementById('allParentDiv').style.display = 'block';
-                                loadingMainContainer.style.display = 'none';
-                                loadingDiv.style.display = 'none';
-                                starContainer.style.display = 'flex';
-                                starContainer.style.flexDirection = 'row';
-                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
-                                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);
-                } else {
-                    // Handle error
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
                 }
-            })
-            .catch(error => {
-                console.error('An error occurred', error);
-            });
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
+                    let userData = {
+                        'gameName': gameName,
+                        'gameID': gameId,
+                        'childId': childId,
+                        'gameTime': timeDifferenceInSeconds,
+                        'score': totalPoints,
+                        'gameStar': percentage
+                    };
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(userData)
+                    })
+                    .then(response => {
+                        if (response.ok) {
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
+                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
+                        } else {
+                            // Handle error
+                        }
+                    })
+                    .catch(error => {
+                        console.error('An error occurred', error);
+                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://beanstalkedu.in/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
     }
 
 
@@ -451,7 +595,7 @@ import Layout from "../../layouts/Layout.astro";
         color: #7C4C23;
         padding-top: 10px;
     }
-    #LearningArea, #LearningSubArea_copy{
+    #LearningArea, #LearningSubArea{
         font-size: 20px;
         color: #7C4C23;
         font-weight: bold;

src/pages/cross/v3.astro

@@ -12,15 +12,15 @@ import Layout from "../../layouts/Layout.astro";
                             <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>
-                            <button><img src="/assets/svg/reset.svg" alt=""></button>
+                            <button onclick="audioPlayAndPause()"><img src="/assets/svg/mute.svg" alt=""></button>
+                            <button onclick="retryGame()"><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
-                            <button><img src="/assets/svg/cancel.svg" alt=""></button>
+                            <button onclick="history.back();"><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
                     <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                 </div>
-                <div class="container mx-auto px-4">
+                <div class="container mx-auto px-4" id="snapshotDiv">
                     <div class="flex flex-col">
                         <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                         <!-- <p id="LearningSubArea"></p> -->
@@ -71,44 +71,92 @@ import Layout from "../../layouts/Layout.astro";
             <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 id="star-container" class="relative inline-flex items-center justify-center">
+                        <img src="/assets/bg-star.svg" alt="" class="block" />
+                        <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                    </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 id="starFeedbackMessage" 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%);"></p>
+                <div class="flex flex-row items-center" style="">
+                    <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                    <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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>
+                  <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 onclick="retryGame()" 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-0 right-0 hidden">
-                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-            </div>
+        </div>
+        <div>
+            <audio id="audioPlayer" controls class="hidden">
+                <source id="instrucAudio1" src="" type="audio/ogg">
+                <source id="instrucAudio2" src="" type="audio/mpeg">
+                Your browser does not support the audio element.
+            </audio>
+        </div>  
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
         </div>
     </main>
 </Layout>
+<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script is:inline>
+    let isPlaying = false;
+    function audioPlayAndPause(){
+        if(isPlaying === false){
+            document.getElementById('audioPlayer').play();
+            isPlaying = true;
+        }else if(isPlaying === true){
+            document.getElementById('audioPlayer').pause();
+            document.getElementById('audioPlayer').currentTime = 0;
+            isPlaying = false;
+        }
+    }
+        function retryGame(){
+            window.location.reload();
+        }
     const params = new URLSearchParams(window.location.search);
     const gameId = params.get('id');
-    const userId = params.get('userId');
+    const childId = params.get('childId');
     const gameName = params.get('gameName');
+    const assignmentId = params.get('assignmentId');
+    const worksheetId = params.get('worksheetId');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
     let startTime = Date.now();
     let gameData = null;
     let totalPoints = 0;
-    let starValue;
+    let wrongCount = 0;
     let url = window.location.href;
     let urlSplit = url.split('/');
     // let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
-    let maxStarValue = 5;
     let progress = 0;
     const progressBar = document.createElement('div');
-
+    let totalCorrectFromApi = 0;
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
+            let audioLink = `https://game-du.teachertrainingkolkata.in/assets/${gameData.instruction}.mp3`;
+            document.getElementById('instrucAudio1').src = audioLink;
+            document.getElementById('instrucAudio2').src = audioLink;
+            document.querySelector('audio').load();
             // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
@@ -117,18 +165,7 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById("label2").innerHTML = gameData.label2;
                 document.getElementById("label3").innerHTML = gameData.label3;
             }
-            // if(gameData.label1){
-            //     document.getElementById("label1").innerHTML = gameData.label1;
-            // }
-            // if(gameData.label2){
-            //     document.getElementById("label2").innerHTML = gameData.label2;
-            // }
-            // if(gameData.label3){
-            //     document.getElementById("label3").innerHTML = gameData.label3;
-            // }
-            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
-
+            
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             document.getElementById('descImage').src = assetsURL + gameData.descript_img;
             for (let i = 1; i <= 3; i++) {
@@ -138,12 +175,6 @@ import Layout from "../../layouts/Layout.astro";
                 }
             }
         });
-        function showClipArt() {
-        const clipArtContainer = document.querySelector('.clip-art-container');
-
-        clipArtContainer.classList.remove('hidden');
-        clipArtContainer.classList.add('slide-in');
-    }
 
     function addStarScalingStyles() {
         const style = document.createElement('style');
@@ -186,6 +217,7 @@ import Layout from "../../layouts/Layout.astro";
                 element.classList.add('redBorder');
             } else {
                 element.classList.add('greenBorder');
+                wrongCount += 1;
             }
         } else {
             wrongCount -= 1;
@@ -218,23 +250,33 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
 
-        totalPoints === 1 ? starValue = 5 : starValue = 3;
-        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
-
-        let userData = {
-            'gameName': gameName,
-            'gameID': gameId,
-            'userId': userId,
-            'gameTime': timeDifferenceInSeconds,
-            'score': totalPoints,
-            'gameStar': starValue
-        };
+        const answersList = ['a1', 'a2', 'a3'];
+        answersList.forEach((answer) => {
+            if (gameData[answer] === true) {
+                totalCorrectFromApi++;
+            }
+        });  
+        
+        let afterNegative = totalPoints - wrongCount;
+        let percentage = Math.round((afterNegative / totalCorrectFromApi ) * 10);
+        if(percentage <= 3){
+            percentage = 3
+        }
+        let feedbackMessage = '';
+        if (percentage >= 1 && percentage <= 3) {
+            feedbackMessage = "You're making progress! Let's keep going!";
+        } else if (percentage >= 4 && percentage <= 6) {
+            feedbackMessage = "Nice work! You're improving every day!";
+        } else if (percentage >= 7 && percentage <= 8) {
+            feedbackMessage = "Amazing work! Keep it up!";
+        } else if (percentage >= 9 && percentage <= 10) {
+            feedbackMessage = "Outstanding! You're a true superstar!";
+        } else {
+            feedbackMessage = "Invalid star value.";
+        }
         progressIncrement();
         addStarScalingStyles();
-        showClipArt();
-        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');
@@ -281,53 +323,144 @@ import Layout from "../../layouts/Layout.astro";
         calculationText.style.fontWeight = '600';
         calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
         containerDiv.appendChild(calculationText);
-        // console.log(userData);
-        fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-            .then(response => {
-                if (response.ok) {
-                    setTimeout(() => {
-                        if (response.ok) {
-                            if (response.status == 200) {
-                                document.getElementById('allParentDiv').style.display = 'block';
-                                loadingMainContainer.style.display = 'none';
-                                loadingDiv.style.display = 'none';
-                                starContainer.style.display = 'flex';
-                                starContainer.style.flexDirection = 'row';
-                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
-                                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);
-                } else {
-                    // console.log('Something Wrong', response);
+
+
+        let snapImage = '';
+        const div = document.getElementById("snapshotDiv");
+        const images = div.getElementsByTagName('img');
+        let loadedImagesCount = 0;
+        for (let img of images) {
+            if (img.complete) {
+                loadedImagesCount++;
+            } else {
+                img.onload = () => {
+                    loadedImagesCount++;
+                    if (loadedImagesCount === images.length) {
+                        takeSnapshot();
+                    }
+                };
+            }
+        }
+        if (loadedImagesCount === images.length) {
+            takeSnapshot();
+        }
+        async function takeSnapshot() {
+            try {
+                const canvas = await html2canvas(div, {
+                    useCORS: true,
+                    allowTaint: true,
+                });
+                snapImage = canvas.toDataURL("image/jpeg");
+                await saveScreenshot(snapImage);
+            } catch (error) {
+                console.error('Error in takeSnapshot:', error.message || error);
+            }
+        }
+        async function saveScreenshot(snapImage) {
+            const saveUserDataForScreenshot = {
+                gameName: gameName,
+                gameID: gameId,      
+                screenShot: snapImage,
+                childId: childId,      
+                gameTime: timeDifferenceInSeconds         
+            };
+            try {
+                const saveResponse = await fetch('https://api.teachertrainingkolkata.in/api/saveGalleryImage', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(saveUserDataForScreenshot),
+                });
+                if (!saveResponse.ok) {
+                    const errorDetails = await saveResponse.text();
+                    console.error(`SaveGalleryImage failed: ${saveResponse.status} ${saveResponse.statusText}`);
+                    console.error('Response Body:', errorDetails);
+                    throw new Error(`Failed to save screenshot: ${saveResponse.statusText}`);
                 }
-            })
-            .catch(error => {
-                console.error('An error occurred', error);
-            });
+                const saveResult = await saveResponse.json();
+                if (saveResult.screenshotUrl) {
+                    let userData = {
+                        'gameName': gameName,
+                        'gameID': gameId,
+                        'childId': childId,
+                        'gameTime': timeDifferenceInSeconds,
+                        'score': totalPoints,
+                        'gameStar': percentage
+                    };
+                    fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore2`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify(userData)
+                    })
+                    .then(response => {
+                        if (response.ok) {
+                            setTimeout(() => {
+                                if (response.ok) {
+                                    if (response.status == 200) {
+                                        document.getElementById('saved-toast').classList.remove('hidden');
+                                        setTimeout(() => {
+                                            document.getElementById('saved-toast').classList.add('hidden');
+                                        }, 2000);
+                                        document.getElementById('allParentDiv').style.display = 'block';
+                                        loadingMainContainer.style.display = 'none';
+                                        loadingDiv.style.display = 'none';
+                                        starContainer.style.display = 'flex';
+                                        starContainer.style.flexDirection = 'row';
+                                        document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                        document.getElementById('get-star-value').innerHTML = percentage;
+                                        scoreBoard.style.display = 'flex';
+                                    }
+                                } else {
+                                console.log('Something went wrong', response);
+                                }
+                            }, 100);
+                        } else {
+                            // console.log('Something Wrong', response);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('An error occurred', error);
+                    });
+                    const userAnotherData = {
+                        assignmentId: assignmentId,
+                        worksheetId: worksheetId,
+                        studentId: childId,
+                        submissionFile: saveResult.screenshotUrl.split('/')[4].split('?')[0],
+                    };
+                    const authToken = 'Bearer eyJhbGciOiJSUzUxMiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkZW50aXR5SWQiOiI2NjNjNGMzNjRiNmYzZjU0YmExZjcxMTUiLCJfaWQiOiI2NjNjNGMzNjBiOWYyZDk5MGQyNWYwYjMiLCJ0eXBlIjoiQUtBREVNWSIsImRldmljZUlkIjoiMDBqNXJtODl5b3BvNjh1a2Yyb2c5cTdoIn0sImlhdCI6MTczNjM5ODkwNCwiZXhwIjoxNzM3MDAzNzA0LCJpc3MiOiJidXp6T25lIn0.vhH0zTkVisnbK6n5aPgV3RrtmpP095Gtz6ayUc29XerEV-XPVhYwg06JQnm2FWGPtadEJ2Ea5z6_YNp5Kz9DENL9LxpYYuXRUOGvMEaVM5YZOYQ88viqxM7SIvxElIsc8cQeJr5v-4ov4MyOuXws7R5MDDO2PuzYdwaA52GXbQ0LO3aFGOQL7nWPKVYqFWCQe_T-1JphbsGStHivcmUy8_DAdjs0VpXFJKiQm6jcWQO3j3uOUJSi14af4ZvrUPkjIT92OOHiZTL7CUbbFt4yktnw3Gm2Fv6lS5pamSJpVJnGJQ6ebjd70IXnE49Mn9IK9AssnjTBh2DaNeVc0C1z9Q'; // Your token
+                    try {
+                        const submitResponse = await fetch('https://beanstalkedu.in/api/one/v1/akademy/worksheet/submissions', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': authToken,
+                            },
+                            body: JSON.stringify(userAnotherData),
+                        });
+                        if (!submitResponse.ok) {
+                            const errorDetails = await submitResponse.text();
+                            console.error(`SubmitWorksheet failed: ${submitResponse.status} ${submitResponse.statusText}`);
+                            console.error('Response Body:', errorDetails);
+                            throw new Error(`Failed to submit worksheet: ${submitResponse.statusText}`);
+                        }
+                        const submitResult = await submitResponse.json();
+                        // console.log('SubmitWorksheet API success:', submitResult);
+                    } catch (error) {
+                        console.error('Error in SubmitWorksheet API call:', error.message || error);
+                    }
+                } else {
+                    console.error('SaveGalleryImage did not return a valid screenshotUrl:', saveResult);
+                }
+
+
+            } catch (error) {
+                console.error('Error in saveScreenshot:', error.message || error);
+                throw error;
+            }
+        }
     }
 
 

src/pages/drag/dragdrop_phonics.astro

@@ -5,36 +5,44 @@ import Layout from '../../layouts/Layout.astro';
 	<main>
 		<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 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 id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+            </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 id="starFeedbackMessage" 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%);"></p>
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
       </div>
       <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
-          <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-      </div>
+        <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>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+    </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');
-    }
+    // 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 = {
@@ -56,6 +64,9 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;
 
   if(isMobile){
         topLogoWidth = 4.5;
@@ -139,9 +150,30 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {};
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_drop_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){
           imageCustomWidth = "?width=80";
@@ -239,6 +271,9 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -410,10 +445,10 @@ import Layout from '../../layouts/Layout.astro';
         // window.load
 
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
 
         submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
@@ -429,10 +464,22 @@ import Layout from '../../layouts/Layout.astro';
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
-          showAnimation();
+          // showAnimation();
         })
         let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
 
+            })
+          }
 
         if(isMobile){
           blocks1Width1 = 180;

src/pages/drag/index.astro

@@ -1,45 +1,51 @@
 ---
 import Layout from '../../layouts/Layout.astro';
 
-let starNumberOfTime = localStorage.getItem('starValue');
-console.log(starNumberOfTime);
-const numberOfTimes = starNumberOfTime;
+// let starNumberOfTime = localStorage.getItem('starValue');
+// console.log(starNumberOfTime);
+// const numberOfTimes = starNumberOfTime;
 ---
 <Layout title="Drag Game">
-	<main>
+	<main> 
 		<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 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 class="flex flex-row space-x-4 items-center justify-center ">
+            <div id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+            </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 id="starFeedbackMessage" 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%);"></p>
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
-      </div>
-      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+      </div> 
+      <!-- <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
           <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-      </div>
+      </div> -->
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+  </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');
-  }
+  // 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 = {
@@ -47,7 +53,7 @@ const numberOfTimes = starNumberOfTime;
       y: window.innerHeight / 4,
       width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
       height: window.innerHeight / 2,
-  };
+  }; 
   let submitButton;
   let formattedDateTime;
   let shortUniqueID;
@@ -59,26 +65,29 @@ const numberOfTimes = starNumberOfTime;
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;
 
   if(isMobile){
-        topLogoWidth = 4.5;
-        muteIconWidth = 1.8;
-        resetIconWidth = 1.47;
-        tickIconWidth = 1.24;
-        cancelIconWidth = 1.08;
-    }else if(isTab){
-        topLogoWidth = 4.5;
-        muteIconWidth = 1.6;
-        resetIconWidth = 1.43;
-        tickIconWidth = 1.29;
-        cancelIconWidth = 1.18;
-    }else{
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
-    }
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.8;
+      resetIconWidth = 1.47;
+      tickIconWidth = 1.24;
+      cancelIconWidth = 1.08;
+  }else if(isTab){
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.6;
+      resetIconWidth = 1.43;
+      tickIconWidth = 1.29;
+      cancelIconWidth = 1.18;
+  }else{
+      topLogoWidth = 6;
+      muteIconWidth = 1.3;
+      resetIconWidth = 1.26;
+      tickIconWidth = 1.222;
+      cancelIconWidth = 1.185;
+  }
   if(isMobile){
       noticeWidth = 100;
       noticeHeight = 0;
@@ -143,31 +152,35 @@ const numberOfTimes = starNumberOfTime;
       block: null,
     },
   ];
-  // const blockMatches = [
-  //   {
-  //     blockName: "blocks1",
-  //     targetName: "target1",
-  //   },
-  //   {
-  //     blockName: "blocks2",
-  //     targetName: "target2",
-  //   },
-  //   {
-  //     blockName: "blocks3",
-  //     targetName: "target3",
-  //   },
-  //   {
-  //     blockName: "blocks4",
-  //     targetName: "target4",
-  //   },
-  // ];
-  // console.log(blockMatches.blockName, blockMatches.targetName)
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
+        console.log(data)
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
+        // console.log(audioData)
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
@@ -264,6 +277,9 @@ const numberOfTimes = starNumberOfTime;
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -340,7 +356,7 @@ const numberOfTimes = starNumberOfTime;
               },
             ];
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
-            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
             this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
             this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
@@ -397,18 +413,11 @@ const numberOfTimes = starNumberOfTime;
         graphics.strokePath();
         submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
 
-        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
-        //   font: '600 30px Quicksand',
-        //   fill: '#fff',
-        //   backgroundColor: 'blue',
-        //   padding: { x: 20, y: 10 },
-        // }).setDepth(1);
-        
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
@@ -417,6 +426,20 @@ const numberOfTimes = starNumberOfTime;
         // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 680, "target4");
         // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
+          if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
+          
 
         const blocks = [
           {
@@ -450,7 +473,7 @@ const numberOfTimes = starNumberOfTime;
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
-          showAnimation();
+          // showAnimation();
           
           
         });
@@ -465,7 +488,7 @@ const numberOfTimes = starNumberOfTime;
             counter++;
             return 'borderCorrect';
           } else {
-            console.log(`Score Total: ${scoreTotal}`); 
+            // console.log(`Score Total: ${scoreTotal}`); 
             return 'borderWrong';
           }
         };

src/pages/drag/match_phonics.astro

@@ -11,14 +11,17 @@ import Layout from '../../layouts/Layout.astro';
       <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 id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+            </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 id="starFeedbackMessage" 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%);"></p>
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -27,15 +30,19 @@ import Layout from '../../layouts/Layout.astro';
         <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
     </div>
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+    </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');
-    }
+    // 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 = {
@@ -55,6 +62,9 @@ import Layout from '../../layouts/Layout.astro';
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;
 
   if(isMobile){
         topLogoWidth = 4.5;
@@ -144,9 +154,30 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/drag_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
@@ -243,6 +274,9 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tick", '/assets/tick.png');
@@ -327,7 +361,7 @@ import Layout from '../../layouts/Layout.astro';
               const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
               const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
-            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
             this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
             this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
@@ -372,10 +406,10 @@ import Layout from '../../layouts/Layout.astro';
         //   }); 
         // };
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
@@ -385,6 +419,19 @@ import Layout from '../../layouts/Layout.astro';
         this.add.image(displayW * 0.9-32, 680, "target4");
         // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
 
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
 
         const graphics = this.add.graphics();
         const x = 0; const y = 54;
@@ -410,7 +457,7 @@ import Layout from '../../layouts/Layout.astro';
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
-          showAnimation();
+          // showAnimation();
         })
        
         const blocks = [

src/pages/drag/testv3.astro

@@ -365,7 +365,7 @@ import Layout from '../../layouts/Layout.astro';
               fill: '#7c4c23',
             }).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
-            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
             this.add.text(leftTargetZoneW - 45, 240, data.left_image1_name).setTint(0x7c4c23);
             this.add.text(leftTargetZoneW - 45, 409, data.left_image2_name).setTint(0x7c4c23);      

src/pages/drag/v2.astro

@@ -5,37 +5,43 @@ import Layout from '../../layouts/Layout.astro';
 	<main>
 		<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 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 class="flex flex-row space-x-4 items-center justify-center ">
+            <div id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+            </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 id="starFeedbackMessage" 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%);"></p>
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
       </div>
-      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
-        <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-    </div>
+      <!-- <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+          <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+      </div> -->
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+        Worksheet saved successfully
+    </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');
-    }
+    // 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 = {
@@ -56,6 +62,10 @@ import Layout from '../../layouts/Layout.astro';
   let tickIconWidth;
   let cancelIconWidth;
 
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;
+
   if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
@@ -144,9 +154,31 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {}
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
+
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
@@ -243,6 +275,9 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tick", '/assets/tick.png');
@@ -327,7 +362,7 @@ import Layout from '../../layouts/Layout.astro';
                 const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
                 const descrptText = this.add.text(screenCenterX, 110, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
-            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
             this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
             this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      
@@ -372,10 +407,10 @@ import Layout from '../../layouts/Layout.astro';
         //   }); 
         // };
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
@@ -384,7 +419,19 @@ import Layout from '../../layouts/Layout.astro';
         // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 680, "target4");
         // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
 
+            })
+          }
 
         const graphics = this.add.graphics();
         const x = 0; const y = 54;
@@ -409,7 +456,7 @@ import Layout from '../../layouts/Layout.astro';
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
-          showAnimation();
+          // showAnimation();
         })
        
         const blocks = [

src/pages/drag/v20.astro

@@ -309,7 +309,7 @@ import Layout from '../../layouts/Layout.astro';
               fill: '#7c4c23',
             }).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
-            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
+            // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
             this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
             this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);      

src/pages/drag/v3.astro

@@ -11,14 +11,17 @@ import Layout from '../../layouts/Layout.astro';
       <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 id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+            </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 id="starFeedbackMessage" 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%);"></p>
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
@@ -27,15 +30,19 @@ import Layout from '../../layouts/Layout.astro';
         <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
     </div>
 		</div>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+    </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');
-    }
+    // 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 = {
@@ -59,6 +66,9 @@ import Layout from '../../layouts/Layout.astro';
   let blockMatches;
   let retryButtonWidth;
   let leftTargetZoneW;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;
 
   if(isMobile){
         topLogoWidth = 4.5;
@@ -176,9 +186,30 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {};
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
+  const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){
           imageCustomWidth = "?width=100";
@@ -274,6 +305,9 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tick", '/assets/tick.png');
@@ -422,12 +456,25 @@ import Layout from '../../layouts/Layout.astro';
         graphics.strokePath();
 
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
 
         submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -439,7 +486,7 @@ import Layout from '../../layouts/Layout.astro';
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
-          showAnimation();
+          // showAnimation();
         })
 
         
@@ -499,27 +546,16 @@ import Layout from '../../layouts/Layout.astro';
         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) {
+          const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
+          if (match !== undefined) {
             scoreTotal++;
             counter++;
+            console.log(`Score Total: ${scoreTotal}`); 
             return 'borderCorrect';
           } else {
-            console.log(`Score Total: ${scoreTotal}`); 
+            // console.log(`Score Total: ${scoreTotal}`); 
             return 'borderWrong';
           }
-        
-        // if(counter === 8){
-        //     // console.log(counter)
-        //     submitButton.setVisible(true);
-        //     retryButton.setVisible(true);
-        // }
         };
         
         const droppedBlocks = [];
@@ -542,6 +578,7 @@ import Layout from '../../layouts/Layout.astro';
           newBlock.on("dragend", () => {
             newBlock.setScale(1.0);
             let droppedOnTargetZone = false;
+            
             targetZones.forEach((targetZone, targetIndex) => {
               if (
                 Phaser.Geom.Intersects.RectangleToRectangle(
@@ -554,8 +591,8 @@ import Layout from '../../layouts/Layout.astro';
                   newBlock.disableInteractive();
                   targetZone.block = newBlock;
                   droppedBlocks.push(newBlock);
-                  if (isMatch(newBlock.texture.key, targetZone.name)) {
-                  }
+                  
+                  // Call isMatch only once
                   const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
                   targetZoneBorders[targetIndex].setTexture(borderCondition);
                 } else {
@@ -571,11 +608,12 @@ import Layout from '../../layouts/Layout.astro';
             if (!droppedOnTargetZone) {
               newBlock.setPosition(block.x, block.y);
             }
-            if (droppedBlocks.length === targetZones.length) 
-            {
+
+            if (droppedBlocks.length === targetZones.length) {
               displayResult(droppedBlocks);
             }
           });
+
         });
         // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
         retryButton.setInteractive().on('pointerdown', () => {

src/pages/drag/v4.astro

@@ -5,36 +5,44 @@ import Layout from '../../layouts/Layout.astro';
 	<main>
 		<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 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 id="star-container" class="relative inline-flex items-center justify-center">
+              <img src="/assets/bg-star.svg" alt="" class="block" />
+              <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+            </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 id="starFeedbackMessage" 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%);"></p>
+          <div class="flex flex-row items-center" style="">
+              <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+              <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 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 onclick="retryGame();" class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
           </div>
         </div>
       </div>
-      <div id="wsSavedImg" class="clip-art-container absolute -z-10 bottom-0 right-0">
-          <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
-      </div>
+      <div id="wsSavedImg" class="clip-art-container -z-10 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>
+    <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+      Worksheet saved successfully
+    </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');
-    }
+    // 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 = {
@@ -59,6 +67,9 @@ import Layout from '../../layouts/Layout.astro';
   let leftTargetZoneW;
   let rightTargetZoneW;
   let retryButtonWidth;
+  let audioData;
+  let audioFileId = false;
+  let isPlaying = false;
 
   if(isMobile){
         topLogoWidth = 4.5;
@@ -142,9 +153,30 @@ import Layout from '../../layouts/Layout.astro';
   var assetsList = {};
   const params = new URLSearchParams(window.location.search);
   const paramsID = params.get('id');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('starClipart');
+            // document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                imgElement.src = `/assets/${spriteNames}.gif`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "starClipart" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+    displaySprite();
   const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
       .then(response => response.json())
       .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
         const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
@@ -238,6 +270,9 @@ import Layout from '../../layouts/Layout.astro';
         for (var i = 0; i < 5; i++) {
             this.load.image('logo'+i, '/assets/background.jpg');
         }
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image('topLogo', '/assets/top_logo.svg');
         // this.load.image("tick", '/assets/tick.png');
@@ -249,8 +284,6 @@ import Layout from '../../layouts/Layout.astro';
 
         // this.load.image("retryIcon", "/assets/svg/retry.svg")
         this.load.image("border", '/assets/squar.png');
-
-
           this.load.spritesheet("blocks1", assetsList.element5,{
           frameWidth: 100,
           frameHeight: 100,
@@ -405,10 +438,23 @@ import Layout from '../../layouts/Layout.astro';
         graphics.strokePath();
         
         this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
-        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
+        if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            soundButton.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
         //   font: '600 30px Quicksand',
         //   fill: '#fff',
@@ -420,7 +466,7 @@ import Layout from '../../layouts/Layout.astro';
           // window.location.reload();
           // windowLoad();
           submitUserData(this);
-          showAnimation();
+          // showAnimation();
         })
         // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
 
@@ -573,7 +619,7 @@ import Layout from '../../layouts/Layout.astro';
           // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)

src/pages/drawing/drawing_phonics.astro

@@ -3,14 +3,141 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
-        <div>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </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" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div>
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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 id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></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>
+                </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 params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err);
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    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');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
+    }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
 
@@ -32,24 +159,34 @@ import Layout from '../../layouts/Layout.astro';
     let shortUniqueID;
     let scoreTotal = 0;
     let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
+
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         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){
         submitWidth = 250;
@@ -89,11 +226,13 @@ import Layout from '../../layouts/Layout.astro';
     // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
     // console.log(shortUniqueID);
 
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -133,6 +272,9 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -142,6 +284,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -175,15 +318,34 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.lineTo(x + lineWidth, y);
             borderBottom.strokePath();
 
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            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();
+                graphics.clear();
             });
+            if(audioFileId === true){
+                let instructionAudio = this.sound.add('instructAudio')
+                muteIcon.setInteractive().on('pointerdown', () => {
+                if(isPlaying === false){
+                    instructionAudio.play()
+                    isPlaying = true
+                } else if(isPlaying === true) {
+                    instructionAudio.stop();
+                    isPlaying = false
+                }
+
+                })
+            }
             submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
@@ -193,8 +355,18 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                // windowLoad();
                 submitUserData(this);
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                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',};
@@ -216,7 +388,12 @@ import Layout from '../../layouts/Layout.astro';
                 outlineImage.setDepth(1).setScale(0.5);   
             }  
 
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
@@ -229,7 +406,16 @@ 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 colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
             if(!isMobile){
@@ -245,6 +431,14 @@ import Layout from '../../layouts/Layout.astro';
 
 
             // Create the color picker
+            let colorAndClearContainer = document.createElement('div');
+            colorAndClearContainer.style.display = 'flex';
+            colorAndClearContainer.flexDirection = 'row';
+            colorAndClearContainer.style.alignItems = 'center';
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
             colorPicker.value = selectedColor;
@@ -271,7 +465,10 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+
+            colorAndClearContainer.appendChild(colorPicker)
+            colorAndClearContainer.appendChild(clearButton)
+            colorContainer.appendChild(colorAndClearContainer);
             // const colors = data.colors;
             // var colors = colorList;
             var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -499,20 +696,19 @@ import Layout from '../../layouts/Layout.astro';
             // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
-            const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+
             // clearButton.style.border = '3px solid blue';
             // clearButton.style.color = 'blue';
             // clearButton.style.width = 'fit-content';
             // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                clearButton.style.display = 'none';
-                buttonsContainer.style.top = '9.5%';
-                buttonsContainer.style.marginLeft = '30px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
+            // if(isMobile){
+            //     clearButton.style.padding = '2px 8px';
+            //     clearButton.style.display = 'none';
+            //     buttonsContainer.style.top = '9.5%';
+            //     buttonsContainer.style.marginLeft = '30px';
+            // } else {
+            //     clearButton.style.padding = '5px 10px';
+            // }        
             // clearButton.style.fontWeight = 'bold';
             // clearButton.style.borderRadius = '20%';
             // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -525,7 +721,7 @@ import Layout from '../../layouts/Layout.astro';
                 }else{
                     clearButton.style.display = 'block';
                 }
-            })
+            }) 
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
@@ -561,7 +757,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            // buttonsContainer.appendChild(clearButton);
             // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
@@ -655,10 +851,17 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
@@ -790,12 +993,49 @@ import Layout from '../../layouts/Layout.astro';
             slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
         };
         const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
         customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
         customCursor.x = this.input.x;
         customCursor.y = this.input.y;
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
+        
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
     }
 
     // function update() {
@@ -835,5 +1075,30 @@ import Layout from '../../layouts/Layout.astro';
     .clear-button {
         background-color: blue;
     }
-</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> -->
+    /* 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>

src/pages/drawing/drawing_writo.astro

@@ -3,14 +3,139 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
-        <div>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </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" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div> 
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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 id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></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>
+                </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 params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err);
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    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');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
+    }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
 
@@ -32,24 +157,34 @@ import Layout from '../../layouts/Layout.astro';
     let shortUniqueID;
     let scoreTotal = 0;
     let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
+
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         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){
@@ -90,11 +225,13 @@ import Layout from '../../layouts/Layout.astro';
     // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
     // console.log(shortUniqueID);
 
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -134,6 +271,9 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -143,6 +283,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -166,6 +307,8 @@ import Layout from '../../layouts/Layout.astro';
             });
             // window.load
 
+
+
             const borderBottom = this.add.graphics();
             const x = 0; const y = 54;
             const lineWidth = window.innerWidth;
@@ -176,14 +319,33 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.lineTo(x + lineWidth, y);
             borderBottom.strokePath();
 
-            this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
-            submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
 
+            this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            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");
+
+            if(audioFileId === true){
+                let instructionAudio = this.sound.add('instructAudio')
+                muteIcon.setInteractive().on('pointerdown', () => {
+                if(isPlaying === false){
+                    instructionAudio.play()
+                    isPlaying = true
+                } else if(isPlaying === true) {
+                    instructionAudio.stop();
+                    isPlaying = false
+                }
+
+                })
+            }
 
             retryButton.setInteractive().on('pointerdown', () => {
-                window.location.reload();
+                graphics.clear();
             });
             submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
 
@@ -195,8 +357,19 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                // windowLoad();
                 submitUserData(this);
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                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',};
@@ -226,7 +399,12 @@ import Layout from '../../layouts/Layout.astro';
             // } else{
             //     outlineImage.setDepth(1).setScale(0.65);   
             // }  
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
@@ -239,7 +417,16 @@ 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 colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
             if(!isMobile){
@@ -253,6 +440,14 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
 
+            let colorAndClearContainer = document.createElement('div');
+            colorAndClearContainer.style.display = 'flex';
+            colorAndClearContainer.flexDirection = 'row';
+            colorAndClearContainer.style.alignItems = 'center';
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+
 
             // Create the color picker
             const colorPicker = document.createElement('input');
@@ -281,7 +476,9 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+            colorAndClearContainer.appendChild(colorPicker)
+            colorAndClearContainer.appendChild(clearButton)
+            colorContainer.appendChild(colorAndClearContainer);
             // const colors = data.colors;
             // var colors = colorList;
             var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -507,22 +704,7 @@ import Layout from '../../layouts/Layout.astro';
             } 
             buttonsContainer.style.left = '20px';
             // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
-            document.body.appendChild(buttonsContainer);
-            // Create the Clear button
-            const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                clearButton.style.display = 'none';
-                buttonsContainer.style.top = '9.5%';
-                buttonsContainer.style.marginLeft = '30px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
+            document.body.appendChild(buttonsContainer);       
             // clearButton.style.fontWeight = 'bold';
             // clearButton.style.borderRadius = '20%';
             // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -571,7 +753,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            // buttonsContainer.appendChild(clearButton);
             // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
@@ -665,10 +847,18 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
+
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
@@ -800,50 +990,76 @@ import Layout from '../../layouts/Layout.astro';
             slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
         };
         const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
         customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
         customCursor.x = this.input.x;
         customCursor.y = this.input.y;
-    }
-
-    // function update() {
-    //     const slider = document.querySelector('input[type="range"]');
+        customCursor.moveTo(0, - cursorSize + 3);  
+        customCursor.lineTo(0, cursorSize - 3);   
         
-    //     if (slider && !isDrawing) {
-    //         const sliderValue = parseInt(slider.value);
-    //         const max = parseInt(slider.max);
-    //         const width = slider.offsetWidth;
-    //         const offsetX = (sliderValue - 2) / (max - 2) * width;
-    //         slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
-    //     }
+        customCursor.moveTo(- cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize - 3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
 
-    //     const cursorSize = brushSize * cursorSizeMultiplier;
-    //     const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
-
-    //     // Assuming 'this' refers to your Phaser.Scene instance
-    //     if (!this.customCursor) {
-    //         // Create the custom cursor sprite
-    //         this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
-    //         this.customCursor.setOrigin(0.3, 0.8);
-    //     }
-
-    //     // Set the tint or fill color dynamically based on the selectedColor
-    //     const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
-    //     this.customCursor.setTint(color);
-
-    //     // Resize the cursor
-    //     this.customCursor.setScale( cursorScale);
-
-    //     // Position the cursor at the current mouse pointer coordinates
-    //     this.customCursor.x = this.input.x;
-    //     this.customCursor.y = this.input.y;
-    // }
+            customCursor.moveTo(0, - cursorSize + 3);  
+            customCursor.lineTo(0, cursorSize - 3);   
+            
+            customCursor.moveTo(- cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize - 3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, - cursorSize + 3);  
+            customCursor.lineTo(0, cursorSize - 3);   
+            
+            customCursor.moveTo(- cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize - 3, 0);   
+            customCursor.strokePath();  
+        }
+    }
 </script>
 <style>
-    .clear-button {
-        background-color: blue;
+    /* Animation styles */
+    @keyframes slideInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(100%); /* Start below the viewport */
     }
-</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> -->
+    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>

src/pages/drawing/index.astro

@@ -3,6 +3,14 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </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>
@@ -10,38 +18,42 @@ import Layout from '../../layouts/Layout.astro';
             <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 id="star-container" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </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 class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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>
+                        <button onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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>
+                            <button id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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>
             </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="w-full max-w-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
                     <div class="flex justify-between p-3">
-                        <p class="text-[19px] font-[700]">Attempt 2</p>
+                        <p id="attemptCount" class="text-[19px] font-[700]"></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">
@@ -49,11 +61,6 @@ import Layout from '../../layouts/Layout.astro';
 
                         <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>
@@ -61,48 +68,76 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
-    
 </Layout>
 <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."
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ];
+    // starClipart
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                // console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    // const jsonData = galleryData;
+    // const jsonData = [
+    //     {
+    //         "image": "/assets/back.jpeg"
+    //     },
+    //     {
+    //         "image": "/assets/background.jpg"
+    //     },
+    //     {
+    //         "image": "/assets/backgroundImage.png"
+    //     },
+    //     {
+    //         "image": "/assets/beanieImage.png"
+    //     }
+    // ];
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err);
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
         }
-    ];
-    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();
-    })
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
     document.getElementById('prevButton').addEventListener('click', () => {
-        currentSlide = (currentSlide - 1 + jsonData.length) % jsonData.length;
-        updateSlide();
-    })
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
     updateSlide();
     let parentMainContainer = document.getElementById('parentMainContainer');
     let gallerySliderId = document.getElementById('gallerySliderId');
@@ -113,8 +148,11 @@ import Layout from '../../layouts/Layout.astro';
     }
     function showAnimation() {
         const clipArt = document.querySelector('.clip-art');
-        clipArt.classList.add('show');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
     }
+
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
 
@@ -142,6 +180,10 @@ import Layout from '../../layouts/Layout.astro';
     let muteIcon;
     let retryButton;
     let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.65;
@@ -203,11 +245,13 @@ import Layout from '../../layouts/Layout.astro';
     // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
     // console.log(shortUniqueID);
 
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -248,6 +292,9 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -297,6 +344,19 @@ import Layout from '../../layouts/Layout.astro';
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
             galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
 
+            if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            muteIcon.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
 
             retryButton.setInteractive().on('pointerdown', () => {
                 // window.location.reload();
@@ -317,6 +377,7 @@ import Layout from '../../layouts/Layout.astro';
             submitButton.setInteractive().on('pointerdown', () => {
                 submitUserData(this);
                 showAnimation();
+                document.getElementById('savedAudioMessage').play();
                 parentMainContainer.classList.remove('hidden');
                 if(isMobile){
                     colorContainer.style.display = 'none';
@@ -344,8 +405,15 @@ import Layout from '../../layouts/Layout.astro';
                 outlineImage.setDepth(1).setScale(0.40);
             } else{
                 outlineImage.setDepth(1).setScale(0.65);   
-            }  
+            }
+            
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.zIndex = '1';
             colorContainer.style.position = 'absolute';
@@ -701,13 +769,17 @@ import Layout from '../../layouts/Layout.astro';
             eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
             eraserButton.addEventListener('click', () => {
             isErasing = !isErasing;
+            erase = false;
                 if (isErasing) {
-                    eraserButton.style.border = '2px solid #0348A8';
+                    erase = true;
+                    eraserButton.style.border = '3px solid #0348A8';
+                    eraserButton.style.backgroundColor = '#0348A820';
                 } else {
                     // Return to drawing mode
                     // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
                     eraserButton.style.color = 'blue';
                     eraserButton.style.border = 'none';
+                    eraserButton.style.backgroundColor = 'transparent';
                 }
             });
             // Add the Clear and Eraser buttons to the container
@@ -836,85 +908,6 @@ import Layout from '../../layouts/Layout.astro';
         });
     }
 
-    // const url = window.location.href;
-    // const gameName = url.split('/');
-    // const gameType = gameName[3].split('?id=');        
-    // function submitUserData(drawingZone) {
-    //     let imageCode;
-    //     // console.log(drawingZone);
-    //     drawingZone.renderer.snapshot((image) => {
-    //         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 = 'my_drawing.png';
-    //         link.click();
-    //         document.body.removeChild(image);
-    //         imageCode = image.src;
-            
-
-    //         let userData = {
-    //         'userID': 'drawing@beanstalkedu.com',
-    //         'gameType': gameType[0],
-    //         'gameID': gameType[1],
-    //         'screenShot': imageCode
-    //         // 'starts': formattedDateTime,
-    //         // 'game_start' : gameStartTime,
-    //         };
-    //         console.log(userData);
-
-    //         fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
-    //         method: 'POST',
-    //         headers: {
-    //             'Content-Type' : 'application/json'
-    //         },
-    //         body: JSON.stringify(userData)
-    //         })
-    //         .then(response => {
-    //             if(response.ok){
-    //             console.log('Data Saved', response)
-    //             } else{
-    //             // console.log('Something Wrong', response)
-    //             }
-    //         })
-    //         .catch(error => {
-    //             console.error('An error occured', error)
-    //         }); 
-                
-    //             // Clear the drawing
-    //             // graphics.clear();
-    //         });        
-    // };
-    // function captureSnapshot(drawingZone) {
-    //     submitButton.setVisible(false);
-    //     // snapNotice.setVisible(true);
-    //     snapshotButton.setVisible(false);
-    //     customCursor.setVisible(false);
-    //     drawingZone.renderer.snapshot((image) => {
-    //         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 = 'my_drawing.png';
-    //         link.click();
-    //         document.body.removeChild(image);
-            
-    //         // Clear the drawing
-    //         // graphics.clear();
-    //     });
-    // }
     function startDrawing(x, y) {
         if (!isErasing) {
             graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
@@ -952,46 +945,50 @@ import Layout from '../../layouts/Layout.astro';
             slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
         };
         const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
         customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
         customCursor.x = this.input.x;
         customCursor.y = this.input.y;
-    }
-
-    // function update() {
-    //     const slider = document.querySelector('input[type="range"]');
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
         
-    //     if (slider && !isDrawing) {
-    //         const sliderValue = parseInt(slider.value);
-    //         const max = parseInt(slider.max);
-    //         const width = slider.offsetWidth;
-    //         const offsetX = (sliderValue - 2) / (max - 2) * width;
-    //         slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
-    //     }
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
 
-    //     const cursorSize = brushSize * cursorSizeMultiplier;
-    //     const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
-
-    //     // Assuming 'this' refers to your Phaser.Scene instance
-    //     if (!this.customCursor) {
-    //         // Create the custom cursor sprite
-    //         this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
-    //         this.customCursor.setOrigin(0.3, 0.8);
-    //     }
-
-    //     // Set the tint or fill color dynamically based on the selectedColor
-    //     const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
-    //     this.customCursor.setTint(color);
-
-    //     // Resize the cursor
-    //     this.customCursor.setScale( cursorScale);
-
-    //     // Position the cursor at the current mouse pointer coordinates
-    //     this.customCursor.x = this.input.x;
-    //     this.customCursor.y = this.input.y;
-    // }
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
+    }
 </script>
 <style>
     .clear-button {
@@ -1014,20 +1011,24 @@ import Layout from '../../layouts/Layout.astro';
     }
 
     .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 */
+        opacity: 0; /* Initially transparent */
+        transform: translateX(100%); /* Start off-screen to the right */
+        transition: transform 1s ease, opacity 1s ease; /* Smooth transition */
     }
 
     .clip-art.show {
-        transform: translateX(0); /* Move the image into view */
         opacity: 1; /* Fade in */
+        transform: translateX(0); /* Slide in from the right */
     }
+
+
+
+
     .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> -->

src/pages/drawing/v2.astro

@@ -3,38 +3,138 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
-		<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>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </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" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div> 
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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 id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></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>
+                </div>
+            </div>
         </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>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
 		<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 params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err);
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    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');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
     }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
@@ -65,24 +165,34 @@ import Layout from '../../layouts/Layout.astro';
     let noticeWidth;
     let noticeHeight;
     let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
+
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.8;
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         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){
         submitWidth = 250;
@@ -132,11 +242,13 @@ import Layout from '../../layouts/Layout.astro';
         return result;
     }
 
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         colorList = data.colors;
         defaultColor = colorList[0];
     const {image1, image2} = data;
@@ -177,6 +289,9 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image('image1', assetsList.image1);
         this.load.image('image2', assetsList.image2);
         this.load.image('topLogo', '/assets/top_logo.svg');
@@ -188,6 +303,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('waxTexture', '/assets/texture.png');
         this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -254,12 +370,32 @@ import Layout from '../../layouts/Layout.astro';
             const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
             const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
 
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            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");
+
+            if(audioFileId === true){
+                let instructionAudio = this.sound.add('instructAudio')
+                muteIcon.setInteractive().on('pointerdown', () => {
+                    if(isPlaying === false){
+                        instructionAudio.play()
+                        isPlaying = true
+                    } else if(isPlaying === true) {
+                        instructionAudio.stop();
+                        isPlaying = false
+                    }
+
+                })
+            }
             retryButton.setInteractive().on('pointerdown', ()=>{
-                window.location.reload();
+                graphics.clear();
             })
             submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
@@ -268,21 +404,22 @@ import Layout from '../../layouts/Layout.astro';
             // backgroundColor: 'blue',
             // padding: { x: 20, y: 10 },
             // });
+            submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
-            // windowLoad();
-            // submitUserData();
-            submitUserData(this);
-            showAnimation();
-            })
+                submitUserData(this);
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                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',};
-            if(!isMobile){
-                // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
-                // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-            } else {
-                // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
-                // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
-            }
             
             if(isMobile){
                 outlineImage1.setDepth(-5).setScale(0.28);
@@ -294,29 +431,46 @@ import Layout from '../../layouts/Layout.astro';
                 outlineImage1.setDepth(-5).setScale(0.60);
                 outlineImage2.setDepth(-5).setScale(0.60);   
             }
+
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
+            colorContainer.style.zIndex = '1';
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
-            if(isMobile){
-                colorContainer.style.marginTop = '13%';
-            }
             colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
-            colorContainer.style.marginBottom = '15px';
+            colorContainer.style.marginBottom = '0';
             if(!isMobile){
-                colorContainer.style.top = '25%';
+                colorContainer.style.top = '10%';
                 colorContainer.style.flexDirection = 'column'; 
             }
-
             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){
-                colorViewButton.setVisible(false);
-            }
+            !isMobile ? colorViewButton.setVisible(false) : '';
+            // if(!isMobile){colorViewButton.setVisible(false);}
             
             colorViewButton.setInteractive().on('pointerdown', () => {
                 if(colorContainer.style.display === 'block') {
@@ -333,17 +487,47 @@ import Layout from '../../layouts/Layout.astro';
                     buttonsContainer.style.display = 'block';
                 }
             });
+            const eraserButton = document.createElement('button');
+            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';
+            eraserButton.style.width = 'fit-content';
+            eraserButton.style.marginRight = '15px';
+            // eraserButton.style.marginTop = '0px';
+            eraserButton.style.marginBottom = '0px';
+            if(isMobile){
+                eraserButton.style.padding = '4px 4px';
+            }else{
+                eraserButton.style.padding = '5px 9px';
+                eraserButton.style.top = '50%';
+                eraserButton.style.marginBottom = '15px';
+            }
+            eraserButton.style.fontWeight = 'bold';
+            eraserButton.style.borderRadius = '20%';
+            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
+            eraserButton.addEventListener('click', () => {
+            isErasing = !isErasing;
+            erase = false;
+                if (isErasing) {
+                    erase = true;
+                    eraserButton.style.border = '3px solid #0348A8';
+                    eraserButton.style.backgroundColor = '#0348A820';
+                } else {
+                    // Return to drawing mode
+                    // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
+                    eraserButton.style.color = 'blue';
+                    eraserButton.style.border = 'none';
+                    eraserButton.style.backgroundColor = 'transparent';
+                }
+            });
             var colors = colorList;
             const buttonSize = 60;
             const buttonSpacing = 15;
             const clearEraserContainer = document.createElement('div');
             clearEraserContainer.style.display = 'flex';
             clearEraserContainer.style.flexDirection = 'row';
-            if(isMobile){
-                clearEraserContainer.style.marginTop = '-60px';
-            }else{
-                clearEraserContainer.style.marginTop = '40px';
-            }
+            isMobile ? clearEraserContainer.style.marginTop = '-60px' : clearEraserContainer.style.marginTop = '40px';
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex';
             colorButtonsContainer.style.flexDirection = 'column'; 
@@ -548,51 +732,15 @@ import Layout from '../../layouts/Layout.astro';
             // Create the Clear button
             const clearButton = document.createElement('button');
             clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginLeft = '30px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '17%';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
-            // clearButton.style.fontWeight = 'bold';
-            // clearButton.style.borderRadius = '20%';
-            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
             clearButton.addEventListener('click', () => {
                 clearDrawing();
-            }); 
-            // Create the Eraser button
-            const eraserButton = document.createElement('button');
-            // eraserButton.textContent = 'Eraser';
-            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
-            eraserButton.style.color = 'blue';
-            eraserButton.style.width = 'fit-content';
-            eraserButton.style.marginLeft = '30px';
-           
-            eraserButton.style.fontWeight = 'bold';
-            eraserButton.style.borderRadius = '20%';
-            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
-            eraserButton.addEventListener('click', () => {
-            isErasing = !isErasing;
-                if (isErasing) {
-                    // eraserButton.style.backgroundColor = 'red';
-                    eraserButton.style.color = 'red';
-                    eraserButton.style.border = '3px solid red';
-                } else {
-                    // Return to drawing mode
-                    // eraserButton.style.backgroundColor = 'green';
-                    eraserButton.style.color = 'blue';
-                    eraserButton.style.border = 'none';
-                }
             });
-            // Add the Clear and Eraser buttons to the container
-            clearEraserContainer.appendChild(eraserButton);
-            clearEraserContainer.appendChild(clearButton);
-            // buttonsContainer.appendChild(clearButton);
-            buttonsContainer.appendChild(clearEraserContainer);
+
+            colorEraserCont.append(eraserButton);
+            colorEraserCont.append(clearButton);
+            // buttonsContainer.appendChild(clearEraserContainer);
+
             
             const sliderContainer = document.createElement('div');
             sliderContainer.className = 'slider-container';
@@ -669,10 +817,17 @@ import Layout from '../../layouts/Layout.astro';
         submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+        
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
@@ -724,12 +879,49 @@ import Layout from '../../layouts/Layout.astro';
             slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
         };
         const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
         customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(defaultColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
         customCursor.x = this.input.x;
         customCursor.y = this.input.y;
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
+        
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(defaultColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
     }
 </script>
 <style>

src/pages/drawing/v3.astro

@@ -3,14 +3,139 @@ import Layout from '../../layouts/Layout.astro';
 ---
 <Layout title='Drawing Game'>
     <main>
-        <div>
+        <audio id="savedAudioMessage">
+            <source src="/assets/ws-saved.mp3" type="audio/mpeg">
+            Your browser does not support the audio element.
+        </audio>
+        <div id="saved-toast" class="hidden inline-flex items-center gap-3 py-3 px-6 absolute bottom-[50px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-[1px] border-[#DBF4E9] rounded-[4px] bg-[#EEFBF6] text-[18px] font-[600] text-[#52555E]" style="box-shadow: -1px 6px 15px 0px #9ED6C040;">
+            <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0C10.4288 0 7.91543 0.762437 5.77759 2.1909C3.63975 3.61935 1.97351 5.64968 0.989572 8.02512C0.0056327 10.4006 -0.251811 13.0144 0.249797 15.5362C0.751405 18.0579 1.98953 20.3743 3.80762 22.1924C5.6257 24.0105 7.94208 25.2486 10.4638 25.7502C12.9856 26.2518 15.5995 25.9944 17.9749 25.0104C20.3503 24.0265 22.3807 22.3603 23.8091 20.2224C25.2376 18.0846 26 15.5712 26 13C25.9934 9.55422 24.6216 6.25145 22.1851 3.81491C19.7486 1.37837 16.4458 0.00660747 13 0ZM19.1875 10.725L11.8625 17.725C11.6731 17.9031 11.4225 18.0016 11.1625 18C11.0354 18.0018 10.9093 17.9785 10.7913 17.9313C10.6733 17.8841 10.5658 17.814 10.475 17.725L6.81251 14.225C6.71092 14.1364 6.62831 14.0281 6.56963 13.9067C6.51095 13.7854 6.47741 13.6534 6.47104 13.5187C6.46467 13.3841 6.48559 13.2495 6.53255 13.1231C6.57951 12.9968 6.65154 12.8812 6.7443 12.7834C6.83706 12.6856 6.94865 12.6075 7.07235 12.5539C7.19605 12.5003 7.32931 12.4723 7.46412 12.4715C7.59893 12.4707 7.7325 12.4972 7.85682 12.5493C7.98113 12.6015 8.09361 12.6783 8.18751 12.775L11.1625 15.6125L17.8125 9.275C18.0069 9.10536 18.2594 9.01745 18.5172 9.02964C18.7749 9.04184 19.018 9.1532 19.1955 9.34044C19.3731 9.52767 19.4714 9.7763 19.4699 10.0343C19.4684 10.2924 19.3672 10.5398 19.1875 10.725Z" fill="#6AD0A1"/></svg>
+            Worksheet saved successfully
+        </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" class="relative inline-flex items-center justify-center">
+                            <img src="/assets/bg-star.svg" alt="" class="block" />
+                            <p id="get-star-value" class="absolute inset-0 flex items-center justify-center text-[#E76408] text-[40px] font-[900]"></p>
+                        </div> 
+                    </div>
+                    <div class="flex flex-row items-center" style="">
+                        <img id="starClipart" class="z-10" src="" alt="" style="width: 170px;" />
+                        <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-8 rounded-[10px] -ml-[40px] h-fit" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></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 onclick="retryGame();" 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 id="clipArtWithHand" src="" alt="Clip Art" class="">
+                    <div class="relative bg-yellow-500 rounded-[4px] -ml-[20px]" 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 id="buddiesName" class="text-[12px] font-[700] text-white bg-[#394FC0] rounded-[4px] w-full py-2.5" onclick="calculateFromAI();"></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-3xl lg:max-w-4xl 2xl:max-w-6xl bg-white rounded-lg">
+                    <div class="flex justify-between p-3">
+                        <p id="attemptCount" class="text-[19px] font-[700]"></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>
+                </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 params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const akademyUserId = params.get('childId');
+    const akademyGameName = params.get('gameName');
+    const spriteNames = params.get('spriteName');
+    let buddiesList = [ "arlo", "ava", "dax", "kai", "monstero", "yara" ]
+    function displaySprite() {
+        if (buddiesList.includes(spriteNames)) {
+            const imgElement = document.getElementById('clipArtWithHand');
+            document.getElementById('buddiesName').textContent = `Ask  ${spriteNames.charAt(0).toUpperCase() + spriteNames.slice(1)}`;
+            if (imgElement) {
+                document.getElementById('starClipart').src = `/assets/${spriteNames}.gif`
+                imgElement.src = `/assets/hand-${spriteNames}.svg`;
+                console.log(imgElement.src)
+            } else {
+                console.log('Element with ID "clipArtWithHand" not found.');
+            }
+        } else {
+            console.log('Sprite not found in the list.');
+        }
+    }
+
+    displaySprite();
+
+    let galleryData = [];  // Store gallery data from the API
+    let currentSlide = 0;  // Initialize the current slide index
+    fetch(`https://api.teachertrainingkolkata.in/api/getGalleryImage?userId=${akademyUserId}&gameID=${paramsID}&gameName=${akademyGameName}`)
+        .then(res => res.json())
+        .then(data => {
+            galleryData = data; // Store the fetched gallery data
+            updateSlide(); // Call updateSlide after the data is fetched
+        })
+        .catch(err => {
+            console.error(err); 
+        });
+    function updateSlide() {
+        if (galleryData.length > 0) {
+            document.getElementById('attemptCount').textContent = `Attempt ${currentSlide + 1}`;
+            const slide = galleryData[currentSlide]; // Get the current slide's data
+            document.getElementById('slideImage').src = slide.screenshotUrl; // Update the image source
+        }
+    }
+    document.getElementById('nextButton').addEventListener('click', () => {
+        currentSlide = (currentSlide + 1) % galleryData.length; // Move to the next slide
+        updateSlide(); // Update the slide
+    });
+    document.getElementById('prevButton').addEventListener('click', () => {
+        currentSlide = (currentSlide - 1 + galleryData.length) % galleryData.length; // Move to the previous slide
+        updateSlide(); // Update the slide
+    });
+
+    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');
+        setTimeout(() => {
+            clipArt.classList.add('show');
+        }, 100);
+    }
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
     const drawingZone = {
@@ -32,6 +157,12 @@ import Layout from '../../layouts/Layout.astro';
     let tickIconWidth;
     let cancelIconWidth; 
     let maxScore;
+    let erase;
+    let audioData;
+    let audioFileId = false;
+    let isPlaying = false;
+    let galleryIconWidth;
+    let galleryButton;
     
     if(isMobile){
         topLogoWidth = 4.5;
@@ -39,18 +170,21 @@ import Layout from '../../layouts/Layout.astro';
         resetIconWidth = 1.47;
         tickIconWidth = 1.24;
         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){
@@ -91,11 +225,13 @@ import Layout from '../../layouts/Layout.astro';
     // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
     // console.log(shortUniqueID);
 
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
     const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
+        if(data.instruction){
+          audioFileId = true;
+        }
+        audioData = `https://game-du.teachertrainingkolkata.in/assets/${data.instruction}.mp3`;
         // console.log(data)
         // colorList = data.colors;
     const {image} = data;
@@ -135,6 +271,9 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
+        if(audioFileId === true){
+          this.load.audio('instructAudio', audioData)
+        }
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.svg');
         this.load.image("tickIcon", '/assets/svg/tick2.svg');
@@ -144,6 +283,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('colorButton', '/assets/color_button.png');
+        this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
     }
 
     function create() {
@@ -208,12 +348,34 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.strokePath();
 
             const outlineImage = this.add.image(customWidth / 2, customHeight / 2 + 20, 'outline');
+            // this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+            // this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+            // const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            // submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+
+            
+
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
-            this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
-            const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+            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");
+            
+            if(audioFileId === true){
+            let instructionAudio = this.sound.add('instructAudio')
+            muteIcon.setInteractive().on('pointerdown', () => {
+              if(isPlaying === false){
+                instructionAudio.play()
+                isPlaying = true
+              } else if(isPlaying === true) {
+                instructionAudio.stop();
+                isPlaying = false
+              }
+
+            })
+          }
             retryButton.setInteractive().on('pointerdown', () => {
-                window.location.reload();
+                graphics.clear();
             })
             submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
@@ -222,13 +384,21 @@ import Layout from '../../layouts/Layout.astro';
             // backgroundColor: 'blue',
             // padding: { x: 20, y: 10 },
             // });
-            // submitButton.setVisible(true);
+            submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
-            // submitButton.setVisible(false);
-            // windowLoad();
-            submitUserData(this);
-            })
+                submitUserData(this);
+                showAnimation();
+                document.getElementById('savedAudioMessage').play();
+                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',};
             // if(!isMobile){
             //     this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -245,7 +415,12 @@ import Layout from '../../layouts/Layout.astro';
                 outlineImage.setDepth(-1).setScale(1);   
             }
 
+            const maskGraphics = this.make.graphics();
+            maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+            const mask = maskGraphics.createGeometryMask();
+
             graphics = this.add.graphics();
+            graphics.setMask(mask);
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
@@ -259,13 +434,26 @@ import Layout from '../../layouts/Layout.astro';
 
             if(isMobile){
                 colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
             }
 
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
-            if(!isMobile){
-                colorViewButton.setVisible(false);
-            }
-            
+            !isMobile ? colorViewButton.setVisible(false) : '';
+
+            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);
             colorViewButton.setInteractive().on('pointerdown', () => {
                 if(colorContainer.style.display === 'block') {
                     colorContainer.style.display = 'none';
@@ -302,7 +490,8 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+            
+            // colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
             let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -526,39 +715,14 @@ import Layout from '../../layouts/Layout.astro';
             // Create the Clear button
             const clearButton = document.createElement('button');
             clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '100px';
-                buttonsContainer.style.marginLeft = '30px';
-                clearButton.style.marginTop = '-15px';
-                
-            }else if(isTab){
-                clearButton.style.marginTop = '-100px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-                clearButton.style.marginTop = '-115px';
-            }        
-            // clearButton.style.fontWeight = 'bold';
-            // clearButton.style.borderRadius = '20%';
-            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+       
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
 
-            if(isMobile){
-                clearButton.style.display = 'none';
-            }
-
             colorViewButton.setInteractive().on('pointerdown', () => {
-                if(clearButton.style.display === 'block') {
-                    clearButton.style.display = 'none';
-                }else{
-                    clearButton.style.display = 'block';
-                }
+                clearButton.style.display === 'block' ? clearButton.style.display = 'none' : clearButton.style.display = 'block'; 
             });
 
             // Create the Eraser button
@@ -596,7 +760,8 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            colorEraserCont.append(colorPicker);
+            colorEraserCont.append(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
@@ -690,10 +855,17 @@ import Layout from '../../layouts/Layout.astro';
         // snapNotice.setVisible(true);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
+        muteIcon.setVisible(false);
+        retryButton.setVisible(false);
+        galleryButton.setVisible(false);
+
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
             customCursor.setVisible(true);
+            muteIcon.setVisible(true);
+            retryButton.setVisible(true);
+            galleryButton.setVisible(true);
             image.style.width = '160px';
             image.style.height = '120px';
             image.style.paddingLeft = '2px';
@@ -747,12 +919,49 @@ import Layout from '../../layouts/Layout.astro';
             slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
         };
         const cursorSize = brushSize * cursorSizeMultiplier;
-        customCursor.clear(); // Clear the previous frame
-        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.clear();
+        customCursor.lineStyle(1.5, 0x000000);
         customCursor.strokeCircle(0, 0, cursorSize);
-        // Position the cursor at the current mouse pointer coordinates
+        customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);
+        customCursor.fillCircle(0, 0, cursorSize);
         customCursor.x = this.input.x;
         customCursor.y = this.input.y;
+        customCursor.moveTo(0, -cursorSize+3);  
+        customCursor.lineTo(0, cursorSize-3);   
+        
+        customCursor.moveTo(-cursorSize + 3, 0);  
+        customCursor.lineTo(cursorSize-3, 0);   
+        customCursor.strokePath(); 
+        
+        if (erase === true) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        } else if (erase === false) {
+            customCursor.clear();  
+            customCursor.lineStyle(3, 0x000000);  
+            customCursor.strokeCircle(0, 0, cursorSize);  
+            customCursor.fillStyle(Phaser.Display.Color.HexStringToColor(selectedColor).color, 1);  
+            customCursor.fillCircle(0, 0, cursorSize);  
+            customCursor.x = this.input.x;  
+            customCursor.y = this.input.y;
+            
+            customCursor.moveTo(0, -cursorSize+3);  
+            customCursor.lineTo(0, cursorSize-3);   
+            
+            customCursor.moveTo(-cursorSize + 3, 0);  
+            customCursor.lineTo(cursorSize-3, 0);   
+            customCursor.strokePath();  
+        }
     }
 
     // function update() {
@@ -788,4 +997,40 @@ import Layout from '../../layouts/Layout.astro';
     //     this.customCursor.y = this.input.y;
     // }
 </script>
-<!-- <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> -->
+<style>
+    .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>

src/pages/guided-tracing/0.astro

@@ -3,14 +3,75 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
     <main>
-        <div>
+        <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+          <div class="flex justify-center items-center h-screen ">
+            <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+          </div>
         </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>
     </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
- 
+  function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768; 
   const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
@@ -39,7 +100,7 @@ import Layout from "../../layouts/Layout.astro";
   const game = new Phaser.Game(config);
   const customWidth = window.innerWidth;
   const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
+  let firstLayer;
   let graphics;
   let isDrawing = false;
   let formattedDateTime;
@@ -55,7 +116,7 @@ import Layout from "../../layouts/Layout.astro";
     var assetsList = {}
     var snapshotButton;
     let submitButton;
-    let demoButtonButton;
+    let demoButton;
     let shortUniqueID;
     let noticeWidth;
     let noticeHeight;
@@ -70,6 +131,32 @@ import Layout from "../../layouts/Layout.astro";
         tickIconWidth = 1.21;
         cancelIconWidth = 1.08;
         galleryIconWidth = 2;
+        submitWidth = 250;
+        submitHeight = 110;
+        noticeWidth = 100;
+        noticeHeight = 0;
+        downloadWidth = 67;
+        downloadHeight = 200;
+        learningWidth = 200;
+        learningHeight = 400;
+        letterHeight = 30;
+        letterScale = 1.8;
+        backgroundScale = 0.8;
+        sunScale = 0.1;
+        sunScalePlus = 0.15;
+        sunWidth = 70;
+        sunHeight = 70;
+        animated0videoScale = 1;
+        animated0Height = 32;
+        helpButtonHeight = customHeight / 1.1;
+        helpButtonWidth = customWidth / 2 + 10;
+
+        startButtonHeight = customHeight / 1.1;
+        startButtonWidth = customWidth / 2 - 100;
+        submitWidth = customWidth / 2 - 100;
+        submitHeight = customHeight / 1.1;
+        noticeWidth = window.innerWidth * 0.5 - 100;
+        noticeHeight = window.innerHeight * 0.38;
     }else if(isTab){
         topLogoWidth = 4.5;
         muteIconWidth = 1.6;
@@ -84,18 +171,6 @@ import Layout from "../../layouts/Layout.astro";
         tickIconWidth = 1.222;
         cancelIconWidth = 1.185;
         galleryIconWidth = 1.345;
-    }
-    
-    if(isMobile){
-        submitWidth = 250;
-        submitHeight = 110;
-        noticeWidth = 100;
-        noticeHeight = 0;
-        downloadWidth = 67;
-        downloadHeight = 200;
-        learningWidth = 200;
-        learningHeight = 400
-    }else {
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -103,57 +178,29 @@ import Layout from "../../layouts/Layout.astro";
         downloadWidth = 180;
         downloadHeight = 70;
         learningWidth = 450;
-        learningHeight = 400
-    }
-
-
-    if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
-      letterHeight = 30;
-      letterScale = 1.8;
-      backgroundScale = 0.8;
-      sunScale = 0.1;
-      sunScalePlus = 0.15;
-      sunWidth = 70;
-      sunHeight = 70;
-      animated0videoScale = 1;
-      animated0Height = 32;
-      helpButtonHeight = customHeight / 1.1;
-      helpButtonWidth = customWidth / 2 + 10;
-
-      startButtonHeight = customHeight / 1.1;
-      startButtonWidth = customWidth / 2 - 100;
-      submitWidth = customWidth / 2 - 100;
-      submitHeight = customHeight / 1.1;
-      noticeWidth = window.innerWidth * 0.5 - 100;
-      noticeHeight = window.innerHeight * 0.38;
-    } else{
-      cloudeSize = 500;
-      cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
-      letterHeight = 10;
-      letterScale = 1.8;
-      backgroundScale = 1;
-      sunScale  = 0.2;
-      sunScalePlus = 0.25;
-      sunWidth = 200;
-      sunHeight = 100;
-      animated0videoScale = 1;
-      animated0Height = 20;
-      helpButtonHeight = customHeight / 2 + 40;
-      helpButtonWidth = customWidth / 1.32;
-
-      startButtonHeight = customHeight / 2 - 20;
-      startButtonWidth = customWidth / 1.32;
-      submitWidth = customWidth / 1.32;
-      submitHeight = customHeight / 2 - 20;
-      noticeWidth = window.innerWidth * 0.5 - 120;
-      noticeHeight = window.innerHeight * 0.32;
+        learningHeight = 400;
+        cloudeSize = 500;
+        cloudHeight = 250;
+        letterHeight = 10;
+        letterScale = 1.8;
+        backgroundScale = 1;
+        sunScale  = 0.2;
+        sunScalePlus = 0.25;
+        sunWidth = 200;
+        sunHeight = 100;
+        animated0videoScale = 1;
+        animated0Height = 20;
+        helpButtonHeight = customHeight / 2 + 40;
+        helpButtonWidth = customWidth / 1.32;
+
+        startButtonHeight = customHeight / 2 - 20;
+        startButtonWidth = customWidth / 1.32;
+        submitWidth = customWidth / 1.32;
+        submitHeight = customHeight / 2 - 20;
+        noticeWidth = window.innerWidth * 0.5 - 120;
+        noticeHeight = window.innerHeight * 0.32;
     }
+    
     window.onload = function() {
         currentDate = new Date();
         formattedDateTime = currentDate.toLocaleString();
@@ -201,24 +248,26 @@ import Layout from "../../layouts/Layout.astro";
       borderBottom.lineTo(x + lineWidth, y);
       borderBottom.strokePath();
       
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
+      // submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
+      //   font: '900 24px Quicksand',
+      //   fill: '#05b3a4',
+      //   backgroundColor : '#7c4c23',
+      //   padding: {x: 10, y: 10},
+      //   shadow: {
+      //     offsetX : 2, 
+      //     offsetY : 2, 
+      //     color: '#000',
+      //     blur: 5,
+      //     fill: true
+      //   }
+      // });
 
-      submitButton.setVisible(false);
+      // submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
 
@@ -249,7 +298,13 @@ import Layout from "../../layouts/Layout.astro";
       // const baseFontSize = 16;
       // const responsiveFontSize = (window.innerWidth / 550) * baseFontSize;
       
-      let responsiveFontSize = isMobile ? 16 : 32;
+              retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
       this.add.text(window.innerWidth / 2, 80, 'Number: 0', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
 
       const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 0', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
@@ -307,6 +362,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       // graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
@@ -324,20 +380,22 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
+      demoButton.setVisible(true);
+      submitButton.setVisible(true);
     })
-    audioOneAudio.play();
+    // audioOneAudio.play();
+
+
     // startButton.setInteractive().on('pointerdown', () => {
     //   audioOneAudio.play();
     //   // gmStartTime();
@@ -355,9 +413,49 @@ import Layout from "../../layouts/Layout.astro";
 
 
   }
-
+  // function beforeStartGame(){
+  //   audioOneAudio.play();
+  //     document.getElementById('blurDisplay').classList.add('hidden');
+  //   }
 function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/1.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,24 +103,41 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "stat timr here";
+  let galleryIconWidth;
+  let noticeWidth;
+  let noticeHeight;
+  let muteIcon;
+  let retryButton;
+  let maxScore;
+  let cancelIcon;
+  let letterHeight;
+  let letterScale;
+  let animated1Height;
+  let animated1videoScale;
 
-    if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
-      letterHeight = 30;
-      letterScale = 1.1;
+
+  if(isMobile){
+      
+      submitWidth = 250;
+      submitHeight = 110;
+      noticeWidth = 100;
+      noticeHeight = 0;
+      downloadWidth = 67;
+      downloadHeight = 200;
+      learningWidth = 200;
+      learningHeight = 400;
+      letterHeight = 0;
+      letterScale = 1.8;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-         
-      animated1videoScale = 0.6;
+      animated1videoScale = 1;
       animated1Height = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -68,36 +148,69 @@ import Layout from "../../layouts/Layout.astro";
       submitHeight = customHeight / 1.1;
       noticeWidth = window.innerWidth * 0.5 - 100;
       noticeHeight = window.innerHeight * 0.38;
-    } else{
+  }else if(isTab){
+      animated1videoScale = 1;
+      animated1Height = 32;
+      letterHeight = 0;
+      letterScale = 1.8;  
+  }else{
+      submitWidth = 380;
+      submitHeight = 95;
+      noticeWidth = 0;
+      noticeHeight = 0;
+      downloadWidth = 180;
+      downloadHeight = 70;
+      learningWidth = 450;
+      learningHeight = 400;
       cloudeSize = 500;
       cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
-      letterHeight = 10;
-      letterScale = 1.2;
+      letterHeight = 0;
+      letterScale = 1.8;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animated1videoScale = 0.70;
+      animated1videoScale = 1;
       animated1Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
-
       startButtonHeight = customHeight / 2 - 20;
       startButtonWidth = customWidth / 1.32;
       submitWidth = customWidth / 1.32;
       submitHeight = customHeight / 2 - 20;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
-    }
+  }
+
+  if(isMobile){
+    topLogoWidth = 4.5;
+    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;
+  }
+
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
       // console.log("Page loaded on: " + formattedDateTime);
     };
-  // let hideButton;
 
   function preload() {
     this.load.video('animated1', '/assets/animated-letter/number_1.mp4');
@@ -112,136 +225,72 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
      
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-            submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
 
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
    
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated1').setDepth(2); canvasStand
     firstScreen.setVisible(false);
     // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
 
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+      }
     });
 
 
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 1', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
 
       // Play the video
       // animatedLetter.play();
@@ -256,11 +305,12 @@ import Layout from "../../layouts/Layout.astro";
       });
 
     let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;
 
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -293,7 +343,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -310,32 +360,44 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+    //   let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+    //   font: '900 24px Quicksand',
+    //   fill: '#05b3a4',
+    //   backgroundColor : '#7c4c23',
+    //   padding: {x: 20, y: 10},
+    //   shadow: {
+    //     offsetX : 2, 
+    //     offsetY : 2, 
+    //     color: '#000',
+    //     blur: 5,
+    //     fill: true
+    //   }
+    // })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
       demoButton.setVisible(true);
-      startButton.setVisible(false);
-
+      submitButton.setVisible(true);
     })
+    // startButton.setInteractive().on('pointerdown', () => {
+    //   audioOneAudio.play();
+    //   submitButton.setVisible(true);
+    //   firstTextLayer.setVisible(true);
+    //   animatedLetter.setVisible(false);     
+    //   firstScreen.setVisible(false);
+    //   graphics.setVisible(true);
+    //   hideButton.setVisible(false);
+    //   demoButton.setVisible(true);
+    //   startButton.setVisible(false);
+
+    // })
 
 
   }
@@ -344,4 +406,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/2.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,24 +103,21 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
-      cloudeSize = 200;
-      cloudHeight = 340;
-      canvasScale = 0.14
-      canvasHeight = 35; 
       letterHeight = 58;
-      letterScale = 1;
+      letterScale = 1.5;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animated2Scale = 0.55;
+      animated2Scale = 0.85;
       animated2Height = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -69,18 +129,14 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 100;
       noticeHeight = window.innerHeight * 0.38;
     } else{
-      cloudeSize = 500;
-      cloudHeight = 250;
-      canvasScale = 0.195;
-      canvasHeight = 20;
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.5;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animated2Scale = 0.55;
+      animated2Scale = 0.85;
       animated2Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -91,158 +147,114 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
       // console.log("Page loaded on: " + formattedDateTime);
     };
-  // let hideButton;
 
   function preload() {
     this.load.video('animated2', '/assets/animated-letter/number_2.mp4');
     this.load.svg('number2', '/assets/numeric/n2.svg');
-    this.load.svg('layer1', '/assets/numeric/n2.svg');
-    this.load.svg('layer2', '/assets/numeric/n2.svg');
+    this.load.svg('layer1', '/assets/numeric/n2_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n2_l2.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.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');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
   
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
    
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number2').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated2').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
     });
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 1', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 2', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
     const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);
 
     // Play the video
@@ -260,9 +272,8 @@ submitUserData(this);
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      let stepTextSize = isMobile ? 12 : 16;
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Roll Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +282,8 @@ submitUserData(this);
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -284,7 +296,6 @@ submitUserData(this);
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
 
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
@@ -307,7 +318,6 @@ submitUserData(this);
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -329,7 +339,7 @@ submitUserData(this);
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -346,36 +356,60 @@ submitUserData(this);
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
+      gamestart = new Date();
+      gameStartTime = gamestart.toLocaleString();
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
+  
 
 function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/3.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+    }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,24 +103,25 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;  
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
-
+  let demoButton;
     if(isMobile){
       cloudeSize = 200;
       cloudHeight = 340;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 48;
-      letterScale = 1;
+      letterScale = 1.5;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animated3Scale = 0.55;
+      animated3Scale = 0.92;
       animated3Height = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -74,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.5;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animated3Scale = 0.55;
+      animated3Scale = 0.92;
       animated3Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -92,12 +156,33 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
       // console.log("Page loaded on: " + formattedDateTime);
     };
-  // let hideButton;
 
   function preload() {
     this.load.video('animated3', '/assets/animated-letter/number_3.mp4');
@@ -109,140 +194,76 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
      
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
+
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });
     // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number3').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number3').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated3').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
     });
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 3', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 3', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);
 
     // Play the video
@@ -258,11 +279,11 @@ submitUserData(this);
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Roll Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +292,7 @@ submitUserData(this);
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -307,7 +328,6 @@ submitUserData(this);
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -329,7 +349,7 @@ submitUserData(this);
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -346,31 +366,14 @@ submitUserData(this);
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -378,4 +381,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/4.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -97,6 +162,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -114,138 +201,74 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
- 
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
         // windowLoad();
-submitUserData(this);
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number4').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number4').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated4').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
     });
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 4', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 4', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);
 
     // Play the video
@@ -259,12 +282,13 @@ submitUserData(this);
         // add function after end video;
     });
 
-    let textX, textY;
-
+      let textX, textY;
+      let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -273,7 +297,7 @@ submitUserData(this);
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -282,8 +306,9 @@ submitUserData(this);
       secondLayer.setVisible(false);
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
+      
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioOne');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -360,7 +385,7 @@ submitUserData(this);
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -378,35 +403,56 @@ submitUserData(this);
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/5.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,10 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
-//   let x = 100;
+  let demoButton;
 
 // // Use x
 // console.log(x);
@@ -54,7 +118,7 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
@@ -62,7 +126,7 @@ let scoreTotal = 0;  let isDrawing = false;
       sunHeight = 70;
        
       animated5Height = 35;
-      animated5Scale = 0.55;
+      animated5Scale = 0.7;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
 
@@ -78,7 +142,7 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 40;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
@@ -86,7 +150,7 @@ let scoreTotal = 0;  let isDrawing = false;
       sunHeight = 100;
         
       animated5Height = 20;
-      animated5Scale = 0.6;
+      animated5Scale = 0.7;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -97,6 +161,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -115,138 +201,72 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
- 
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
-        // console.log('Clicked');
-        submitButton.setVisible(false);
-        // windowLoad();
-submitUserData(this);
+        // console.log('Clicked');        // windowLoad();
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
    
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number5').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number5').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated5').setDepth(2); canvasStand
     firstScreen.setVisible(false);
     // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 5', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 5', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);
 
     // Play the video
@@ -261,11 +281,11 @@ submitUserData(this);
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -274,7 +294,7 @@ submitUserData(this);
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -284,7 +304,7 @@ submitUserData(this);
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioThree');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -361,7 +381,7 @@ submitUserData(this);
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -379,35 +399,56 @@ submitUserData(this);
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
-
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/6.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0; 
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 30; 
       letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animated6Scale = 0.55;
+      animated6Scale = 0.7;
       animated6Height = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 10;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animated6Scale = 0.55;
+      animated6Scale = 0.7;
       animated6Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -93,12 +158,33 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
       // console.log("Page loaded on: " + formattedDateTime);
     };
-  // let hideButton;
 
   function preload() {
     this.load.video('animated6', '/assets/animated-letter/number_6.mp4');
@@ -111,159 +197,92 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
   
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number6').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number6').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated6').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
 
  
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 6', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 6', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);
 
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
 
-    // You can set additional properties for the video, such as loop and mute:
     animatedLetter.setLoop(true); // Loop the video
     animatedLetter.setMute(false); // Unmute the video
       animatedLetter.on('complete', function () {
-      // Video playback is complete
       // You can add your code here for what to do when the video finishes.
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Curve Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Curve Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +291,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Loop',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Loop',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -285,7 +304,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
 
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
@@ -308,7 +326,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -330,7 +347,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -347,30 +364,16 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
-      audioOneAudio.play();
-submitButton.setVisible(true);
-      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
-      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
 
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
     })
   }
 
@@ -378,4 +381,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/7.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 30; 
       letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.5;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animated7Scale = 0.55;
+      animated7Scale = 0.75;
       animated7Height = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 10;
-      letterScale = 1.1;
+      letterScale = 1.5;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animated7Scale = 0.55;
+      animated7Scale = 0.75;
       animated7Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,138 +198,76 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
    
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number7').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number7').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated7').setDepth(2); canvasStand
     firstScreen.setVisible(false);
     // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 7', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 7', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);
 
     // Play the video
@@ -258,11 +283,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +296,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -284,8 +309,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -327,7 +350,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -344,31 +367,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -376,4 +383,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/8.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14;
       canvasHeight = 30; 
       letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animated8Scale = 0.55;
+      animated8Scale = 0.7;
       animated8Height = 15;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 10;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animated8Scale = 0.55;
+      animated8Scale = 0.7;
       animated8Height = 0;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,138 +198,74 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
+
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number8').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number8').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated8').setDepth(2); canvasStand
     firstScreen.setVisible(false);
     // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 8', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 8', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);
 
     // Play the video
@@ -258,11 +281,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Snake',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Snake',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +294,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Roll Up',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Up',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -328,7 +351,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -345,31 +368,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -377,4 +384,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/9.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 30; 
       letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.3;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animated9Scale = 0.55;
+      animated9Scale = 0.75;
       animated9Height = 40;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
@@ -74,25 +139,47 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 10;
-      letterScale = 1;
+      letterScale = 1.3;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animated9Scale = 0.55;
+      animated9Scale = 0.75;
       animated9Height = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
-            startButtonHeight = customHeight / 2 - 20;
+      startButtonHeight = customHeight / 2 - 20;
       startButtonWidth = customWidth / 1.32;
       submitWidth = customWidth / 1.32;
       submitHeight = customHeight / 2 - 20;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,139 +198,74 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number9').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number9').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated9').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
-      graphics.setVisible(false);
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
+      graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Number: 9', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 9', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);
 
     // Play the video
@@ -259,11 +281,12 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;
 
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 8 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Curve Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Curve Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +295,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -308,7 +331,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -330,7 +352,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -347,31 +369,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -379,4 +385,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/A.astro

@@ -2,27 +2,94 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </div>
+    <div>
+      
+      <div id="wsSavedImg" class="clip-art-container -z-10 absolute bottom-0 right-0">
+          <img src="/assets/svg/tracing-done.svg" alt="Clip Art" class="clip-art">
+      </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-3xl lg:max-w-4xl 2xl: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>
+      </div>
+    </div>
+    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveTracingGameData.js" is:inline></script>
 <script is:inline>
+      const findBuddies = JSON.parse(localStorage.getItem('userChildDetails') || '{}');
+    const buddiesName = findBuddies.metadata?.sprite || 'No sprite found'
+    console.log('buddName', buddiesName);
+    // fetch(`https://preschool-curriculum.in/api/one/v1//akademy/students/668ce00ae4714c0da8c17d4e`)
+      const jsonData = [
+        {
+            "src": "/assets/back.jpeg"
+        },
+        {
+            "src": "/assets/background.jpg"
+        },
+        {
+            "src": "/assets/backgroundImage.png"
+        },
+        {
+            "src": "/assets/beanieImage.png"
+        }
+    ];
+    let currentSlide = 0;
+    function updateSlide(){
+        const slide = jsonData[currentSlide];
+        document.getElementById('slideImage').src = slide.src;
+    }
+    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(){
+        gallerySliderId.classList.add('hidden');
+        
+    }
+  function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
     width: isMobile ? window.innerWidth : window.innerWidth / 2,
     height: window.innerHeight / 2,
   };
-
+ 
   const config = {
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,14 +107,13 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
-  
-//   let x = 100;
-
-// // Use x
-// console.log(x);
+  let demoButton;
+  let maxScore;
+  let galleryButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -55,14 +121,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 70;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
       animatedAHeight = 35;
-      animatedAScale = 0.65;
+      animatedAScale = 0.8;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
 
@@ -78,14 +144,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animatedAHeight = 20;
-      animatedAScale = 0.73;
+      animatedAHeight = 0;
+      animatedAScale = 0.8;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -96,6 +162,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -114,128 +202,77 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');
+
+    this.load.svg('galleryIcons', '/assets/svg/gallery-icon.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('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      galleryButton = this.add.image(customWidth / galleryIconWidth, 30, "galleryIcons");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
-      })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+        showAnimation();
+        // parentMainContainer.classList.remove('hidden');
+      });
+      galleryButton.setInteractive().on('pointerdown', () => {
+          // parentMainContainer.classList.remove('hidden');
+          gallerySliderId.classList.remove('hidden');
+      });
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
-    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 scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false); 
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+      window.location.reload();
+    })
+        const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: A', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : A', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);
 
     // Play the video
@@ -250,12 +287,15 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;
+    let finalMessage = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, 'Great job! You traced the letter perfectly!',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
+    finalMessage.setVisible(false);
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
-      const audioOneAudio = this.sound.add('audioOne');
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant Left',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
+      const audioOneAudio = this.sound.add('audioOne');      
       // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
@@ -263,7 +303,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant Right',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -273,10 +313,12 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioThree');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
+
+
       // thirdLayer.setScale(1.15);
       thirdLayer.setAlpha(0.5);
       thirdLayer.setInteractive({ draggable: true });
@@ -287,8 +329,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -343,6 +383,7 @@ let scoreTotal = 0;  let isDrawing = false;
         if (distance >= 100) {
             thirdLayer.setAlpha(1);
             thirdTextLayer.setVisible(false);
+            finalMessage.setVisible(true)
         } else {
             thirdLayer.setAlpha(0.5);
         }
@@ -369,35 +410,52 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.strokePath();
       });
 
-    let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</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;
+  }
+/* 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>

src/pages/guided-tracing/B.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 58;
-      letterScale = 0.85;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      animatedVideoScale = 0.6;
-      animatedBHeight = 32;
+      animatedVideoScale = 0.8;
+      animatedBHeight = 22;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
 
@@ -73,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animatedVideoScale = 0.70;
-      animatedBHeight = 20;
+      animatedVideoScale = 0.8;
+      animatedBHeight = 10;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -110,139 +197,73 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedB').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
+    
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: B', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : B', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -256,11 +277,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -269,7 +290,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -279,7 +300,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTHreeAudio = this.sound.add('audioTwo');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -293,8 +314,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -360,7 +379,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -378,31 +397,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.strokePath();
       });
 
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -410,4 +412,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/C.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -57,7 +122,7 @@ let scoreTotal = 0;  let isDrawing = false;
       sunWidth = 70;
       sunHeight = 70;
       animatedVideoScale = 0.59;
-      animatedAHeight = 32;
+      animatedCHeight = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
       startButtonHeight = customHeight / 1.1;
@@ -79,7 +144,7 @@ let scoreTotal = 0;  let isDrawing = false;
       sunWidth = 200;
       sunHeight = 100;
       animatedVideoScale = 0.70;
-      animatedAHeight = 20;
+      animatedCHeight = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -90,6 +155,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -98,7 +185,7 @@ let scoreTotal = 0;  let isDrawing = false;
   // let hideButton;
 
   function preload() {
-    this.load.video('animatedA', '/assets/animated-letter/capital_c.mp4');
+    this.load.video('animatedC', '/assets/animated-letter/capital_c.mp4');
     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');
@@ -106,139 +193,72 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedC').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: C', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : C', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);
       // Play the video
       // animatedLetter.play();
       animatedLetter.setVisible(false);
@@ -252,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
       });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -289,7 +309,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -307,37 +327,57 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.strokePath();
       });
 
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
-
   }
 
 function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/D.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 58;
-      letterScale = 0.85;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      animatedVideoScale = 0.6;
-      animatedDHeight = 32;
+      animatedVideoScale = 0.8;
+      animatedDHeight = 22;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
 
@@ -73,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animatedVideoScale = 0.70;
-      animatedDHeight = 20;
+      animatedVideoScale = 0.8;
+      animatedDHeight = 10;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,140 +196,74 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
-        submitNotic.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    
     this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterD').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedD').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
+   
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: D', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : D', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -256,11 +277,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -269,7 +290,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -282,8 +303,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -324,7 +343,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -341,30 +360,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
-      audioOneAudio.play();
-submitButton.setVisible(true);
-      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
-      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
 
+    firstTextLayer.setVisible(false);
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
     })
   }
 
@@ -372,4 +376,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/E.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -89,6 +154,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -108,137 +195,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedE').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: E', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : E', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);
 
     // Play the video
@@ -254,11 +274,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -267,7 +287,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -277,7 +297,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioTwo');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -288,7 +308,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       fourthLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const fourthTextLayer = this.add.text(textX, textY, '4. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const fourthTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '4. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioFourthAudio = this.sound.add('audioTwo');
       fourthTextLayer.setVisible(false);
       fourthLayer.setDepth(1.1);
@@ -389,7 +409,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -407,31 +427,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.strokePath();
       });
 
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -439,4 +442,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/F.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  } 
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,28 +103,26 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
-//   let x = 100;
-
-// // Use x
-// console.log(x);
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
       cloudHeight = 340;
       canvasScale = 0.14
       canvasHeight = 35; 
-      letterHeight = 70;
-      letterScale = 1;
+      letterHeight = 35;
+      letterScale = 1.08;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      animatedFHeight = 35;
-      animatedFScale = 0.65;
+      animatedFHeight = 0;
+      animatedFScale = 0.8;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
 
@@ -77,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.1;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animatedFHeight = 20;
-      animatedFScale = 0.73;
+      animatedFHeight = 10;
+      animatedFScale = 0.8;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -95,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -112,134 +195,69 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedF').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
+    
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : F', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: F', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : F', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);
 
     // Play the video
@@ -254,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -267,7 +285,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -277,7 +295,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioTwo');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -351,7 +369,7 @@ let scoreTotal = 0;  let isDrawing = false;
         });
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -369,35 +387,56 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/G.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,24 +103,26 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
       cloudHeight = 340;
       canvasScale = 0.14
       canvasHeight = 35; 
-      letterHeight = 58;
-      letterScale = 0.85;
+      letterHeight = 30;
+      letterScale = 1;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      animatedVideoScale = 0.60;
-      animatedGHeight = 32;
+      animatedVideoScale = 0.7;
+      animatedGHeight = 0;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
 
@@ -91,7 +156,33 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
-  // let hideButton;
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
+    window.onload = function() {
+      currentDate = new Date();
+      formattedDateTime = currentDate.toLocaleString();
+      // console.log("Page loaded on: " + formattedDateTime);
+    };
 
   function preload() {
     this.load.video('animatedG', '/assets/animated-letter/capital_g.mp4');
@@ -104,138 +195,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedG').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: G', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : G', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -249,11 +273,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -262,7 +286,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -316,7 +340,7 @@ let scoreTotal = 0;  let isDrawing = false;
         });
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -333,31 +357,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -365,4 +373,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/H.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,13 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
-//   let x = 100;
-
-// // Use x
-// console.log(x);
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -54,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 70;
-      letterScale = 0.9;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      animatedHHeight = 45;
-      animatedHScale = 0.6;
+      animatedHHeight = 30;
+      animatedHScale = 0.78;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10;
 
@@ -77,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animatedHHeight = 20;
-      animatedHScale = 0.70;
+      animatedHHeight = 10;
+      animatedHScale = 0.78;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -95,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -112,137 +195,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-    
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedH').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: H', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : H', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -268,7 +285,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2  + 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -278,7 +295,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioTwo');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -355,7 +372,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -373,35 +390,55 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
-      
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/I.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,10 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
-//   let x = 100;
+  let demoButton;
 
 // // Use x
 // console.log(x);
@@ -95,6 +159,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -112,135 +198,68 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
-    this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+      this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'letterI').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedI').setDepth(2); canvasStand
-    firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    
+      demoButton.setInteractive().on('pointerdown', () => {
+        animatedLetter.setCurrentTime(0);
+        animatedLetter.play(true);
+        graphics.setVisible(false);
+        firstScreen.setVisible(true);
+        if(animatedLetter.visible){
+          animatedLetter.setVisible(false);
+          graphics.setVisible(true);
+          firstScreen.setVisible(false);
+        } else{
+          graphics.setVisible(false);
+          animatedLetter.setVisible(true);
+          firstScreen.setVisible(true);
+          
+        }
+      })
+
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
     const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
-    demoButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.setCurrentTime(0);
-      animatedLetter.play(true);
-      graphics.setVisible(false);
-      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : I', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: I', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : I', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale);
 
     // Play the video
@@ -255,11 +274,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -268,7 +287,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -278,7 +297,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioTwo');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -355,7 +374,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -372,35 +391,55 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/J.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -107,137 +194,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterJ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterJ').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedJ').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : J', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: J', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : J', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
       // Play the video
       // animatedLetter.play();
       animatedLetter.setVisible(false);
@@ -251,11 +271,11 @@ let scoreTotal = 0;  let isDrawing = false;
       });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Hook',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Hook',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -283,7 +303,7 @@ let scoreTotal = 0;  let isDrawing = false;
         });
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -300,37 +320,56 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
-
-
   }
 
 function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/K.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -95,6 +160,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -112,137 +199,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+        parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'letterK').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterK').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedK').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: K', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : K', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,11 +276,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -268,7 +289,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -278,7 +299,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioTwo');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -354,7 +375,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -371,35 +392,55 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/L.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -90,6 +155,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -114,132 +201,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterL').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterL').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedL').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+        demoButton.setInteractive().on('pointerdown', () => {
+        animatedLetter.setCurrentTime(0);
+        animatedLetter.play(true);
+        graphics.setVisible(false);
+        firstScreen.setVisible(true);
+        if(animatedLetter.visible){
+          animatedLetter.setVisible(false);
+          graphics.setVisible(true);
+          firstScreen.setVisible(false);
+        } else{
+          graphics.setVisible(false);
+          animatedLetter.setVisible(true);
+          firstScreen.setVisible(true);
+          
+        }
+    })
+
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
     const mask = maskGraphics.createGeometryMask();
-
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
-    demoButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.setCurrentTime(0);
-      animatedLetter.play(true);
-      graphics.setVisible(false);
-      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : L', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: L', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : L', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -253,11 +278,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -266,7 +291,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -279,7 +304,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
 
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
@@ -302,7 +326,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -324,7 +347,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -341,30 +364,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
-      audioOneAudio.play();
-submitButton.setVisible(true);
-      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
-      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
 
+    firstTextLayer.setVisible(false);
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
     })
   }
 
@@ -372,4 +380,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/M.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+    function showAnimation() {
+      const clipArt = document.querySelector('.clip-art');
+      clipArt.classList.add('show');
+    }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,139 +196,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedM').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: M', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : M', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,11 +274,12 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -268,7 +288,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -278,7 +298,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioTwo');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -289,7 +309,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       fourthLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const fourthTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '4. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioFourthAudio = this.sound.add('audioTwo');
       fourthTextLayer.setVisible(false);
       fourthLayer.setDepth(1.1);
@@ -390,7 +410,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -407,30 +427,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -438,4 +442,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/N.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -95,6 +160,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -119,131 +206,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterN').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedN').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: N', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : N', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -256,11 +283,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -269,7 +296,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -279,7 +306,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioTwo');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -293,8 +320,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -356,7 +381,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -374,34 +399,55 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/O.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -113,133 +200,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : O", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterO').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterO').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedO').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
+    
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : O', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: O', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : O', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
       // Play the video
       // animatedLetter.play();
       animatedLetter.setVisible(false);
@@ -253,11 +278,12 @@ let scoreTotal = 0;  let isDrawing = false;
       });
 
     let textX, textY;
+    let stepTextSize = isMobile ? 12 : 16;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 12 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around Close',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -291,7 +317,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -308,37 +334,53 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
-
-
   }
 
-function update() {
+function update() {}
+</script>
+<style>
+  .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 */
+  }
 
-</script>
+  .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>

src/pages/guided-tracing/P.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -115,133 +202,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : P", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterP').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedP').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: P', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : P', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,11 +279,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -268,7 +292,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -325,7 +349,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -342,31 +366,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -374,4 +381,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/Q.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -103,145 +190,78 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('letterQ', '/assets/capital-letter/q.svg');
     this.load.svg('layer1', '/assets/capital-letter/q_l1.svg');
     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.audio('audioOne', '/assets/audio/hook-around-close.mp3');
+    this.load.audio('audioTwo', '/assets/audio/slant.mp3');
     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');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-       
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : Q", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterQ').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedQ').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-          animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: Q', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Q', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,11 +275,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around Close',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -268,7 +288,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -281,8 +301,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -325,7 +343,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -342,36 +360,55 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 
 }
+</script>
+<style>
+  .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 */
+      }
+  }
 
-</script>
+  .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>

src/pages/guided-tracing/R.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -97,6 +162,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -121,131 +208,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : R", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 10, customHeight / 2 + letterHeight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2  + 10, customHeight / 2 + letterHeight, 'letterR').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedR').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: R', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : R', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -258,11 +284,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +297,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -295,8 +321,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -358,7 +382,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -390,21 +414,54 @@ let scoreTotal = 0;  let isDrawing = false;
       }
     })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/S.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -107,139 +194,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           // windowLoad();
           submitUserData(this);
+          showAnimation();
+          parentMainContainer.classList.remove('hidden');
         })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : S", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterS').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterS').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedS').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
+    
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: S', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : S', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);
       // Play the video
       // animatedLetter.play();
       animatedLetter.setVisible(false);
@@ -253,11 +272,11 @@ let scoreTotal = 0;  let isDrawing = false;
       });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 12 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around Snake',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -290,7 +309,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -307,31 +326,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
 
 
@@ -340,5 +343,41 @@ let scoreTotal = 0;  let isDrawing = false;
 function update() {
 
 }
+</script>
+<style>
+  .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 */
+      }
+  }
 
-</script>
+  .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>

src/pages/guided-tracing/T.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,137 +196,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+    muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+    retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+    submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+    demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+    submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+    const borderBottom = this.add.graphics();
+    const x = 0; const y = 54;
+    const lineWidth = window.innerWidth;
+    borderBottom.lineStyle(1, 0x0348A8);
+    borderBottom.setAlpha(0.2);
+    borderBottom.beginPath();
+    borderBottom.moveTo(x, y);
+    borderBottom.lineTo(x + lineWidth, y);
+    borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
-        submitButton.setInteractive().on('pointerdown', () => {
-          // console.log('Clicked');
-          submitButton.setVisible(false);
-          // windowLoad();
-          submitUserData(this);
-        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : T", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    submitButton.setInteractive().on('pointerdown', () => {
+      // console.log('Clicked');
+      // windowLoad();
+      submitUserData(this);
+      showAnimation();
+      parentMainContainer.classList.remove('hidden');
+    })
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterT').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterT').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedT').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-    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)
-        }
-    });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: T', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : T', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -253,11 +273,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -266,7 +286,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -321,7 +341,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -338,31 +358,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -370,4 +373,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/U.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -107,138 +194,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+    muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+    retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+    submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+    demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+    submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+    const borderBottom = this.add.graphics();
+    const x = 0; const y = 54;
+    const lineWidth = window.innerWidth;
+    borderBottom.lineStyle(1, 0x0348A8);
+    borderBottom.setAlpha(0.2);
+    borderBottom.beginPath();
+    borderBottom.moveTo(x, y);
+    borderBottom.lineTo(x + lineWidth, y);
+    borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
-        submitButton.setInteractive().on('pointerdown', () => {
-          // console.log('Clicked');
-          submitButton.setVisible(false);
-          // windowLoad();
-          submitUserData(this);
-        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : U", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    submitButton.setInteractive().on('pointerdown', () => {
+      // console.log('Clicked');
+      // windowLoad();
+      submitUserData(this);
+      showAnimation();
+      parentMainContainer.classList.remove('hidden');
+    })
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterU').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterU').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedU').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
-
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: U', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : U', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
       // Play the video
       // animatedLetter.play();
       animatedLetter.setVisible(false);
@@ -252,11 +271,11 @@ let scoreTotal = 0;  let isDrawing = false;
       });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 12 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down Curve Up',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -291,7 +310,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -308,30 +327,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
     })
 
 
@@ -341,4 +344,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/V.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -108,140 +195,72 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
      
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
-        submitButton.setInteractive().on('pointerdown', () => {
-          // console.log('Clicked');
-          submitButton.setVisible(false);
-          submitNotic.setVisible(false);
-          // windowLoad();
-          submitUserData(this);
-        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : V", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
+      submitButton.setInteractive().on('pointerdown', () => {
+        // console.log('Clicked');
+        // windowLoad();
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
+      })
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterV').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterV').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedV').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
-    demoButton.setInteractive().on('pointerdown', () => {
+       demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: V', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : V', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,11 +274,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -268,7 +287,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -281,8 +300,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -304,7 +321,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -326,7 +342,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -343,30 +359,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -374,4 +374,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/W.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -108,139 +195,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
-        submitButton.setInteractive().on('pointerdown', () => {
-          // console.log('Clicked');
-          submitButton.setVisible(false);
-          // windowLoad();
-          submitUserData(this);
-        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : W", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
+      submitButton.setInteractive().on('pointerdown', () => {
+        // console.log('Clicked');
+        // windowLoad();
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
+      })
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedW').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: W', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : W', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -254,11 +273,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -267,7 +286,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioOne');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -277,7 +296,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioOne');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -288,7 +307,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       fourthLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const fourthTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '4. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioFourthAudio = this.sound.add('audioOne');
       fourthTextLayer.setVisible(false);
       fourthLayer.setDepth(1.1);
@@ -389,7 +408,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -406,37 +425,55 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
-
-
   }
 
 function update() {
-
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/X.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,138 +196,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
-        submitButton.setInteractive().on('pointerdown', () => {
-          // console.log('Clicked');
-          submitButton.setVisible(false);
-          // windowLoad();
-          submitUserData(this);
-        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : X", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+      submitButton.setInteractive().on('pointerdown', () => {
+        // console.log('Clicked');
+        // windowLoad();
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
+      })
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterX').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterX').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedX').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: X', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : X', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -254,11 +273,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -267,7 +286,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Cross',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -280,8 +299,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -324,7 +341,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -341,31 +358,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -373,4 +373,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/Y.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -95,6 +160,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -113,136 +200,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
-        submitButton.setInteractive().on('pointerdown', () => {
-          // console.log('Clicked');
-          submitButton.setVisible(false);
-          // windowLoad();
-          submitUserData(this);
-        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : Y", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
+      submitButton.setInteractive().on('pointerdown', () => {
+        // console.log('Clicked');
+        // windowLoad();
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
+      })
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'letterY').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedY').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: Y', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Y', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -255,12 +276,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
-      const audioOneAudio = this.sound.add('audioOne');
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slant Right',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);      const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
@@ -268,7 +288,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant Left',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -278,7 +298,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioThree');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -292,8 +312,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -355,7 +373,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -373,35 +391,55 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/Z.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 //   let x = 100;
 
 // // Use x
@@ -95,6 +160,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     };
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,137 +198,71 @@ let scoreTotal = 0;  let isDrawing = false;
     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');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-                submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-        submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-          font: '900 24px Quicksand',
-          fill: '#05b3a4',
-          backgroundColor : '#7c4c23',
-          padding: {x: 10, y: 10},
-          shadow: {
-            offsetX : 2, 
-            offsetY : 2, 
-            color: '#000',
-            blur: 5,
-            fill: true
-          }
-        });
-         submitButton.setVisible(false);
-        submitButton.setInteractive().on('pointerdown', () => {
-          // console.log('Clicked');
-          submitButton.setVisible(false);
-          // windowLoad();
-          submitUserData(this);
-        })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
+      submitButton.setInteractive().on('pointerdown', () => {
+        // console.log('Clicked');
+        // windowLoad();
+        submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
+      })
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedZ').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+        retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
     const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
+    
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: Z', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : Z', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -254,11 +275,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -267,7 +288,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slant',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -277,7 +298,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const thirdTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '3. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioThreeAudio = this.sound.add('audioOne');
       thirdTextLayer.setVisible(false);
       thirdLayer.setDepth(1.1);
@@ -291,8 +312,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let secondDragStartPoint = { x: 0, y: 0 };
         let thirdDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -354,6 +373,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
+graphics.setMask(mask);
       graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
@@ -371,35 +391,57 @@ let scoreTotal = 0;  let isDrawing = false;
 
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
-      });let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      });
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
 function update() {
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/a.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,13 +115,13 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.7;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      animatedVideoScale = 0.6;
+      animatedVideoScale = 0.75;
       animatedAHeight = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10; 
@@ -73,13 +138,13 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 20;
-      letterScale = 1.5;
+      letterScale = 1.7;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animatedVideoScale = 0.7;
+      animatedVideoScale = 0.75;
       animatedAHeight = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -91,12 +156,33 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
       // console.log("Page loaded on: " + formattedDateTime);
     };
-  // let hideButton;
 
   function preload() {
     this.load.video('animatedA', '/assets/animated-letter/small_a.mp4');
@@ -109,139 +195,73 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.png');  let formattedDateTime;
-  let gameStartTime = "start time here";
+
+    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('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : a", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
   
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : a', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: a', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : a', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
@@ -257,11 +277,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 6 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -270,7 +290,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Small Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -305,8 +325,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-``
-        // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
         secondLayer.on('dragstart', (pointer) => {
@@ -327,7 +345,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -344,32 +362,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
-
     })
   }
 
@@ -377,4 +378,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/b.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xeaeae8,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -92,6 +157,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -110,140 +197,69 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
       submitButton.setInteractive().on('pointerdown', () => {
-        // console.log('Clicked');
-        submitButton.setVisible(false);
-        // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedB').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : b', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: b', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : b', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -257,11 +273,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -270,7 +286,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -325,7 +341,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -342,31 +358,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -374,4 +374,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/c.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 40;
-      letterScale = 1.3;
+      letterScale = 1.7;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.6;
+      animatedVideoScale = 0.75;
       animatedCHeight = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10; 
@@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 30;
-      letterScale = 1.5;
+      letterScale = 1.7;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.7;
+      animatedVideoScale = 0.75;
       animatedCHeight = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,141 +196,73 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : c", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
 
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedC').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 24;
-      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-            animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: c', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : c', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+          animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);
       // Play the video
       // animatedLetter.play();
       animatedLetter.setVisible(false);
@@ -257,11 +276,11 @@ let scoreTotal = 0;  let isDrawing = false;
       });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 7 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -273,8 +292,6 @@ let scoreTotal = 0;  let isDrawing = false;
         // Add these variables to keep track of start points
         let firstDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -296,7 +313,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -313,38 +330,56 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
-
-
   }
 
 function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/d.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,141 +198,80 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+    this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : d", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
    
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedD').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
+    
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+
+    // const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    // const baseFontSize = 24;
+    // const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    // const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    //       animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale);
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: d', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : d', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -259,11 +285,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const  secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const  secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const  audioTwoAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +298,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Roll Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -326,7 +352,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -343,30 +369,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -374,4 +384,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/e.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xeaeae8,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 30;
-      letterScale = 1.4;
+      letterScale = 1.9;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.57;
+      animatedVideoScale = 0.78;
       animatedEHeight = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10; 
@@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 20;
-      letterScale = 1.75;
+      letterScale = 1.9;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.7;
+      animatedVideoScale = 0.78;
       animatedEHeight = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,141 +198,74 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedE').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
+    
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
 
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: e', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : e', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -259,11 +279,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 6 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +292,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Slide',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -307,7 +327,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -329,7 +348,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -346,30 +365,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
-    firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
-      audioOneAudio.play();
-submitButton.setVisible(true);
-      firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
-      graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
 
+    firstTextLayer.setVisible(false);
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
+      graphics.setVisible(true);
     })
   }
 
@@ -377,4 +381,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/f.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xeaeae8,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = -10;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      animatedVideoScale = 0.57;   
-      animatedFHeight = 32;
+      animatedVideoScale = 0.70;   
+      animatedFHeight = 38;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10; 
 
@@ -73,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = -20;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      animatedVideoScale = 0.65;    
-      animatedFHeight = 20;
+      animatedVideoScale = 0.69;    
+      animatedFHeight = 40;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -91,6 +156,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -109,141 +196,72 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
      
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : f", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterF').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterF').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedF').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: f', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : f', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -257,11 +275,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 6 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -270,7 +288,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Cross',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -282,8 +300,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -326,7 +342,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -343,31 +359,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -375,4 +375,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/g.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,15 +115,15 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 8;
-      letterScale = 0.95;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.62;
-      animatedGHeight = 32;
+      animatedVideoScale = 0.75;
+      animatedGHeight = 45;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10; 
 
@@ -74,14 +139,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = -20;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.65;
+      animatedVideoScale = 0.8;
       animatedGHeight = 20;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,141 +198,72 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : g", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedG').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : g', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: g', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : g', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -259,11 +277,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 6 : customWidth * 0.75;
       textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +290,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Down Tail',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -306,7 +324,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-                // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
         secondLayer.on('dragstart', (pointer) => {
@@ -327,7 +344,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -344,31 +361,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -376,4 +376,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/h.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xeaeae8,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +115,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 70;
-      letterScale = 0.95;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.6;
+      animatedVideoScale = 0.75;
       animatedHHeight = 35;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10; 
@@ -74,15 +139,15 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 70;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.63;
-      animatedHHeight = 42;
+      animatedVideoScale = 0.75;
+      animatedHHeight = 35;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
 
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,138 +198,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
+      
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : h", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedH').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
     });
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : h', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: h', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : h', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
@@ -258,11 +278,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+      let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Tall Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +291,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Roll Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Roll Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -283,8 +303,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -327,7 +345,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -344,31 +362,15 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
+      
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-      submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
       animatedLetter.setVisible(false);     
       firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -376,4 +378,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/i.astro

@@ -2,15 +2,77 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script src="/saveGameData.js" is:inline></script>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
+  <script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +84,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xecedea,
     scale: {
       mode: Phaser.Scale.FIT,
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +102,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -50,14 +114,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.14
       canvasHeight = 35; 
       letterIeight = 50;
-      letterScale = 1.2;
+      letterScale = 1.6;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.5;
+      animatedVideoScale = 0.7;
       animatedIHeight = 32;
       helpButtonHeight = customHeight / 1.1;
       helpButtonWidth = customWidth / 2 + 10; 
@@ -74,14 +138,14 @@ let scoreTotal = 0;  let isDrawing = false;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterIeight = 30;
-      letterScale = 1.3;
+      letterScale = 1.6;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.55;
+      animatedVideoScale = 0.7;
       animatedIHeight = 10;
       helpButtonHeight = customHeight / 2 + 40;
       helpButtonWidth = customWidth / 1.32;
@@ -93,6 +157,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,141 +197,70 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-     
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
-
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
    
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'letterI').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterIeight, 'animatedI').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
-
+   
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : i', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: i', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : i', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -259,11 +274,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 5.5 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Small Down',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -272,7 +287,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Dot',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Dot',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -284,8 +299,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -328,7 +341,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -345,30 +358,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -376,4 +373,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>

src/pages/guided-tracing/j.astro

@@ -2,15 +2,78 @@
 import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
+  <main>
+    <div id="blurDisplay" class="w-full min-h-screen absolute backdrop-blur-[5px] z-50">
+      <div class="flex justify-center items-center h-screen ">
+        <button id="beforeStartBtn" class="bg-[#0348A8] px-10 py-2 rounded-[4px] text-[#FFFFFF] text-[32px] font-[700]">Start</button>
+      </div>
+    </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>
+  </main>
 </Layout>
-<script src="/saveGameData.js" is:inline></script>
+<script src="/saveGameAI.js" is:inline></script>
 <script is:inline>
+  function showAnimation() {
+    const clipArt = document.querySelector('.clip-art');
+    clipArt.classList.add('show');
+  }
   const isMobile = window.innerWidth <= 768;
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -22,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     type: Phaser.AUTO,
     width: window.innerWidth,
     height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
+    backgroundColor: 0xebedea,
     scale: {
       mode: Phaser.Scale.FIT, 
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -40,9 +103,11 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-let scoreTotal = 0;  let isDrawing = false;
+  let scoreTotal = 0;
+  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
+  let demoButton;
 
     if(isMobile){
       cloudeSize = 200;
@@ -93,6 +158,28 @@ let scoreTotal = 0;  let isDrawing = false;
       noticeWidth = window.innerWidth * 0.5 - 120;
       noticeHeight = window.innerHeight * 0.32;
     }
+    if(isMobile){
+      topLogoWidth = 4.5;
+      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;
+    }
     window.onload = function() {
       currentDate = new Date();
       formattedDateTime = currentDate.toLocaleString();
@@ -111,140 +198,71 @@ let scoreTotal = 0;  let isDrawing = false;
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
     this.load.svg('handPointer', '/assets/svg/hand.svg');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
-    this.load.image('canvasStand', '/assets/stand2.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.svg('helpIcons', '/assets/svg/help_icon.svg');
   }
 
   function create() {
-     
-              submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      this.add.image(customWidth / topLogoWidth, 30, "topLogo");
+      muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
+      retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
+      submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
+      demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
+      submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
+      cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
+      const borderBottom = this.add.graphics();
+      const x = 0; const y = 54;
+      const lineWidth = window.innerWidth;
+      borderBottom.lineStyle(1, 0x0348A8);
+      borderBottom.setAlpha(0.2);
+      borderBottom.beginPath();
+      borderBottom.moveTo(x, y);
+      borderBottom.lineTo(x + lineWidth, y);
+      borderBottom.strokePath();
 
-      submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
-        font: '900 24px Quicksand',
-        fill: '#05b3a4',
-        backgroundColor : '#7c4c23',
-        padding: {x: 10, y: 10},
-        shadow: {
-          offsetX : 2, 
-          offsetY : 2, 
-          color: '#000',
-          blur: 5,
-          fill: true
-        }
-      });
-      submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
         // windowLoad();
         submitUserData(this);
+        showAnimation();
+        parentMainContainer.classList.remove('hidden');
       })
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
-  
-    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
-    cloud.setDepth(-1.8);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-      loop: true,
-      callback: () => {
-        cloud.tilePositionX += scrollSpeed;
-      },
-      delay: 16, // Adjust the delay for the desired scrolling speed
-    });
-
-    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
- 
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-   
-    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterJeight, 'letterJ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 20 , customHeight / 2 + letterJeight, 'letterJ').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterJeight, 'animatedJ').setDepth(2); canvasStand
     firstScreen.setVisible(false);
-    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    // Set up a mask for the drawing area based on the canvas dimensions
-    const maskGraphics = this.make.graphics()
-    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
-    const mask = maskGraphics.createGeometryMask();
-
- 
-
-    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)
-        }
-      });
-    hideButton.setInteractive().on('pointerdown', () => {
-      animatedLetter.stop();
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      animatedLetter.setVisible(false);
-    });
-      hideButton.setVisible(false);
-      let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
-        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)
-        }
-      });
 
     demoButton.setInteractive().on('pointerdown', () => {
       animatedLetter.setCurrentTime(0);
       animatedLetter.play(true);
       graphics.setVisible(false);
       firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      animatedLetter.setVisible(true);
-    });
+      if(animatedLetter.visible){
+        animatedLetter.setVisible(false);
+        graphics.setVisible(true);
+        firstScreen.setVisible(false);
+      } else{
+        graphics.setVisible(false);
+        animatedLetter.setVisible(true);
+        firstScreen.setVisible(true);
+        
+      }
+    })
 
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 24;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : j', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+            retryButton.setInteractive().on('pointerdown', () => {
+window.location.reload();
+    })
+const maskGraphics = this.make.graphics();
+    maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
+    const mask = maskGraphics.createGeometryMask();
+    let responsiveFontSize = isMobile ? 16 : 32;
+    this.add.text(window.innerWidth / 2, 80, 'Letter: j', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
+    const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write letter : j', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
-
     // Play the video
     // animatedLetter.play();
     animatedLetter.setVisible(false);
@@ -258,11 +276,11 @@ let scoreTotal = 0;  let isDrawing = false;
     });
 
     let textX, textY;
-
+    let stepTextSize = isMobile ? 12 : 16;
       firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterJeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Down Tail',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioOneAudio = this.sound.add('audioOne');
       // audioOneAudio.play();
       firstLayer.setDepth(1);
@@ -271,7 +289,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
       secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterJeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Dot',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const secondTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '2. Dot',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
       const audioTwoAudio = this.sound.add('audioTwo');
       secondTextLayer.setVisible(false);
       secondLayer.setDepth(1);
@@ -283,8 +301,6 @@ let scoreTotal = 0;  let isDrawing = false;
         let firstDragStartPoint = { x: 0, y: 0 };
         let secondDragStartPoint = { x: 0, y: 0 };
 
-        // ...
-
         // Add this code for firstLayer
         firstLayer.on('dragstart', (pointer) => {
         firstDragStartPoint.x = pointer.x;
@@ -306,7 +322,6 @@ let scoreTotal = 0;  let isDrawing = false;
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -328,7 +343,7 @@ let scoreTotal = 0;  let isDrawing = false;
 
 
       graphics = this.add.graphics();
-      graphics.setMask(mask);
+graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
       this.input.on('pointerdown', function (pointer) {
         isDrawing = true;
@@ -345,30 +360,14 @@ let scoreTotal = 0;  let isDrawing = false;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
-      font: '900 24px Quicksand',
-      fill: '#05b3a4',
-      backgroundColor : '#7c4c23',
-      padding: {x: 20, y: 10},
-      shadow: {
-        offsetX : 2, 
-        offsetY : 2, 
-        color: '#000',
-        blur: 5,
-        fill: true
-      }
-    })
     firstTextLayer.setVisible(false);
-    startButton.setInteractive().on('pointerdown', () => {
+    document.getElementById('beforeStartBtn').addEventListener('click', function() {
+      document.getElementById('blurDisplay').classList.add('hidden');
       audioOneAudio.play();
-submitButton.setVisible(true);
       firstTextLayer.setVisible(true);
-        animatedLetter.setVisible(false);     firstScreen.setVisible(false);
+      animatedLetter.setVisible(false);     
+      firstScreen.setVisible(false);
       graphics.setVisible(true);
-      hideButton.setVisible(false);
-      demoButton.setVisible(true);
-      startButton.setVisible(false);
-
     })
   }
 
@@ -376,4 +375,41 @@ function update() {
 
 }
 
-</script>
+</script>
+<style>
+  .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>