add mod compatibility page (#597)

2 files changed, 141 insertions, 0 deletions

diff --git a/src/SMAPI.Web/wwwroot/Content/css/mods.css b/src/SMAPI.Web/wwwroot/Content/css/mods.css
new file mode 100644
index 00000000..d250440f
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/css/mods.css
@@ -0,0 +1,85 @@
+/*********
+** Intro
+*********/
+#content {
+    max-width: calc(100% - 2em); /* allow for wider table if room available */
+}
+
+#blurb {
+    margin-top: 0;
+    width: 50em;
+}
+
+#beta-blurb {
+    width: 50em;
+    margin-bottom: 2em;
+    padding: 1em;
+    border: 3px solid darkgreen;
+}
+
+table.wikitable {
+    background-color:#f8f9fa;
+    color:#222;
+    margin:1em 0;
+    border:1px solid #a2a9b1;
+    border-collapse:collapse
+}
+
+table.wikitable > tr > th,
+table.wikitable > tr > td,
+table.wikitable > * > tr > th,
+table.wikitable > * > tr > td {
+    border:1px solid #a2a9b1;
+    padding:0.2em 0.4em
+}
+
+table.wikitable > tr > th,
+table.wikitable > * > tr > th {
+    background-color:#eaecf0;
+}
+
+table.wikitable > caption {
+    font-weight:bold
+}
+
+#mod-list .mod-page-links,
+#mod-list .mod-alt-authors,
+#mod-list .mod-alt-names,
+#mod-list .mod-broke-in {
+    font-size: 0.8em;
+}
+
+#mod-list .mod-alt-authors,
+#mod-list .mod-alt-names {
+    display: block;
+}
+
+#mod-list tr {
+    font-size: 0.9em;
+}
+
+#mod-list tr[data-status="Ok"],
+#mod-list tr[data-status="Optional"] {
+    background: #9F9;
+}
+
+#mod-list tr[data-status="Workaround"],
+#mod-list tr[data-status="Unofficial"] {
+    background: #CF9;
+}
+
+#mod-list tr[data-status="Broken"] {
+    background: #F99;
+}
+
+#mod-list tr[data-status="Obsolete"],
+#mod-list tr[data-status="Abandoned"] {
+    background: #999;
+    opacity: 0.7;
+}
+
+#mod-list .mod-closed-source {
+    color: red;
+    font-size: 0.8em;
+    opacity: 0.5;
+}
diff --git a/src/SMAPI.Web/wwwroot/Content/js/mods.js b/src/SMAPI.Web/wwwroot/Content/js/mods.js
new file mode 100644
index 00000000..1b15b622
--- /dev/null
+++ b/src/SMAPI.Web/wwwroot/Content/js/mods.js
@@ -0,0 +1,56 @@
+/* globals $ */
+
+var smapi = smapi || {};
+var app;
+smapi.modList = function (mods) {
+    // init data
+    var data = { mods: mods, search: "" };
+    for (var i = 0; i < data.mods.length; i++) {
+        var mod = mods[i];
+
+        // set initial visibility
+        mod.Visible = true;
+
+        // concatenate searchable text
+        mod.SearchableText = [mod.Name, mod.AlternateNames, mod.Author, mod.AlternateAuthors, mod.Compatibility.Summary, mod.BrokeIn];
+        if (mod.Compatibility.UnofficialVersion)
+            mod.SearchableText.push(mod.Compatibility.UnofficialVersion);
+        if (mod.BetaCompatibility) {
+            mod.SearchableText.push(mod.BetaCompatibility.Summary);
+            if (mod.BetaCompatibility.UnofficialVersion)
+                mod.SearchableText.push(mod.BetaCompatibility.UnofficialVersion);
+        }
+        for (var p = 0; p < mod.ModPages; p++)
+            mod.SearchableField.push(mod.ModPages[p].Text);
+        mod.SearchableText = mod.SearchableText.join(" ").toLowerCase();
+    }
+
+    // init app
+    app = new Vue({
+        el: "#app",
+        data: data,
+        methods: {
+            /**
+             * Update the visibility of all mods based on the current search text.
+             */
+            applySearch: function () {
+                // get search terms
+                var words = data.search.toLowerCase().split(" ");
+
+                // make sure all words match
+                for (var i = 0; i < data.mods.length; i++) {
+                    var mod = data.mods[i];
+                    var match = true;
+                    for (var w = 0; w < words.length; w++) {
+                        if (mod.SearchableText.indexOf(words[w]) === -1) {
+                            match = false;
+                            break;
+                        }
+                    }
+
+                    mod.Visible = match;
+                }
+            }
+        }
+    });
+};