Skip to content

Commit

Permalink
General Refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
EverettBazzocchi committed Jan 12, 2025
1 parent 3988dc0 commit 8d30b93
Show file tree
Hide file tree
Showing 6 changed files with 632 additions and 460 deletions.
828 changes: 416 additions & 412 deletions package-lock.json

Large diffs are not rendered by default.

57 changes: 9 additions & 48 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,7 @@
const CAD = new Intl.NumberFormat('en-ca', {
style: 'currency',
currency: 'CAD'
});
import React from 'react';
import SkullSpaceMemberLogo from './components/SkullSpaceMemberLogo';
import BarItem from './components/BarItem';

function SkullSpaceMemberLogo() {
return (
<img
className="bar-item-skull"
src="skullspace-round.svg"
alt="SkullSpace member logo"
/>
);
}

function BarItem({ name, image, size, price }) {
const textStyle = image ? { flex: 1 } : {};

return (
<div
className="bar-item"
style={{ justifyContent: image ? 'left' : 'center' }}
>
{image ? (
<div className="bar-item-logo">
<img src={image} alt="" />
</div>
) : (
''
)}
<div style={textStyle}>
<h4 className="bar-item-title">
{name} {size ? <i>{size}mL</i> : ''}
</h4>
<span className="bar-item-price">
{CAD.format(price / 100)} (
<SkullSpaceMemberLogo />
{CAD.format(price / 100 / 2)})
</span>
</div>
</div>
);
}

function App() {
const sections = [
Expand Down Expand Up @@ -159,7 +120,7 @@ function App() {
];

return (
<content onClick={() => document.documentElement.requestFullscreen()}>
<content onClick={() => document.documentElement.requestFullscreen()}>
<video
className="bar-background-video"
src="background.webm"
Expand All @@ -180,13 +141,13 @@ function App() {
{sections.map((section) => (
<section className="bar-section">
<hr style={{ width: '50%' }} />
<h2 className="bar-section-title">{section.name}</h2>
<div className="bar-section-grid">
{section.items.map((item) => BarItem(item))}
<h2 className="bar-section-title">{section.name}</h2>
<div className="bar-section-grid">
{section.items.map((item) => BarItem(item))}
</div>

</section>
))}
</section>
))}
</main>

<hr />
Expand Down
38 changes: 38 additions & 0 deletions src/components/BarItem.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import SkullSpaceMemberLogo from './SkullSpaceMemberLogo';

const CAD = new Intl.NumberFormat('en-ca', {
style: 'currency',
currency: 'CAD'
});



export default function BarItem({ name, image, size, price }) {
const textStyle = image ? { flex: 1 } : {};

return (
<div
className="bar-item"
style={{ justifyContent: image ? 'left' : 'center' }}
>
{image ? (
<div className="bar-item-logo">
<img src={image} alt="" />
</div>
) : (
''
)}
<div style={textStyle}>
<h4 className="bar-item-title">
{name} {size ? <i>{size}mL</i> : ''}
</h4>
<span className="bar-item-price">
{CAD.format(price / 100)} (
<SkullSpaceMemberLogo />
{CAD.format(price / 100 / 2)})
</span>
</div>
</div>
);
}
11 changes: 11 additions & 0 deletions src/components/SkullSpaceMemberLogo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@


export default function SkullSpaceMemberLogo() {
return (
<img
className="bar-item-skull"
src="skullspace-round.svg"
alt="SkullSpace member logo"
/>
);
}
22 changes: 22 additions & 0 deletions src/data/categories.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
[
{
"id": 1,
"name": "🍺 Beers"
},
{
"id": 2,
"name": "🌊 Seltzers"
},
{
"id": 3,
"name": "🥃 Mixed Drinks/Shots"
},
{
"id": 4,
"name": "🚫 Non-Alcoholic"
},
{
"id": 5,
"name": "Food"
}
]
136 changes: 136 additions & 0 deletions src/data/items.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
[
{
"id": 1,
"name": "Coors",
"image": "coors.svg",
"size": 355,
"price": 800,
"category": 1
},
{
"id": 2,
"name": "Coors Light",
"image": "coors-light.svg",
"size": 355,
"price": 800,
"category": 1
},
{
"id": 3,
"name": "Pabst Blue Ribbon",
"image": "pbr.svg",
"size": 355,
"price": 800,
"category": 1
},
{
"id": 4,
"name": "Half Pints St. James Pale Ale",
"image": "half-pints.png",
"size": 473,
"price": 1000,
"category": 1
},
{
"id": 5,
"name": "Kilter Juicii",
"image": "kilter.png",
"size": 473,
"price": 1000,
"category": 1
},
{
"id": 6,
"name": "White Claw Black Cherry",
"image": "white-claw-black-cherry.png",
"size": 355,
"price": 900,
"category": 2
},
{
"id": 7,
"name": "White Claw Watermelon",
"image": "white-claw-watermelon.png",
"size": 355,
"price": 900,
"category": 2
},
{
"id": 8,
"name": "White Claw Natural Lime",
"image": "white-claw-lime.png",
"size": 355,
"price": 900,
"category": 2
},
{
"id": 9,
"name": "White Claw Mango",
"image": "white-claw-mango.png",
"size": 355,
"price": 900,
"category": 2
},
{
"id": 10,
"name": "White Claw Ruby Grapefruit",
"image": "white-claw-grapefruit.png",
"size": 355,
"price": 900,
"category": 2
},
{
"id": 11,
"name": "Single",
"size": 40,
"price": 900,
"category": 3
},
{
"id": 12,
"name": "Double",
"size": 80,
"price": 1600,
"category": 3
},
{
"id": 13,
"name": "Soda / Water",
"image": "coke.svg",
"price": 300,
"category": 4
},
{
"id": 14,
"name": "Olé Mocktails",
"image": "ole.png",
"price": 800,
"category": 4
},
{
"id": 15,
"name": "Red Bull",
"image": "redbull.webp",
"price": 600,
"category": 4
},
{
"id": 16,
"name": "Red Bull Zero Sugar",
"image": "redbull-zero.png",
"price": 600,
"category": 4
},
{
"id": 17,
"name": "Pizza",
"price": 300,
"category": 5
},
{
"id": 18,
"name": "Pizza 2 Slice",
"price": 500,
"category": 5
}
]

0 comments on commit 8d30b93

Please sign in to comment.