Improve "More Infos" visibility on mobile

.drone.yml

@@ -14,7 +14,7 @@ steps:
     ssh_key:
       from_secret: rsync_key
     source: build/
-    destination: pelipper@oreburgh.leafbla.de:/srv/docker/party/nginx/html/${DRONE_REPO_NAME}/
+    destination: pelipper@oreburgh.leafbla.de:/srv/docker/party/nginx/html/lan/
 
 trigger:
   branch:

README.md

@@ -4,27 +4,9 @@ The API documentation is available [here](https://party.leafbla.de/api/docs)
 
 # CI Setup
 
-To enable automatic CI deployment for this repository, you need to do the following:
+[![Build Status](https://drone.eterna.leafbla.de/api/badges/partypages/lan-2022-10/status.svg)](https://drone.eterna.leafbla.de/partypages/lan-2022-10)
-
-1. Adapt `.drone.yml` such that the output is deployed to where you want to.
-
-   By default, this is `<repo-name>.party.leafbla.de`.
-
-1. Enable CI for the repository in [drone](https://drone.eterna.leafbla.de/).
-
-   Search the repository name in the search bar (you might need to click the "sync" button to make it show up) and click "activate repository"
-
-1. Add the required secrets so that the CI can deploy to oreburgh
-   - Secret Name: `rsync_key`
-
-     Secret Value: Find "pelipper ssh key" in Bitwarden and paste the content of `id_rsa`
-
-   - Secret Name: `docker_config`
-
-     Secret Value: Find "Docker registry credentials" in Bitwarden and paste the content of the note.
-
-The next time you push to the repository, the pipeline should run.
 
+This Repository is configured to automatically deploy to [lan.party.leafbla.de](https://lan.party.leafbla.de).
 
 # Getting Started with Create React App
 

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",

src/MatrixBackground.tsx

@@ -0,0 +1,227 @@
+import React, { useEffect, useRef } from "react";
+
+const CHAR_WIDTH = 10; // canvas pixels
+const CHAR_HEIGHT = 12; // canvas pixels
+
+const ROWS = 50;
+const COLS = 50;
+
+const TRAIL_COUNT = 50;
+
+const ALPHABET = (() => {
+    let alphabet = [];
+
+    // 0 - 9
+    for (let charCode = "0".charCodeAt(0); charCode <= "9".charCodeAt(0); ++charCode) {
+        alphabet.push(String.fromCharCode(charCode));
+    }
+
+    // A - Z
+    for (let charCode = "A".charCodeAt(0); charCode <= "Z".charCodeAt(0); ++charCode) {
+        alphabet.push(String.fromCharCode(charCode));
+    }
+
+    // https://en.wikipedia.org/wiki/Half-width_kana
+    for (let codePoint = 0xFF71; codePoint <= 0xFF9D; ++codePoint) {
+        alphabet.push(String.fromCodePoint(codePoint));
+    }
+
+    return alphabet;
+})();
+
+// TODO add more
+const MEMES = [
+    "ABFAHRT",
+    "BALLERN",
+    "NO SLEEP",
+    "ZOCKEN ALTER",
+    "MEGA KRASSE LAN",
+    "ｱﾔﾔｱﾔﾔ", // Ayaya Ayaya
+    "ｵﾏｴﾊﾓｳｼﾝﾃｲﾙ", // Omae wa mou shindeiru
+]
+
+const NORMAL_STYLE = "#020";
+const MEME_STYLE = "#050";
+const HEAD_STYLE = "#555";
+
+/**
+ * Likelihood of a meme to appear after each character.
+ * 
+ * 0.1 means there is one meme approximately every 10 chars.
+ */
+const MEME_PROBABILITY = 0.02;
+
+type Trail = {
+    /** Column in which the trail falls. Should be between 0 and `COLS` */
+    col: number,
+    /** Row where the head (lowest character) of the trail is. May be negative or above `ROWS`. */
+    head: number,
+    /** Number of characters to display above, including the head */
+    length: number,
+
+    /**
+     * Vertical segments of text to show in the trail body
+     * 
+     * The sum of each `chars.length` should be at least `ROWS`, but may be greater.
+     */
+    content: {
+        chars: string,
+        fillStyle: string, // TODO is there a better type for this?
+    }[],
+}
+
+function randomTrail(): Trail {
+    let content = []
+    let current = "";
+    let totalLength = 0;
+
+    while (totalLength < ROWS) {
+        if (Math.random() < MEME_PROBABILITY) {
+            // Commit the current non-meme chars
+            if (current.length > 0) {
+                content.push({
+                    chars: current,
+                    fillStyle: NORMAL_STYLE,
+                });
+                current = "";
+            }
+
+            // Pick and add a random meme
+            const meme = choice(MEMES);
+
+            // If the meme has spaces, replace them with random characters
+            // This also places a random character after the meme, ensuring
+            // that two memes don't come immediately after each other
+            for (let chunk of meme.split(" ")) {
+                content.push({
+                    chars: chunk,
+                    fillStyle: MEME_STYLE,
+                });
+                content.push({
+                    chars: choice(ALPHABET),
+                    fillStyle: NORMAL_STYLE,
+                });
+
+            }
+            totalLength += meme.length + 1;
+        } else {
+            // No meme, just add one random character
+            current += choice(ALPHABET);
+            totalLength += 1;
+        }
+    }
+    if (current.length > 0) {
+        content.push({
+            chars: current,
+            fillStyle: NORMAL_STYLE,
+        });
+    }
+
+    return {
+        col: randRange(0, COLS),
+        head: randRange(-1 * COLS, 0), // spawn above the screen initially
+        length: randRange(5, 20),
+
+        content: content
+    };
+}
+
+function randRange(from: number, to: number) {
+    return from + Math.floor((to - from + 1) * Math.random());
+}
+
+function choice<T>(candidates: T[]): T {
+    return candidates[randRange(0, candidates.length - 1)];
+}
+
+const MatrixBackground = () => {
+    const canvasRef: React.MutableRefObject<HTMLCanvasElement | null> = useRef(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current
+        if (canvas === null) return;
+
+        const ctx = canvas.getContext("2d");
+        if (ctx === null) throw new Error('getContext("2d") returned null!');
+
+        ctx.font = '10pt monospace';
+
+        const width = canvas.width;
+        const height = canvas.height;
+
+        const trails: Trail[] = new Array(TRAIL_COUNT).fill(0).map((_) => randomTrail());
+
+        const matrixEffect = () => {
+            ctx.fillStyle = "#000";
+            ctx.fillRect(0, 0, width, height);
+
+            // draw all trails
+            for (let trail of trails) {
+                const x = trail.col * CHAR_WIDTH;
+                let idx = 0;
+
+                // TODO this can probably be optimized
+                outer:
+                for (let item of trail.content) {
+                    for (let char of item.chars) {
+                        // stop drawing characters after reaching the head
+                        if (idx > trail.head) break outer;
+
+                        // skip characters behind the trail end
+                        if (idx < trail.head - trail.length) {
+                            idx += 1;
+                            continue;
+                        }
+
+                        // draw the character, overwriting any that are already there
+                        const y = idx * CHAR_HEIGHT;
+                        ctx.fillStyle = "#000";
+                        ctx.fillRect(x, y - CHAR_HEIGHT, CHAR_WIDTH, CHAR_HEIGHT);
+                        ctx.fillStyle = (idx === trail.head ? HEAD_STYLE : item.fillStyle);
+                        ctx.fillText(char, x, y);
+
+                        idx += 1;
+                    }
+                }
+            }
+
+            // update all trails
+            for (let i in trails) {
+                trails[i].head += 1;
+
+                if (trails[i].head - trails[i].length > ROWS) {
+                    // trail is completely off-screen, generate a new one
+                    trails[i] = randomTrail();
+                    trails[i].head = 0;
+                }
+            }
+        }
+
+        const interval = setInterval(matrixEffect, 100);
+        return () => {
+            clearInterval(interval);
+        }
+    }, [canvasRef]);
+
+    return (
+        <canvas
+            ref={canvasRef}
+            style={{
+                background: '#000000',
+                position: 'fixed',
+                width: '100%',
+                height: '100%',
+                zIndex: -1,
+                top: '0',
+                left: '0',
+                objectFit: 'cover',
+                imageRendering: 'crisp-edges',
+            }}
+            width={COLS * CHAR_WIDTH}
+            height={ROWS * CHAR_HEIGHT}
+        />
+    )
+
+};
+
+export default MatrixBackground;

src/PartyContext.tsx

@@ -53,6 +53,7 @@ export const PartyContextProvider: React.FC<{ children: React.ReactNode }> = (pr
 
     useEffect(() => {
         loadData();
+        // eslint-disable-next-line
     }, [apiEndpoint]);
 
     return partyContext ?

src/PartyPage.css

@@ -1,44 +1,56 @@
 .loading {
-    height: 100vh;
+  height: 100vh;
-    width: 100vw;
+  width: 100vw;
-    background-color: black;
+  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 {
+.container {
-  height: 40vmin;
+  max-width: 1024px;
-  pointer-events: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
+.fullheight {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
   min-height: 100vh;
+}
+
+.hero {
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
+  align-items: center;
-  color: white;
 }
 
-.App-link {
+.hero-outer {
-  color: #61dafb;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-bottom: 0.5em;
 }
 
-@keyframes App-logo-spin {
+@media (min-width: 1024px) {
-  from {
+  .hero-outer {
-    transform: rotate(0deg);
+    justify-content: flex-end;
-  }
-  to {
-    transform: rotate(360deg);
   }
 }
+
+h1,
+h2 {
+  margin: 1em 0 0.1em 0;
+}
+
+p {
+  margin: 0.3em 0 0.3em 0;
+}

src/PartyPage.tsx

@@ -1,27 +1,93 @@
 
 import React, { useContext } from 'react';
-import logo from './logo.svg';
 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",
+    "f": "liebe",
+    "d": "liebes",
+};
 
 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;
 
-    return <div className="App" >
+    let coming: string;
-        <header className="App-header" >
+    if (party.maybe_coming === 0) {
-            <img src={logo} className="App-logo" alt="logo" />
+        // exact number
-            <p>
+        if (party.definitely_coming === 0) {
-                Edit <code> src/PartyPage.tsx </code> and save to reload.
+            coming = "Bisher hat noch niemand zugesagt."
-            </p>
+        } else if (party.definitely_coming === 1) {
-            <a
+            coming = "Bisher hat ein Gast zugesagt."
-                className="App-link"
+        } else {
-                href="https://reactjs.org"
+            coming = `Es haben schon ${party.definitely_coming} Gäste zugesagt.`
-                target="_blank"
+        }
-                rel="noopener noreferrer"
+    } else {
-            >
+        // inexact
-                Learn React
+        if (party.definitely_coming === 0 && party.maybe_coming === 1) {
-            </a>
+            coming = "Bisher hat ein Gast vorläufig zugesagt."
-            <span>Hello {partyContext.self.name}</span>
+        } else if (party.definitely_coming === 0) {
-        </header>
+            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 />
+        <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>
 };

src/partyApi.ts

@@ -1,7 +1,7 @@
 import { APIEndPoint, PartyStatus, SelfStatus } from "./PartyContext";
 
 export const parseURI = (uri: string): APIEndPoint | undefined => {
-    const x = uri.match(/https?:\/\/(?<partyName>.+)\.party\.leafbla\.de\/(?<token>.+)/);
+    const x = uri.match(/https?:\/\/(?<partyName>\w+)\.(?<host>.+)\/(?<token>.+)/);
     if (x === null || x.groups === undefined) return;
     const partyName = x.groups["partyName"];
     const token = x.groups["token"];
@@ -9,7 +9,7 @@ export const parseURI = (uri: string): APIEndPoint | undefined => {
     return { partyName, token };
 };
 
-const apiUrl = (apiEndPoint : APIEndPoint): string => {
+const apiUrl = (apiEndPoint: APIEndPoint): string => {
     return `https://party.leafbla.de/api/${apiEndPoint.partyName}/${apiEndPoint.token}`;
 };