Skip to content

Commit e565fca

Browse files
cskartikeycskartikey
committed
feat: implement idea roulette
1 parent 8adc4e1 commit e565fca

20 files changed

Lines changed: 343 additions & 482 deletions

‎app/assets/stylesheets/foundation/tokens.css‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,6 @@
88

99
/* Cell states */
1010
--green-50: #e6f4ea;
11-
--red-700: #c62828;
12-
--red-50: #fdecee;
13-
--amber-800: #8a5200;
14-
--amber-50: #fff1d6;
15-
--pink-ship: #fff0f2;
16-
--yellow-input: #fffbe0;
1711
--yellow-100: #fff3c4;
1812
--amber-900: #5c4400;
1913

@@ -54,11 +48,6 @@
5448
--text-kicker: #555;
5549
--text-formula: #6b6b6b;
5650

57-
--placeholder-stripe: #ececec;
58-
--placeholder-stripe-alt: #f6f6f6;
59-
--placeholder-border: #d0d0d0;
60-
--placeholder-text: #666;
61-
6251
--border-grid: var(--grey-200);
6352
--border-header: var(--grey-400);
6453
--border-control: var(--grey-600);

‎app/assets/stylesheets/sections/gallery.css‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎app/assets/stylesheets/sections/how_it_works.css‎

Lines changed: 62 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,72 @@
11
@layer sections {
2-
.sheet__section--how-it-works { --footer-row: 14; }
3-
4-
.how-it-works__title { grid-column: B / span 8; grid-row: 2 / span 2; }
5-
.how-it-works__steps { grid-row: 5; }
6-
.how-it-works__done { grid-column: B; }
7-
.how-it-works__step { grid-column: C / span 2; }
8-
.how-it-works__detail { grid-column: E / span 8; }
9-
.how-it-works__progress-label { grid-column: B / span 2; grid-row: 11; }
10-
.how-it-works__progress { grid-column: D / span 5; grid-row: 11; }
2+
.sheet__section--how-it-works { --footer-row: 21; }
3+
4+
.how-it-works__title { grid-column: B / span 8; grid-row: 2 / span 2; }
5+
.how-it-works__steps { grid-row: 5; }
6+
.how-it-works__number { grid-column: B; }
7+
.how-it-works__step { grid-column: C / span 2; }
8+
.how-it-works__detail { grid-column: E / span 8; }
9+
.how-it-works__tracking-heading { grid-column: B / span 5; grid-row: 15; }
10+
.how-it-works__tracking-label { grid-column: B / span 2; }
11+
.how-it-works__tracking-link { grid-column: D / span 3; }
12+
.how-it-works__tracking--code { grid-row: 16; }
13+
.how-it-works__tracking--other { grid-row: 17; }
14+
.how-it-works__tracking-note { grid-column: B / span 5; grid-row: 18; }
15+
.how-it-works__repo-heading { grid-column: H / span 5; grid-row: 15; }
16+
.how-it-works__repo { grid-row: 16; }
17+
.how-it-works__repo-file { grid-column: H / span 2; }
18+
.how-it-works__repo-note { grid-column: J / span 3; }
19+
20+
/* Each step takes two rows. */
21+
.how-it-works__number--step,
22+
.how-it-works__step--item,
23+
.how-it-works__detail--item {
24+
grid-row: span 2;
25+
}
26+
27+
.how-it-works__number--step {
28+
justify-content: center;
29+
font-size: 20px;
30+
font-weight: 700;
31+
color: var(--green);
32+
}
33+
34+
.how-it-works__detail--item {
35+
font-size: 14px;
36+
}
37+
38+
.how-it-works__repo-file {
39+
font: 13px var(--font-mono);
40+
}
1141
}
1242

