Skip to content

Commit 034c7d1

Browse files
CotehCoteh
committed
Add snow theme with two tilesets (snow and christmas)
1 parent 87e68d5 commit 034c7d1

File tree

7 files changed

+231
-101
lines changed

7 files changed

+231
-101
lines changed

‎cypress/e2e/game/misc.cy.ts

+63-63
Original file line numberDiff line numberDiff line change
@@ -138,69 +138,69 @@ describe("misc", () => {
138138
cy.contains("You lose!").should("not.be.visible");
139139
});
140140

141-
// it("should show the snowflakes when activated while snow theme enabled", () => {
142-
// // Set the screen orientation to landscape
143-
// cy.viewport("iphone-6", "landscape");
144-
145-
// cy.visit("/", {
146-
// onBeforeLoad: (win) => {
147-
// Object.defineProperty(win.navigator, "userAgent", {
148-
// value: MOBILE_DEVICE_USER_AGENT,
149-
// });
150-
// window.localStorage.setItem(
151-
// "preferences",
152-
// JSON.stringify({
153-
// theme: "snow",
154-
// })
155-
// );
156-
// },
157-
// });
158-
159-
// cy.get("#landscape-overlay") // get the rotate device overlay element
160-
// .should("be.visible"); // assert that the overlay is visible
161-
162-
// // Cypress checks if element is interactive when doing visibility check
163-
// // This is a workaround to have Cypress see that it's visible.
164-
// cy.get("#embedim--snow").invoke("css", "pointer-events", "auto");
165-
// cy.get("#embedim--snow").should("be.visible");
166-
167-
// // Set the screen orientation back to portrait
168-
// cy.viewport("iphone-6", "portrait");
169-
170-
// cy.get("#landscape-overlay") // get the rotate device overlay element
171-
// .should("not.be.visible"); // assert that the overlay is not visible
172-
173-
// cy.get("#embedim--snow").should("be.visible");
174-
// });
175-
176-
// it("should not show snowflakes if snow theme is not enabled", () => {
177-
// // Set the screen orientation to landscape
178-
// cy.viewport("iphone-6", "landscape");
179-
180-
// cy.visit("/", {
181-
// onBeforeLoad: (win) => {
182-
// Object.defineProperty(win.navigator, "userAgent", {
183-
// value: MOBILE_DEVICE_USER_AGENT,
184-
// });
185-
// },
186-
// });
187-
188-
// cy.get("#landscape-overlay") // get the rotate device overlay element
189-
// .should("be.visible"); // assert that the overlay is visible
190-
191-
// // Cypress checks if element is interactive when doing visibility check
192-
// // This is a workaround to have Cypress see that it's visible.
193-
// cy.get("#embedim--snow").invoke("css", "pointer-events", "auto");
194-
// cy.get("#embedim--snow").should("not.be.visible");
195-
196-
// // Set the screen orientation back to portrait
197-
// cy.viewport("iphone-6", "portrait");
198-
199-
// cy.get("#landscape-overlay") // get the rotate device overlay element
200-
// .should("not.be.visible"); // assert that the overlay is not visible
201-
202-
// cy.get("#embedim--snow").should("not.be.visible");
203-
// });
141+
it("should show the snowflakes when activated while snow theme enabled", () => {
142+
// Set the screen orientation to landscape
143+
cy.viewport("iphone-6", "landscape");
144+
145+
cy.visit("/", {
146+
onBeforeLoad: (win) => {
147+
Object.defineProperty(win.navigator, "userAgent", {
148+
value: MOBILE_DEVICE_USER_AGENT,
149+
});
150+
window.localStorage.setItem(
151+
"preferences",
152+
JSON.stringify({
153+
theme: "snow",
154+
})
155+
);
156+
},
157+
});
158+
159+
cy.get("#landscape-overlay") // get the rotate device overlay element
160+
.should("be.visible"); // assert that the overlay is visible
161+
162+
// Cypress checks if element is interactive when doing visibility check
163+
// This is a workaround to have Cypress see that it's visible.
164+
cy.get("#embedim--snow").invoke("css", "pointer-events", "auto");
165+
cy.get("#embedim--snow").should("be.visible");
166+
167+
// Set the screen orientation back to portrait
168+
cy.viewport("iphone-6", "portrait");
169+
170+
cy.get("#landscape-overlay") // get the rotate device overlay element
171+
.should("not.be.visible"); // assert that the overlay is not visible
172+
173+
cy.get("#embedim--snow").should("be.visible");
174+
});
175+
176+
it("should not show snowflakes if snow theme is not enabled", () => {
177+
// Set the screen orientation to landscape
178+
cy.viewport("iphone-6", "landscape");
179+
180+
cy.visit("/", {
181+
onBeforeLoad: (win) => {
182+
Object.defineProperty(win.navigator, "userAgent", {
183+
value: MOBILE_DEVICE_USER_AGENT,
184+
});
185+
},
186+
});
187+
188+
cy.get("#landscape-overlay") // get the rotate device overlay element
189+
.should("be.visible"); // assert that the overlay is visible
190+
191+
// Cypress checks if element is interactive when doing visibility check
192+
// This is a workaround to have Cypress see that it's visible.
193+
cy.get("#embedim--snow").invoke("css", "pointer-events", "auto");
194+
cy.get("#embedim--snow").should("not.be.visible");
195+
196+
// Set the screen orientation back to portrait
197+
cy.viewport("iphone-6", "portrait");
198+
199+
cy.get("#landscape-overlay") // get the rotate device overlay element
200+
.should("not.be.visible"); // assert that the overlay is not visible
201+
202+
cy.get("#embedim--snow").should("not.be.visible");
203+
});
204204
});
205205

