guess-the-year-web-component 3.2.3 → 4.0.0
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.
- package/README.md +2 -2
- package/custom-elements.json +19 -1
- package/dist/guess-the-year.d.ts +21 -16
- package/dist/guess-the-year.d.ts.map +1 -1
- package/dist/index.html +3 -8
- package/dist/lib/controller/scorecontroller.d.ts +2 -1
- package/dist/lib/controller/scorecontroller.d.ts.map +1 -1
- package/dist/lib/i18n/EN.d.ts.map +1 -1
- package/dist/lib/i18n/NL.d.ts.map +1 -1
- package/dist/main.bundle.js +200 -0
- package/dist/main.bundle.js.map +1 -0
- package/package.json +26 -27
- package/src/guess-the-year.ts +335 -273
- package/src/index.html +2 -7
- package/src/lib/ApiService.ts +1 -1
- package/src/lib/Util.ts +1 -1
- package/src/lib/controller/scorecontroller.ts +12 -1
- package/src/lib/i18n/EN.ts +18 -4
- package/src/lib/i18n/NL.ts +19 -5
- package/src/scss/_layout.scss +18 -5
- package/src/scss/_typography.scss +3 -2
- package/src/scss/_variables.scss +5 -5
- package/src/scss/main.scss +55 -1
- package/src/scss/views/_intro.scss +16 -4
- package/src/scss/views/_stage.scss +149 -43
- package/webpack.config.cjs +23 -25
- package/dist/guess-the-year.js +0 -751
- package/dist/guess-the-year.js.map +0 -1
- package/dist/lib/ApiService.js +0 -134
- package/dist/lib/ApiService.js.map +0 -1
- package/dist/lib/Icon.js +0 -2
- package/dist/lib/Icon.js.map +0 -1
- package/dist/lib/Incident.js +0 -37
- package/dist/lib/Incident.js.map +0 -1
- package/dist/lib/Util.js +0 -69
- package/dist/lib/Util.js.map +0 -1
- package/dist/lib/controller/scorecontroller.js +0 -38
- package/dist/lib/controller/scorecontroller.js.map +0 -1
- package/dist/lib/enums.js +0 -10
- package/dist/lib/enums.js.map +0 -1
- package/dist/lib/i18n/EN.js +0 -148
- package/dist/lib/i18n/EN.js.map +0 -1
- package/dist/lib/i18n/NL.js +0 -152
- package/dist/lib/i18n/NL.js.map +0 -1
- package/dist/lib/i18n/i18n.js +0 -10
- package/dist/lib/i18n/i18n.js.map +0 -1
- package/dist/main.js +0 -205
- package/todo.txt +0 -0
- /package/dist/{main.js.LICENSE.txt → main.bundle.js.LICENSE.txt} +0 -0
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
&-stage {
|
|
5
5
|
position: relative;
|
|
6
6
|
padding-bottom: 100px;
|
|
7
|
-
|
|
7
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
8
|
+
padding: 20px;
|
|
9
|
+
border-radius: 4px;
|
|
8
10
|
.container {
|
|
9
11
|
position: relative;
|
|
10
12
|
width: 100%;
|
|
@@ -37,9 +39,7 @@
|
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
&--text {
|
|
40
|
-
|
|
41
|
-
rgba(255, 255, 255, 0.5));
|
|
42
|
-
color: var(--guess-the-year-text-color, rgba(0, 0, 0, 1));
|
|
42
|
+
color: var(--guess-the-year-text-color, #1e293b); /* Donker blauwgrijs - WCAG 2.2 AAA compatibel */
|
|
43
43
|
font-size: var(--guess-the-year-text-font-size, 14px);
|
|
44
44
|
}
|
|
45
45
|
}
|
|
@@ -49,26 +49,137 @@
|
|
|
49
49
|
bottom: 25px;
|
|
50
50
|
left: 0;
|
|
51
51
|
width: 100%;
|
|
52
|
-
background-color: rgba(255,255,255, 0.7);
|
|
53
52
|
padding-top: 10px;
|
|
54
53
|
|
|
55
|
-
&--
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
54
|
+
&--timeline {
|
|
55
|
+
width: 100%;
|
|
56
|
+
padding: 20px 10px;
|
|
57
|
+
|
|
58
|
+
.timeline-container {
|
|
59
|
+
width: 100%;
|
|
60
|
+
|
|
61
|
+
.timeline {
|
|
62
|
+
position: relative;
|
|
63
|
+
width: 100%;
|
|
64
|
+
height: 60px;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
margin: 20px 0;
|
|
67
|
+
|
|
68
|
+
.timeline-line {
|
|
69
|
+
position: absolute;
|
|
70
|
+
top: 50%;
|
|
71
|
+
left: 0;
|
|
72
|
+
right: 0;
|
|
73
|
+
height: 3px;
|
|
74
|
+
background: #333;
|
|
75
|
+
transform: translateY(-50%);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.timeline-tile {
|
|
79
|
+
position: absolute;
|
|
80
|
+
top: 50%;
|
|
81
|
+
transform: translate(-50%, -50%);
|
|
82
|
+
z-index: 2;
|
|
83
|
+
transition: transform 0.2s ease;
|
|
84
|
+
|
|
85
|
+
&:hover {
|
|
86
|
+
transform: translate(-50%, -50%) scale(1.05);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.timeline-tile-content {
|
|
90
|
+
background: #fff;
|
|
91
|
+
border: 3px solid #1e3a8a;
|
|
92
|
+
border-radius: 0;
|
|
93
|
+
width: 60px;
|
|
94
|
+
height: 60px;
|
|
95
|
+
padding: 0;
|
|
96
|
+
box-shadow:
|
|
97
|
+
0 3px 6px rgba(0, 0, 0, 0.25),
|
|
98
|
+
inset 0 0 0 1px rgba(255, 255, 255, 0.8);
|
|
99
|
+
font-size: 12px;
|
|
100
|
+
font-weight: 700;
|
|
101
|
+
color: #1e293b; /* Donker blauwgrijs - WCAG 2.2 AAA compatibel */
|
|
102
|
+
white-space: nowrap;
|
|
103
|
+
text-align: center;
|
|
104
|
+
font-family: 'Georgia', 'Times New Roman', serif;
|
|
105
|
+
position: relative;
|
|
106
|
+
display: flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
justify-content: center;
|
|
109
|
+
overflow: visible;
|
|
110
|
+
|
|
111
|
+
// Decoratieve Delfts blauw bloemenrand (vierkant tegeltje)
|
|
112
|
+
&::before {
|
|
113
|
+
content: '';
|
|
114
|
+
position: absolute;
|
|
115
|
+
top: -3px;
|
|
116
|
+
left: -3px;
|
|
117
|
+
right: -3px;
|
|
118
|
+
bottom: -3px;
|
|
119
|
+
background-image:
|
|
120
|
+
url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3C!-- Mooie bloemen in hoeken --%3E%3Cg transform='translate(12,12)'%3E%3Ccircle cx='0' cy='0' r='5' fill='%231e3a8a'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='%23fff'/%3E%3Cpath d='M 0 -7 L -1.5 -3.5 L -5 -1.5 L -1.5 0 L 0 3.5 L 1.5 0 L 5 -1.5 L 1.5 -3.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 0 7 L -1.5 3.5 L -5 1.5 L -1.5 0 L 0 -3.5 L 1.5 0 L 5 1.5 L 1.5 3.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -7 0 L -3.5 -1.5 L -1.5 -5 L 0 -1.5 L 3.5 0 L 0 1.5 L 1.5 5 L 3.5 1.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 7 0 L 3.5 -1.5 L 1.5 -5 L 0 -1.5 L -3.5 0 L 0 1.5 L -1.5 5 L -3.5 1.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -4 -4 Q -2.5 -5.5 -1 -4 Q -2.5 -2.5 -4 -4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M 4 -4 Q 2.5 -5.5 1 -4 Q 2.5 -2.5 4 -4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M -4 4 Q -2.5 5.5 -1 4 Q -2.5 2.5 -4 4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M 4 4 Q 2.5 5.5 1 4 Q 2.5 2.5 4 4' fill='%231e3a8a' opacity='0.6'/%3E%3C/g%3E%3Cg transform='translate(88,12)'%3E%3Ccircle cx='0' cy='0' r='5' fill='%231e3a8a'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='%23fff'/%3E%3Cpath d='M 0 -7 L -1.5 -3.5 L -5 -1.5 L -1.5 0 L 0 3.5 L 1.5 0 L 5 -1.5 L 1.5 -3.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 0 7 L -1.5 3.5 L -5 1.5 L -1.5 0 L 0 -3.5 L 1.5 0 L 5 1.5 L 1.5 3.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -7 0 L -3.5 -1.5 L -1.5 -5 L 0 -1.5 L 3.5 0 L 0 1.5 L 1.5 5 L 3.5 1.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 7 0 L 3.5 -1.5 L 1.5 -5 L 0 -1.5 L -3.5 0 L 0 1.5 L -1.5 5 L -3.5 1.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -4 -4 Q -2.5 -5.5 -1 -4 Q -2.5 -2.5 -4 -4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M 4 -4 Q 2.5 -5.5 1 -4 Q 2.5 -2.5 4 -4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M -4 4 Q -2.5 5.5 -1 4 Q -2.5 2.5 -4 4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M 4 4 Q 2.5 5.5 1 4 Q 2.5 2.5 4 4' fill='%231e3a8a' opacity='0.6'/%3E%3C/g%3E%3Cg transform='translate(12,88)'%3E%3Ccircle cx='0' cy='0' r='5' fill='%231e3a8a'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='%23fff'/%3E%3Cpath d='M 0 -7 L -1.5 -3.5 L -5 -1.5 L -1.5 0 L 0 3.5 L 1.5 0 L 5 -1.5 L 1.5 -3.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 0 7 L -1.5 3.5 L -5 1.5 L -1.5 0 L 0 -3.5 L 1.5 0 L 5 1.5 L 1.5 3.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -7 0 L -3.5 -1.5 L -1.5 -5 L 0 -1.5 L 3.5 0 L 0 1.5 L 1.5 5 L 3.5 1.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 7 0 L 3.5 -1.5 L 1.5 -5 L 0 -1.5 L -3.5 0 L 0 1.5 L -1.5 5 L -3.5 1.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -4 -4 Q -2.5 -5.5 -1 -4 Q -2.5 -2.5 -4 -4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M 4 -4 Q 2.5 -5.5 1 -4 Q 2.5 -2.5 4 -4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M -4 4 Q -2.5 5.5 -1 4 Q -2.5 2.5 -4 4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M 4 4 Q 2.5 5.5 1 4 Q 2.5 2.5 4 4' fill='%231e3a8a' opacity='0.6'/%3E%3C/g%3E%3Cg transform='translate(88,88)'%3E%3Ccircle cx='0' cy='0' r='5' fill='%231e3a8a'/%3E%3Ccircle cx='0' cy='0' r='2.5' fill='%23fff'/%3E%3Cpath d='M 0 -7 L -1.5 -3.5 L -5 -1.5 L -1.5 0 L 0 3.5 L 1.5 0 L 5 -1.5 L 1.5 -3.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 0 7 L -1.5 3.5 L -5 1.5 L -1.5 0 L 0 -3.5 L 1.5 0 L 5 1.5 L 1.5 3.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -7 0 L -3.5 -1.5 L -1.5 -5 L 0 -1.5 L 3.5 0 L 0 1.5 L 1.5 5 L 3.5 1.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 7 0 L 3.5 -1.5 L 1.5 -5 L 0 -1.5 L -3.5 0 L 0 1.5 L -1.5 5 L -3.5 1.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -4 -4 Q -2.5 -5.5 -1 -4 Q -2.5 -2.5 -4 -4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M 4 -4 Q 2.5 -5.5 1 -4 Q 2.5 -2.5 4 -4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M -4 4 Q -2.5 5.5 -1 4 Q -2.5 2.5 -4 4' fill='%231e3a8a' opacity='0.6'/%3E%3Cpath d='M 4 4 Q 2.5 5.5 1 4 Q 2.5 2.5 4 4' fill='%231e3a8a' opacity='0.6'/%3E%3C/g%3E%3C!-- Kleinere bloemen in het midden van elke zijde --%3E%3Cg transform='translate(50,3)'%3E%3Ccircle cx='0' cy='0' r='3.5' fill='%231e3a8a'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23fff'/%3E%3Cpath d='M 0 -5 L -1 -2.5 L -3.5 -1 L -1 0 L 0 2.5 L 1 0 L 3.5 -1 L 1 -2.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 0 5 L -1 2.5 L -3.5 1 L -1 0 L 0 -2.5 L 1 0 L 3.5 1 L 1 2.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -5 0 L -2.5 -1 L -1 -3.5 L 0 -1 L 2.5 0 L 0 1 L 1 3.5 L 2.5 1 Z' fill='%231e3a8a'/%3E%3Cpath d='M 5 0 L 2.5 -1 L 1 -3.5 L 0 -1 L -2.5 0 L 0 1 L -1 3.5 L -2.5 1 Z' fill='%231e3a8a'/%3E%3C/g%3E%3Cg transform='translate(3,50)'%3E%3Ccircle cx='0' cy='0' r='3.5' fill='%231e3a8a'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23fff'/%3E%3Cpath d='M 0 -5 L -1 -2.5 L -3.5 -1 L -1 0 L 0 2.5 L 1 0 L 3.5 -1 L 1 -2.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 0 5 L -1 2.5 L -3.5 1 L -1 0 L 0 -2.5 L 1 0 L 3.5 1 L 1 2.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -5 0 L -2.5 -1 L -1 -3.5 L 0 -1 L 2.5 0 L 0 1 L 1 3.5 L 2.5 1 Z' fill='%231e3a8a'/%3E%3Cpath d='M 5 0 L 2.5 -1 L 1 -3.5 L 0 -1 L -2.5 0 L 0 1 L -1 3.5 L -2.5 1 Z' fill='%231e3a8a'/%3E%3C/g%3E%3Cg transform='translate(97,50)'%3E%3Ccircle cx='0' cy='0' r='3.5' fill='%231e3a8a'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23fff'/%3E%3Cpath d='M 0 -5 L -1 -2.5 L -3.5 -1 L -1 0 L 0 2.5 L 1 0 L 3.5 -1 L 1 -2.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 0 5 L -1 2.5 L -3.5 1 L -1 0 L 0 -2.5 L 1 0 L 3.5 1 L 1 2.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -5 0 L -2.5 -1 L -1 -3.5 L 0 -1 L 2.5 0 L 0 1 L 1 3.5 L 2.5 1 Z' fill='%231e3a8a'/%3E%3Cpath d='M 5 0 L 2.5 -1 L 1 -3.5 L 0 -1 L -2.5 0 L 0 1 L -1 3.5 L -2.5 1 Z' fill='%231e3a8a'/%3E%3C/g%3E%3Cg transform='translate(50,97)'%3E%3Ccircle cx='0' cy='0' r='3.5' fill='%231e3a8a'/%3E%3Ccircle cx='0' cy='0' r='1.5' fill='%23fff'/%3E%3Cpath d='M 0 -5 L -1 -2.5 L -3.5 -1 L -1 0 L 0 2.5 L 1 0 L 3.5 -1 L 1 -2.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M 0 5 L -1 2.5 L -3.5 1 L -1 0 L 0 -2.5 L 1 0 L 3.5 1 L 1 2.5 Z' fill='%231e3a8a'/%3E%3Cpath d='M -5 0 L -2.5 -1 L -1 -3.5 L 0 -1 L 2.5 0 L 0 1 L 1 3.5 L 2.5 1 Z' fill='%231e3a8a'/%3E%3Cpath d='M 5 0 L 2.5 -1 L 1 -3.5 L 0 -1 L -2.5 0 L 0 1 L -1 3.5 L -2.5 1 Z' fill='%231e3a8a'/%3E%3C/g%3E%3C!-- Sierlijke bladeren tussen bloemen --%3E%3Cpath d='M 24 12 Q 18 6 12 12 Q 18 18 24 12' fill='%231e3a8a' opacity='0.8'/%3E%3Cpath d='M 76 12 Q 82 6 88 12 Q 82 18 76 12' fill='%231e3a8a' opacity='0.8'/%3E%3Cpath d='M 24 88 Q 18 94 12 88 Q 18 82 24 88' fill='%231e3a8a' opacity='0.8'/%3E%3Cpath d='M 76 88 Q 82 94 88 88 Q 82 82 76 88' fill='%231e3a8a' opacity='0.8'/%3E%3Cpath d='M 12 24 Q 6 18 12 14 Q 18 20 12 24' fill='%231e3a8a' opacity='0.8'/%3E%3Cpath d='M 88 24 Q 94 20 88 14 Q 82 20 88 24' fill='%231e3a8a' opacity='0.8'/%3E%3Cpath d='M 12 76 Q 6 82 12 86 Q 18 80 12 76' fill='%231e3a8a' opacity='0.8'/%3E%3Cpath d='M 88 76 Q 94 80 88 86 Q 82 80 88 76' fill='%231e3a8a' opacity='0.8'/%3E%3C/g%3E%3C/svg%3E");
|
|
121
|
+
background-size: 100% 100%;
|
|
122
|
+
background-position: center;
|
|
123
|
+
background-repeat: no-repeat;
|
|
124
|
+
z-index: 1;
|
|
125
|
+
pointer-events: none;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.timeline-clicked {
|
|
131
|
+
position: absolute;
|
|
132
|
+
top: 50%;
|
|
133
|
+
transform: translate(-50%, -50%);
|
|
134
|
+
width: 20px;
|
|
135
|
+
height: 20px;
|
|
136
|
+
border-radius: 50%;
|
|
137
|
+
border: 2px solid #fff;
|
|
138
|
+
z-index: 3;
|
|
139
|
+
box-shadow: 0 0 10px rgba(0,0,0,0.9);
|
|
140
|
+
animation: pulse 1s ease-in-out infinite;
|
|
141
|
+
|
|
142
|
+
&.timeline-clicked-correct {
|
|
143
|
+
background: #0f0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&.timeline-clicked-wrong {
|
|
147
|
+
background: #f00;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.timeline-correct {
|
|
152
|
+
position: absolute;
|
|
153
|
+
top: 50%;
|
|
154
|
+
transform: translate(-50%, -50%);
|
|
155
|
+
width: 16px;
|
|
156
|
+
height: 16px;
|
|
157
|
+
background: #00f;
|
|
158
|
+
border-radius: 50%;
|
|
159
|
+
border: 2px solid #fff;
|
|
160
|
+
z-index: 1;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.timeline-year-start,
|
|
164
|
+
.timeline-year-end {
|
|
165
|
+
position: absolute;
|
|
166
|
+
bottom: -20px;
|
|
167
|
+
font-size: 12px;
|
|
168
|
+
font-weight: bold;
|
|
169
|
+
color: var(--guess-the-year-text-color, #1e293b); /* Donker blauwgrijs - WCAG 2.2 AAA compatibel */
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.timeline-year-start {
|
|
173
|
+
left: 0;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.timeline-year-end {
|
|
177
|
+
right: 0;
|
|
178
|
+
}
|
|
68
179
|
}
|
|
69
180
|
}
|
|
70
181
|
}
|
|
71
|
-
|
|
182
|
+
|
|
72
183
|
&--answers {
|
|
73
184
|
|
|
74
185
|
.answers--list {
|
|
@@ -99,36 +210,14 @@
|
|
|
99
210
|
}
|
|
100
211
|
}
|
|
101
212
|
|
|
102
|
-
.feedback {
|
|
103
|
-
position: absolute;
|
|
104
|
-
top: 0;
|
|
105
|
-
left: 0;
|
|
106
|
-
right: 0;
|
|
107
|
-
bottom: 0;
|
|
108
|
-
height: 100%;
|
|
109
|
-
width: 100%;
|
|
110
|
-
margin: auto;
|
|
111
|
-
backdrop-filter: blur(10px);
|
|
112
|
-
|
|
113
|
-
display: flex;
|
|
114
|
-
align-items: center;
|
|
115
|
-
justify-content: center;
|
|
116
|
-
|
|
117
|
-
&--content {
|
|
118
|
-
width: 300px;
|
|
119
|
-
background-color: var(--guess-the-year-text-background-color);
|
|
120
|
-
padding: 15px;
|
|
121
|
-
border-radius: 10px;
|
|
122
|
-
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
213
|
|
|
126
214
|
.game-score {
|
|
127
215
|
display: flex;
|
|
128
216
|
flex-direction: row;
|
|
129
217
|
align-items: center;
|
|
130
218
|
justify-content: space-evenly;
|
|
131
|
-
margin-bottom:
|
|
219
|
+
margin-bottom: 5px;
|
|
220
|
+
// background-color: rgba(255, 255, 255, 0.5);
|
|
132
221
|
|
|
133
222
|
&--label {
|
|
134
223
|
font-size: 80%;
|
|
@@ -137,6 +226,12 @@
|
|
|
137
226
|
&--value {
|
|
138
227
|
font-weight: bold;
|
|
139
228
|
}
|
|
229
|
+
|
|
230
|
+
&--score {
|
|
231
|
+
.game-score--value {
|
|
232
|
+
color: #ffa366; /* Oranje voor aftellende score */
|
|
233
|
+
}
|
|
234
|
+
}
|
|
140
235
|
}
|
|
141
236
|
}
|
|
142
237
|
}
|
|
@@ -146,6 +241,17 @@
|
|
|
146
241
|
}
|
|
147
242
|
}
|
|
148
243
|
|
|
244
|
+
@keyframes pulse {
|
|
245
|
+
0%, 100% {
|
|
246
|
+
transform: translate(-50%, -50%) scale(1);
|
|
247
|
+
opacity: 1;
|
|
248
|
+
}
|
|
249
|
+
50% {
|
|
250
|
+
transform: translate(-50%, -50%) scale(1.1);
|
|
251
|
+
opacity: 0.8;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
149
255
|
// .stage {
|
|
150
256
|
|
|
151
257
|
// .guess-the-year-tile-content {
|
package/webpack.config.cjs
CHANGED
|
@@ -1,32 +1,35 @@
|
|
|
1
1
|
const path = require("path");
|
|
2
2
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
3
|
-
|
|
3
|
+
|
|
4
|
+
const isProduction = process.env.NODE_ENV === "production";
|
|
4
5
|
|
|
5
6
|
const config = {
|
|
7
|
+
// Verander 'mode' hier direct of hou je functie onderaan,
|
|
8
|
+
// maar Webpack 5+ prefereert een duidelijke mode.
|
|
9
|
+
mode: isProduction ? "production" : "development",
|
|
6
10
|
|
|
7
11
|
entry: path.resolve(__dirname, 'src/guess-the-year.ts'),
|
|
8
12
|
|
|
9
13
|
output: {
|
|
10
|
-
|
|
14
|
+
// [name] wordt standaard 'main' als je geen entry object gebruikt.
|
|
15
|
+
filename: '[name].bundle.js',
|
|
11
16
|
path: path.resolve(__dirname, "dist"),
|
|
12
|
-
//
|
|
17
|
+
clean: true, // Tip: Schoot de 'dist' map leeg voor elke build
|
|
13
18
|
},
|
|
14
19
|
|
|
15
|
-
|
|
20
|
+
// Gebruik 'source-map' voor productie, 'eval-source-map' is sneller voor dev
|
|
21
|
+
devtool: isProduction ? 'source-map' : 'eval-source-map',
|
|
16
22
|
|
|
17
23
|
devServer: {
|
|
18
|
-
// open: true,
|
|
19
24
|
static: {
|
|
20
25
|
directory: path.resolve(__dirname, 'dist'),
|
|
21
|
-
serveIndex: true,
|
|
22
26
|
},
|
|
23
27
|
hot: true,
|
|
24
28
|
port: 8000,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
29
|
+
historyApiFallback: true, // Handig voor Single Page Apps
|
|
30
|
+
client: {
|
|
31
|
+
overlay: true, // Toont errors direct in je scherm
|
|
28
32
|
},
|
|
29
|
-
allowedHosts: ['localhost'],
|
|
30
33
|
},
|
|
31
34
|
|
|
32
35
|
plugins: [
|
|
@@ -39,15 +42,11 @@ const config = {
|
|
|
39
42
|
rules: [
|
|
40
43
|
{
|
|
41
44
|
test: /\.tsx?$/i,
|
|
42
|
-
|
|
43
|
-
exclude:
|
|
45
|
+
use: "ts-loader", // 'use' is de standaard over 'loader'
|
|
46
|
+
exclude: /node_modules/, // Regex is beter dan een array met string
|
|
44
47
|
},
|
|
45
|
-
// {
|
|
46
|
-
// test: /\.css$/i,
|
|
47
|
-
// use: ["style-loader", "css-loader"],
|
|
48
|
-
// },
|
|
49
48
|
{
|
|
50
|
-
test: /\.
|
|
49
|
+
test: /\.(s[ac]ss|css)$/i,
|
|
51
50
|
use: [
|
|
52
51
|
'lit-scss-loader',
|
|
53
52
|
'sass-loader'
|
|
@@ -57,14 +56,13 @@ const config = {
|
|
|
57
56
|
},
|
|
58
57
|
resolve: {
|
|
59
58
|
extensions: ['.tsx', '.ts', '.js'],
|
|
59
|
+
// Webpack 5 stopt met automatische polyfills voor Node core modules.
|
|
60
|
+
// Je fallback configuratie is hier correct.
|
|
61
|
+
fallback: {
|
|
62
|
+
"buffer": false,
|
|
63
|
+
"util": false,
|
|
64
|
+
},
|
|
60
65
|
},
|
|
61
66
|
};
|
|
62
67
|
|
|
63
|
-
module.exports =
|
|
64
|
-
if (isProduction) {
|
|
65
|
-
config.mode = "production";
|
|
66
|
-
} else {
|
|
67
|
-
config.mode = "development";
|
|
68
|
-
}
|
|
69
|
-
return config;
|
|
70
|
-
};
|
|
68
|
+
module.exports = config;
|