REM-Client 83348aac: character outfits - look editor (sex, face, clothes, hat, eyewear, comm helmet with portraits), larger pilot figure, wardrobe (F1 menu, docked), REM Coin shop looks, women in THN scenes (rem-server fb12ea6)

BUILD_INFO.txt

@@ -1,6 +1,6 @@
 REM-Client test build (64-bit)
-date:    2026-11-11 01:16
+date:    2026-11-11 20:18
-commit:  8a8aa1e3 (main)
+commit:  83348aac (main)
-subject: Account switch: the ID is held in memory, not in the registry
+subject: Looks: the wardrobe, shop looks and locked shop parts
 tree:    clean
 build:   OK

EXE/remui/charcreate.rml

@@ -5,31 +5,53 @@
     <style>
         .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
         .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
-        .colm.list { flex: 1; }
+        .colm.look { flex: 0 0 27%; }
-        .colm.side { flex: 0 0 32%; margin-left: 18dp; }
+        .colm.fig { flex: 1; margin: 0 18dp; }
-        .colm.fig { flex: 0 0 24%; margin-left: 18dp; }
+        .colm.side { flex: 0 0 30%; }
-        #figure { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
+        #figure { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; border: 1dp #3d6d9655; }
         .fig .hint { text-align: center; margin-top: 6dp; }
