1
0
Fork 0
forked from OpenNeo/impress

Show alt style name in the pose picker button when selected

To help with space, I'm just showing the word "Nostalgic" (or "???" if
it's from a series we don't recognize, this is hardcoded by ID), and
trusting that from context it will be obvious that it's the "Nostalgic
Faerie" case or whatever. (Moreover, in both the button and the select
we're omitting the species name, by similar reasoning!)

Note that this _still_ doesn't actually apply the style to the outfit
whatsoever; this is all just local state as we're continuing to play
with UI concepts. Actually applying it is probably next though! (Though
there's a couple more UI things I want to do, like some affordances to
clarify that a Style is applied and that Expression changes won't work.)
This commit is contained in:
Emi Matchu 2024-01-30 05:54:20 -08:00
parent 33bcabab83
commit 8e5939e408
5 changed files with 34 additions and 10 deletions

View file

@ -12,7 +12,7 @@ class AltStylesController < ApplicationController
format.html { render }
format.json {
render json: @alt_styles.as_json(
methods: [:adjective_name, :thumbnail_url],
methods: [:series_name, :adjective_name, :thumbnail_url],
)
}
end

View file

@ -87,6 +87,9 @@ function PosePicker({
const poseInfos = posesQuery.poseInfos;
const altStyles = altStylesQuery.data ?? [];
const [styleId, setStyleId] = React.useState(null);
const altStyle = altStyles.find((s) => s.id === styleId);
const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
// Resize the Popover when we toggle support mode, because it probably will
@ -174,6 +177,7 @@ function PosePicker({
<PopoverTrigger>
<PosePickerButton
pose={pose}
altStyle={altStyle}
isOpen={isOpen}
loading={loading}
{...props}
@ -234,7 +238,9 @@ function PosePicker({
</TabPanel>
<TabPanel paddingX="4" paddingY="0">
<StyleSelect
selectedStyleId={styleId}
altStyles={altStyles}
onChange={setStyleId}
initialFocusRef={initialFocusRef}
/>
<StyleExplanation />
@ -250,9 +256,12 @@ function PosePicker({
);
}
function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
const theme = useTheme();
const icon = altStyle != null ? twemojiSunglasses : getIcon(pose);
const label = altStyle != null ? altStyle.seriesName : getLabel(pose);
return (
<ClassNames>
{({ css, cx }) => (
@ -300,9 +309,9 @@ function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
{...props}
ref={ref}
>
<EmojiImage src={getIcon(pose)} alt="Style" />
<EmojiImage src={icon} alt="Style" />
<Box width=".5em" />
{getLabel(pose)}
{label}
<Box width=".5em" />
<ChevronDownIcon />
</Button>
@ -586,9 +595,12 @@ function PosePickerEmptyExplanation() {
);
}
function StyleSelect({ altStyles, initialFocusRef }) {
const [selectedStyleId, setSelectedStyleId] = React.useState(null);
function StyleSelect({
selectedStyleId,
altStyles,
onChange,
initialFocusRef,
}) {
const defaultStyle = { id: null, adjectiveName: "Default" };
const styles = [defaultStyle, ...altStyles];
@ -607,7 +619,7 @@ function StyleSelect({ altStyles, initialFocusRef }) {
key={altStyle.id}
altStyle={altStyle}
checked={selectedStyleId === altStyle.id}
onChange={setSelectedStyleId}
onChange={onChange}
inputRef={selectedStyleId === altStyle.id ? initialFocusRef : null}
/>
))}

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#3B88C3" d="M14.57 27.673c2.814-1.692 6.635-3.807 9.899-7.071 7.03-7.029 12.729-16.97 11.314-18.385C34.369.803 24.428 6.502 17.398 13.531c-3.265 3.265-5.379 7.085-7.071 9.899l4.243 4.243z"/><path fill="#C1694F" d="M.428 34.744s7.071 1.414 12.021-3.536c2.121-2.121 2.121-4.949 2.121-4.949l-2.829-2.829s-3.535.708-4.95 2.122c-1.414 1.414-2.518 4.232-2.888 5.598-.676 2.502-3.475 3.594-3.475 3.594z"/><path fill="#CCD6DD" d="M17.882 25.328l-5.168-5.168c-.391-.391-.958-.326-1.27.145l-1.123 1.705c-.311.471-.271 1.142.087 1.501l4.122 4.123c.358.358 1.03.397 1.501.087l1.705-1.124c.472-.311.536-.878.146-1.269z"/><path fill="#A0041E" d="M11.229 32.26c-1.191.769-1.826.128-1.609-.609.221-.751-.12-1.648-1.237-1.414-1.117.233-1.856-.354-1.503-1.767.348-1.393-1.085-1.863-1.754-.435-.582 1.16-1.017 2.359-1.222 3.115-.677 2.503-3.476 3.595-3.476 3.595s5.988 1.184 10.801-2.485z"/></svg>

Before

Width:  |  Height:  |  Size: 950 B

View file

@ -32,6 +32,7 @@ function normalizeAltStyle(altStyleData) {
speciesId: altStyleData.species_id,
colorId: altStyleData.color_id,
bodyId: altStyleData.body_id,
seriesName: altStyleData.series_name,
adjectiveName: altStyleData.adjective_name,
thumbnailUrl: altStyleData.thumbnail_url,
};

View file

@ -6,13 +6,25 @@ class AltStyle < ApplicationRecord
has_many :swf_assets, through: :parent_swf_asset_relationships
has_many :contributions, as: :contributed, inverse_of: :contributed
SERIES_ID_RANGES = {
nostalgic: (87249..87503)
}
def name
I18n.translate('pet_types.human_name', color_human_name: color.human_name,
species_human_name: species.human_name)
end
def series_name
if SERIES_ID_RANGES[:nostalgic].include?(id)
"Nostalgic"
else
"???"
end
end
def adjective_name
"Nostalgic #{color.human_name}"
"#{series_name} #{color.human_name}"
end
def thumbnail_url