Skip to content

Commit b178dfb

Browse files
NoNathan17NoNathan17
committed
ux changes
1 parent 1618668 commit b178dfb

6 files changed

Lines changed: 77 additions & 12 deletions

File tree

‎README.md‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Cosmic Toss
1+
# Comet Toss
22

3-
A polished space-themed Hack at UCI arcade scoring app built with Vite and React. Players can record up to three tosses, including missed shots worth 0 points, then submit their name to a persistent local leaderboard sorted by score.
3+
A polished space-themed Hack at UCI arcade scoring app built with Vite and React. Players can record up to three tosses to various landing zones then submit their name to a persistent local leaderboard.
44

55
## Install
66

@@ -16,8 +16,23 @@ npm run dev
1616

1717
Open the local URL shown in your terminal, usually `http://localhost:5173`.
1818

19+
## Deploy
20+
21+
This project is configured for GitHub Pages with GitHub Actions.
22+
23+
```bash
24+
npm run build
25+
```
26+
27+
GitHub Pages should use:
28+
29+
- Source: GitHub Actions
30+
- Output folder: `dist`
31+
- Live URL: `https://hackatuci.github.io/ICSFair-26/`
32+
1933
## Tech Stack
2034

2135
- Vite
2236
- React
23-
- CSS
37+
- CSS
38+
- React Icons

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Cosmic Toss</title>
6+
<title>Comet Toss</title>
77
</head>
88
<body>
99
<div id="root"></div>

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "cosmic-toss",
2+
"name": "comet-toss",
33
"version": "1.0.0",
44
"private": true,
55
"type": "module",

‎src/App.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,7 @@ input:focus {
474474
}
475475

476476
.toss-slot {
477+
position: relative;
477478
display: flex;
478479
gap: 0.45rem;
479480
align-items: center;
@@ -490,6 +491,38 @@ input:focus {
490491
color: var(--pink);
491492
}
492493

494+
.toss-result {
495+
display: inline-flex;
496+
align-items: center;
497+
gap: 0.45rem;
498+
}
499+
500+
.remove-toss {
501+
position: absolute;
502+
top: 0.22rem;
503+
right: 0.22rem;
504+
display: grid;
505+
place-items: center;
506+
width: 1.25rem;
507+
min-height: 1.25rem;
508+
padding: 0;
509+
color: var(--muted);
510+
background: transparent;
511+
box-shadow: none;
512+
}
513+
514+
.remove-toss:hover:not(:disabled) {
515+
transform: none;
516+
color: var(--pink);
517+
background: transparent;
518+
box-shadow: none;
519+
}
520+
521+
.remove-toss svg {
522+
color: currentColor;
523+
font-size: 0.8rem;
524+
}
525+
493526
.actions {
494527
display: flex;
495528
flex-wrap: wrap;

‎src/App.jsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from 'react-icons/fa';
1010

1111
const MAX_TOSSES = 3;
12-
const LEADERBOARD_KEY = 'cosmic-toss-leaderboard';
12+
const LEADERBOARD_KEY = 'comet-toss-leaderboard';
1313

1414
const scoringZones = [
1515
{ label: 'Low Earth Orbit', icon: 'earth', points: 1 },
@@ -57,6 +57,14 @@ function App() {
5757
setScore(score + zone.points);
5858
}
5959

60+
function removeToss(indexToRemove) {
61+
const tossToRemove = tosses[indexToRemove];
62+
if (!tossToRemove) return;
63+
64+
setTosses(tosses.filter((_, index) => index !== indexToRemove));
65+
setScore(score - tossToRemove.points);
66+
}
67+
6068
function submitScore() {
6169
if (!canSubmit) return;
6270

@@ -97,13 +105,13 @@ function App() {
97105
<section className="game-panel" aria-labelledby="game-title">
98106
<div className="brand-bar">
99107
<span>Hack at UCI</span>
100-
<span>Cosmic Toss Station</span>
108+
<span>Comet Toss Station</span>
101109
</div>
102110

103111
<div className="title-block">
104112
<h1 id="game-title">
105113
<FaRocket className="title-icon" />
106-
Cosmic Toss
114+
Comet Toss
107115
</h1>
108116
</div>
109117

@@ -160,8 +168,17 @@ function App() {
160168
<div className="toss-slot" key={index}>
161169
{tosses[index] ? (
162170
<>
163-
<ZoneIcon name={tosses[index].icon} />
164-
{tosses[index].points}
171+
<span className="toss-result">
172+
<ZoneIcon name={tosses[index].icon} />
173+
{tosses[index].points}
174+
</span>
175+
<button
176+
className="remove-toss"
177+
onClick={() => removeToss(index)}
178+
aria-label={`Remove toss ${index + 1}`}
179+
>
180+
<FaTimesCircle />
181+
</button>
165182
</>
166183
) : (
167184
`Toss ${index + 1}`

0 commit comments

Comments
 (0)