gray background on pyro

6 files changed, 178 insertions, 105 deletions

diff --git a/app/client/common/header.component.js b/app/client/common/header.component.js
index d55ec51..6b0c89b 100644
--- a/app/client/common/header.component.js
+++ b/app/client/common/header.component.js
@@ -21,7 +21,7 @@ function Header(props){
   const { site, app, fps, playing, actions, location, history, i18n } = props
   const tool_list = Object.keys(modules).map((name, i) => {
     const label = name.replace(/_/, " ")
-    return <option value={name} key={i}>{label}</option>
+    return <option value={name} key={i}>{i18n.header[label] || label}</option>
   })
   const tool = modules[app.tool]
   const links = tool.links().map((link,i) => {
@@ -29,9 +29,13 @@ function Header(props){
       <NavLink key={i} location={location} to={link.url}>{i18n.header[link.name] || link.name}</NavLink>
     )
   })
+  const site_title = i18n.header.site_name || (site.name + " cortex")
+  document.querySelector('title').innerHTML = site_title
+  document.body.parentNode.setAttribute('lang', i18n.language)
+  document.body.setAttribute('section', location.pathname.replace(/[0-9]/g, '').replace(/\//g, '_').replace(/^_/, '').replace(/_$/, ''))
   return (
     <header>
-      <span><b>{site.name} cortex</b></span>
+      <span><b>{site_title}</b></span>
       <span>
         <select onChange={e => {
           let path = window.location.pathname.split("/")
diff --git a/app/client/i18n/i18n.en.js b/app/client/i18n/i18n.en.js
index 406afa6..3003014 100644
--- a/app/client/i18n/i18n.en.js
+++ b/app/client/i18n/i18n.en.js
@@ -1,4 +1,5 @@
 export default {
+  language: 'en',
   header: {
     system: "system",
     dashboard: "dashboard",
@@ -24,6 +25,9 @@ export default {
     not_processing: "Not Processing",
     processing: "Processing",
   },
+  system: {
+    
+  },
   pix2pixhd: {
     live: {
       network: {
diff --git a/app/client/i18n/i18n.moon.js b/app/client/i18n/i18n.moon.js
deleted file mode 100644
index 930c831..0000000
--- a/app/client/i18n/i18n.moon.js
+++ /dev/null
@@ -1,99 +0,0 @@
-export default {
-  header: {
-    system: "system",
-    dashboard: "dashboard",
-    folders: "folders",
-    sequences: "sequences",
-    checkpoints: "checkpoints",
-    results: "results",
-    uprez: "uprez",
-    live: "live",
-    pix2pixhd: "pix2pixhd",
-    pix2pix: "pix2pix",
-    pix2wav: "pix2wav",
-    samplernn: "samplernn",
-    morph: "morph",
-  },
-  gpu: {
-    idle: "GPU Idle",
-    busy: "GPU Busy",
-    start: "Start",
-    restart: "Restart",
-    stop: "Stop",
-    interrupt: "Interrupt",
-    not_processing: "Not Processing",
-    processing: "Processing",
-  },
-  pix2pixhd: {
-    live: {
-      network: {
-        title: "Mumbo Jumbo",
-        view_mode: "bollocks",
-        sequence: "mess",
-        checkpoint: "skew",
-        epoch: "REACTIONARY REGRESSION",
-      },
-      playback: {
-        title: "Divine",
-        position: "accelerationism",
-        playback_rate: "apocalypticism",
-        skip_frames: "pretend there is an emergent phenomenon",
-        fade_sequence: "speaking in tongues",
-        frame_delay: "babble",
-      },
-      record: {
-        save_frame: "PYROMANCE DISCOUNT",
-        save: "Save",
-        record_video: "Pyromance Premium",
-        video_name: "Video name",
-      },
-      transition: {
-        title: "Enlightenment",
-        period: "endarkenment",
-        min: "MONTECARLOCASINO",
-        max: "RANDOM STUMBLE",
-      },
-      recursion: {
-        title: "Proprietary button",
-        frac: "pay $5M to change this",
-        roll: "pay $5M and still nothing happens",
-        axis: "When will I die?",
-      },
-      sequence: {
-        title: "Political thermometer",
-        frac: "ignition",
-        process_frac: "wealth coefficient",
-      },
-      transform: {
-        title: "Hate",
-        rotate: "0,14 factor",
-        scale: "Ariernachweis",
-      },
-      clahe: {
-        title: "Clahe",
-        clip_limit: "clip limit",
-      },
-      posterize: {
-        title: "Posterize",
-        spatial_window: "spatial window",
-        color_window: "color window",        
-      },
-      blur: {
-        title: "Blur",
-        radius: "radius",
-        sigma: "sigma",
-      },
-      canny: {
-        title: "Canny Edge Detection",
-        lo: "lower bound",
-        hi: "upper bound",
-      },
-      hsl: {
-        title: "Hue / Saturation",
-        hue: "hue",
-        saturation: "saturation",
-        luminosity: "luminosity",
-      }
-    }
-  }
-}
diff --git a/app/client/i18n/i18n.pyro.js b/app/client/i18n/i18n.pyro.js
new file mode 100644
index 0000000..f32343c
--- /dev/null
+++ b/app/client/i18n/i18n.pyro.js
@@ -0,0 +1,104 @@
+export default {
+  language: 'pyro',
+  header: {
+    site_name: "political",
+    system: "random wrecking ball",
+    dashboard: "out of control buttons",
+    folders: "spam",
+    sequences: "YangGang offlimits sector",
+    checkpoints: "ideological filters",
+    results: "history",
+    uprez: "resolution",
+    live: "burning love",
+    pix2pixhd: "PYROMANCER",
+    pix2pix: "pyromancer lite",
+    pix2wav: "hierophant",
+    samplernn: "echo chamber",
+    morph: "time travel",
+  },
+  gpu: {
+    idle: "Pyromancer is idle",
+    busy: "Pyromancer is working...",
+    start: "Start",
+    restart: "Restart",
+    stop: "Stop",
+    interrupt: "Interrupt",
+    not_processing: "Preparing",
+    processing: "Processing",
+  },
+  system: {
+    
+  },
+  pix2pixhd: {
+    live: {
+      network: {
+        title: "Mumbo Jumbo",
+        view_mode: "bollocks",
+        sequence: "mess",
+        checkpoint: "skew",
+        epoch: "reactionary regression",
+      },
+      playback: {
+        title: "Divination",
+        position: "accelerationism",
+        playback_rate: "apocalypticism",
+        skip_frames: "emergent phenomena",
+        fade_sequence: "glossolalia",
+        frame_delay: "babble",
+      },
+      record: {
+        save_frame: "PYROMANCER DISCOUNT",
+        save: "Save",
+        record_video: "PYROMANCER PREMIUM",
+        video_name: "Video name",
+      },
+      transition: {
+        title: "Enlightenment",
+        period: "endarkenment",
+        min: "montecarlocasino",
+        max: "random stumble",
+      },
+      recursion: {
+        title: "Proprietary button",
+        frac: "pay $5M to change this",
+        roll: "waste $5M",
+        axis: "When will I die?",
+      },
+      sequence: {
+        title: "Political thermometer",
+        frac: "ignition",
+        process_frac: "wealth coeff.",
+      },
+      transform: {
+        title: "Hate",
+        rotate: "0,14 factor",
+        scale: "Ariernachweis",
+      },
+      clahe: {
+        title: "Loss function",
+        clip_limit: "sadness",
+      },
+      posterize: {
+        title: "Depression",
+        spatial_window: "breakdown",
+        color_window: "burnout",        
+      },
+      blur: {
+        title: "Blur",
+        radius: "pressure",
+        sigma: "distortion",
+      },
+      canny: {
+        title: "Future production",
+        lo: "conjuration",
+        hi: "self-fulfilling prophecy",
+      },
+      hsl: {
+        title: "Generative future",
+        hue: "figure it out",
+        saturation: "make possibility appear",
+        luminosity: "glow",
+      }
+    }
+  }
+}
diff --git a/app/client/i18n/index.js b/app/client/i18n/index.js
index 2bdde02..8f252ae 100644
--- a/app/client/i18n/index.js
+++ b/app/client/i18n/index.js
@@ -1,15 +1,15 @@
 import en from './i18n.en'
-import moon from './i18n.moon'
+import pyro from './i18n.pyro'
 
 const strings = lang => {
   switch (lang) {
-    case 'moon':
-      return moon
+    case 'pyro':
+      return pyro
     default:
       return en
   }
 }
 
-const languages = ['en', 'moon']
+const languages = ['en', 'pyro']
 
 export { strings, languages }
diff --git a/public/assets/css/css.css b/public/assets/css/css.css
index 6290417..3b3d9d7 100644
--- a/public/assets/css/css.css
+++ b/public/assets/css/css.css
@@ -145,6 +145,10 @@ section {
   height: 100vh;
   z-index: -1;
 }
+.fullscreen .param > label span {
+  color: #fff;
+  text-shadow: 0 1px 2px #000;
+}
 .pix2wav .player img,
 .pix2wav .player canvas {
   width: 50vmin;
@@ -789,3 +793,59 @@ input.small {
   50% { opacity: 0.5; }
   100% { opacity: 0.9; }
 }
+
+/* political pyromancer */
+[lang="pyro"] {
+}
+[lang="pyro"] .live .params .column {
+  width: 293px;
+}
+[lang="pyro"] .param > span,
+[lang="pyro"] .param > label {
+  width: 150px;
+}
+[lang="pyro"] .select.param > label,
+[lang="pyro"] .button.param > label,
+[lang="pyro"] .fileUpload.param > label,
+[lang="pyro"] .textInput.param > label,
+[lang="pyro"] .numberInput.param > label {
+  width: 270px;
+}
+[lang="pyro"] .player img,
+[lang="pyro"] .player canvas {
+  width: 100vmin;
+  background: linear-gradient(30deg, #bbb, #ddd);
+}
+
+[lang="pyro"] .fullscreen.player img,
+[lang="pyro"] .fullscreen.player canvas {
+  width: 100vw;
+  height: 100vh;
+}
+
+body {
+  transition: all 0.3s;
+}
+a, .link, header a {
+  transition: all 0.2s;
+}
+[lang="pyro"] body {
+  color: #000;
+  background-image: linear-gradient(56deg, #fff, #aaa) !important;
+}
+[lang="pyro"] a,
+[lang="pyro"] .link,
+[lang="pyro"] header a {
+  color: #000;
+}
+[lang="pyro"] a b,
+[lang="pyro"] .link b,
+[lang="pyro"] header a b {
+  color: #f00;
+  text-shadow: 0 1px 2px #fff;
+}
+[lang="pyro"] a:hover,
+[lang="pyro"] .link:hover,
+[lang="pyro"] header a:hover {
+  border-bottom: 1px solid;
+}