Merge pull request #796 from nextlevelbanana/main

UI Updates: preview schedule, current year, no twitter in profile

index.html

@@ -4,7 +4,7 @@
   	<meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
     <link rel="icon" type="image/x-icon" href="favicon.png">
-    <title>Roguelike Celebration 2022</title>
+    <title>Roguelike Celebration 2023</title>
 
     <link rel="stylesheet" type="text/css" href="style/style.css" />
     <script src="src/index.tsx" type="module"></script>

server/src/endpoints/toggleSpeakerStatus.ts

@@ -5,7 +5,7 @@ import { UnlockableBadgeMap } from '../badges'
 
 const toggleSpeakerStatus: AuthenticatedEndpointFunction = async (user: User, inputs: any, log: LogFn) => {
   const userIdToToggle: string = inputs.userId
-  const isForPastYear = inputs.year !== '2022'
+  const isForPastYear = inputs.year !== '2023'
 
   if (!userIdToToggle) {
     return {

server/src/user.ts

@@ -123,7 +123,7 @@ export async function updateUserProfile (userId: string, data: Partial<User>, is
   if (data.description) { data.description = sanitizeString(data.description, 200) }
   if (data.pronouns) { data.pronouns = sanitizeString(data.pronouns, 40) }
   if (data.url) { data.url = sanitizeString(data.url, 200) }
-  if (data.twitterHandle) { data.twitterHandle = sanitizeString(data.twitterHandle, 20) }
+  if (data.twitterHandle) { data.twitterHandle = sanitizeString(data.twitterHandle, 200) }
   if (data.askMeAbout) { data.askMeAbout = sanitizeString(data.askMeAbout, 200) }
 
   const newProfile: User = {

src/components/GoHomeView.tsx

@@ -4,7 +4,7 @@ export default function GoHomeView () {
   return (
     <div id='go-home'>
       <h1>A magical force repels you from the entrance</h1>
-      <p>Roguelike Celebration is currently closed! Check the <a href="https://roguelike.club/event2022.html" target="_blank" rel="noreferrer">schedule</a> to see when our doors will be open again.</p>
+      <p>Roguelike Celebration is currently closed! Check the <a href="https://roguelike.club/event2023.html" target="_blank" rel="noreferrer">schedule</a> to see when our doors will be open again.</p>
       <p>We look forward to celebrating again with you soon :)</p>
     </div>
   )

src/components/LoggedOutView.tsx

@@ -28,7 +28,7 @@ export default function LoggedOutView () {
   return (
     <div>
       <header role="banner">
-        <h1>Welcome to Roguelike Celebration 2022!</h1>
+        <h1>Welcome to Roguelike Celebration 2023!</h1>
       </header>
       <main role="main">
         <p>

src/components/MessageList/MessageList.css

@@ -1,4 +1,6 @@
 .message-list {
+  border: 1px solid var(--fbc-white);
+  border-radius: 4px;
   height: 40vh;
   list-style-type: none;
 
@@ -29,3 +31,4 @@
   height: 1px;
   position: absolute;
 }
+

src/components/NameView.tsx

@@ -83,7 +83,7 @@ export default function NameView (props: Props) {
       }' ${isSpeaker ? 'from' : 'to'} the speaker list?`
     )
     if (doSpeaker) {
-      toggleUserSpeaker(data.id, '2022')
+      toggleUserSpeaker(data.id, '2023')
     }
   }
 
@@ -147,6 +147,9 @@ export default function NameView (props: Props) {
   if (!useSimpleNames && user && user.fontReward) {
     className = className + ' font-' + user.fontReward
   }
+  if (userIsMod) {
+    className += ' mod'
+  }
 
   const badges = (user.equippedBadges || [])
     .map((b, i) => <BadgeView key={`badge-${i}`} emoji={b?.emoji} description={b?.description} isCustom={b?.isCustom} />)

src/components/ProfileEditView.tsx

@@ -127,13 +127,14 @@ export default function ProfileEditView (props: Props) {
             />
           </div>
           <div className="field">
-            <label htmlFor="twitter">Twitter Handle</label>
-            <em>Optional: Don't include the @</em>
+            <label htmlFor="twitter">Social Link</label>
+            <em>Optional: where can we tag you?</em>
             <input
               type="text"
               id="twitter"
+              placeholder="https://example.com/you"
               value={twitter}
-              onChange={(e) => setTwitter(sanitizeString(e.currentTarget.value, 20))}
+              onChange={(e) => setTwitter(sanitizeString(e.currentTarget.value, 200))}
             />
           </div>
           <div className="field">

src/components/ProfileView.tsx

@@ -62,11 +62,11 @@ export default function ProfileView (props: { user: PublicUser, whispers: Whispe
     null
   )
 
-  const twitterHandle = user.twitterHandle ? (
-    <div id="profile-twitter">
-      <strong>Twitter</strong>:{' '}
-      <a href={`https://twitter.com/${user.twitterHandle}`} target="_blank" rel="noreferrer">
-      @{user.twitterHandle}
+  const socialLink = user.twitterHandle ? (
+    <div id="profile-social">
+      <strong>Social Link</strong>:{' '}
+      <a href={user.twitterHandle} target="_blank" rel="noreferrer">
+        {user.twitterHandle}
       </a>
     </div>
   ) : (
@@ -103,6 +103,8 @@ export default function ProfileView (props: { user: PublicUser, whispers: Whispe
     </a>
   )
 
+  const noInformation = !realName && !user.pronouns && !description && !socialLink && !url && !askMeAbout
+
   return (<>
     <ReactTooltip />
     <Linkify componentDecorator={linkDecorator}>
@@ -112,19 +114,27 @@ export default function ProfileView (props: { user: PublicUser, whispers: Whispe
             <h2 className={user.isMod ? 'mod' : ''}><NameView userId={user.id} id={`profile-nameview-${user.id}`} /></h2>
             <button className='close-profile' onClick={() => dispatch(HideProfileAction())}>X</button>
           </div>
-          <p>
-            {realName}
-            <div id="profile-pronouns">{user.pronouns}</div>
-            {description}
-          </p>
-
-          {user.item ? <p>{user.username} is currently holding {user.item}</p> : null}
-
-          <p>
-            {twitterHandle}
-            {url}
-            {askMeAbout}
-          </p>
+          <section className="profile-details">
+            <p>
+              {realName}
+              <div id="profile-pronouns">{user.pronouns}</div>
+              <i>{description}</i>
+            </p>
+
+            <p>
+              {socialLink}
+              {url}
+              {askMeAbout}
+            </p>
+
+            {noInformation &&
+              <i>{user.username} has no further information. How mysterious!</i>
+            }
+
+            {user.item && <p>{user.username} is currently holding {user.item}</p>}
+
+          </section>
+
           <div id="chat-container">
             <div id="chat-header">Whisper Chat</div>
             <div id="chat">

src/components/ScheduleView.tsx

@@ -1,4 +1,3 @@
-import { now } from 'lodash'
 import React from 'react'
 
 const SOCIAL_TIME = 'Social Time'
@@ -7,7 +6,6 @@ const SOCIAL_TIME = 'Social Time'
 // If you want to test functionality, stub in a fake date here
 // (this only exists to allow that testing functionality)
 export function nowDate () {
-  // After 2022 day 1, before day 2: '2022-10-22T22:00:00.000-07:00'
   return new Date()
 }
 
@@ -19,9 +17,12 @@ export interface ScheduleEntry {
   day: number
 }
 
-const dayPreview = (time) => new Date(`2022-09-11T${time}:00.000-07:00`)
-const dayOneDate = (time) => new Date(`2022-10-22T${time}:00.000-07:00`)
-const dayTwoDate = (time) => new Date(`2022-10-23T${time}:00.000-07:00`)
+const PREVIEW_END = new Date('2023-09-10T19:00:00-07:00')
+const FIRST_DAY_END = new Date('2023-10-21T21:00:00-07:00')
+
+const dayPreview = (time) => new Date(`2023-09-10T${time}:00.000-07:00`)
+const dayOneDate = (time) => new Date(`2023-10-21T${time}:00.000-07:00`)
+const dayTwoDate = (time) => new Date(`2023-10-22T${time}:00.000-07:00`)
 
 function ScheduleEntry (time: string, day: number, text: string, roomIds?: string[], breakoutRoomId?: string) {
   if (day === 0) {
@@ -42,53 +43,59 @@ function ScheduleEntry (time: string, day: number, text: string, roomIds?: strin
 }
 
 export const ScheduleEntries = [
+  ScheduleEntry('16:00', 0, 'Doors Open'),
+  ScheduleEntry('16:10', 0, 'Kickoff', ['theater']),
+  ScheduleEntry('16:15', 0, 'David Brevik: Fireside chat about the making of Diablo', ['theater']),
+  ScheduleEntry('16:50', 0, 'Nic Junius: Play as in Stage Play: Designing Dynamic Narrative Moments Through Character Acting', ['theater']),
+  ScheduleEntry('17:25', 0, 'Aron Pietroń and Michał Ogłoziński: Fireside chat about Roguelite citybuilder Against the Storm', ['theater']),
+
   ScheduleEntry('09:00', 1, 'Doors Open'),
   ScheduleEntry('09:15', 1, 'Kickoff', ['theater']),
-  ScheduleEntry('09:30', 1, 'Younès Rabii: "La Horde du Contrevent": A Novel That Didn\'t Know It Was A Roguelike', ['theater'], 'theaterWarrior'),
-  ScheduleEntry('09:45', 1, 'Sherveen Uduwana: Persistence and Resistence: How narrative in roguelikes is currently underutilized', ['theater'], 'theaterMage'),
-  ScheduleEntry('10:00', 1, 'Florence Smith Nichols: Object Biographies: An Archaeological Approach to PCG', ['theater'], 'theaterRogue'),
-  ScheduleEntry('10:15', 1, 'Tyler Robinson: Prototyping your games in Google Sheets', ['theaterCleric'], ''),
-  ScheduleEntry('10:30', 1, SOCIAL_TIME),
-  ScheduleEntry('11:00', 1, 'Sonat Uzun: Procedural Music of Tea Garden', ['theater'], 'theaterWarrior'),
-  ScheduleEntry('11:30', 1, 'Janelle Shane: The Baltimore Orioles Effect: Hey! Stop poisoning my image prompt!', ['theater'], 'theaterMage'),
-  ScheduleEntry('12:00', 1, SOCIAL_TIME),
-  ScheduleEntry('13:00', 1, 'Dylan Gedig: Perfect Synergy: How Roguelike Developers and Streamers Form the Perfect Ecosystem', ['theater'], 'theaterRogue'),
-  ScheduleEntry('13:30', 1, 'George Moromisato: Creating a Modding System for Roguelikes', ['theater'], 'theaterCleric'),
-  ScheduleEntry('14:00', 1, 'Jeremy Rose: The Hitchhiker\'s Guide to the Cataclysm', ['theater'], 'theaterWarrior'),
-  ScheduleEntry('14:30', 1, SOCIAL_TIME),
-  ScheduleEntry('15:00', 1, 'Reed Lockwood: Common "Pitfalls" of Roguelike Traps and How to Circumvent Them', ['theater'], 'theaterWarrior'),
-  ScheduleEntry('15:15', 1, 'Chris King: How To Let Your Players Take The Wheel (without crashing the car)', ['theater'], 'theaterMage'),
-  ScheduleEntry('15:30', 1, 'Benet Devereux: Seeking Treasure in the Tangled Bank: Biological Inspiration for Roguelike Mechanics ', ['theater'], 'theaterRogue'),
-  ScheduleEntry('15:45', 1, 'Hannah Blair Salzman: Roguelikes, Neurodiversity, and Mental Illness', ['theater'], 'theaterCleric'),
-  ScheduleEntry('16:00', 1, SOCIAL_TIME),
-  ScheduleEntry('16:30', 1, 'Jack Schlesinger: Your Puzzle Is A Secret Dungeon', ['theater'], 'theaterMage'),
-  ScheduleEntry('17:00', 1, 'Sersa Victory: Choice Design in Roguelikes', ['theater'], 'theaterRogue'),
-  ScheduleEntry('17:30', 1, SOCIAL_TIME),
-  ScheduleEntry('18:00', 1, 'Unconferencing', ['unconference']),
+  // ScheduleEntry('09:30', 1, 'Younès Rabii: "La Horde du Contrevent": A Novel That Didn\'t Know It Was A Roguelike', ['theater'], 'theaterWarrior'),
+  // ScheduleEntry('09:45', 1, 'Sherveen Uduwana: Persistence and Resistence: How narrative in roguelikes is currently underutilized', ['theater'], 'theaterMage'),
+  // ScheduleEntry('10:00', 1, 'Florence Smith Nichols: Object Biographies: An Archaeological Approach to PCG', ['theater'], 'theaterRogue'),
+  // ScheduleEntry('10:15', 1, 'Tyler Robinson: Prototyping your games in Google Sheets', ['theaterCleric'], ''),
+  // ScheduleEntry('10:30', 1, SOCIAL_TIME),
+  // ScheduleEntry('11:00', 1, 'Sonat Uzun: Procedural Music of Tea Garden', ['theater'], 'theaterWarrior'),
+  // ScheduleEntry('11:30', 1, 'Janelle Shane: The Baltimore Orioles Effect: Hey! Stop poisoning my image prompt!', ['theater'], 'theaterMage'),
+  // ScheduleEntry('12:00', 1, SOCIAL_TIME),
+  // ScheduleEntry('13:00', 1, 'Dylan Gedig: Perfect Synergy: How Roguelike Developers and Streamers Form the Perfect Ecosystem', ['theater'], 'theaterRogue'),
+  // ScheduleEntry('13:30', 1, 'George Moromisato: Creating a Modding System for Roguelikes', ['theater'], 'theaterCleric'),
+  // ScheduleEntry('14:00', 1, 'Jeremy Rose: The Hitchhiker\'s Guide to the Cataclysm', ['theater'], 'theaterWarrior'),
+  // ScheduleEntry('14:30', 1, SOCIAL_TIME),
+  // ScheduleEntry('15:00', 1, 'Reed Lockwood: Common "Pitfalls" of Roguelike Traps and How to Circumvent Them', ['theater'], 'theaterWarrior'),
+  // ScheduleEntry('15:15', 1, 'Chris King: How To Let Your Players Take The Wheel (without crashing the car)', ['theater'], 'theaterMage'),
+  // ScheduleEntry('15:30', 1, 'Benet Devereux: Seeking Treasure in the Tangled Bank: Biological Inspiration for Roguelike Mechanics ', ['theater'], 'theaterRogue'),
+  // ScheduleEntry('15:45', 1, 'Hannah Blair Salzman: Roguelikes, Neurodiversity, and Mental Illness', ['theater'], 'theaterCleric'),
+  // ScheduleEntry('16:00', 1, SOCIAL_TIME),
+  // ScheduleEntry('16:30', 1, 'Jack Schlesinger: Your Puzzle Is A Secret Dungeon', ['theater'], 'theaterMage'),
+  // ScheduleEntry('17:00', 1, 'Sersa Victory: Choice Design in Roguelikes', ['theater'], 'theaterRogue'),
+  // ScheduleEntry('17:30', 1, SOCIAL_TIME),
+  // ScheduleEntry('18:00', 1, 'Unconferencing', ['unconference']),
   ScheduleEntry('19:00', 1, 'Doors Close'),
 
   ScheduleEntry('09:00', 2, 'Doors Open'),
   ScheduleEntry('09:15', 2, 'Kickoff', ['theater']),
-  ScheduleEntry('09:30', 2, 'Tabea Iseli: How hard can it be to create a non-violent rogue-lite dungeon crawler?', ['theater'], 'theaterMage'),
-  ScheduleEntry('10:00', 2, 'Dustin Freeman: Simulating History as You’re Living Through It AKA Everyone is a Bunch of Concerns in a Trench Coat', ['theater'], 'theaterRogue'),
-  ScheduleEntry('10:30', 2, SOCIAL_TIME),
-  ScheduleEntry('11:00', 2, 'Unconferencing', ['unconference']),
-  ScheduleEntry('12:00', 2, SOCIAL_TIME),
-  ScheduleEntry('12:30', 2, 'Philomena Schwab: This is too hard! How to broaden your game’s target audience with smart difficulty tricks', ['theater'], 'theaterWarrior'),
-  ScheduleEntry('12:45', 2, 'Adam Newgas: Constraint Based Generation is a swiss army knife', ['theater'], 'theaterMage'),
-  ScheduleEntry('13:00', 2, 'Pierre Vigier: Room Generation using Constraint Satisfaction', ['theater'], 'theaterRogue'),
-  ScheduleEntry('13:15', 2, 'Evan Debenham: Smoothing the Sharp Edges of RNG', ['theater'], 'theaterCleric'),
-  ScheduleEntry('13:30', 2, SOCIAL_TIME),
-  ScheduleEntry('14:00', 2, 'Alexander Byaly: Causal Graphs for Procedural Generation', ['theater'], 'theaterWarrior'),
-  ScheduleEntry('14:30', 2, 'Abdelrahman Madkour: Controlling your generator using Expressive Range Analysis', ['theater'], 'theaterMage'),
-  ScheduleEntry('15:00', 2, 'Phenry Ewing: A Million Little Players: Monte Carlo Simulations for Game Design', ['theater'], 'theaterRogue'),
-  ScheduleEntry('15:30', 2, SOCIAL_TIME),
-  ScheduleEntry('16:00', 2, 'Sergio Garces: Procedural 3D environments on a budget', ['theater'], 'theaterCleric'),
-  ScheduleEntry('16:30', 2, 'Joel Ryan: A Small Clump of Pixels: Creating the Sil-Q Tileset', ['theater'], 'theaterMage'),
-  ScheduleEntry('17:00', 2, SOCIAL_TIME),
-  ScheduleEntry('17:30', 2, 'Cara Esten Hurtle: Telnet, a New Session, and transsexualizing the past', ['theater'], 'warrier'),
-  ScheduleEntry('17:45', 2, 'Santiago Zapata: Celebrating Moria - a roguelike before the roguelikes', ['theater'], 'theaterRogue'),
-  ScheduleEntry('18:15', 2, SOCIAL_TIME),
+  // ScheduleEntry('09:30', 2, 'Tabea Iseli: How hard can it be to create a non-violent rogue-lite dungeon crawler?', ['theater'], 'theaterMage'),
+  // ScheduleEntry('10:00', 2, 'Dustin Freeman: Simulating History as You’re Living Through It AKA Everyone is a Bunch of Concerns in a Trench Coat', ['theater'], 'theaterRogue'),
+  // ScheduleEntry('10:30', 2, SOCIAL_TIME),
+  // ScheduleEntry('11:00', 2, 'Unconferencing', ['unconference']),
+  // ScheduleEntry('12:00', 2, SOCIAL_TIME),
+  // ScheduleEntry('12:30', 2, 'Philomena Schwab: This is too hard! How to broaden your game’s target audience with smart difficulty tricks', ['theater'], 'theaterWarrior'),
+  // ScheduleEntry('12:45', 2, 'Adam Newgas: Constraint Based Generation is a swiss army knife', ['theater'], 'theaterMage'),
+  // ScheduleEntry('13:00', 2, 'Pierre Vigier: Room Generation using Constraint Satisfaction', ['theater'], 'theaterRogue'),
+  // ScheduleEntry('13:15', 2, 'Evan Debenham: Smoothing the Sharp Edges of RNG', ['theater'], 'theaterCleric'),
+  // ScheduleEntry('13:30', 2, SOCIAL_TIME),
+  // ScheduleEntry('14:00', 2, 'Alexander Byaly: Causal Graphs for Procedural Generation', ['theater'], 'theaterWarrior'),
+  // ScheduleEntry('14:30', 2, 'Abdelrahman Madkour: Controlling your generator using Expressive Range Analysis', ['theater'], 'theaterMage'),
+  // ScheduleEntry('15:00', 2, 'Phenry Ewing: A Million Little Players: Monte Carlo Simulations for Game Design', ['theater'], 'theaterRogue'),
+  // ScheduleEntry('15:30', 2, SOCIAL_TIME),
+  // ScheduleEntry('16:00', 2, 'Sergio Garces: Procedural 3D environments on a budget', ['theater'], 'theaterCleric'),
+  // ScheduleEntry('16:30', 2, 'Joel Ryan: A Small Clump of Pixels: Creating the Sil-Q Tileset', ['theater'], 'theaterMage'),
+  // ScheduleEntry('17:00', 2, SOCIAL_TIME),
+  // ScheduleEntry('17:30', 2, 'Cara Esten Hurtle: Telnet, a New Session, and transsexualizing the past', ['theater'], 'warrier'),
+  // ScheduleEntry('17:45', 2, 'Santiago Zapata: Celebrating Moria - a roguelike before the roguelikes', ['theater'], 'theaterRogue'),
+  // ScheduleEntry('18:15', 2, SOCIAL_TIME),
   ScheduleEntry('19:00', 2, 'Doors Close')
 ]
 
@@ -98,15 +105,10 @@ export default function ScheduleView () {
 
   const today = nowDate()
 
-  // If it's before the event or day 1, show day 1. Otherwise show day 2
-  // TODO: This logic will need adjusting for a preview event
-
-  const endOfDayOne = new Date(ScheduleEntries.slice().reverse().find(e => e.day === 1).time)
-  endOfDayOne.setTime(endOfDayOne.getTime() + (1 * 60 * 60 * 1000)) // Add 1 hour after the last event
-
   let day = 2
-  // TODO: This will be busted, time zones
-  if (today <= endOfDayOne) {
+  if (today <= PREVIEW_END) {
+    day = 0
+  } else if (today <= FIRST_DAY_END) {
     day = 1
   }
   const entries = ScheduleEntries.filter(e => e.day === day)

style/nav.css

@@ -3,6 +3,7 @@
   margin-top: 30px;
   position: fixed;
   width: 250px;
+  z-index: 1;
 }
 
 @media only screen and (max-device-width: 500px) {
@@ -76,4 +77,4 @@ button.nav-item:hover, button.nav-item:focus, button.nav-item:active {
 
 #mini-map .map {
   font-size: 10px;
-}
+}