button madness

2019-09-13 14:52:16 +10:00
parent 1fc23f424f
commit 75fe96b265
10 changed files with 404 additions and 17 deletions
@@ -75,9 +75,14 @@ function Header(args) {
            <div class="options">
                <button
                    onClick={() => navTo('play')}
-                    class={`logo login-btn ${nav === 'play' ? 'highlight' : ''}`}>
+                    class='logo login-btn'>
                    &nbsp;
                </button>
+                <button
+                    onClick={() => navTo('play')}
+                    class={`login-btn ${nav === 'play' ? 'highlight' : ''}`}>
+                    Play
+                </button>
                <button
                    onClick={() => navTo('shop')}
                    class={`login-btn ${nav === 'shop' ? 'highlight' : ''}`}>
@@ -71,6 +71,11 @@ function JoinButtons(args) {
                    type="submit">
                    Learn
                </button>
+                <button
+                    class='discord-btn'
+                    onClick={() => document.location.assign('https://discord.gg/YJJgurM')}>
+                    &nbsp;
+                </button>
            </div>
        </aside>
    );
@@ -0,0 +1,177 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="800mm"
+   height="500mm"
+   viewBox="0 0 800 500"
+   version="1.1"
+   id="svg16"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="mnml.4.svg"
+   inkscape:export-filename="/home/ntr/Dropbox/mnml/mnml.4.png"
+   inkscape:export-xdpi="33.290001"
+   inkscape:export-ydpi="33.290001">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.22244843"
+     inkscape:cx="763.22194"
+     inkscape:cy="952.76605"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-grids="false"
+     inkscape:window-width="2560"
+     inkscape:window-height="1417"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid18"
+       color="#ff453f"
+       opacity="0.1254902"
+       empcolor="#ff453f"
+       empopacity="0.25098039"
+       spacingx="13.229167"
+       spacingy="13.229167"
+       originx="-318.50419"
+       originy="-300.77663" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata13">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-318.50418,503.77661)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:179.92054749px;line-height:1.25;font-family:Jura;-inkscape-font-specification:'Jura, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f5f5f5;fill-opacity:1;stroke:none;stroke-width:84.3377533;stroke-miterlimit:4;stroke-dasharray:none"
+       x="366.74548"
+       y="-214.34631"
+       id="text22"><tspan
+         sodipodi:role="line"
+         id="tspan20"
+         x="366.74548"
+         y="-214.34631"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:179.92054749px;font-family:Jura;-inkscape-font-specification:'Jura, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f5f5f5;fill-opacity:1;stroke:none;stroke-width:84.3377533;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0">mnml.gg</tspan></text>
+    <g
+       id="g936"
+       transform="matrix(0.54443942,0,0,0.54443942,664.50223,-143.74083)"
+       style="fill:none;stroke:#f5f5f5;stroke-width:5.92435312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <polygon
+         id="polygon920"
+         points="10,190 100,10 190,190 "
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.92435312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <polygon
+         id="polygon922"
+         points="40,170 100,50 160,170 "
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.92435312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <polygon
+         id="polygon924"
+         points="70,150 100,90 130,150 "
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.92435312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <g
+       id="g986"
+       transform="matrix(0.55531716,0,0,0.55531716,375.75615,-145.82532)"
+       style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <rect
+         id="rect970"
+         height="180"
+         width="180"
+         y="10"
+         x="10"
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         id="rect972"
+         height="120"
+         width="120"
+         y="40"
+         x="40"
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <rect
+         id="rect974"
+         height="60"
+         width="60"
+         y="70"
+         x="70"
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <g
+       id="g1136"
+       transform="matrix(0.54579247,0,0,0.54579247,952.02526,-144.87285)"
+       style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+      <circle
+         id="ellipse1120"
+         cy="100"
+         cx="100"
+         r="30"
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <circle
+         id="ellipse1122"
+         cy="100"
+         cx="100"
+         r="60"
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <circle
+         id="ellipse1124"
+         cy="100"
+         cx="100"
+         r="90"
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+    <g
+       id="g5700"
+       transform="translate(61.243363,-7.5514839)">
+      <circle
+         style="fill:none;stroke:#a52a2a;stroke-width:8.4862175;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         r="48.673557"
+         cx="371.42084"
+         cy="-408.40045"
+         id="circle1125" />
+      <circle
+         id="circle1132"
+         cy="-408.40045"
+         cx="657.2608"
+         r="48.673557"
+         style="fill:none;stroke:#1ff01f;stroke-width:8.48621655;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <circle
+         style="fill:none;stroke:#3050f8;stroke-width:8.48621559;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         r="48.673557"
+         cx="943.10077"
+         cy="-407.21103"
+         id="circle1134" />
+    </g>
+    <path
+       style="fill:none;stroke:#f5f5fa;stroke-width:5.29166651;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 334.62953,307.09686 h 476.24812 l 66.30344,66.30345 h 219.95901"
+       id="path1152"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="800mm"
+   height="800mm"
+   viewBox="0 0 800 800"
+   version="1.1"
+   id="svg16"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="mnml.plain.svg"
+   inkscape:export-filename="/home/ntr/Dropbox/mnml/mnml.discord.png"
+   inkscape:export-xdpi="33.290001"
+   inkscape:export-ydpi="33.290001">
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.22244843"
+     inkscape:cx="814.91932"
+     inkscape:cy="952.76605"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-grids="false"
+     inkscape:window-width="2560"
+     inkscape:window-height="1417"
+     inkscape:window-x="0"
+     inkscape:window-y="23"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid18"
+       color="#ff453f"
+       opacity="0.1254902"
+       empcolor="#ff453f"
+       empopacity="0.25098039"
+       spacingx="13.229167"
+       spacingy="13.229167"
+       originx="-318.50419"
+       originy="-300.77663" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata13">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-318.50418,803.77661)">
+    <g
+       id="g5786"
+       transform="translate(-7.5725212e-6,-150)">
+      <text
+         id="text22"
+         y="-214.34631"
+         x="366.74548"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:179.92054749px;line-height:1.25;font-family:Jura;-inkscape-font-specification:'Jura, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#f5f5f5;fill-opacity:1;stroke:none;stroke-width:84.3377533;stroke-miterlimit:4;stroke-dasharray:none"
+         xml:space="preserve"><tspan
+           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:179.92054749px;font-family:Jura;-inkscape-font-specification:'Jura, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#f5f5f5;fill-opacity:1;stroke:none;stroke-width:84.3377533;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
+           y="-214.34631"
+           x="366.74548"
+           id="tspan20"
+           sodipodi:role="line">mnml.gg</tspan></text>
+      <g
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.92435312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.54443942,0,0,0.54443942,664.50223,-143.74083)"
+         id="g936">
+        <polygon
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.92435312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           points="100,10 190,190 10,190 "
+           id="polygon920" />
+        <polygon
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.92435312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           points="100,50 160,170 40,170 "
+           id="polygon922" />
+        <polygon
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.92435312;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           points="100,90 130,150 70,150 "
+           id="polygon924" />
+      </g>
+      <g
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.55531716,0,0,0.55531716,375.75615,-145.82532)"
+         id="g986">
+        <rect
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           x="10"
+           y="10"
+           width="180"
+           height="180"
+           id="rect970" />
+        <rect
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           x="40"
+           y="40"
+           width="120"
+           height="120"
+           id="rect972" />
+        <rect
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           x="70"
+           y="70"
+           width="60"
+           height="60"
+           id="rect974" />
+      </g>
+      <g
+         style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         transform="matrix(0.54579247,0,0,0.54579247,952.02526,-144.87285)"
+         id="g1136">
+        <circle
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           r="30"
+           cx="100"
+           cy="100"
+           id="ellipse1120" />
+        <circle
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           r="60"
+           cx="100"
+           cy="100"
+           id="ellipse1122" />
+        <circle
+           style="fill:none;stroke:#f5f5f5;stroke-width:5.62481165;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           r="90"
+           cx="100"
+           cy="100"
+           id="ellipse1124" />
+      </g>
+      <g
+         transform="translate(61.243363,-7.5514839)"
+         id="g5700">
+        <circle
+           id="circle1125"
+           cy="-408.40045"
+           cx="371.42084"
+           r="48.673557"
+           style="fill:none;stroke:#a52a2a;stroke-width:8.4862175;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+        <circle
+           style="fill:none;stroke:#1ff01f;stroke-width:8.48621655;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           r="48.673557"
+           cx="657.2608"
+           cy="-408.40045"
+           id="circle1132" />
+        <circle
+           id="circle1134"
+           cy="-407.21103"
+           cx="943.10077"
+           r="48.673557"
+           style="fill:none;stroke:#3050f8;stroke-width:8.48621559;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </g>
+    <path
+       style="fill:none;stroke:#f5f5fa;stroke-width:5.29166651;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 334.62953,307.09686 h 476.24812 l 66.30344,66.30345 h 219.95901"
+       id="path1152"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>
@@ -4,7 +4,7 @@ const preact = require('preact');
 const Login = require('./welcome.login');
 const Register = require('./welcome.register');
 const Help = require('./welcome.help');
