From e02a6d61f15ae14e89ddde03f4af5a6d9c8b51c0 Mon Sep 17 00:00:00 2001 From: Nathanael Sensfelder Date: Tue, 7 Aug 2018 20:12:45 +0200 Subject: Moving to SCSS, theme improvements, index p. txt --- Makefile | 2 +- src/asset/www/svg/to-logo-no-bg.svg | 596 +++++++++++++++++++++ src/asset/www/svg/to-logo.svg | 6 +- src/battle/src/View/Controlled/CharacterCard.elm | 35 +- src/battle/src/View/SubMenu/Status/TileInfo.elm | 7 + src/battle/www/index.html | 4 +- src/css/Makefile | 37 ++ src/css/src/battle.scss | 35 ++ src/css/src/battle/constants.scss | 15 + src/css/src/battle/controlled-panel.scss | 45 ++ .../battle/controlled-panel/manual-control.scss | 58 ++ src/css/src/battle/info-card.scss | 104 ++++ src/css/src/battle/info-card/character.scss | 134 +++++ src/css/src/battle/info-card/tile.scss | 12 + src/css/src/battle/keyframes.scss | 79 +++ src/css/src/battle/main-menu.scss | 41 ++ src/css/src/battle/map.scss | 83 +++ src/css/src/battle/map/animation.scss | 4 + src/css/src/battle/map/character.scss | 58 ++ src/css/src/battle/map/marker.scss | 145 +++++ src/css/src/battle/map/path.scss | 88 +++ src/css/src/battle/map/variant.scss | 33 ++ src/css/src/battle/menu-mixins.scss | 24 + src/css/src/battle/message-board.scss | 45 ++ src/css/src/battle/message-board/attack.scss | 63 +++ src/css/src/battle/message-board/error.scss | 7 + src/css/src/battle/message-board/help.scss | 33 ++ src/css/src/battle/sub-menus.scss | 26 + src/css/src/battle/sub-menus/characters-tab.scss | 27 + src/css/src/battle/sub-menus/timeline-tab.scss | 30 ++ src/css/src/global.scss | 31 ++ src/css/src/shared/colors.scss | 54 ++ src/css/src/shared/parameters.scss | 2 + src/css/src/shared/sanitize.scss | 15 + src/css/src/shared/shadows.scss | 17 + src/css/src/verbose.scss | 129 +++++ src/global/www/style.css | 132 ++--- src/map-editor/www/index.html | 4 +- www/index.html.m4 | 184 ++++++- 39 files changed, 2313 insertions(+), 131 deletions(-) create mode 100644 src/asset/www/svg/to-logo-no-bg.svg create mode 100644 src/css/Makefile create mode 100644 src/css/src/battle.scss create mode 100644 src/css/src/battle/constants.scss create mode 100644 src/css/src/battle/controlled-panel.scss create mode 100644 src/css/src/battle/controlled-panel/manual-control.scss create mode 100644 src/css/src/battle/info-card.scss create mode 100644 src/css/src/battle/info-card/character.scss create mode 100644 src/css/src/battle/info-card/tile.scss create mode 100644 src/css/src/battle/keyframes.scss create mode 100644 src/css/src/battle/main-menu.scss create mode 100644 src/css/src/battle/map.scss create mode 100644 src/css/src/battle/map/animation.scss create mode 100644 src/css/src/battle/map/character.scss create mode 100644 src/css/src/battle/map/marker.scss create mode 100644 src/css/src/battle/map/path.scss create mode 100644 src/css/src/battle/map/variant.scss create mode 100644 src/css/src/battle/menu-mixins.scss create mode 100644 src/css/src/battle/message-board.scss create mode 100644 src/css/src/battle/message-board/attack.scss create mode 100644 src/css/src/battle/message-board/error.scss create mode 100644 src/css/src/battle/message-board/help.scss create mode 100644 src/css/src/battle/sub-menus.scss create mode 100644 src/css/src/battle/sub-menus/characters-tab.scss create mode 100644 src/css/src/battle/sub-menus/timeline-tab.scss create mode 100644 src/css/src/global.scss create mode 100644 src/css/src/shared/colors.scss create mode 100644 src/css/src/shared/parameters.scss create mode 100644 src/css/src/shared/sanitize.scss create mode 100644 src/css/src/shared/shadows.scss create mode 100644 src/css/src/verbose.scss diff --git a/Makefile b/Makefile index 5f74e98..336a5d6 100644 --- a/Makefile +++ b/Makefile @@ -1,7 +1,7 @@ ################################################################################ ## CONFIG ###################################################################### ################################################################################ -MODULES ?= battle global asset map-editor +MODULES ?= battle css global asset map-editor SRC_DIR = ${CURDIR}/src WWW_DIR = ${CURDIR}/www diff --git a/src/asset/www/svg/to-logo-no-bg.svg b/src/asset/www/svg/to-logo-no-bg.svg new file mode 100644 index 0000000..1d439cf --- /dev/null +++ b/src/asset/www/svg/to-logo-no-bg.svg @@ -0,0 +1,596 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/asset/www/svg/to-logo.svg b/src/asset/www/svg/to-logo.svg index eccdd5a..4918a82 100644 --- a/src/asset/www/svg/to-logo.svg +++ b/src/asset/www/svg/to-logo.svg @@ -10,9 +10,9 @@ xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - width="61.50248mm" + width="65.628479mm" height="41.997131mm" - viewBox="0 0 61.502477 41.997132" + viewBox="0 0 65.628476 41.997132" version="1.1" id="svg8" inkscape:version="0.92.2 5c3e80d, 2017-08-06" @@ -30,7 +30,7 @@ inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="2.8284271" - inkscape:cx="129.47331" + inkscape:cx="130.18042" inkscape:cy="79.407794" inkscape:document-units="mm" inkscape:current-layer="layer1" diff --git a/src/battle/src/View/Controlled/CharacterCard.elm b/src/battle/src/View/Controlled/CharacterCard.elm index b53ae57..0e29502 100644 --- a/src/battle/src/View/Controlled/CharacterCard.elm +++ b/src/battle/src/View/Controlled/CharacterCard.elm @@ -37,6 +37,8 @@ get_name : ( get_name char = (Html.div [ + (Html.Attributes.class "battle-info-card-name"), + (Html.Attributes.class "battle-info-card-text-field"), (Html.Attributes.class "battle-character-card-name") ] [ @@ -487,6 +489,8 @@ get_minimal_html : ( get_minimal_html player_ix char = (Html.div [ + (Html.Attributes.class "battle-info-card"), + (Html.Attributes.class "battle-info-card-minimal"), (Html.Attributes.class "battle-character-card"), (Html.Attributes.class "battle-character-card-minimal") ] @@ -494,10 +498,18 @@ get_minimal_html player_ix char = (get_name char), (Html.div [ + (Html.Attributes.class "battle-info-card-top"), (Html.Attributes.class "battle-character-card-top") ] [ - (View.Character.get_portrait_html player_ix char), + (Html.div + [ + (Html.Attributes.class "battle-info-card-picture") + ] + [ + (View.Character.get_portrait_html player_ix char) + ] + ), (get_health_bar char), (get_inactive_movement_bar char), (get_statuses char) @@ -527,10 +539,18 @@ get_summary_html char_turn player_ix char = (get_name char), (Html.div [ + (Html.Attributes.class "battle-info-card-top"), (Html.Attributes.class "battle-character-card-top") ] [ - (View.Character.get_portrait_html player_ix char), + (Html.div + [ + (Html.Attributes.class "battle-info-card-picture") + ] + [ + (View.Character.get_portrait_html player_ix char) + ] + ), (get_health_bar char), (get_movement_bar char_turn char), (get_statuses char) @@ -558,16 +578,25 @@ get_full_html player_ix char = in (Html.div [ + (Html.Attributes.class "battle-info-card"), (Html.Attributes.class "battle-character-card") ] [ (get_name char), (Html.div [ + (Html.Attributes.class "battle-info-card-top"), (Html.Attributes.class "battle-character-card-top") ] [ - (View.Character.get_portrait_html player_ix char), + (Html.div + [ + (Html.Attributes.class "battle-info-card-picture") + ] + [ + (View.Character.get_portrait_html player_ix char) + ] + ), (get_health_bar char), (get_inactive_movement_bar char), (get_statuses char) diff --git a/src/battle/src/View/SubMenu/Status/TileInfo.elm b/src/battle/src/View/SubMenu/Status/TileInfo.elm index d08f937..920b5ce 100644 --- a/src/battle/src/View/SubMenu/Status/TileInfo.elm +++ b/src/battle/src/View/SubMenu/Status/TileInfo.elm @@ -27,6 +27,7 @@ get_icon tile = (Html.div [ (Html.Attributes.class "battle-tile-card-icon"), + (Html.Attributes.class "battle-info-card-picture"), (Html.Attributes.class ( "battle-tile-variant-" @@ -48,6 +49,8 @@ get_name model tile = (Just tile_type) -> (Html.div [ + (Html.Attributes.class "battle-info-card-name"), + (Html.Attributes.class "battle-info-card-text-field"), (Html.Attributes.class "battle-tile-card-name") ] [ @@ -68,6 +71,7 @@ get_cost tile = in (Html.div [ + (Html.Attributes.class "battle-info-card-text-field"), (Html.Attributes.class "battle-tile-card-cost") ] [ @@ -82,6 +86,7 @@ get_location tile = in (Html.div [ + (Html.Attributes.class "battle-info-card-text-field"), (Html.Attributes.class "battle-tile-card-location") ] [ @@ -110,12 +115,14 @@ get_html model loc = (Just tile) -> (Html.div [ + (Html.Attributes.class "battle-info-card"), (Html.Attributes.class "battle-tile-card") ] [ (get_name model tile), (Html.div [ + (Html.Attributes.class "battle-info-card-top"), (Html.Attributes.class "battle-tile-card-top") ] [ diff --git a/src/battle/www/index.html b/src/battle/www/index.html index 16c2e21..942de3b 100644 --- a/src/battle/www/index.html +++ b/src/battle/www/index.html @@ -1,8 +1,8 @@ - - + + diff --git a/src/css/Makefile b/src/css/Makefile new file mode 100644 index 0000000..b8e0575 --- /dev/null +++ b/src/css/Makefile @@ -0,0 +1,37 @@ +################################################################################ +## CONFIG ###################################################################### +################################################################################ +SRC_DIR ?= ${CURDIR}/src/ +TILE_CLASSES_DIR ?= ${CURDIR}/tile/class +TILE_FRONTIER_DIR ?= ${CURDIR}/tile/frontier +WWW_DIR ?= ${CURDIR}/www/ + +SCSS_EXEC = scss +################################################################################ +## MAKEFILE MAGIC ############################################################## +################################################################################ +#INCLUDE_SCSS = $(shell find $(SRC_DIR)/shared/ -name ".scss") +INCLUDE_SCSS = $(shell find $(SRC_DIR) -name "*.scss") +SCSS_FILES = $(wildcard $(SRC_DIR)/*.scss) +CSS_FILES = $(patsubst $(SRC_DIR)/%.scss,$(WWW_DIR)/%.css,$(SCSS_FILES)) + +################################################################################ +## SANITY CHECKS ############################################################### +################################################################################ + +################################################################################ +## TARGET RULES ################################################################ +################################################################################ +build: $(CSS_FILES) + +clean: + rm -f $(CSS_FILES) + +reset: + $(MAKE) -C clean + +################################################################################ +## INTERNAL RULES ############################################################## +################################################################################ +$(CSS_FILES): $(WWW_DIR)/%.css: $(SRC_DIR)/%.scss $(INCLUDE_SCSS) + $(SCSS_EXEC) $< > $@ diff --git a/src/css/src/battle.scss b/src/css/src/battle.scss new file mode 100644 index 0000000..c671396 --- /dev/null +++ b/src/css/src/battle.scss @@ -0,0 +1,35 @@ +@import 'shared/colors'; +@import 'shared/shadows'; + +* +{ + color: $GOLD-0; + @include text-shadow(1px, $BROWN-0, 0.5); +} + +body +{ + background-color: $BROWN-2; +} + +button +{ + flex: 1; + + text-transform: uppercase; + background-color: $BROWN-3; + border-color: $BROWN-1; +} + +button + button +{ + margin-left: 0.5em; +} + +@import 'battle/controlled-panel'; +@import 'battle/info-card'; +@import 'battle/keyframes'; +@import 'battle/main-menu'; +@import 'battle/map'; +@import 'battle/message-board'; +@import 'battle/sub-menus'; diff --git a/src/css/src/battle/constants.scss b/src/css/src/battle/constants.scss new file mode 100644 index 0000000..06a1e6b --- /dev/null +++ b/src/css/src/battle/constants.scss @@ -0,0 +1,15 @@ +$MENU-MARGIN: 0.5em; +$MENU-PADDING: 0.5em; +$MENU-BORDER: 0.2em; + +$MAIN-MENU-HEIGHT: 3em; +$MESSAGE-BOARD-HEIGHT: 10em; +$CONTROLLED-MENU-WIDTH: 15em; +$SUB-MENU-WIDTH: 20em; + +$MENU-EXTRA: $MENU-MARGIN;// + $MENU-PADDING + $MENU-BORDER; + +$NEXT-TO-CONTROLLED-MENU: $CONTROLLED-MENU-WIDTH + $MENU-EXTRA; +$NEXT-TO-SUB-MENU: $SUB-MENU-WIDTH + $MENU-EXTRA; +$BELOW-MAIN-MENU: $MAIN-MENU-HEIGHT + $MENU-EXTRA; +$ABOVE-MESSAGE-BOARD: $MESSAGE-BOARD-HEIGHT + $MENU-EXTRA; diff --git a/src/css/src/battle/controlled-panel.scss b/src/css/src/battle/controlled-panel.scss new file mode 100644 index 0000000..7ac39f8 --- /dev/null +++ b/src/css/src/battle/controlled-panel.scss @@ -0,0 +1,45 @@ +@import 'constants'; +@import 'menu-mixins'; + +.battle-controlled +{ + position: absolute; + display: block; + left: 0; + top: $BELOW-MAIN-MENU; + bottom: $ABOVE-MESSAGE-BOARD; + + width: $CONTROLLED-MENU-WIDTH; + + @include menu-background-color(); + + @include menu-padding(); + + @include menu-border(); + + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: none; + + display: flex; + flex-flow: column; + justify-content: space-between; +} + +.battle-controlled-actions +{ + display: flex; + flex-flow: row wrap; + + align-items: center; + justify-content: center; +} + +.battle-end-turn-button +{ + animation-name: reverse-brown-alarm-bg; + animation-duration: 2s; + animation-iteration-count: infinite; +} + +@import 'controlled-panel/manual-control'; diff --git a/src/css/src/battle/controlled-panel/manual-control.scss b/src/css/src/battle/controlled-panel/manual-control.scss new file mode 100644 index 0000000..765514b --- /dev/null +++ b/src/css/src/battle/controlled-panel/manual-control.scss @@ -0,0 +1,58 @@ +.battle-manual-controls +{ + width: 96px; + height: 96px; + display: grid; + grid-template: + '. top .' + 'left go right' + '. bottom .'; + margin: auto; +} + +.battle-manual-controls > div +{ + width: 32px; + height: 32px; + background-image: url(/asset/svg/arrowhead.svg); + background-size: 100%; + transition: opacity 0.3s ease-out; + opacity: 0.5; +} + +.battle-manual-controls > div:hover +{ + opacity: 1; +} + +.battle-manual-controls-go +{ + margin: auto; + width: 28px; + height: 28px; + border-radius: 100em; + grid-area: go; +} + +.battle-manual-controls-up +{ + transform: rotate(-90deg); + grid-area: top; +} + +.battle-manual-controls-down +{ + transform: rotate(90deg); + grid-area: bottom; +} + +.battle-manual-controls-left +{ + transform: rotate(180deg); + grid-area: left; +} + +.battle-manual-controls-right +{ + grid-area: right; +} diff --git a/src/css/src/battle/info-card.scss b/src/css/src/battle/info-card.scss new file mode 100644 index 0000000..29e4576 --- /dev/null +++ b/src/css/src/battle/info-card.scss @@ -0,0 +1,104 @@ +@import "../shared/colors"; +@import "../shared/shadows"; + +.battle-info-card +{ + display: flex; + flex-flow: column; +} + +.battle-info-card-top +{ + position: relative; + + margin-top: 0.5em; +} + +.battle-info-card-picture +{ + top: 0; + left: 0; + + box-sizing: border-box; + + border-radius: 5px; + overflow: hidden; + + margin: 0; + + @include box-shadow(2px, $BROWN-0, 1); + + display: inline-block; +} + +.battle-info-card-text-field +{ + display:flex; + justify-content:center; + align-items:center; + border-radius: 5px; + background-color: $BROWN-2; + width: 100%; +} + +.battle-gauge +{ + position: relative; + border-radius: 5px; + border: 2px solid $BROWN-2; + text-align: center; + height: 2em; +} + +.battle-gauge-text +{ + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 1; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.battle-gauge-bar +{ + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 0; + + border-radius: 5px; + z-index: 0; + transition: width 3s ease-in-out; +} + +.battle-character-card-health, +.battle-tile-card-cost +{ + position: absolute; + left: 100px; + top: 0; + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); +} + + +.battle-character-card-movement, +.battle-tile-card-location +{ + position: absolute; + left: 100px; + top: calc(1.5em + 1em); + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); +} + +@import 'info-card/character'; +@import 'info-card/tile'; diff --git a/src/css/src/battle/info-card/character.scss b/src/css/src/battle/info-card/character.scss new file mode 100644 index 0000000..3233be1 --- /dev/null +++ b/src/css/src/battle/info-card/character.scss @@ -0,0 +1,134 @@ +@import "../../shared/colors"; + +.battle-character-portrait +{ + background-size: 100% 100%; + width: 100px; + height: 100px; + overflow: hidden; + cursor: pointer; +} + +.battle-character-portrait * +{ + box-sizing: border-box; + background-size: 100% 100%; + width: inherit; + height: inherit; +} + +.battle-character-portrait-body +{ + z-index: 1; +} + +.battle-character-portrait-armor +{ + position: relative; + z-index: 1; + top: -100%; + background-size: 200% 100%; +} + +.battle-character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); } +.battle-character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); } +.battle-character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); } +.battle-character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); } +.battle-character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); } +.battle-character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); } +.battle-character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); } +.battle-character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); } + +.battle-character-card-statuses +{ + position: absolute; + left: 100px; + top: calc(2*(1.5em + 0.5em) + 0.7em); + margin-left: 0.5em; + width: calc(100% - 100px - 0.5em); + display: flex; +} + +.battle-character-card-status +{ + height: 1.5em; + width: 1.5em; + background-size: 100%; +} + +.battle-character-card-target-status +{ + background-image: url("/asset/svg/status/target.svg"); +} + +.battle-character-card-commander-status +{ + background-image: url("/asset/svg/status/commander.svg"); +} + +.battle-character-card-health > .battle-gauge-bar +{ + background-color: $RED-3; +} + +.battle-character-card-movement > .battle-gauge-bar +{ + background-color: $BLUE-3; +} + +.battle-character-card-weapon, +.battle-character-card-weapon-summary +{ + display: grid; + + border-radius: 5px; + + padding: 0.3em; + margin-top: 0.3em; +} + +.battle-character-card-weapon +{ + background-color: #6C5D53; +} + +.battle-character-card-weapon-summary +{ + background-color: $BROWN-1; +} + +.battle-character-card-armor +{ + display: grid; + border-radius: 5px; + background-color: $BROWN-2; + + padding: 0.3em; + margin-top: 0.3em; +} + +.battle-character-card-armor-stats +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.battle-character-card-stats > *, +.battle-character-card-armor-stats > * +{ + width: 25%; +} + +.battle-character-card-stats +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + + border-radius: 5px; + background-color: $BROWN-2; + + padding: 0.3em; + margin-top: 0.3em; +} diff --git a/src/css/src/battle/info-card/tile.scss b/src/css/src/battle/info-card/tile.scss new file mode 100644 index 0000000..65ed591 --- /dev/null +++ b/src/css/src/battle/info-card/tile.scss @@ -0,0 +1,12 @@ + +.battle-tile-card-icon +{ + background-size: 400%; + width: 80px; + height: 80px; +} + +.battle-tile-card-top +{ + margin:0.3em; +} diff --git a/src/css/src/battle/keyframes.scss b/src/css/src/battle/keyframes.scss new file mode 100644 index 0000000..049e9d5 --- /dev/null +++ b/src/css/src/battle/keyframes.scss @@ -0,0 +1,79 @@ +@keyframes red-alarm-bg { + 0% {background-color: rgba(255,0,0,0.25);} + 25% {background-color: rgba(255,0,0,1);} + 50% {background-color: rgba(255,0,0,1);} + 100% {background-color: rgba(255,0,0,0.25);} +} + +@keyframes pulsating { + 0% { opacity: 1.0; transform: scale(1);} + 25% { opacity: 1.0; transform: scale(1);} + 30% { opacity: 0.8; transform: scale(1.1);} + 50% { opacity: 1.0; transform: scale(1);} + 100% { opacity: 1.0; transform: scale(1);} +} + +@keyframes strongly-pulsating { + 0% { opacity: 1.0; transform: scale(1);} + 50% { opacity: 0.8; transform: scale(1.5);} + 100% { opacity: 1.0; transform: scale(1);} +} + +@keyframes brown-alarm-bg { + 0% {background-color: #917C6F;} + 25% {background-color: #AC9D93} + 50% {background-color: #AC9D93} + 100% {background-color: #917C6F;} +} + +@keyframes reverse-brown-alarm-bg { + 0% {background-color: #917C6F;} + 50% {background-color: #502D16;} + 100% {background-color: #917C6F;} +} + +@keyframes blue-alarm-bg { + 0% {background-color: rgba(0,0,255,0.2);} + 25% {background-color: rgba(0,0,255,0.8);} + 50% {background-color: rgba(0,0,255,0.8);} + 100% {background-color: rgba(0,0,255,0.2);} +} + +@keyframes blinking { + to { visibility: hidden; } +} + +@keyframes blinking2 { + from { opacity: 1; } + to { opacity: 0; } +} + +@keyframes dodges { + 0% { transform: translate(0, 0); } + 50% { transform: translate(-75%, 0); } + 100% { transform: translate(0, 0); } +} + +@keyframes attacks { + 0% { transform: translate(0, 0); } + 25% { transform: translate(25%, 0); } + 100% { transform: translate(0, 0); } +} + +@keyframes parries { + 0% { transform: translate(0, 0); } + 25% { transform: translate(-25%, 0); } + 50% { transform: translate(50%, 20%); } + 100% { transform: translate(0, 0); } +} + +@keyframes dies { + from { transform: translate(0, 0) rotate(0); } + to { transform: translate(0, 100%) rotate(25deg); } +} + +@keyframes blue-alarm-bd { + 0% {border-color: rgba(0,0,255,0.25);} + 25% {border-color: rgba(0,0,255,1);} + 100% {border-color: rgba(0,0,255,0.25);} +} diff --git a/src/css/src/battle/main-menu.scss b/src/css/src/battle/main-menu.scss new file mode 100644 index 0000000..1dfe02a --- /dev/null +++ b/src/css/src/battle/main-menu.scss @@ -0,0 +1,41 @@ +@import '../shared/colors'; + +@import 'constants'; +@import 'menu-mixins'; + +.battle-main-menu +{ + position: absolute; + top: 0; + left: 0; + right: 0; + + height: $MAIN-MENU-HEIGHT; + + @include menu-background-color(); + + display: flex; + flex-direction: row; + flex-wrap: wrap; + + @include menu-border(); + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; + + @include menu-padding(); + + @include menu-margin(); + + margin-top: 0; + + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + +.battle-main-menu button:hover +{ + background-color: $BROWN-4; +} diff --git a/src/css/src/battle/map.scss b/src/css/src/battle/map.scss new file mode 100644 index 0000000..c6ab64d --- /dev/null +++ b/src/css/src/battle/map.scss @@ -0,0 +1,83 @@ +@import 'constants'; +@import 'menu-mixins'; + +.battle-container-centerer +{ + position: absolute; + + top: $BELOW-MAIN-MENU; + left: $NEXT-TO-CONTROLLED-MENU; + right: $NEXT-TO-SUB-MENU; + bottom: $ABOVE-MESSAGE-BOARD; + + display: flex; +} + +.battle-container +{ + display: inline-block; + max-height: 100%; + max-width: 100%; + + overflow: scroll; + + margin: auto; + resize: both; + + @include menu-border(); + + @include menu-background-color(); +} + +.battle-actual +{ + display: inline-block; + transform-origin: top left; + + /*** Otherwise, it won't display correctly without 'transform: scale' ***/ + position: relative; +} + +.battle-tiled, .battle-tiled * +{ + height: 32px; + width: 32px; + /** Fixes odd behavior of table cell being resized. **/ + /* min-width: 32px; */ + /* max-width: 32px; */ +} + +.battle-tile-icon, .battle-tile-icon * +{ + z-index: 0; + position: absolute; + background-size: 400%; +} + +.battle-path-icon-below-markers {z-index: 1;} +.battle-marker-icon {z-index: 2;} +.battle-path-icon-above-markers {z-index: 3;} +.battle-character-icon {z-index: 4;} + +.battle-marker-icon, +.battle-character-icon, +.battle-path-icon +{ + position: absolute; +} + +.battle-tiles-layer +{ + /*display: table; */ +} + +.battle-tiles-layer-row +{ + /* display: table-row; */ +} + +@import 'map/animation.scss'; +@import 'map/character.scss'; +@import 'map/marker.scss'; +@import 'map/path.scss'; +@import 'map/variant.scss'; diff --git a/src/css/src/battle/map/animation.scss b/src/css/src/battle/map/animation.scss new file mode 100644 index 0000000..1e8f044 --- /dev/null +++ b/src/css/src/battle/map/animation.scss @@ -0,0 +1,4 @@ +.battle-animated-character-icon +{ + transition: top linear 0.3s, left linear 0.3s; +} diff --git a/src/css/src/battle/map/character.scss b/src/css/src/battle/map/character.scss new file mode 100644 index 0000000..6856f61 --- /dev/null +++ b/src/css/src/battle/map/character.scss @@ -0,0 +1,58 @@ +.battle-character-icon +{ + border-radius: 5px; + height: 38px; + margin-top: -6px; +} + +.battle-character-icon * +{ + position: absolute; + left: 0; + top: 0; + background-size: 100% 100%; + width: inherit; + height: inherit; +} + +.battle-character-icon-enabled +{ + animation-name: pulsating; + animation-duration: 1.5s; + animation-iteration-count: infinite; + transform-origin: center; +} + +.battle-character-icon-banner { z-index: 2; } +.battle-character-icon-head { z-index: 1; } +.battle-character-icon-body { z-index: 0; } + +.battle-character-ally +{ +} + +.battle-character-enemy +{ + transform: scale(-1, 1); +} + +.battle-character-ally.battle-character-icon-disabled +{ + filter: contrast(35%); +} + +.battle-character-targeted +{ + background-color: rgba(255,0,0,0.7); + animation-name: red-alarm-bg; + animation-duration: 5s; + animation-iteration-count: infinite; +} + +.battle-character-selected +{ + animation-name: strongly-pulsating; + animation-duration: 1.5s; + animation-iteration-count: infinite; +} + diff --git a/src/css/src/battle/map/marker.scss b/src/css/src/battle/map/marker.scss new file mode 100644 index 0000000..d6ec557 --- /dev/null +++ b/src/css/src/battle/map/marker.scss @@ -0,0 +1,145 @@ +.battle-marker-icon.battle-navigator-non-interactive +{ + box-sizing: border-box; + width: 12px; + height: 12px; + background-size: 100%; + margin: 10px; +} + +.battle-marker-icon.battle-navigator-interactive +{ + box-sizing: border-box; + width: 24px; + /*min-width: 24px; + max-width: 24px; */ + margin: 4px 0 0 4px; + height: 24px; + border-radius: 4px; + border: none; + box-shadow: + 1px 0px 2px #333, + -1px 0px 2px #333, + 0px 1px 2px #333, + 0px -1px 2px #333; +} + +.battle-can-go-to-can-defend-marker.battle-navigator-interactive +{ + background-color: #FFF; + opacity: 0.3; + transition: opacity 0.3s ease-out; +} + +.battle-can-go-to-cant-defend-marker.battle-navigator-interactive +{ + background: + repeating-linear-gradient( + -55deg, + rgb(255,255,255), + rgb(255,255,255) 3px, + rgba(0,0,0,0) 3px, + rgba(0,0,0,0) 7px + ); + opacity: 0.3; + transition: opacity 0.3s ease-out; +} + +.battle-can-go-to-can-defend-marker.battle-navigator-interactive:hover, +.battle-can-go-to-cant-defend-marker.battle-navigator-interactive:hover +{ + opacity: 0.9; +} + +.battle-can-attack-can-defend-marker.battle-navigator-interactive +{ + background-color: #000; + opacity: 0.7; + width: 28px; + /*min-width: 28px; + max-width: 28px;*/ + height: 28px; + margin: 2px 0 0 2px; + border-radius: 0; +} + +.battle-can-attack-cant-defend-marker.battle-navigator-interactive +{ + background: + repeating-linear-gradient( + -55deg, + rgba(255,255,255,0), + rgba(255,255,255,0) 3px, + rgb(0,0,0) 3px, + rgb(0,0,0) 7px + ); + width: 28px; + /*min-width: 28px; + max-width: 28px;*/ + opacity: 0.7; + height: 28px; + margin: 2px 0 0 2px; + border-radius: 0; +} + +.battle-can-attack-can-defend-marker.battle-navigator-non-interactive +{ + z-index: 5; + background-image: url(/asset/svg/marker/blade.svg); +} + +.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive +{ + z-index: 5; + background-image: + url(/asset/svg/marker/blade.svg), + url(/asset/svg/marker/brokenshield.svg); +} + +.battle-can-go-to-cant-defend-marker.battle-navigator-non-interactive +{ + background-image: + url(/asset/svg/marker/pawprint.svg), + url(/asset/svg/marker/brokenshield.svg); +} + +.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive, +.battle-can-go-to-cant-defend-marker.battle-navigator-non-interactive +{ + width: 24px; + height: 24px; + background-position: top left, bottom right; + background-size: 50%, 50%; + background-repeat: no-repeat, no-repeat; + margin: 2px; +} + +.battle-can-go-to-can-defend-marker.battle-navigator-non-interactive +{ + background-image: url(/asset/svg/marker/pawprint.svg); +} + +.battle-can-attack-can-defend-marker.battle-navigator-non-interactive, +.battle-can-attack-cant-defend-marker.battle-navigator-non-interactive +{ + z-index: 5; +} + +.battle-can-go-to-can-defend-marker, +.battle-can-go-to-cant-defend-marker +{ + z-index: 3; +} + +.battle-cant-defend-marker +{ + background: + repeating-linear-gradient( + -55deg, + rgba(255,255,255,0.3), + rgba(255,255,255,0.3) 3px, + rgba(0,0,0,0.3) 3px, + rgba(0,0,0,0.3) 7px + ); +} + diff --git a/src/css/src/battle/map/path.scss b/src/css/src/battle/map/path.scss new file mode 100644 index 0000000..0d0b97d --- /dev/null +++ b/src/css/src/battle/map/path.scss @@ -0,0 +1,88 @@ +.battle-path-icon +{ + background-image: url("/asset/svg/arrows.svg"); + background-size: 96px 32px; +} + +.battle-path-icon-UR, +.battle-path-icon-LD, +.battle-path-icon-RD, +.battle-path-icon-UL, +.battle-path-icon-LU, +.battle-path-icon-DR, +.battle-path-icon-DL, +.battle-path-icon-RU +{ + /*** Default is -^ ***/ + background-position: 64px 0; +} +/*** DL/RU ***/ + +.battle-path-icon-LU, +.battle-path-icon-DR +{ + transform: rotate(90deg); +} + +.battle-path-icon-RD, +.battle-path-icon-UL +{ + /*** ***/ + transform: scale(1, -1); +} + +.battle-path-icon-UR, +.battle-path-icon-LD +{ + /*** <| ***/ + transform: rotate(180deg); +} + +.battle-path-icon-RR, +.battle-path-icon-LR, +.battle-path-icon-RL, +.battle-path-icon-LL +{ + background-position: 0 0; +} + +.battle-path-icon-markN, +.battle-path-icon-NU, +.battle-path-icon-ND, +.battle-path-icon-NL, +.battle-path-icon-NR +{ + display: none; +} + +.battle-path-icon-UU, +.battle-path-icon-UD, +.battle-path-icon-DU, +.battle-path-icon-DD +{ + background-position: 0 0; + transform: rotate(90deg); +} + +.battle-path-icon-markR, +.battle-path-icon-markL, +.battle-path-icon-markU, +.battle-path-icon-markD +{ + background-position: 32px 0; +} + +.battle-path-icon-markL +{ + transform: rotate(180deg); +} + +.battle-path-icon-markD +{ + transform: rotate(90deg); +} + +.battle-path-icon-markU +{ + transform: rotate(-90deg); +} diff --git a/src/css/src/battle/map/variant.scss b/src/css/src/battle/map/variant.scss new file mode 100644 index 0000000..ca8aa66 --- /dev/null +++ b/src/css/src/battle/map/variant.scss @@ -0,0 +1,33 @@ + +.battle-tile-variant-0 {background-position: 0 0;} +.battle-tile-variant-1 {background-position: 100% 0;} +.battle-tile-variant-2 {background-position: 200% 0;} +.battle-tile-variant-3 {background-position: 300% 0;} + +.battle-tile-variant-4 {background-position: 0 100%;} +.battle-tile-variant-5 {background-position: 100% 100%;} +.battle-tile-variant-6 {background-position: 200% 100%;} +.battle-tile-variant-7 {background-position: 300% 100%;} + +.battle-tile-variant-8 {background-position: 0 200%;} +.battle-tile-variant-9 {background-position: 100% 200%;} +.battle-tile-variant-10 {background-position: 200% 200%;} +.battle-tile-variant-11 {background-position: 300% 200%;} + +.battle-tile-variant-12 {background-position: 0 300%;} +.battle-tile-variant-13 {background-position: 100% 300%;} +.battle-tile-variant-14 {background-position: 200% 300%;} +.battle-tile-variant-15 {background-position: 300% 300%;} + +.battle-tile-icon-bg { z-index: 0; } +.battle-tile-icon-dt { z-index: 9; } + +.battle-tile-icon-f-0 { z-index: 1; } +.battle-tile-icon-f-1 { z-index: 2; } +.battle-tile-icon-f-2 { z-index: 3; } +.battle-tile-icon-f-3 { z-index: 4; } +.battle-tile-icon-f-4 { z-index: 5; } +.battle-tile-icon-f-5 { z-index: 6; } +.battle-tile-icon-f-6 { z-index: 7; } +.battle-tile-icon-f-7 { z-index: 8; } + diff --git a/src/css/src/battle/menu-mixins.scss b/src/css/src/battle/menu-mixins.scss new file mode 100644 index 0000000..f7129a1 --- /dev/null +++ b/src/css/src/battle/menu-mixins.scss @@ -0,0 +1,24 @@ +@import '../shared/colors'; + +@import 'constants'; + +@mixin menu-border () +{ + border: $MENU-BORDER solid $BROWN-1; + border-radius: 15px; +} + +@mixin menu-margin () +{ + margin: $MENU-MARGIN; +} + +@mixin menu-padding () +{ + padding: $MENU-PADDING; +} + +@mixin menu-background-color () +{ + background-color: $BROWN-3; +} diff --git a/src/css/src/battle/message-board.scss b/src/css/src/battle/message-board.scss new file mode 100644 index 0000000..f2be3f7 --- /dev/null +++ b/src/css/src/battle/message-board.scss @@ -0,0 +1,45 @@ +@import 'constants'; +@import 'menu-mixins'; + +.battle-message-board +{ + position: absolute; + bottom: 0; + left: 0; + right: 0; + + height: $MESSAGE-BOARD-HEIGHT; + + @include menu-background-color(); + + @include menu-border(); + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + @include menu-padding(); + + @include menu-margin(); + margin-bottom: 0; + + display: flex; + flex-flow: row; + justify-content: space-between; + + overflow-y: auto; +} + +/* +.battle-message-board +{ + background: $BROWN-4; + color: $BROWN-0; + line-height: 1.3em; + font-size: 1.2em; + text-shadow: none; +} +*/ + +@import 'message-board/attack'; +@import 'message-board/error'; +@import 'message-board/help'; diff --git a/src/css/src/battle/message-board/attack.scss b/src/css/src/battle/message-board/attack.scss new file mode 100644 index 0000000..8f3a8cb --- /dev/null +++ b/src/css/src/battle/message-board/attack.scss @@ -0,0 +1,63 @@ +.battle-message-board .battle-character-card +{ + width: 16em; +} + +.battle-message-attack-text +{ + width: 100%; + text-align: center; + font-size: 1.2em; +} + +/**** Character Portrait Animations *******************************************/ +.battle-animated-portrait-damaged .battle-character-portrait > * +{ + animation: blinking 0.2s steps(2, start) 8; +} + +.battle-animated-portrait-absent .battle-character-portrait > * +{ + visibility: hidden; +} + +.battle-animated-portrait-dodges .battle-character-portrait, +.battle-animated-portrait-dies .battle-character-portrait, +.battle-animated-portrait-parries .battle-character-portrait, +.battle-animated-portrait-attacks .battle-character-portrait +{ + overflow: hidden; +} + +.battle-animated-portrait +{ +} + +.battle-animated-portrait-dodges .battle-character-portrait > * +{ + animation-name: dodges; + animation-duration: 1s; + animation-iteration-count: 1; +} + +.battle-animated-portrait-attacks .battle-character-portrait > * +{ + animation-name: attacks; + animation-duration: 1s; + animation-iteration-count: 1; +} + +.battle-animated-portrait-dies .battle-character-portrait > * +{ + animation-name: blinking2, dies; + animation-duration: 0.15s, 2s; + animation-delay: 0s, 1s; + animation-iteration-count: 8, 1; +} + +.battle-animated-portrait-parries .battle-character-portrait > * +{ + animation-name: parries; + animation-duration: 1s; + animation-iteration-count: 1; +} diff --git a/src/css/src/battle/message-board/error.scss b/src/css/src/battle/message-board/error.scss new file mode 100644 index 0000000..8c2c197 --- /dev/null +++ b/src/css/src/battle/message-board/error.scss @@ -0,0 +1,7 @@ +@import '../../shared/colors'; + +.battle-error +{ + background-color: $RED-1; +} + diff --git a/src/css/src/battle/message-board/help.scss b/src/css/src/battle/message-board/help.scss new file mode 100644 index 0000000..ba35772 --- /dev/null +++ b/src/css/src/battle/message-board/help.scss @@ -0,0 +1,33 @@ +.battle-message-board-help +{ + display: block; +} + +.battle-message-board-help h1 +{ + margin: 0; + margin-bottom: 0.3em; + font-size: 1.5em; + text-align: center; +} + +.battle-message-board-help-figure +{ + width: 1.5em; + height: 1.5em; + background-size: 100%; + display: inline-block; + vertical-align: middle; +} + +.battle-help-guide-icon +{ + margin-right: 0.5em; + width: 1.5em; + height: 1.5em; + background-image: url("/asset/svg/help-icon.svg"); + background-size: 100%; + display: inline-block; + vertical-align: middle; +} + diff --git a/src/css/src/battle/sub-menus.scss b/src/css/src/battle/sub-menus.scss new file mode 100644 index 0000000..13ec571 --- /dev/null +++ b/src/css/src/battle/sub-menus.scss @@ -0,0 +1,26 @@ +@import 'constants'; +@import 'menu-mixins'; + +.battle-sub-menu +{ + position: absolute; + right: 0; + top: $BELOW-MAIN-MENU; + bottom: $ABOVE-MESSAGE-BOARD; + + width: $SUB-MENU-WIDTH; + + @include menu-background-color(); + + @include menu-padding(); + + @include menu-border(); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: none; + + overflow: auto; +} + +@import 'sub-menus/characters-tab'; +@import 'sub-menus/timeline-tab'; diff --git a/src/css/src/battle/sub-menus/characters-tab.scss b/src/css/src/battle/sub-menus/characters-tab.scss new file mode 100644 index 0000000..fc4aae6 --- /dev/null +++ b/src/css/src/battle/sub-menus/characters-tab.scss @@ -0,0 +1,27 @@ +@import '../../shared/colors'; + +.battle-tabmenu-characters-tab +{ + display: flex; + flex-grow: 1; + flex-direction: column; + flex-wrap: wrap; +} + +.battle-characters-element-active +{ + animation-name: brown-alarm-bg; + animation-duration: 5s; + animation-iteration-count: infinite; +} + +.battle-characters-element +{ + flex: 2; + margin: 0.5em 0.5em 0 0.5em; + + border-radius: 5px; + border: 1px solid $BROWN-1; + border-bottom-width: 2px; + padding: 0.5em; +} diff --git a/src/css/src/battle/sub-menus/timeline-tab.scss b/src/css/src/battle/sub-menus/timeline-tab.scss new file mode 100644 index 0000000..cf9793c --- /dev/null +++ b/src/css/src/battle/sub-menus/timeline-tab.scss @@ -0,0 +1,30 @@ +@import '../../shared/colors'; +@import '../../shared/shadows'; + +.battle-timeline-element +{ + margin: 0.5em 0.5em 0 0.5em; + text-align: center; + + border-radius: 5px; + border: 1px solid $BROWN-1; + border-bottom-width: 2px; + padding: 0.5em; +} + +.battle-timeline-element .battle-character-portrait +{ + display: inline-block; + vertical-align: middle; + width: 36px; + height: 36px; + + @include box-shadow(1px, $BROWN-0, 1); +} + +.battle-timeline-element .battle-character-portrait + * +{ + border-radius: 5px; + margin-left: 1em; +} + diff --git a/src/css/src/global.scss b/src/css/src/global.scss new file mode 100644 index 0000000..ad19c93 --- /dev/null +++ b/src/css/src/global.scss @@ -0,0 +1,31 @@ +@import 'shared/colors'; +@import 'shared/parameters'; +@import 'shared/sanitize'; +@import 'shared/shadows'; + +html, body, .fullscreen-module +{ + min-width: $MIN_PAGE_WIDTH; + min-height: $MIN_PAGE_HEIGHT; +} + +button +{ + border-radius: 5px; + border-width: 1px; + border-style: solid; + border-bottom-width: 3px; + transition: background-color 0.3s ease-out; + font-variant: small-caps; +} + +button:hover +{ + cursor: pointer; +} + +.clickable +{ + cursor: pointer; + touch-action: manipulation; +} diff --git a/src/css/src/shared/colors.scss b/src/css/src/shared/colors.scss new file mode 100644 index 0000000..6a5a054 --- /dev/null +++ b/src/css/src/shared/colors.scss @@ -0,0 +1,54 @@ +// Those colors were picked from Inkscape's collection. + +$BROWN-0: #241F1C; +$BROWN-1: #483E37; +$BROWN-2: #6C5D53; +$BROWN-3: #917C6F; +$BROWN-4: #AC9D93; +$BROWN-5: #C8BEB7; +$BROWN-6: #E3DEDB; + +$GOLD-0: #E9DDAF; +$GOLD-1: #FFEEAA; + +$BLOOD-0: #550000; + +$RED-0: #280B0B; +$RED-1: #501616; +$RED-2: #782121; +$RED-3: #A02C2C; +$RED-4: #C83737; +$RED-5: #D35F5F; +$RED-6: #E9AFAF; + +$GREEN-0: #1C241C; +$GREEN-1: #374837; +$GREEN-2: #536C53; +$GREEN-3: #6F916F; +$GREEN-4: #93AC93; +$GREEN-5: #B7C8B7; +$GREEN-6: #DBE3DB; + +$BLUE-0: #1C1F24; +$BLUE-1: #373E48; +$BLUE-2: #535D6C; +$BLUE-3: #6F7C91; +$BLUE-4: #939DAC; +$BLUE-5: #B7BEC8; +$BLUE-6: #DBDEE3; + +$GLAUQUE-0: #1C2422; +$GLAUQUE-1: #374845; +$GLAUQUE-2: #536C67; +$GLAUQUE-3: #6F918A; +$GLAUQUE-4: #93ACA7; +$GLAUQUE-5: #B7C8C4; +$GLAUQUE-6: #DBE3E2; + +$PURPLE-0: #241C22; +$PURPLE-1: #483745; +$PURPLE-2: #6C5367; +$PURPLE-3: #916F8A; +$PURPLE-4: #AC93A7; +$PURPLE-5: #C8B7C4; +$PURPLE-6: #E3DBE2; diff --git a/src/css/src/shared/parameters.scss b/src/css/src/shared/parameters.scss new file mode 100644 index 0000000..908d739 --- /dev/null +++ b/src/css/src/shared/parameters.scss @@ -0,0 +1,2 @@ +$MIN-PAGE-WIDTH: 800px; +$MIN-PAGE-HEIGHT: 600px; diff --git a/src/css/src/shared/sanitize.scss b/src/css/src/shared/sanitize.scss new file mode 100644 index 0000000..d341d19 --- /dev/null +++ b/src/css/src/shared/sanitize.scss @@ -0,0 +1,15 @@ +* +{ + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body, html +{ + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; +} diff --git a/src/css/src/shared/shadows.scss b/src/css/src/shared/shadows.scss new file mode 100644 index 0000000..4378dff --- /dev/null +++ b/src/css/src/shared/shadows.scss @@ -0,0 +1,17 @@ +@mixin text-shadow ($size, $color, $alpha) +{ + text-shadow: + 1px 0 $size rgba($color, $alpha), + -1px 0 $size rgba($color, $alpha), + 0 1px $size rgba($color, $alpha), + 0 -1px $size rgba($color, $alpha); +} + +@mixin box-shadow ($size, $color, $alpha) +{ + box-shadow: + 1px 0 $size rgba($color, $alpha), + -1px 0 $size rgba($color, $alpha), + 0 1px $size rgba($color, $alpha), + 0 -1px $size rgba($color, $alpha); +} diff --git a/src/css/src/verbose.scss b/src/css/src/verbose.scss new file mode 100644 index 0000000..7a505a6 --- /dev/null +++ b/src/css/src/verbose.scss @@ -0,0 +1,129 @@ +@import 'shared/colors'; +@import 'shared/shadows'; + +* +{ + color: $GOLD-0; + @include text-shadow(1px, $BROWN-0, 0.5); +} + +body +{ + display: flex; + flex-direction: column; + background-color: $BROWN-2; +} + +body > header +{ + display: flex; + flex-direction: row; +} + +body > header nav +{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex: 1; + align-items: center; + justify-content: space-around; +} + +body > header nav a +{ + color: $GOLD-0; + transition: background-color 0.3s ease-out; + font-size: 1.5em; + font-variant: small-caps; + font-weight: bold; + text-decoration: none; + margin: 0.5em; +} + +.main-server-logo +{ + z-index: 1; + margin: 0.5em; +} + +.main-server-version +{ + z-index: 0; + position: absolute; + font-size: 0.7em; + top: 0; + right: 0; +} + +main +{ + width: 100%; + flex: 1; + + display: flex; + flex-direction: column; + + align-items: center; +} + +article:nth-of-type(1) +{ + margin-top: 0; +} + +article +{ + display: inline-block; + + background: $BROWN-4; + + margin: 1em; + padding-bottom: 2em; + + border: 1px solid $BROWN-0; + + max-width: 80em; + min-width: 40em; +} + +article > p +{ + margin: 0 3em 0.5em 3em; + line-height: 1.3em; + font-size: 1.2em; + color: $BROWN-0; + text-shadow: none; +} + +article > header +{ + display: inline-block; + margin: -0.1em 0.5em 1em 0.5em; + border: 2px solid $GLAUQUE-1; + border-top-width: 1px; + border-radius: 0 0 8px 8px; + text-align: center; + padding: 0.5em 1em 0.5em 1em; + background: $GLAUQUE-2; + color: $GLAUQUE-6; + font-size: 1.5em; + font-variant: small-caps; + font-weight: bold; +} + +article > h1 +{ + display: inline-block; + background: $BLUE-2; + margin: 1em 0 1em -0.2em; + font-size: 1.2em; + font-variant: small-caps; + font-weight: normal; + border: 2px solid $BLUE-1; + border-left-width: 1px; + border-radius: 0 15px 15px 0; + color: $BLUE-6; + padding: 0.5em; + padding-left: 1.5em; +} diff --git a/src/global/www/style.css b/src/global/www/style.css index 76f1ed9..b826d1f 100644 --- a/src/global/www/style.css +++ b/src/global/www/style.css @@ -1,99 +1,37 @@ -html -{ - min-width: 800px; - min-height: 600px; - height: 100%; - background-color: #6C5D53; - color: #FFEEAA; -} - -html, body, .fullscreen-module -{ - min-width: 800px; - min-height: 600px; -} - * { - box-sizing: border-box; - color: #FFEEAA; - text-shadow: - 1px 0px 1px rgba(80, 45, 22, 0.5), - -1px 0px 1px rgba(80, 45, 22, 0.5), - 0px 1px 1px rgba(80, 45, 22, 0.5), - 0px -1px 1px rgba(80, 45, 22, 0.5); -} - -* button -{ - background-color: #917C6F; - border-radius: 5px; - border: 1px solid #502D16; - border-bottom-width: 3px; - color: #FFEEAA; - margin: 0.1em; - padding: 0.2em; - transition: background-color 0.3s ease-out; -} - -* button:hover -{ - cursor: pointer; - background-color: #AC9D93; -} - -* button:active -{ - background-color: #C8BEB7; -} - -* button:disabled -{ - background-color: #502D16; -} - -* button:disabled:hover -{ - cursor: default; - background-color: #502D16; -} + margin: 0; + padding: 0; } + +html, body, .fullscreen-module { + min-width: 800px; + min-height: 600px; + background-color: #6C5D53; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; } -* button:disabled:active -{ - background-color: #502D16; -} - -html, body, .fullscreen-module -{ - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - margin: 0; - padding: 0; -} - -.fullscreen-module -{ - display:flex; -} - -.clickable -{ - cursor: pointer; - touch-action: manipulation; -} - -.popup-message -{ - display: inline-block; - text-align: justify; - padding: 2em 2em 1em 2em; - margin: 1em; - - border: 1px solid #502D16; - border-left-width: 4px; - - max-width: 80em; - min-width: 40em; -} +* { + color: #FFEEAA; + text-shadow: 1px 0 1px rgba(36, 31, 28, 0.5), -1px 0 1px rgba(36, 31, 28, 0.5), 0 1px 1px rgba(36, 31, 28, 0.5), 0 -1px 1px rgba(36, 31, 28, 0.5); } + +button { + background-color: #917C6F; + border-radius: 5px; + border: 1px solid #483E37; + border-bottom-width: 3px; + margin: 0.1em; + padding: 0.2em; + transition: background-color 0.3s ease-out; } + +button:hover { + cursor: pointer; + background-color: #AC9D93; } + +button:active { + background-color: #C8BEB7; } + +.clickable { + cursor: pointer; + touch-action: manipulation; } diff --git a/src/map-editor/www/index.html b/src/map-editor/www/index.html index 2dcbefb..61e551f 100644 --- a/src/map-editor/www/index.html +++ b/src/map-editor/www/index.html @@ -1,8 +1,8 @@ - - + + diff --git a/www/index.html.m4 b/www/index.html.m4 index f84d3f1..610466f 100644 --- a/www/index.html.m4 +++ b/www/index.html.m4 @@ -7,30 +7,168 @@ - + + -
- -

