Colored faction icons in role panel.

7 files changed, 38 insertions, 8 deletions

diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..dc69db7
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 50 50">
+<path d="M46.228 19.501c3.63.106 2.649-3.73 4.336-5.855.68 2.274-.02 5.075-3.023 6.778-.246.586.559.078.719.53-.59.372-1.176.587-1.766.911-.215.55.625.469.82.898-2.46.282-3.504 3.305-5.847 3.7-2.442 3.43-6.797 3.343-9.953 4.37-.5-.027-.172-.304-.344-.632-3.367 1.328-2.215 4.676-2.656 6.926-1.938.676-3.172 2.219-5.446 3.09-.636-.965-2.812-.778-2.117-2.313-1.422-.086-.863-2.016-2.367-2.328.844-1.906 4.941-3.422 5.8-5.555-.449-.047-.937.79-1.386.559-.45-.309-.121-.582-.57-.89-.7-.009-1.414.284-2.086-.462-1.867.422-3.66-.968-5.508-1.113-.395-.355-.043-.875-.578-.89-3.297.831-5.457-3.426-8.594-3.962-.074-.374-.414-.761.172-1.105-.625.063-1.238.059-1.848-.207-.148-.418-.347-.84.309-1.223-.735-.191-1.485.024-2.192-.84.477-.488.922-.328 1.387-.554-1.015-.285-2.039-.399-3.066-.508.914-1.098 2.808-.305 4.117-.93-1.781-.652-3.61-.316-5.344-1.96 2.094.05 4.164.753 6.27.644-1.942-.945-4.563-1.027-6.035-3.23 2.324.484 4.601 2.085 6.941 2.16-1.945-.946-4.496-2.137-5.961-4.715 2.488 1.496 4.961 3.23 7.469 4.285-1.36-1.094-4.703-2.957-5.324-5.297 2.273 1.656 4.515 4.008 6.812 5.121-.758-1.332-3.758-2.844-3.254-4.598 1.274 1.356 2.274 2.614 3.664 3.75 1.14.93 1.961 1.083 3.516 1.512 4.773 1.332 10.164 4.29 13.86 5.067.902.187 1.984-.043 2.964-.114 1.633-1.875 3.996-5.535 5.805-2.707-1.38.692-1.543 2.36-1.52 3.516 3.946-.719 7.86-.691 11.844-2.32.246.18.125.34-.02.492 z"/>
+</svg>
diff --git a/icons/bear.svg b/icons/bear.svg
index ce0b2c7..5b3ac2e 100644
--- a/icons/bear.svg
+++ b/icons/bear.svg
@@ -1 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 50 50"><path d="M49.983 35.287c-.357-1.143-2.011-2.812-1.81-5.044.203-2.233 1.976-7.325 1.515-9.5-.459-2.174-2.765-8.57-8.731-9.536-5.963-.969-10.246.638-12.534.533-2.285-.106-2.7-1.833-5.227-1.812-3.262.029-3.826 1.383-6.13 2.109-1.692.53-6.987.524-6.987.524s-1.516-1.976-1.977-1.253c-.461.725-1.055 2.572-1.055 2.572s-2.836.987-3.098 1.517a31.318 31.318 0 0 0-.622 1.383s-3.002.786-3.33 1.512c-.332.724 1.317 2.438 1.844 3.031.523.595 6.653.728 7.625 1.442.971.722 3.69 1.258 5.21 1.516 2.847.495 4.1 6.156 4.823 12.417-.857.726-2.371 1.369-2.454 3.366l9.29.003s.122-1.333.28-2.99c.157-1.65 2.968-7.905 2.968-7.905s2.04 1.58 3.426 1.652c-.131 1.249.453 2.58.453 2.58s1.195 1.44 2.36 2.575c-2.13.879-2.067 2.425-2.067 2.425l7.886.066s.79-1.646.79-2.968c1.057 1.518 3.1 2.112 3.1 2.112l-1.27 2.456 4.817.001c.004-.002 1.266-3.644.905-4.784"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="-2 -2 54 54">
+<defs>
+<path id="a" d="M49.983 35.287c-.357-1.143-2.011-2.812-1.81-5.044.203-2.233 1.976-7.325 1.515-9.5-.459-2.174-2.765-8.57-8.731-9.536-5.963-.969-10.246.638-12.534.533-2.285-.106-2.7-1.833-5.227-1.812-3.262.029-3.826 1.383-6.13 2.109-1.692.53-6.987.524-6.987.524s-1.516-1.976-1.977-1.253c-.461.725-1.055 2.572-1.055 2.572s-2.836.987-3.098 1.517a31.318 31.318 0 0 0-.622 1.383s-3.002.786-3.33 1.512c-.332.724 1.317 2.438 1.844 3.031.523.595 6.653.728 7.625 1.442.971.722 3.69 1.258 5.21 1.516 2.847.495 4.1 6.156 4.823 12.417-.857.726-2.371 1.369-2.454 3.366l9.29.003s.122-1.333.28-2.99c.157-1.65 2.968-7.905 2.968-7.905s2.04 1.58 3.426 1.652c-.131 1.249.453 2.58.453 2.58s1.195 1.44 2.36 2.575c-2.13.879-2.067 2.425-2.067 2.425l7.886.066s.79-1.646.79-2.968c1.057 1.518 3.1 2.112 3.1 2.112l-1.27 2.456 4.817.001c.004-.002 1.266-3.644.905-4.784 z"/>
+</defs>
+<use href="#a" stroke="black" stroke-width="4" stroke-linejoin="round"/>
+<use href="#a" fill="#f3f35a"/>
+</svg>
diff --git a/icons/eagle.svg b/icons/eagle.svg
index 11c659a..67a9b3e 100644
--- a/icons/eagle.svg
+++ b/icons/eagle.svg
@@ -1 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 50 50"><path d="M46.228 19.501c3.63.106 2.649-3.73 4.336-5.855.68 2.274-.02 5.075-3.023 6.778-.246.586.559.078.719.53-.59.372-1.176.587-1.766.911-.215.55.625.469.82.898-2.46.282-3.504 3.305-5.847 3.7-2.442 3.43-6.797 3.343-9.953 4.37-.5-.027-.172-.304-.344-.632-3.367 1.328-2.215 4.676-2.656 6.926-1.938.676-3.172 2.219-5.446 3.09-.636-.965-2.812-.778-2.117-2.313-1.422-.086-.863-2.016-2.367-2.328.844-1.906 4.941-3.422 5.8-5.555-.449-.047-.937.79-1.386.559-.45-.309-.121-.582-.57-.89-.7-.009-1.414.284-2.086-.462-1.867.422-3.66-.968-5.508-1.113-.395-.355-.043-.875-.578-.89-3.297.831-5.457-3.426-8.594-3.962-.074-.374-.414-.761.172-1.105-.625.063-1.238.059-1.848-.207-.148-.418-.347-.84.309-1.223-.735-.191-1.485.024-2.192-.84.477-.488.922-.328 1.387-.554-1.015-.285-2.039-.399-3.066-.508.914-1.098 2.808-.305 4.117-.93-1.781-.652-3.61-.316-5.344-1.96 2.094.05 4.164.753 6.27.644-1.942-.945-4.563-1.027-6.035-3.23 2.324.484 4.601 2.085 6.941 2.16-1.945-.946-4.496-2.137-5.961-4.715 2.488 1.496 4.961 3.23 7.469 4.285-1.36-1.094-4.703-2.957-5.324-5.297 2.273 1.656 4.515 4.008 6.812 5.121-.758-1.332-3.758-2.844-3.254-4.598 1.274 1.356 2.274 2.614 3.664 3.75 1.14.93 1.961 1.083 3.516 1.512 4.773 1.332 10.164 4.29 13.86 5.067.902.187 1.984-.043 2.964-.114 1.633-1.875 3.996-5.535 5.805-2.707-1.38.692-1.543 2.36-1.52 3.516 3.946-.719 7.86-.691 11.844-2.32.246.18.125.34-.02.492"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="-2 -2 54 54">
+<defs>
+<path id="a" d="M46.228 19.501c3.63.106 2.649-3.73 4.336-5.855.68 2.274-.02 5.075-3.023 6.778-.246.586.559.078.719.53-.59.372-1.176.587-1.766.911-.215.55.625.469.82.898-2.46.282-3.504 3.305-5.847 3.7-2.442 3.43-6.797 3.343-9.953 4.37-.5-.027-.172-.304-.344-.632-3.367 1.328-2.215 4.676-2.656 6.926-1.938.676-3.172 2.219-5.446 3.09-.636-.965-2.812-.778-2.117-2.313-1.422-.086-.863-2.016-2.367-2.328.844-1.906 4.941-3.422 5.8-5.555-.449-.047-.937.79-1.386.559-.45-.309-.121-.582-.57-.89-.7-.009-1.414.284-2.086-.462-1.867.422-3.66-.968-5.508-1.113-.395-.355-.043-.875-.578-.89-3.297.831-5.457-3.426-8.594-3.962-.074-.374-.414-.761.172-1.105-.625.063-1.238.059-1.848-.207-.148-.418-.347-.84.309-1.223-.735-.191-1.485.024-2.192-.84.477-.488.922-.328 1.387-.554-1.015-.285-2.039-.399-3.066-.508.914-1.098 2.808-.305 4.117-.93-1.781-.652-3.61-.316-5.344-1.96 2.094.05 4.164.753 6.27.644-1.942-.945-4.563-1.027-6.035-3.23 2.324.484 4.601 2.085 6.941 2.16-1.945-.946-4.496-2.137-5.961-4.715 2.488 1.496 4.961 3.23 7.469 4.285-1.36-1.094-4.703-2.957-5.324-5.297 2.273 1.656 4.515 4.008 6.812 5.121-.758-1.332-3.758-2.844-3.254-4.598 1.274 1.356 2.274 2.614 3.664 3.75 1.14.93 1.961 1.083 3.516 1.512 4.773 1.332 10.164 4.29 13.86 5.067.902.187 1.984-.043 2.964-.114 1.633-1.875 3.996-5.535 5.805-2.707-1.38.692-1.543 2.36-1.52 3.516 3.946-.719 7.86-.691 11.844-2.32.246.18.125.34-.02.492 z"/>
+</defs>
+<use href="#a" stroke="black" stroke-width="4" stroke-linejoin="round"/>
+<use href="#a" fill="#5fc89e"/>
+</svg>
diff --git a/icons/lion.svg b/icons/lion.svg
index 421f053..5e1c7ce 100644
--- a/icons/lion.svg
+++ b/icons/lion.svg
@@ -1 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 50 50"><path d="M46.11 38.401c1.572-.584 3.674.214 3.416 1.333-2.454.022-4.357.53-6.345-.159-1.36-2.521-3.904-3.832-5.963-5.612-1.111.56-1.707.832-2.938.465-.637 1.503-1.882 2.354-2.22 4.104.006.738 1.012.48.695 1.601-1.087.414-3.614.93-4.333-.206 1.133-1.673.636-4.906 1.547-6.82-3.619.604-6.218-.708-9.109-1.497.296 2.691-2.137 4.264-1.061 6.134.831 1.49 3.487.295 4.107 2.466-.349.33-1.06.313-1.353.694l-.927.01c-3.462-.243-6.226-2.042-5.715-5.64-1.68 1.051-4.328 3.117-6.55 4.392.166.488 1.068.72.478 1.354l-3.622.033c-.131-2.313 1.508-4.803 3.347-5.939.074-3.84 2.888-5.855 3.326-8.661-3.049.274-7.876 2.25-9.954 4.42-.538.55-1.292 1.59-1.117 2.734.23 1.576 3.397 2.092 3.685 3.805.114.842-.417 2.424-1.803 2.739-.578-.975-.343-1.85.194-2.726-.94-1.544-3.12-1.824-3.44-4.051l-.001-.217c.49.02.102-.816.208-1.148 2.09-3.448 6.372-5.857 10.17-7.336 1.137-.47 2.363-.512 3.613-.957 1.274-.42 2.194-1.16 3.61-1.394 4.053-.583 8.572-.108 12.487-1.013 2.987-.68 3.338-4.031 4.462-6.165.24-.44.81-.855 1.13-1.373 1.05-1.614 1.664-2.928 4.058-3.223a3.51 3.51 0 0 1 1.13-1.59c.522.432.6.431 1.115-.01.848.291 1.102 1.624 2.294.878-.19.165-.507 1.285.014 1.361.19-.33.567-.498 1.113-.445.064 1.169.748 1.681 1.382 2.246.52.485-.268.685-.206 1.365 1.78 1.236 1.488 4.915.965 7.26-1.776-.34-.635 2.209-2.241 2.061.114.762-.07 1.254-.202 1.801-.487.36-1.166.528-1.351 1.155.235 2.012-.727 4.227-1.99 5.93 1.058 2.192 2.705 3.784 3.894 5.841"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="-2 -2 54 54">
+<defs>
+<path id="a" d="M46.11 38.401c1.572-.584 3.674.214 3.416 1.333-2.454.022-4.357.53-6.345-.159-1.36-2.521-3.904-3.832-5.963-5.612-1.111.56-1.707.832-2.938.465-.637 1.503-1.882 2.354-2.22 4.104.006.738 1.012.48.695 1.601-1.087.414-3.614.93-4.333-.206 1.133-1.673.636-4.906 1.547-6.82-3.619.604-6.218-.708-9.109-1.497.296 2.691-2.137 4.264-1.061 6.134.831 1.49 3.487.295 4.107 2.466-.349.33-1.06.313-1.353.694l-.927.01c-3.462-.243-6.226-2.042-5.715-5.64-1.68 1.051-4.328 3.117-6.55 4.392.166.488 1.068.72.478 1.354l-3.622.033c-.131-2.313 1.508-4.803 3.347-5.939.074-3.84 2.888-5.855 3.326-8.661-3.049.274-7.876 2.25-9.954 4.42-.538.55-1.292 1.59-1.117 2.734.23 1.576 3.397 2.092 3.685 3.805.114.842-.417 2.424-1.803 2.739-.578-.975-.343-1.85.194-2.726-.94-1.544-3.12-1.824-3.44-4.051l-.001-.217c.49.02.102-.816.208-1.148 2.09-3.448 6.372-5.857 10.17-7.336 1.137-.47 2.363-.512 3.613-.957 1.274-.42 2.194-1.16 3.61-1.394 4.053-.583 8.572-.108 12.487-1.013 2.987-.68 3.338-4.031 4.462-6.165.24-.44.81-.855 1.13-1.373 1.05-1.614 1.664-2.928 4.058-3.223a3.51 3.51 0 0 1 1.13-1.59c.522.432.6.431 1.115-.01.848.291 1.102 1.624 2.294.878-.19.165-.507 1.285.014 1.361.19-.33.567-.498 1.113-.445.064 1.169.748 1.681 1.382 2.246.52.485-.268.685-.206 1.365 1.78 1.236 1.488 4.915.965 7.26-1.776-.34-.635 2.209-2.241 2.061.114.762-.07 1.254-.202 1.801-.487.36-1.166.528-1.351 1.155.235 2.012-.727 4.227-1.99 5.93 1.058 2.192 2.705 3.784 3.894 5.841 z"/>
+</defs>
+<use href="#a" stroke="black" stroke-width="4" stroke-linejoin="round"/>
+<use href="#a" fill="#eb97d1"/>
+</svg>
diff --git a/play.css b/play.css
index 70599e4..98519ae 100644
--- a/play.css
+++ b/play.css
@@ -132,13 +132,13 @@ body.shift #tooltip.focus { display: block; }
 .role_rupees_text,
 .role_loyalty_text,
 .role_cylinders_text {
-	opacity: 0.8;
+	opacity: 0.9;
 }
 
 .role_loyalty_icon {
 	background-position: 0 -1px;
 	background-size: 24px 24px;
-	opacity: 0.4;
+	opacity: 0.9;
 }
 
 .role_cylinders_icon {
@@ -146,15 +146,23 @@ body.shift #tooltip.focus { display: block; }
 	background-position: 0 3px;
 	background-size: 16px 16px;
 	background-image: url(icons/cylinder.svg);
-	opacity: 0.3;
+	opacity: 0.35;
 }
 
