aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authornsensfel <SpamShield0@noot-noot.org>2018-04-19 16:21:41 +0200
committernsensfel <SpamShield0@noot-noot.org>2018-04-19 16:21:41 +0200
commit8fcf078fb0a5df7b1a97707f50d14997938676c8 (patch)
tree49eca535cb39c3de3ea78ded89a404f2a1b41b2b
parent4611f00d15782faa1170c153f1d8c76c996cb558 (diff)
downloadtacticians-client-8fcf078fb0a5df7b1a97707f50d14997938676c8.zip
tacticians-client-8fcf078fb0a5df7b1a97707f50d14997938676c8.tar.bz2
The "Character Card" looks nice.
-rw-r--r--src/battlemap/src/View/Controlled.elm35
-rw-r--r--src/battlemap/src/View/Controlled/CharacterCard.elm131
-rw-r--r--src/battlemap/www/style.css175
3 files changed, 196 insertions, 145 deletions
diff --git a/src/battlemap/src/View/Controlled.elm b/src/battlemap/src/View/Controlled.elm
index 6f1e10d..0afd481 100644
--- a/src/battlemap/src/View/Controlled.elm
+++ b/src/battlemap/src/View/Controlled.elm
@@ -10,11 +10,12 @@ import Struct.Character
import Struct.CharacterTurn
import Struct.Event
import Struct.Model
-import Struct.Navigator
-import Struct.Statistics
+import Struct.WeaponSet
import Util.Html
+import View.Controlled.CharacterCard
+
--------------------------------------------------------------------------------
-- LOCAL -----------------------------------------------------------------------
--------------------------------------------------------------------------------
@@ -39,15 +40,12 @@ inventory_button =
[ (Html.text "Switch Weapon") ]
)
-get_curr_char_info_htmls : (
+get_available_actions : (
Struct.Model.Type ->
- Struct.Character.Type ->
(List (Html.Html Struct.Event.Type))
)
-get_curr_char_info_htmls model char =
- case
- (Struct.CharacterTurn.get_state model.char_turn)
- of
+get_available_actions model =
+ case (Struct.CharacterTurn.get_state model.char_turn) of
Struct.CharacterTurn.SelectedCharacter ->
[
(attack_button),
@@ -66,13 +64,6 @@ get_curr_char_info_htmls model char =
_ ->
[
- (Html.text
- (
- "Error: CharacterTurn structure in an inconsistent state:"
- ++ " Has an active character yet the 'state' is not any of"
- ++ " those expected in such cases."
- )
- )
]
--------------------------------------------------------------------------------
@@ -86,7 +77,19 @@ get_html model =
(Just char) ->
(Html.div
[(Html.Attributes.class "battlemap-controlled")]
- (get_curr_char_info_htmls model char)
+ [
+ (View.Controlled.CharacterCard.get_html
+ model
+ char
+ (Struct.WeaponSet.get_active_weapon
+ (Struct.Character.get_weapons char)
+ )
+ ),
+ (Html.div
+ [(Html.Attributes.class "battlemap-controlled-actions")]
+ (get_available_actions model)
+ )
+ ]
)
Nothing -> (Util.Html.nothing)
diff --git a/src/battlemap/src/View/Controlled/CharacterCard.elm b/src/battlemap/src/View/Controlled/CharacterCard.elm
index 5b84aa6..9c88b75 100644
--- a/src/battlemap/src/View/Controlled/CharacterCard.elm
+++ b/src/battlemap/src/View/Controlled/CharacterCard.elm
@@ -11,6 +11,7 @@ import Struct.Character
import Struct.Event
import Struct.Model
import Struct.Statistics
+import Struct.Weapon
--------------------------------------------------------------------------------
-- LOCAL -----------------------------------------------------------------------
@@ -39,13 +40,13 @@ get_name : (
Struct.Character.Type ->
(Html.Html Struct.Event.Type)
)
-get_name_html char =
+get_name char =
(Html.div
[
(Html.Attributes.class "battlemap-character-card-name")
]
[
- (Html.string (Struct.Character.get_name char))
+ (Html.text (Struct.Character.get_name char))
]
)
@@ -59,13 +60,14 @@ get_health_bar char =
(Html.Attributes.class "battlemap-character-card-health")
]
[
- (Html.string
+ (Html.text
(
- (toString (Struct.Character.get_current_health char))
+ "HP: "
+ ++ (toString (Struct.Character.get_current_health char))
++ "/"
++
(toString
- (Struct.Statistics.get_health
+ (Struct.Statistics.get_max_health
(Struct.Character.get_statistics char)
)
)
@@ -74,58 +76,77 @@ get_health_bar char =
]
)
-get_movement_bar : (
- Struct.Character.Type ->
+get_weapon_details : (
+ Struct.Model.Type ->
+ Struct.Statistics.Type ->
+ Struct.Weapon.Type ->
(Html.Html Struct.Event.Type)
)
-get_movement_bar char =
+get_weapon_details model stats weapon =
(Html.div
[
- (Html.Attributes.class "battlemap-character-card-movement")
+ (Html.Attributes.class "battlemap-character-card-weapon")
]
[
- (Html.string
- (
- "???/"
- ++
- (toString
- (Struct.Statistics.get_movement_points
- (Struct.Character.get_statistics char)
+ (Html.div
+ [
+ (Html.Attributes.class "battlemap-character-card-weapon-name")
+ ]
+ [
+ (Html.text (Struct.Weapon.get_name weapon))
+ ]
+ ),
+ (Html.div
+ [
+ (Html.Attributes.class "battlemap-character-card-weapon-name")
+ ]
+ [
+ (Html.text
+ (
+ "["
+ ++ (toString (Struct.Statistics.get_damage_min stats))
+ ++ ", "
+ ++ (toString (Struct.Statistics.get_damage_max stats))
+ ++ "] "
+ ++
+ (case (Struct.Weapon.get_damage_type weapon) of
+ Struct.Weapon.Slash -> "slashing "
+ Struct.Weapon.Pierce -> "piercing "
+ Struct.Weapon.Blunt -> "bludgeoning "
+ )
+ ++
+ (case (Struct.Weapon.get_range_type weapon) of
+ Struct.Weapon.Ranged -> "ranged"
+ Struct.Weapon.Melee -> "melee"
+ )
)
)
- )
+ ]
)
]
)
-get_weapon_details : (
- Struct.Model.Type ->
- Struct.Character.Type ->
- Struct.Weapon.Type ->
- (Html.Html Struct.Event.Type)
- )
-get_weapon_details model char weapon =
+stat_name : String -> (Html.Html Struct.Event.Type)
+stat_name name =
(Html.div
[
- (Html.Attributes.class "battlemap-character-card-weapon")
+ (Html.Attributes.class "battlemap-character-card-stat-name")
]
[
- (Html.string (Struct.Weapon.get_name wp))
+ (Html.text name)
]
)
-get_stat : String -> Int -> Boolean -> (Html.Html Struct.Event.Type)
-get_stat name val perc =
+stat_val : Int -> Bool -> (Html.Html Struct.Event.Type)
+stat_val val perc =
(Html.div
[
- (Html.Attributes.class "battlemap-character-card-stats-item")
+ (Html.Attributes.class "battlemap-character-card-stat-val")
]
[
- (Html.string
+ (Html.text
(
- name
- ++ " "
- ++ (toString val)
+ (toString val)
++
(
if perc
@@ -154,13 +175,25 @@ get_relevant_stats model char weapon =
(Html.Attributes.class "battlemap-character-card-stats")
]
[
- (get_stat "Dodg" (Struct.Statistics.get_dodges stats) True),
- (get_stat "Parr" (Struct.Statistics.get_parries stats) True),
- (get_stat "Accu" (Struct.Statistics.get_accuracy stats) False),
- (get_stat "2Hit" (Struct.Statistics.get_double_hits stats) True),
- (get_stat "Crit" (Struct.Statistics.get_critical_hits stats) True)
+ (stat_name "Dodge"),
+ (stat_val (Struct.Statistics.get_dodges stats) True),
+ (stat_name "Parry"),
+ (stat_val
+ (case (Struct.Weapon.get_range_type weapon) of
+ Struct.Weapon.Ranged -> 0
+ Struct.Weapon.Melee -> (Struct.Statistics.get_parries stats)
+ )
+ True
+ ),
+ (stat_name "Accu."),
+ (stat_val (Struct.Statistics.get_accuracy stats) False),
+ (stat_name "2xHit"),
+ (stat_val (Struct.Statistics.get_double_hits stats) True),
+ (stat_name "Crit."),
+ (stat_val (Struct.Statistics.get_critical_hits stats) True)
]
)
+
--------------------------------------------------------------------------------
-- EXPORTED --------------------------------------------------------------------
--------------------------------------------------------------------------------
@@ -170,17 +203,27 @@ get_html : (
Struct.Weapon.Type ->
(Html.Html Struct.Event.Type)
)
-get_html model character weapon =
+get_html model char weapon =
(Html.div
[
(Html.Attributes.class "battlemap-character-card")
]
[
- (get_portrait char),
- (get_name char),
- (get_health_bar char),
- (get_movement_bar char),
- (get_weapon_details model char weapon),
+ (Html.div
+ [
+ (Html.Attributes.class "battlemap-character-card-top")
+ ]
+ [
+ (get_portrait char),
+ (get_name char),
+ (get_health_bar char)
+ ]
+ ),
+ (get_weapon_details
+ model
+ (Struct.Character.get_statistics char)
+ weapon
+ ),
(get_relevant_stats model char weapon)
]
)
diff --git a/src/battlemap/www/style.css b/src/battlemap/www/style.css
index 4f56b76..dfbfdc4 100644
--- a/src/battlemap/www/style.css
+++ b/src/battlemap/www/style.css
@@ -1,7 +1,6 @@
/******************************************************************************/
/** LAYOUT ********************************************************************/
/******************************************************************************/
-
.fullscreen-module
{
display: grid;
@@ -21,13 +20,9 @@
flex-direction: row;
flex-wrap: wrap;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-top: none;
border-radius: 0 0 15px 15px;
- box-shadow:
- -1px 0px 2px #502D16,
- 1px 0px 2px #502D16,
- 0px 1px 2px #502D16;
padding: 0.5em;
@@ -41,13 +36,9 @@
grid-column: col 1 / span 3;
grid-row: row 3;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-radius: 15px 15px 0 0;
border-bottom: none;
- box-shadow:
- -1px 0px 2px #502D16,
- 1px 0px 2px #502D16,
- 0px -1px 2px #502D16;
padding: 0.5em;
margin: 0 1em 0 1em;
@@ -55,12 +46,7 @@
background-color: rgba(145,124,111,1);
}
-.battlemap-error
-{
- background-color: rgba(85,0,0,1);
-}
-/** Main Content **************************************************************/
.battlemap-container
{
grid-column: col 2;
@@ -74,13 +60,8 @@
margin: auto;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-radius: 15px;
- box-shadow:
- -1px 0px 2px #502D16,
- 1px 0px 2px #502D16,
- 0px -1px 2px #502D16,
- 0px 1px 2px #502D16;
}
.battlemap-controlled
@@ -91,18 +72,13 @@
display: flex;
flex-flow: column;
- align-items: center;
- justify-content: center;
+ justify-content: space-between;
padding: 0.5em;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-radius: 0 15px 15px 0;
border-left: none;
- box-shadow:
- 1px 0px 2px #502D16,
- 0px -1px 2px #502D16,
- 0px 1px 2px #502D16;
background-color: rgba(145,124,111,1);
}
@@ -115,103 +91,121 @@
padding: 0.5em;
overflow: auto;
- border: 1px solid #502D16;
+ border: 3px solid #502D16;
border-radius: 15px 0 0 15px;
border-right: none;
- box-shadow:
- -1px 0px 2px #502D16,
- 0px -1px 2px #502D16,
- 0px 1px 2px #502D16;
background-color: rgba(145,124,111,1);
}
-/*** Main View ****************************************************************/
-.battlemap-actual
+/******************************************************************************/
+/** HELP PANEL ****************************************************************/
+/******************************************************************************/
+.battlemap-error
{
- display: inline-block;
- transform-origin: top left;
-
- /*** Otherwise, it won't display correctly without 'transform: scale' ***/
- position: relative;
- background-color: rgba(145,124,111,1);
+ background-color: rgba(85,0,0,1);
}
-/******************************************************************************/
-/** RIGHT PANEL ***************************************************************/
-/******************************************************************************/
-.battlemap-side-bar
+.battlemap-manual-controls
{
- flex-grow: 1;
- overflow-y: auto;
+ max-height: 30%;
width: inherit;
- height: inherit;
- word-wrap: break-word;
+ flex: initial;
+
display: flex;
- flex-direction: column;
- padding: 0.5em;
- color: #FFEEAA;
- border-left: 1px solid #502D16;
- box-shadow: -1px 0px 2px #502D16;
+ flex-direction: row;
+ flex-wrap: wrap;
}
-.battlemap-tabmenu
+/******************************************************************************/
+/** CONTROLLED PANEL **********************************************************/
+/******************************************************************************/
+.battlemap-controlled-actions
{
- flex-grow: 1;
display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- width: inherit;
+ flex-flow: row wrap;
+
+ align-items: center;
+ justify-content: center;
}
-/** Tab Menu Specifics ********************************************************/
-.battlemap-main-menu
+.battlemap-character-card
{
display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-between;
+ flex-flow: column;
}
-.battlemap-main-menu button
+.battlemap-character-card-top
{
- flex: 1;
+ display: grid;
+ grid-template-columns: [col] auto [col] auto;
+ grid-template-rows: [row] 1fr [row] 1fr [row] 1fr;
- text-transform: uppercase;
+ align-items: center;
+ justify-content: left;
}
-.battlemap-tabmenu-content
+.battlemap-character-card-portrait
{
- flex: 1;
+ grid-column: col 1;
+ grid-row: row 1 / span 3;
}
-/** General *******************************************************************/
-.battlemap-side-bar-targets
+.battlemap-character-card-name
{
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- width: inherit;
+ grid-column: col 2;
+ grid-row: row 1;
+}
+
+.battlemap-character-card-health
+{
+ grid-column: col 2;
+ grid-row: row 2;
}
-.battlemap-float-left { float: left; }
-.battlemap-float-right { float: right; }
+.battlemap-character-card-weapon
+{
+ display: grid;
-.battlemap-manual-controls
+ border-radius: 5px;
+ background-color: #6C5D53;
+
+ padding: 0.3em;
+}
+
+.battlemap-character-card-stats
{
- max-height: 30%;
- width: inherit;
- flex: initial;
+ display: grid;
+ grid-template-columns: [col] 25% [col] 25% [col] 25% [col] 25%;
+ border-radius: 5px;
+ background-color: #6C5D53;
+
+ padding: 0.3em;
+ margin-top: 0.3em;
+}
+
+/******************************************************************************/
+/** MAIN MENU *****************************************************************/
+/******************************************************************************/
+.battlemap-main-menu
+{
display: flex;
flex-direction: row;
flex-wrap: wrap;
+ justify-content: space-between;
}
-/** Tabs **********************************************************************/
+.battlemap-main-menu button
+{
+ flex: 1;
+
+ text-transform: uppercase;
+}
-/**** Characters Tab */
+/******************************************************************************/
+/** SUB-MENU ******************************************************************/
+/******************************************************************************/
.battlemap-tabmenu-characters-tab
{
display: flex;
@@ -256,9 +250,20 @@
width: 36px;
height: 36px;
}
+
/******************************************************************************/
/** Main View Elements ********************************************************/
/******************************************************************************/
+.battlemap-actual
+{
+ display: inline-block;
+ transform-origin: top left;
+
+ /*** Otherwise, it won't display correctly without 'transform: scale' ***/
+ position: relative;
+ background-color: rgba(145,124,111,1);
+}
+
.battlemap-tiled
{
height: 32px;