early ui stuff

2025-04-25 12:19:10 +00:00 · 2019-02-25 00:48:16 -06:00 · 2019-02-25 00:48:16 -06:00 · 6f3eca7a64
commit 6f3eca7a64
parent 6770751ba1
3 changed files with 142 additions and 0 deletions
--- a/UI/components/global-colors.js
+++ b/UI/components/global-colors.js
@ -0,0 +1,77 @@
+export const colors = {
+  white: '#efefef',
+  c9: '#EBD6D4',
+  c7: '#ab9b9a',
+  c5: '#756867',
+  c3: '#5d5352',
+  c1: '#453e3d',
+  dark: '#332d2d',
+  green: '#46b646',
+  red: '#e95353',
+  discord: '#7289da'
+}
+
+const getColors = () => {
+  Object.keys(colors).map(key => {
+    const nk = key.replace(/c([0-9])/, '$1')
+    return `--c-${nk}: ${colors[key]};`
+  }).join('  \n')
+}
+
+const Colors = () => <style global jsx>{`
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "source-han-sans-japanese", "Source Sans Pro", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.font-sans-serif {
+  font-family: sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+:root {
+  ${getColors()}
+}
+
+::selection {
+  background: var(--c-9);
+  color: var(--c-1);
+}
+
+::-moz-selection {
+  background: var(--c-9);
+  color: var(--c-1);
+}
+
+html {
+  overflow: hidden;
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  overflow: auto;
+  color: var(--c-white);
+  background-color: var(--c-1);
+  overflow-y: hidden;
+}
+
+h1,h2,h3,h4,h5,h6 {
+  color: var(--c-9);
+}
+
+.fade-element {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.fade {
+  opacity: 0;
+}
+
+`}</style>
+
+export default Colors
--- a/UI/pages/_app.js
+++ b/UI/pages/_app.js
@ -0,0 +1,58 @@
+import App, { Container } from 'next/app'
+import Head from 'next/head'
+import GlobalColors from '../components/global-colors'
+
+class RoleypolyApp extends App {
+  static async getInitialProps ({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+
+  componentDidMount () {
+    this.loadTypekit(document)
+  }
+
+  loadTypekit (d) {
+    var config = {
+      kitId: 'bck0pci',
+      scriptTimeout: 3000,
+      async: true
+    }
+    const h = d.documentElement
+    const t = setTimeout(function () { h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive' }, config.scriptTimeout)
+    const tk = d.createElement('script')
+    const s = d.getElementsByTagName('script')[0]
+    let f = false
+    let a
+    h.className += ' wf-loading'
+    tk.src = 'https://use.typekit.net/' + config.kitId + '.js'
+    tk.async = true
+    tk.onload = tk.onreadystatechange = function () {
+      a = this.readyState
+      if (f || (a && a !== 'complete' && a !== 'loaded')) return
+      f = true
+      clearTimeout(t)
+      try { window.Typekit.load(config) } catch (e) {}
+    }
+    s.parentNode.insertBefore(tk, s)
+  }
+
+  render () {
+    const { Component, pageProps, router } = this.props
+
+    return (
+      <Container>
+        <Head />
+        <GlobalColors />
+        <Component {...pageProps} router={router} />
+      </Container>
+    )
+  }
+}
+
+export default RoleypolyApp
--- a/UI/pages/_internal/_server.js
+++ b/UI/pages/_internal/_server.js
@ -0,0 +1,7 @@
+const Server = ({ router: { query: { id } } }) => (
+  <div>
+    {id}
+  </div>
+)
+
+export default Server