Add page content, Add icons

2022-10-11 18:35:16 +02:00 · 2022-10-11 18:35:16 +02:00 · b891091d1b
commit b891091d1b
parent 316c92ecd0
4 changed files with 229 additions and 29 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -8,6 +8,9 @@
      "name": "party-template",
      "version": "0.1.0",
      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.2.0",
+        "@fortawesome/free-solid-svg-icons": "^6.2.0",
+        "@fortawesome/react-fontawesome": "^0.2.0",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
@ -2203,6 +2206,51 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
+      "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
+      "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
+      "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.10.7",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@ -8530,6 +8578,13 @@
        "url": "https://opencollective.com/immer"
      }
    },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "optional": true,
+      "peer": true
+    },
    "node_modules/import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -14292,6 +14347,24 @@
      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
    },
+    "node_modules/sass": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/sass-loader": {
      "version": "12.6.0",
      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@ -17987,6 +18060,35 @@
        }
      }
    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
+      "integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
+      "integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
+      "integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.2.0"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
    "@humanwhocodes/config-array": {
      "version": "0.10.7",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.7.tgz",
@ -22604,6 +22706,13 @@
      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.15.tgz",
      "integrity": "sha512-2eB/sswms9AEUSkOm4SbV5Y7Vmt/bKRwByd52jfLkW4OLYeaTP3EEiJ9agqU0O/tq6Dk62Zfj+TJSqfm1rLVGQ=="
    },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "optional": true,
+      "peer": true
+    },
    "import-fresh": {
      "version": "3.3.0",
      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -26586,6 +26695,18 @@
      "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
      "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
    },
+    "sass": {
+      "version": "1.55.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.55.0.tgz",
+      "integrity": "sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
    "sass-loader": {
      "version": "12.6.0",
      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
--- a/package.json
+++ b/package.json
@ -3,6 +3,9 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
--- a/src/PartyPage.css
+++ b/src/PartyPage.css
@ -1,43 +1,49 @@
 .loading {
-    height: 100vh;
-    width: 100vw;
-    background-color: black;
+  height: 100vh;
+  width: 100vw;
+  background-color: black;
 }

 .App {
+  color: white;
+  font-size: calc(10px + 2vmin);
+  text-shadow:
+    -1px -1px 0.2em #000,
+    1px -1px 0.2em #000,
+    -1px 1px 0.2em #000,
+    1px 1px 0.2em #000;
  text-align: center;
+  display: flex;
+  justify-content: center;
 }

-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.container {
+  max-width: 1024px;
 }

-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
+.fullheight {
  min-height: 100vh;
+}
+
+.hero {
  display: flex;
  flex-direction: column;
-  align-items: center;
  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  align-items: center;
 }

-.App-link {
-  color: #61dafb;
+.hero-outer {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }

-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+h1,
+h2 {
+  margin: 1em 0 0.1em 0;
 }
+
+p {
+  margin: 0.3em 0 0.3em 0;
+}
--- a/src/PartyPage.tsx
+++ b/src/PartyPage.tsx
@ -3,6 +3,8 @@ import React, { useContext } from 'react';
 import './PartyPage.css';
 import { PartyContext } from './PartyContext';
 import MatrixBackground from './MatrixBackground';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDown, faCalendarDays, faLocationDot } from '@fortawesome/free-solid-svg-icons';

 const myDear = {
    "m": "lieber",
@ -12,12 +14,80 @@ const myDear = {

 export const PartyPage: React.FC = () => {
    const partyContext = useContext(PartyContext);
+    const dear = myDear[partyContext.self.grammatical_gender];
+    const name = partyContext.self.name;
+    const party = partyContext.party;
+
+    let coming: string;
+    if (party.maybe_coming === 0) {
+        // exact number
+        if (party.definitely_coming === 0) {
+            coming = "Bisher hat noch niemand zugesagt."
+        } else if (party.definitely_coming === 1) {
+            coming = "Bisher hat ein Gast zugesagt."
+        } else {
+            coming = `Es haben schon ${party.definitely_coming} Gäste zugesagt.`
+        }
+    } else {
+        // inexact
+        if (party.definitely_coming === 0 && party.maybe_coming === 1) {
+            coming = "Bisher hat ein Gast vorläufig zugesagt."
+        } else if (party.definitely_coming === 0) {
+            coming = `Bisher haben ${party.maybe_coming} Gäste vorläufig zugesagt.`
+        } else {
+            coming = `Nach den bisherigen Zusagen kommen ${party.definitely_coming} bis ${party.definitely_coming + party.maybe_coming} Gäste.`
+        }
+    }

    return <div className="App">
        <MatrixBackground />
-        <header className="App-header">
-            <span>Hallo {myDear[partyContext.self.grammatical_gender]} {partyContext.self.name},</span>
-            <span>komm doch zur Party!</span>
-        </header>
+        <div className='container'>
+            <div className='hero fullheight'>
+                <div className='hero-outer'></div>
+                <h1>Hallo {dear} {name},</h1>
+                <p>
+                    am <strong> 30. Oktober </strong> wird die Uhr wieder auf Winterzeit umgestellt.
+                    Das heißt, theoretisch könnten wir <strong> 25 Stunden an einem Tag zocken!</strong>
+                </p>
+                <p>
+                    Das wollen wir (Kai, Dominic, Jesko) uns natürlich nicht entgehen lassen.
+                    Also veranstalten wir eine <strong> mega krasse LAN-Party. </strong>
+                    {coming}
+                </p>
+                <p>
+                    Wir würden uns sehr freuen, wenn auch du, {dear} {name}, am Start wärst :)
+                </p>
+                <div className='feedback'>
+                    <button>Auf gehts</button>
+                    <button>Hmm vielleicht</button>
+                    <button>Nee sorry</button>
+                </div>
+                <div className='hero-outer'>
+                    Mehr Infos
+                    <FontAwesomeIcon icon={faAngleDown} />
+                </div>
+            </div>
+            <div className='hero fullheight'>
+                <h2>Wann und Wo?</h2>
+                <p>
+                    <FontAwesomeIcon icon={faCalendarDays} /> <strong>29. Oktober, 19:00</strong> bis <strong>31. Oktober</strong> irgendwann.
+                </p>
+                <p>
+                    <FontAwesomeIcon icon={faLocationDot} /> <strong>Mainzer Str. 28</strong>, 66111 Saarbrücken
+                </p>
+                <h2>Alter ernsthaft 25 Stunden?</h2>
+                <p>
+                    Prinzipiell ja.
+                    Wer möchte kann sich aber gerne auf eine unserer beiden Couches zurückziehen,
+                    oder eine Luftmatratze mitbringen, oder vorher gehen, oder später dazukommen,
+                    oder zwischendurch nach Hause fahren...
+                </p>
+                <h2>Und was wenn ich Hunger bekomme?</h2>
+                <p>
+                    Wir werden ein Curry, Chili o.Ä. kochen.
+                    Bring aber auch gerne Snacks, Getränke, Knoblauchdip oder Kuchen mit :)
+                </p>
+            </div>
+        </div>
    </div>
 };