diff --git a/CHANGELOG.md b/CHANGELOG.md index 4c6d3469..9a58fa60 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,16 @@ ## [1.8.3] - 2019-11-10 +### Added +- Preview combos by hovering over recipes +- Condensed recipe display + ### Fixed - Construct display on info / demo page ### Changed +- Automatically shows a preview of combo item when you have 3 items selected for combining + +- Only highlight the first available item slot when equipping + - Amplify no longer increase GreenPower - Purify diff --git a/WORKLOG.md b/WORKLOG.md index d406e805..52e0b9c8 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -12,9 +12,6 @@ * Buttons / General UI Theming * Front Page -* Don't drop out of game if you don't ready (esp. tutorial) -* Preview combo if you select 3 items - ## SOON * Graphical status effects instead of text * Improve colour contrast / buttons diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 23b17a8c..4bb23969 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -2,7 +2,7 @@ overflow: hidden; display: grid; grid-template-columns: 1fr minmax(min-content, 1fr); - grid-template-rows: minmax(min-content, 0.75fr) 1fr; + grid-template-rows: min-content 1fr; grid-template-areas: "vbox info" @@ -37,29 +37,34 @@ grid-area: info; display: grid; - grid-template-rows: 1fr 1fr; + grid-template-rows: 13em min-content; grid-template-areas: "item" "combos"; - .info-item { - flex: 1; - font-size: 90%; - } - .combos { display: grid; grid-template-columns: repeat(6, 1fr); + align-content: center; .table-button { display: grid; text-align: center; + align-content: center; + border-bottom: 2px solid #222; grid-template-areas: "item" "ingr"; + cursor: pointer; + &:hover { + color: whitesmoke; + background-color: @gray; + } + .item { + border-top: 2px solid #222; border-bottom: 2px solid #222; flex: 1; grid-area: item; @@ -68,15 +73,14 @@ div { border-right: 2px solid #222; - svg { vertical-align: middle; } } - &:last-child { + &:first-child { div { - border-right: 0; + border-left: 2px solid #222; } } } @@ -101,29 +105,6 @@ } } -.instance .combos { - margin: 0 0 1em 1em; - - table { - tr { - svg { - height: 1em; - } - } - } - - td.table-button { - padding:5px; - cursor: pointer; - animation: border-co 0.75s ease-in-out 0s infinite alternate; - &:hover { - color: whitesmoke; - background-color: @gray-hover; - } - - } -} - .instance .info figcaption { font-size: 1em; display: inline-block; diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index c0526730..71360599 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -147,19 +147,27 @@ class InfoComponent extends preact.Component { const vboxCombos = itemInfo.combos.filter(c => c.components.includes(info)); if (vboxCombos.length > 6 || vboxCombos.length === 0) return generalNotes; + const comboTable = vboxCombos.map((c, i) => { + const mouseOver = e => { + e.stopPropagation(); + this.setState({ comboItem: c.item }); + }; + const componentTable = (c.components.some(ci => ['Red', 'Blue', 'Green'].includes(ci))) + ? [