+/*
+#role_Gray .role_cylinders_icon { background-image: url(pieces/cylinder_gray.svg) }
+#role_Blue .role_cylinders_icon { background-image: url(pieces/cylinder_blue.svg) }
+#role_Tan .role_cylinders_icon { background-image: url(pieces/cylinder_tan.svg) }
+#role_Red .role_cylinders_icon { background-image: url(pieces/cylinder_red.svg) }
+#role_Black .role_cylinders_icon { background-image: url(pieces/cylinder_black.svg) }
+*/
+
 .role_rupees_icon {
 	width: 17px;
 	background-position: 0 3px;
 	background-size: 17px 17px;
 	background-image: url(icons/rupee.svg);
-	opacity: 0.4;
+	opacity: 0.5;
 }
 
 .role_loyalty_icon.Afghan { background-image: url(icons/eagle.svg) }
diff --git a/play.html b/play.html
index 11613a8..fec2cc9 100644
--- a/play.html
+++ b/play.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta charset="UTF-8">
 <title>PAX PAMIR</title>
-<link rel="icon" href="icons/eagle.svg">
+<link rel="icon" href="favicon.svg">
 <link rel="stylesheet" href="/fonts/fonts.css">
 <link rel="stylesheet" href="/common/play.css">
 <link rel="stylesheet" href="play.css">
diff --git a/play.js b/play.js
index 6720f11..5f8ad64 100644
--- a/play.js
+++ b/play.js
@@ -641,6 +641,7 @@ function on_update() {
 				ui.player[p].prize.textContent = view.players[p].prizes + " prizes"
 		}
 
+		ui.player[p].role.className = "role " + view.players[p].loyalty;
 		ui.player[p].role.classList.toggle("active", p === player_index[view.active])
 
 		ui.player[p].dial.className = "player_dial " + view.players[p].loyalty + " p" + p