From ac89e70c3328f9d59e567da2d7e791fb0040a2cf Mon Sep 17 00:00:00 2001
From: Dominic Zimmer <s8dozimm@stud.uni-saarland.de>
Date: Thu, 23 Mar 2023 17:32:56 +0100
Subject: [PATCH] Writeth Invitation

---
 src/PartyPage.css | 112 +++++++++++++++++++++++++++++++++++-----------
 src/PartyPage.tsx |  87 ++++++++++++++++++++++++++---------
 2 files changed, 151 insertions(+), 48 deletions(-)

diff --git a/src/PartyPage.css b/src/PartyPage.css
index 07b1f68..b8b9de5 100644
--- a/src/PartyPage.css
+++ b/src/PartyPage.css
@@ -1,44 +1,102 @@
-.loading {
-    height: 100vh;
-    width: 100vw;
-    background-color: black;
+body {
+    font-family: 'Droid Serif', serif;
+    font-size: 14px;
+    color: #3f3f3f;
+  background-color: rgb(242, 242, 242);
 }
 
-.App {
+h1, h2, h3 {
   text-align: center;
+  text-transform: uppercase;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+h2 {
+  font-style: italic;
+}
+h1 ~ h3 {
+  border-color: #3f3f3f;
+  border-style: solid;
+  border-width: 2px 0px;
+}
+h1 {
+  /*font-size: 40pt;*/
+  margin: 5px 0px;
+}
+h2 {
+  /*font-size: 30pt;*/
+}
+h3 {
+  /*font-size: 16pt;*/
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+main > header, main > section {
+  width: 100%;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+article {
   display: flex;
   flex-direction: column;
+  justify-content: flex-start;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+}
+article > header div {
+  text-align: center;
+}
+article > header {
+  width: 60%;
+  margin-bottom: 20px;
+}
+article > header > hr {
+  border: 1px solid #3f3f3f;
+  border-width: 1px 0px 0px 0px;
+  max-width: min(100px, 20%);
+}
+article > p {
+  text-align: justify;
+}
+a {
+  color: #3f3f3f;
 }
 
-.App-link {
-  color: #61dafb;
+#root {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+main {
+  padding: 1em;
+  box-sizing: border-box;
+  width: min(100%, 900px);
+  background-color: #f9f7f1;
+  height: 100%;;
 }
+
+.zusagen {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 15px;
+  font-style: italic;
+}
+.zusagen > div {
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+.zusagen .mark {
+  color: transparent;
+  user-select: none;
+}
+.zusagen > div.active > .mark {
+  color: #3f3f3f;
+}
+.answer {
+  font-style: italic;
+}
\ No newline at end of file
diff --git a/src/PartyPage.tsx b/src/PartyPage.tsx
index 8ca2536..8bb83ea 100644
--- a/src/PartyPage.tsx
+++ b/src/PartyPage.tsx
@@ -1,27 +1,72 @@
 
-import React, { useContext } from 'react';
-import logo from './logo.svg';
+import React, { useContext, useState } from 'react';
+import { APIEndPoint, PartyContext } from './PartyContext';
 import './PartyPage.css';
-import { PartyContext } from './PartyContext';
+import { enableDebugMode, modifySelfRequest, parseURI } from './partyApi';
+
+enableDebugMode();
 
 export const PartyPage: React.FC = () => {
-    const partyContext = useContext(PartyContext);
-    
-    return <div className="App" >
-        <header className="App-header" >
-            <img src={logo} className="App-logo" alt="logo" />
-            <p>
-                Edit <code> src/PartyPage.tsx </code> and save to reload.
-            </p>
-            <a
-                className="App-link"
-                href="https://reactjs.org"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                Learn React
-            </a>
-            <span>Hello {partyContext.self.name}</span>
+    const {self} = useContext(PartyContext);
+    const [coming, setComing] = useState(self.coming || "maybe");
+
+    const zusage = (status: "yes" | "no"| "maybe") => async () => {
+        const endpoint = parseURI(window.location.href) as APIEndPoint;
+        await modifySelfRequest(endpoint, {coming: status});
+        setComing(status);
+    };
+
+    const gender = (options: [string,string,string]) => {
+        if (self.grammatical_gender === "m") return options[0];
+        if (self.grammatical_gender === "f") return options[1];
+        return options[2];
+    }
+
+    return <main>
+        <header>
+            <h1>Dodo News</h1>
+            <h3>
+                Saarbrücken, Saarland — Party News — Written March 7
+            </h3>
         </header>
-    </div>
+        <section>
+            <article>
+                <header>
+                    <h2>Boy lives past Twenty-Six</h2>
+                    <hr />
+                    <div>
+                        by DOMINIC ZIMMER
+                    </div>
+                    <hr />
+                </header>
+                <p>
+                    Breaking News! The very author of this article has reached twenty-seven years of age.
+                    Although it is custom for him to celebrate his anniversaries, he greatly fears becoming a member of the <a href="https://en.wikipedia.org/wiki/27_Club">27 club</a> before his next anniversary.
+                    Henceforth, he is to host a most memorable party — hoping to propitiate his upcoming year's destiny.
+                </p>
+                <p>
+                    On the evening of April 14<sup>th</sup>, he is inviting his loved ones (such as Hazal) and his most beloved enemies (such as {self.name}) to Mainzer Straße 28 to align the stars of the forthcoming year in his favor.
+                    This jolly event shall bring chatter and laughter, drowning vital organs in ethanol, and a fair share of gluttony.
+                    To ensure that every attendee's needs are fulfilled, he asks them to bring consumables, and to declare their arrival ahead of time.
+                </p>
+                <p className="answer">
+                    <span>{self.name} declares that {gender(["he","she","they"])}</span>
+                </p>
+                <div className="zusagen">
+                    <div onClick={zusage("yes")} className={coming === "yes" ? "active": ""}>
+                        <span>attends</span>
+                        <span className="mark">✘</span>
+                    </div>
+                    <div onClick={zusage("maybe")} className={(coming === "maybe" || coming === null) ? "active" : ""}>
+                        <span>contemplates</span>
+                        <span className="mark">✘</span>
+                    </div>
+                    <div onClick={zusage("no")} className={coming === "no" ? "active": ""}>
+                        <span>disappoints</span>
+                        <span className="mark">✘</span>
+                    </div>
+                </div>
+            </article>
+        </section>
+    </main>
 };
\ No newline at end of file