Spaces:
Running
Running
File size: 101,276 Bytes
7ef5d47 a0808f3 32956f2 66269b4 9001c24 1a5c262 9001c24 1a5c262 66269b4 d079b10 66269b4 d874f33 abcc177 d874f33 901982e 4e944e4 90f7646 55c2535 90f7646 78849f8 90f7646 78849f8 90f7646 55c2535 66269b4 90f7646 e9b9c38 90f7646 e9b9c38 90f7646 d874f33 90f7646 78849f8 90f7646 d874f33 90f7646 d874f33 d079b10 90f7646 1a5c262 90f7646 1a5c262 90f7646 926bdee 90f7646 926bdee 90f7646 926bdee 90f7646 046f2a2 90f7646 d874f33 901982e 90f7646 4a115f4 6ec003e 90f7646 d874f33 90f7646 6ca9732 90f7646 684f9a1 901982e 90f7646 132d71d 90f7646 4e96de1 90f7646 78849f8 90f7646 78849f8 90f7646 78849f8 90f7646 78849f8 90f7646 78849f8 90f7646 78849f8 90f7646 901982e 4e944e4 c520e90 e815114 6cacd7b e815114 c520e90 077ad81 66ccfc2 c520e90 6cacd7b 66ccfc2 6cacd7b e815114 6cacd7b 077ad81 6cacd7b 66ccfc2 6cacd7b 077ad81 6cacd7b 66ccfc2 e815114 78849f8 75818e0 78849f8 14e4ee5 78849f8 14e4ee5 78849f8 14e4ee5 78849f8 14e4ee5 78849f8 14e4ee5 78849f8 051bc5c 78849f8 42da466 78849f8 42da466 78849f8 42da466 e96828c 78849f8 4a2c52e 78849f8 4a2c52e 78849f8 4a2c52e e96828c 78849f8 4ad87d5 78849f8 4ad87d5 78849f8 4ad87d5 78849f8 e96828c 78849f8 4e944e4 78849f8 4e944e4 78849f8 4e944e4 78849f8 4e944e4 78849f8 4e944e4 78849f8 4e944e4 90f7646 78849f8 0ef1453 78849f8 0ef1453 78849f8 0ef1453 78849f8 698649c 78849f8 698649c 78849f8 4e944e4 78849f8 698649c 4d8f18c 78849f8 7ef5d47 78849f8 4d8f18c 78849f8 698649c 78849f8 698649c 78849f8 4d8f18c 78849f8 698649c 4d8f18c 698649c 4d8f18c 698649c 4d8f18c 698649c fa931e2 698649c fa931e2 78849f8 fa931e2 698649c fa931e2 4d8f18c d71bda1 78849f8 e68af0c 698649c 78849f8 698649c 78849f8 698649c 78849f8 698649c 78849f8 e68af0c 78849f8 e68af0c 78849f8 62b2b79 78849f8 698649c 78849f8 698649c 78849f8 698649c 78849f8 1d99e90 698649c 1d99e90 55c2535 1d99e90 55c2535 1d99e90 55c2535 90f7646 55c2535 1d99e90 b9c6331 78849f8 1d99e90 b9c6331 1d99e90 b9c6331 1d99e90 62b2b79 1d99e90 1a5c262 e68af0c 78849f8 1d99e90 78849f8 e68af0c 97f4a30 698649c 97f4a30 78849f8 97f4a30 78849f8 97f4a30 698649c 97f4a30 78849f8 97f4a30 78849f8 e68af0c 698649c 78849f8 e68af0c 97f4a30 4a2c52e e68af0c 97f4a30 7a2dde0 78849f8 97f4a30 80651c8 97f4a30 4a2c52e e68af0c 97f4a30 e68af0c 97f4a30 78849f8 d079b10 78849f8 97f4a30 d079b10 97f4a30 55700d1 97f4a30 d079b10 97f4a30 55700d1 97f4a30 86248bc 97f4a30 86248bc 97f4a30 e68af0c 97f4a30 90f7646 97f4a30 45c534a 97f4a30 90f7646 55700d1 8f6f76d 90f7646 97f4a30 b9c6331 97f4a30 4a2c52e b9c6331 97f4a30 b9c6331 97f4a30 b9c6331 97f4a30 b9c6331 97f4a30 e68af0c 97f4a30 b9c6331 97f4a30 b9c6331 97f4a30 b9c6331 97f4a30 b9c6331 97f4a30 b9c6331 97f4a30 b9c6331 97f4a30 b9c6331 97f4a30 90f7646 aee1339 90f7646 aee1339 90f7646 698649c 97f4a30 800d5d5 97f4a30 cdcbf63 97f4a30 78849f8 cdcbf63 78849f8 e68af0c 78849f8 cdcbf63 78849f8 cdcbf63 78849f8 cdcbf63 78849f8 cdcbf63 78849f8 800d5d5 78849f8 cdcbf63 78849f8 64e35e4 78849f8 8c465da 78849f8 83db528 78849f8 d874f33 78849f8 83db528 78849f8 698649c 046f2a2 698649c 78849f8 97f4a30 78849f8 b9c6331 78849f8 b9c6331 78849f8 b9c6331 80651c8 78849f8 62b2b79 78849f8 4a2c52e 78849f8 62b2b79 78849f8 62b2b79 78849f8 698649c 78849f8 698649c 78849f8 698649c 78849f8 698649c 78849f8 698649c 78849f8 698649c 78849f8 b9c6331 78849f8 b9c6331 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 926bdee 78849f8 b9c6331 78849f8 698649c 78849f8 b9c6331 78849f8 4a2c52e 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 4a2c52e 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 e68af0c 78849f8 926bdee 78849f8 90f7646 6cacd7b 90f7646 f9b747d 90f7646 78849f8 698649c 78849f8 698649c 78849f8 698649c 78849f8 97f4a30 78849f8 e68af0c 78849f8 e68af0c 78849f8 97f4a30 78849f8 e68af0c 78849f8 926bdee 78849f8 698649c 78849f8 4a2c52e 78849f8 4a2c52e 78849f8 4a2c52e 78849f8 4a2c52e 78849f8 97f4a30 e68af0c 78849f8 97f4a30 b9c6331 78849f8 e68af0c 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 90f7646 088b120 926bdee 78849f8 e68af0c 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 b9c6331 78849f8 97f4a30 78849f8 b391d41 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 97f4a30 78849f8 b9c6331 78849f8 97f4a30 78849f8 4a2c52e 78849f8 97f4a30 78849f8 4a2c52e 78849f8 4a2c52e 78849f8 4a2c52e 78849f8 97f4a30 f5857ea 78849f8 61bacd9 78849f8 62b2b79 06a44ed | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 1021 1022 1023 1024 1025 1026 1027 1028 1029 1030 1031 1032 1033 1034 1035 1036 1037 1038 1039 1040 1041 1042 1043 1044 1045 1046 1047 1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063 1064 1065 1066 1067 1068 1069 1070 1071 1072 1073 1074 1075 1076 1077 1078 1079 1080 1081 1082 1083 1084 1085 1086 1087 1088 1089 1090 1091 1092 1093 1094 1095 1096 1097 1098 1099 1100 1101 1102 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123 1124 1125 1126 1127 1128 1129 1130 1131 1132 1133 1134 1135 1136 1137 1138 1139 1140 1141 1142 1143 1144 1145 1146 1147 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 1162 1163 1164 1165 1166 1167 1168 1169 1170 1171 1172 1173 1174 1175 1176 1177 1178 1179 1180 1181 1182 1183 1184 1185 1186 1187 1188 1189 1190 1191 1192 1193 1194 1195 1196 1197 1198 1199 1200 1201 1202 1203 1204 1205 1206 1207 1208 1209 1210 1211 1212 1213 1214 1215 1216 1217 1218 1219 1220 1221 1222 1223 1224 1225 1226 1227 1228 1229 1230 1231 1232 1233 1234 1235 1236 1237 1238 1239 1240 1241 1242 1243 1244 1245 1246 1247 1248 1249 1250 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 1261 1262 1263 1264 1265 1266 1267 1268 1269 1270 1271 1272 1273 1274 1275 1276 1277 1278 1279 1280 1281 1282 1283 1284 1285 1286 1287 1288 1289 1290 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 1301 1302 1303 1304 1305 1306 1307 1308 1309 1310 1311 1312 1313 1314 1315 1316 1317 1318 1319 1320 1321 1322 1323 1324 1325 1326 1327 1328 1329 1330 1331 1332 1333 1334 1335 1336 1337 1338 1339 1340 1341 1342 1343 1344 1345 1346 1347 1348 1349 1350 1351 1352 1353 1354 1355 1356 1357 1358 1359 1360 1361 1362 1363 1364 1365 1366 1367 1368 1369 1370 1371 1372 1373 1374 1375 1376 1377 1378 1379 1380 1381 1382 1383 1384 1385 1386 1387 1388 1389 1390 1391 1392 1393 1394 1395 1396 1397 1398 1399 1400 1401 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1419 1420 1421 1422 1423 1424 1425 1426 1427 1428 1429 1430 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1443 1444 1445 1446 1447 1448 1449 1450 1451 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1463 1464 1465 1466 1467 1468 1469 1470 1471 1472 1473 1474 1475 1476 1477 1478 1479 1480 1481 1482 1483 1484 1485 1486 1487 1488 1489 1490 1491 1492 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1516 1517 1518 1519 1520 1521 1522 1523 1524 1525 1526 1527 1528 1529 1530 1531 1532 1533 1534 1535 1536 1537 1538 1539 1540 1541 1542 1543 1544 1545 1546 1547 1548 1549 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1561 1562 1563 1564 1565 1566 1567 1568 1569 1570 1571 1572 1573 1574 1575 1576 1577 1578 1579 1580 1581 1582 1583 1584 1585 1586 1587 1588 1589 1590 1591 1592 1593 1594 1595 1596 1597 1598 1599 1600 1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 1611 1612 1613 1614 1615 1616 1617 1618 1619 1620 1621 1622 1623 1624 1625 1626 1627 1628 1629 1630 1631 1632 1633 1634 1635 1636 1637 1638 1639 1640 1641 1642 1643 1644 1645 1646 1647 1648 1649 1650 1651 1652 1653 1654 1655 1656 1657 1658 1659 1660 1661 1662 1663 1664 1665 1666 1667 1668 1669 1670 1671 1672 1673 1674 1675 1676 1677 1678 1679 1680 1681 1682 1683 1684 1685 1686 1687 1688 1689 1690 1691 1692 1693 1694 1695 1696 1697 1698 1699 1700 1701 1702 1703 1704 1705 1706 1707 1708 1709 1710 1711 1712 1713 1714 1715 1716 1717 1718 1719 1720 1721 1722 1723 1724 1725 1726 1727 1728 1729 1730 1731 1732 1733 1734 1735 1736 1737 1738 1739 1740 1741 1742 1743 1744 1745 1746 1747 1748 1749 1750 1751 1752 1753 1754 1755 1756 1757 1758 1759 1760 1761 1762 1763 1764 1765 1766 1767 1768 1769 1770 1771 1772 1773 1774 1775 1776 1777 1778 1779 1780 1781 1782 1783 1784 1785 1786 1787 1788 1789 1790 1791 1792 1793 1794 1795 1796 1797 1798 1799 1800 1801 1802 1803 1804 1805 1806 1807 1808 1809 1810 1811 1812 1813 1814 1815 1816 1817 1818 1819 1820 1821 1822 1823 1824 1825 1826 1827 1828 1829 1830 1831 1832 1833 1834 1835 1836 1837 1838 1839 1840 1841 1842 1843 1844 1845 1846 1847 1848 1849 1850 1851 1852 1853 1854 1855 1856 1857 1858 1859 1860 1861 1862 1863 1864 1865 1866 1867 1868 1869 1870 1871 1872 1873 1874 1875 1876 1877 1878 1879 1880 1881 1882 1883 1884 1885 1886 1887 1888 1889 1890 1891 1892 1893 1894 1895 1896 1897 1898 1899 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 | import { createRoom, subscribeToRoom, getChallenges, resetProgress, removeUser, cleanupOldRooms } from "../services/classroom.js";
import { loginWithEmail, registerWithEmail, signOutUser, checkInstructorPermission, getInstructors, addInstructor, updateInstructor, removeInstructor } from "../services/auth.js";
import { generateMonsterSVG, getNextMonster, MONSTER_DEFS } from "../utils/monsterUtils.js";
// Load html-to-image dynamically (Better support than html2canvas)
const script = document.createElement('script');
script.src = "https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.js";
document.head.appendChild(script);
let cachedChallenges = [];
let currentStudents = [];
export async function renderInstructorView() {
// Pre-fetch challenges for table headers
try {
cachedChallenges = await getChallenges();
window.cachedChallenges = cachedChallenges; // Expose for dashboard
} catch (e) {
console.error("Failed header load", e);
}
return `
<div id="auth-modal" class="fixed inset-0 bg-gray-900 bg-opacity-95 flex items-center justify-center z-50">
<div class="bg-gray-800 p-8 rounded-lg shadow-2xl text-center max-w-sm w-full border border-gray-700">
<div class="text-6xl mb-4 animate-bounce">🔒</div>
<h2 class="text-2xl font-bold text-white mb-2">講師登入</h2>
<p class="text-gray-400 mb-6 text-sm">請輸入帳號密碼登入</p>
<div class="space-y-3 text-left">
<div>
<label class="text-xs text-gray-500 block mb-1">Email (你的帳號)</label>
<input type="email" id="login-email" class="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:border-cyan-500" placeholder="例如: teacher@school.edu">
</div>
<div>
<label class="text-xs text-gray-500 block mb-1">密碼</label>
<input type="password" id="login-password" class="w-full bg-gray-700 text-white border border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:border-cyan-500" placeholder="輸入密碼">
</div>
</div>
<div class="mt-6 flex gap-2">
<button id="login-btn" class="flex-1 bg-cyan-600 hover:bg-cyan-500 text-white font-bold py-2 px-4 rounded transition-colors duration-200">
登入
</button>
<button id="register-btn" class="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded transition-colors duration-200">
註冊
</button>
</div>
<p class="text-gray-500 text-xs mt-3">如果是第一次使用，請先通知管理員新增您的 Email 到白名單，然後點選「註冊」設定密碼。</p>
<p id="auth-error" class="text-red-400 text-sm mt-4 hidden"></p>
</div>
</div>
<!-- Instructor Management Modal -->
<div id="instructor-modal" class="fixed inset-0 bg-gray-900/95 backdrop-blur z-[80] hidden flex flex-col items-center justify-center p-4">
<div class="bg-gray-800 rounded-xl border border-gray-700 shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col">
<div class="p-6 border-b border-gray-700 flex justify-between items-center">
<h2 class="text-2xl font-bold text-white">👥 管理講師權限 (Manage Instructors)</h2>
<button onclick="document.getElementById('instructor-modal').classList.add('hidden')" class="text-gray-400 hover:text-white text-2xl">✕</button>
</div>
<div class="p-6 flex-1 overflow-y-auto">
<div class="mb-6 flex space-x-2">
<input type="email" id="new-inst-email" placeholder="Email (Gmail)" class="bg-gray-900 border border-gray-600 text-white px-4 py-2 rounded flex-1">
<input type="text" id="new-inst-name" placeholder="姓名" class="bg-gray-900 border border-gray-600 text-white px-4 py-2 rounded w-32">
<div class="flex items-center space-x-2 text-sm text-gray-300 bg-gray-900 px-3 rounded border border-gray-600">
<label><input type="checkbox" id="perm-room" checked> 開房</label>
<label><input type="checkbox" id="perm-q" checked> 題目</label>
<label><input type="checkbox" id="perm-inst"> 管理人</label>
</div>
<button id="btn-add-inst" class="bg-green-600 hover:bg-green-500 text-white px-4 py-2 rounded font-bold">新增</button>
</div>
<table class="w-full text-left border-collapse">
<thead>
<tr class="text-gray-400 border-b border-gray-700">
<th class="p-3">姓名</th>
<th class="p-3">Email</th>
<th class="p-3">權限</th>
<th class="p-3">動作</th>
</tr>
</thead>
<tbody id="instructor-list-body" class="text-gray-300">
<!-- Dynamic list -->
</tbody>
</table>
</div>
</div>
</div>
<!--Broadcast Modal(Hidden by default )-->
<div id="broadcast-modal" class="fixed inset-0 bg-black/90 backdrop-blur z-50 hidden flex flex-col items-center justify-center p-8 transition-opacity duration-300">
<button onclick="closeBroadcast()" class="absolute top-6 right-6 text-gray-400 hover:text-white text-2xl">✕</button>
<div id="broadcast-content" class="bg-gray-800 border border-gray-600 rounded-2xl p-8 max-w-4xl w-full text-center shadow-2xl transform transition-transform scale-95 opacity-0">
<div class="mb-4 flex flex-col items-center">
<div class="w-16 h-16 rounded-full bg-cyan-600 flex items-center justify-center text-3xl font-bold text-white mb-2" id="broadcast-avatar">
D
</div>
<h3 class="text-xl text-cyan-300 font-bold" id="broadcast-author">Dave</h3>
<span class="text-gray-500 text-sm" id="broadcast-challenge">Challenge Name</span>
</div>
<div class="bg-black/30 rounded-xl p-6 mb-8 text-left overflow-auto max-h-[50vh]">
<pre class="text-green-400 font-mono text-lg whitespace-pre-wrap" id="broadcast-prompt">Loading...</pre>
</div>
<div class="flex justify-center space-x-4">
<button id="btn-show-stage" class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg">
<span>🖥️ 投放到大螢幕 (本機)</span>
</button>
<button id="btn-reject-task" class="bg-red-600 hover:bg-red-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg shadow-lg">
<span>🛑 退回重做 (Reject)</span>
</button>
<!-- Future Feature: Send to Students -->
<!--
<button id="btn-broadcast-all" class="bg-purple-600 hover:bg-purple-500 text-white font-bold py-3 px-8 rounded-xl flex items-center space-x-2 text-lg opacity-50 cursor-not-allowed" title="此功能開發中">
<span>📡 推送給所有人</span>
</button>
-->
</div>
</div>
<!-- Big Screen Mode (Initially hidden inside modal) -->
<div id="stage-view" class="hidden absolute inset-0 bg-gray-900 flex flex-col items-center justify-center p-10">
<button onclick="closeStage()" class="absolute top-6 right-6 text-gray-500 hover:text-white text-4xl">✕</button>
<h1 class="text-4xl font-bold text-cyan-400 mb-8" id="stage-title">優秀作品展示</h1>
<div class="bg-black border-2 border-cyan-500/50 rounded-2xl p-10 max-w-6xl w-full shadow-[0_0_50px_rgba(6,182,212,0.2)]">
<pre class="text-3xl text-green-400 font-mono whitespace-pre-wrap leading-relaxed" id="stage-prompt">...</pre>
</div>
<div class="mt-8 text-2xl text-gray-400">
Author: <span class="text-white font-bold" id="stage-author">Dave</span>
</div>
</div>
</div>
<!--Group Photo Modal-->
<div id="group-photo-modal" class="fixed inset-0 bg-gray-900/95 backdrop-blur-md z-50 hidden flex flex-col items-center justify-center p-4 transition-opacity duration-300">
<button onclick="document.getElementById('group-photo-modal').classList.add('hidden')" class="absolute top-6 right-6 text-gray-400 hover:text-white text-4xl z-50">✕</button>
<div class="text-center mb-8 z-10">
<h2 class="text-3xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-orange-500 to-red-500 tracking-wider drop-shadow-lg">
大合照 CLASS PHOTO
</h2>
<p class="text-gray-400 mt-2 font-mono" id="photo-date">2026.01.27</p>
</div>
<div class="absolute top-6 left-6 z-50 flex space-x-4">
<button id="snapshot-btn" class="bg-white/10 hover:bg-white/20 text-white border border-white/30 font-bold py-2 px-6 rounded-full backdrop-blur-md transition-all flex items-center space-x-2 shadow-lg group">
<span class="text-2xl group-hover:scale-110 transition-transform">📸</span>
<span>拍照 (Snapshot)</span>
</button>
</div>
<div id="group-photo-container" class="w-full max-w-7xl flex flex-col items-center overflow-y-auto max-h-[80vh] custom-scrollbar relative">
<!-- Dynamic Content -->
</div>
<!-- Countdown Overlay -->
<div id="snapshot-overlay" class="absolute inset-0 z-[60] hidden flex-col items-center justify-center pointer-events-none">
<div id="countdown-number" class="text-[150px] font-black text-white drop-shadow-[0_0_50px_rgba(0,0,0,0.8)] animate-pulse">3</div>
</div>
</div>
<!-- Multi-Prompt Viewer Modal -->
<div id="prompt-list-modal" class="fixed inset-0 bg-black/95 backdrop-blur z-[60] hidden flex flex-col p-6 transition-opacity duration-300">
<div class="flex justify-between items-center mb-6 border-b border-gray-700 pb-4">
<div>
<h2 class="text-2xl font-bold text-cyan-400" id="prompt-list-title">提示詞列表</h2>
<p class="text-gray-400 text-sm" id="prompt-list-subtitle">點選下方複選框進行比較 (最多3項)</p>
</div>
<button onclick="document.getElementById('prompt-list-modal').classList.add('hidden')" class="text-gray-400 hover:text-white text-3xl">✕</button>
</div>
<div id="prompt-list-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 overflow-y-auto flex-1 custom-scrollbar pb-20">
<!-- Dynamic Cards -->
</div>
<!-- Floating Action Footer -->
<div class="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-4">
<button id="btn-compare-prompts" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white font-bold py-3 px-8 rounded-full shadow-2xl flex items-center space-x-2 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<span>🔍 比較已選項目 (0/3)</span>
</button>
<label class="flex items-center space-x-2 bg-gray-800 px-4 rounded-full border border-gray-600 cursor-pointer hover:bg-gray-700 transition">
<input type="checkbox" id="list-anonymous-toggle" class="w-5 h-5 rounded border-gray-500 text-purple-600 focus:ring-purple-500 bg-gray-900">
<span class="text-gray-300 select-none">隱藏姓名</span>
</label>
</div>
</div>
<!-- Comparison Modal with Annotation Canvas -->
<div id="comparison-modal" class="fixed inset-0 bg-gray-900 z-[70] hidden flex flex-col">
<!-- Toolbar -->
<div class="bg-gray-800 p-4 border-b border-gray-700 flex justify-between items-center shadow-lg z-50">
<h2 class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">
提示詞比較與註記
</h2>
<div class="flex items-center space-x-4 bg-gray-900 rounded-full px-4 py-1.5 border border-gray-600">
<!-- Anonymous Toggle -->
<button id="btn-anonymous-toggle" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-1 px-3 rounded text-xs transition-colors mr-2" onclick="toggleAnonymous(this)">
👀 隱藏姓名
</button>
<!-- Pen Tools -->
<button class="annotation-tool ring-white p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 focus:outline-none" data-tool="pen" data-color="#ef4444" onclick="setPenTool('pen', '#ef4444', this)">
<div class="w-4 h-4 rounded-full bg-red-500"></div>
</button>
<button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-tool="pen" data-color="#3b82f6" onclick="setPenTool('pen', '#3b82f6', this)">
<div class="w-4 h-4 rounded-full bg-blue-500"></div>
</button>
<button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none" data-tool="pen" data-color="#eab308" onclick="setPenTool('pen', '#eab308', this)">
<div class="w-4 h-4 rounded-full bg-yellow-500"></div>
</button>
<div class="w-px h-6 bg-gray-600 mx-2"></div>
<!-- Eraser -->
<button class="annotation-tool p-2 rounded-full hover:bg-gray-700 transition-colors ring-2 ring-transparent focus:outline-none flex items-center justify-center" data-tool="eraser" onclick="setPenTool('eraser', null, this)" title="橡皮擦">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-6 h-6" fill="white">
<rect x="75.264" y="277.317" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -229.5849 204.8263)" style="fill:#F2EBD9;" width="114.382" height="204.46"/>
<path style="fill:#6DA8D6;" d="M281.767,297.776l164.291-164.29l-67.544-67.544l-227.84,227.84l67.544,67.544l40.44-40.44 c3.19-3.19,8.362-3.191,11.553-0.002l11.555-11.555C278.576,306.138,278.577,300.966,281.767,297.776z"/>
<g>
<path style="fill:#185F8D;" d="M293.321,309.331c-1.595,1.595-3.686,2.393-5.777,2.393s-4.182-0.797-5.777-2.393 c-0.001-0.002-11.556,11.553-11.556,11.553c3.193,3.192,3.193,8.365,0.002,11.556l-40.44,40.44l34.663,34.664l227.84-227.84 l-34.664-34.663L293.321,309.331z"/>
<rect x="74.609" y="126.462" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -37.7149 210.8935)" style="fill:#185F8D;" width="322.208" height="49.021"/>
</g>
<path style="fill:#082947;" d="M509.607,173.926L338.073,2.393C336.542,0.861,334.463,0,332.297,0c-2.167,0-4.245,0.861-5.777,2.393 L87.126,241.787c-3.191,3.191-3.191,8.364,0,11.554l1.926,1.926L2.393,341.926c-3.191,3.191-3.191,8.364,0,11.554l156.127,156.127 c1.595,1.595,3.686,2.393,5.777,2.393c2.09,0,4.182-0.797,5.777-2.393l86.659-86.659l1.926,1.926 c1.595,1.595,3.686,2.393,5.777,2.393s4.182-0.797,5.777-2.393L509.607,185.48c1.533-1.532,2.393-3.61,2.393-5.777 C512,177.537,511.139,175.458,509.607,173.926z M264.436,407.543l-34.663-34.664l40.44-40.44c3.191-3.191,3.191-8.364,0-11.554 c-3.193-3.191-8.364-3.19-11.554,0l-40.44,40.44l-67.544-67.544l227.84-227.84l67.544,67.544l-164.292,164.29 c-3.191,3.19-3.191,8.362-0.001,11.553c1.597,1.597,3.688,2.394,5.779,2.394s4.182-0.797,5.777-2.393l164.291-164.29l34.664,34.663 L264.436,407.543z M366.96,54.387l-227.84,227.84l-34.663-34.663l227.84-227.84L366.96,54.387z M245.178,411.394l-80.881,80.881 L19.725,347.702l80.881-80.881L245.178,411.394z"/>
</svg>
</button>
<div class="w-px h-6 bg-gray-600 mx-2"></div>
<!-- Size Selector -->
<div class="flex items-center space-x-1 bg-gray-800 rounded p-0.5">
<button class="size-btn px-2 py-0.5 text-xs text-gray-400 hover:text-white rounded hover:bg-gray-700" onclick="setPenSize(3, this)" data-size="3">S</button>
<button class="size-btn px-2 py-0.5 text-xs text-gray-400 hover:text-white rounded hover:bg-gray-700" onclick="setPenSize(8, this)" data-size="8">M</button>
<button class="size-btn px-2 py-0.5 text-xs text-gray-400 hover:text-white rounded hover:bg-gray-700" onclick="setPenSize(16, this)" data-size="16">L</button>
</div>
<div class="w-px h-6 bg-gray-600 mx-2"></div>
<button onclick="clearCanvas()" class="text-gray-400 hover:text-white text-sm font-bold px-2">
清除
</button>
</div>
<button onclick="closeComparison()" class="text-gray-400 hover:text-white text-3xl">✕</button>
</div>
<!-- Canvas Container -->
<div class="flex-1 relative overflow-hidden bg-gray-900" id="comparison-container">
<!-- Grid Content (Will be behind canvas) -->
<div id="comparison-grid" class="absolute inset-0 grid gap-0 p-0 z-0">
<!-- Dynamic Columns -->
</div>
<!-- Canvas Layer -->
<canvas id="annotation-canvas" class="absolute inset-0 z-10 touch-none cursor-none"></canvas>
<!-- Custom Tool Cursor -->
<div id="tool-cursor" class="absolute hidden rounded-full pointer-events-none z-50 transform -translate-x-1/2 -translate-y-1/2 will-change-transform shadow-sm border border-white/50"></div>
</div>
</div>
<div class="min-h-screen p-6 pb-20 bg-gray-900 text-white">
<!-- Header -->
<header class="flex flex-col md:flex-row justify-between items-center mb-6 bg-gray-800 p-4 rounded-xl border border-gray-700 space-y-4 md:space-y-0 sticky top-0 z-30 shadow-lg">
<div class="flex items-center space-x-4">
<h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
儀表板 <span class="text-xs text-gray-600 font-mono ml-2">v26.01.27</span>
</h1>
<div id="room-info" class="hidden flex items-center space-x-2 bg-black/30 px-3 py-1 rounded-lg border border-gray-700">
<span class="text-xs text-gray-500 uppercase">Room</span>
<span id="display-room-code" class="text-xl font-mono font-bold text-cyan-400 tracking-widest"></span>
<button id="leave-room-btn" class="ml-2 bg-red-900/50 hover:bg-red-800 text-red-300 hover:text-white px-2 py-0.5 rounded text-xs border border-red-800/50 transition-colors" title="離開教室">
🚪 離開
</button>
</div>
</div>
<div class="flex space-x-3">
<div class="flex items-center space-x-2 text-xs text-gray-400 mr-4 border-r border-gray-700 pr-4">
<div class="flex items-center"><div class="w-3 h-3 bg-gray-700 rounded-sm mr-1"></div> 未開始</div>
<div class="flex items-center"><div class="w-3 h-3 bg-blue-600 rounded-sm mr-1"></div> 進行中</div>
<div class="flex items-center"><div class="w-3 h-3 bg-green-500 rounded-sm mr-1"></div> 已完成</div>
<div class="flex items-center"><div class="w-3 h-3 bg-red-500 animate-pulse rounded-sm mr-1"></div> 卡關 (>5m)</div>
</div>
<button id="group-photo-btn" class="hidden bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white font-bold py-2 px-4 rounded-lg transition-all shadow-lg border border-pink-400/30 flex items-center space-x-2">
<span>📸 大合照</span>
</button>
<button id="nav-instructors-btn" class="hidden bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-lg transition-all border border-indigo-400/30 mr-2">
👥 管理講師
</button>
<button id="nav-admin-btn" class="hidden bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition-all border border-gray-600">
管理題目
</button>
<div id="create-room-container" class="flex items-center space-x-2">
<input type="text" id="rejoin-room-code" placeholder="代碼" class="bg-gray-900 border border-gray-700 text-white px-3 py-2 rounded-lg w-20 text-center focus:outline-none focus:border-cyan-500">
<button id="rejoin-room-btn" class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-2 rounded-lg">重回</button>
<button id="create-room-btn" class="bg-purple-600 hover:bg-purple-500 text-white font-bold px-4 py-2 rounded-lg shadow-lg">開房</button>
</div>
</div>
</header>
<!-- Fixed Bottom Right Controls -->
<div class="fixed bottom-6 right-6 z-40 flex flex-col space-y-4">
<button id="btn-open-gallery" class="w-14 h-14 rounded-full bg-gray-800/80 backdrop-blur-md border border-cyan-500/30 text-cyan-400 shadow-[0_0_15px_rgba(6,182,212,0.3)] hover:scale-110 hover:bg-cyan-900/50 hover:border-cyan-400 transition-all duration-300 flex items-center justify-center group" title="怪獸圖鑑">
<span class="text-2xl filter drop-shadow-[0_0_5px_rgba(34,211,238,0.8)] group-hover:animate-bounce">👾</span>
</button>
<button id="logout-btn" class="w-14 h-14 rounded-full bg-gray-800/80 backdrop-blur-md border border-red-500/30 text-red-400 shadow-[0_0_15px_rgba(239,68,68,0.3)] hover:scale-110 hover:bg-red-900/50 hover:border-red-400 transition-all duration-300 flex items-center justify-center" title="登出">
<span class="text-xl filter drop-shadow-[0_0_5px_rgba(248,113,113,0.8)]">🚪</span>
</button>
</div>
<!-- Heatmap Content -->
<div id="dashboard-content" class="hidden overflow-x-auto pb-10">
<table class="w-full border-collapse">
<thead>
<tr id="heatmap-header">
<th class="p-3 text-left sticky left-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[150px]">學員 / 關卡</th>
<!-- Challenges headers generated dynamically -->
</tr>
</thead>
<tbody id="heatmap-body">
<!-- Rows generated dynamically -->
<tr><td colspan="100" class="text-center py-10 text-gray-500">等待資料載入...</td></tr>
</tbody>
</table>
</div>
</div>
`;
}
export function setupInstructorEvents() {
// Utility for cleaning prompt indentation
// Utility for cleaning prompt indentation
// Utility for cleaning text for display
function cleanText(str, isCode = false) {
if (!str) return '';
// 1. Convert HTML entities if present (common in innerHTML injection flows)
str = str.replace(/ /g, ' ');
str = str.replace(/<br\s*\/?>/gi, '\n');
// 2. Normalize line endings
str = str.replace(/\r\n/g, '\n');
if (isCode) {
// Smart Dedent for Code (Preserve relative indent)
while (str.startsWith('\n')) str = str.slice(1);
str = str.trimEnd();
const lines = str.split('\n');
if (lines.length === 0) return '';
let minIndent = null;
for (const line of lines) {
// Determine indent level
const content = line.replace(/^[\s\u3000\u00A0]+/, '');
if (content.length === 0) continue; // Skip empty/whitespace-only lines
const currentIndent = line.length - content.length;
if (minIndent === null || currentIndent < minIndent) {
minIndent = currentIndent;
}
}
if (minIndent === null) return str;
return lines.map(line => {
if (line.trim().length === 0) return '';
return line.slice(minIndent);
}).join('\n');
} else {
// Aggressive Flatten for Text Prompts (Force Left Align)
return str.split('\n')
.map(line => line.replace(/^[\s\u3000\u00A0]+/g, '')) // Regex remove ALL leading whitespace (Space, Tab, FullWidth, NBSP)
.filter((line, index, arr) => {
// Remove leading/trailing empty lines
if (line.trim() === '' && (index === 0 || index === arr.length - 1)) return false;
return true;
})
.join('\n')
.trim();
}
}
let roomUnsubscribe = null;
let currentInstructor = null;
// UI References
const authModal = document.getElementById('auth-modal');
// New Auth Elements
const loginEmailInput = document.getElementById('login-email');
const loginPasswordInput = document.getElementById('login-password');
const loginBtn = document.getElementById('login-btn');
const registerBtn = document.getElementById('register-btn');
const authErrorMsg = document.getElementById('auth-error');
// Remove old authBtn reference if present
// const authBtn = document.getElementById('auth-btn');
const navAdminBtn = document.getElementById('nav-admin-btn');
const navInstBtn = document.getElementById('nav-instructors-btn');
const createBtn = document.getElementById('create-room-btn');
// Other UI
const roomInfo = document.getElementById('room-info');
const createContainer = document.getElementById('create-room-container');
const dashboardContent = document.getElementById('dashboard-content');
const displayRoomCode = document.getElementById('display-room-code');
const groupPhotoBtn = document.getElementById('group-photo-btn');
const snapshotBtn = document.getElementById('snapshot-btn');
let isSnapshotting = false;
// Permission Check Helper
const checkPermissions = (instructor) => {
if (!instructor) return;
currentInstructor = instructor;
// 1. Create Room Permission
if (instructor.permissions?.includes('create_room')) {
createBtn.classList.remove('hidden', 'opacity-50', 'cursor-not-allowed');
createBtn.disabled = false;
} else {
createBtn.classList.add('opacity-50', 'cursor-not-allowed');
createBtn.disabled = true;
createBtn.title = "無此權限";
}
// 2. Add Question Permission (Admin Button)
if (instructor.permissions?.includes('add_question')) {
navAdminBtn.classList.remove('hidden');
} else {
navAdminBtn.classList.add('hidden');
}
// 3. Manage Instructors Permission
if (instructor.permissions?.includes('manage_instructors')) {
navInstBtn.classList.remove('hidden');
} else {
navInstBtn.classList.add('hidden');
}
};
// Email/Password Auth Logic
if (loginBtn && registerBtn) {
// Login Handler
loginBtn.addEventListener('click', async () => {
const email = loginEmailInput.value;
const password = loginPasswordInput.value;
if (!email || !password) {
authErrorMsg.textContent = "請輸入 Email 和密碼";
authErrorMsg.classList.remove('hidden');
return;
}
try {
loginBtn.disabled = true;
loginBtn.classList.add('opacity-50');
authErrorMsg.classList.add('hidden');
const user = await loginWithEmail(email, password);
const instructorData = await checkInstructorPermission(user);
if (instructorData) {
authModal.classList.add('hidden');
checkPermissions(instructorData);
localStorage.setItem('vibecoding_instructor_name', instructorData.name);
} else {
authErrorMsg.textContent = "未授權的帳號 (Unauthorized Account)";
authErrorMsg.classList.remove('hidden');
await signOutUser();
}
} catch (error) {
console.error(error);
let msg = error.code || error.message;
if (error.code === 'auth/invalid-credential' || error.code === 'auth/wrong-password' || error.code === 'auth/user-not-found') {
msg = "帳號或密碼錯誤。";
}
authErrorMsg.textContent = "登入失敗: " + msg;
authErrorMsg.classList.remove('hidden');
} finally {
loginBtn.disabled = false;
loginBtn.classList.remove('opacity-50');
}
});
// Forgot Password Handler
const forgotBtn = document.createElement('button');
forgotBtn.textContent = "忘記密碼？";
forgotBtn.className = "text-sm text-gray-400 hover:text-white mt-2 underline block mx-auto"; // Centered link
// Insert after auth-error message or append to modal content?
// Appending to the parent of Login Button seems best, or just below it.
// The modal structure in index.html is needed to know exact placement.
// Assuming loginBtn is inside a flex column form.
loginBtn.parentNode.insertBefore(forgotBtn, loginBtn.nextSibling);
forgotBtn.addEventListener('click', async () => {
const email = loginEmailInput.value;
if (!email) {
authErrorMsg.textContent = "請先在上欄輸入 Email 以發送重設信";
authErrorMsg.classList.remove('hidden');
return;
}
if (!confirm(`確定要發送重設密碼信件至 ${email} 嗎？`)) return;
try {
// Dynamically import to avoid top-level dependency if not needed
const { resetPassword } = await import("../services/auth.js");
await resetPassword(email);
alert(`已發送重設密碼信件至 ${email}，請查收信箱並依照指示重設密碼。`);
authErrorMsg.classList.add('hidden');
} catch (e) {
console.error(e);
let msg = e.message;
if (e.code === 'auth/user-not-found') msg = "找不到此帳號，請確認 Email 是否正確。";
authErrorMsg.textContent = "發送失敗: " + msg;
authErrorMsg.classList.remove('hidden');
}
});
// Register Handler
registerBtn.addEventListener('click', async () => {
const email = loginEmailInput.value;
const password = loginPasswordInput.value;
if (!email || !password) {
authErrorMsg.textContent = "請輸入 Email 和密碼";
authErrorMsg.classList.remove('hidden');
return;
}
try {
registerBtn.disabled = true;
registerBtn.classList.add('opacity-50');
authErrorMsg.classList.add('hidden');
// Try to create auth account
const user = await registerWithEmail(email, password);
// Check if this email is in our whitelist
const instructorData = await checkInstructorPermission(user);
if (instructorData) {
authModal.classList.add('hidden');
checkPermissions(instructorData);
localStorage.setItem('vibecoding_instructor_name', instructorData.name);
alert("註冊成功！");
} else {
// Auth created but not in whitelist
authErrorMsg.textContent = "註冊成功，但您的 Email 未被列入講師名單。請聯繫管理員。";
authErrorMsg.classList.remove('hidden');
await signOutUser();
}
} catch (error) {
console.error(error);
let msg = error.code || error.message;
if (error.code === 'auth/email-already-in-use') {
msg = "此 Email 已被註冊，請直接登入。";
}
authErrorMsg.textContent = "註冊失敗: " + msg;
authErrorMsg.classList.remove('hidden');
} finally {
registerBtn.disabled = false;
registerBtn.classList.remove('opacity-50');
}
});
}
// Create Room
// Create Room
createBtn.addEventListener('click', async () => {
// 4-Digit Room Code
const roomCode = Math.floor(1000 + Math.random() * 9000).toString();
try {
// Ensure roomInfo is visible
const roomInfo = document.getElementById('room-info');
const displayRoomCode = document.getElementById('display-room-code');
const createContainer = document.getElementById('create-room-container');
const dashboardContent = document.getElementById('dashboard-content');
await createRoom(roomCode, currentInstructor ? currentInstructor.name : 'Unknown');
// Trigger cleanup of old rooms
cleanupOldRooms();
displayRoomCode.textContent = roomCode;
// Store in LocalStorage
localStorage.setItem('vibecoding_room_code', roomCode);
localStorage.setItem('vibecoding_is_host', 'true');
// Unified Entry Logic (Ensures Group Photo button is shown)
console.log("Room created, calling enterRoom...");
enterRoom(roomCode);
} catch (e) {
console.error(e);
alert("無法建立教室: " + e.message);
}
});
// Rejoin Room
const rejoinBtn = document.getElementById('rejoin-room-btn');
if (rejoinBtn) {
rejoinBtn.addEventListener('click', async () => {
const inputCode = document.getElementById('rejoin-room-code').value.trim().toUpperCase();
if (!inputCode) return alert("請輸入代碼");
try {
// Ensure roomInfo is visible
const roomInfo = document.getElementById('room-info');
const displayRoomCode = document.getElementById('display-room-code');
const createContainer = document.getElementById('create-room-container');
const dashboardContent = document.getElementById('dashboard-content');
// Check if room exists first (optional, subscribe handles it usually)
displayRoomCode.textContent = inputCode;
localStorage.setItem('vibecoding_room_code', inputCode);
// Unified Entry Logic
console.log("Rejoining room, calling enterRoom...");
enterRoom(inputCode);
} catch (e) {
alert("重回失敗: " + e.message);
}
});
}
// Leave Room
const leaveBtn = document.getElementById('leave-room-btn');
if (leaveBtn) {
leaveBtn.addEventListener('click', () => {
const roomInfo = document.getElementById('room-info');
const createContainer = document.getElementById('create-room-container');
const dashboardContent = document.getElementById('dashboard-content');
const displayRoomCode = document.getElementById('display-room-code');
localStorage.removeItem('vibecoding_room_code');
localStorage.removeItem('vibecoding_is_host');
displayRoomCode.textContent = '';
roomInfo.classList.add('hidden');
dashboardContent.classList.add('hidden');
createContainer.classList.remove('hidden');
// Unsubscribe logic if needed, usually auto-handled by new subscription or page reload
window.location.reload();
});
}
// Nav to Admin
if (navAdminBtn) {
navAdminBtn.addEventListener('click', () => {
localStorage.setItem('vibecoding_admin_referer', 'instructor');
window.location.hash = '#admin';
});
}
// Handle Instructor Management
navInstBtn.addEventListener('click', async () => {
const modal = document.getElementById('instructor-modal');
const listBody = document.getElementById('instructor-list-body');
// Load list
const instructors = await getInstructors();
listBody.innerHTML = instructors.map(inst => `
<tr class="border-b border-gray-700 hover:bg-gray-800">
<td class="p-3">${inst.name}</td>
<td class="p-3 font-mono text-sm text-cyan-400">${inst.email}</td>
<td class="p-3 text-xs">
${inst.permissions?.map(p => {
const map = { create_room: '開房', add_question: '題目', manage_instructors: '管理' };
return `<span class="bg-gray-700 px-2 py-1 rounded mr-1">${map[p] || p}</span>`;
}).join('')}
</td>
<td class="p-3">
${inst.role === 'admin' ? '<span class="text-gray-500 italic">不可移除</span>' :
`<button class="text-red-400 hover:text-red-300" onclick="window.removeInst('${inst.email}')">移除</button>`}
</td>
</tr>
`).join('');
modal.classList.remove('hidden');
});
// Add New Instructor
const addInstBtn = document.getElementById('btn-add-inst');
if (addInstBtn) {
addInstBtn.addEventListener('click', async () => {
const email = document.getElementById('new-inst-email').value.trim();
const name = document.getElementById('new-inst-name').value.trim();
if (!email || !name) return alert("請輸入完整資料");
const perms = [];
if (document.getElementById('perm-room').checked) perms.push('create_room');
if (document.getElementById('perm-q').checked) perms.push('add_question');
if (document.getElementById('perm-inst').checked) perms.push('manage_instructors');
try {
await addInstructor(email, name, perms);
alert("新增成功");
navInstBtn.click(); // Reload list
document.getElementById('new-inst-email').value = '';
document.getElementById('new-inst-name').value = '';
} catch (e) {
alert("新增失敗: " + e.message);
}
});
// Global helper for remove (hacky but works for simple onclick)
window.removeInst = async (email) => {
if (confirm(`確定移除 ${email}?`)) {
try {
await removeInstructor(email);
navInstBtn.click(); // Reload
} catch (e) {
alert(e.message);
}
}
};
// Auto Check Auth (Persistence)
// We rely on Firebase Auth state observer instead of session storage for security?
// Or we can just check if user is already signed in.
import("../services/firebase.js").then(async ({ auth }) => {
// Handle Redirect Result first
try {
console.log("Initializing Auth Check...");
const { handleRedirectResult } = await import("../services/auth.js");
const redirectUser = await handleRedirectResult();
if (redirectUser) console.log("Redirect User Found:", redirectUser.email);
} catch (e) { console.warn("Redirect check failed", e); }
auth.onAuthStateChanged(async (user) => {
console.log("Auth State Changed to:", user ? user.email : "Logged Out");
if (user) {
try {
console.log("Checking permissions for:", user.email);
const instructorData = await checkInstructorPermission(user);
console.log("Permission Result:", instructorData);
if (instructorData) {
console.log("Hiding Modal and Setting Permissions...");
authModal.classList.add('hidden');
checkPermissions(instructorData);
// Auto-Restore Room View if exists
const savedRoomCode = localStorage.getItem('vibecoding_room_code');
if (savedRoomCode) {
console.log("Restoring Room Session:", savedRoomCode);
// Restore Room Session using the unified function
// This ensures all UI elements (including Group Photo button) are shown correctly
console.log("Calling enterRoom to restore session...");
enterRoom(savedRoomCode);
}
} else {
console.warn("User logged in but not an instructor.");
// Show unauthorized message
authErrorMsg.textContent = "此帳號無講師權限";
authErrorMsg.classList.remove('hidden');
authModal.classList.remove('hidden'); // Ensure modal stays up
}
} catch (e) {
console.error("Permission Check Failed:", e);
authErrorMsg.textContent = "權限檢查失敗: " + e.message;
authErrorMsg.classList.remove('hidden');
}
} else {
authModal.classList.remove('hidden');
}
});
});
// Define Kick Function globally (robust against auth flow)
window.confirmKick = async (userId, nickname) => {
if (confirm(`確定要踢出 ${nickname} 嗎？此動作無法復原。`)) {
try {
const { removeUser } = await import("../services/classroom.js");
await removeUser(userId);
// UI will update automatically via subscribeToRoom
} catch (e) {
console.error("Kick failed:", e);
alert("移除失敗");
}
}
};
// Snapshot Logic
// Snapshot Logic
if (snapshotBtn) {
snapshotBtn.addEventListener('click', async () => {
if (isSnapshotting || typeof htmlToImage === 'undefined') {
if (typeof htmlToImage === 'undefined') alert("截圖元件尚未載入，請稍候再試");
return;
}
isSnapshotting = true;
const overlay = document.getElementById('snapshot-overlay');
const countEl = document.getElementById('countdown-number');
const container = document.getElementById('group-photo-container');
const modal = document.getElementById('group-photo-modal');
// Close button hide
const closeBtn = modal.querySelector('button');
if (closeBtn) closeBtn.style.opacity = '0';
snapshotBtn.style.opacity = '0';
overlay.classList.remove('hidden');
overlay.classList.add('flex');
// Countdown Sequence
const runCountdown = (num) => new Promise(resolve => {
countEl.textContent = num;
countEl.style.transform = 'scale(1.5)';
countEl.style.opacity = '1';
// Animation reset
requestAnimationFrame(() => {
countEl.style.transition = 'all 0.5s ease-out';
countEl.style.transform = 'scale(1)';
countEl.style.opacity = '0.5';
setTimeout(resolve, 1000);
});
});
await runCountdown(3);
await runCountdown(2);
await runCountdown(1);
// Action!
countEl.textContent = '';
overlay.classList.add('hidden');
// 1. Emojis Explosion
const emojis = ['🤘', '✌️', '👍', '🫶', '😎', '🔥'];
const cards = container.querySelectorAll('.group\\/card');
cards.forEach(card => {
// Find the monster image container
const imgContainer = card.querySelector('.monster-img-container');
if (!imgContainer) return;
// Random Emoji
const emoji = emojis[Math.floor(Math.random() * emojis.length)];
const emojiEl = document.createElement('div');
emojiEl.textContent = emoji;
// Position: Top-Right of the *Image*, slightly overlapping
emojiEl.className = 'absolute -top-2 -right-2 text-2xl animate-bounce z-50 drop-shadow-md transform rotate-12';
emojiEl.style.animationDuration = '0.6s';
imgContainer.appendChild(emojiEl);
// Remove after 3s
setTimeout(() => emojiEl.remove(), 3000);
});
// 2. Capture using html-to-image
setTimeout(async () => {
try {
// Flash Effect
const flash = document.createElement('div');
flash.className = 'fixed inset-0 bg-white z-[100] transition-opacity duration-300 pointer-events-none';
document.body.appendChild(flash);
setTimeout(() => flash.style.opacity = '0', 50);
setTimeout(() => flash.remove(), 300);
// Use htmlToImage.toPng
const dataUrl = await htmlToImage.toPng(container, {
backgroundColor: '#111827',
pixelRatio: 2,
cacheBust: true,
});
// Download
const link = document.createElement('a');
const dateStr = new Date().toISOString().slice(0, 10);
link.download = `VIBE_Class_Photo_${dateStr}.png`;
link.href = dataUrl;
link.click();
} catch (e) {
console.error("Snapshot failed:", e);
alert("截圖失敗 (請嘗試手動截圖/PrtSc)\n原因: " + e.message);
} finally {
// Restore UI
if (closeBtn) closeBtn.style.opacity = '1';
snapshotBtn.style.opacity = '1';
isSnapshotting = false;
}
}, 600); // Slight delay for emojis to appear
});
}
// Group Photo Logic
if (groupPhotoBtn) {
groupPhotoBtn.addEventListener('click', () => {
const modal = document.getElementById('group-photo-modal');
const container = document.getElementById('group-photo-container');
const dateEl = document.getElementById('photo-date');
// Update Date
const now = new Date();
dateEl.textContent = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')} `;
// Get saved name
const savedName = localStorage.getItem('vibecoding_instructor_name') || '講師 (Instructor)';
container.innerHTML = '';
// 1. Container for Relative Positioning with Custom Background
const relativeContainer = document.createElement('div');
relativeContainer.className = 'relative w-full h-[600px] md:h-[700px] overflow-hidden rounded-3xl border border-gray-700/30 shadow-2xl flex items-center justify-center bg-cover bg-center';
relativeContainer.style.backgroundImage = "url('assets/photobg.png')";
container.appendChild(relativeContainer);
// Watermark (Bottom Right, High Z-Index, Gradient Text, Dark Backdrop)
const watermark = document.createElement('div');
watermark.className = 'absolute bottom-2 right-2 md:bottom-4 md:right-4 z-[60] bg-black/70 backdrop-blur-sm rounded-lg px-4 py-2 pointer-events-none select-none border border-white/10 shadow-lg';
const d = new Date();
const dateStr = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')} `;
watermark.innerHTML = `
<span class="text-lg md:text-2xl font-black font-mono bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-purple-400 tracking-wider">
${dateStr} VibeCoding 怪獸成長營
</span>
`;
relativeContainer.appendChild(watermark);
// 2. Instructor Section (Absolute Center)
const instructorSection = document.createElement('div');
instructorSection.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center z-20 group cursor-pointer';
instructorSection.innerHTML = `
<div class="relative">
<div class="absolute inset-0 bg-yellow-500/20 blur-3xl rounded-full animate-pulse"></div>
<!--Pixel Art Avatar-->
<img src="assets/instructor_avatar.png" class="relative w-48 h-48 md:w-64 md:h-64 object-contain pixel-art drop-shadow-[0_10px_30px_rgba(0,0,0,0.6)] z-10 hover:scale-105 transition-transform duration-300" alt="Instructor">
<!-- Editable Name Tag -->
<div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-black/80 backdrop-blur text-yellow-400 px-6 py-2 rounded-full border border-yellow-500/30 shadow-2xl flex items-center justify-center space-x-2 z-30 whitespace-nowrap group-hover:bg-black transition-colors min-w-[150px] max-w-[300px]">
<span class="text-xl">👑</span>
<input type="text" id="instructor-name-input"
value="${savedName}"
class="bg-transparent border-b border-transparent hover:border-yellow-500/50 focus:border-yellow-500 text-lg font-bold text-yellow-400 text-center focus:outline-none transition-all placeholder-yellow-700"
style="width: ${Math.max(savedName.length * 20, 100)}px;"
onclick="this.select()"
oninput="this.style.width = Math.max(this.value.length * 20, 100) + 'px'"
>
</div>
</div>
`;
relativeContainer.appendChild(instructorSection);
// Save name on change
setTimeout(() => {
const input = document.getElementById('instructor-name-input');
if (input) {
input.addEventListener('input', (e) => {
localStorage.setItem('vibecoding_instructor_name', e.target.value);
});
}
}, 100);
// 3. Students Scatter
if (currentStudents.length > 0) {
// Randomize array to prevent fixed order bias
const students = [...currentStudents].sort(() => Math.random() - 0.5);
const total = students.length;
// --- Dynamic Sizing Logic ---
let sizeClass = 'w-20 h-20 md:w-24 md:h-24'; // Default (Size 100%)
let scaleFactor = 1.0;
if (total >= 40) {
sizeClass = 'w-12 h-12 md:w-14 md:h-14'; // Size 60%
scaleFactor = 0.6;
} else if (total >= 20) {
sizeClass = 'w-16 h-16 md:w-20 md:h-20'; // Size 80%
scaleFactor = 0.8;
}
students.forEach((s, index) => {
const progressMap = s.progress || {};
const totalLikes = Object.values(progressMap).reduce((acc, p) => acc + (p.likes || 0), 0);
const totalCompleted = Object.values(progressMap).filter(p => p.status === 'completed').length;
// FIXED: Prioritize stored ID if valid (same as StudentView logic)
let monster;
if (s.monster_id && s.monster_id !== 'Egg' && s.monster_id !== 'Unknown') {
const stored = MONSTER_DEFS?.find(m => m.id === s.monster_id);
if (stored) {
monster = stored;
} else {
// Fallback if ID invalid
monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
}
} else {
monster = getNextMonster(s.monster_stage || 0, totalLikes, total, s.monster_id);
}
// --- FIXED: Even Arc Distribution (Safe Zone: 135 deg to 405 deg) ---
// Avoids Bottom Right (0-90) and Bottom Center (90-120) entirely
const minR = 220;
// Avoids Bottom Right (0-90) and Bottom Center (90-120) entirely
// Safe Arc Range: Starts at 135 deg (Bottom Left) -> Goes CW -> Ends at 405 deg (45 deg, Bottom Right)
// Total Span = 270 degrees
// If many students, use double ring
const safeStartAngle = 135 * (Math.PI / 180);
const safeSpan = 270 * (Math.PI / 180);
// Distribute evenly
// If only 1 student, put at top (270 deg / 4.71 rad)
let finalAngle;
if (total === 1) {
finalAngle = 270 * (Math.PI / 180);
} else {
const step = safeSpan / (total - 1);
finalAngle = safeStartAngle + (step * index);
}
// Radius: Fixed base + slight variation for "natural" look (but not overlap causing)
// Double ring logic if crowded
let radius = minR + (index % 2) * 40; // Zigzag radius (220, 260, 220...) to minimize overlap
// Reduce zigzag if few students
if (total < 10) radius = minR + (index % 2) * 20;
const xOff = Math.cos(finalAngle) * radius;
const yOff = Math.sin(finalAngle) * radius * 0.8;
const card = document.createElement('div');
card.className = 'absolute flex flex-col items-center group/card z-10 hover:z-50 transition-all duration-500 cursor-move';
card.style.left = `calc(50% + ${xOff}px)`;
card.style.top = `calc(50% + ${yOff}px)`;
card.style.transform = 'translate(-50%, -50%)';
const floatDelay = Math.random() * 2;
card.innerHTML = `
<!--Top Info: Monster Stats-->
<div class="mb-1 text-center bg-gray-900/60 backdrop-blur-sm rounded-lg px-2 py-1 border border-gray-600/30 group-hover/card:bg-gray-800 group-hover/card:border-cyan-500/50 transition-all opacity-80 group-hover/card:opacity-100 transform translate-y-2 group-hover/card:translate-y-0 duration-300">
<div class="text-[10px] text-gray-300 mb-0.5 whitespace-nowrap">${monster.name.split(' ')[1] || monster.name}</div>
<div class="flex items-center justify-center space-x-2">
<span class="text-[10px] bg-blue-900/50 text-blue-300 px-1.5 rounded border border-blue-500/30">Lv.${totalCompleted + 1}</span>
<div class="flex items-center text-[10px] text-pink-400 font-bold">
<span>♥</span>
<span class="ml-0.5">${totalLikes}</span>
</div>
</div>
</div>
<!--Monster Image-->
<div class="monster-img-container relative ${sizeClass} flex items-center justify-center transform group-hover/card:scale-125 transition-transform duration-300" style="animation: float 3s ease-in-out infinite; animation-delay: -${floatDelay}s;">
<div class="w-full h-full pixel-art drop-shadow-md filter group-hover/card:brightness-110 transition-all">
${generateMonsterSVG(monster)}
</div>
</div>
<!--Bottom Info: User Nickname-->
<div class="mt-1 text-center bg-black/60 backdrop-blur-sm rounded-full px-3 py-0.5 border border-gray-600/50 group-hover/card:bg-cyan-900/80 group-hover/card:border-cyan-400 transition-all">
<div class="text-xs font-bold text-white shadow-black drop-shadow-md whitespace-nowrap tracking-wide">${s.nickname}</div>
</div>
`;
relativeContainer.appendChild(card);
// Enable Drag & Drop
setupDraggable(card, relativeContainer);
});
}
modal.classList.remove('hidden');
});
}
// Helper: Drag & Drop Logic
function setupDraggable(el, container) {
let isDragging = false;
let startX, startY, initialLeft, initialTop;
el.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
// Disable transition during drag for responsiveness
el.style.transition = 'none';
el.style.zIndex = 100; // Bring to front
// Convert current computed position to fixed pixels if relying on calc
const rect = el.getBoundingClientRect();
const containerRect = container.getBoundingClientRect();
// Calculate position relative to container
// The current transform is translate(-50%, -50%).
// We want to set left/top such that the center remains under the mouse offset,
// but for simplicity, let's just use current offsetLeft/Top if possible,
// OR robustly recalculate from rects.
// Current center point relative to container:
const centerX = rect.left - containerRect.left + rect.width / 2;
const centerY = rect.top - containerRect.top + rect.height / 2;
// Set explicit pixel values replacing calc()
el.style.left = `${centerX}px`;
el.style.top = `${centerY}px`;
initialLeft = centerX;
initialTop = centerY;
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
e.preventDefault();
const dx = e.clientX - startX;
const dy = e.clientY - startY;
el.style.left = `${initialLeft + dx}px`;
el.style.top = `${initialTop + dy}px`;
});
window.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
el.style.transition = ''; // Re-enable hover effects
el.style.zIndex = ''; // Restore z-index rule (or let hover take over)
}
});
}
// Add float animation style if not exists
if (!document.getElementById('anim-float')) {
const style = document.createElement('style');
style.id = 'anim-float';
style.innerHTML = `
@keyframes float {
0 %, 100 % { transform: translateY(0) scale(1); }
50% {transform: translateY(-5px) scale(1.02); }
}
}
`;
document.head.appendChild(style);
}
// Gallery Logic
document.getElementById('btn-open-gallery').addEventListener('click', () => {
window.open('monster_preview.html', '_blank');
});
// Logout Logic
document.getElementById('logout-btn').addEventListener('click', async () => {
if (confirm('確定要登出講師模式嗎？ (將會回到首頁)')) {
await signOutUser();
sessionStorage.removeItem('vibecoding_instructor_in_room');
sessionStorage.removeItem('vibecoding_admin_referer');
window.location.hash = '';
window.location.reload();
}
});
// Check Previous Session (Handled by onAuthStateChanged now)
// if (sessionStorage.getItem('vibecoding_instructor_auth') === 'true') {
// authModal.classList.add('hidden');
// }
// Check Active Room State
// Module-level variable to track subscription (Moved to top)
window.enterRoom = function (roomCode) {
createContainer.classList.add('hidden');
roomInfo.classList.remove('hidden');
dashboardContent.classList.remove('hidden');
document.getElementById('group-photo-btn').classList.remove('hidden'); // Show photo button
displayRoomCode.textContent = roomCode;
localStorage.setItem('vibecoding_room_code', roomCode);
sessionStorage.setItem('vibecoding_instructor_in_room', 'true');
// Unsubscribe previous if any
if (roomUnsubscribe) roomUnsubscribe();
// Subscribe to updates
roomUnsubscribe = subscribeToRoom(roomCode, (students) => {
currentStudents = students;
renderTransposedHeatmap(students);
});
}
// Leave Room Logic
document.getElementById('leave-room-btn').addEventListener('click', () => {
if (confirm('確定要離開目前教室嗎？(不會刪除教室資料，僅回到選擇介面)')) {
// Unsubscribe
if (roomUnsubscribe) {
roomUnsubscribe();
roomUnsubscribe = null;
}
// UI Reset
createContainer.classList.remove('hidden');
roomInfo.classList.add('hidden');
dashboardContent.classList.add('hidden');
document.getElementById('group-photo-btn').classList.add('hidden'); // Hide photo button
// Clear Data Display
document.getElementById('heatmap-body').innerHTML = '<tr><td colspan="100" class="text-center py-10 text-gray-500">等待資料載入...</td></tr>';
document.getElementById('heatmap-header').innerHTML = '<th class="p-3 text-left sticky left-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[150px]">學員 / 關卡</th>';
// State Clear
sessionStorage.removeItem('vibecoding_instructor_in_room');
localStorage.removeItem('vibecoding_room_code');
}
});
// Modal Events
window.showBroadcastModal = (userId, challengeId) => {
const modal = document.getElementById('broadcast-modal');
const content = document.getElementById('broadcast-content');
// Find Data
const student = currentStudents.find(s => s.id === userId);
if (!student) return alert('找不到學員資料');
const p = student.progress ? student.progress[challengeId] : null;
if (!p) return alert('找不到該作品資料');
const challenge = cachedChallenges.find(c => c.id === challengeId);
const title = challenge ? challenge.title : '未知題目';
// Populate UI
document.getElementById('broadcast-avatar').textContent = student.nickname[0] || '?';
document.getElementById('broadcast-author').textContent = student.nickname;
document.getElementById('broadcast-challenge').textContent = title;
document.getElementById('broadcast-prompt').textContent = p.prompt || '(無內容)';
// Store IDs for Actions (Reject/BroadcastAll)
modal.dataset.userId = userId;
modal.dataset.challengeId = challengeId;
// Show
modal.classList.remove('hidden');
setTimeout(() => {
content.classList.remove('scale-95', 'opacity-0');
content.classList.add('opacity-100', 'scale-100');
}, 10);
};
window.closeBroadcast = () => {
const modal = document.getElementById('broadcast-modal');
const content = document.getElementById('broadcast-content');
content.classList.remove('opacity-100', 'scale-100');
content.classList.add('scale-95', 'opacity-0');
setTimeout(() => modal.classList.add('hidden'), 300);
};
window.openStage = (prompt, author) => {
document.getElementById('broadcast-content').classList.add('hidden');
const stage = document.getElementById('stage-view');
stage.classList.remove('hidden');
document.getElementById('stage-prompt').textContent = cleanText(prompt || '');
document.getElementById('stage-author').textContent = author;
};
window.closeStage = () => {
document.getElementById('stage-view').classList.add('hidden');
document.getElementById('broadcast-content').classList.remove('hidden');
};
document.getElementById('btn-show-stage').addEventListener('click', () => {
const prompt = document.getElementById('broadcast-prompt').textContent;
const author = document.getElementById('broadcast-author').textContent;
window.openStage(prompt, author);
});
// Reject Logic
document.getElementById('btn-reject-task').addEventListener('click', async () => {
if (!confirm('確定要退回此題目讓學員重做嗎？')) return;
// We need student ID (userId) and Challenge ID.
// Currently showBroadcastModal only receives nickname, title, prompt.
// We need to attach data-userid and data-challengeid to the modal.
const modal = document.getElementById('broadcast-modal');
const userId = modal.dataset.userId;
const challengeId = modal.dataset.challengeId;
const roomCode = localStorage.getItem('vibecoding_room_code');
if (userId && challengeId && roomCode) {
try {
await resetProgress(userId, roomCode, challengeId);
alert('已成功退回，學員可重新作答');
// Close modal
window.closeBroadcast();
} catch (e) {
console.error('退回失敗:', e);
alert('退回失敗: ' + e.message);
}
}
});
// Prompt Viewer Logic
window.openPromptList = (type, id, title) => {
const modal = document.getElementById('prompt-list-modal');
const container = document.getElementById('prompt-list-container');
const titleEl = document.getElementById('prompt-list-title');
titleEl.textContent = type === 'student' ? `${title} 的所有提示詞` : `題目：${title} 的所有作品`;
// Reset Anonymous Toggle in List View
const anonCheck = document.getElementById('list-anonymous-toggle');
if (anonCheck) anonCheck.checked = false;
container.innerHTML = '';
modal.classList.remove('hidden');
// Collect Prompts
let prompts = [];
// Fix: Reset selection when opening new list to prevent cross-contamination
selectedPrompts = [];
updateCompareButton();
if (type === 'student') {
const student = currentStudents.find(s => s.id === id);
if (student && student.progress) {
prompts = Object.entries(student.progress)
.filter(([_, p]) => p.status === 'completed' && p.prompt)
.map(([challengeId, p]) => {
const challenge = cachedChallenges.find(c => c.id === challengeId);
return {
id: `${student.id}_${challengeId}`,
title: challenge ? challenge.title : '未知題目',
prompt: p.prompt,
author: student.nickname,
studentId: student.id,
challengeId: challengeId,
time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleString() : ''
};
});
}
} else if (type === 'challenge') {
currentStudents.forEach(student => {
if (student.progress && student.progress[id]) {
const p = student.progress[id];
if (p.status === 'completed' && p.prompt) {
prompts.push({
id: `${student.id}_${id}`,
title: student.nickname, // When viewing challenge, title is student name
prompt: p.prompt,
author: student.nickname,
studentId: student.id,
challengeId: id,
time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleString() : ''
});
}
}
});
}
if (prompts.length === 0) {
container.innerHTML = '<div class="col-span-full text-center text-gray-500 py-10">無資料</div>';
return;
}
prompts.forEach(p => {
const card = document.createElement('div');
// Reduced height (h-64 -> h-48) and padding, but larger text inside
card.className = 'bg-gray-800 rounded-xl p-3 border border-gray-700 hover:border-cyan-500 transition-colors flex flex-col h-48 group';
card.innerHTML = `
<div class="flex justify-between items-start mb-1.5">
<h3 class="font-bold text-white text-base truncate w-3/4" title="${p.title}">${p.title}</h3>
<!-- Checkbox -->
<input type="checkbox" class="w-6 h-6 rounded border-gray-600 text-purple-600 focus:ring-purple-500 bg-gray-700 prompt-select-checkbox cursor-pointer transform scale-110"
data-id="${p.id}"
onchange="handlePromptSelection(this)">
</div>
<!-- Prompt Content -->
<div class="bg-black/30 rounded p-2 flex-1 overflow-y-auto font-mono text-green-300 whitespace-pre-wrap custom-scrollbar text-base leading-snug group-hover:text-green-200 transaction-colors mb-2" style="text-align: left;">${cleanText(p.prompt)}</div>
<!-- Footer: Time + Actions -->
<div class="flex justify-between items-center text-[10px] text-gray-500 mt-auto">
<span>${p.time}</span>
<div class="flex space-x-2">
<button onclick="window.confirmReset('${p.studentId}', '${p.challengeId}', '${p.title}')" class="px-2 py-1 bg-red-900/30 hover:bg-red-800 text-red-400 rounded transition-colors text-xs border border-red-800/50" title="退回重做">
退回
</button>
</div>
</div>
`;
container.appendChild(card);
});
};
// Helper Actions
window.confirmReset = async (userId, challengeId, title) => {
console.log('🔵 confirmReset called');
console.log(' userId:', userId);
console.log(' challengeId:', challengeId);
console.log(' title:', title);
console.log(' typeof resetProgress:', typeof resetProgress);
if (confirm(`確定要退回 ${title} 嗎？此動作將清除學員目前的進度。`)) {
console.log('✅ User confirmed reset');
const roomCode = localStorage.getItem('vibecoding_room_code');
console.log(' roomCode:', roomCode);
if (userId && challengeId && roomCode) {
console.log('✅ All parameters valid, calling resetProgress...');
try {
// Use already imported resetProgress function
await resetProgress(userId, roomCode, challengeId);
console.log('✅ resetProgress completed successfully');
alert("已退回");
// close modal to refresh data context
document.getElementById('prompt-list-modal').classList.add('hidden');
console.log('✅ Modal closed');
} catch (e) {
console.error("❌ 退回失敗:", e);
console.error("Error stack:", e.stack);
alert("退回失敗: " + e.message);
}
} else {
console.error('❌ Missing required parameters:');
console.error(' userId:', userId, '(valid:', !!userId, ')');
console.error(' challengeId:', challengeId, '(valid:', !!challengeId, ')');
console.error(' roomCode:', roomCode, '(valid:', !!roomCode, ')');
alert('缺少必要參數，無法執行退回操作');
}
} else {
console.log('❌ User cancelled reset');
}
};
window.broadcastPrompt = (userId, challengeId) => {
window.showBroadcastModal(userId, challengeId);
};
// Selection Logic
let selectedPrompts = []; // Stores IDs
window.handlePromptSelection = (checkbox) => {
const id = checkbox.dataset.id;
if (checkbox.checked) {
if (selectedPrompts.length >= 3) {
checkbox.checked = false;
alert('最多只能選擇 3 個提示詞進行比較');
return;
}
selectedPrompts.push(id);
} else {
selectedPrompts = selectedPrompts.filter(pid => pid !== id);
}
updateCompareButton();
};
function updateCompareButton() {
const btn = document.getElementById('btn-compare-prompts');
if (!btn) return;
const count = selectedPrompts.length;
const span = btn.querySelector('span');
if (span) span.textContent = `🔍 比較已選項目 (${count}/3)`;
if (count > 0) {
btn.disabled = false;
btn.classList.remove('opacity-50', 'cursor-not-allowed');
} else {
btn.disabled = true;
btn.classList.add('opacity-50', 'cursor-not-allowed');
}
}
// Comparison Logic
const compareBtn = document.getElementById('btn-compare-prompts');
if (compareBtn) {
compareBtn.addEventListener('click', () => {
const dataToCompare = [];
selectedPrompts.forEach(fullId => {
const lastUnderscore = fullId.lastIndexOf('_');
const studentId = fullId.substring(0, lastUnderscore);
const challengeId = fullId.substring(lastUnderscore + 1);
const student = currentStudents.find(s => s.id === studentId);
if (student && student.progress && student.progress[challengeId]) {
const p = student.progress[challengeId];
const challenge = cachedChallenges.find(c => c.id === challengeId);
dataToCompare.push({
title: challenge ? challenge.title : '未知',
author: student.nickname,
prompt: p.prompt,
time: p.completedAt ? new Date(p.completedAt.seconds * 1000).toLocaleTimeString() : ''
});
}
});
const isAnon = document.getElementById('list-anonymous-toggle')?.checked || false;
openComparisonView(dataToCompare, isAnon);
});
}
let isAnonymous = false;
window.toggleAnonymous = (btn) => {
isAnonymous = !isAnonymous;
btn.textContent = isAnonymous ? '🙈 顯示姓名' : '👀 隱藏姓名';
btn.classList.toggle('bg-gray-700');
btn.classList.toggle('bg-purple-700');
// Update DOM
document.querySelectorAll('.comparison-author').forEach(el => {
if (isAnonymous) {
el.dataset.original = el.textContent;
el.textContent = '學員';
el.classList.add('blur-sm'); // Optional Effect
setTimeout(() => el.classList.remove('blur-sm'), 300);
} else {
if (el.dataset.original) el.textContent = el.dataset.original;
}
});
};
window.openComparisonView = (items, initialAnonymous = false) => {
const modal = document.getElementById('comparison-modal');
const grid = document.getElementById('comparison-grid');
// Apply Anonymous State
isAnonymous = initialAnonymous;
const anonBtn = document.getElementById('btn-anonymous-toggle');
// Update Toggle UI to match state
if (anonBtn) {
if (isAnonymous) {
anonBtn.textContent = '🙈 顯示姓名';
anonBtn.classList.add('bg-purple-700');
anonBtn.classList.remove('bg-gray-700');
} else {
anonBtn.textContent = '👀 隱藏姓名';
anonBtn.classList.remove('bg-purple-700');
anonBtn.classList.add('bg-gray-700');
}
}
// Setup Grid Rows (Vertical Stacking)
let rowClass = 'grid-rows-1';
if (items.length === 2) rowClass = 'grid-rows-2';
if (items.length === 3) rowClass = 'grid-rows-3';
grid.className = `absolute inset-0 grid ${rowClass} gap-0 divide-y divide-gray-600`;
grid.innerHTML = '';
items.forEach(item => {
const col = document.createElement('div');
// Check overflow-hidden to keep it contained, use flex-row for compact header + content
col.className = 'flex flex-row h-full bg-gray-900 p-4 overflow-hidden';
// Logic for anonymous
let displayAuthor = item.author;
let blurClass = '';
if (isAnonymous) {
displayAuthor = '學員';
blurClass = 'blur-sm'; // Initial blur
// Auto remove blur after delay if needed, or keep it?
// Toggle logic removes it after delay. But initial render should probably just be static '學員' or blurred.
// The toggle logic uses dataset.original. We need to set it here too.
}
col.innerHTML = `
<div class="w-48 flex-shrink-0 border-r border-gray-700 pr-4 mr-4 flex flex-col justify-center">
<h3 class="text-xl font-bold text-cyan-400 mb-1 comparison-author ${blurClass}" data-original="${item.author}">${displayAuthor}</h3>
<p class="text-md text-gray-400 truncate" title="${item.title}">${item.title}</p>
</div>
<!-- Prompt Content: Larger Text (text-4xl) -->
<!-- Prompt Content: Larger Text (text-4xl) -->
<div class="flex-1 overflow-y-auto font-mono text-green-300 text-3xl leading-relaxed whitespace-pre-wrap p-2 hover:bg-white/5 transition-colors rounded custom-scrollbar text-left" style="text-align: left !important;">${cleanText(item.prompt)}</div>
`;
grid.appendChild(col);
// If blurred, remove blur after animation purely for effect, or keep?
// User intention "Hidden Name" usually means "Replaced by generic name".
// The blur effect in toggle logic was transient.
// If we want persistent anonymity, just "學員" is enough.
// The existing toggle logic adds 'blur-sm' then removes it in 300ms.
// We should replicate that effect if we want consistency, or just skip blur on init.
if (isAnonymous) {
const el = col.querySelector('.comparison-author');
setTimeout(() => el.classList.remove('blur-sm'), 300);
}
});
document.getElementById('prompt-list-modal').classList.add('hidden');
modal.classList.remove('hidden');
// Init Canvas (Phase 3)
setTimeout(setupCanvas, 100);
};
window.closeComparison = () => {
document.getElementById('comparison-modal').classList.add('hidden');
clearCanvas();
};
// --- Phase 3 & 6: Annotation Tools ---
let canvas, ctx;
let isDrawing = false;
let currentPenColor = '#ef4444'; // Red default
let currentLineWidth = 3;
let currentMode = 'source-over'; // 'source-over' (Pen) or 'destination-out' (Eraser)
window.setupCanvas = () => {
canvas = document.getElementById('annotation-canvas');
const container = document.getElementById('comparison-container');
if (!canvas || !container) return;
ctx = canvas.getContext('2d');
// Resize
const resize = () => {
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.strokeStyle = currentPenColor;
ctx.lineWidth = currentLineWidth;
ctx.globalCompositeOperation = currentMode;
};
resize();
window.addEventListener('resize', resize);
// Init Size UI & Cursor
updateSizeBtnUI();
updateCursorStyle();
// Cursor Logic
const cursor = document.getElementById('tool-cursor');
canvas.addEventListener('mouseenter', () => cursor.classList.remove('hidden'));
canvas.addEventListener('mouseleave', () => cursor.classList.add('hidden'));
canvas.addEventListener('mousemove', (e) => {
const { x, y } = getPos(e);
cursor.style.left = `${x}px`;
cursor.style.top = `${y}px`;
});
// Drawing Events
const start = (e) => {
isDrawing = true;
ctx.beginPath();
// Re-apply settings (state might change)
ctx.globalCompositeOperation = currentMode;
ctx.strokeStyle = currentPenColor;
ctx.lineWidth = currentLineWidth;
const { x, y } = getPos(e);
ctx.moveTo(x, y);
};
const move = (e) => {
if (!isDrawing) return;
const { x, y } = getPos(e);
ctx.lineTo(x, y);
ctx.stroke();
};
const end = () => {
isDrawing = false;
};
canvas.onmousedown = start;
canvas.onmousemove = move;
canvas.onmouseup = end;
canvas.onmouseleave = end;
// Touch support
canvas.ontouchstart = (e) => { e.preventDefault(); start(e.touches[0]); };
canvas.ontouchmove = (e) => { e.preventDefault(); move(e.touches[0]); };
canvas.ontouchend = (e) => { e.preventDefault(); end(); };
};
function getPos(e) {
const rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
// Unified Tool Handler
window.setPenTool = (tool, color, btn) => {
// UI Update
document.querySelectorAll('.annotation-tool').forEach(b => {
b.classList.remove('ring-white');
b.classList.add('ring-transparent');
});
btn.classList.remove('ring-transparent');
btn.classList.add('ring-white');
if (tool === 'eraser') {
currentMode = 'destination-out';
// Force larger eraser size (e.g., 3x current size or fixed large)
// We'll multiply current selected size by 4 for better UX
const multiplier = 4;
// Store original explicitly if needed, but currentLineWidth is global.
// We should dynamically adjust context lineWidth during draw, or just hack it here.
// Hack: If we change currentLineWidth here, the UI size buttons might look wrong.
// Better: Update cursor style only? No, actual draw needs it.
// Let's set a separate 'actualWidth' used in draw, OR just change currentLineWidth temporarily?
// Simpler: Just change it. When user clicks size button, it resets.
// But if user clicks Pen back? We need to restore.
// Let's rely on setPenTool being called with color.
// When "Pen" is clicked, we usually don't call setPenTool with a saved size...
// Actually, let's just use a large default for eraser, and keep currentLineWidth for Pen.
// We need to change how draw() uses the width.
// BUT, since we don't want to touch draw() deep inside:
// We will hijack currentLineWidth.
if (!window.savedPenWidth) window.savedPenWidth = currentLineWidth;
currentLineWidth = window.savedPenWidth * 4;
} else {
currentMode = 'source-over';
currentPenColor = color;
// Restore pen width
if (window.savedPenWidth) {
currentLineWidth = window.savedPenWidth;
window.savedPenWidth = null;
}
}
updateCursorStyle();
};
// Size Handler
window.setPenSize = (size, btn) => {
currentLineWidth = size;
updateSizeBtnUI();
updateCursorStyle();
};
function updateCursorStyle() {
const cursor = document.getElementById('tool-cursor');
if (!cursor) return;
// Size
cursor.style.width = `${currentLineWidth}px`;
cursor.style.height = `${currentLineWidth}px`;
// Color
if (currentMode === 'destination-out') {
// Eraser: White solid
cursor.style.backgroundColor = 'white';
cursor.style.borderColor = '#999';
} else {
// Pen: Tool color
cursor.style.backgroundColor = currentPenColor;
cursor.style.borderColor = 'rgba(255,255,255,0.8)';
}
}
function updateSizeBtnUI() {
document.querySelectorAll('.size-btn').forEach(b => {
if (parseInt(b.dataset.size) === currentLineWidth) {
b.classList.add('bg-gray-600', 'text-white');
b.classList.remove('text-gray-400', 'hover:bg-gray-700');
} else {
b.classList.remove('bg-gray-600', 'text-white');
b.classList.add('text-gray-400', 'hover:bg-gray-700');
}
});
}
window.clearCanvas = () => {
if (canvas && ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
};
}
/**
* Renders the Transposed Heatmap (Rows=Challenges, Cols=Students)
*/
function renderTransposedHeatmap(students) {
const thead = document.getElementById('heatmap-header');
const tbody = document.getElementById('heatmap-body');
if (students.length === 0) {
thead.innerHTML = '<th class="p-4 text-left">等待資料...</th>';
tbody.innerHTML = '<tr><td class="p-10 text-center text-gray-500">尚無學員加入</td></tr>';
return;
}
// 1. Render Header (Students)
// Sticky Top for Header Row
// Sticky Left for the first cell ("Challenge/Student")
let headerHtml = `
<th class="p-3 text-left sticky left-0 top-0 bg-gray-800 z-30 border-b border-gray-600 min-w-[200px] border-r border-gray-700 shadow-md">
<div class="flex justify-between items-end">
<span class="text-sm text-gray-400">題目</span>
<span class="text-sm text-cyan-400">學員 (${students.length})</span>
</div>
</th>
`;
students.forEach(student => {
headerHtml += `
<th class="p-2 text-center sticky top-0 bg-gray-800 z-20 border-b border-gray-700 min-w-[80px] group">
<div class="flex flex-col items-center space-y-2 py-2">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-gray-700 to-gray-600 flex items-center justify-center text-xs font-bold text-white uppercase border border-gray-500 shadow-sm relative">
${student.nickname[0]}
<!-- Online Indicator (Simulated) -->
<div class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 border-2 border-gray-800 rounded-full"></div>
</div>
<div class="flex items-center justify-center space-x-1">
<button onclick="window.openPromptList('student', '${student.id}', '${student.nickname}')" class="text-xs text-gray-300 font-medium truncate max-w-[80px] writing-vertical-lr hover:text-cyan-400 hover:font-bold transition-all" style="writing-mode: vertical-rl; text-orientation: mixed;" title="查看該學員所有提示詞">
${student.nickname}
</button>
<button onclick="window.confirmKick('${student.id}', '${student.nickname}')" class="text-gray-600 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity" title="踢出學員">
🗑️
</button>
</div>
</div>
</th>
`;
});
thead.innerHTML = headerHtml;
// 2. Render Body (Challenges as Rows)
if (cachedChallenges.length === 0) {
tbody.innerHTML = '<tr><td colspan="100" class="text-center py-4">沒有題目資料</td></tr>';
return;
}
tbody.innerHTML = cachedChallenges.map((c, index) => {
const colors = { beginner: 'cyan', intermediate: 'blue', advanced: 'purple' };
const color = colors[c.level] || 'gray';
// Build Row Cells (One per student)
const rowCells = students.map(student => {
const p = student.progress?.[c.id];
let statusClass = 'bg-gray-800/30 border-gray-800'; // Default
let content = '';
let action = '';
if (p) {
if (p.status === 'completed') {
statusClass = 'bg-green-500/20 border-green-500/50 hover:bg-green-500/40 cursor-default shadow-[0_0_10px_rgba(34,197,94,0.1)]';
content = '✅';
// Action removed: Moved to prompt list view
action = `title="完成 - 請點擊標題查看詳情"`;
} else if (p.status === 'started') {
// Check stuck
const startedAt = p.timestamp ? p.timestamp.toDate() : new Date();
const now = new Date();
const diffMins = (now - startedAt) / 1000 / 60;
if (diffMins > 5) {
statusClass = 'bg-red-900/50 border-red-500 animate-pulse cursor-help';
content = '🆘';
} else {
statusClass = 'bg-blue-600/20 border-blue-500';
content = '🔵';
}
}
}
return `
<td class="p-1 border border-gray-800/50 text-center align-middle h-14 hover:bg-white/5 transition-colors">
<div class="mx-auto w-10 h-10 rounded-lg border flex items-center justify-center ${statusClass} transition-all duration-300" ${action}>
${content}
</div>
</td>
`;
}).join('');
// Row Header (Challenge Title)
return `
<tr class="hover:bg-gray-800/50 transition-colors">
<td class="p-3 sticky left-0 bg-gray-900 z-10 border-r border-b border-gray-700 shadow-md">
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="text-xs text-${color}-400 font-bold uppercase tracking-wider mb-0.5">${c.level}</span>
<button onclick="window.openPromptList('challenge', '${c.id}', '${c.title}')" class="font-bold text-white text-sm truncate max-w-[180px] text-left hover:text-cyan-400 transition-colors" title="查看此題目所有作品">
${index + 1}. ${c.title}
</button>
</div>
<!-- Stats (Optional) -->
<!-- <span class="text-xs text-gray-500">0%</span> -->
</div>
</td>
${rowCells}
</tr>
`;
}).join('');
}
}
|