Add sexual trait toggle to character information

It's not a preference yet and the sexual traits are still visible by
default. I'll fix that later.

3 files changed, 67 insertions, 27 deletions

diff --git a/data/lang.txt b/data/lang.txt
index a719fc96..8935c6a7 100644
--- a/data/lang.txt
+++ b/data/lang.txt
@@ -9378,6 +9378,18 @@ tr : Henüz resim yüklenmemiş
 uk : Ще не завантажено жодного зображення
 it : Nessuna immagine caricata
 
+:_charp_sexual
+en : Show sexual traits
+ru*:
+cs*:
+hu*:
+nl*:
+de*:
+es*:
+tr*:
+uk*:
+it*:
+
 :_charp_alias
 en : Aliases
 ru : Алиасы
diff --git a/data/script.js b/data/script.js
index 0db40c02..81698ef7 100644
--- a/data/script.js
+++ b/data/script.js
@@ -3211,44 +3211,71 @@ if(byId('expandall')) {
 }
 
 
-// charspoil handling
-if(byId('charspoil_sel')) {
+// char spoil/sexual preferences
+if(byId('charops')) { (function() {
   var k = byClass('charspoil');
-  var h = byName(byId('charspoil_sel'), 'a');
+  var h = byName(byId('charops'), 'a');
   var t = byClass('table', 'stripe');
-  var setall = function(spoil) {
+  var spoil;
+  var sexual;
+  var fixcomma = function(c) {
+    var l = byName(c, 'span');
+    var first = 1;
+    for(var i=0; i<l.length; i+=2)
+      if(!hasClass(l[i], 'hidden')) {
+        setClass(l[i+1], 'hidden', first);
+        first = 0;
+      }
+  };
+  var restripe = function() {
+    for(var i=0; i<t.length; i++) {
+      var b = byName(t[i], 'tbody');
+      if(!b.length)
+        continue;
+      setClass(t[i], 'stripe', false);
+      var r = 1;
+      var rows = byName(b[0], 'tr');
+      for(var j=0; j<rows.length; j++)
+        if(!hasClass(rows[j], 'nostripe') && !hasClass(rows[j], 'hidden')) {
+          if(hasClass(rows[j], 'charspoil'))
+            fixcomma(byName(rows[j], 'td')[1]);
+          setClass(rows[j], 'odd', r++&1);
+        }
+    }
+  };
+  var setall = function() {
     for(var i=0; i<k.length; i++)
       setClass(k[i], 'hidden',
+        !sexual && hasClass(k[i], 'sexual') ? true :
         hasClass(k[i], 'charspoil_0') ? false :
         hasClass(k[i], 'charspoil_-1') ? spoil > 1 :
         hasClass(k[i], 'charspoil_1') ? spoil < 1 : spoil < 2);
-    for(var i=0; i<h.length; i++)
+    for(var i=0; i<3; i++)
       setClass(h[i], 'sel', spoil == i);
-    if(k.length) {
-      for(var i=0; i<t.length; i++) {
-        var b = byName(t[i], 'tbody');
-        if(!b.length) continue;
-        setClass(t[i], 'stripe', false);
-        var r = 1;
-        var rows = byName(b[0], 'tr');
-        for(var j=0; j<rows.length; j++)
-          if(!hasClass(rows[j], 'nostripe') && !hasClass(rows[j], 'hidden'))
-            setClass(rows[j], 'odd', r++&1);
-      }
-    }
+    if(h[3])
+      setClass(h[3], 'sel', sexual);
+    if(k.length)
+      restripe();
+    return false;
   };
-  var set = 0;
-  for(var i=0; i<h.length; i++) {
+  for(var i=0; i<3; i++) {
     h[i].num = i;
     h[i].onclick = function() {
-      setall(this.num);
-      return false;
+      spoil = this.num;
+      return setall();
     };
     if(hasClass(h[i], 'sel'))
-      set = i;
+      spoil = i;
   };
-  setall(set);
-}
+  if(h[3]) {
+    h[3].onclick = function() {
+      sexual = !sexual;
+      return setall();
+    };
+    sexual = hasClass(h[3], 'sel');
+  }
+  setall();
+})(); }
 
 
 // mouse-over price information / disclaimer
diff --git a/data/style.css b/data/style.css
index 2879a15c..d6fe3ae7 100644
--- a/data/style.css
+++ b/data/style.css
@@ -526,9 +526,10 @@ div.charimg p   { text-align: center; padding: 0px; margin: 0; }
 div.chardetails table        { float: left; width: 530px; }
 div.chardetails table td.key { width: 80px; }
 div.chardetails.charsep      { padding-top: 5px; margin-top: 5px; border-top: 1px solid $border$ }
-#charspoil_sel       { clear: right; float: right; }
-#charspoil_sel a     { margin: 0 0 0 10px;  border: 0; outline: none }
-#charspoil_sel a.sel { color: $maintext$; }
+#charops       { clear: right; float: right; }
+#charops a     { margin: 0 0 0 10px;  border: 0; outline: none }
+#charops a.sel { color: $maintext$; }
+#charops a.sec { border-left: 1px solid $border$; padding-left: 10px }