Port the Pokédex list, entries and tab (#35)
The start menu's POKéDEX runs Pokedex in New mode: the list up to the last seen Pokémon, its cursor and page moves, and DisplayDexEntry with the category, number, footprint, and the height, weight and pages once caught. The Pokédex tab shows the same records from the loaded game. Order, entries and footprints are compared with the pinned PRET source. AREA, CRY, PRNT, the option and search screens, Old and A to Z modes and Unown mode remain. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
samyandClaude Opus 5.5 committed
1 parent
03aa913a94
commit
cdee576818
20 files changed
+1624
-29
No files matched your search
@@ -583,6 +583,7 @@ dialog h2 {
|
||||
.intro-screen:not([hidden]) ~ .minimap-overlay,
|
||||
.pokegear:not([hidden]) ~ .minimap-overlay,
|
||||
.trainer-card:not([hidden]) ~ .minimap-overlay,
|
||||
.pokedex-screen:not([hidden]) ~ .minimap-overlay,
|
||||
.options-screen:not([hidden]) ~ .minimap-overlay,
|
||||
.fly-map:not([hidden]) ~ .minimap-overlay {
|
||||
display: none;
|
||||
@@ -1371,6 +1372,219 @@ dialog dd {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
/* Pokedex: PREDEFPAL_POKEDEX's red frame around the list or the entry. */
|
||||
.pokedex-screen {
|
||||
--dex-red: #d65231;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
color: var(--ink);
|
||||
background: var(--dex-red);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.pokedex-screen[data-screen="list"] {
|
||||
grid-template-columns: auto minmax(0, 1fr) 8px;
|
||||
}
|
||||
.pokedex-screen[data-screen="entry"] {
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.pokedex-entry-top .pokedex-pic {
|
||||
width: min(22vw, 112px);
|
||||
}
|
||||
.pokedex-side,
|
||||
.pokedex-list,
|
||||
.pokedex-entry-top,
|
||||
.pokedex-text-box,
|
||||
.pokedex-actions {
|
||||
margin: 0;
|
||||
padding: 8px 10px;
|
||||
background: var(--cream);
|
||||
border: 5px double var(--ink);
|
||||
}
|
||||
.pokedex-side {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.pokedex-pic {
|
||||
width: min(28vw, 112px);
|
||||
aspect-ratio: 1;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
.pokedex-counts {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
gap: 2px 10px;
|
||||
margin: 0;
|
||||
}
|
||||
.pokedex-counts dt,
|
||||
.pokedex-counts dd {
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
}
|
||||
.pokedex-list {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
list-style: none;
|
||||
}
|
||||
.pokedex-list li,
|
||||
.pokedex-tab-list li,
|
||||
.pokedex-tab-list button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: pre;
|
||||
}
|
||||
.pokedex-list li::before,
|
||||
.pokedex-actions li::before {
|
||||
content: attr(data-mark);
|
||||
width: 1.2em;
|
||||
}
|
||||
/* The owned mark: a Poké Ball, or its empty space. */
|
||||
.pokedex-ball {
|
||||
flex: none;
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
border: 2px solid var(--ink);
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(var(--dex-red, #d65231) 45%, var(--ink) 45% 55%, #fff 55%);
|
||||
}
|
||||
.pokedex-ball.empty {
|
||||
visibility: hidden;
|
||||
}
|
||||
.pokedex-scrollbar {
|
||||
position: relative;
|
||||
background: var(--cream);
|
||||
border: 2px solid var(--ink);
|
||||
}
|
||||
.pokedex-scrollbar i {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 12px;
|
||||
background: var(--ink);
|
||||
}
|
||||
.pokedex-entry-top {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
}
|
||||
.pokedex-entry-details {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
white-space: pre;
|
||||
}
|
||||
.pokedex-footprint {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
.pokedex-text-box {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-content: start;
|
||||
gap: 10px;
|
||||
}
|
||||
.pokedex-text {
|
||||
margin: 0;
|
||||
white-space: pre-line;
|
||||
}
|
||||
.pokedex-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 14px;
|
||||
list-style: none;
|
||||
}
|
||||
.pokedex-actions li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* The Pokédex tab: the New mode list beside the selected entry. */
|
||||
.pokedex-panel {
|
||||
--dex-red: #d65231;
|
||||
}
|
||||
.pokedex-tab-status {
|
||||
max-width: 680px;
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
.pokedex-tab-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 18px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.pokedex-tab-list {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
background: var(--cream);
|
||||
border: 5px double var(--ink);
|
||||
}
|
||||
.pokedex-tab-list li {
|
||||
min-height: 32px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
.pokedex-tab-list button {
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pokedex-tab-list button[aria-pressed="true"]::after {
|
||||
content: " ◀";
|
||||
}
|
||||
.pokedex-tab-entry {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--cream);
|
||||
border: 5px double var(--ink);
|
||||
}
|
||||
.pokedex-tab-entry .pokedex-entry-top {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.pokedex-screen {
|
||||
gap: 4px;
|
||||
padding: 6px;
|
||||
}
|
||||
.pokedex-side,
|
||||
.pokedex-list,
|
||||
.pokedex-entry-top,
|
||||
.pokedex-text-box,
|
||||
.pokedex-actions {
|
||||
padding: 4px 8px;
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.pokedex-tab-body {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.pokedex-tab-list {
|
||||
max-height: 40vh;
|
||||
}
|
||||
}
|
||||
|
||||
/* _Option: one framed box of options, settings beside their labels. */
|
||||
.options-screen {
|
||||
position: absolute;
|
||||
|
||||
Reference in new issue
Block a user