Currently running: __CONF_VERSION

-
-
-

Welcome to __CONF_SERVER_NAME

-

__CONF_SERVER_NAME is a turn based multiplayer strategy game.

- It is still in an early development phase, meaning that most of its - features are not implemented yet. -

-

Available content

- -

Access to the source code (Apache 2.0 License)

- -
+
+ +
__CONF_VERSION
+ +
+
+
+
What is __CONF_SERVER_NAME?
+

+ __CONF_SERVER_NAME is a turn-based strategy game. It is free and + open source (under the Apache 2.0 License): you can download the + code for this website + here + and the code for the server-side content + here. +

+
+
+
(Ridiculously) Early Access Warning
+

+ __CONF_SERVER_NAME is still in its infancy: most features are + missing, and the available ones are incomplete. For now, this + website is intented as a way to assess the current state of the + project, but not as a way to actually play the game. Indeed, + users should expect frequent resets without warnings, as the + underlying data structures may require changes and translation of + the existing data is not deemed worthwhile. +

+
+
+
Game Modes
+

+ __CONF_SERVER_NAME is intended to have both solo and multiplayer + modes. Players can group up (or go alone) to face the + story campaigns. Competitive matches are also available, with + players invading or defending customized maps. +

+

Player Progress

+

+ As they progress through the game, players unlock character + customization items, equipment, achievements, additional + campaigns, and resources to build their own maps. +

