diff --git a/CHANGELOG.md b/CHANGELOG.md index b7a23a1a..ee730dfe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,53 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## [1.8.0] - 2019-10-31 +# Added +- Drag and drop for vbox interactions can be used instead of single click / double click + +- Base white items and be directly equipped from vbox rather than going through the inventory + - Useful if you want to equip an item without further combining with colours + +- You can swap skills and specs between constructs without using the inventory + +# Changed + +- Construct life changed + - You now start with 800 green life (down from 950) + - You now start with 125 red life and blue life (up from 0) + +- Game phase layout + - Enemy team effects appear under your construct instead of next to it + - Game phase constructs line up symmetrically now + +- Mobile + - Tutorial is disabled for mobile view + - Landscape is now default view + - Vbox phase everything is now in one view + - Game constructs and animations are much larger in mobile view + +- Amplify + Now increases green power + +- Absorb + - Reduced duration and cooldown from 2T -> 1T (Absorption duration unchanged) + - Absorption damage is now based on all damage taken (previously only green damage taken) + - Now recharges blue life based on 95 / 120 / 155 blue power + +- Banish + Reduced cooldown to 1T + +- Decay + Removed cooldown + +- Haste / Hybrid + Fixed issue when hybridblast and hastestrike wouldn't trigger from upgraded + skills + +- Intercept + - Reduced duration to 1T down from 2T + - Reduced cooldown to 1T down from 2T + + ## [1.7.0] - 2019-10-31 # Added - Step by step tutorial diff --git a/VERSION b/VERSION index 081af9a1..afa2b351 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.7.1 \ No newline at end of file +1.8.0 \ No newline at end of file diff --git a/WORKLOG.md b/WORKLOG.md index d8ff9e55..7ecaec13 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -4,16 +4,7 @@ *PRODUCTION* * can't reset password without knowing password =\ - -* mobile - - force to landscape view and try make everything fit - OR - - 2 pages vbox / equip - - vbox page as current with equip button at bottom - - equip page with inventory and all 3 construct avatars - - click one of the avatars to expand out skill / spec slots - - show the info pane at the bottom or as an overlay - +* ws gzip encoding * mobile info page @@ -28,16 +19,14 @@ * combo rework - reduce number of items for creating t2/t3 items from 3 -> 2 - - add lost complexity by adding skill spec items + - add lost complexity by adding skill spec items - Created by combining a skill with corresponding spec - e.g. + e.g. - Strike + PowerRR -> StrikePower (Will be the power symbol with strike text under) - Construct does Y% more damage with Strike - - Strike + SpeedRR -> StrikeSpeed (strike has Y% more speed) + - Strike + SpeedRR -> StrikeSpeed (strike has Y% more speed) - Strike + LifeRR -> StrikeLife (Strike recharges X% of damage as red life) -* move item from one construct to another - * ACP * essential diff --git a/acp/package.json b/acp/package.json index 48ed247e..69013a0e 100644 --- a/acp/package.json +++ b/acp/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.7.1", + "version": "1.8.0", "description": "", "main": "index.js", "scripts": { diff --git a/client/assets/icons/mnml.png b/client/assets/icons/mnml.png index 068e30c1..d6e38299 100644 Binary files a/client/assets/icons/mnml.png and b/client/assets/icons/mnml.png differ diff --git a/client/assets/rotate.svg b/client/assets/rotate.svg new file mode 100644 index 00000000..b48ee399 --- /dev/null +++ b/client/assets/rotate.svg @@ -0,0 +1,2593 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + diff --git a/client/assets/styles/account.less b/client/assets/styles/account.less index adb879fe..ff102b69 100644 --- a/client/assets/styles/account.less +++ b/client/assets/styles/account.less @@ -4,7 +4,7 @@ grid-template-columns: 1fr 1fr 1fr 1fr; div { - padding-right: 2em; + padding-right: 1em; } button { diff --git a/client/assets/styles/colours.less b/client/assets/styles/colours.less index 13da2d0e..f3ea9020 100644 --- a/client/assets/styles/colours.less +++ b/client/assets/styles/colours.less @@ -169,3 +169,15 @@ button { color: @green; } } + +@keyframes rb-text { + 0% { + color: @red; + } + 50% { + color: @white; + } + 100% { + color: @blue; + } +} diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index 54bcb375..69e89c1b 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -96,6 +96,20 @@ aside { border-color: forestgreen; } } + + // all green + // &:enabled { + // background: forestgreen; + // color: black; + // border-color: forestgreen; + + // &:hover { + // color: forestgreen; + // border-color: forestgreen; + // background: 0; + // } + // } + } .team-page-ctrl { diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index f0eb98ec..d6bd7d30 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -10,6 +10,10 @@ // "opponent" // "target " // "player "; + + .skill-description { + font-size: 75%; + } } .game .team, .faceoff .team { @@ -43,8 +47,11 @@ .game-construct { align-items: flex-start; - grid-template-columns: 1fr 2fr; + grid-template-rows: 2fr min-content; grid-template-rows: 1fr; + grid-template-areas: + "right" + "left"; .right { height: 100%; @@ -79,12 +86,16 @@ justify-items: center; grid-template-columns: 1fr; - grid-template-rows: min-content 1fr; + grid-template-rows: 1fr 2fr; + grid-template-areas: + "left" + "right"; .left { width: 100%; display: grid; + grid-area: left; grid-template-columns: 1fr 2fr; grid-template-areas: "skills effects"; @@ -92,6 +103,7 @@ .right { display: grid; + grid-area: right; grid-template-rows: minmax(min-content, 1fr) min-content min-content; grid-template-areas: "avatar" @@ -121,6 +133,7 @@ } .skills { + z-index: 2; button { width: 100%; height: 2em; @@ -132,6 +145,7 @@ } .effects { + z-index: 2; grid-area: effects; white-space: nowrap; width: 100%; @@ -261,14 +275,6 @@ color: #a52a2a; } -.red-damage text { - fill: #a52a2a; -} - -.red-damage .stats { - /*border-top: 1px solid #a52a2a;*/ -} - .game-construct.blue-damage { color: #3050f8; opacity: 1; @@ -278,13 +284,6 @@ color: #3050f8; } -.blue-damage text { - fill: #3050f8; -} - -.blue-damage .stats { -} - .game-construct.green-damage { color: #1FF01F; opacity: 1; @@ -294,31 +293,8 @@ color: #1FF01F; } -.green-damage text { - fill: #1FF01F; -} - -.green-damage .stats { - /*border-top: 1px solid #1FF01F;*/ -} - -.game-construct.purple-damage { -/* filter: drop-shadow(0 0 0.2em purple); -*/ color: purple; - border-color: purple; -} - -.purple-damage button { - border: 1px solid purple; - color: purple; -} - -.purple-damage text { - fill: purple; -} - -.purple-damage .stats { - border-top: 1px solid purple; +.game-construct.rb-damage { + animation: rb-text 1s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite; } .game .img, .faceoff .img { diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index b6fc4c3f..fdf9f4cd 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -9,10 +9,6 @@ grid-template-areas: "vbox info" "constructs constructs"; - - hr { - grid-area: rule; - } } @media (max-width: 1920px) { @@ -88,65 +84,6 @@ border-right-width: 0; } -/* VBOX */ -.vbox { - align-content: space-between; - grid-area: vbox; - display: grid; - grid-template-rows: min-content min-content min-content; - grid-template-columns: 1fr min-content 1fr; - grid-template-areas: - "vbox varrow inventory" - "vbox varrow combiner"; -} - -.vbox-inventory { - grid-area: inventory; -} - -.vbox-combiner { - grid-area: combiner; - display: flex; - flex-flow: column; - justify-content: flex-end; -} - -.vbox-arrow, .vbox-arrow-mobile { - display: flex; - justify-content:center; - align-content:center; - flex-direction:column; - - margin: 1em 0.25em 0 0.25em; - grid-area: varrow; - font-size: 2em; - color: @gray-hint; -} - -.vbox-combiner button { - flex: 0; -} - - -.vbox-hdr { - display: flex; -} - -.vbox-hdr h3 { - flex: 1; -} - -.vbox-hdr .bits { - font-size: 2em; - line-height: 1em; - animation: bits 1s ease-out; -} - -.arrow { - grid-area: arrow; - color: @gray-hint; -} - @keyframes action { 0% { color: palegoldenrod; @@ -195,6 +132,7 @@ grid-area: skills; padding: 0 0.5em; margin-bottom: 0.75em; + z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); @@ -212,6 +150,7 @@ grid-area: specs; padding: 0 0.5em; margin-bottom: 0.75em; + z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 5445b158..7282cc94 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -142,6 +142,19 @@ section { border-color: forestgreen; } } + + // // all green + // button.ready:enabled { + // background: forestgreen; + // color: black; + // border-color: forestgreen; + + // &:hover { + // color: forestgreen; + // border-color: forestgreen; + // background: 0; + // } + // } } } diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 86ea5d38..99329d24 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -309,6 +309,7 @@ li { background-size: contain; background-repeat: no-repeat; background-position: center; + z-index: 0; // pointer-events: none; } @@ -316,4 +317,29 @@ li { width: 1px; height: 1px; padding: 0px; -} \ No newline at end of file +} + +#rotate { + display: none; + + z-index: 1000; + + position: fixed; + top: 0; + left: 0; + + width: 100vw; + height: 100vh; + background-image: url("./../rotate.svg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + + &.show { + display: flex; + } + + h1 { + flex: 1; + } +} diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index 14b4a3d5..c0e8798b 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -7,29 +7,29 @@ font-size: 8pt; padding: 0.25em; - .menu { - .logo { - display: none; - } - - .team { - height: 20em; - } - } - .instance { + grid-template-columns: 1fr; + grid-template-rows: min-content 1fr; + + grid-template-areas: + "vbox" + "constructs"; + svg { stroke-width: 1.25em; } } .game { - .team, #targeting, .resolving-skill { width: calc(90% - 3em); } .game-construct { + grid-template-columns: 1fr; + grid-template-rows: min-content 1fr; + + .avatar { grid-area: initial; position: absolute; @@ -43,6 +43,51 @@ height: 1em; } } + + .skills { + button[disabled] { + display: none; + } + } + + .effects { + font-size: 1em; + } + + .player { + .game-construct { + grid-template-areas: + "left" + "right"; + + .left { + grid-template-columns: 1fr; + grid-template-rows: 1fr min-content; + grid-template-areas: + "skills" + "effects"; + + } + } + } + + .opponent { + .game-construct { + grid-template-rows: 2fr min-content; + grid-template-rows: 1fr; + grid-template-areas: + "right" + "left"; + + .left { + grid-template-columns: min-content 1fr; + } + } + + .avatar { + bottom: 0px; + } + } } .instance-construct { @@ -62,10 +107,86 @@ } } - .opponent { - .avatar { - bottom: 0; + aside { + button { + margin-bottom: 0.5em; } } } } + + +// portrait menu +@media (max-width: 600px) { + #mnml { + grid-template-columns: 1fr; + grid-template-rows: 1fr; + grid-template-areas: + "main" + } + + section { + grid-template-columns: 1fr; + + .list { + grid-template-columns: 1fr 1fr; + + &.play { + grid-template-columns: 1fr; + } + } + + } + + .account { + grid-template-columns: 1fr; + + div { + padding: 0; + } + } + + .play-ctrl { + display: none; + } + + .menu { + height: auto; + display: block; + + .options { + display: grid; + grid-template-columns: repeat(2, 1fr); + + button:not(:last-child) { + border: 2px solid #222; + } + + button.logo { + grid-column-end: span 2; + border: none; + margin-right: 0; + margin-top: 0.5em; + background-position: center; + } + } + + .team { + grid-template-columns: 1fr; + + .construct { + height: 10em; + } + } + + .news { + padding: 0; + } + } + + section { + .list { + grid-template-columns: 1fr; + } + } +} \ No newline at end of file diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 95b77615..6b868716 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -22,10 +22,6 @@ grid-gap: 0.5em 1em; align-items: center; margin-bottom: 0.5em; - - button { - width: 100%; - } } .vbox-btn { @@ -73,6 +69,7 @@ button { height: 4em; margin: 0; + width: 100%; // text-transform: none; @@ -108,3 +105,62 @@ } } } + +/* VBOX */ +.vbox { + align-content: space-between; + grid-area: vbox; + display: grid; + grid-template-rows: min-content min-content min-content; + grid-template-columns: 1fr min-content 1fr; + grid-template-areas: + "vbox varrow inventory" + "vbox varrow combiner"; +} + +.vbox-inventory { + grid-area: inventory; +} + +.vbox-combiner { + grid-area: combiner; + display: flex; + flex-flow: column; + justify-content: flex-end; +} + +.vbox-arrow, .vbox-arrow-mobile { + display: flex; + justify-content:center; + align-content:center; + flex-direction:column; + + margin: 1em 0.25em 0 0.25em; + grid-area: varrow; + font-size: 2em; + color: @gray-hint; +} + +.vbox-combiner button { + flex: 0; +} + + +.vbox-hdr { + display: flex; +} + +.vbox-hdr h3 { + flex: 1; +} + +.vbox-hdr .bits { + font-size: 2em; + line-height: 1em; + animation: bits 1s ease-out; +} + +.arrow { + grid-area: arrow; + color: @gray-hint; +} diff --git a/client/index.html b/client/index.html index 760d2f1e..f9a2f86c 100644 --- a/client/index.html +++ b/client/index.html @@ -15,6 +15,8 @@ + + diff --git a/client/manifest.webmanifest b/client/manifest.webmanifest index 3d2582a5..4703d584 100644 --- a/client/manifest.webmanifest +++ b/client/manifest.webmanifest @@ -1,7 +1,7 @@ { - "name": "mnml", - "description": "mnml pvp atbs", - "short_name": "mnml", + "name": "MNML", + "description": "abstract strategy", + "short_name": "MNML", "icons": [ { "src": "./assets/icons/mnml.png", @@ -15,7 +15,8 @@ } ], "start_url": "/index.html", - "display": "fullscreen", + "display": "standalone", + "orientation": "landscape", "theme_color": "#000000", "background_color": "#000000" } \ No newline at end of file diff --git a/client/package.json b/client/package.json index f446e92c..fbdfadd2 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.7.1", + "version": "1.8.0", "description": "", "main": "index.js", "scripts": { diff --git a/client/src/animations.utils.jsx b/client/src/animations.utils.jsx index 8e2818c7..f749e43f 100644 --- a/client/src/animations.utils.jsx +++ b/client/src/animations.utils.jsx @@ -160,7 +160,7 @@ function getText(resolution) { if (type === 'Recharge') { const { red, blue } = event; - if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'purple-damage' }; + if (red > 0 && blue > 0) return { text: [`+${red}R +${blue}B`, ''], css: 'rb-damage' }; if (red > 0) return { text: [`+${red}R`, ''], css: 'red-damage' }; if (blue > 0) return { text: [`+${blue}B`, ''], css: 'blue-damage' }; return nullText; diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 75a1677d..b448ecec 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -153,7 +153,7 @@ class GameConstruct extends Component { } const effects = construct.effects.length ? construct.effects.map(c => -
hoverInfo(e, c)} onMouseOut={e => hoverInfo(e, null)} diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 0012c1b8..da843f8f 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -217,7 +217,10 @@ function Construct(props) { return ( -