webtalekit-alpha 0.2.13 → 0.2.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (398) hide show
  1. package/README.md +145 -70
  2. package/package.json +10 -2
  3. package/parser/checker.js +184 -0
  4. package/parser/checker.test.ts +491 -0
  5. package/parser/cli.js +34 -2
  6. package/parser/parser.js +25 -18
  7. package/src/core/defaultUIHandler.js +309 -0
  8. package/src/core/defaultUIHandler.js.map +1 -0
  9. package/{dist/src → src}/core/drawer.js +65 -40
  10. package/src/core/drawer.js.map +1 -0
  11. package/{dist/src → src}/core/index.js +188 -257
  12. package/{dist/src → src}/core/scenarioManager.js +29 -7
  13. package/src/core/scenarioManager.js.map +1 -0
  14. package/src/utils/eventBus.js +88 -0
  15. package/src/utils/eventBus.js.map +1 -0
  16. package/{dist/src → src}/utils/logger.js +45 -1
  17. package/src/utils/logger.js.map +1 -0
  18. package/{dist/src → src}/utils/store.js +5 -0
  19. package/src/utils/store.js.map +1 -0
  20. package/.claude/settings.local.json +0 -12
  21. package/.clinerules +0 -65
  22. package/.history/README_20240812174230.md +0 -193
  23. package/.history/README_20240812175424.md +0 -185
  24. package/.history/README_20240812191012.md +0 -185
  25. package/.history/README_20240812191155.md +0 -185
  26. package/.history/README_20240812191211.md +0 -185
  27. package/.history/README_20240812192035.md +0 -185
  28. package/.history/dist/src/core/index_20240815021552.js +0 -474
  29. package/.history/dist/src/core/index_20240815022042.js +0 -476
  30. package/.history/dist/src/core/index_20240815022206.js +0 -476
  31. package/.history/dist/src/core/index_20240815023104.js +0 -478
  32. package/.history/dist/src/core/index_20240817022019.js +0 -494
  33. package/.history/dist/src/core/index_20240818013827.js +0 -493
  34. package/.history/dist/src/core/index_20240820001418.js +0 -502
  35. package/.history/package_20240812174230.json +0 -45
  36. package/.history/package_20240825011731.json +0 -45
  37. package/.history/package_20240825011739.json +0 -44
  38. package/.history/parser/parser_20240812174230.js +0 -50
  39. package/.history/parser/parser_20240825012739.js +0 -47
  40. package/.history/parser/parser_20240825012835.js +0 -52
  41. package/.history/src/core/drawer_20240813091343.ts +0 -262
  42. package/.history/src/core/drawer_20240815232345.ts +0 -262
  43. package/.history/src/core/drawer_20240815232350.ts +0 -262
  44. package/.history/src/core/drawer_20240816025257.ts +0 -357
  45. package/.history/src/core/drawer_20240816025358.ts +0 -357
  46. package/.history/src/core/drawer_20240816030148.ts +0 -365
  47. package/.history/src/core/drawer_20240816231033.ts +0 -294
  48. package/.history/src/core/drawer_20240816231107.ts +0 -262
  49. package/.history/src/core/drawer_20240816231234.ts +0 -268
  50. package/.history/src/core/drawer_20240817013836.ts +0 -290
  51. package/.history/src/core/drawer_20240817015150.ts +0 -289
  52. package/.history/src/core/drawer_20240817015353.ts +0 -290
  53. package/.history/src/core/drawer_20240817021254.ts +0 -291
  54. package/.history/src/core/drawer_20240817023440.ts +0 -295
  55. package/.history/src/core/drawer_20240817023445.ts +0 -295
  56. package/.history/src/core/drawer_20240818015327.ts +0 -295
  57. package/.history/src/core/drawer_20240819231006.ts +0 -318
  58. package/.history/src/core/drawer_20240820002829.ts +0 -317
  59. package/.history/src/core/drawer_20240820003141.ts +0 -295
  60. package/.history/src/core/drawer_20240824010043.ts +0 -295
  61. package/.history/src/core/drawer_20240825013311.ts +0 -293
  62. package/.history/src/core/drawer_20240902235257.ts +0 -295
  63. package/.history/src/core/drawer_20240904002038.ts +0 -262
  64. package/.history/src/core/drawer_20240904004020.ts +0 -262
  65. package/.history/src/core/drawer_20240904004238.ts +0 -262
  66. package/.history/src/core/drawer_20240904005648.ts +0 -262
  67. package/.history/src/core/drawer_20240904005808.ts +0 -262
  68. package/.history/src/core/drawer_20240904010523.ts +0 -262
  69. package/.history/src/core/drawer_20240904011611.ts +0 -262
  70. package/.history/src/core/drawer_20240904011740.ts +0 -262
  71. package/.history/src/core/index_20240812190102.js +0 -443
  72. package/.history/src/core/index_20240812190105.js +0 -443
  73. package/.history/src/core/index_20240812205421.js +0 -452
  74. package/.history/src/core/index_20240812213441.js +0 -452
  75. package/.history/src/core/index_20240812214203.js +0 -453
  76. package/.history/src/core/index_20240813090823.js +0 -453
  77. package/.history/src/core/index_20240813230449.js +0 -452
  78. package/.history/src/core/index_20240813230539.js +0 -452
  79. package/.history/src/core/index_20240813231447.js +0 -453
  80. package/.history/src/core/index_20240813231449.js +0 -453
  81. package/.history/src/core/index_20240813231511.js +0 -453
  82. package/.history/src/core/index_20240813231531.js +0 -453
  83. package/.history/src/core/index_20240813231913.js +0 -453
  84. package/.history/src/core/index_20240813232356.js +0 -453
  85. package/.history/src/core/index_20240813232640.js +0 -453
  86. package/.history/src/core/index_20240813232900.js +0 -453
  87. package/.history/src/core/index_20240814221127.js +0 -454
  88. package/.history/src/core/index_20240814221322.js +0 -454
  89. package/.history/src/core/index_20240814221526.js +0 -454
  90. package/.history/src/core/index_20240814222048.js +0 -454
  91. package/.history/src/core/index_20240814222918.js +0 -459
  92. package/.history/src/core/index_20240814223136.js +0 -459
  93. package/.history/src/core/index_20240814223501.js +0 -464
  94. package/.history/src/core/index_20240814224347.js +0 -468
  95. package/.history/src/core/index_20240815013712.js +0 -474
  96. package/.history/src/core/index_20240815021534.js +0 -474
  97. package/.history/src/core/index_20240815023143.js +0 -477
  98. package/.history/src/core/index_20240815023207.js +0 -479
  99. package/.history/src/core/index_20240815023344.js +0 -481
  100. package/.history/src/core/index_20240815035600.js +0 -479
  101. package/.history/src/core/index_20240815041549.js +0 -480
  102. package/.history/src/core/index_20240815185515.js +0 -481
  103. package/.history/src/core/index_20240815192158.js +0 -481
  104. package/.history/src/core/index_20240815222912.js +0 -482
  105. package/.history/src/core/index_20240815224052.js +0 -483
  106. package/.history/src/core/index_20240815224843.js +0 -484
  107. package/.history/src/core/index_20240815224850.js +0 -483
  108. package/.history/src/core/index_20240815231706.js +0 -479
  109. package/.history/src/core/index_20240816025748.js +0 -483
  110. package/.history/src/core/index_20240816030102.js +0 -484
  111. package/.history/src/core/index_20240817013329.js +0 -485
  112. package/.history/src/core/index_20240817013526.js +0 -485
  113. package/.history/src/core/index_20240817013819.js +0 -488
  114. package/.history/src/core/index_20240817013829.js +0 -488
  115. package/.history/src/core/index_20240817014921.js +0 -494
  116. package/.history/src/core/index_20240817022057.js +0 -494
  117. package/.history/src/core/index_20240817023316.js +0 -493
  118. package/.history/src/core/index_20240818005637.js +0 -493
  119. package/.history/src/core/index_20240818005721.js +0 -493
  120. package/.history/src/core/index_20240818011804.js +0 -493
  121. package/.history/src/core/index_20240818013835.js +0 -493
  122. package/.history/src/core/index_20240818014310.js +0 -493
  123. package/.history/src/core/index_20240818014323.js +0 -493
  124. package/.history/src/core/index_20240818014333.js +0 -493
  125. package/.history/src/core/index_20240818020725.js +0 -496
  126. package/.history/src/core/index_20240819195504.js +0 -497
  127. package/.history/src/core/index_20240819202012.js +0 -495
  128. package/.history/src/core/index_20240819231228.js +0 -501
  129. package/.history/src/core/index_20240819232555.js +0 -502
  130. package/.history/src/core/index_20240819233404.js +0 -502
  131. package/.history/src/core/index_20240820003114.js +0 -495
  132. package/.history/src/core/index_20240820003120.js +0 -495
  133. package/.history/src/core/index_20240820003331.js +0 -495
  134. package/.history/src/core/index_20240820004126.js +0 -498
  135. package/.history/src/core/index_20240820004357.js +0 -497
  136. package/.history/src/core/index_20240820005103.js +0 -498
  137. package/.history/src/core/index_20240820005110.js +0 -499
  138. package/.history/src/core/index_20240820005206.js +0 -497
  139. package/.history/src/core/index_20240820005352.js +0 -497
  140. package/.history/src/core/index_20240823224904.ts +0 -505
  141. package/.history/src/core/index_20240823224905.js +0 -505
  142. package/.history/src/core/index_20240823231631.ts +0 -530
  143. package/.history/src/core/index_20240823231735.ts +0 -530
  144. package/.history/src/core/index_20240823232123.ts +0 -539
  145. package/.history/src/core/index_20240823232329.ts +0 -539
  146. package/.history/src/core/index_20240823233058.ts +0 -539
  147. package/.history/src/core/index_20240823234946.ts +0 -539
  148. package/.history/src/core/index_20240824005956.ts +0 -534
  149. package/.history/src/core/index_20240824010113.ts +0 -534
  150. package/.history/src/core/index_20240824010124.ts +0 -534
  151. package/.history/src/core/index_20240824010212.ts +0 -534
  152. package/.history/src/core/index_20240824010218.ts +0 -534
  153. package/.history/src/core/index_20240824010407.ts +0 -534
  154. package/.history/src/core/index_20240824010611.ts +0 -534
  155. package/.history/src/core/index_20240824010623.ts +0 -534
  156. package/.history/src/core/index_20240824010652.ts +0 -534
  157. package/.history/src/core/index_20240824011007.ts +0 -534
  158. package/.history/src/core/index_20240824210450.ts +0 -534
  159. package/.history/src/core/index_20240824210703.ts +0 -534
  160. package/.history/src/core/index_20240824210708.ts +0 -534
  161. package/.history/src/core/index_20240824211001.ts +0 -537
  162. package/.history/src/core/index_20240824211258.ts +0 -537
  163. package/.history/src/core/index_20240824211654.ts +0 -537
  164. package/.history/src/core/index_20240824211723.ts +0 -537
  165. package/.history/src/core/index_20240824211808.ts +0 -538
  166. package/.history/src/core/index_20240824214041.js +0 -538
  167. package/.history/src/core/index_20240824215312.ts +0 -538
  168. package/.history/src/core/index_20240824215341.ts +0 -538
  169. package/.history/src/core/index_20240824220703.ts +0 -538
  170. package/.history/src/core/index_20240824220709.ts +0 -538
  171. package/.history/src/core/index_20240825012244.ts +0 -536
  172. package/.history/src/core/index_20240825012435.ts +0 -539
  173. package/.history/src/core/index_20240825012440.ts +0 -539
  174. package/.history/src/core/index_20240826005054.ts +0 -539
  175. package/.history/src/core/index_20240826005321.ts +0 -540
  176. package/.history/src/core/index_20240826005410.ts +0 -539
  177. package/.history/src/core/index_20240826005418.ts +0 -539
  178. package/.history/src/core/index_20240830231825.ts +0 -539
  179. package/.history/src/core/index_20240831022416.ts +0 -539
  180. package/.history/src/core/index_20240901222314.js +0 -459
  181. package/.history/src/core/index_20240901222951.js +0 -459
  182. package/.history/src/core/index_20240901223824.js +0 -471
  183. package/.history/src/core/index_20240901223833.js +0 -468
  184. package/.history/src/core/index_20240902223954.js +0 -447
  185. package/.history/src/core/index_20240902224000.js +0 -446
  186. package/.history/src/core/index_20240902230345.js +0 -448
  187. package/.history/src/core/index_20240902231130.js +0 -449
  188. package/.history/src/core/index_20240902231559.js +0 -449
  189. package/.history/src/core/index_20240902232135.js +0 -449
  190. package/.history/src/core/index_20240902232809.js +0 -452
  191. package/.history/src/core/index_20240902232815.js +0 -452
  192. package/.history/src/core/index_20240903000104.js +0 -467
  193. package/.history/src/core/index_20240904001731.js +0 -444
  194. package/.history/src/core/index_20240904002038.ts +0 -539
  195. package/.history/src/core/index_20240904011848.js +0 -444
  196. package/.history/src/core/index_20240904012138.js +0 -444
  197. package/.history/src/core/index_20240904012743.js +0 -444
  198. package/.history/src/core/index_20240904013051.js +0 -444
  199. package/.history/src/core/resourceManager_20240403231531.ts +0 -16
  200. package/.history/src/core/resourceManager_20240823232627.ts +0 -17
  201. package/.history/src/core/resourceManager_20240824214014.js +0 -16
  202. package/.history/src/core/resourceManager_20240824214620.js +0 -17
  203. package/.history/src/core/scenarioManager_20240812203410.ts +0 -86
  204. package/.history/src/core/scenarioManager_20240812203839.ts +0 -94
  205. package/.history/src/core/scenarioManager_20240812213437.ts +0 -85
  206. package/.history/src/core/scenarioManager_20240813225852.ts +0 -85
  207. package/.history/src/core/scenarioManager_20240823235010.ts +0 -85
  208. package/.history/src/core/scenarioManager_20240904002038.ts +0 -94
  209. package/.history/src/core/scenarioManager_20240904012411.ts +0 -94
  210. package/.history/src/core/scenarioManager_20240904012519.ts +0 -94
  211. package/.history/src/index_20240403231531.js +0 -6
  212. package/.history/src/index_20240429233436.js +0 -8
  213. package/.history/src/index_20240429233926.js +0 -8
  214. package/.history/src/index_20240429234401.js +0 -7
  215. package/.history/src/index_20240429234404.js +0 -6
  216. package/.history/src/resource/soundObject_20240419004314.ts +0 -71
  217. package/.history/src/resource/soundObject_20240815034420.ts +0 -66
  218. package/.history/src/resource/soundObject_20240815034836.ts +0 -79
  219. package/.history/src/resource/soundObject_20240815034919.ts +0 -87
  220. package/.history/src/resource/soundObject_20240815040724.ts +0 -81
  221. package/.history/src/resource/soundObject_20240815041022.ts +0 -87
  222. package/.history/src/resource/soundObject_20240815042103.ts +0 -87
  223. package/.history/src/resource/soundObject_20240823235929.ts +0 -91
  224. package/.history/src/resource/soundObject_20240824213129.ts +0 -99
  225. package/.history/src/resource/soundObject_20240824213611.ts +0 -101
  226. package/.history/src/resource/soundObject_20240824215734.ts +0 -101
  227. package/.history/src/resource/soundObject_20240825004926.ts +0 -101
  228. package/.history/src/resource/soundObject_20240825004947.ts +0 -101
  229. package/.history/src/utils/logger_20240812174230.ts +0 -13
  230. package/.history/src/utils/logger_20240823232736.ts +0 -14
  231. package/.history/src/utils/logger_20240824214930.js +0 -14
  232. package/.history/src/utils/store_20240812174230.ts +0 -17
  233. package/.history/src/utils/store_20240823232948.ts +0 -29
  234. package/.history/src/utils/store_20240824214020.js +0 -17
  235. package/.history/src/utils/store_20240824214955.js +0 -29
  236. package/.history/src/utils/waitUtil_20240812174230.ts +0 -4
  237. package/.history/src/utils/waitUtil_20240823232739.ts +0 -4
  238. package/.history/src/utils/waitUtil_20240824214024.js +0 -4
  239. package/.history/src/utils/waitUtil_20240824215009.js +0 -4
  240. package/.history/test/js/title_20240428215305.js +0 -254
  241. package/.history/test/js/title_20240429221911.js +0 -227
  242. package/.history/test/js/title_20240429222806.js +0 -243
  243. package/.history/test/js/title_20240429222854.js +0 -263
  244. package/.history/test/js/title_20240429222906.js +0 -263
  245. package/.history/test/js/title_20240429235639.js +0 -263
  246. package/.history/test/js/title_20240429235840.js +0 -263
  247. package/.history/test/js/title_20240430014721.js +0 -262
  248. package/.history/test/js/title_20240430014759.js +0 -254
  249. package/.history/test/js/title_20240430134612.js +0 -285
  250. package/.history/test/js/title_20240430141051.js +0 -285
  251. package/.history/test/js/title_20240430173745.js +0 -245
  252. package/.history/tsconfig_20240812174230.json +0 -22
  253. package/.history/tsconfig_20240824010157.json +0 -19
  254. package/.history/tsconfig_20240824220700.json +0 -20
  255. package/.history/tsconfig_20240825011301.json +0 -20
  256. package/.history/webpack.config_20240423002825.js +0 -37
  257. package/.history/webpack.config_20240430001157.js +0 -38
  258. package/.history/webpack.config_20240430001309.js +0 -37
  259. package/.history/webpack.config_20240430002112.js +0 -37
  260. package/CLAUDE.md +0 -96
  261. package/LICENSE +0 -21
  262. package/coverage/lcov-report/base.css +0 -224
  263. package/coverage/lcov-report/block-navigation.js +0 -87
  264. package/coverage/lcov-report/core/drawer.ts.html +0 -1264
  265. package/coverage/lcov-report/core/index.html +0 -146
  266. package/coverage/lcov-report/core/resourceManager.ts.html +0 -136
  267. package/coverage/lcov-report/core/scenarioManager.ts.html +0 -373
  268. package/coverage/lcov-report/favicon.png +0 -0
  269. package/coverage/lcov-report/index.html +0 -146
  270. package/coverage/lcov-report/prettify.css +0 -1
  271. package/coverage/lcov-report/prettify.js +0 -2
  272. package/coverage/lcov-report/resource/ImageObject.ts.html +0 -433
  273. package/coverage/lcov-report/resource/index.html +0 -131
  274. package/coverage/lcov-report/resource/soundObject.ts.html +0 -346
  275. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  276. package/coverage/lcov-report/sorter.js +0 -196
  277. package/coverage/lcov-report/utils/TextMeasurer.ts.html +0 -520
  278. package/coverage/lcov-report/utils/index.html +0 -161
  279. package/coverage/lcov-report/utils/logger.ts.html +0 -142
  280. package/coverage/lcov-report/utils/store.ts.html +0 -151
  281. package/coverage/lcov-report/utils/waitUtil.ts.html +0 -97
  282. package/coverage/lcov.info +0 -882
  283. package/dist/README.md +0 -294
  284. package/dist/engineConfig.json +0 -10
  285. package/dist/package.json +0 -51
  286. package/dist/parser/cli.js +0 -61
  287. package/dist/parser/parser.js +0 -53
  288. package/dist/src/core/drawer.js.map +0 -1
  289. package/dist/src/core/scenarioManager.js.map +0 -1
  290. package/dist/src/utils/logger.js.map +0 -1
  291. package/dist/src/utils/store.js.map +0 -1
  292. package/dist/webtalekit-alpha-0.2.13.tgz +0 -0
  293. package/docs/event-system-specification.md +0 -493
  294. package/docs/glossary.html +0 -833
  295. package/docs/index.html +0 -296
  296. package/docs/tag-reference.html +0 -1317
  297. package/docs/ui-template-guide.html +0 -1068
  298. package/example/README.md +0 -29
  299. package/example/engineConfig.json +0 -10
  300. package/example/package-lock.json +0 -5145
  301. package/example/package.json +0 -26
  302. package/example/src/index.js +0 -13
  303. package/example/src/resource/background/beach.jpg +0 -0
  304. package/example/src/resource/background/city.jpg +0 -0
  305. package/example/src/resource/background/crossroad.jpg +0 -0
  306. package/example/src/resource/background/forest.jpg +0 -0
  307. package/example/src/resource/background/laboratory.jpg +0 -0
  308. package/example/src/resource/background/library.jpg +0 -0
  309. package/example/src/resource/background/living_room.jpg +0 -0
  310. package/example/src/resource/background/music_room.jpg +0 -0
  311. package/example/src/resource/background/stage.jpg +0 -0
  312. package/example/src/resource/background/sunset.jpg +0 -0
  313. package/example/src/resource/background/title_bg.png +0 -0
  314. package/example/src/resource/bgm/calm_music.wav +0 -0
  315. package/example/src/resource/bgm/doorbell.mp3 +0 -0
  316. package/example/src/resource/bgm/nc366476_Virtual_Voyage.mp3 +0 -0
  317. package/example/src/resource/bgm/title_theme.mp3 +0 -0
  318. package/example/src/resource/chara/dancer.png +0 -0
  319. package/example/src/resource/chara/guest.png +0 -0
  320. package/example/src/resource/chara/guide.png +0 -0
  321. package/example/src/resource/chara/scientist.png +0 -0
  322. package/example/src/resource/config.js +0 -0
  323. package/example/src/resource/se/doorbell.mp3 +0 -0
  324. package/example/src/resource/system/systemPicture/01_message/message.png +0 -0
  325. package/example/src/resource/system/systemPicture/02_button/button.png +0 -0
  326. package/example/src/resource/system/systemPicture/02_button/button2.png +0 -0
  327. package/example/src/resource/system/systemPicture/02_button/button3.png +0 -0
  328. package/example/src/resource/system/systemPicture/03_system_button/auto.png +0 -0
  329. package/example/src/resource/system/systemPicture/03_system_button/auto2.png +0 -0
  330. package/example/src/resource/system/systemPicture/03_system_button/close.png +0 -0
  331. package/example/src/resource/system/systemPicture/03_system_button/close2.png +0 -0
  332. package/example/src/resource/system/systemPicture/03_system_button/config.png +0 -0
  333. package/example/src/resource/system/systemPicture/03_system_button/config2.png +0 -0
  334. package/example/src/resource/system/systemPicture/03_system_button/load.png +0 -0
  335. package/example/src/resource/system/systemPicture/03_system_button/load2.png +0 -0
  336. package/example/src/resource/system/systemPicture/03_system_button/log.png +0 -0
  337. package/example/src/resource/system/systemPicture/03_system_button/log2.png +0 -0
  338. package/example/src/resource/system/systemPicture/03_system_button/menu.png +0 -0
  339. package/example/src/resource/system/systemPicture/03_system_button/menu2.png +0 -0
  340. package/example/src/resource/system/systemPicture/03_system_button/qload.png +0 -0
  341. package/example/src/resource/system/systemPicture/03_system_button/qload2.png +0 -0
  342. package/example/src/resource/system/systemPicture/03_system_button/qsave.png +0 -0
  343. package/example/src/resource/system/systemPicture/03_system_button/qsave2.png +0 -0
  344. package/example/src/resource/system/systemPicture/03_system_button/save.png +0 -0
  345. package/example/src/resource/system/systemPicture/03_system_button/save2.png +0 -0
  346. package/example/src/resource/system/systemPicture/03_system_button/screen.png +0 -0
  347. package/example/src/resource/system/systemPicture/03_system_button/screen2.png +0 -0
  348. package/example/src/resource/system/systemPicture/03_system_button/skip.png +0 -0
  349. package/example/src/resource/system/systemPicture/03_system_button/skip2.png +0 -0
  350. package/example/src/resource/system/systemPicture/03_system_button/title.png +0 -0
  351. package/example/src/resource/system/systemPicture/03_system_button/title2.png +0 -0
  352. package/example/src/resource/system/systemPicture//345/210/251/347/224/250/350/246/217/347/264/204.txt +0 -0
  353. package/example/src/resource/system/wait.gif +0 -0
  354. package/example/src/scene/animation.scene +0 -28
  355. package/example/src/scene/background.scene +0 -29
  356. package/example/src/scene/character.scene +0 -26
  357. package/example/src/scene/choice.scene +0 -97
  358. package/example/src/scene/dialog.scene +0 -105
  359. package/example/src/scene/effects.scene +0 -38
  360. package/example/src/scene/en/animation.scene +0 -28
  361. package/example/src/scene/en/background.scene +0 -26
  362. package/example/src/scene/en/character.scene +0 -26
  363. package/example/src/scene/en/choice.scene +0 -32
  364. package/example/src/scene/en/effects.scene +0 -37
  365. package/example/src/scene/en/sound.scene +0 -26
  366. package/example/src/scene/en/text.scene +0 -26
  367. package/example/src/scene/en/title.scene +0 -39
  368. package/example/src/scene/if_test.scene +0 -37
  369. package/example/src/scene/resource-error-test.scene +0 -15
  370. package/example/src/scene/save-load-test.scene +0 -48
  371. package/example/src/scene/sound.scene +0 -26
  372. package/example/src/scene/test_error.scene +0 -21
  373. package/example/src/scene/text.scene +0 -34
  374. package/example/src/scene/title.scene +0 -51
  375. package/example/src/screen/incoming.html +0 -474
  376. package/example/src/screen/title.html +0 -135
  377. package/example/src/template.html +0 -16
  378. package/example/test-results/.last-run.json +0 -4
  379. package/example/webpack.config.js +0 -69
  380. package/image.png +0 -0
  381. package/playwright-report/index.html +0 -71
  382. package/s-plan1-5Light-s-1.jpg +0 -0
  383. package/test-results/.last-run.json +0 -6
  384. package/tests/e2e/if-global-attribute.spec.js +0 -90
  385. package/tests/e2e/resource-error-handling.spec.js +0 -58
  386. package/tests/e2e/screenshots/before-error-check.png +0 -0
  387. package/tests/e2e/screenshots/choices.png +0 -0
  388. package/tests/e2e/screenshots/message-window-click-wait.png +0 -0
  389. /package/{dist/src → src}/core/resourceManager.js +0 -0
  390. /package/{dist/src → src}/core/resourceManager.js.map +0 -0
  391. /package/{dist/src → src}/resource/ImageObject.js +0 -0
  392. /package/{dist/src → src}/resource/ImageObject.js.map +0 -0
  393. /package/{dist/src → src}/resource/soundObject.js +0 -0
  394. /package/{dist/src → src}/resource/soundObject.js.map +0 -0
  395. /package/{dist/src → src}/utils/fallbackTemplate.js +0 -0
  396. /package/{dist/src → src}/utils/fallbackTemplate.js.map +0 -0
  397. /package/{dist/src → src}/utils/waitUtil.js +0 -0
  398. /package/{dist/src → src}/utils/waitUtil.js.map +0 -0