+

+ Map building resources are the only items that can be acquired + multiple times, since they have to be spent. All of the other + items can be used as many times as the player wants, once they + are unlocked. There is no trading between players. +

+

Battle Duration

+

+ The game is played asynchronously, in a concept similar to + Play-By-Mail games: players are notified when it is their time + to play, and have no need to be connected otherwise. + Consequently, battles in __CONF_SERVER_NAME can be played in + sequences of very small sessions. The downside being that, since + the other players may not be readily available, games are likely + to last a very long time. To address this issue, the players + will be able to set time limits for turns (with a minimum of + 25h), and multiple games can be played simultaneously. +

+

Co-Operative Campaigns

+

+ Because of the time spent on each battle, having players grind + on low difficulty battles with low chances of reward would + prove to be very boring. Instead, campaigns are intended to + be challenging, without randomness factor for their rewards. + Campaigns will be structured as trees, with branches available + depending on either player choice or consequences of previous + battles (character death, secret uncovered, etc). +

+

+ Players characters are chosen at the start of a campaign. This + selection cannot be changed while the campaign is in progress + (although playing the same campaign simultaneously with a + different selection is possible). Furthermore, any outside + changes made to the characters have no impact on ongoing + campaigns. Additionally, the characters are not healed or + restored between battles, unless the scenario explicitly features + a restoration event. +

