From b891091d1b10a5275a0f6885ff7068914757fcea Mon Sep 17 00:00:00 2001 From: Kai Vogelgesang Date: Tue, 11 Oct 2022 18:35:16 +0200 Subject: [PATCH] Add page content, Add icons --- package-lock.json | 121 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 3 ++ src/PartyPage.css | 56 +++++++++++---------- src/PartyPage.tsx | 78 ++++++++++++++++++++++++++++-- 4 files changed, 229 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8aeb59f..49c0a66 100644 --- 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", diff --git a/package.json b/package.json index e9f6b3b..626bb7c 100644 --- 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", diff --git a/src/PartyPage.css b/src/PartyPage.css index fd62b40..9461db3 100644 --- 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; +} \ No newline at end of file diff --git a/src/PartyPage.tsx b/src/PartyPage.tsx index effc595..56ac16b 100644 --- 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
-
- Hallo {myDear[partyContext.self.grammatical_gender]} {partyContext.self.name}, - komm doch zur Party! -
+
+
+
+

Hallo {dear} {name},

+

+ am 30. Oktober wird die Uhr wieder auf Winterzeit umgestellt. + Das heißt, theoretisch könnten wir 25 Stunden an einem Tag zocken! +

+

+ Das wollen wir (Kai, Dominic, Jesko) uns natürlich nicht entgehen lassen. + Also veranstalten wir eine mega krasse LAN-Party. + {coming} +

+

+ Wir würden uns sehr freuen, wenn auch du, {dear} {name}, am Start wärst :) +

+
+ + + +
+
+ Mehr Infos + +
+
+
+

Wann und Wo?

+

+ 29. Oktober, 19:00 bis 31. Oktober irgendwann. +

+

+ Mainzer Str. 28, 66111 Saarbrücken +

+

Alter ernsthaft 25 Stunden?

+

+ 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... +

+

Und was wenn ich Hunger bekomme?

+

+ Wir werden ein Curry, Chili o.Ä. kochen. + Bring aber auch gerne Snacks, Getränke, Knoblauchdip oder Kuchen mit :) +

+
+
}; \ No newline at end of file