summaryrefslogtreecommitdiff
path: root/src/map-editor/www
diff options
context:
space:
mode:
authornsensfel <SpamShield0@noot-noot.org>2018-07-10 16:44:13 +0200
committernsensfel <SpamShield0@noot-noot.org>2018-07-10 16:44:13 +0200
commitf63602557a2f7320a7e02a3bf7dd9b339efaf4d1 (patch)
tree360f47978854409073718b23a5189b62acea0e9e /src/map-editor/www
parentcc7e5d48a82eac5d6643702e84a4ed9ac2bb15d3 (diff)
Starting work on the map editor...
Diffstat (limited to 'src/map-editor/www')
-rw-r--r--src/map-editor/www/index.html30
-rw-r--r--src/map-editor/www/style.css356
2 files changed, 386 insertions, 0 deletions
diff --git a/src/map-editor/www/index.html b/src/map-editor/www/index.html
new file mode 100644
index 0000000..2dcbefb
--- /dev/null
+++ b/src/map-editor/www/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <link rel="stylesheet" type="text/css" href="../global/style.css">
+ <link rel="stylesheet" type="text/css" href="../map-editor/style.css">
+ <link rel="stylesheet" type="text/css" href="../asset/characters.css">
+ <link rel="stylesheet" type="text/css" href="../asset/armors.css">
+ <link rel="icon" type="image/x-icon" href="/favicon.ico">
+ </head>
+ <body>
+ <script src="script/main.js"></script>
+ <script src="../global/script/session.js"></script>
+ <script src="../global/script/urlparams.js"></script>
+ <script>
+ tacticians_online.session.load();
+
+ tacticians_online.app =
+ Elm.Main.fullscreen
+ (
+ {
+ user_id: tacticians_online.session.get_user_id(),
+ token: tacticians_online.session.get_token(),
+ url_params: tacticians_online.urlparams.get_parameters()
+ }
+ );
+
+ tacticians_online.session.attach_to(tacticians_online.app);
+ </script>
+ </body>
+</html>
diff --git a/src/map-editor/www/style.css b/src/map-editor/www/style.css
new file mode 100644
index 0000000..fee293f
--- /dev/null
+++ b/src/map-editor/www/style.css
@@ -0,0 +1,356 @@
+/******************************************************************************/
+/** LAYOUT ********************************************************************/
+/******************************************************************************/
+.fullscreen-module {}
+
+.map-main-menu
+{
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 3em;
+
+ display: flex;
+
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ border: 3px solid #502D16;
+ border-top: none;
+ border-radius: 0 0 15px 15px;
+
+ padding: 0.5em;
+
+ background-color: #917C6F;
+
+ margin: 0 1em 0 1em;
+}
+
+.map-message-board
+{
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ height: 10em;
+
+ border: 3px solid #502D16;
+ border-radius: 15px 15px 0 0;
+ border-bottom: none;
+
+ padding: 0.5em;
+ margin: 0 1em 0 1em;
+
+ background-color: #917C6F;
+
+ display: flex;
+ flex-flow: row;
+ justify-content: space-between;
+}
+
+.map-container-centerer
+{
+ position: absolute;
+ top: 4em;
+ left: 16em;
+ right: 21em;
+ bottom: 11em;
+
+ display: flex;
+}
+
+.map-container
+{
+ display: inline-block;
+ max-height: 100%;
+ max-width: 100%;
+ /*
+ * 4em: main-menu + margin.
+ * 11em: message-board + margin.
+ */
+ /*margin: 0 1em 0 1em; */
+ overflow: scroll;
+
+ margin: auto;
+ resize: both;
+
+ border: 3px solid #502D16;
+ border-radius: 15px;
+}
+
+.map-toolbox
+{
+ position: absolute;
+ left: 0;
+ top: 4em;
+ width: 15em;
+ /*
+ * 4em: main-menu + margin.
+ * 11em: message-board + margin.
+ */
+ height: calc(100% - 11em - 4em);
+
+ display: flex;
+ flex-flow: column;
+
+ justify-content: space-between;
+
+ padding: 0.5em;
+
+ border: 3px solid #502D16;
+ border-radius: 0 15px 15px 0;
+ border-left: none;
+
+ background-color: #917C6F;
+}
+
+.map-sub-menu
+{
+ position: absolute;
+ right: 0;
+ top: 4em;
+ width: 20em;
+ /*
+ * 4em: main-menu + margin.
+ * 11em: message-board + margin.
+ */
+ height: calc(100% - 11em - 4em);
+ padding: 0.5em;
+ overflow: auto;
+
+ border: 3px solid #502D16;
+ border-radius: 15px 0 0 15px;
+ border-right: none;
+
+ background-color: #917C6F;
+}
+
+/******************************************************************************/
+/** MESSAGE BOARD *************************************************************/
+/******************************************************************************/
+.map-error
+{
+ background-color: #550000;
+}
+
+.map-message-board-help
+{
+ display: block;
+}
+
+.map-message-board-help h1
+{
+ margin: 0;
+ margin-bottom: 0.3em;
+ font-size: 1.5em;
+ text-align: center;
+}
+
+.map-message-board-help-figure
+{
+ width: 1.5em;
+ height: 1.5em;
+ background-size: 100%;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.map-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;
+}
+
+/******************************************************************************/
+/** ??? ***********************************************************************/
+/******************************************************************************/
+
+/** Tile Card *****************************************************************/
+.map-tile-card
+{
+ display: flex;
+ flex-flow: column;
+}
+
+.map-tile-card-top
+{
+ margin-top: 0.5em;
+ position: relative;
+}
+
+.map-character-portrait
+{
+ box-sizing: border-box;
+ border-radius: 5px;
+ background-size: 100% 100%;
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+}
+
+.map-tile-card-icon
+{
+ box-sizing: border-box;
+ border-radius: 5px;
+ background-size: 300% 300%;
+ width: 80px;
+ height: 80px;
+}
+
+.map-tile-card-icon
+{
+ top: 0;
+ left: 0;
+ margin: 0;
+ box-sizing: border-box;
+ box-shadow:
+ 1px 0px 2px #333,
+ -1px 0px 2px #333,
+ 0px 1px 2px #333,
+ 0px -1px 2px #333;
+}
+
+.map-character-portrait-team-0 { background-color: rgba(57, 106, 177, 0.3); }
+.map-character-portrait-team-1 { background-color: rgba(204, 37, 41, 0.3); }
+.map-character-portrait-team-2 { background-color: rgba(62, 150, 81, 0.3); }
+.map-character-portrait-team-3 { background-color: rgba(218, 124, 48, 0.3); }
+.map-character-portrait-team-4 { background-color: rgba(83, 81, 84, 0.3); }
+.map-character-portrait-team-5 { background-color: rgba(107, 76, 154, 0.3); }
+.map-character-portrait-team-6 { background-color: rgba(127, 167, 169, 0.3); }
+.map-character-portrait-team-7 { background-color: rgba(231, 167, 169, 0.3); }
+
+.map-tile-card-top
+{
+ margin:0.3em;
+}
+
+.map-tile-card-name,
+.map-tile-card-cost,
+.map-tile-card-location
+{
+ display:flex;
+ justify-content:center;
+ align-items:center;
+ border-radius: 5px;
+ background-color: #6C5D53;
+ width: 100%;
+}
+
+.map-gauge
+{
+ position: relative;
+ border-radius: 5px;
+ border: 2px solid #6C5D53;
+ text-align: center;
+ height: 2em;
+}
+
+.map-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;
+}
+
+.map-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;
+}
+
+.map-tile-card-cost
+{
+ position: absolute;
+ left: 100px;
+ top: 0;
+ margin-left: 0.5em;
+ width: calc(100% - 100px - 0.5em);
+}
+
+.map-tile-card-location
+{
+ position: absolute;
+ left: 100px;
+ top: calc(1.5em + 1em);
+ margin-left: 0.5em;
+ width: calc(100% - 100px - 0.5em);
+}
+
+/******************************************************************************/
+/** MAIN MENU *****************************************************************/
+/******************************************************************************/
+.map-main-menu
+{
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.map-main-menu button
+{
+ flex: 1;
+
+ text-transform: uppercase;
+}
+
+/******************************************************************************/
+/** SUB-MENU ******************************************************************/
+/******************************************************************************/
+
+/******************************************************************************/
+/** Main View Elements ********************************************************/
+/******************************************************************************/
+.map-actual
+{
+ display: inline-block;
+ transform-origin: top left;
+
+ /*** Otherwise, it won't display correctly without 'transform: scale' ***/
+ position: relative;
+ background-color: #917C6F;
+}
+
+.map-tiled
+{
+ height: 32px;
+ width: 32px;
+ /** Fixes odd behavior of table cell being resized. **/
+ /* min-width: 32px; */
+ /* max-width: 32px; */
+}
+
+.map-tile-variant-0 {background-position: 0 0;}
+.map-tile-variant-1 {background-position: 100% 0;}
+.map-tile-variant-2 {background-position: 200% 0;}
+.map-tile-variant-3 {background-position: 0 100%;}
+.map-tile-variant-4 {background-position: 100% 100%;}
+.map-tile-variant-5 {background-position: 200% 100%;}
+.map-tile-variant-6 {background-position: 0 200%;}
+.map-tile-variant-7 {background-position: 100% 200%;}
+.map-tile-variant-8 {background-position: 200% 200%;}
+
+.map-tile-icon {z-index: 0; position: absolute; background-size: 300%;}