@mblinkov/whats-missing 20.0.49 → 20.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/Game.d.ts +5 -0
  2. package/dist/Game.styles.d.ts +2 -0
  3. package/dist/index.d.ts +3 -0
  4. package/dist/themes.d.ts +6 -0
  5. package/dist/whats-missing.cjs.js +3 -3
  6. package/dist/whats-missing.es.js +124 -122
  7. package/package.json +24 -3
  8. package/.prettierrc +0 -9
  9. package/src/Game.styles.ts +0 -221
  10. package/src/Game.tsx +0 -1185
  11. package/src/index.ts +0 -4
  12. package/src/themes.ts +0 -96
  13. package/tsconfig.json +0 -19
  14. package/vite.config.ts +0 -34
package/.prettierrc DELETED
@@ -1,9 +0,0 @@
1
- {
2
- "semi": true,
3
- "singleQuote": false,
4
- "tabWidth": 2,
5
- "trailingComma": "es5",
6
- "printWidth": 100,
7
- "bracketSpacing": true
8
- }
9
-
package/src/Game.styles.ts DELETED
@@ -1,221 +0,0 @@
1
- import { CSSProperties } from "react";
2
-
3
- // ===== Добавляем анимацию вращения в <head> =====
4
- const spinKeyframes = `
5
- @keyframes spin {
6
- from { transform: rotate(0deg); }
7
- to { transform: rotate(360deg); }
8
- }
9
- `;
10
-
11
- if (typeof document !== "undefined" && !document.getElementById("spin-keyframes")) {
12
- const styleTag = document.createElement("style");
13
- styleTag.id = "spin-keyframes";
14
- styleTag.innerHTML = spinKeyframes;
15
- document.head.appendChild(styleTag);
16
- }
17
-
18
- // ===== Анимация вращения песочных часов =====
19
- const spin = {
20
- animation: "spin 1.4s linear infinite",
21
- };
22
-
23
- // ===== Основные стили =====
24
- export const styles: Record<string, CSSProperties> = {
25
- gmCenterScreen: {
26
- position: "relative",
27
- zIndex: 1,
28
- // use percent so the component fits inside the centered square container
29
- // (100vh caused overflow on tablets because it measured the viewport, not the container)
30
- minHeight: "100%",
31
- width: "100%",
32
- display: "flex",
33
- flexDirection: "column",
34
- justifyContent: "center",
35
- alignItems: "center",
36
- textAlign: "center",
37
- color: "#1f2937",
38
- padding: "24px 16px",
39
- boxSizing: "border-box",
40
- transform: "translateY(20px)", // чуть вниз, чтобы компенсировать логотип
41
- },
42
-
43
- gmHeadline1: {
44
- fontWeight: 700,
45
- fontSize: "clamp(28px, 4vw, 40px)",
46
- lineHeight: "110%",
47
- },
48
-
49
- gmHeadline2: {
50
- fontWeight: 600,
51
- fontSize: "24px",
52
- lineHeight: "120%",
53
- },
54
-
55
- gmHeadline3: {
56
- fontWeight: 600,
57
- fontSize: "18px",
58
- lineHeight: "130%",
59
- },
60
-
61
- gmBodyL: {
62
- fontWeight: 400,
63
- fontSize: "18px",
64
- lineHeight: "140%",
65
- },
66
-
67
- gmBodyM: {
68
- fontWeight: 400,
69
- fontSize: "16px",
70
- lineHeight: "140%",
71
- },
72
-
73
- gmBodyS: {
74
- fontWeight: 400,
75
- fontSize: "14px",
76
- lineHeight: "140%",
77
- color: "#6b7280",
78
- },
79
-
80
- gmButton: {
81
- fontFamily:
82
- '"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans"',
83
- fontWeight: 600,
84
- fontSize: "16px",
85
- padding: "10px 16px",
86
- borderRadius: "12px",
87
- border: "1px solid #e5e7eb",
88
- background: "#ec4c44",
89
- color: "#ffffff",
90
- cursor: "pointer",
91
- boxShadow: "0 6px 18px rgba(236, 76, 68, .18)",
92
- transition:
93
- "transform .06s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease",
94
- },
95
-
96
- gmButtonActive: {
97
- background: "#333",
98
- color: "#fff",
99
- },
100
-
101
- gmGameLayout: {
102
- position: "relative",
103
- width: "100%",
104
- // allow the layout to expand within the square container for tablets/laptops
105
- maxWidth: "none",
106
- // should fill the parent square, not the full viewport
107
- minHeight: "100%",
108
- display: "flex",
109
- flexDirection: "column",
110
- alignItems: "center",
111
- justifyContent: "center",
112
- textAlign: "center",
113
- color: "#1f2937",
114
- padding: "16px 8px",
115
- margin: "0 auto",
116
- },
117
-
118
- gmGrid: {
119
- width: "100%",
120
- // let the grid use all available space; sizing is controlled in Game.tsx
121
- maxWidth: "none",
122
- margin: "0 auto",
123
- display: "grid",
124
- // defaults; overridden responsively in Game.tsx
125
- gridTemplateColumns: "repeat(3, 210px)",
126
- gridAutoRows: "210px",
127
- gap: "20px",
128
- justifyContent: "center",
129
- },
130
-
131
- gmCard: {
132
- border: "1px solid #e5e7eb",
133
- borderRadius: "16px",
134
- background: "#f9f9f9",
135
- aspectRatio: "1 / 1",
136
- display: "flex",
137
- alignItems: "center",
138
- justifyContent: "center",
139
- overflow: "hidden",
140
- transition:
141
- "transform .2s ease, box-shadow .2s ease, border-color .2s ease",
142
- },
143
-
144
- gmCorrect: {
145
- border: "2px solid #10b981",
146
- boxShadow: "0 0 18px rgba(16,185,129,.45)",
147
- background: "#ecfdf5",
148
- },
149
-
150
- gmWrong: {
151
- border: "2px solid #ec4c44",
152
- boxShadow: "0 0 18px rgba(236,76,68,.35)",
153
- background: "#fef2f2",
154
- },
155
-
156
- gmInput: {
157
- padding: "6px 10px",
158
- borderRadius: "6px",
159
- border: "1px solid #ccc",
160
- fontSize: "16px",
161
- fontFamily: '"Geist", system-ui',
162
- width: "160px",
163
- },
164
-
165
- gmTable: {
166
- marginTop: "20px",
167
- marginBottom: "32px",
168
- borderCollapse: "collapse",
169
- width: "100%",
170
- maxWidth: "520px",
171
- tableLayout: "fixed",
172
- textAlign: "center",
173
- },
174
-
175
- gmTableCell: {
176
- padding: "8px 12px",
177
- borderBottom: "1px solid #e5e7eb",
178
- whiteSpace: "nowrap",
179
- overflow: "hidden",
180
- textOverflow: "ellipsis",
181
- },
182
-
183
- // ✅ Обновлено только для качества логотипа
184
- gmLogoFixed: {
185
- position: "absolute",
186
- top: "16px",
187
- left: "24px",
188
- width: "120px",
189
- zIndex: 10,
190
- pointerEvents: "none",
191
- background: "transparent",
192
- transform: "none",
193
- willChange: "auto",
194
- },
195
-
196
- gmLogoImg: {
197
- height: "clamp(28px, 5vw, 40px)",
198
- width: "auto",
199
- background: "transparent",
200
- objectFit: "contain",
201
- imageRendering: "auto",
202
- transform: "translateZ(0)",
203
- backfaceVisibility: "hidden",
204
- WebkitFontSmoothing: "antialiased",
205
- },
206
-
207
- gmReadyWrapper: {
208
- display: "flex",
209
- flexDirection: "column",
210
- alignItems: "center",
211
- justifyContent: "center",
212
- // use percent so the wrapper scales with the container square
213
- height: "60%",
214
- gap: "16px",
215
- },
216
-
217
- gmHourglass: {
218
- fontSize: "42px",
219
- ...spin,
220
- },
221
- };