-const About = require('./welcome.about');
+// const About = require('./welcome.about');
 const Demo = require('./demo');

 function Welcome() {
@@ -14,7 +14,6 @@ function Welcome() {
    const pageEl = () => {
        if (page === 'login') return <Login />;
        if (page === 'register') return <Register />;
-        if (page === 'about') return <About navRegister={navRegister} />;
        if (page === 'help') return <Help />;
        return false;
    };
@@ -23,6 +22,11 @@ function Welcome() {
        <main class="menu">
            <header>
                <div class="options">
+                    <button
+                        onClick={() => this.setState({ page: 'login' })}
+                        class='logo login-btn'>
+                        &nbsp;
+                    </button>
                    <button
                        class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
                        disabled={page === 'login'}
@@ -35,12 +39,6 @@ function Welcome() {
                        onClick={() => this.setState({ page: 'register' })}>
                        Register
                    </button>
-                    <button
-                        class={`login-btn ${page === 'about' ? 'highlight' : ''}`}
-                        disabled={page === 'about'}
-                        onClick={() => this.setState({ page: 'about' })}>
-                        About
-                    </button>
                    <button
                        class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
                        disabled={page === 'help'}
@@ -52,7 +50,6 @@ function Welcome() {
            <div class="top">
                <section>
                    <div class="news">
-                        <h1>mnml.gg</h1>
                        <p>
                            mnml is a turn-based 1v1 strategy game in an abstract setting.<br />
                            outplay your opponents by building your team of 3 constructs from a shifting meta of skills, effects and specialisations.<br />