+

+ Upon reaching victory in a battle, the player is offered two + choices: either carry on to one of the next available campaign + events, or revert the effects of the battle and attempt it once + again in hopes of a better result. Upon defeat, the latter is + automatically selected. +

+

Players VS Players

+

+ As part of the early campaigns, players are given lands. + Players are able to customize those lands by spending resources, + which are earned either by defending their own land, or by + invading other players'. This resource can also be used as an + alternative way to earn some campaign rewards. Players may + group together to build, defend, and invade larger maps. The + number of groups a player can belong to is not limited, but, for + obvious reasons, they are not allowed to participate in both the + defense and the invasion sides of the same battle. +

+

+ Players versus players battles are subject to random events. + For example, non-player characters may intrude on an ongoing + battle. +

+
+
+
Business Model
+

+ __CONF_SERVER_NAME has an open business policy, meaning that + information on all incomes and purchases are publicly available. +

+

Advantages Acquired by Paying

+

+ In __CONF_SERVER_NAME, the only purchasable digital goods are + the cosmetics sold by artists. Cosmetic items do not provide + anything other than visual boons. +

+

Money Income: Sell of Cosmetics

+

+ The main source of income planned for __CONF_SERVER_NAME is the + sell of cosmetics from artists in the community. Those cosmetics + would have to be validated before being put into place, with a + first pre-selection done by the community itself, and a final + approval made by us. +

+

+ Artist remuneration is intended to go as follows: the money + spent by the player goes through the usual taxes (government, + payment platform share, etc), then the artist receives 75% of + the remaining amount, and __CONF_SERVER_NAME gets the rest. The + listed price of the item is chosen by the artist and validated by + us. +

+

+ Plans include the introduction of a 15 days delay between + purchase and the distribution of money between __CONF_SERVER_NAME + and the artist, in an attempt at making refunds less complicated. + How the taxes are handled in such case is still to be determined. +

+

+ Ownership of sold items is still to the artists, meaning that + they do not have to use a license as permissive as + __CONF_SERVER_NAME's for their art. As a result, those items are + not part of __CONF_SERVER_NAME's source code, and forks of the + project should deal with the artist directly. +

+
+
-- cgit v1.2.3-70-g09d2