init

2024-12-01 20:16:06 +01:00
parent 2f416eb53e
commit 4cd7873f47
21 changed files with 16151 additions and 4 deletions
--- a/src/app/game/game.component.css
+++ b/src/app/game/game.component.css
@@ -0,0 +1,137 @@
+/* Algemene stijl voor de game-container */
+.game-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center; /* Verticaal centreren */
+  align-items: center; /* Horizontaal centreren */
+  height: 100vh; /* Volledige hoogte van het scherm */
+  padding: 20px;
+  max-width: 600px; /* Maximaliseer de breedte van de container */
+  margin: 0 auto;
+}
+
+/* Styling voor de vraag */
+.question p {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+/* Styling voor de vraagtype instructie */
+.question-type p {
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+}
+
+/* Knoppen onder elkaar */
+.buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.buttons-questions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 120px;
+}
+
+/* Styling voor de knoppen */
+.buttons-questions button {
+  padding: 10px;
+  font-size: 1.2rem;
+  background-color: #ff561e;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+/* Styling voor de knoppen */
+.buttons button {
+  padding: 10px;
+  font-size: 1.2rem;
+  background-color: #ff561e;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.buttons-questions button.selected {
+  background: white;
+  border-color: #ff561e;
+  border-style: solid;
+  border-width: 5px;
+  color: #ff561e;
+}
+
+.buttons-confirm button[disabled] {
+  background-color: #cccccc;
+  color: #666666;
+}
+
+
+.drag-and-drop-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 50px;
+}
+
+.left-column, .right-column {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100px;
+}
+
+.draggable-button {
+  padding: 10px;
+  background-color: #ff561e;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  cursor: grab;
+  text-align: center;
+  width: 100%;
+  margin: 5px;
+  color: white;
+}
+
+.draggable-button:active {
+  cursor: grabbing;
+}
+
+
+.draggable-button.dragging {
+  background-color: #c0e4ff;
+}
+
+/* Voor kleine schermen zoals de iPhone (max-width: 600px) */
+@media (max-width: 600px) {
+  .game-container {
+    padding: 10px;
+  }
+
+  .buttons button {
+    font-size: 1rem; /* Verklein de tekstgrootte op kleine schermen */
+    padding: 8px; /* Verklein de knopgrootte op kleine schermen */
+  }
+}
+
+.buttons-confirm {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 180px;
+  margin-top: 24px;
+}
+
+.buttons-confirm button {
+  padding: 10px;
+  font-size: 1.2rem;
+  background-color: #ff561e;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}