Justin Edmund
a02a6c70aa
## Component Refactors: - Updated `CharacterHovercard` to improve over mastery and awakening section logic. - Refactored `CharacterModal` to streamline state management (rings, awakening, perpetuity) and object preparation. - Adjusted `CharacterUnit` for consistent over mastery handling. - Simplified `AwakeningSelectWithInput` to use awakening slug values and improve error handling. - Updated `RingSelect` to refine ring value syncing and index logic. - Modified `Party` and `PartyHead` to ensure consistent over mastery processing and proper preview URL construction. - Updated `WeaponModal` to align awakening value handling with the new slug-based approach. ## Styling and Configuration: - Improved grid layout and styling in the `WeaponRep` SCSS module. - Updated `next.config.js` rewrite rules to support new preview and character routes. - Added a new API endpoint (`pages/api/preview/[shortcode].tsx`) for fetching party preview images. ## Type Definitions: - Refined types in `types/GridCharacter.d.ts` and `types/index.d.ts` to reflect updated structures for rings, over mastery, and awakening.
67 lines
1.5 KiB
SCSS
67 lines
1.5 KiB
SCSS
// Overall container – never taller than $rep-height:
|
||
.rep {
|
||
height: $rep-height;
|
||
display: grid;
|
||
// First column: mainhand width = $rep-height * (200/420)
|
||
// Second column: weapons grid – its width will be auto (we calculate it below)
|
||
grid-template-columns:
|
||
calc(#{$rep-height} * (200 / 420))
|
||
auto;
|
||
gap: $unit-half;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* --- Mainhand image --- */
|
||
.mainhand {
|
||
background: var(--card-bg);
|
||
border-radius: 4px;
|
||
height: 100%;
|
||
width: 100%; // takes the grid column’s computed width
|
||
overflow: hidden;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain; // or "cover" if you prefer cropping
|
||
}
|
||
}
|
||
|
||
/* --- Weapons grid --- */
|
||
.weapons {
|
||
/* Reset default UL spacing */
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
height: 100%;
|
||
|
||
display: grid;
|
||
// We know there will be 3 columns and 3 rows.
|
||
// Each row's height is one-third of $rep-height:
|
||
// Subtract the 2 vertical gaps from the total height before dividing:
|
||
grid-template-rows: repeat(
|
||
3,
|
||
calc((#{$rep-height} - (2 * #{$unit-half})) / 3)
|
||
);
|
||
// Each column's width is calculated as: (cell height * (280/160))
|
||
grid-template-columns: repeat(
|
||
3,
|
||
calc((#{$rep-height} - (2 * #{$unit-half})) / 3 * (280 / 160))
|
||
);
|
||
gap: $unit-half;
|
||
}
|
||
|
||
/* Each grid cell (a .weapon) */
|
||
.weapon {
|
||
background: var(--card-bg);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
// Center the image (or placeholder) within the cell:
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|