Adapt silhouette code to generate silhouette Mascots

src/General/Globals.coffee

@@ -212,10 +212,13 @@ Mascots =
     image:      '//i.minus.com/iPtrwFEEtPLhn.png'
   'Horo':
     category:   'Silhouette'
-    image:       ['//i.minus.com/i429JguITUibN.png', '//i.minus.com/icpvfMuZEQCtS.png']
+    image:      '//i.minus.com/ibbMKiznORGJ00.png'
+    silhouette: true
   'Horo_2':
     category:   'Silhouette'
-    image:       ['//i.minus.com/ibv270koIdRjm7.png', '//i.minus.com/iPM4lDD53yB5n.png']
+    image:      '//i.minus.com/ibyT9dlTe1HN5P.png'
+    silhouette: true
+    width:      205
   'Horo_3':
     category:   'Questionable'
     image:      '//i.minus.com/ibyT9dlTe1HN5P.png'
@@ -399,11 +402,9 @@ Mascots =
     center:     true
   'Nagato_Yuki_5':
     category:   'Silhouette'
-    image:       ['https://i.minus.com/iW0iHUkHwu44d.png', 'https://i.minus.com/i859zL9JXZLbD.png']
+    width:      202
-    center:     true
+    image:      '//i.minus.com/iFQQPEaC3aEV7.png'
-  'Nagato_Yuki_6':
+    silhouette: true
-    category:   'Silhouette'
-    image:       ['https://i.minus.com/iJdxNEMekrQjp.png', 'https://i.minus.com/ibbHeuocMgN5Eu.png']
     center:     true
   'Nagato_Yuki_7':
     category:   'Questionable'

src/General/Settings.coffee

@@ -753,11 +753,11 @@ Settings =
         continue unless Conf["Deleted Mascots"].contains name
         mascot = Mascots[name]
         mascotEl = $.el 'div',
-          className: 'mascot'
+          className: 'mascot' 
           id: name
           innerHTML: "
 <div class='mascotname'>#{name.replace /_/g, " "}</span>
-<div class='container #{mascot.category}'><img class=mascotimg src='#{if Array.isArray(mascot.image) then (if Style.lightTheme then mascot.image[1] else mascot.image[0]) else mascot.image}'></div>
+<div class='mascotcontainer #{mascot.category} #{if mascot.silhouette then 'silhouette' else ''}'><img class=mascotimg src='#{mascot.image}'></div>
 "
 
         $.on mascotEl, 'click', cb.restore

src/General/css/layout.css

@@ -2105,6 +2105,9 @@ article li {
 .mascot img {
   max-width: 200px;
 }
+.silhouette img {
+  <%= filter %>: url('#mascot-filter');
+}
 .export-button,
 .mascotname,
 #mascot-options {

src/General/html/Settings/Mascot.html

@@ -1,2 +1,2 @@
 <div class='mascotname'>#{name.replace /_/g, " "}</div>
-<div class='mascotcontainer'><div class='mAlign #{mascot.category}'><img class=mascotimg src='#{if Array.isArray(mascot.image) then (if Style.lightTheme then mascot.image[1] else mascot.image[0]) else mascot.image}'></div></div>
+<div class='mascotcontainer #{if mascot.silhouette then 'silhouette' else ''}'><div class='mAlign #{mascot.category}'><img class=mascotimg src='#{mascot.image}'></div></div>

src/Theming/Mascots.coffee

@@ -21,28 +21,21 @@ MascotTools =
       $.rmClass doc, 'mascot-position-above-post-form'
       $.rmClass doc, 'mascot-position-bottom'
       $.rmClass doc, 'mascot-position-default'
-      if mascot.position is 'bottom'
+      $.addClass doc, if mascot.position is 'bottom'
-        $.addClass doc, 'mascot-position-bottom'
+        'mascot-position-bottom'
       else
-        $.addClass doc, 'mascot-position-above-post-form'
+        'mascot-position-above-post-form'
 
-    if mascot.silhouette and not Conf['Silhouettize Mascots']
+    $[if mascot.silhouette or Conf['Silhouettize Mascots']
-      $.addClass doc, 'silhouettize-mascots'
+      'addClass'
-
+    else
-    else unless Conf['Silhouettize Mascots']
+      'rmClass'
-      $.rmClass doc, 'silhouettize-mascots'
+    ] doc, 'silhouettize-mascots'
 
     el = $.el 'img'
     $.on el, 'error', MascotTools.error
 
-    el.src =
+    el.src = mascot.image
-      if Array.isArray mascot.image
-        if Style.lightTheme
-          mascot.image[1]
-        else
-          mascot.image[0]
-      else
-        mascot.image
 
     $.off img = @el.firstElementChild, 'error', MascotTools.error
 
@@ -142,6 +135,11 @@ MascotTools =
         false
         "checkbox"
       ]
+      silhouette: [
+        "Silhouette"
+        false
+        "checkbox"
+      ]
 
     dialog = $.el "div",
       id: "mascotConf"
@@ -238,13 +236,7 @@ MascotTools =
     $.add d.body, dialog
 
   input: (item, name) ->
-    if Array.isArray editMascot[name]
+    value = editMascot[name]
-      if Style.lightTheme
-        value = editMascot[name][1]
-      else
-        value = editMascot[name][0]
-    else
-      value = editMascot[name]
 
     editMascot[name] = value
 

src/Theming/Style.coffee

@@ -152,10 +152,12 @@ Style =
     Style.lightTheme = bgColor.isLight()
 
     Style.svg.innerHTML = """
-<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id='captcha-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.filter Style.matrix theme["Text"], theme["Input Background"]} 0 0 0 1 0' /></filter></svg>
+<svg xmlns='http://www.w3.org/2000/svg' height=0>
-<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id='mascot-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.silhouette Style.matrix replyRGB} 0 0 0 1 0' /></filter></svg>
+  <filter id='captcha-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.filter Style.matrix theme["Text"], theme["Input Background"]} 0 0 0 1 0' /></filter>
-<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id="grayscale"><feColorMatrix id="color" type="saturate" values="0" /></filter></svg>
+  <filter id='mascot-filter' color-interpolation-filters='sRGB'><feColorMatrix values='#{Style.silhouette Style.matrix replyRGB} 0 0 0 1 0' /></filter>
-<svg xmlns='http://www.w3.org/2000/svg' height=0><filter id="icons-filter" color-interpolation-filters='sRGB'><feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0' /></filter></svg>
+  <filter id="grayscale"><feColorMatrix id="color" type="saturate" values="0" /></filter>
+  <filter id="icons-filter" color-interpolation-filters='sRGB'><feColorMatrix values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0' /></filter>
+</svg>
     """
 
     """<%= grunt.file.read('src/General/css/theme.css').replace(/\s+/g, ' ').trim() %>""" + <%= grunt.file.read('src/General/css/themeoptions.css').replace(/\s+/g, ' ').trim() %>