-        .starts { flex: 1; overflow-y: auto; }
+        .sexes { display: flex; flex-direction: row; margin-bottom: 10dp; }
-        .region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 10dp 0 6dp 0; }
+        .sexes .btn { flex: 1; margin-right: 6dp; text-align: center; }
-        .start { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
+        .sexes .btn.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c1a; }
+        .kinds { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8dp; }
+        .kind { padding: 5dp 10dp; margin: 0 6dp 6dp 0; border: 1dp #3d6d96; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; }
+        .kind:hover { border-color: #5cc8f0; color: #cfe3f2; }
+        .kind.on { border-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; }
+        .tiles { flex: 1; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; padding-right: 4dp; }
+        /* two per row: the width holds the padding and the border (border-box) */
+        .tile { box-sizing: border-box; width: 48.5%; margin-bottom: 7dp; height: 40dp; padding: 4dp 6dp; border: 1dp #3d6d9688; background-color: #5cc8f00c; display: flex; align-items: center; font-size: 13dp; }
+        .tile:hover { border-color: #5cc8f0; }
+        .tile.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
+        .tile .tn { flex: 1; color: #cfe3f2; }
+        .tile.selected .tn { color: #f2b13c; }
+        /* faces and clothes: the portrait above the name */
+        .tiles.portraits .tile { height: 112dp; flex-direction: column; justify-content: flex-start; padding: 5dp 4dp; }
+        .tile img { width: 76dp; height: 76dp; margin-bottom: 4dp; decorator: vertical-gradient(#16263a #0a121d); }
+        .tile { position: relative; }
+        .hint.bad { color: #ef6a5b; }
+        .tile.locked img { opacity: 0.55; }
+        .tile .lock { position: absolute; top: 3dp; right: 3dp; padding: 1dp 4dp; font-size: 10dp; letter-spacing: 1dp; color: #0a121d; background-color: #f2b13c; }
+        .tiles.portraits .tile .tn { flex: 0 0 auto; text-align: center; font-size: 12dp; line-height: 1.15; }
+        .tile.selected .tn { color: #f2b13c; }
+        .lookfoot { display: flex; flex-direction: row; margin-top: 8dp; }
+        .starts { flex: 1; overflow-y: auto; min-height: 120dp; }
+        .region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 8dp 0 4dp 0; }
+        .start { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; margin-bottom: 5dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
         .start:hover { border-left-color: #5cc8f0; }
         .start.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
-        .start img { width: 38dp; height: 38dp; margin-right: 12dp; }
+        .start img { width: 30dp; height: 30dp; margin-right: 10dp; }
         .start .txt { flex: 1; min-width: 0; }
-        .start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
+        .start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
         .start.selected .n { color: #f2b13c; }
-        .start .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .start .k { font-size: 12dp; color: #8197ad; margin-top: 1dp; }
-        .start .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
+        .start .m { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 13dp; }
-        .namebox { margin-bottom: 14dp; }
+        .namebox { margin-bottom: 12dp; }
         .namebox .label { margin-bottom: 6dp; }
-        .detail { padding: 12dp; flex: 1; display: flex; flex-direction: column; min-height: 0; background-color: #5cc8f008; }
+        .detail { padding: 10dp; margin-top: 10dp; max-height: 34%; display: flex; flex-direction: column; min-height: 0; background-color: #5cc8f008; border: 1dp #3d6d9655; }
-        .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
+        .detail .facts { display: flex; flex-direction: row; }
-        .detail .k { font-size: 14dp; color: #8197ad; margin-top: 2dp; }
+        .detail .facts div { margin-right: 20dp; }
-        .detail .facts { display: flex; flex-direction: row; margin: 10dp 0; }
+        .detail .facts .v { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 15dp; }
-        .detail .facts div { margin-right: 24dp; }
+        .detail .d { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.4; font-size: 13dp; margin-top: 8dp; }
-        .detail .facts .v { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 16dp; }
-        .detail .d { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; }
     </style>
 </head>
 <body class="window" data-model="charcreate">
@@ -41,8 +63,42 @@
     <div class="win-main">
         <div class="content">
             <div class="split">
-                <div class="colm list">
+                <div class="colm look">
-                    <h3 style="margin-bottom: 4dp;">Where do you start?</h3>
+                    <h3 style="margin-bottom: 8dp;">Your look</h3>
+                    <div class="hint" data-if="look_wait">Asking the server for its outfits ... a server without them dresses the pilot in the start costume.</div>
+                    <div class="hint" data-if="!look_wait &amp;&amp; !has_look">This server offers no outfits: the pilot wears the start costume.</div>
+                    <div data-if="has_look" class="colm" style="flex: 1;">
+                        <div class="sexes">
+                            <div class="btn" data-class-on="!female" data-action="sex" data-arg="male">Male</div>
+                            <div class="btn" data-class-on="female" data-class-disabled="!has_female" data-action="sex" data-arg="female">Female<div class="tip" data-if="!has_female">The server offers no women's faces and clothes yet.</div></div>
+                        </div>
+                        <div class="kinds">
+                            <div class="kind" data-class-on="tab == 'head'" data-action="tab" data-arg="head">Face</div>
+                            <div class="kind" data-class-on="tab == 'body'" data-action="tab" data-arg="body">Clothes</div>
+                            <div class="kind" data-class-on="tab == 'hat'" data-action="tab" data-arg="hat">Hat</div>
+                            <div class="kind" data-class-on="tab == 'eyewear'" data-action="tab" data-arg="eyewear">Eyewear</div>
+                            <div class="kind" data-class-on="tab == 'helmet'" data-action="tab" data-arg="helmet">Comm helmet</div>
+                        </div>
+                        <div class="tiles portraits">
+                            <div class="tile" data-for="t : tiles" data-class-selected="t.selected" data-class-locked="t.locked" data-action="part" data-attr-data-arg="t.key"><span class="lock" data-if="t.locked">SHOP</span><img data-if="t.icon != ''" data-attr-src="t.icon"/><span class="tn">{{ t.name }}</span></div>
+                        </div>
+                        <div class="hint" data-if="tab == 'helmet'">The comm helmet shows on the comm screen only.</div>
+                        <div class="hint bad" data-if="look_locked">A part of this look is sold in the REM Coin shop - buy it there first, or pick another.</div>
+                        <div class="lookfoot">
+                            <div class="btn" data-action="random">Random look<div class="tip">A random face, clothes and extras of the ones the server offers.</div></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm fig">
+                    <div id="figure"></div>
+                    <div class="hint">drag to turn</div>
+                </div>
+                <div class="colm side">
+                    <div class="namebox">
+                        <div class="label">Pilot name</div>
+                        <input class="text" type="text" data-value="name" maxlength="23" placeholder="Your name in Sirius"/>
+                    </div>
+                    <h3 style="margin-bottom: 2dp;">Where do you start?</h3>
                     <div class="hint" data-if="count == 0">The server offers no start.</div>
                     <div class="starts">
                         <div data-for="r : regions">
@@ -54,20 +110,7 @@
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="colm fig">
-                    <h3 style="margin-bottom: 8dp;">Your pilot</h3>
-                    <div id="figure"></div>
-                    <div class="hint">drag to turn</div>
-                </div>
-                <div class="colm side">
-                    <div class="namebox">
-                        <div class="label">Pilot name</div>
-                        <input class="text" type="text" data-value="name" maxlength="23" placeholder="Your name in Sirius"/>
-                    </div>
                     <div class="detail" data-if="has_pick">
-                        <div class="n">{{ pick.base }}</div>
-                        <div class="k">{{ pick_region }}</div>
                         <div class="facts">
                             <div><div class="label">Ship</div><div class="v">{{ pick.ship }}</div></div>
                             <div><div class="label">Credits</div><div class="v">{{ pick.money }}</div></div>
@@ -75,7 +118,7 @@
                         <div class="d">{{ pick_desc }}</div>
                     </div>
                     <div class="actions" style="margin-top: 12dp;">
-                        <div class="btn primary" data-class-disabled="name == '' || !has_pick || !ready" data-action="create">Create pilot<div class="tip">Creates the pilot at the picked start; the server may refuse a name that is taken.</div></div>
+                        <div class="btn primary" data-class-disabled="name == '' || !has_pick || !ready || (has_look &amp;&amp; look_locked)" data-action="create">Create pilot<div class="tip">Creates the pilot at the picked start, in the look on the left; the server may refuse a name that is taken.</div></div>
                     </div>
                 </div>
             </div>

EXE/remui/charselect.rml

@@ -40,13 +40,13 @@
         .btn.launch { display: flex; flex-direction: row; align-items: center; justify-content: center; height: 64dp; margin-bottom: 10dp;
                       font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 24dp; letter-spacing: 3dp; }
         .btn.launch img { width: 44dp; height: 44dp; margin-right: 12dp; }
-        #figure { flex: 1; min-height: 160dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
+        #figure { flex: 1; min-height: 300dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; border: 1dp #3d6d9655; }
         .side .hint.turn { text-align: center; margin: 4dp 0dp 8dp 0dp; }
-        .detail { padding: 12dp; margin-bottom: 10dp; background-color: #5cc8f008; }
+        .detail { padding: 10dp 12dp; margin-bottom: 10dp; background-color: #5cc8f008; }
         .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; }
         .detail .k { font-size: 14dp; color: #8197ad; }
         .detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; }
-        .motd { flex: 0 0 22%; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; background-color: #5cc8f008; }
+        .motd { flex: 0 0 26%; margin-top: 4dp; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; background-color: #5cc8f008; }
         .changeid { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24dp 12dp; margin-bottom: 12dp; background-color: #f2b13c10; }
         .changeid .hint { margin-bottom: 12dp; }
         .changeid .btn { font-size: 18dp; padding: 10dp 24dp; }
@@ -109,6 +109,8 @@
                             <div class="r"><div class="m">{{ c.money }}</div></div>
                         </div>
                     </div>
+                    <h3 style="margin: 10dp 0 8dp 0;">Message of the day</h3>
+                    <div class="motd">{{ motd }}</div>
                 </div>
                 <!-- the picked pilot and what can be done with it -->
                 <div class="colm side">
@@ -122,11 +124,9 @@
                         <div class="s">{{ pick_stats }}</div>
                     </div>
                     <div class="detail" data-if="!other_id && !has_pick"><div class="k">Pick a pilot.</div></div>
-                    <div class="actions" style="margin-bottom: 10dp;">
+                    <div class="actions">
                         <div class="btn danger" data-class-disabled="other_id || !has_pick || !ready" data-action="delete">Delete<div class="tip">Deletes the picked pilot for good (you are asked first).</div></div>
                     </div>
-                    <h3 style="margin-bottom: 8dp;">Message of the day</h3>
-                    <div class="motd">{{ motd }}</div>
                 </div>
             </div>
         </div>

EXE/remui/shop.rml

@@ -138,7 +138,7 @@
                         <div class="txt" data-if="pick_text != ''">{{ pick_text }}</div>
                         <div class="row"><span class="l">Price</span><span class="pb coin" data-if="pick_coins != ''">{{ pick_coins }}</span><span class="pb cr" data-if="pick_credits != ''">{{ pick_credits }}</span></div>
                         <div class="row" data-if="pick_limit != ''"><span class="l">{{ pick_limit }}</span></div>
-                        <div class="row">
+                        <div class="row" data-if="!pick_single">
                             <span class="l">Amount</span>
                             <div class="stepper"><span class="sb" data-action="count" data-arg="-1">-</span><span class="v">{{ pick_count }}</span><span class="sb" data-action="count" data-arg="1">+</span><span class="sb" data-action="count" data-arg="10" style="margin-left: 4dp;">+10</span></div>
                         </div>

EXE/remui/wardrobe.rml

@@ -0,0 +1,78 @@
+<rml>
+<head>
+    <title>Wardrobe</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        body.window { width: 860dp; height: 640dp; margin: auto; }
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.look { flex: 0 0 46%; }
+        .colm.fig { flex: 1; margin-left: 18dp; align-items: center; }
+        .figbox { flex: 1; width: 100%; display: flex; justify-content: center; align-items: center; decorator: vertical-gradient(#0a1424 #05080d); border: 1dp #3d6d9655; }
+        .figbox img { width: 330dp; height: 330dp; }
+        .sexes { display: flex; flex-direction: row; margin-bottom: 10dp; }
+        .sexes .btn { flex: 1; margin-right: 6dp; text-align: center; }
+        .sexes .btn.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c1a; }
+        .kinds { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8dp; }
+        .kind { padding: 5dp 10dp; margin: 0 6dp 6dp 0; border: 1dp #3d6d96; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; }
+        .kind:hover { border-color: #5cc8f0; color: #cfe3f2; }
+        .kind.on { border-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; }
+        .tiles { flex: 1; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; padding-right: 4dp; }
+        .tile { position: relative; box-sizing: border-box; width: 32%; margin-bottom: 7dp; height: 112dp; padding: 5dp 4dp; border: 1dp #3d6d9688; background-color: #5cc8f00c; display: flex; flex-direction: column; align-items: center; font-size: 12dp; }
+        .tile:hover { border-color: #5cc8f0; }
+        .tile.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
+        .tile img { width: 76dp; height: 76dp; margin-bottom: 4dp; decorator: vertical-gradient(#16263a #0a121d); }
+        .tile.locked img { opacity: 0.55; }
+        .tile .tn { text-align: center; color: #cfe3f2; line-height: 1.15; }
+        .tile.selected .tn { color: #f2b13c; }
+        .tile .lock { position: absolute; top: 3dp; right: 3dp; padding: 1dp 4dp; font-size: 10dp; letter-spacing: 1dp; color: #0a121d; background-color: #f2b13c; }
+        .hint.bad { color: #ef6a5b; }
+        .status { margin-top: 8dp; min-height: 18dp; }
+        .status.bad { color: #ef6a5b; }
+    </style>
+</head>
+<body class="window" data-model="wardrobe">
+    <div class="win-head">
+        <span class="title">WARDROBE</span><span class="sl">\\\</span>
+        <span class="spacer"></span>
+        <div class="btn" data-action="close">Close</div>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="split">
+                <div class="colm look">
+                    <div class="hint" data-if="look_wait">Asking the server for its outfits ...</div>
+                    <div class="hint" data-if="!look_wait &amp;&amp; !has_look">This server offers no outfits.</div>
+                    <div data-if="has_look" class="colm" style="flex: 1;">
+                        <div class="sexes">
+                            <div class="btn" data-class-on="!female" data-action="sex" data-arg="male">Male</div>
+                            <div class="btn" data-class-on="female" data-class-disabled="!has_female" data-action="sex" data-arg="female">Female</div>
+                        </div>
+                        <div class="kinds">
+                            <div class="kind" data-class-on="tab == 'head'" data-action="tab" data-arg="head">Face</div>
+                            <div class="kind" data-class-on="tab == 'body'" data-action="tab" data-arg="body">Clothes</div>
+                            <div class="kind" data-class-on="tab == 'hat'" data-action="tab" data-arg="hat">Hat</div>
+                            <div class="kind" data-class-on="tab == 'eyewear'" data-action="tab" data-arg="eyewear">Eyewear</div>
+                            <div class="kind" data-class-on="tab == 'helmet'" data-action="tab" data-arg="helmet">Comm helmet</div>
+                        </div>
+                        <div class="tiles">
+                            <div class="tile" data-for="t : tiles" data-class-selected="t.selected" data-class-locked="t.locked" data-action="part" data-attr-data-arg="t.key"><span class="lock" data-if="t.locked">SHOP</span><img data-if="t.icon != ''" data-attr-src="t.icon"/><span class="tn">{{ t.name }}</span></div>
+                        </div>
+                        <div class="hint" data-if="tab == 'helmet'">The comm helmet shows on the comm screen only.</div>
+                        <div class="hint bad" data-if="look_locked">A part of this look is sold in the REM Coin shop - buy it there first.</div>
+                    </div>
+                </div>
+                <div class="colm fig">
+                    <div class="figbox"><img data-if="figure_src != ''" data-attr-src="figure_src"/></div>
+                    <div class="status" data-class-bad="status_bad">{{ status }}</div>
+                    <div class="actions" style="margin-top: 8dp;">
+                        <div class="btn" data-action="random">Random<div class="tip">A random look of the parts you may wear.</div></div>
+                        <div class="btn" data-action="reset">As now<div class="tip">Back to the look your pilot wears now.</div></div>
+                        <div class="btn primary" data-class-disabled="busy || !has_look || look_locked || same" data-action="wear">Wear this look<div class="tip">Your pilot changes into this look (docked only). Free - shop looks once bought are yours.</div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</rml>