206206
describe("noscript", () => {

‎cypress/e2e/game/settings.cy.ts

+21-12
Original file line numberDiff line numberDiff line change
@@ -135,23 +135,32 @@ describe("settings", () => {
135135
cy.contains(/© .* James Cote/i).should("be.visible");
136136
});
137137

138-
// it("should show credits for snow effect at the bottom of the settings pane if snow theme is enabled", () => {
139-
// cy.get(".settings-link").click();
138+
it("should show credits for snow effect at the bottom of the settings pane if snow theme is enabled", () => {
139+
cy.get(".settings-link").click();
140140

141-
// cy.contains("Settings").should("be.visible");
142-
// cy.contains("embed.im").should("not.be.visible");
141+
cy.contains("Settings").should("be.visible");
142+
cy.contains("embed.im").should("not.be.visible");
143143

144-
// cy.get(".setting.theme-switch").click();
145-
// cy.get(".setting.theme-switch").click();
144+
window.localStorage.setItem(
145+
"preferences",
146+
JSON.stringify({
147+
theme: "snow",
148+
})
149+
);
146150

147-
// cy.get("body").should("have.class", "snow");
148-
// cy.contains("embed.im").should("be.visible");
151+
cy.reload();
152+
153+
cy.get("body").should("have.class", "snow");
154+
cy.get(".settings-link").click();
149155

150-
// cy.get(".setting.theme-switch").click();
156+
cy.contains("Settings").should("be.visible");
157+
cy.contains("embed.im").should("be.visible");
158+
159+
cy.get(".setting.theme-switch").click();
151160

152-
// cy.get("body").should("not.have.class", "snow");
153-
// cy.contains("embed.im").should("not.be.visible");
154-
// });
161+
cy.get("body").should("not.have.class", "snow");
162+
cy.contains("embed.im").should("not.be.visible");
163+
});
155164

156165
it("should handle preferences value in local storage being in invalid state", () => {
157166
window.localStorage.setItem("preferences", "invalid");

‎cypress/e2e/game/theme.cy.ts

+25-15
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,11 @@ describe("theme", () => {
5656

5757
cy.get(".setting.theme-switch").click();
5858

59+
cy.get("body").should("have.class", "snow");
60+
cy.get("body").should("have.class", "tileset-snow");
61+
62+
cy.get(".setting.theme-switch").click();
63+
5964
cy.get("body").should("have.class", "classic");
6065
cy.get("body").should("have.class", "tileset-modern");
6166

@@ -102,6 +107,11 @@ describe("theme", () => {
102107

103108
cy.get(".setting.theme-switch").click();
104109

110+
cy.get("body").should("have.class", "snow");
111+
cy.get("body").should("have.class", "tileset-snow");
112+
113+
cy.get(".setting.theme-switch").click();
114+
105115
cy.get("body").should(($el) => {
106116
const classList = $el[0].classList;
107117
expect(classList.contains("tileset-standard")).to.be.true;
@@ -156,35 +166,35 @@ describe("theme", () => {
156166
cy.get("body").should("have.class", "dark");
157167
});
158168

159-
it("should set the 2048Clone theme on page reload if it's enabled in local storage", () => {
160-
cy.get("body").should("not.have.class", "classic");
169+
it("should set the snow theme on page reload if it's enabled in local storage", () => {
170+
cy.get("body").should("not.have.class", "snow");
161171

162172
window.localStorage.setItem(
163173
"preferences",
164174
JSON.stringify({
165-
theme: "classic",
175+
theme: "snow",
166176
})
167177
);
168178

169179
cy.reload();
170180

171-
cy.get("body").should("have.class", "classic");
181+
cy.get("body").should("have.class", "snow");
172182
});
173183

174-
// it("should set the snow theme on page reload if it's enabled in local storage", () => {
175-
// cy.get("body").should("not.have.class", "snow");
184+
it("should set the 2048Clone theme on page reload if it's enabled in local storage", () => {
185+
cy.get("body").should("not.have.class", "classic");
176186

177-
// window.localStorage.setItem(
178-
// "preferences",
179-
// JSON.stringify({
180-
// theme: "snow",
181-
// })
182-
// );
187+
window.localStorage.setItem(
188+
"preferences",
189+
JSON.stringify({
190+
theme: "classic",
191+
})
192+
);
183193

184-
// cy.reload();
194+
cy.reload();
185195

186-
// cy.get("body").should("have.class", "snow");
187-
// });
196+
cy.get("body").should("have.class", "classic");
197+
});
188198

189199
it("should default to standard theme if no entry exists in local storage for theme", () => {
190200
cy.get("body").should(($el) => {

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,6 @@ <h3>Debug</h3><br/>
266266
<button class="button show-notification"><span>Show Notification</span></button>
267267
</template>
268268
<script src="src/index.ts" type="module"></script>
269-
<!-- <script src="vendor/snow.js" defer></script> -->
269+
<script src="vendor/snow.ts" type="module" defer></script>
270270
</body>
271271
</html>

‎src/index.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const STANDARD_STANDARD_TILESET = "standard";
4444
const LIGHT_LIGHT_TILESET = "light";
4545
const DARK_DARK_TILESET = "dark";
4646
const SNOW_SNOW_TILESET = "snow";
47+
const SNOW_CHRISTMAS_TILESET = "christmas";
4748
const CLASSIC_MODERN_TILESET = "modern";
4849
const CLASSIC_CLASSIC_TILESET = "classic";
4950
const CLASSIC_COLORFUL_TILESET = "colorful";
@@ -380,11 +381,12 @@ document.addEventListener("DOMContentLoaded", async () => {
380381
let selectedTileset = STANDARD_STANDARD_TILESET;
381382
let selectedBlockStyle = STANDARD_BLOCK_STYLE;
382383

383-
const selectableThemes = [STANDARD_THEME, LIGHT_THEME, DARK_THEME, CLASSIC_THEME];
384+
const selectableThemes = [STANDARD_THEME, LIGHT_THEME, DARK_THEME, SNOW_THEME, CLASSIC_THEME];
384385
const selectableTilesets: { [key: string]: string[] } = {
385386
[STANDARD_THEME]: [STANDARD_STANDARD_TILESET],
386387
[LIGHT_THEME]: [LIGHT_LIGHT_TILESET],
387388
[DARK_THEME]: [DARK_DARK_TILESET],
389+
[SNOW_THEME]: [SNOW_SNOW_TILESET, SNOW_CHRISTMAS_TILESET],
388390
[CLASSIC_THEME]: [
389391
CLASSIC_MODERN_TILESET,
390392
CLASSIC_CLASSIC_TILESET,

‎src/styles/themes/snow.css

+108-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,114 @@
22
--background-color: linear-gradient(180deg, rgba(2, 0, 36, 1) 40%, rgba(9, 9, 121, 1) 100%);
33
--fallback-background-color: rgb(2, 0, 36);
44

5-
--standard-block-color: rgba(0, 0, 0, 0);
5+
--dialog-background-color: var(--gray-2);
6+
--text-color: var(--white);
7+
8+
--standard-block-color: rgb(4, 0, 49);
9+
10+
--back-layer-color: var(--white);
11+
12+
--block-2-color: #e0f7fa;
13+
--block-4-color: #b3e5fc;
14+
--block-8-color: #81d4fa;
15+
--block-16-color: #4fc3f7;
16+
--block-32-color: #29b6f6;
17+
--block-64-color: #03a9f4;
18+
--block-128-color: #0277bd;
19+
--block-256-color: #01579b;
20+
--block-512-color: #ffa726;
21+
--block-1024-color: #ffb74d;
22+
--block-2048-color: #fdd14b;
23+
--block-4096-color: #ffecb3;
24+
--block-8192-color: #fff8e1;
25+
--block-16384-color: #ffffe0;
26+
--block-32768-color: #fffde7;
27+
--block-65536-color: #ffffff;
28+
--block-max-color: #ffffff;
29+
30+
--block-2-text-color: #2b3a67;
31+
--block-4-text-color: #2b3a67;
32+
--block-8-text-color: #2b3a67;
33+
--block-16-text-color: #2b3a67;
34+
--block-32-text-color: #2b3a67;
35+
--block-64-text-color: #2b3a67;
36+
--block-128-text-color: #ffffff;
37+
--block-256-text-color: #ffffff;
38+
--block-512-text-color: #ffffff;
39+
--block-1024-text-color: #ffffff;
40+
--block-2048-text-color: #ffffff;
41+
--block-4096-text-color: #000000;
42+
--block-8192-text-color: #000000;
43+
--block-16384-text-color: #000000;
44+
--block-32768-text-color: #000000;
45+
--block-65536-text-color: #000000;
46+
--block-max-text-color: #000000;
47+
}
48+
49+
.snow.tileset-christmas {
50+
--block-2-color: #d7ccc8;
51+
--block-4-color: #bcaaa4;
52+
--block-8-color: #e57373;
53+
--block-16-color: #ef5350;
54+
--block-32-color: #f44336;
55+
--block-64-color: #e53935;
56+
--block-128-color: #d32f2f;
57+
--block-256-color: #a5d6a7;
58+
--block-512-color: #81c784;
59+
--block-1024-color: #66bb6a;
60+
--block-2048-color: #4caf50;
61+
--block-4096-color: #388e3c;
62+
--block-8192-color: #2e7d32;
63+
--block-16384-color: #1b5e20;
64+
--block-32768-color: #0d3e12;
65+
--block-65536-color: #06230b;
66+
--block-max-color: #06230b;
67+
68+
--block-2-text-color: #2e1b0e;
69+
--block-4-text-color: #2e1b0e;
70+
--block-8-text-color: #ffffff;
71+
--block-16-text-color: #ffffff;
72+
--block-32-text-color: #ffffff;
73+
--block-64-text-color: #ffffff;
74+
--block-128-text-color: #ffffff;
75+
--block-256-text-color: #ffffff;
76+
--block-512-text-color: #ffffff;
77+
--block-1024-text-color: #ffffff;
78+
--block-2048-text-color: #ffffff;
79+
--block-4096-text-color: #ffffff;
80+
--block-8192-text-color: #ffffff;
81+
--block-16384-text-color: #ffffff;
82+
--block-32768-text-color: #ffffff;
83+
--block-65536-text-color: #ffffff;
84+
--block-max-text-color: #ffffff;
85+
}
86+
87+
body.snow button.button {
88+
background-color: #b3e5fc;
89+
border: 2px solid #81d4fa;
90+
}
91+
92+
/* NTS: Hover color still appears and won't go away after tapping elsewhere on iOS.
93+
Workaround for now to disable hover color on iOS - https://stackoverflow.com/a/40617793 */
94+
@media (hover) {
95+
body.snow button.button:hover {
96+
background-color: #75d1fb;
97+
}
98+
}
99+
100+
body.snow button.button > * {
101+
color: #01579b;
102+
font-weight: bold;
103+
}
104+
105+
body.snow .score-box,
106+
body.snow .highscore-box {
107+
background-color: grey;
108+
}
109+
110+
body.snow .score-box > .score-label,
111+
body.snow .highscore-box > .score-label {
112+
color: white;
6113
}
7114

8115
.embedim-snow {

0 commit comments

Comments
 (0)