Implement confetti and integral problem

webkom · Mar 31, 2023 · 44c1129 · 44c1129
1 parent 3a63488
commit 44c1129
Show file tree

Hide file tree

Showing 11 changed files with 1,378 additions and 30 deletions.
diff --git a/app/assets/impossible.png b/app/assets/impossible.png
diff --git a/app/assets/integral.png b/app/assets/integral.png
diff --git a/app/assets/ludvig.png b/app/assets/ludvig.png
diff --git a/app/assets/rick-roll.gif b/app/assets/rick-roll.gif
diff --git a/app/assets/warn.gif b/app/assets/warn.gif
diff --git a/app/components/SpecialDay/AprilFools/index.tsx b/app/components/SpecialDay/AprilFools/index.tsx
@@ -22,12 +22,9 @@ class AprilFools extends Component<Props, State> {
 
   static isCorrectDate() {
     // The year doesn't matter, as it only check month and day of the month
-    const aprilFoolsDate = moment('2019-04-01');
+    const aprilFoolsDate = moment('2030-03-29 19:30', 'YYYY-MM-DD HH:mm');
     const now = moment();
-    return (
-      aprilFoolsDate.date() === now.date() &&
-      aprilFoolsDate.month() === now.month()
-    );
+    return aprilFoolsDate.isBefore(now);
   }
 
   onQueueDone() {

diff --git a/app/routes/events/components/Event.css b/app/routes/events/components/Event.css
@@ -125,3 +125,124 @@ html[data-theme='dark'] .eventWarning a {
 .chartContainer {
   overflow: hidden;
 }
+
+.modalBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1400px;
+}
+
+.registerButton {
+  position: absolute;
+  transition: 0.5s;
+  padding: 20px;
+}
+
+.pcTitle {
+  position: fixed;
+  top: 50%;
+  left: 25%;
+  font-size: 50px;
+  background-image: linear-gradient(
+    to left,
+    green,
+    orange,
+    red,
+    green,
+    orange,
+    red
+  );
+  -webkit-background-clip: text;
+  color: transparent;
+
+  display: none;
+
+  @media (--mobile-device) {
+    display: grid;
+  }
+}
+
+.madeBy {
+  position: fixed;
+  width: 500px;
+  height: 200px;
+  padding: 10px;
+  top: 76%;
+  left: 50%;
+  margin-top: -100px; /* Negative half of height. */
+  margin-left: -250px; /* Negative half of width. */
+  font-size: 16px;
+  background-image: linear-gradient(
+    to left,
+    green,
+    orange,
+    red,
+    green,
+    orange,
+    red
+  );
+  @media (--mobile-device) {
+    display: none;
+  }
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.congrats {
+  position: fixed;
+  width: 500px;
+  height: 200px;
+  padding: 10px;
+  top: 60%;
+  left: 50%;
+  margin-top: -100px; /* Negative half of height. */
+  margin-left: -250px; /* Negative half of width. */
+  font-size: 50px;
+  background-image: linear-gradient(
+    to left,
+    green,
+    orange,
+    red,
+    green,
+    orange,
+    red
+  );
+  @media (--mobile-device) {
+    display: none;
+  }
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.warning1 {
+  position: fixed;
+  left: -400px;
+  top: -400px;
+  scale: 0.15;
+}
+.warning2 {
+  position: fixed;
+  left: 400px;
+  top: -400px;
+  scale: 0.2;
+}
+.warning3 {
+  position: fixed;
+  left: -400px;
+  top: 400px;
+  scale: 0.2;
+}
+.warning4 {
+  position: fixed;
+  left: 400px;
+  top: 400px;
+  scale: 0.2;
+}
+.warning5 {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  scale: 0.2;
+}
diff --git a/app/routes/events/components/EventDetail/index.tsx b/app/routes/events/components/EventDetail/index.tsx
@@ -46,6 +46,7 @@ import {
 import Admin from '../Admin';
 import sharedStyles from '../Event.css';
 import JoinEventForm from '../JoinEventForm';
+import SpecialJoinEventForm from '../SpecialJoinEventForm';
 import RegisteredSummary from '../RegisteredSummary';
 import RegistrationMeta from '../RegistrationMeta';
 import styles from './EventDetail.css';
@@ -137,6 +138,12 @@ export default class EventDetail extends Component<Props, State> {
       mapIsOpen: false,
     };
   }
+  static isCorrectDate() {
+    // The year doesn't matter, as it only check month and day of the month
+    const aprilFoolsDate = moment('2023-03-01 11:00', 'YYYY-MM-DD HH:mm');
+    const now = moment();
+    return aprilFoolsDate.isBefore(now);
+  }
 
   handleRegistration = ({
     captchaResponse,
@@ -418,7 +425,6 @@ export default class EventDetail extends Component<Props, State> {
                 </Button>
               )}
             </div>
-
             {event.isPriced && (
               <TextWithIcon
                 iconName="cash-outline"
@@ -466,21 +472,23 @@ export default class EventDetail extends Component<Props, State> {
                   />
                 )}
                 {loggedIn && (
-                  <RegistrationMeta
-                    useConsent={event.useConsent}
-                    hasOpened={moment(event.activationTime).isBefore(
-                      currentMoment
-                    )}
-                    photoConsents={event.photoConsents}
-                    eventSemester={getEventSemesterFromStartTime(
-                      event.startTime
-                    )}
-                    hasEnded={moment(event.endTime).isBefore(currentMoment)}
-                    registration={currentRegistration}
-                    isPriced={event.isPriced}
-                    registrationIndex={currentRegistrationIndex}
-                    hasSimpleWaitingList={hasSimpleWaitingList}
-                  />
+                  <>
+                    <RegistrationMeta
+                      useConsent={event.useConsent}
+                      hasOpened={moment(event.activationTime).isBefore(
+                        currentMoment
+                      )}
+                      photoConsents={event.photoConsents}
+                      eventSemester={getEventSemesterFromStartTime(
+                        event.startTime
+                      )}
+                      hasEnded={moment(event.endTime).isBefore(currentMoment)}
+                      registration={currentRegistration}
+                      isPriced={event.isPriced}
+                      registrationIndex={currentRegistrationIndex}
+                      hasSimpleWaitingList={hasSimpleWaitingList}
+                    />
+                  </>
                 )}
                 {event.useContactTracing && !currentRegistration && (
                   <div>
@@ -509,6 +517,7 @@ export default class EventDetail extends Component<Props, State> {
                       Du kan svare på undersøkelsene dine ved å trykke på
                       følgende linker:
                     </p>
+
                     <ul>
                       {event.unansweredSurveys.map((surveyId, i) => (
                         <li key={surveyId}>
@@ -521,18 +530,30 @@ export default class EventDetail extends Component<Props, State> {
                   </div>
                 ) : (
                   <div>
-                    <JoinEventForm
-                      event={event}
-                      registration={currentRegistration}
-                      currentUser={currentUser}
-                      pendingRegistration={pendingRegistration}
-                      createPaymentIntent={this.handlePaymentMethod}
-                      onSubmit={this.handleRegistration}
-                    />
+                    {EventDetail.isCorrectDate() ? (
+                      <SpecialJoinEventForm
+                        event={event}
+                        registration={currentRegistration}
+                        currentUser={currentUser}
+                        pendingRegistration={pendingRegistration}
+                        createPaymentIntent={this.handlePaymentMethod}
+                        onSubmit={this.handleRegistration}
+                      />
+                    ) : (
+                      <JoinEventForm
+                        event={event}
+                        registration={currentRegistration}
+                        currentUser={currentUser}
+                        pendingRegistration={pendingRegistration}
+                        createPaymentIntent={this.handlePaymentMethod}
+                        onSubmit={this.handleRegistration}
+                      />
+                    )}
                   </div>
                 )}
               </Flex>
             )}
+
             {deadlines.some((d) => d !== null) && (
               <>
                 <Line />