partypages/dreihochdrei
2
0
Fork 0
generated from partypages/party-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Writeth Invitation

Browse Source
This commit is contained in:
Dominic Zimmer 2023-03-23 17:32:56 +01:00
parent 13e7864815
commit ac89e70c33
2 changed files with 151 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/PartyPage.css
View File

@ -1,44 +1,102 @@
.loading { body {
height: 100vh; font-family: 'Droid Serif', serif;
width: 100vw; font-size: 14px;
background-color: black; color: #3f3f3f;
background-color: rgb(242, 242, 242);
} }
.App { h1, h2, h3 {
text-align: center; text-align: center;
text-transform: uppercase;
} }
.App-logo { h2 {
height: 40vmin; font-style: italic;
pointer-events: none; }
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) { main > header, main > section {
.App-logo { width: 100%;
animation: App-logo-spin infinite 20s linear;
}
} }
.App-header { article {
background-color: #282c34;
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
align-items: center; align-items: center;
justify-content: center; }
font-size: calc(10px + 2vmin); article > header div {
color: white; 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 { #root {
color: #61dafb; width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
} }
@keyframes App-logo-spin { main {
from { padding: 1em;
transform: rotate(0deg); box-sizing: border-box;
} width: min(100%, 900px);
to { background-color: #f9f7f1;
transform: rotate(360deg); 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;
}

87
src/PartyPage.tsx
View File

@ -1,27 +1,72 @@
import React, { useContext } from 'react'; import React, { useContext, useState } from 'react';
import logo from './logo.svg'; import { APIEndPoint, PartyContext } from './PartyContext';
import './PartyPage.css'; import './PartyPage.css';
import { PartyContext } from './PartyContext'; import { enableDebugMode, modifySelfRequest, parseURI } from './partyApi';
enableDebugMode();
export const PartyPage: React.FC = () => { export const PartyPage: React.FC = () => {
const partyContext = useContext(PartyContext); const {self} = useContext(PartyContext);
const [coming, setComing] = useState(self.coming || "maybe");
return <div className="App" >
<header className="App-header" > const zusage = (status: "yes" | "no"| "maybe") => async () => {
<img src={logo} className="App-logo" alt="logo" /> const endpoint = parseURI(window.location.href) as APIEndPoint;
<p> await modifySelfRequest(endpoint, {coming: status});
Edit <code> src/PartyPage.tsx </code> and save to reload. setComing(status);
</p> };
<a
className="App-link" const gender = (options: [string,string,string]) => {
href="https://reactjs.org" if (self.grammatical_gender === "m") return options[0];
target="_blank" if (self.grammatical_gender === "f") return options[1];
rel="noopener noreferrer" return options[2];
> }
Learn React
</a> return <main>
<span>Hello {partyContext.self.name}</span> <header>
<h1>Dodo News</h1>
<h3>
Saarbrücken, Saarland — Party News — Written March 7
</h3>
</header> </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>
}; };