package/docs/ui-template-guide.html DELETED
@@ -1,1068 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ja">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>webTaleKit UI・テンプレート設計ガイド</title>
7
- <style>
8
- body {
9
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
- line-height: 1.6;
11
- margin: 0;
12
- padding: 0;
13
- background: linear-gradient(135deg, #87CEEB 0%, #4169E1 50%, #1E90FF 100%);
14
- color: #333;
15
- }
16
- .container {
17
- max-width: 1400px;
18
- margin: 0 auto;
19
- padding: 20px;
20
- background: rgba(255, 255, 255, 0.95);
21
- border-radius: 15px;
22
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
23
- margin-top: 20px;
24
- margin-bottom: 20px;
25
- }
26
- .main-layout {
27
- display: flex;
28
- gap: 20px;
29
- }
30
- .sidebar {
31
- flex: 0 0 280px;
32
- background: white;
33
- border-radius: 10px;
34
- padding: 20px;
35
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
36
- position: sticky;
37
- top: 20px;
38
- height: fit-content;
39
- max-height: calc(100vh - 40px);
40
- overflow-y: auto;
41
- }
42
- .content {
43
- flex: 1;
44
- min-width: 0;
45
- }
46
- h1 {
47
- text-align: center;
48
- color: #2c3e50;
49
- font-size: 2.5em;
50
- margin-bottom: 30px;
51
- text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
52
- }
53
- .intro {
54
- background: #f8f9fa;
55
- padding: 20px;
56
- border-radius: 10px;
57
- margin-bottom: 30px;
58
- border-left: 5px solid #3498db;
59
- }
60
- .nav {
61
- background: #34495e;
62
- padding: 15px;
63
- border-radius: 10px;
64
- margin-bottom: 20px;
65
- }
66
- .nav h3 {
67
- color: white;
68
- margin: 0 0 15px 0;
69
- font-size: 1.2em;
70
- border-bottom: 1px solid #4a5f7a;
71
- padding-bottom: 10px;
72
- }
73
- .nav ul {
74
- list-style: none;
75
- padding: 0;
76
- margin: 0;
77
- display: flex;
78
- flex-direction: column;
79
- gap: 5px;
80
- }
81
- .nav li {
82
- background: transparent;
83
- border-radius: 5px;
84
- border-left: 3px solid transparent;
85
- transition: all 0.3s;
86
- }
87
- .nav li:hover {
88
- border-left-color: #3498db;
89
- background: rgba(52, 152, 219, 0.1);
90
- }
91
- .nav a {
92
- color: #ecf0f1;
93
- text-decoration: none;
94
- padding: 8px 15px;
95
- display: block;
96
- transition: color 0.3s;
97
- font-size: 0.95em;
98
- }
99
- .nav a:hover {
100
- color: #3498db;
101
- }
102
- .section {
103
- background: white;
104
- margin-bottom: 25px;
105
- padding: 25px;
106
- border-radius: 10px;
107
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
108
- border-left: 5px solid #e74c3c;
109
- }
110
- .section-title {
111
- font-size: 1.8em;
112
- font-weight: bold;
113
- color: #e74c3c;
114
- margin-bottom: 10px;
115
- border-bottom: 2px solid #ecf0f1;
116
- padding-bottom: 10px;
117
- }
118
- .section-description {
119
- margin-bottom: 20px;
120
- font-size: 1.1em;
121
- color: #555;
122
- }
123
- .attributes {
124
- background: #f8f9fa;
125
- padding: 15px;
126
- border-radius: 8px;
127
- margin-bottom: 20px;
128
- }
129
- .attributes h4 {
130
- margin-top: 0;
131
- color: #2c3e50;
132
- border-bottom: 1px solid #bdc3c7;
133
- padding-bottom: 5px;
134
- }
135
- .attr-list {
136
- display: grid;
137
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
138
- gap: 15px;
139
- }
140
- .attr-item {
141
- background: white;
142
- padding: 15px;
143
- border-radius: 5px;
144
- border-left: 3px solid #3498db;
145
- }
146
- .attr-name {
147
- font-weight: bold;
148
- color: #2c3e50;
149
- font-size: 1.1em;
150
- margin-bottom: 5px;
151
- }
152
- .attr-type {
153
- color: #7f8c8d;
154
- font-size: 0.9em;
155
- font-style: italic;
156
- margin-bottom: 8px;
157
- }
158
- .examples {
159
- background: #2c3e50;
160
- color: #ecf0f1;
161
- padding: 20px;
162
- border-radius: 8px;
163
- margin-bottom: 15px;
164
- }
165
- .examples h4 {
166
- margin-top: 0;
167
- color: #3498db;
168
- border-bottom: 1px solid #34495e;
169
- padding-bottom: 5px;
170
- }
171
- .code-block {
172
- background: #34495e;
173
- padding: 15px;
174
- border-radius: 5px;
175
- margin: 10px 0;
176
- overflow-x: auto;
177
- border-left: 3px solid #3498db;
178
- }
179
- .code-block pre {
180
- margin: 0;
181
- font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
182
- font-size: 0.9em;
183
- line-height: 1.4;
184
- }
185
- .usage-notes {
186
- background: #fff3cd;
187
- border: 1px solid #ffeaa7;
188
- border-radius: 8px;
189
- padding: 15px;
190
- margin-top: 15px;
191
- }
192
- .usage-notes h4 {
193
- margin-top: 0;
194
- color: #856404;
195
- }
196
- .back-to-top {
197
- position: fixed;
198
- bottom: 20px;
199
- right: 20px;
200
- background: #3498db;
201
- color: white;
202
- padding: 10px 15px;
203
- border-radius: 50px;
204
- text-decoration: none;
205
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
206
- transition: all 0.3s;
207
- }
208
- .back-to-top:hover {
209
- background: #2980b9;
210
- transform: translateY(-2px);
211
- }
212
- .file-structure {
213
- background: #f8f9fa;
214
- border: 1px solid #dee2e6;
215
- border-radius: 8px;
216
- padding: 15px;
217
- margin: 15px 0;
218
- font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
219
- font-size: 0.9em;
220
- }
221
- .highlight {
222
- background: #e3f2fd;
223
- padding: 3px 6px;
224
- border-radius: 3px;
225
- font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
226
- font-size: 0.9em;
227
- }
228
- @media (max-width: 1024px) {
229
- .main-layout {
230
- flex-direction: column;
231
- }
232
- .sidebar {
233
- flex: none;
234
- position: static;
235
- max-height: none;
236
- margin-bottom: 20px;
237
- }
238
- .nav ul {
239
- display: flex;
240
- flex-direction: row;
241
- flex-wrap: wrap;
242
- gap: 10px;
243
- }
244
- .nav li {
245
- background: #3498db;
246
- border-left: none;
247
- }
248
- .nav a {
249
- color: white;
250
- padding: 8px 15px;
251
- }
252
- .nav a:hover {
253
- background: rgba(255, 255, 255, 0.2);
254
- color: white;
255
- }
256
- }
257
- @media (max-width: 768px) {
258
- .container {
259
- margin: 10px;
260
- padding: 15px;
261
- }
262
- .attr-list {
263
- grid-template-columns: 1fr;
264
- }
265
- }
266
- </style>
267
- </head>
268
- <body>
269
- <div class="container">
270
- <h1>webTaleKit UI・テンプレート設計ガイド</h1>
271
-
272
- <div class="intro">
273
- <h2>概要</h2>
274
- <p>webTaleKitでは、HTMLテンプレートを使用してゲームUIをカスタマイズできます。このガイドでは、テンプレートファイルの作成方法、必要なHTML要素、CSSスタイリング、そしてダイアログシステムの設計について詳しく説明します。</p>
275
- <p>適切なテンプレート設計により、独自のビジュアルノベルUIを構築できます。</p>
276
- </div>
277
-
278
- <div class="main-layout">
279
- <aside class="sidebar">
280
- <nav class="nav">
281
- <h3>目次</h3>
282
- <ul>
283
- <li><a href="#template-overview">テンプレート概要</a></li>
284
- <li><a href="#required-elements">必須HTML要素</a></li>
285
- <li><a href="#scene-templates">シーンテンプレート</a></li>
286
- <li><a href="#dialog-templates">ダイアログテンプレート</a></li>
287
- <li><a href="#css-styling">CSSスタイリング</a></li>
288
- <li><a href="#responsive-design">レスポンシブ対応</a></li>
289
- <li><a href="#custom-components">カスタムコンポーネント</a></li>
290
- <li><a href="#best-practices">ベストプラクティス</a></li>
291
- </ul>
292
- </nav>
293
- </aside>
294
- <main class="content">
295
-
296
- <section id="template-overview" class="section">
297
- <div class="section-title">テンプレート概要</div>
298
- <div class="section-description">
299
- webTaleKitのテンプレートシステムは、HTMLとCSSを使用してゲームUIを定義します。テンプレートは主に2つのタイプがあります。
300
- </div>
301
-
302
- <div class="attributes">
303
- <h4>テンプレートタイプ</h4>
304
- <div class="attr-list">
305
- <div class="attr-item">
306
- <div class="attr-name">シーンテンプレート</div>
307
- <div class="attr-type">ゲーム画面用</div>
308
- <div>メインゲーム画面のレイアウトを定義します。テキスト表示、キャラクター配置、UI要素などを含みます。</div>
309
- </div>
310
- <div class="attr-item">
311
- <div class="attr-name">ダイアログテンプレート</div>
312
- <div class="attr-type">モーダル用</div>
313
- <div>ダイアログボックスのデザインを定義します。メニュー、設定画面、確認ダイアログなどに使用されます。</div>
314
- </div>
315
- </div>
316
- </div>
317
-
318
- <div class="file-structure">
319
- example/src/screen/
320
- ├── title.html # メインシーンテンプレート
321
- ├── incoming.html # カスタムダイアログテンプレート
322
- └── template.html # ベーステンプレート
323
- </div>
324
-
325
- <div class="usage-notes">
326
- <h4>重要事項</h4>
327
- <ul>
328
- <li>テンプレートファイルは<span class="highlight">src/screen/</span>ディレクトリに配置します</li>
329
- <li>各シーンで異なるテンプレートを指定できます</li>
330
- <li>ダイアログは独自のテンプレートを使用可能です</li>
331
- <li>テンプレート内のスタイルはページ全体に適用されます</li>
332
- </ul>
333
- </div>
334
- </section>
335
-
336
- <section id="required-elements" class="section">
337
- <div class="section-title">必須HTML要素</div>
338
- <div class="section-description">
339
- webTaleKitが正常に動作するために、テンプレートには特定のID/クラスを持つHTML要素が必要です。
340
- </div>
341
-
342
- <div class="attributes">
343
- <h4>シーンテンプレート必須要素</h4>
344
- <div class="attr-list">
345
- <div class="attr-item">
346
- <div class="attr-name">#main</div>
347
- <div class="attr-type">メインコンテナ</div>
348
- <div>ゲーム画面全体を包含するコンテナ要素。エンジンがこの内容をgameContainerに読み込みます。</div>
349
- </div>
350
- <div class="attr-item">
351
- <div class="attr-name">#nameView</div>
352
- <div class="attr-type">キャラクター名表示</div>
353
- <div>話者の名前を表示する要素。sayタグのname属性の内容が表示されます。</div>
354
- </div>
355
- <div class="attr-item">
356
- <div class="attr-name">#messageView</div>
357
- <div class="attr-type">テキスト表示領域</div>
358
- <div>ゲームのメインテキストが表示される領域。textタグやsayタグの内容が表示されます。</div>
359
- </div>
360
- <div class="attr-item">
361
- <div class="attr-name">#interactiveView</div>
362
- <div class="attr-type">選択肢表示領域</div>
363
- <div>choiceタグで定義された選択肢ボタンが表示される領域。通常は非表示です。</div>
364
- </div>
365
- <div class="attr-item">
366
- <div class="attr-name">#waitCircle</div>
367
- <div class="attr-type">待機インジケーター</div>
368
- <div>クリック待ちの際に表示されるアニメーション要素。</div>
369
- </div>
370
- <div class="attr-item">
371
- <div class="attr-name">#messageWindow</div>
372
- <div class="attr-type">メッセージウィンドウ</div>
373
- <div>テキスト表示部分を包含するウィンドウ要素。</div>
374
- </div>
375
- </div>
376
- </div>
377
-
378
- <div class="examples">
379
- <h4>シーンテンプレート基本構造</h4>
380
- <div class="code-block">
381
- <pre>&lt;!DOCTYPE html&gt;
382
- &lt;html lang="ja"&gt;
383
- &lt;head&gt;
384
- &lt;meta charset="UTF-8"&gt;
385
- &lt;style&gt;
386
- /* スタイル定義 */
387
- #main {
388
- width: 1280px;
389
- height: 720px;
390
- position: relative;
391
- background: black;
392
- }
393
- #messageWindow {
394
- position: absolute;
395
- bottom: 20px;
396
- left: 20px;
397
- right: 20px;
398
- background: rgba(0, 0, 0, 0.8);
399
- border-radius: 10px;
400
- padding: 20px;
401
- }
402
- #nameView {
403
- color: #ffffff;
404
- font-weight: bold;
405
- margin-bottom: 10px;
406
- }
407
- #messageView {
408
- color: #ffffff;
409
- line-height: 1.6;
410
- min-height: 80px;
411
- }
412
- #interactiveView {
413
- position: absolute;
414
- top: 50%;
415
- left: 50%;
416
- transform: translate(-50%, -50%);
417
- visibility: hidden;
418
- }
419
- #waitCircle {
420
- position: absolute;
421
- bottom: 40px;
422
- right: 40px;
423
- width: 20px;
424
- height: 20px;
425
- background: white;
426
- border-radius: 50%;
427
- animation: pulse 1s infinite;
428
- }
429
- @keyframes pulse {
430
- 0%, 100% { opacity: 1; }
431
- 50% { opacity: 0.3; }
432
- }
433
- &lt;/style&gt;
434
- &lt;/head&gt;
435
- &lt;body&gt;
436
- &lt;div id="main"&gt;
437
- &lt;div id="interactiveView"&gt;&lt;/div&gt;
438
- &lt;div id="messageWindow"&gt;
439
- &lt;div id="nameView"&gt;&lt;/div&gt;
440
- &lt;div id="messageView"&gt;&lt;/div&gt;
441
- &lt;/div&gt;
442
- &lt;div id="waitCircle"&gt;&lt;/div&gt;
443
- &lt;/div&gt;
444
- &lt;/body&gt;
445
- &lt;/html&gt;</pre>
446
- </div>
447
- </div>
448
- </section>
449
-
450
- <section id="scene-templates" class="section">
451
- <div class="section-title">シーンテンプレート</div>
452
- <div class="section-description">
453
- シーンテンプレートは各シーンで使用されるメインのUI定義です。sceneConfig内のtemplateプロパティで指定します。
454
- </div>
455
-
456
- <div class="attributes">
457
- <h4>設定方法</h4>
458
- <div class="attr-list">
459
- <div class="attr-item">
460
- <div class="attr-name">sceneConfig.template</div>
461
- <div class="attr-type">テンプレートパス指定</div>
462
- <div>使用するテンプレートファイルのパスを指定します。</div>
463
- </div>
464
- </div>
465
- </div>
466
-
467
- <div class="examples">
468
- <h4>シーンでのテンプレート指定</h4>
469
- <div class="code-block">
470
- <pre>&lt;script&gt;
471
- export const sceneConfig = {
472
- name: 'title',
473
- background: './src/resource/background/title_bg.png',
474
- template: './src/screen/title.html', // テンプレート指定
475
- bgm: './src/resource/bgm/title_theme.mp3'
476
- }
477
- &lt;/script&gt;</pre>
478
- </div>
479
- </div>
480
-
481
- <div class="examples">
482
- <h4>カスタムテンプレート例</h4>
483
- <div class="code-block">
484
- <pre>&lt;!-- ダークテーマのテンプレート --&gt;
485
- &lt;style&gt;
486
- #main {
487
- width: 1280px;
488
- height: 720px;
489
- position: relative;
490
- background: linear-gradient(135deg, #1a1a1a, #2d2d30);
491
- }
492
- #messageWindow {
493
- position: absolute;
494
- bottom: 30px;
495
- left: 30px;
496
- right: 30px;
497
- background: linear-gradient(135deg, #2d2d30, #3e3e42);
498
- border: 2px solid #007acc;
499
- border-radius: 15px;
500
- padding: 25px;
501
- box-shadow: 0 10px 30px rgba(0, 122, 204, 0.3);
502
- }
503
- #nameView {
504
- color: #00d4ff;
505
- font-weight: bold;
506
- font-size: 18px;
507
- margin-bottom: 15px;
508
- text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
509
- }
510
- #messageView {
511
- color: #e0e0e0;
512
- line-height: 1.8;
513
- font-size: 16px;
514
- min-height: 90px;
515
- }
516
- #interactiveView {
517
- position: absolute;
518
- top: 40%;
519
- left: 50%;
520
- transform: translate(-50%, -50%);
521
- visibility: hidden;
522
- }
523
- .choice {
524
- background: linear-gradient(135deg, #007acc, #005a9e);
525
- color: white;
526
- border: none;
527
- padding: 15px 30px;
528
- margin: 10px;
529
- border-radius: 8px;
530
- cursor: pointer;
531
- transition: all 0.3s;
532
- box-shadow: 0 5px 15px rgba(0, 122, 204, 0.3);
533
- }
534
- .choice:hover {
535
- background: linear-gradient(135deg, #00a0ff, #007acc);
536
- transform: translateY(-2px);
537
- box-shadow: 0 8px 25px rgba(0, 160, 255, 0.4);
538
- }
539
- &lt;/style&gt;</pre>
540
- </div>
541
- </div>
542
- </section>
543
-
544
- <section id="dialog-templates" class="section">
545
- <div class="section-title">ダイアログテンプレート</div>
546
- <div class="section-description">
547
- ダイアログテンプレートは、dialogタグで使用されるモーダルダイアログのデザインを定義します。
548
- </div>
549
-
550
- <div class="attributes">
551
- <h4>ダイアログ必須要素</h4>
552
- <div class="attr-list">
553
- <div class="attr-item">
554
- <div class="attr-name">#dialogContainer</div>
555
- <div class="attr-type">ダイアログコンテナ</div>
556
- <div>ダイアログ全体を包含するコンテナ。HTML5のdialog要素を使用することを推奨。</div>
557
- </div>
558
- <div class="attr-item">
559
- <div class="attr-name">.dialog-prompt</div>
560
- <div class="attr-type">プロンプト表示領域</div>
561
- <div>ダイアログのメッセージテキストが表示される領域。</div>
562
- </div>
563
- <div class="attr-item">
564
- <div class="attr-name">.dialog-buttons</div>
565
- <div class="attr-type">ボタンコンテナ</div>
566
- <div>ダイアログのアクションボタンが配置される領域。</div>
567
- </div>
568
- </div>
569
- </div>
570
-
571
- <div class="examples">
572
- <h4>基本ダイアログテンプレート</h4>
573
- <div class="code-block">
574
- <pre>&lt;!DOCTYPE html&gt;
575
- &lt;html lang="ja"&gt;
576
- &lt;head&gt;
577
- &lt;meta charset="UTF-8"&gt;
578
- &lt;style&gt;
579
- #dialogContainer {
580
- border: none;
581
- border-radius: 10px;
582
- padding: 0;
583
- background: transparent;
584
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
585
- }
586
- #dialogContainer::backdrop {
587
- background: rgba(0, 0, 0, 0.5);
588
- backdrop-filter: blur(5px);
589
- }
590
- .dialog-content {
591
- background: white;
592
- border-radius: 10px;
593
- padding: 30px;
594
- min-width: 400px;
595
- max-width: 600px;
596
- }
597
- .dialog-prompt {
598
- font-size: 18px;
599
- color: #333;
600
- margin-bottom: 25px;
601
- line-height: 1.6;
602
- }
603
- .dialog-buttons {
604
- display: flex;
605
- gap: 15px;
606
- justify-content: flex-end;
607
- }
608
- .dialog-button {
609
- padding: 12px 24px;
610
- border: none;
611
- border-radius: 6px;
612
- font-size: 16px;
613
- cursor: pointer;
614
- transition: all 0.3s;
615
- }
616
- .dialog-button:hover {
617
- transform: translateY(-2px);
618
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
619
- }
620
- &lt;/style&gt;
621
- &lt;/head&gt;
622
- &lt;body&gt;
623
- &lt;dialog id="dialogContainer"&gt;
624
- &lt;div class="dialog-content"&gt;
625
- &lt;div class="dialog-prompt"&gt;&lt;/div&gt;
626
- &lt;div class="dialog-buttons"&gt;&lt;/div&gt;
627
- &lt;/div&gt;
628
- &lt;/dialog&gt;
629
- &lt;/body&gt;
630
- &lt;/html&gt;</pre>
631
- </div>
632
- </div>
633
-
634
- <div class="examples">
635
- <h4>カスタムダイアログ（着信画面風）</h4>
636
- <div class="code-block">
637
- <pre>&lt;style&gt;
638
- #dialogContainer {
639
- border: none;
640
- border-radius: 20px;
641
- padding: 0;
642
- background: linear-gradient(135deg, #1a1a1a, #2d2d30);
643
- color: white;
644
- width: 350px;
645
- height: 500px;
646
- }
647
- .phone-screen {
648
- padding: 40px 30px;
649
- text-align: center;
650
- height: 100%;
651
- display: flex;
652
- flex-direction: column;
653
- justify-content: space-between;
654
- }
655
- .caller-info {
656
- margin-top: 50px;
657
- }
658
- .caller-name {
659
- font-size: 24px;
660
- font-weight: bold;
661
- margin-bottom: 10px;
662
- }
663
- .caller-number {
664
- font-size: 16px;
665
- color: #888;
666
- margin-bottom: 30px;
667
- }
668
- .avatar {
669
- width: 120px;
670
- height: 120px;
671
- border-radius: 50%;
672
- background: #007acc;
673
- margin: 0 auto 30px;
674
- display: flex;
675
- align-items: center;
676
- justify-content: center;
677
- font-size: 48px;
678
- }
679
- .call-actions {
680
- display: flex;
681
- justify-content: space-around;
682
- margin-bottom: 40px;
683
- }
684
- .call-button {
685
- width: 70px;
686
- height: 70px;
687
- border-radius: 50%;
688
- border: none;
689
- font-size: 24px;
690
- cursor: pointer;
691
- transition: all 0.3s;
692
- }
693
- .accept { background: #4CAF50; }
694
- .decline { background: #f44336; }
695
- .call-button:hover {
696
- transform: scale(1.1);
697
- }
698
- &lt;/style&gt;
699
-
700
- &lt;dialog id="dialogContainer"&gt;
701
- &lt;div class="phone-screen"&gt;
702
- &lt;div class="caller-info"&gt;
703
- &lt;div class="avatar"&gt;📞&lt;/div&gt;
704
- &lt;div class="dialog-prompt caller-name"&gt;&lt;/div&gt;
705
- &lt;div class="caller-number"&gt;着信中...&lt;/div&gt;
706
- &lt;/div&gt;
707
- &lt;div class="dialog-buttons call-actions"&gt;
708
- &lt;!-- ボタンは動的に生成される --&gt;
709
- &lt;/div&gt;
710
- &lt;/div&gt;
711
- &lt;/dialog&gt;</pre>
712
- </div>
713
- </div>
714
- </section>
715
-
716
- <section id="css-styling" class="section">
717
- <div class="section-title">CSSスタイリング</div>
718
- <div class="section-description">
719
- webTaleKitでは、テンプレート内の&lt;style&gt;タグがページ全体に適用されます。エンジンが自動的にスタイルを管理します。
720
- </div>
721
-
722
- <div class="attributes">
723
- <h4>スタイル管理</h4>
724
- <div class="attr-list">
725
- <div class="attr-item">
726
- <div class="attr-name">スタイル置換</div>
727
- <div class="attr-type">自動管理</div>
728
- <div>新しいシーンが読み込まれると、既存のスタイルタグは削除され、新しいテンプレートのスタイルが適用されます。</div>
729
- </div>
730
- <div class="attr-item">
731
- <div class="attr-name">スコープ</div>
732
- <div class="attr-type">グローバル</div>
733
- <div>テンプレート内のCSSはページ全体に適用されるため、適切なセレクタを使用してください。</div>
734
- </div>
735
- </div>
736
- </div>
737
-
738
- <div class="examples">
739
- <h4>推奨CSSパターン</h4>
740
- <div class="code-block">
741
- <pre>/* ゲーム解像度設定 */
742
- #main {
743
- width: 1280px;
744
- height: 720px;
745
- position: relative;
746
- margin: 0 auto;
747
- background: black;
748
- overflow: hidden;
749
- }
750
-
751
- /* メッセージウィンドウ */
752
- #messageWindow {
753
- position: absolute;
754
- bottom: 20px;
755
- left: 20px;
756
- right: 20px;
757
- background: rgba(0, 0, 0, 0.8);
758
- border-radius: 10px;
759
- padding: 20px;
760
- backdrop-filter: blur(10px);
761
- }
762
-
763
- /* テキストアニメーション */
764
- #messageView {
765
- color: white;
766
- line-height: 1.6;
767
- animation: fadeIn 0.5s ease-in;
768
- }
769
-
770
- @keyframes fadeIn {
771
- from { opacity: 0; }
772
- to { opacity: 1; }
773
- }
774
-
775
- /* 選択肢ボタン */
776
- .choice {
777
- background: linear-gradient(135deg, #667eea, #764ba2);
778
- color: white;
779
- border: none;
780
- padding: 15px 30px;
781
- margin: 10px;
782
- border-radius: 8px;
783
- cursor: pointer;
784
- transition: all 0.3s ease;
785
- font-size: 16px;
786
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
787
- }
788
-
789
- .choice:hover {
790
- transform: translateY(-3px);
791
- box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
792
- }</pre>
793
- </div>
794
- </div>
795
- </section>
796
-
797
- <section id="responsive-design" class="section">
798
- <div class="section-title">レスポンシブ対応</div>
799
- <div class="section-description">
800
- webTaleKitエンジンは自動的に画面サイズに合わせてスケーリングしますが、テンプレート側でもレスポンシブ対応を行うことで、より良いユーザー体験を提供できます。
801
- </div>
802
-
803
- <div class="examples">
804
- <h4>レスポンシブCSS例</h4>
805
- <div class="code-block">
806
- <pre>/* モバイル対応 */
807
- @media (max-width: 768px) {
808
- #messageWindow {
809
- bottom: 10px;
810
- left: 10px;
811
- right: 10px;
812
- padding: 15px;
813
- }
814
-
815
- #nameView {
816
- font-size: 14px;
817
- }
818
-
819
- #messageView {
820
- font-size: 14px;
821
- line-height: 1.5;
822
- }
823
-
824
- .choice {
825
- padding: 12px 20px;
826
- font-size: 14px;
827
- margin: 8px;
828
- }
829
- }
830
-
831
- /* タブレット対応 */
832
- @media (max-width: 1024px) and (min-width: 769px) {
833
- #messageWindow {
834
- bottom: 15px;
835
- left: 15px;
836
- right: 15px;
837
- padding: 18px;
838
- }
839
-
840
- .choice {
841
- padding: 13px 25px;
842
- font-size: 15px;
843
- }
844
- }
845
-
846
- /* 高解像度対応 */
847
- @media (min-width: 1920px) {
848
- #messageView {
849
- font-size: 18px;
850
- }
851
-
852
- #nameView {
853
- font-size: 20px;
854
- }
855
- }</pre>
856
- </div>
857
- </div>
858
- </section>
859
-
860
- <section id="custom-components" class="section">
861
- <div class="section-title">カスタムコンポーネント</div>
862
- <div class="section-description">
863
- テンプレート内で独自のUIコンポーネントを定義し、ゲーム体験を向上させることができます。
864
- </div>
865
-
866
- <div class="examples">
867
- <h4>ステータスバー付きテンプレート</h4>
868
- <div class="code-block">
869
- <pre>&lt;style&gt;
870
- #statusBar {
871
- position: absolute;
872
- top: 20px;
873
- left: 20px;
874
- right: 20px;
875
- background: rgba(0, 0, 0, 0.7);
876
- border-radius: 10px;
877
- padding: 15px;
878
- display: flex;
879
- justify-content: space-between;
880
- color: white;
881
- }
882
-
883
- .status-item {
884
- display: flex;
885
- align-items: center;
886
- gap: 10px;
887
- }
888
-
889
- .hp-bar, .mp-bar {
890
- width: 100px;
891
- height: 8px;
892
- background: #333;
893
- border-radius: 4px;
894
- overflow: hidden;
895
- }
896
-
897
- .hp-fill { background: #4CAF50; height: 100%; }
898
- .mp-fill { background: #2196F3; height: 100%; }
899
- &lt;/style&gt;
900
-
901
- &lt;div id="main"&gt;
902
- &lt;div id="statusBar"&gt;
903
- &lt;div class="status-item"&gt;
904
- &lt;span&gt;HP&lt;/span&gt;
905
- &lt;div class="hp-bar"&gt;
906
- &lt;div class="hp-fill" style="width: 80%;"&gt;&lt;/div&gt;
907
- &lt;/div&gt;
908
- &lt;span&gt;80/100&lt;/span&gt;
909
- &lt;/div&gt;
910
- &lt;div class="status-item"&gt;
911
- &lt;span&gt;MP&lt;/span&gt;
912
- &lt;div class="mp-bar"&gt;
913
- &lt;div class="mp-fill" style="width: 60%;"&gt;&lt;/div&gt;
914
- &lt;/div&gt;
915
- &lt;span&gt;60/100&lt;/span&gt;
916
- &lt;/div&gt;
917
- &lt;div class="status-item"&gt;
918
- &lt;span&gt;所持金: 1,500G&lt;/span&gt;
919
- &lt;/div&gt;
920
- &lt;/div&gt;
921
- &lt;!-- 他の要素... --&gt;
922
- &lt;/div&gt;</pre>
923
- </div>
924
- </div>
925
-
926
- <div class="examples">
927
- <h4>サイドメニュー付きテンプレート</h4>
928
- <div class="code-block">
929
- <pre>&lt;style&gt;
930
- #sideMenu {
931
- position: absolute;
932
- top: 20px;
933
- right: 20px;
934
- width: 60px;
935
- background: rgba(0, 0, 0, 0.8);
936
- border-radius: 10px;
937
- padding: 15px 10px;
938
- display: flex;
939
- flex-direction: column;
940
- gap: 15px;
941
- }
942
-
943
- .menu-button {
944
- width: 40px;
945
- height: 40px;
946
- border: none;
947
- border-radius: 8px;
948
- background: #667eea;
949
- color: white;
950
- font-size: 18px;
951
- cursor: pointer;
952
- transition: all 0.3s;
953
- }
954
-
955
- .menu-button:hover {
956
- background: #764ba2;
957
- transform: scale(1.1);
958
- }
959
- &lt;/style&gt;
960
-
961
- &lt;div id="sideMenu"&gt;
962
- &lt;button class="menu-button" title="セーブ"&gt;💾&lt;/button&gt;
963
- &lt;button class="menu-button" title="ロード"&gt;📁&lt;/button&gt;
964
- &lt;button class="menu-button" title="設定"&gt;⚙️&lt;/button&gt;
965
- &lt;button class="menu-button" title="ログ"&gt;📋&lt;/button&gt;
966
- &lt;/div&gt;</pre>
967
- </div>
968
- </div>
969
- </section>
970
-
971
- <section id="best-practices" class="section">
972
- <div class="section-title">ベストプラクティス</div>
973
- <div class="section-description">
974
- 効果的なテンプレート設計のためのガイドライン。
975
- </div>
976
-
977
- <div class="usage-notes">
978
- <h4>パフォーマンス</h4>
979
- <ul>
980
- <li>CSS Animationは適度に使用し、パフォーマンスに配慮する</li>
981
- <li>大きな画像はCSSではなくshowタグで表示する</li>
982
- <li>複雑なCSSセレクタは避け、シンプルに保つ</li>
983
- </ul>
984
- </div>
985
-
986
- <div class="usage-notes">
987
- <h4>メンテナンス性</h4>
988
- <ul>
989
- <li>CSS変数を使用して色やサイズを統一する</li>
990
- <li>コメントを適切に記述する</li>
991
- <li>命名規則を統一する（BEMなど）</li>
992
- <li>共通コンポーネントは別ファイルに分離する</li>
993
- </ul>
994
- </div>
995
-
996
- <div class="usage-notes">
997
- <h4>ユーザビリティ</h4>
998
- <ul>
999
- <li>テキストの可読性を確保する（コントラスト、フォントサイズ）</li>
1000
- <li>ボタンのクリック領域を十分に確保する</li>
1001
- <li>アニメーションは控えめにし、ユーザーの集中を妨げない</li>
1002
- <li>重要な情報は見やすい位置に配置する</li>
1003
- </ul>
1004
- </div>
1005
-
1006
- <div class="examples">
1007
- <h4>CSS変数を使用した設計例</h4>
1008
- <div class="code-block">
1009
- <pre>:root {
1010
- --primary-color: #667eea;
1011
- --secondary-color: #764ba2;
1012
- --text-color: #ffffff;
1013
- --bg-color: rgba(0, 0, 0, 0.8);
1014
- --border-radius: 10px;
1015
- --spacing-small: 10px;
1016
- --spacing-medium: 20px;
1017
- --spacing-large: 30px;
1018
- }
1019
-
1020
- #messageWindow {
1021
- background: var(--bg-color);
1022
- border-radius: var(--border-radius);
1023
- padding: var(--spacing-medium);
1024
- color: var(--text-color);
1025
- }
1026
-
1027
- .choice {
1028
- background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
1029
- border-radius: calc(var(--border-radius) * 0.8);
1030
- padding: var(--spacing-small) var(--spacing-medium);
1031
- color: var(--text-color);
1032
- }</pre>
1033
- </div>
1034
- </div>
1035
- </section>
1036
-
1037
- </main>
1038
- </div>
1039
- </div>
1040
-
1041
- <a href="#top" class="back-to-top">↑ TOPへ</a>
1042
-
1043
- <script>
1044
- // スムーススクロール
1045
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1046
- anchor.addEventListener('click', function (e) {
1047
- e.preventDefault();
1048
- const target = document.querySelector(this.getAttribute('href'));
1049
- if (target) {
1050
- target.scrollIntoView({
1051
- behavior: 'smooth'
1052
- });
1053
- }
1054
- });
1055
- });
1056
-
1057
- // 戻るボタンの表示制御
1058
- window.addEventListener('scroll', function() {
1059
- const backToTop = document.querySelector('.back-to-top');
1060
- if (window.pageYOffset > 300) {
1061
- backToTop.style.display = 'block';
1062
- } else {
1063
- backToTop.style.display = 'none';
1064
- }
1065
- });
1066
- </script>
1067
- </body>
1068
- </html>