6 |
14 | );
15 | }
16 |
17 | export default EateryCard;
18 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "bracketSpacing": true,
3 | "printWidth": 120,
4 | "proseWrap": "preserve",
5 | "semi": true,
6 | "singleQuote": true,
7 | "trailingComma": "all",
8 | "tabWidth": 4,
9 | "useTabs": false,
10 | "arrowParens": "always",
11 | "endOfLine": "lf",
12 | "overrides": [
13 | {
14 | "files": "*.json",
15 | "options": {
16 | "singleQuote": false
17 | }
18 | },
19 | {
20 | "files": ".*rc",
21 | "options": {
22 | "singleQuote": false,
23 | "parser": "json"
24 | }
25 | }
26 | ]
27 | }
--------------------------------------------------------------------------------
/src/pages/MapPage.css:
--------------------------------------------------------------------------------
1 | .MapPage {
2 | background-color: var(--main-bg);
3 | display: grid;
4 | grid-template-rows: 1fr auto;
5 | height: 100%;
6 | }
7 |
8 | .MapDrawer {
9 | background: var(--map-drawer-bg);
10 | overflow: hidden;
11 | box-sizing: content-box;
12 | & > div {
13 | padding: 14px;
14 | }
15 | }
16 |
17 | @media (prefers-reduced-motion: no-preference) {
18 | .MapDrawer {
19 | transition: max-height ease-in 300ms;
20 | }
21 | }
22 |
23 | .DrawerTransition-exit {
24 | max-height: 300px;
25 | }
26 |
27 | .DrawerTransition-enter,
28 | .DrawerTransition-exit-active {
29 | max-height: 0;
30 | }
31 |
32 | .DrawerTransition-enter-active {
33 | max-height: 300px;
34 | }
35 |
--------------------------------------------------------------------------------
/src/pages/EateryCardGrid.module.css:
--------------------------------------------------------------------------------
1 | .dropdown-button {
2 | display: flex;
3 | color: var(--black-400);
4 | gap: 16px;
5 |
6 | cursor: pointer;
7 |
8 | align-items: center;
9 | border: none;
10 | background-color: transparent;
11 |
12 | svg {
13 | rotate: -90deg;
14 | transition: rotate 0.2s ease;
15 | }
16 |
17 | & p {
18 | font-size: 16px;
19 | margin-left: -3px;
20 | }
21 | }
22 |
23 | .dropdown-button--up {
24 | svg {
25 | rotate: 0deg;
26 | }
27 | }
28 |
29 | .supergrid {
30 | display: flex;
31 | flex-direction: column;
32 | gap: 16px;
33 | }
34 |
35 | .section {
36 | display: flex;
37 | flex-direction: column;
38 | gap: 16px;
39 | }
40 |
--------------------------------------------------------------------------------
/src/pages/NotFoundPage.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom';
2 | import { Button } from '@mui/material';
3 |
4 | function NotFoundPage() {
5 | const navigate = useNavigate();
6 |
7 | return (
8 | No results found
7 |8 | Try searching for a name (e.g. “Schatz”) or location (e.g. “Cohon”). 9 |
10 | 13 |
9 |
20 | );
21 | }
22 |
23 | export default NotFoundPage;
24 |
--------------------------------------------------------------------------------
/src/assets/logos/visa-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/favicons/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "CMUEats",
3 | "name": "CMUEats",
4 | "icons": [
5 | {
6 | "src": "./favicons/android-chrome-192x192.png",
7 | "type": "image/png",
8 | "sizes": "192x192",
9 | "purpose": "any"
10 | },
11 | {
12 | "src": "./favicons/android-chrome-512x512.png",
13 | "type": "image/png",
14 | "sizes": "512x512",
15 | "purpose": "any"
16 | },
17 | {
18 | "src": "./favicons/android-chrome-192x192-maskable.png",
19 | "type": "image/png",
20 | "sizes": "192x192",
21 | "purpose": "maskable"
22 | },
23 | {
24 | "src": "./favicons/android-chrome-512x512-maskable.png",
25 | "type": "image/png",
26 | "sizes": "512x512",
27 | "purpose": "maskable"
28 | }
29 | ],
30 | "scope": "/",
31 | "start_url": "/",
32 | "display": "standalone",
33 | "theme_color": "#ffffff",
34 | "background_color": "#ffffff"
35 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["ESNext", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 | "esModuleInterop": true,
17 | "forceConsistentCasingInFileNames": true,
18 |
19 | /* Linting */
20 | "strict": true,
21 | "noUnusedLocals": false,
22 | "noUnusedParameters": false,
23 | "noFallthroughCasesInSwitch": true,
24 | "noUncheckedIndexedAccess": true, // this should honestly be the default, since you're not guaranteed to get a value when you key into an object
25 |
26 | },
27 | "include": ["src"],
28 | "references": [{ "path": "./tsconfig.node.json" }]
29 | }
--------------------------------------------------------------------------------
/src/util/localStorage.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import notifySlack from './slack';
3 | import { safeGetItem, safeSetItem } from './safeStorage';
4 |
5 | export default function useLocalStorage(key: string) {
6 | const [value, setValue] = useState(() => safeGetItem(key));
7 | useEffect(() => {
8 | const onStorageUpdate = () => {
9 | setValue(safeGetItem(key));
10 | };
11 | window.addEventListener('storage', onStorageUpdate); // gets called when other windows modify storage
12 | return () => window.removeEventListener('storage', onStorageUpdate);
13 | }, [key]);
14 |
15 | return [
16 | value,
17 | (newVal: string) => {
18 | const success = safeSetItem(key, newVal);
19 | if (!success) {
20 | notifySlack(`Failed to set localStorage key "${key}": cookies may be disabled`);
21 | }
22 | setValue(newVal);
23 | },
24 | ] as const;
25 | }
26 |
--------------------------------------------------------------------------------
/src/style.ts:
--------------------------------------------------------------------------------
1 | import { Button, styled, Typography } from '@mui/material';
2 |
3 | const ErrorTitle = styled(Typography)({
4 | color: 'white',
5 | marginBottom: 12,
6 | fontSize: 24,
7 | fontFamily:
8 | '"Zilla Slab", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", ' +
9 | '"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", ' +
10 | '"Droid Sans", "Helvetica Neue", sans-serif',
11 | fontWeight: 600,
12 | });
13 |
14 | const ErrorText = styled(Typography)({
15 | color: '#d4d4d8',
16 | marginBottom: 20,
17 | fontSize: 16,
18 | });
19 |
20 | const ErrorButton = styled(Button)({
21 | fontWeight: 600,
22 | fontFamily:
23 | '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", ' +
24 | '"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", ' +
25 | '"Helvetica Neue", sans-serif',
26 | color: 'white',
27 | backgroundColor: '#1D1F21',
28 | elevation: 30,
29 | });
30 |
31 | export { ErrorTitle, ErrorText, ErrorButton };
32 |
--------------------------------------------------------------------------------
/src/ErrorFallback.tsx:
--------------------------------------------------------------------------------
1 | import { ErrorBoundary } from 'react-error-boundary';
2 | import bocchiError from './assets/bocchi-error.webp';
3 |
4 | function ErrorBoundaryFallback() {
5 | return (
6 | Oops!
10 |We couldn’t find the page you are looking for.
11 | 19 |
7 | oh... uhhh... well this is awkward. we have encountered an issue while rendering this page{' '}
8 | 
9 | the error has been automatically reported to the cmueats team
10 |
18 | );
19 | }
20 | export default function GlobalErrorBoundary({ children }: { children: React.ReactNode }) {
21 | return
11 | Please refresh the page or check dining hours on GrubHub or{' '}
12 |
13 | https://apps.studentaffairs.cmu.edu/dining/conceptinfo/
14 | {' '}
15 | for now
16 |
17 |
28 |
49 | );
50 | }
51 |
52 | export default SponsorCarousel;
53 |
--------------------------------------------------------------------------------
/src/components/SearchBar.module.css:
--------------------------------------------------------------------------------
1 | .locations-search-wrapper {
2 | display: block;
3 | position: relative;
4 | }
5 |
6 | .locations-search {
7 | display: block;
8 | width: 100%;
9 | /* stays at the top when greeting text wraps */
10 | align-self: start;
11 | padding: 12.8px 16px;
12 | padding-left: 48px;
13 | border-radius: 16px;
14 | background: var(--input-bg);
15 | outline: none;
16 | border: 1px solid transparent;
17 | box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
18 | transition: all 0.2s;
19 | font-family: inherit;
20 | font-size: 16px;
21 | /* Heroicons v2.0.12 by Refactoring UI Inc., used under MIT license */
22 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='rgba(255, 255, 255, .6)' class='w-5 h-5'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/%3E%3C/svg%3E");
23 | background-size: 20px;
24 | background-repeat: no-repeat;
25 | background-position: 16px center;
26 | color: var(--input-text);
27 | font-weight: 500;
28 | &::-webkit-search-decoration {
29 | display: none;
30 | }
31 | &:focus {
32 | transition: all 0.2s;
33 | box-shadow: 0 0 40px var(--hover-accent-color);
34 | border-color: var(--hover-accent-color);
35 | outline: none;
36 | }
37 | &::placeholder {
38 | color: var(--input-text-placeholder);
39 | }
40 | }
41 |
42 | .locations-search-hint {
43 | display: flex;
44 | position: absolute;
45 | inset: 0;
46 | left: calc(48px + 1px);
47 | align-items: center;
48 | color: var(--input-text-placeholder);
49 | pointer-events: none;
50 | opacity: 1;
51 | transition: opacity 0.2s ease-in;
52 |
53 | kbd {
54 | border: 1px solid;
55 | border-radius: 5px;
56 | padding: 0px 3px;
57 | font-family: monospace;
58 | display: inline-flex;
59 | .line {
60 | width: 1px;
61 | margin: 0 4px;
62 | background-color: rgba(255, 255, 255, 0.285);
63 | }
64 | }
65 | }
66 |
67 | .locations-search:focus + .locations-search-hint,
68 | .locations-search:not(:placeholder-shown) + .locations-search-hint {
69 | opacity: 0;
70 | }
71 |
--------------------------------------------------------------------------------
/src/assets/control_button/eye-off.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/logos/accenture-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
32 |
--------------------------------------------------------------------------------
/src/assets/logos/conway-logo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/logos/deshaw-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/assets/logos/scaleai-logo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/assets/control_button/unpinned.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/SearchBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from 'react';
2 | import css from './SearchBar.module.css';
3 |
4 | function SearchBar({ searchQuery, setSearchQuery }: { searchQuery: string; setSearchQuery: React.Dispatch
29 |
38 |
48 |
39 |
47 | -
40 | {doubleLogos.map((logo) => (
41 |
-
42 |
43 |
44 | ))}
45 |
39 | setSearchQuery(e.target.value)}
45 | placeholder=" "
46 | // this needs to be nonempty for the :placeholder-shown css to work
47 | />
48 |
72 | );
73 | }
74 |
75 | export default SearchBar;
76 |
--------------------------------------------------------------------------------
/src/util/greeting.ts:
--------------------------------------------------------------------------------
1 | import assert from './assert';
2 | import bounded from './misc';
3 |
4 | const graveyard = [
5 | 'Staying up all night?',
6 | 'Want a late-night snack?',
7 | "Don't stay up too late!",
8 | 'Delivery too expensive?',
9 | 'Pulling an all-nighter? Let us fuel your focus!',
10 | 'Late night genius? Keep it going with a bite!',
11 | 'Need a boost for your midnight grind?',
12 | ];
13 | const graveyardShort = [
14 | 'Staying up all night?',
15 | 'Want a late-night snack?',
16 | "Don't stay up too late!",
17 | 'Delivery too expensive?',
18 | ];
19 | const morning = [
20 | 'Fancy some breakfast?',
21 | 'Is breakfast really the most important meal of the day?',
22 | 'What do you want to eat?',
23 | 'Have a good morning!',
24 | 'Start your day with a delicious meal!',
25 | 'Time to refuel for the day ahead!',
26 | ];
27 | const morningShort = ['Fancy some breakfast?', 'What do you want to eat?', 'Have a good morning!'];
28 | const afternoon = [
29 | 'What do you want for lunch?',
30 | 'What do you want to eat?',
31 | 'Have a good afternoon!',
32 | 'Use those blocks!',
33 | 'Fuel up for the afternoon!',
34 | 'Lunch options galore!',
35 | 'Satisfy your midday hunger!',
36 | 'Craving something savory for lunch?',
37 | "Midday munchies? We've got you covered!",
38 | 'Halfway through the day—time for a lunch break!',
39 | ];
40 | const afternoonShort = [
41 | 'Have a good afternoon!',
42 | 'Use those blocks!',
43 | 'Fuel up for the afternoon!',
44 | 'Lunch options galore!',
45 | ];
46 | const evening = [
47 | 'What do you want for dinner?',
48 | 'What do you want to eat?',
49 | 'Have a good evening!',
50 | 'Grab a bite to eat!',
51 | 'Hungry night owl?',
52 | ];
53 | const eveningShort = ['Have a good evening!', 'Grab a bite to eat!', 'Hungry night owl?'];
54 | interface Special {
55 | isMikuDay: boolean;
56 | }
57 | const getRandomStringFrom = (greetings: string[]) => {
58 | if (greetings.length === 0) return 'Welcome to CMUEats!';
59 | return greetings[Math.floor(Math.random() * greetings.length)];
60 | };
61 | const getGreeting = (hours: number, special?: Special) => {
62 | assert(bounded(hours, 0, 24));
63 |
64 | if (special?.isMikuDay) return 'Happy Miku Day! (March 9th)';
65 | if (hours < 6) {
66 | return getRandomStringFrom(graveyard);
67 | }
68 | if (hours < 12) {
69 | return getRandomStringFrom(morning);
70 | }
71 | if (hours < 17) {
72 | return getRandomStringFrom(afternoon);
73 | }
74 | if (hours < 24) {
75 | return getRandomStringFrom(evening);
76 | }
77 |
78 | return 'Welcome to CMUEats!';
79 | };
80 | const getGreetingMobile = (hours: number, special?: Special) => {
81 | if (special?.isMikuDay) return 'Happy Miku Day!';
82 | if (hours < 6) {
83 | return getRandomStringFrom(graveyardShort);
84 | }
85 | if (hours < 12) {
86 | return getRandomStringFrom(morningShort);
87 | }
88 | if (hours < 17) {
89 | return getRandomStringFrom(afternoonShort);
90 | }
91 | if (hours < 24) {
92 | return getRandomStringFrom(eveningShort);
93 | }
94 | return 'Welcome to CMUEats!';
95 | };
96 | const getGreetings = (hours: number, special?: Special) => ({
97 | desktopGreeting: getGreeting(hours, special),
98 | mobileGreeting: getGreetingMobile(hours, special),
99 | });
100 | export { getGreeting, getGreetingMobile, getGreetings };
101 |
--------------------------------------------------------------------------------
/src/components/EateryCard.css:
--------------------------------------------------------------------------------
1 | .card {
2 | --card-glow-animation: glow-animation 1.5s ease 0s infinite;
3 |
4 | box-sizing: border-box;
5 | height: 100%;
6 |
7 | background-color: var(--card-bg);
8 | border: var(--card-border-width) solid var(--card-border-color);
9 | border-radius: 7px;
10 |
11 | text-align: left;
12 | display: flex;
13 | flex-direction: column;
14 | overflow: hidden;
15 |
16 | &:hover {
17 | animation: var(--card-glow-animation);
18 | }
19 |
20 | position: relative;
21 | }
22 |
23 | .card__header {
24 | background: var(--card-header-bg);
25 | }
26 |
27 | /* additional .card__header needed to override MUI styles. We can discard when we finish migration */
28 | .card__header .card__header__text {
29 | line-height: 1.6;
30 | text-underline-offset: 20px;
31 | }
32 |
33 | .card .card__content {
34 | padding: 24px 16px 32px;
35 |
36 | @media screen and (max-width: 900px) {
37 | padding: 24px 16px;
38 | }
39 | }
40 |
41 | .card__actions {
42 | /* makes sure footer is actually on the bottom (we're in a flexbox column layout) */
43 | margin-top: auto;
44 | padding: 0 16px 16px 16px;
45 | margin-left: -2px;
46 | /* the illusion of alignment */
47 |
48 | display: flex;
49 | gap: 12px;
50 | }
51 |
52 | /* the overlay card. modifiers (in this case --dialog) actually cascade to relevant children */
53 | .card--dialog {
54 | background: var(--dialog-bg);
55 |
56 | .card__header {
57 | background: var(--dialog-header-bg);
58 | }
59 | }
60 |
61 | @keyframes fade-in {
62 | 0% {
63 | opacity: 0;
64 | transform: translate(-10px, 0);
65 | filter: blur(3px);
66 | }
67 |
68 | 55% {
69 | filter: blur(0);
70 | }
71 |
72 | 100% {
73 | transform: translate(0, 0);
74 | opacity: 1;
75 | filter: blur(0);
76 | }
77 | }
78 |
79 | @keyframes glow-animation {
80 | 0% {
81 | box-shadow: 0 0 5px var(--hover-accent-color);
82 | }
83 |
84 | 50% {
85 | box-shadow: 0 0 20px var(--hover-accent-color);
86 | }
87 |
88 | 100% {
89 | box-shadow: 0 0 5px var(--hover-accent-color);
90 | }
91 | }
92 |
93 | @keyframes oscillate-opacity {
94 | 0% {
95 | opacity: 1;
96 | }
97 |
98 | 30% {
99 | opacity: 0.6;
100 | }
101 |
102 | 90% {
103 | opacity: 1;
104 | }
105 | }
106 |
107 | .card__header__dot {
108 | width: 12px;
109 | height: 12px;
110 | margin-top: 7px;
111 | border-radius: 50%;
112 | }
113 |
114 | .card__header__dot--blinking {
115 | animation: blinking 1s infinite;
116 | animation-play-state: paused;
117 | }
118 |
119 | @keyframes blinking {
120 | 0% {
121 | opacity: 0;
122 | }
123 |
124 | 50% {
125 | opacity: 1;
126 | }
127 |
128 | 75% {
129 | opacity: 1;
130 | }
131 |
132 | 100% {
133 | opacity: 0;
134 | }
135 | }
136 |
137 | .card__pin-container {
138 | position: absolute;
139 | bottom: 14px;
140 | right: 10px;
141 | display: flex;
142 | flex-direction: row;
143 | }
144 |
145 | .card__pin-button {
146 | background: transparent;
147 | box-shadow: none;
148 | border: none;
149 | cursor: pointer;
150 | img {
151 | height: 19px;
152 | width: 22px;
153 | padding: 5px 2px;
154 | opacity: 0.6;
155 | transition: 0.05s opacity;
156 | -webkit-user-drag: none;
157 | user-drag: none;
158 | }
159 | &:hover {
160 | img {
161 | opacity: 1;
162 | }
163 | }
164 | &.card__pin-button--pinned {
165 | img {
166 | opacity: 1;
167 | }
168 | }
169 | }
170 |
--------------------------------------------------------------------------------
/src/components/SponsorCarousel.module.css:
--------------------------------------------------------------------------------
1 | .sponsors {
2 | /* default unset colors */
3 | --sponsors-border-color: red;
4 | --sponsors-background-color: red;
5 | --sponsors-text-color: red;
6 | }
7 | .sponsors--dark {
8 | --sponsors-text-color: rgba(255, 255, 255, 0.7);
9 | --sponsors-background-color: var(--black-1000);
10 | --sponsors-border-color: var(--black-800);
11 |
12 | .carousel__image {
13 | filter: brightness(0) invert(1);
14 | opacity: 30%;
15 | }
16 | }
17 |
18 | .sponsors--light {
19 | --sponsors-text-color: rgba(0, 0, 0, 0.5);
20 | --sponsors-background-color: #ababab;
21 | --sponsors-border-color: rgb(136, 136, 136);
22 |
23 | .carousel__image {
24 | filter: brightness(0) invert(0);
25 | opacity: 50%;
26 | }
27 | }
28 |
29 | .sponsors {
30 | position: absolute;
31 | bottom: 0;
32 | left: 0;
33 | right: 0;
34 | }
35 | .sponsors-button {
36 | position: absolute;
37 | bottom: 100%;
38 | right: 80px;
39 | display: block;
40 | padding: 10px 14px;
41 | border-radius: 10px 10px 0px 0px;
42 | font-size: 16px;
43 | white-space: nowrap;
44 |
45 | color: var(--sponsors-text-color);
46 | background: var(--sponsors-background-color);
47 | border: 1px solid var(--sponsors-border-color);
48 | border-bottom: 0;
49 | transition: 0.1s filter;
50 | &:hover {
51 | filter: brightness(1.1);
52 | }
53 | &::after {
54 | /* removes the top border of the carousel, where this tab is located */
55 | content: '';
56 | position: absolute;
57 | left: 0;
58 | right: 0;
59 | bottom: -1px;
60 | height: 1px;
61 | background-color: var(--sponsors-background-color);
62 | }
63 | }
64 | .sponsors-button__dog {
65 | stroke: var(--sponsors-text-color);
66 | stroke-width: 0.3px; /* make the image slightly thicker */
67 | color: var(--sponsors-text-color);
68 | }
69 | .sponsors-button__arrow {
70 | margin-left: 8px;
71 | transition: transform 0.3s ease;
72 | will-change: rotate; /* prevents visual glitch */
73 | transform: rotate(180deg);
74 | [aria-hidden='false'] & {
75 | transform: rotate(0deg);
76 | }
77 | }
78 |
79 | .carousel-container {
80 | transform: translateY(100%);
81 | transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
82 | &[aria-hidden='false'] {
83 | transform: translateY(0);
84 | }
85 | position: relative;
86 | }
87 |
88 | .carousel {
89 | overflow: hidden;
90 | border-top: 1px solid var(--sponsors-border-color);
91 | }
92 |
93 | .carousel__track {
94 | display: flex;
95 | align-items: center;
96 | list-style: none;
97 | padding: 0;
98 | margin: 0;
99 | width: max-content;
100 | animation: carousel 90s linear infinite;
101 | background-color: var(--sponsors-background-color);
102 | .carousel__item {
103 | flex: 0 0 auto;
104 | .carousel__image {
105 | height: 40px;
106 | width: auto;
107 | object-fit: contain;
108 | display: block;
109 | padding: 22px 20px;
110 | }
111 | }
112 | }
113 | @media (max-width: 600px) {
114 | .carousel__track {
115 | animation: carousel 30s linear infinite;
116 | .carousel__item {
117 | .carousel__image {
118 | padding: 15px 10px;
119 | height: 35px;
120 | }
121 | }
122 | }
123 | .sponsors-button {
124 | left: 40px;
125 | right: auto;
126 | }
127 | }
128 |
129 | @keyframes carousel {
130 | from {
131 | transform: translate(0, 0);
132 | }
133 | to {
134 | transform: translate(-50%, 0);
135 | }
136 | }
137 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "cmueats",
3 | "version": "0.1.0",
4 | "private": true,
5 | "type": "module",
6 | "dependencies": {
7 | "@emotion/react": "^11.11.4",
8 | "@emotion/styled": "^11.11.0",
9 | "@million/lint": "latest",
10 | "@mui/icons-material": "^5.15.14",
11 | "@mui/material": "^5.15.14",
12 | "@tanstack/react-query": "^5.28.6",
13 | "@testing-library/jest-dom": "^6.4.2",
14 | "@testing-library/react": "^14.2.2",
15 | "@testing-library/user-event": "^14.5.2",
16 | "@types/material-ui": "^0.21.17",
17 | "@types/react": "^18.2.68",
18 | "@types/react-router-dom": "^5.3.3",
19 | "axios": "^1.6.8",
20 | "clsx": "^2.1.1",
21 | "css-loader": "^6.10.0",
22 | "fuse.js": "^7.0.0",
23 | "joi": "^17.12.2",
24 | "jest": "^30.2.0",
25 | "jsonwebtoken": "^9.0.2",
26 | "luxon": "^3.4.4",
27 | "mapkit-react": "^1.14.1",
28 | "million": "latest",
29 | "motion": "^12.23.12",
30 | "netlify-plugin-mapkitjs-token": "^1.2.0",
31 | "posthog-js": "^1.181.0",
32 | "prettier-eslint": "^16.3.0",
33 | "prettier-eslint-cli": "^8.0.1",
34 | "react": "^18.2.0",
35 | "react-dom": "^18.2.0",
36 | "react-error-boundary": "^6.0.0",
37 | "react-router-dom": "^6.30.1",
38 | "react-transition-group": "^4.4.5",
39 | "serve": "^14.2.1",
40 | "vitest": "^1.6.1",
41 | "web-vitals": "^3.5.2",
42 | "zod": "^4.0.5"
43 | },
44 | "scripts": {
45 | "start": "vite --host",
46 | "dev": "vite --host",
47 | "build": "tsc && vite build",
48 | "typecheck": "tsc",
49 | "test": "dotenv -e .env.test -- vitest --coverage",
50 | "eject": "vite eject",
51 | "lint": "pnpm eslint src",
52 | "lint-fix": "pnpm eslint --fix src",
53 | "format": "pnpm prettier --write src",
54 | "coverage": "pnpm vitest --coverage"
55 | },
56 | "packageManager": "pnpm@10.18.0",
57 | "eslintConfig": {
58 | "extends": [
59 | "react-app",
60 | "react-app/jest"
61 | ]
62 | },
63 | "browserslist": {
64 | "production": [
65 | ">0.2%",
66 | "not dead",
67 | "not op_mini all"
68 | ],
69 | "development": [
70 | "last 1 chrome version",
71 | "last 1 firefox version",
72 | "last 1 safari version"
73 | ]
74 | },
75 | "devDependencies": {
76 | "@happy-dom/global-registrator": "^14.3.1",
77 | "@types/jest": "^29.5.12",
78 | "@types/jsonwebtoken": "^9.0.6",
79 | "@types/luxon": "^3.4.2",
80 | "@types/react-dom": "^19.0.2",
81 | "@types/react-transition-group": "^4.4.12",
82 | "@typescript-eslint/eslint-plugin": "^7.3.1",
83 | "@typescript-eslint/parser": "^7.3.1",
84 | "@vitejs/plugin-react": "^4.2.1",
85 | "@vitejs/plugin-react-swc": "^3.6.0",
86 | "@vitest/coverage-v8": "^1.4.0",
87 | "dotenv-cli": "^10.0.0",
88 | "eslint": "^8.57.0",
89 | "eslint-config-airbnb": "^19.0.4",
90 | "eslint-config-airbnb-typescript": "^18.0.0",
91 | "eslint-config-prettier": "^9.1.0",
92 | "eslint-config-react-app": "^7.0.1",
93 | "eslint-plugin-import": "^2.29.1",
94 | "eslint-plugin-jsx-a11y": "^6.8.0",
95 | "eslint-plugin-prettier": "^5.1.3",
96 | "eslint-plugin-react": "^7.34.1",
97 | "eslint-plugin-react-hooks": "^4.6.0",
98 | "jsdom": "^24.0.0",
99 | "prettier": "^3.2.5",
100 | "typescript": "^5.7.2",
101 | "vite": "^5.4.19",
102 | "vite-plugin-checker": "^0.6.4",
103 | "vite-plugin-pwa": "^0.19.6",
104 | "vite-plugin-svgr": "^4.2.0",
105 | "vite-tsconfig-paths": "^4.3.2"
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/src/assets/logos/ripple-logo.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/src/pages/ListPage.css:
--------------------------------------------------------------------------------
1 | .ListPage {
2 | display: flex;
3 | flex-direction: column;
4 | min-height: 100%;
5 | /* So the contact info footer actually stays at the bottom */
6 | }
7 |
8 | .ListPage__container {
9 | padding: 72px 48px 0;
10 | flex-grow: 1;
11 |
12 | @media screen and (max-width: 900px) {
13 | & {
14 | padding: 50px 15px;
15 | }
16 | }
17 | }
18 |
19 | .badge-accent {
20 | color: #105c03;
21 | background: #19b875;
22 | padding: 10px;
23 | border-radius: 30;
24 | }
25 |
26 | .Locations-header {
27 | display: grid;
28 | grid-gap: 16px;
29 | padding-bottom: 48px;
30 | position: relative;
31 | }
32 |
33 | .Locations-header__miku-toggle {
34 | position: absolute;
35 | top: -290px;
36 | left: min(55%, 630px);
37 | mask-image: url('../assets/miku/miku-keychain.svg');
38 | mask-position: bottom;
39 | mask-size: contain;
40 | padding: 0;
41 | background-color: transparent;
42 | border: none;
43 | line-height: 0;
44 | cursor: pointer;
45 | transition: 0.3s all;
46 | transform-origin: top;
47 | animation: 3s sway infinite cubic-bezier(0.364212, 0, 0.635788, 1);
48 |
49 | &:hover {
50 | top: -280px;
51 |
52 | &:active {
53 | top: -272px;
54 | }
55 | }
56 |
57 | & img {
58 | height: 410px;
59 | }
60 | }
61 |
62 | @media screen and (max-width: 900px) {
63 | .Locations-header__miku-toggle {
64 | right: -20px;
65 | left: auto;
66 | }
67 | }
68 |
69 | @keyframes sway {
70 | 0%,
71 | 100% {
72 | transform: rotate(1deg);
73 | }
74 |
75 | 50% {
76 | transform: rotate(-1deg);
77 | }
78 | }
79 |
80 | .Locations-header__greeting-container {
81 | container-type: inline-size;
82 |
83 | & .Locations-header__greeting--desktop {
84 | display: none;
85 | }
86 |
87 | padding-left: 2px;
88 |
89 | /* 600px is the approximate width of the location dropdown selector (we are also assuming that the desktop greeting is less than 600px wide) */
90 | @container (min-width: 600px) {
91 | & .Locations-header__greeting--desktop {
92 | display: block;
93 | }
94 |
95 | & .Locations-header__greeting--mobile {
96 | display: none;
97 | }
98 | }
99 | }
100 |
101 | /* we need this to properly animate the mask gradient */
102 | @property --right-cutoff {
103 | syntax: '
49 | {isDesktop ? (
50 |
51 | Type / or{' '}
52 | {isMac ? (
53 |
54 | ⌘
55 |
56 | K
57 |
58 | ) : (
59 |
60 | ^
61 |
62 | K
63 |
64 | )}{' '}
65 | to search
66 |
67 | ) : (
68 | Search...
69 | )}
70 |
71 |
52 | {locations && (
53 | <>
54 |
94 |
102 |
111 |
112 | )}
113 |
114 | );
115 | }
116 |
117 | export default MapPage;
118 |
--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { DateTime } from 'luxon';
3 | import env from '../env';
4 | import css from './Footer.module.css';
5 | import SponsorCarousel from './SponsorCarousel';
6 | import { useThemeContext } from '../ThemeProvider';
7 | import footerMikuUrl from '../assets/miku/miku2.png';
8 |
9 | export default function Footer({ now }: { now: DateTime }) {
10 | const [emails, setEmails] = useState<{ name: string; email: string }[]>([]);
11 | const { theme } = useThemeContext();
12 | const nowString = now.toLocaleString({
13 | weekday: 'short',
14 | month: 'short',
15 | day: '2-digit',
16 | hour: 'numeric',
17 | minute: '2-digit',
18 | second: '2-digit',
19 | });
20 |
21 | // Fetch emails on mount
22 | useEffect(() => {
23 | async function fetchEmails() {
24 | try {
25 | const res = await fetch(`${env.VITE_API_URL}/api/emails`);
26 | const json = await res.json();
27 | setEmails(json);
28 | } catch (err) {
29 | console.error('Failed to fetch emails:', err);
30 | }
31 | }
32 | fetchEmails();
33 | }, []);
34 | return (
35 |
114 | );
115 | }
116 |
--------------------------------------------------------------------------------
/src/assets/logos/agentuity-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/EateryCardGrid.tsx:
--------------------------------------------------------------------------------
1 | import { Grid } from '@mui/material';
2 | import { useState } from 'react';
3 | import { AnimatePresence } from 'motion/react';
4 | import EateryCard from '../components/EateryCard';
5 | import EateryCardSkeleton from '../components/EateryCardSkeleton';
6 | import NoResultsError from '../components/NoResultsError';
7 | import { LocationState, IReadOnlyLocation_Combined } from '../types/locationTypes';
8 | import assert from '../util/assert';
9 |
10 | import css from './EateryCardGrid.module.css';
11 |
12 | import DropdownArrow from '../assets/control_button/dropdown_arrow.svg?react';
13 | import { CardViewPreference } from '../util/storage';
14 |
15 | const compareLocations = (location1: IReadOnlyLocation_Combined, location2: IReadOnlyLocation_Combined) => {
16 | const state1 = location1.locationState;
17 | const state2 = location2.locationState;
18 |
19 | if (state1 !== state2) return state1 - state2;
20 |
21 | // this if statement is janky but otherwise TS won't
22 | // realize that the timeUntil property exists on both l1 and l2
23 | if (location1.closedLongTerm || location2.closedLongTerm) {
24 | assert(location1.closedLongTerm && location2.closedLongTerm);
25 | return location1.name.localeCompare(location2.name);
26 | }
27 | if (state1 === LocationState.OPEN || state1 === LocationState.CLOSES_SOON) {
28 | return location2.timeUntil - location1.timeUntil;
29 | }
30 | return location1.timeUntil - location2.timeUntil;
31 | };
32 |
33 | export default function EateryCardGrid({
34 | locations,
35 | setSearchQuery,
36 | shouldAnimateCards,
37 | apiError,
38 | updateCardViewPreference,
39 | }: {
40 | locations: IReadOnlyLocation_Combined[] | undefined;
41 | setSearchQuery: React.Dispatch
103 | {selectedLocationIndex !== undefined && (
104 | {}}
107 | />
108 | )}
109 |
110 | 68 | Oops! We received an invalid API response (or no data at all). If this problem persists, please visit 69 | GrubHub or{' '} 70 | 71 | https://apps.studentaffairs.cmu.edu/dining/conceptinfo/ 72 | {' '} 73 | for now 74 |
75 | ); 76 | 77 | if (locations.length === 0) return
99 |
100 |
101 | {[
102 | ...sortedLocations.filter((location) => location.cardViewPreference === 'pinned'),
103 | ...sortedLocations.filter((location) => location.cardViewPreference === 'normal'),
104 | ].map(locationToCard)}
105 |
106 |
107 |
108 | {hiddenLocations.length > 0 && (
109 |
130 | );
131 | }
132 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { BrowserRouter, Route, Routes } from 'react-router-dom';
3 |
4 | import { DateTime } from 'luxon';
5 | import { motion } from 'motion/react';
6 | import Navbar from './components/Navbar';
7 | import ListPage from './pages/ListPage';
8 | import MapPage from './pages/MapPage';
9 | import NotFoundPage from './pages/NotFoundPage';
10 | import { queryLocations, getLocationStatus } from './util/queryLocations';
11 | import './App.css';
12 | import { IReadOnlyLocation_FromAPI_PostProcessed, IReadOnlyLocation_Combined } from './types/locationTypes';
13 | import { useUserCardViewPreferences } from './util/storage';
14 | import env from './env';
15 | import scottyDog from './assets/banner/scotty-dog.svg';
16 | import closeButton from './assets/banner/close-button.svg';
17 | import useLocalStorage from './util/localStorage';
18 | import useRefreshWhenBackOnline from './util/network';
19 |
20 | const BACKEND_LOCATIONS_URL =
21 | env.VITE_API_URL === 'locations.json' ? '/locations.json' : `${env.VITE_API_URL}/locations`;
22 |
23 | function App() {
24 | // Load locations
25 | const [locations, setLocations] = useState
110 |
122 | {showHiddenSection && (
123 |
124 | {hiddenLocations.map(locationToCard)}
125 |
126 | )}
127 |
128 | )}
129 |
50 | {/*
76 |
52 | CMUEats is now up to date with the official dining website! Sorry for the inconvenience.
53 | >_<
54 |
*/}
55 |
56 |
57 | {
63 | const newPreferences = { ...cardViewPreferences, [id]: preference };
64 | setCardViewPreferences(newPreferences);
65 | }}
66 | now={now}
67 | />
68 | }
69 | />
70 |
73 |
74 |
96 |
97 |
128 |
98 |
99 | 
100 |
101 |
106 | Register
107 | {' '}
108 | for Nova, ScottyLabs' GenAI Hackathon by Nov. 1st!
109 |
110 |
111 |
112 |
117 | Register
118 | {' '}
119 | for Nova by Nov. 1st!
120 |
121 |
122 |
123 |
126 |
127 |
93 | {/* showAlert &&
94 | setShowAlert(false)}>
95 | 🚧 [Issue Description]
96 | Please remain patient while we work on a fix. Thank you. 🚧
97 | */}
98 | {showOfflineAlert && (
99 | setShowOfflineAlert(false)}>
100 | 🚫🌐 We are temporarily unable to provide the latest available dining information or the map while
101 | you are offline. We apologize for any inconvenience. 🌐🚫
102 |
103 | )}
104 |
105 |
147 | );
148 | }
149 |
150 | export default ListPage;
151 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | html,
2 | body,
3 | #root,
4 | .App {
5 | height: 100%;
6 | }
7 |
8 | html,
9 | body {
10 | margin: 0;
11 | padding: 0;
12 | font-family:
13 | 'Inter',
14 | -apple-system,
15 | BlinkMacSystemFont,
16 | 'Segoe UI',
17 | 'Roboto',
18 | 'Oxygen',
19 | 'Ubuntu',
20 | 'Cantarell',
21 | 'Fira Sans',
22 | 'Droid Sans',
23 | 'Helvetica Neue',
24 | sans-serif;
25 | text-rendering: optimizeLegibility;
26 | -moz-osx-font-smoothing: grayscale;
27 | -webkit-font-smoothing: antialiased;
28 | -webkit-text-size-adjust: 100%;
29 | background: var(--main-bg);
30 | }
31 |
32 | .App {
33 | text-align: left;
34 | display: flex;
35 | flex-direction: column;
36 | }
37 |
38 | .MainContent {
39 | flex: 1;
40 | /* min-height: 0; */
41 | /* overflow-y: auto; */
42 | &:focus {
43 | outline: none;
44 | }
45 | }
46 |
47 | .App-header {
48 | background-color: #282c34;
49 | min-height: 100vh;
50 | display: flex;
51 | flex-direction: column;
52 | align-items: center;
53 | justify-content: center;
54 | font-size: calc(10px + 2vmin);
55 | color: white;
56 | }
57 |
58 | .App-link {
59 | color: #61dafb;
60 | }
61 |
62 | .MuiCard-root {
63 | display: flex;
64 | flex-direction: column;
65 | justify-content: space-between;
66 | }
67 |
68 | .announcement {
69 | padding: 16px;
70 | font-size: 1.2em;
71 | color: white;
72 | text-align: center;
73 | background-color: #23272a;
74 | }
75 |
76 | .AdBanner {
77 | /* display: none; */
78 | padding: 16px;
79 | font-size: 20.8px;
80 | @media (max-width: 386px) {
81 | font-size: 17.6px;
82 | }
83 | color: white;
84 | text-align: center;
85 | background-color: hsl(155, 90%, 30%);
86 | border-bottom: 2px solid hsl(120, 70%, 15%);
87 | font-weight: 600;
88 | }
89 |
90 | .AdBannerLink {
91 | color: white;
92 | }
93 |
94 | .welcome-banner-container {
95 | overflow: hidden;
96 | position: sticky;
97 | top: 0%;
98 | z-index: 727;
99 | }
100 | .welcome-banner-padding {
101 | padding: 20px 15px;
102 | &.welcome-banner-padding--button {
103 | padding-left: 0;
104 | padding-right: 0;
105 | /* so it grows the same amt as spacer on left */
106 | }
107 | }
108 | .welcome-banner {
109 | display: flex;
110 | align-items: start;
111 | font-family: var(--text-primary-font);
112 | font-size: 28px;
113 | font-weight: 200;
114 | background-image: url('./assets/banner/bg-wave.svg?inline');
115 | background-position: top center;
116 | background-color: #1c1d20;
117 | border-bottom: 2px solid hsl(180, 3%, 8%);
118 |
119 | background-size: max(100vw, 1400px) 100%;
120 | background-repeat: no-repeat;
121 |
122 | & > .welcome-banner__spacer {
123 | flex-grow: 1;
124 | }
125 | & > .welcome-banner__text {
126 | isolation: isolate;
127 | align-self: stretch;
128 | position: relative;
129 | font-size: 20px;
130 | width: fit-content;
131 | display: flex;
132 | align-items: center;
133 |
134 | /* for a fade-out illusion, we create a second copy of the lines with the color the same as the bg but with dimensions equal to the text */
135 | &::before {
136 | content: '';
137 | position: absolute;
138 | inset: 0;
139 | z-index: -1;
140 | background-image: url('./assets/banner/fg-wave.svg?inline');
141 | background-position: top center;
142 | background-size: max(100vw, 1400px) 100%;
143 | background-repeat: no-repeat;
144 |
145 | mask-image: linear-gradient(
146 | to right,
147 | transparent 0%,
148 | rgba(0, 0, 0, 0.88) 10%,
149 | rgba(0, 0, 0, 0.88) 90%,
150 | transparent 100%
151 | );
152 | @media (max-width: 538px) {
153 | /* at around this point the container is no longer centered and thus can't act as a opacity filter */
154 | content: none;
155 | }
156 | }
157 |
158 | & > .welcome-banner__text--long {
159 | display: flex;
160 | align-items: center;
161 | gap: 15px;
162 | & img {
163 | height: 1.3em;
164 | }
165 | & span {
166 | /* firefox support something something */
167 | text-wrap: nowrap;
168 | }
169 | }
170 | & > .welcome-banner__text--long {
171 | display: flex;
172 | }
173 | & > .welcome-banner__text--short {
174 | display: none;
175 | }
176 | @media (max-width: 1073px) {
177 | & > .welcome-banner__text--long {
178 | display: none;
179 | }
180 | & > .welcome-banner__text--short {
181 | display: inline;
182 | }
183 | }
184 | }
185 |
186 | & > .welcome-banner__close {
187 | flex-grow: 1;
188 | flex-shrink: 0;
189 | flex-basis: 0; /* so it grows the same amt as the spacer on the other side (instead of like slightly more) */
190 | align-self: center;
191 | & > button {
192 | display: block;
193 | margin-left: auto;
194 | margin-right: 60px;
195 | @media (max-width: 900px) {
196 | margin-right: 10px;
197 | }
198 | background-color: transparent;
199 | border: none;
200 | cursor: pointer;
201 | & img {
202 | transition: 0.2s all ease-in-out;
203 | height: 20px;
204 | &:hover {
205 | filter: brightness(150%);
206 | rotate: 90deg;
207 | &:active {
208 | filter: brightness(120%);
209 | }
210 | }
211 | }
212 | }
213 | }
214 | }
215 |
216 | .outer-error-container {
217 | font-size: 20px;
218 | font-family: var(--text-primary-font);
219 | padding: 30px;
220 | margin: auto;
221 | text-align: center;
222 | & > img {
223 | display: block;
224 | margin: 20px auto;
225 | max-width: 100%;
226 | max-height: 300px;
227 | border-radius: 10px;
228 | }
229 | & > .outer-error-container__small-text {
230 | margin-top: 5px;
231 | font-size: 16px;
232 | color: hsl(206, 9%, 55%);
233 | word-break: break-word;
234 | @media screen and (max-width: 900px) {
235 | font-size: 16px;
236 | }
237 | }
238 | @media screen and (max-width: 900px) {
239 | font-size: 16px;
240 | text-align: left;
241 | }
242 | }
243 |
--------------------------------------------------------------------------------
/src/assets/logos/flyio-logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/iOS_splash_screens.txt:
--------------------------------------------------------------------------------
1 | Copy the tags below between the and tags in your HTML template
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
106 |
107 |
131 |
132 | {
139 | shouldAnimateCards.current = false;
140 | updateCardViewPreference(id, preference);
141 | }}
142 | />
143 |
144 |
145 |
146 |
108 |
115 |