13-
/* Phones: each step is a checkbox and name, with its description wrapping over the
14-
two rows below. The checkbox spans all three rows for placement but draws one. */
43+
/* Phones: each step's number runs down A beside its name and a three-row description.
44+
The tracking and repo tables stack underneath. */
1545
@layer sections {
1646
@media (width <= 600px) {
17-
.sheet__section--how-it-works { --footer-row: 21; }
18-
19-
.how-it-works__title { grid-column: A / span 4; grid-row: 1 / span 2; }
20-
.how-it-works__steps { grid-row: 4; }
21-
.how-it-works__done { grid-column: A; }
22-
.how-it-works__step { grid-column: B / span 3; }
23-
.how-it-works__detail { grid-column: B / span 3; grid-row: span 2; }
24-
.how-it-works__progress { grid-column: A / span 4; grid-row: 18; }
25-
26-
.how-it-works__done:not(.cell--table-header) {
27-
grid-row: span 3;
28-
align-self: start;
29-
block-size: calc(var(--cell-height) - 1px);
30-
}
47+
.sheet__section--how-it-works { --footer-row: 33; }
3148

32-
.how-it-works__detail {
33-
font-size: 13px;
34-
white-space: normal;
35-
line-height: 1.3;
36-
}
49+
.how-it-works__title { grid-column: A / span 4; grid-row: 1 / span 2; }
50+
.how-it-works__steps { grid-row: 4; }
51+
.how-it-works__number { grid-column: A; }
52+
.how-it-works__step { grid-column: B / span 3; }
53+
.how-it-works__detail { grid-column: B / span 3; }
54+
.how-it-works__tracking-heading { grid-column: A / span 4; grid-row: 22; }
55+
.how-it-works__tracking-label { grid-column: A / span 2; }
56+
.how-it-works__tracking-link { grid-column: C / span 2; }
57+
.how-it-works__tracking--code { grid-row: 23; }
58+
.how-it-works__tracking--other { grid-row: 24; }
59+
.how-it-works__tracking-note { grid-column: A / span 4; grid-row: 25; }
60+
.how-it-works__repo-heading { grid-column: A / span 4; grid-row: 27; }
61+
.how-it-works__repo { grid-row: 28; }
62+
.how-it-works__repo-file { grid-column: A / span 2; }
63+
.how-it-works__repo-note { grid-column: C / span 2; }
64+
65+
.how-it-works__number--step { grid-row: span 4; }
66+
.how-it-works__step--item { grid-row: auto; }
67+
.how-it-works__detail--item { grid-row: span 3; font-size: 13px; }
3768

38-
.how-it-works__detail.cell--table-header,
39-
.how-it-works__progress-label {
69+
.how-it-works__detail.cell--table-header {
4070
display: none;
4171
}
4272
}

‎app/assets/stylesheets/sections/ideas.css‎

Lines changed: 73 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,83 @@
11
@layer sections {
2-
.sheet__section--ideas { --footer-row: 20; }
3-
4-
.ideas__title { grid-column: B / span 8; grid-row: 2 / span 2; }
5-
.ideas__intro { grid-column: B / span 6; grid-row: 4; }
6-
.ideas__list { grid-row: 5; }
7-
.ideas__heat { grid-column: B; }
8-
.ideas__tool { grid-column: C; }
9-
.ideas__game { grid-column: D / span 2; }
10-
.ideas__how { grid-column: F / span 7; }
2+
/* The footer sits below room for a full log, so it doesn't jump as spins pile up. */
3+
.sheet__section--ideas { --footer-row: 22; }
4+
5+
.ideas__title { grid-column: B / span 8; grid-row: 2 / span 2; }
6+
.ideas__intro { grid-column: B / span 8; grid-row: 4; }
7+
.ideas__label--genre { grid-column: B / span 3; grid-row: 6; }
8+
.ideas__label--platform { grid-column: E / span 3; grid-row: 6; }
9+
.ideas__reel--genre { grid-column: B / span 3; grid-row: 7 / span 3; }
10+
.ideas__reel--platform { grid-column: E / span 3; grid-row: 7 / span 3; }
11+
.ideas__spin { grid-column: B / span 2; grid-row: 11; }
12+
.ideas__result { grid-column: D / span 4; grid-row: 11; }
13+
.ideas__log-heading { grid-column: B / span 6; grid-row: 13; }
14+
.ideas__log { grid-row: 14; }
15+
.ideas__log-number { grid-column: B; }
16+
.ideas__log-entry { grid-column: C / span 5; }
17+
18+
.ideas__roulette {
19+
display: contents;
20+
}
21+
22+
/* Slot reels: settled ones are outlined in green, rolling ones go grey. */
23+
.ideas__reel {
24+
justify-content: center;
25+
box-shadow: inset 0 0 0 1px var(--green);
26+
font-size: 28px;
27+
font-weight: 700;
28+
letter-spacing: -0.5px;
29+
}
30+
31+
.ideas__reel--rolling {
32+
background: var(--surface-header);
33+
box-shadow: inset 0 0 0 1px var(--border-header);
34+
color: var(--text-placeholder);
35+
}
36+
37+
.ideas__result {
38+
font-size: 15px;
39+
}
40+
41+
.ideas__log-number {
42+
justify-content: flex-end;
43+
}
1144
}
1245

13-
/* Phones: heat, tool and game fit A–D; the description starts at E, a pan away. */
46+
/* Phones: the reels side by side across A–D, a full-width Spin button, then the log. */
1447
@layer sections {
1548
@media (width <= 600px) {
16-
.sheet__section--ideas { --footer-row: 19; }
17-
18-
.ideas__title { grid-column: A / span 4; grid-row: 1 / span 2; }
19-
.ideas__intro { grid-column: A / span 5; grid-row: 3; font-size: 12px; }
20-
.ideas__list { grid-row: 4; }
21-
.ideas__heat { grid-column: A; }
22-
.ideas__tool { grid-column: B; }
23-
.ideas__game { grid-column: C / span 2; }
24-
.ideas__how { grid-column: E / span 5; }
25-
26-
.ideas__tool:not(.cell--table-header) {
27-
font-size: 10.5px;
49+
.sheet__section--ideas { --footer-row: 24; }
50+
51+
.ideas__title { grid-column: A / span 4; grid-row: 1 / span 2; }
52+
.ideas__intro { grid-column: A / span 4; grid-row: 3 / span 2; }
53+
.ideas__label--genre { grid-column: A / span 2; grid-row: 6; }
54+
.ideas__label--platform { grid-column: C / span 2; grid-row: 6; }
55+
.ideas__reel--genre { grid-column: A / span 2; grid-row: 7 / span 3; }
56+
.ideas__reel--platform { grid-column: C / span 2; grid-row: 7 / span 3; }
57+
.ideas__spin { grid-column: A / span 4; grid-row: 11 / span 2; }
58+
.ideas__result { grid-column: A / span 4; grid-row: 13; }
59+
.ideas__log-heading { grid-column: A / span 4; grid-row: 15; }
60+
.ideas__log { grid-row: 16; }
61+
.ideas__log-number { grid-column: A; }
62+
.ideas__log-entry { grid-column: B / span 3; }
63+
64+
.ideas__intro {
65+
font-size: 12px;
66+
white-space: normal;
67+
line-height: 1.3;
68+
}
69+
70+
.ideas__reel {
71+
font-size: 18px;
72+
}
73+
74+
.ideas__spin {
75+
margin: 4px 4px 5px 5px;
76+
font-size: 16px;
2877
}
2978

30-
.ideas__game:not(.cell--table-header) {
31-
font-size: 13px;
79+
.ideas__result {
80+
font-size: 14px;
3281
}
3382
}
3483
}

‎app/assets/stylesheets/sections/reward.css‎

Lines changed: 0 additions & 80 deletions
This file was deleted.

‎app/assets/stylesheets/sections/rules.css‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

0 commit comments

Comments
 (0)