Add actual carts and shit

Upgrade UI to Level 6

Balls
This commit is contained in:
2026-07-06 13:41:15 +02:00
parent f69e832503
commit 8b6c6235c2
17 changed files with 978 additions and 165 deletions
+18 -10
View File
@@ -1,14 +1,22 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<ui:VisualElement name="CollectionPanel" class="sub-panel hidden">
<ui:Label text="COLLECTION" class="screen-title" />
<ui:VisualElement class="collection-actions">
<ui:Button name="CollectionUnitsButton" text="units" class="terminal-button collection-action-button" />
<ui:Button name="CollectionCardsButton" text="cards" class="terminal-button collection-action-button" />
<ui:VisualElement name="CollectionPanel" class="screen-panel hidden">
<ui:VisualElement class="screen-frame">
<ui:VisualElement class="screen-frame-header">
<ui:Label class="screen-frame-title" />
</ui:VisualElement>
<ui:VisualElement class="screen-frame-content">
<ui:VisualElement class="collection-actions">
<ui:Button name="CollectionUnitsButton" text="units" class="collection-tab" />
<ui:Button name="CollectionCardsButton" text="cards" class="collection-tab" />
</ui:VisualElement>
<ui:VisualElement name="CollectionContent" class="collection-shell">
<ui:ScrollView name="CollectionList" class="collection-list" />
<ui:VisualElement name="CollectionDetail" class="collection-detail" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement class="screen-frame-footer">
<ui:Label class="screen-frame-hint" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="CollectionContent" class="collection-shell">
<ui:ScrollView name="CollectionList" class="collection-list" />
<ui:VisualElement name="CollectionDetail" class="collection-detail" />
</ui:VisualElement>
<ui:Button name="CollectionBackButton" text="Back" class="terminal-button back-button" />
</ui:VisualElement>
</ui:UXML>
+13 -5
View File
@@ -1,9 +1,17 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<ui:VisualElement name="GachaPanel" class="sub-panel hidden">
<ui:Label text="GACHA" class="screen-title" />
<ui:VisualElement name="GachaContent" class="stub-box">
<!-- TODO: Render summon options and results here when gacha logic exists. -->
<ui:VisualElement name="GachaPanel" class="screen-panel hidden">
<ui:VisualElement class="screen-frame">
<ui:VisualElement class="screen-frame-header">
<ui:Label class="screen-frame-title" />
</ui:VisualElement>
<ui:VisualElement class="screen-frame-content">
<ui:VisualElement name="GachaContent" class="stub-box">
<!-- TODO: Render summon options and results here when gacha logic exists. -->
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement class="screen-frame-footer">
<ui:Label class="screen-frame-hint" />
</ui:VisualElement>
</ui:VisualElement>
<ui:Button name="GachaBackButton" text="Back" class="terminal-button back-button" />
</ui:VisualElement>
</ui:UXML>
+160 -39
View File
@@ -239,13 +239,6 @@ Button {
font-size: 12px;
}
.screen-title {
color: var(--kp-primary);
font-size: 24px;
-unity-font-style: bold;
margin-bottom: 20px;
}
.featured-empty {
flex-grow: 1;
flex-direction: row;
@@ -449,17 +442,53 @@ Button {
color: var(--kp-amber);
}
.sub-panel {
.screen-panel {
flex-grow: 1;
align-items: center;
min-height: 0;
background-color: var(--kp-bg-solid);
}
.screen-frame {
flex-grow: 1;
min-height: 0;
background-color: var(--kp-bg-solid);
padding: 30px 0 18px 0;
}
.screen-frame-header {
min-height: 34px;
justify-content: center;
padding: 48px;
border-bottom-width: 1px;
border-bottom-color: var(--kp-border);
}
.screen-frame-title {
color: var(--kp-muted);
font-size: 17px;
}
.screen-frame-content {
flex-grow: 1;
min-height: 0;
padding-top: 18px;
padding-bottom: 14px;
}
.screen-frame-footer {
min-height: 32px;
justify-content: center;
border-top-width: 1px;
border-top-color: var(--kp-border);
}
.screen-frame-hint {
color: var(--kp-muted);
}
.stub-scroll,
.stub-box {
width: 560px;
height: 300px;
flex-grow: 1;
min-height: 0;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
@@ -476,38 +505,55 @@ Button {
}
.collection-shell {
width: 760px;
height: 330px;
flex-grow: 1;
min-height: 0;
flex-direction: row;
}
#RunSetupContent {
flex-grow: 1;
min-height: 0;
}
.run-setup-shell {
flex-grow: 1;
min-height: 0;
flex-direction: row;
}
.collection-actions {
width: 760px;
flex-direction: row;
justify-content: flex-end;
justify-content: flex-start;
margin-bottom: 10px;
}
.collection-action-button {
width: 110px;
height: 34px;
margin-top: 0;
margin-left: 8px;
.collection-tab {
width: 92px;
height: 30px;
margin-right: 10px;
border-bottom-width: 2px;
border-bottom-color: transparent;
background-color: transparent;
color: var(--kp-muted);
}
.collection-action-button.selected {
background-color: var(--kp-primary);
color: var(--kp-bg);
.collection-tab.selected {
color: var(--kp-primary);
border-bottom-color: var(--kp-primary);
}
.collection-tab:hover {
color: var(--kp-primary);
}
.run-setup-hint {
width: 760px;
margin-top: -12px;
margin-top: 0;
margin-bottom: 12px;
}
.collection-list {
width: 300px;
width: 38%;
min-width: 330px;
margin-right: 16px;
border-left-width: 1px;
border-right-width: 1px;
@@ -522,6 +568,8 @@ Button {
.collection-detail {
flex-grow: 1;
min-width: 0;
overflow: hidden;
padding: 16px;
border-left-width: 1px;
border-right-width: 1px;
@@ -536,6 +584,7 @@ Button {
.collection-detail-readout {
flex-direction: row;
margin-top: 12px;
}
.collection-detail-values {
@@ -543,6 +592,14 @@ Button {
min-width: 0;
}
.collection-detail .kv-value {
max-width: none;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.collection-row {
min-height: 44px;
padding: 8px 10px;
@@ -574,12 +631,19 @@ Button {
.collection-detail-description {
color: var(--kp-primary);
white-space: normal;
margin-top: 14px;
margin-top: 4px;
margin-bottom: 12px;
}
.package-list {
margin-top: 18px;
min-width: 0;
flex-grow: 1;
}
.package-scroll {
flex-grow: 1;
min-height: 0;
margin-top: 18px;
}
.package-header {
@@ -633,18 +697,25 @@ Button {
flex-grow: 1;
min-width: 0;
color: var(--kp-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-unity-text-overflow-position: end;
white-space: normal;
}
.package-meta {
min-width: 96px;
width: 92px;
min-width: 92px;
color: var(--kp-muted);
-unity-text-align: upper-right;
}
.loadout-card-row .package-name {
flex-grow: 1;
}
.loadout-card-row .package-meta {
width: 104px;
min-width: 104px;
}
.package-description {
min-width: 0;
color: var(--kp-muted);
@@ -653,6 +724,60 @@ Button {
margin-top: 2px;
}
.run-readout {
min-height: 110px;
max-height: 128px;
flex-direction: row;
}
.run-readout .ascii-art,
.run-readout .ascii-placeholder {
width: 100px;
min-width: 100px;
height: 100px;
}
.run-readout-copy {
flex-grow: 1;
min-width: 0;
padding-left: 14px;
}
.boot-command-row {
min-height: 42px;
margin-top: 12px;
border-left-color: var(--kp-primary);
}
.boot-command-row.disabled-row {
opacity: 0.45;
}
.collection-equip-row {
margin-top: 18px;
}
ScrollView .unity-scroll-view__vertical-scroller,
ScrollView .unity-scroll-view__horizontal-scroller {
width: 6px;
background-color: var(--kp-panel);
}
ScrollView .unity-scroller__low-button,
ScrollView .unity-scroller__high-button {
display: none;
}
ScrollView .unity-base-slider__tracker {
background-color: var(--kp-panel);
border-radius: 0;
}
ScrollView .unity-base-slider__dragger {
background-color: var(--kp-muted);
border-radius: 0;
}
.modal-overlay {
position: absolute;
left: 0;
@@ -762,12 +887,8 @@ Button {
color: var(--kp-bg);
}
.back-button {
width: 220px;
}
.settings-row {
width: 420px;
width: 100%;
flex-direction: row;
align-items: center;
justify-content: space-between;
+14 -5
View File
@@ -1,5 +1,6 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<Style src="MainMenu.uss" />
<ui:Template name="ScreenFrame" src="ScreenFrame.uxml" />
<ui:Template name="CollectionScreen" src="CollectionScreen.uxml" />
<ui:Template name="GachaScreen" src="GachaScreen.uxml" />
<ui:Template name="SettingsScreen" src="SettingsScreen.uxml" />
@@ -124,14 +125,22 @@
</ui:VisualElement>
<ui:Instance template="CollectionScreen" />
<ui:VisualElement name="RunSetupPanel" class="sub-panel hidden">
<ui:Label text="NEW RUN" class="screen-title" />
<ui:Label text="choose 4 distro cards before booting a run" class="collection-detail-muted run-setup-hint" />
<ui:VisualElement name="RunSetupContent" class="collection-shell">
<ui:VisualElement name="RunSetupPanel" class="screen-panel hidden">
<ui:VisualElement class="screen-frame">
<ui:VisualElement class="screen-frame-header">
<ui:Label class="screen-frame-title" />
</ui:VisualElement>
<ui:VisualElement class="screen-frame-content">
<ui:Label text="choose distro packages before booting a run" class="collection-detail-muted run-setup-hint" />
<ui:VisualElement name="RunSetupContent" class="run-setup-shell">
<ui:ScrollView name="RunSetupList" class="collection-list" />
<ui:VisualElement name="RunSetupDetail" class="collection-detail" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement class="screen-frame-footer">
<ui:Label class="screen-frame-hint" />
</ui:VisualElement>
</ui:VisualElement>
<ui:Button name="RunSetupBackButton" text="Back" class="terminal-button back-button" />
</ui:VisualElement>
<ui:Instance template="GachaScreen" />
<ui:Instance template="SettingsScreen" />
+14 -6
View File
@@ -1,10 +1,18 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" editor-extension-mode="False">
<ui:VisualElement name="SettingsPanel" class="sub-panel hidden">
<ui:Label text="SETTINGS" class="screen-title" />
<ui:VisualElement class="settings-row disabled-row">
<ui:Label text="Audio" class="settings-label" />
<ui:Toggle name="AudioToggle" text="TODO" enabled="false" class="settings-toggle" />
<ui:VisualElement name="SettingsPanel" class="screen-panel hidden">
<ui:VisualElement class="screen-frame">
<ui:VisualElement class="screen-frame-header">
<ui:Label class="screen-frame-title" />
</ui:VisualElement>
<ui:VisualElement class="screen-frame-content">
<ui:VisualElement class="settings-row disabled-row">
<ui:Label text="Audio" class="settings-label" />
<ui:Toggle name="AudioToggle" text="TODO" enabled="false" class="settings-toggle" />
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement class="screen-frame-footer">
<ui:Label class="screen-frame-hint" />
</ui:VisualElement>
</ui:VisualElement>
<ui:Button name="SettingsBackButton" text="Back" class="terminal-button back-button" />
</ui:VisualElement>
</ui:UXML>