@kurot/cli 3.5.0 → 3.6.0

package/templates/game/resource/ui/skins/VSliderSkin.kui.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.VSliderSkin" minHeight="30" minWidth="25">
-    <Image id="track" height="100%" horizontalCenter="0" scale9Grid="1,1,4,4" source="track_png" width="7" />
-    <Image id="thumb" horizontalCenter="0" source="thumb_png" />
+<Skin xmlns="https://kurot.dev/ui/1" class="skins.VSliderSkin" states="disabled" minHeight="80" minWidth="44">
+    <Image id="track" height="100%" horizontalCenter="0" source="kui.track" width="8" />
+    <Image id="thumb" width="28" height="28" horizontalCenter="0" source="kui.slider_thumb" source.disabled="kui.slider_thumb_disabled" />
 </Skin>

package/templates/game/src/Main.ts

@@ -88,7 +88,7 @@ class Main extends UILayer {
 	/**
 	 * Create the game scene.
 	 *
-	 * Build a responsive view with EUI components and constraint-based layout.
+	 * Build a responsive view with Kurot UI components and constraint-based layout.
 	 */
 	private _createGameScene(): void {
 		// Responsive background

package/templates/game/template/web/index.html

@@ -24,60 +24,138 @@
 			display: block;
 		}
 
-		.web-loading {
+		.web-splash {
 			position: fixed;
 			inset: 0;
 			z-index: 10;
 			display: flex;
-			flex-direction: column;
 			align-items: center;
 			justify-content: center;
 			background: #000000;
 			transition: opacity 240ms ease;
 		}
 
-		.web-loading--hidden {
+		.web-splash--hidden {
 			opacity: 0;
 			pointer-events: none;
 		}
 
-		.web-loading__logo {
+		.web-splash__brand {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 28px;
+		}
+
+		.web-splash__caption {
+			color: rgba(205, 230, 255, 0.6);
+			font: 600 11px/1.4 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
+			letter-spacing: 0.04em;
+		}
+
+		.web-splash__mascot {
+			position: relative;
+			width: min(52vw, 50vh, 240px);
+			isolation: isolate;
+		}
+
+		.web-splash__mascot::before {
+			content: '';
+			position: absolute;
+			inset: -18%;
+			z-index: -1;
+			background: radial-gradient(circle, rgba(30, 145, 255, 0.14), transparent 68%);
+			animation: web-splash-glow 3.2s ease-in-out 1200ms infinite;
+		}
+
+		.web-splash__logo {
 			display: block;
-			width: min(42vw, 220px);
+			width: 100%;
 			height: auto;
-			animation: web-loading-pulse 1.8s ease-in-out infinite;
+			transform-origin: 50% 80%;
+			animation: web-splash-arrive 720ms ease-out both,
+				web-splash-play 3.2s ease-in-out 1200ms infinite;
+		}
+
+		.web-splash__spark {
+			position: absolute;
+			width: 14px;
+			height: 14px;
+			opacity: 0;
+			animation: web-splash-spark 900ms ease-out 260ms both,
+				web-splash-twinkle 3.2s ease-in-out 1200ms infinite;
+		}
+
+		.web-splash__spark::before,
+		.web-splash__spark::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			margin: auto;
+			border-radius: 999px;
+			background: #91e5ff;
+		}
+
+		.web-splash__spark::before {
+			width: 100%;
+			height: 3px;
+		}
+
+		.web-splash__spark::after {
+			width: 3px;
+			height: 100%;
+		}
+
+		.web-splash__spark--left {
+			left: -4%;
+			top: 24%;
+		}
+
+		.web-splash__spark--right {
+			right: -4%;
+			top: 52%;
+			width: 10px;
+			height: 10px;
+			animation-delay: 460ms, 1400ms;
+		}
+
+		@keyframes web-splash-arrive {
+			0% { transform: translateY(12px) scale(0.92) rotate(-4deg); }
+			60% { transform: translateY(-6px) scale(1.025) rotate(2deg); }
+			100% { transform: translateY(0) scale(1) rotate(0); }
 		}
 
-		.web-loading__indicator {
-			width: 26px;
-			height: 26px;
-			margin-top: 20px;
-			border: 2px solid rgba(143, 225, 235, 0.18);
-			border-top-color: #8fe1eb;
-			border-radius: 50%;
-			animation: web-loading-spin 800ms linear infinite;
+		@keyframes web-splash-play {
+			0%, 90%, 100% { transform: translateY(0) scale(1) rotate(0); }
+			12% { transform: translateY(3px) scale(1.04, 0.96) rotate(-2deg); }
+			28% { transform: translateY(-16px) scale(1.025) rotate(-5deg); }
+			46% { transform: translateY(2px) scale(1.035, 0.97) rotate(2deg); }
+			62% { transform: translateY(-9px) scale(1) rotate(4deg); }
+			80% { transform: translateY(0) scale(1) rotate(-1deg); }
 		}
 
-		.web-loading__text {
-			margin-top: 12px;
-			color: rgba(255, 255, 255, 0.58);
-			font: 11px/1 Arial, sans-serif;
-			letter-spacing: 0.28em;
-			text-indent: 0.28em;
+		@keyframes web-splash-spark {
+			0% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
+			35% { opacity: 0.85; transform: scale(1) rotate(10deg); }
+			100% { opacity: 0; transform: scale(0.6) rotate(30deg); }
 		}
 
-		@keyframes web-loading-pulse {
-			0%, 100% { opacity: 0.72; transform: scale(0.98); }
-			50% { opacity: 1; transform: scale(1); }
+		@keyframes web-splash-twinkle {
+			0%, 12% { opacity: 0; transform: scale(0.4) rotate(-20deg); }
+			28% { opacity: 0.9; transform: scale(1.15) rotate(10deg); }
+			48%, 100% { opacity: 0; transform: scale(0.6) rotate(35deg); }
 		}
 
-		@keyframes web-loading-spin {
-			to { transform: rotate(360deg); }
+		@keyframes web-splash-glow {
+			0%, 100% { opacity: 0.75; transform: scale(0.96); }
+			28% { opacity: 1; transform: scale(1.08); }
+			62% { opacity: 0.9; transform: scale(1.02); }
 		}
 
 		@media (prefers-reduced-motion: reduce) {
-			.web-loading__logo,
-			.web-loading__indicator {
+			.web-splash__mascot::before,
+			.web-splash__logo,
+			.web-splash__spark {
 				animation: none;
 			}
 		}
@@ -85,10 +163,15 @@
 	{{KUROT_IMPORT_MAP}}
 </head>
 <body>
-	<div id="webLoading" class="web-loading" role="status" aria-label="Loading">
-		<img class="web-loading__logo" src="logo.png" alt="">
-		<div class="web-loading__indicator" aria-hidden="true"></div>
-		<div class="web-loading__text">LOADING</div>
+	<div id="webSplash" class="web-splash" role="img" aria-label="Made with Kurot">
+		<div class="web-splash__brand">
+			<span class="web-splash__caption">Made with</span>
+			<div class="web-splash__mascot">
+				<img class="web-splash__logo" src="logo.png" alt="">
+				<span class="web-splash__spark web-splash__spark--left" aria-hidden="true"></span>
+				<span class="web-splash__spark web-splash__spark--right" aria-hidden="true"></span>
+			</div>
+		</div>
 	</div>
 	<canvas id="gameCanvas"
 		data-content-width="{{KUROT_STAGE_WIDTH}}"
@@ -99,10 +182,10 @@
 	<script type="module">
 		import './{{KUROT_ENTRY_SCRIPT}}';
 
-		const loading = document.getElementById('webLoading');
+		const splash = document.getElementById('webSplash');
 		requestAnimationFrame(() => {
-			loading.classList.add('web-loading--hidden');
-			loading.addEventListener('transitionend', () => loading.remove(), { once: true });
+			splash.classList.add('web-splash--hidden');
+			splash.addEventListener('transitionend', () => splash.remove(), { once: true });
 		});
 	</script>
 </body>

package/templates/game/resource/assets/ui/eui/eui.json

@@ -1,24 +0,0 @@
-{"file":"eui.png","frames":{
-"button_down_png":{"x":200,"y":76,"w":16,"h":16,"offX":0,"offY":0,"sourceW":16,"sourceH":16},
-"button_up_png":{"x":236,"y":58,"w":16,"h":16,"offX":0,"offY":0,"sourceW":16,"sourceH":16},
-"checkbox_select_disabled_png":{"x":127,"y":49,"w":23,"h":23,"offX":0,"offY":0,"sourceW":23,"sourceH":23},
-"checkbox_select_down_png":{"x":102,"y":49,"w":23,"h":23,"offX":0,"offY":0,"sourceW":23,"sourceH":23},
-"checkbox_select_up_png":{"x":77,"y":49,"w":23,"h":23,"offX":0,"offY":0,"sourceW":23,"sourceH":23},
-"checkbox_unselect_png":{"x":52,"y":49,"w":23,"h":23,"offX":0,"offY":0,"sourceW":23,"sourceH":23},
-"selected_png":{"x":218,"y":58,"w":16,"h":16,"offX":0,"offY":0,"sourceW":16,"sourceH":16},
-"border_png":{"x":0,"y":0,"w":177,"h":47,"offX":0,"offY":0,"sourceW":177,"sourceH":47},
-"header_png":{"x":200,"y":58,"w":16,"h":16,"offX":0,"offY":0,"sourceW":16,"sourceH":16},
-"thumb_pb_png":{"x":246,"y":16,"w":6,"h":6,"offX":0,"offY":0,"sourceW":6,"sourceH":6},
-"track_pb_png":{"x":246,"y":8,"w":6,"h":6,"offX":0,"offY":0,"sourceW":6,"sourceH":6},
-"radiobutton_select_disabled_png":{"x":152,"y":73,"w":22,"h":22,"offX":0,"offY":0,"sourceW":22,"sourceH":22},
-"radiobutton_select_down_png":{"x":176,"y":58,"w":22,"h":22,"offX":0,"offY":0,"sourceW":22,"sourceH":22},
-"radiobutton_select_up_png":{"x":152,"y":49,"w":22,"h":22,"offX":0,"offY":0,"sourceW":22,"sourceH":22},
-"radiobutton_unselect_png":{"x":176,"y":82,"w":22,"h":22,"offX":0,"offY":0,"sourceW":22,"sourceH":22},
-"roundthumb_png":{"x":246,"y":0,"w":6,"h":6,"offX":0,"offY":0,"sourceW":6,"sourceH":6},
-"track_sb_png":{"x":246,"y":40,"w":6,"h":6,"offX":0,"offY":0,"sourceW":6,"sourceH":6},
-"thumb_png":{"x":0,"y":49,"w":25,"h":25,"offX":0,"offY":0,"sourceW":25,"sourceH":25},
-"track_png":{"x":246,"y":24,"w":6,"h":6,"offX":0,"offY":0,"sourceW":6,"sourceH":6},
-"tracklight_png":{"x":246,"y":32,"w":6,"h":6,"offX":0,"offY":0,"sourceW":6,"sourceH":6},
-"handle_png":{"x":27,"y":49,"w":23,"h":23,"offX":0,"offY":0,"sourceW":23,"sourceH":23},
-"off_png":{"x":179,"y":0,"w":65,"h":27,"offX":0,"offY":0,"sourceW":65,"sourceH":27},
-"on_png":{"x":179,"y":29,"w":65,"h":27,"offX":0,"offY":0,"sourceW":65,"sourceH":27}}}

package/templates/game/resource/ui/skins/GroupSkin.kui.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.GroupSkin">
-    <Group id="contentGroup" height="100%" width="100%" />
-</Skin>

package/templates/game/resource/ui/skins/ImageSkin.kui.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ImageSkin">
-    <Image id="imageDisplay" height="100%" width="100%" />
-</Skin>

package/templates/game/resource/ui/skins/LabelSkin.kui.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.LabelSkin">
-    <Label id="labelDisplay" height="100%" size="14" textColor="#DFE6E9" width="100%" />
-</Skin>

package/templates/game/resource/ui/skins/ListSkin.kui.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ListSkin" minHeight="20" minWidth="20">
-    <Rect fillColor="#1A1A2E" height="100%" strokeColor="#0F3460" strokeWeight="1" width="100%" />
-    <Scroller id="scroller" height="100%" width="100%">
-        <DataGroup id="dataGroup" height="100%" width="100%" />
-    </Scroller>
-</Skin>

package/templates/game/resource/ui/skins/TabBarSkin.kui.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.TabBarSkin" minHeight="40" minWidth="100">
-    <Rect fillColor="#16213E" height="100%" width="100%" />
-    <DataGroup id="dataGroup" height="100%" width="100%" />
-</Skin>

package/templates/game/resource/ui/skins/ViewStackSkin.kui.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Skin xmlns="https://kurot.dev/ui/1" class="skins.ViewStackSkin">
-    <Group id="contentGroup" height="100%" width="100%" />
-</Skin>