From: xangelo Date: Fri, 15 Nov 2024 07:44:40 +0000 (-0500) Subject: chore(inventory,stores): cleaned up the styling X-Git-Tag: v0.4.3~6 X-Git-Url: https://git.xangelo.ca/?a=commitdiff_plain;h=9de8b378692cfa53b31b1b38f7f8aaa034273942;p=risinglegends.git chore(inventory,stores): cleaned up the styling The styling for both inventory and stores started the same and then slowly diverged. This commit cleans up the duplication and makes the styling more consistent across both pages. It also creates a generic nav-based listing that can be used for whatever else needs a list. --- diff --git a/public/assets/css/base.css b/public/assets/css/base.css new file mode 100644 index 0000000..39e515a --- /dev/null +++ b/public/assets/css/base.css @@ -0,0 +1,84 @@ +/* Base styles and resets */ +@font-face { + font-family: 'Breathe Fire'; + src: url('/assets/font/BreatheFire.woff2') format('woff2'), + url('/assets/font/BreatheFire.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +html { + height: 100vh; +} + +body { + margin: 1rem auto 2rem; + background-color: #eee; + width: 100%; + max-width: 724px; +} + +b { + font-weight: bold; +} + +a { + color: #a20b00; +} + +select { + padding: 0.3rem; +} + +input { + border: 1px solid #000; +} + +p { + margin-bottom: 1rem; +} + +p:last-child { + margin-bottom: 0; +} + +.hidden { + display: none !important; +} + +.flex { + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +header { + display: flex; + align-items: flex-start; + border: 0; + margin-bottom: 1rem; +} + +h1 { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 1rem; +} + +h2 { + font-weight: bold; + margin: 1rem; + font-size: 1.3rem; +} + +h3 { + font-weight: bold; + margin: 1rem; + font-size: 1rem; +} + +footer { + margin-top: 2rem; + text-align: center; +} \ No newline at end of file diff --git a/public/assets/css/buttons.css b/public/assets/css/buttons.css new file mode 100644 index 0000000..61425b2 --- /dev/null +++ b/public/assets/css/buttons.css @@ -0,0 +1,42 @@ +/* Button styles */ +button { + cursor: pointer; + color: #fff; + background: url(data:image/png;base64,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), linear-gradient(to bottom, #D4AF37 0%, #C5A028 100%); + box-shadow: inset 0px 0px 1px 2px rgba(255, 255, 255, 0.3); + padding: 0.5rem 1rem; + font-weight: bold; + text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.3); + border: solid 1px #6d251c; +} + +button.red { + background: #a20b00; +} + +button.red:hover { + background: #b20b00; +} + +button.green { + background: url(data:image/png;base64,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), linear-gradient(to bottom, #41d437 0%, #0a9404 100%); +} + +button.green:hover { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==), linear-gradient(to bottom, #32e027 0%, #10a209 100%); +} + +button:active { + position: relative; + top: 1px; +} + +button:disabled, +button:disabled:hover { + background: #aaa; + cursor: not-allowed; +} + +button:focus { + outline: none; +} \ No newline at end of file diff --git a/public/assets/css/chat.css b/public/assets/css/chat.css new file mode 100644 index 0000000..e581446 --- /dev/null +++ b/public/assets/css/chat.css @@ -0,0 +1,51 @@ +#chat { + border: solid 1px #6d251c; +} + +#chat-messages { + max-height: 250px; + overflow: auto; +} + +.chat-message { + line-height: 1.2rem; + padding: 0.2rem 0.3rem 0.3rem; +} + +.chat-message:nth-child(even) { + background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(196, 177, 149, 0.8) 100%); +} + +.chat-message .from { + font-weight: bold; +} + +.chat-message .from::after { + content: ':'; +} + +#chat-form { + display: flex; +} + +#chat-form input { + flex-grow: 8; + padding: 0.3rem; + outline: none; + border-width: 1px 0 0; + background: transparent; +} + +#chat-form input:focus { + outline: none; +} + +#chat-form button { + border-right-width: 0px; + border-bottom-width: 0px; + font-weight: bold; +} + +#chat-form button:active { + top: 0; +} \ No newline at end of file diff --git a/public/assets/css/combat.css b/public/assets/css/combat.css new file mode 100644 index 0000000..ff3b23d --- /dev/null +++ b/public/assets/css/combat.css @@ -0,0 +1,34 @@ +/* Combat related styles */ +#fight-container { + margin: 0 auto; +} + +#defender-info { + display: flex; + width: 70%; + margin: 0 auto 1rem; +} + +.monster-identifier { + text-align: left; +} + +#defender-name { + font-weight: bold; +} + +.Elder #defender-name { + color: #2b2b2b; +} + +.Skittish #defender-name { + color: #8700ff; +} + +.Brute #defender-name { + color: #a91313; +} + +#fight-results { + margin-top: 1rem; +} \ No newline at end of file diff --git a/public/assets/css/explore.css b/public/assets/css/explore.css new file mode 100644 index 0000000..d0bab4a --- /dev/null +++ b/public/assets/css/explore.css @@ -0,0 +1,87 @@ +#explore { + text-align: center; + background-repeat: no-repeat; + background-size: cover; + padding: 2rem 0rem 2rem !important; + line-height: 1.3rem; + border: solid 1px #6d251c; +} + +.city-title-wrapper { + filter: drop-shadow(0 0 10px black); + position: relative; + z-index: 1; +} + +.city-title:before { + position: absolute; + content: ' '; + z-index: 1; + top: 2px; + left: 2px; + right: 2px; + bottom: 2px; + background: transparent; + border: solid 2px #ffa500; + clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0); +} + +.city-title { + font-family: 'Breathe Fire', monospace; + font-size: 1.5rem; + letter-spacing: 1rem; + display: inline-block; + padding: 0.5rem 0.5rem 0.5rem 1.5rem; + color: #fff; + border: inset 3px rgba(88, 15, 15, 0.4); + text-shadow: 1px -1px 0px #522626; + background: #bc3915 url(data:image/png;base64,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); + position: relative; + clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0); + box-shadow: 0 0 4px 4px black; +} + +.city-details { + position: relative; + padding: 1rem 1px 2rem; + margin: 0 auto; + width: 90%; + background-image: url(data:image/png;base64,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); + background-color: #f7f4dd; + box-shadow: 0 0 10px black; + position: relative; + top: -13px; + border: solid 1px #6d251c; +} + + +.city-details.flex>div { + margin: 1rem; +} + +.service-in-town { + padding: 0 1rem; +} + + +.location-name { + display: flex; + align-items: center; + justify-content: center; +} + +.location-name span { + color: #846945; + text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7); + margin: 0 1rem; +} + +.location-name:before, +.location-name:after { + background-color: #846945; + height: 2px; + flex: 1; + content: ' '; + width: 4rem; + box-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7); +} \ No newline at end of file diff --git a/public/assets/css/game.css b/public/assets/css/game.css index aa6064b..80edc64 100644 --- a/public/assets/css/game.css +++ b/public/assets/css/game.css @@ -1,11 +1,14 @@ -@font-face { - font-family: 'Breathe Fire'; - src: url('/assets/font/BreatheFire.woff2') format('woff2'), - url('/assets/font/BreatheFire.woff') format('woff'); - font-weight: normal; - font-style: normal; - font-display: swap; -} +@import 'base.css'; +@import 'buttons.css'; +@import 'modal.css'; +@import 'tabs.css'; +@import 'chat.css'; +@import 'profile.css'; +@import 'inventory.css'; +@import 'skills.css'; +@import 'explore.css'; +@import 'store.css'; +@import 'combat.css'; .equipment-slot { position: relative; @@ -78,17 +81,6 @@ transparent 100%); } -html { - height: 100vh; -} - -body { - margin: 1rem auto 2rem; - background-color: #eee; - width: 100%; - max-width: 724px; -} - .title-font { font-family: 'Breathe Fire', monospace; } @@ -132,76 +124,6 @@ body { background-image: url(data:image/png;base64,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); } -b { - font-weight: bold; -} - -a { - color: #a20b00; -} - -select { - padding: 0.3rem; -} - -input { - border: 1px solid #000; -} - -button { - cursor: pointer; - color: #fff; - background: url(data:image/png;base64,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), linear-gradient(to bottom, #D4AF37 0%, #C5A028 100%); - box-shadow: inset 0px 0px 1px 2px rgba(255, 255, 255, 0.3); - padding: 0.5rem 1rem; - font-weight: bold; - text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.3); - border: solid 1px #6d251c; -} - -button.red { - background: #a20b00; -} - -button.red:hover { - background: #b20b00; -} - -button.green { - background: url(data:image/png;base64,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), linear-gradient(to bottom, #41d437 0%, #0a9404 100%); -} - -button.green:hover { - background: url(data:image/png;base64,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), linear-gradient(to bottom, #32e027 0%, #10a209 100%); -} - -button:active { - position: relative; - top: 1px; -} - -button:disabled, -button:disabled:hover { - background: #aaa; - cursor: not-allowed; -} - -button:focus { - outline: none; -} - -.hidden { - display: none !important; -} - -p { - margin-bottom: 1rem; -} - -p:last-child { - margin-bottom: 0; -} - #announcements, #signup-prompt { padding: 1rem; @@ -219,39 +141,6 @@ p:last-child { display: flex; } -#modal-wrapper { - width: 100%; - height: 100%; - backdrop-filter: blur(10px); -} - -dialog::backdrop { - backdrop-filter: blur(3px); - -} - -dialog { - background-color: #fff; - border: solid 1px #000; - padding: 0.5rem; - width: 300px; - top: 20%; - font-size: 0.9rem; -} - -dialog .modal-header { - font-weight: bold; - text-align: right; -} - -dialog .actions { - text-align: right; -} - -dialog .close-modal { - cursor: pointer; -} - @media(max-width: 650px) { #signup { flex-direction: column; @@ -306,13 +195,6 @@ button.error { border: solid 1px #6d251c; } -header { - display: flex; - align-items: flex-start; - border: 0; - margin-bottom: 1rem; -} - #player-info { width: 100%; } @@ -373,260 +255,6 @@ header { line-height: 110%; } - -nav { - text-align: center; - padding: 1rem 0; -} - -nav li { - display: inline-block; - list-style: none; -} - -nav li:before { - content: '['; -} - -nav li:after { - content: ']'; -} - -nav a { - text-decoration: none; -} - -nav a.active { - font-weight: bold; - text-decoration: underline; -} - -nav.filter { - margin: 0; - text-align: right; - border: 0; - padding: 0; - position: relative; - bottom: 5px; -} - -nav.filter a { - border-bottom-width: 0; - z-index: 1; - padding: 0.6rem; - position: relative; -} - -nav.filter a.active { - background-color: #fff; - border: solid #6d251c; - border-width: 1px 1px 0; - z-index: 4; -} - -.filter-container .listing { - border: solid 1px #6d251c; - z-index: 2; - position: relative; - background-color: #fff; -} - -nav.filter-result { - display: none; -} - -nav.filter-result.active { - display: block !important; -} - -#inventory-section { - width: 100%; -} - -#inventory-section .listing { - top: 2px; -} - -.inventory-listing { - min-height: 2rem; -} - -.inventory-ITEMS { - display: flex; -} - -.player-item { - position: relative; - cursor: pointer; - margin: 2px; - border: solid 1px #000; - width: 64px; - height: 64px; - overflow: hidden; -} - -.player-item img { - filter: grayscale(40%); -} - -.player-item img:hover { - filter: none; -} - -.player-item .amount { - font-weight: bold; - position: absolute; - bottom: 0; - right: 0; - background-color: rgba(255, 255, 255, 0.7); - font-size: 0.8rem; - padding: 4px; - border-radius: 3px 0 0 0; -} - -.item-modal-overview { - display: flex; -} - -.item-modal-overview .icon { - width: 64px; - height: 64px; - margin: 0 1rem 1rem 0; -} - -.item-modal-overview .icon img { - width: 64px; - height: 64px; -} - -.item-modal-overview .name { - margin-top: 0; - font-weight: bold; - margin: 0 1rem 0.8rem 0; -} - -.item-modal-overview p { - margin: 1rem; -} - -.tab { - display: none; -} - -.tab.active { - display: block; -} - -#main-nav { - margin-bottom: 1rem; - position: relative; -} - -#main-nav section { - min-height: 344px; -} - -.stat-breakdown th { - font-weight: bold; - text-align: right; - background-color: #6d251c; - color: #fff; - background-image: url(data:image/png;base64,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); -} - -.stat-breakdown th, -.stat-breakdown td { - padding: 0.5rem; - min-width: 100px; - line-height: 1rem; -} - -.stat-breakdown tr:nth-child(even) { - background-color: #c7b7a1; -} - -.increase-stat { - padding: 1px 6px; -} - -#explore { - text-align: center; - background-repeat: no-repeat; - background-size: cover; - padding: 2rem 0rem 2rem !important; - line-height: 1.3rem; - border: solid 1px #6d251c; -} - -.city-title-wrapper { - filter: drop-shadow(0 0 10px black); - position: relative; - z-index: 1; -} - -.city-title:before { - position: absolute; - content: ' '; - z-index: 1; - top: 2px; - left: 2px; - right: 2px; - bottom: 2px; - background: transparent; - border: solid 2px #ffa500; - clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0); -} - -.city-title { - font-family: 'Breathe Fire', monospace; - font-size: 1.5rem; - letter-spacing: 1rem; - display: inline-block; - padding: 0.5rem 0.5rem 0.5rem 1.5rem; - color: #fff; - border: inset 3px rgba(88, 15, 15, 0.4); - text-shadow: 1px -1px 0px #522626; - background: #bc3915 url(data:image/png;base64,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); - position: relative; - clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0); - box-shadow: 0 0 4px 4px black; -} - -#fight-container { - margin: 0 auto; -} - -#defender-info { - display: flex; - width: 70%; - margin: 0 auto 1rem; -} - -.monster-identifier { - text-align: left; -} - -#defender-name { - font-weight: bold; -} - -.Elder #defender-name { - color: #2b2b2b; -} - -.Skittish #defender-name { - color: #8700ff; -} - -.Brute #defender-name { - color: #a91313; -} - -#fight-results { - margin-top: 1rem; -} - - #map { width: 75%; margin: 0rem auto 1rem; @@ -635,51 +263,6 @@ nav.filter-result.active { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 30%); } -.city-details { - position: relative; - padding: 1rem 1px 2rem; - margin: 0 auto; - width: 90%; - background-image: url(data:image/png;base64,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); - background-color: #f7f4dd; - box-shadow: 0 0 10px black; - position: relative; - top: -13px; - border: solid 1px #6d251c; -} - -.flex { - display: flex; - justify-content: space-around; - flex-wrap: wrap; -} - -.city-details.flex>div { - margin: 1rem; -} - -.service-in-town { - padding: 0 1rem; -} - -h1 { - font-size: 1.5rem; - font-weight: bold; - margin-bottom: 1rem; -} - -h2 { - font-weight: bold; - margin: 1rem; - font-size: 1.3rem; -} - -h3 { - font-weight: bold; - margin: 1rem; - font-size: 1rem; -} - #travelling { padding: 2rem; } @@ -695,181 +278,6 @@ h3 { margin-bottom: 1rem; } - -#explore .shop-inventory-listing { - margin: 2rem auto 1rem; - width: 90%; -} - -.location-name { - display: flex; - align-items: center; - justify-content: center; -} - -.location-name span { - color: #846945; - text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7); - margin: 0 1rem; -} - -.location-name:before, -.location-name:after { - background-color: #846945; - height: 2px; - flex: 1; - content: ' '; - width: 4rem; - drop-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7); -} - -.shop-inventory-listing .listing { - background-color: #fff; -} - -.store-list { - display: flex; - text-align: left; - padding: 0.5rem; -} - -.store-list:nth-child(even) { - background-color: #f2f0ec; -} - -.store-list .details { - padding: 0 0.4rem; - line-height: 1rem; - flex-grow: 2; -} - -.store-list .details>div { - margin-bottom: 4px; -} - -.store-list .name { - font-weight: bold; - background: linear-gradient(90deg, #ecd4a8 0%, transparent 40%); - border-bottom: 2px solid #6d251c; - padding: 4px; -} - -.requirement-title { - font-weight: bold; - text-transform: capitalize; -} - -.store-cost { - margin-top: 0.5rem; -} - -.store-icon { - width: 64px; - height: calc(64px + 27px); - padding: 0; - background-repeat: no-repeat; - background-size: contain; - position: relative; - margin-right: 0.5rem; -} - - -.inventory-icon-wrapper { - position: relative; - margin-right: 0.5rem; -} - -.inventory-icon { - width: 64px; - height: 64px; - padding: 0; - background-repeat: no-repeat; - background-size: contain; - position: relative; - border: solid 1px #6d251c; - box-sizing: border-box; -} - -#inventory-section .store-list .name { - font-size: 0.9rem; -} - -#inventory-section .store-list .requirements { - font-size: 0.8rem; -} - -#inventory-section .store-list .requirements::before { - content: 'REQ: '; - font-weight: bold; - text-transform: uppercase; -} - -#inventory-section .store-list .stat-mods { - font-size: 0.8rem; -} - -.store-actions { - width: 100%; - position: absolute; - bottom: 0; -} - -.store-actions button { - width: 100%; - padding: 0.3rem 0.5rem; -} - -.inventory-actions { - width: 64px; - margin-top: 0.2rem; -} - -.inventory-actions button { - width: 100%; - font-size: 0.7rem; - padding: 0.3rem 0.5rem; -} - -#inventory-page { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: 1rem; -} - -#character-equipment-placement { - border-spacing: 0; - width: 192px; -} - -#character-equipment-placement td { - display: table-cell; - min-width: 64px; - max-width: 64px; - min-height: 64px; - max-height: 64px; - width: 64px; - height: 64px; - border: solid 1px #6d251c; - padding: 0; - text-align: center; - vertical-align: bottom; - font-size: 0.7rem; - background-repeat: no-repeat; - overflow: hidden; - background-size: contain; -} - -#extra-inventory-info { - margin-top: 1rem; -} - -.filter-container .listing { - max-height: 400px; - width: 100%; - overflow: auto; -} - @media(max-width: 650px) { #time-of-day { padding: 0 1rem; @@ -896,95 +304,6 @@ h3 { } } -#skill-list { - width: 100%; -} - -#skill-list .skill-level { - font-size: 2rem; - vertical-align: middle; - text-align: center; - border: solid 1px #000; -} - -#skill-list .skill-details table { - width: 100%; -} - -#skill-list .skill-title { - text-align: left; - padding: 0.6rem 0.6rem 0 0.6rem; - line-height: 1.2rem; - font-weight: bold; -} - -#skill-list .skill-description { - padding: 0 0.6rem 0.6rem; - line-height: 1.2rem; -} - -#skill-list .skill-exp { - text-align: right; - padding-right: 0.6rem; -} - -#skill-list tr:nth-child(even) .skill-details { - background-color: #c7b7a1; -} - - -#chat { - border: solid 1px #6d251c; -} - -#chat-messages { - max-height: 250px; - overflow: auto; -} - -.chat-message { - line-height: 1.2rem; - padding: 0.2rem 0.3rem 0.3rem; -} - -.chat-message:nth-child(even) { - background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(196, 177, 149, 0.8) 100%); -} - -.chat-message .from { - font-weight: bold; -} - -.chat-message .from::after { - content: ':'; -} - -#chat-form { - display: flex; -} - -#chat-form input { - flex-grow: 8; - padding: 0.3rem; - outline: none; - border-width: 1px 0 0; - background: transparent; -} - -#chat-form input:focus { - outline: none; -} - -#chat-form button { - border-right-width: 0px; - border-bottom-width: 0px; - font-weight: bold; -} - -#chat-form button:active { - top: 0; -} - #game-footer { display: flex; justify-content: space-between; @@ -1002,39 +321,6 @@ h3 { height: 1rem; } -footer { - margin-top: 2rem; - text-align: center; -} - -/* tooltip styling */ -@media(pointer: coarse), (hover: none) { - .tooltip[title] { - position: realtive; - display: flex; - justify-content: center; - } - - .tooltip[title]:focus::after { - content: attr(title); - background-color: #fff; - color: #222; - font-size: 14px; - padding: 8px 12px; - max-height: 100px; - height: fit-content; - width: fit-content; - position: absolute; - text-align: center; - left: 50%; - transform: translate(-100%, 0%) scale(1); - transform-origin: top; - display: block; - box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05); - overflow: auto; - } -} - .dungeon-room-description { padding: 1rem; } \ No newline at end of file diff --git a/public/assets/css/inventory.css b/public/assets/css/inventory.css new file mode 100644 index 0000000..bb56a94 --- /dev/null +++ b/public/assets/css/inventory.css @@ -0,0 +1,99 @@ +#inventory-page { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; +} + +#inventory-section { + width: 100%; + + .listing { + min-height: 2rem; + top: 2px; + + .inventory-items { + display: flex; + } + } +} + + +#character-equipment-placement { + border-spacing: 0; + width: 192px; + + td { + display: table-cell; + min-width: 64px; + max-width: 64px; + min-height: 64px; + max-height: 64px; + width: 64px; + height: 64px; + border: solid 1px #6d251c; + padding: 0; + text-align: center; + vertical-align: bottom; + font-size: 0.7rem; + background-repeat: no-repeat; + overflow: hidden; + background-size: contain; + } +} + + +.player-item { + position: relative; + cursor: pointer; + margin: 2px; + border: solid 1px #000; + width: 64px; + height: 64px; + overflow: hidden; + + img { + filter: grayscale(40%); + + &:hover { + filter: none; + } + } + + .amount { + font-weight: bold; + position: absolute; + bottom: 0; + right: 0; + background-color: rgba(255, 255, 255, 0.7); + font-size: 0.8rem; + padding: 4px; + border-radius: 3px 0 0 0; + + } +} + +.item-modal-overview { + display: flex; + + .icon { + width: 64px; + height: 64px; + margin: 0 1rem 1rem 0; + + img { + width: 64px; + height: 64px; + } + } + + .name { + margin-top: 0; + font-weight: bold; + margin: 0 1rem 0.8rem 0; + } + + p { + margin: 1rem; + } +} \ No newline at end of file diff --git a/public/assets/css/modal.css b/public/assets/css/modal.css new file mode 100644 index 0000000..8237b25 --- /dev/null +++ b/public/assets/css/modal.css @@ -0,0 +1,58 @@ +#modal-wrapper { + width: 100%; + height: 100%; + backdrop-filter: blur(10px); +} + +dialog::backdrop { + backdrop-filter: blur(3px); +} + +dialog { + background-color: #fff; + border: solid 1px #000; + padding: 0.5rem; + width: 300px; + font-size: 0.9rem; +} + +dialog .modal-header { + font-weight: bold; + text-align: right; +} + +dialog .actions { + text-align: right; +} + +dialog .close-modal { + cursor: pointer; +} + +/* tooltip styling */ +@media(pointer: coarse), (hover: none) { + .tooltip[title] { + position: realtive; + display: flex; + justify-content: center; + } + + .tooltip[title]:focus::after { + content: attr(title); + background-color: #fff; + color: #222; + font-size: 14px; + padding: 8px 12px; + max-height: 100px; + height: fit-content; + width: fit-content; + position: absolute; + text-align: center; + left: 50%; + transform: translate(-100%, 0%) scale(1); + transform-origin: top; + display: block; + box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05); + overflow: auto; + } +} \ No newline at end of file diff --git a/public/assets/css/profile.css b/public/assets/css/profile.css new file mode 100644 index 0000000..e293053 --- /dev/null +++ b/public/assets/css/profile.css @@ -0,0 +1,26 @@ +.stat-breakdown th { + font-weight: bold; + text-align: right; + background-color: #6d251c; + color: #fff; + background-image: url(data:image/png;base64,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); +} + +.stat-breakdown th, +.stat-breakdown td { + padding: 0.5rem; + min-width: 100px; + line-height: 1rem; +} + +.stat-breakdown tr:nth-child(even) { + background-color: #c7b7a1; +} + +.increase-stat { + padding: 1px 6px; +} + +#extra-inventory-info { + margin-top: 1rem; +} \ No newline at end of file diff --git a/public/assets/css/skills.css b/public/assets/css/skills.css new file mode 100644 index 0000000..7a1b7c1 --- /dev/null +++ b/public/assets/css/skills.css @@ -0,0 +1,35 @@ +#skill-list { + width: 100%; +} + +#skill-list .skill-level { + font-size: 2rem; + vertical-align: middle; + text-align: center; + border: solid 1px #000; +} + +#skill-list .skill-details table { + width: 100%; +} + +#skill-list .skill-title { + text-align: left; + padding: 0.6rem 0.6rem 0 0.6rem; + line-height: 1.2rem; + font-weight: bold; +} + +#skill-list .skill-description { + padding: 0 0.6rem 0.6rem; + line-height: 1.2rem; +} + +#skill-list .skill-exp { + text-align: right; + padding-right: 0.6rem; +} + +#skill-list tr:nth-child(even) .skill-details { + background-color: #c7b7a1; +} \ No newline at end of file diff --git a/public/assets/css/store.css b/public/assets/css/store.css new file mode 100644 index 0000000..9473b8b --- /dev/null +++ b/public/assets/css/store.css @@ -0,0 +1,4 @@ +#explore .shop-inventory-listing { + margin: 2rem auto 1rem; + width: 90%; +} \ No newline at end of file diff --git a/public/assets/css/tabs.css b/public/assets/css/tabs.css new file mode 100644 index 0000000..88d871f --- /dev/null +++ b/public/assets/css/tabs.css @@ -0,0 +1,167 @@ +nav { + text-align: center; + padding: 1rem 0; + + li { + display: inline-block; + list-style: none; + + &:before { + content: '['; + } + + &:after { + content: ']'; + } + } + + a { + text-decoration: none; + + &.active { + font-weight: bold; + text-decoration: underline; + } + } + + &.filter { + margin: 0; + text-align: right; + border: 0; + padding: 0; + position: relative; + bottom: 5px; + + a { + border-bottom-width: 0; + z-index: 1; + padding: 0.6rem; + position: relative; + + &.active { + background-color: #fff; + border: solid #6d251c; + border-width: 1px 1px 0; + z-index: 4; + } + } + } + +} + +.filter-container { + .listing { + border: solid 1px #6d251c; + z-index: 2; + position: relative; + background-color: #fff; + max-height: 400px; + width: 100%; + overflow: auto; + + .filter-result { + display: none; + + &.active { + display: block !important; + } + } + } +} + +#main-nav { + margin-bottom: 1rem; + position: relative; + + section { + min-height: 344px; + } +} + +.tab { + display: none; + + &.active { + display: block; + } +} + + +.list-item { + display: flex; + text-align: left; + padding: 0.5rem; + + &:nth-child(even) { + background-color: #f2f0ec; + } + + .icon-wrapper { + position: relative; + margin-right: 0.5rem; + + .icon { + width: 64px; + height: 64px; + padding: 0; + background-repeat: no-repeat; + background-size: contain; + position: relative; + border: solid 1px #6d251c; + box-sizing: border-box; + } + + .actions { + width: 64px; + margin-top: 0.2rem; + + button { + width: 100%; + font-size: 0.7rem; + padding: 0.3rem 0.5rem; + } + + } + } + + + .details { + padding: 0 0.4rem; + line-height: 1rem; + flex-grow: 2; + + &>div { + margin-bottom: 4px; + } + + .name { + font-weight: bold; + background: linear-gradient(90deg, #ecd4a8 0%, transparent 40%); + border-bottom: 2px solid #6d251c; + padding: 4px; + font-size: 0.9rem; + } + + .stat-mods { + font-size: 0.8rem; + } + + .requirements { + font-size: 0.8rem; + + &::before { + content: 'REQ: '; + font-weight: bold; + text-transform: uppercase; + } + + .requirement-title { + font-weight: bold; + text-transform: capitalize; + } + } + + + } + +} \ No newline at end of file diff --git a/src/server/views/inventory.ts b/src/server/views/inventory.ts index cb2208b..14cf7a2 100644 --- a/src/server/views/inventory.ts +++ b/src/server/views/inventory.ts @@ -92,11 +92,11 @@ function renderStatBoost(name: string, val: number | string): string { function renderInventoryItem(player: Player, item: EquippedItemDetails , action: (item: EquippedItemDetails) => string): string { const itemLevel = levelFromExp(item.current_exp); - return `
-
-
+ return `
+
+
-
+
${action(item)}
diff --git a/src/server/views/stores.ts b/src/server/views/stores.ts index dcbdcaf..8147f96 100644 --- a/src/server/views/stores.ts +++ b/src/server/views/stores.ts @@ -34,16 +34,18 @@ function renderStatBoost(name: ItemStatBoostAbbr, val: number | string, title?: function renderRequirement(name: string, val: number | string, currentVal?: number): string { let colorIndicator = ''; - if(currentVal) { + if (currentVal && typeof val === 'number') { colorIndicator = currentVal >= val ? 'success' : 'error'; } return `${name}: ${val.toLocaleString()}`; } function renderShopItem(item: (ShopItem & Item), action: (item: (ShopItem & Item)) => string): string { - return `
-
-
${action(item)}
+ return `
+
+
+
+
${action(item)}
${item.name}
@@ -86,7 +88,7 @@ export function renderEquipmentDetails(item: ShopEquipment, player: Player): str } function renderShopEquipment(item: ShopEquipment, action: (item: ShopEquipment) => string, player: Player): string { - return `
+ return `
${action(item)}
@@ -140,7 +142,7 @@ export async function renderStore(equipment: ShopEquipment[], items: (ShopItem &

${location.name}

-
+
${finalListing.join("\n")}