diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index 3dd6d54..778810f 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -15,6 +15,10 @@ $box-primary-background-color: $background-primary-color;
$box-primary-text-color: $text-primary-color;
$box-primary-border: 1px solid #e0e0e0;
+$box-primary-disabled-background-color: $box-primary-background-color;
+$box-primary-disabled-text-color: darken($box-primary-text-color, 60%);
+$box-primary-disabled-border: $box-primary-border;
+
// Button
$button-background-color: #00a0e0;
diff --git a/client/src/components/Lobby.vue b/client/src/components/Lobby.vue
index a9a8aad..e19d5e4 100644
--- a/client/src/components/Lobby.vue
+++ b/client/src/components/Lobby.vue
@@ -1,10 +1,10 @@
- Lobby
+
+ waiting for gamemaster to start the game ...
+
-
- * {{ player.name }}
-
+
@@ -19,7 +19,22 @@ const players = usePlayersStore().players
.lobby {
&__container {
- font-family: $font-primary;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ }
+
+ &__message {
+ flex-grow: 1;
+ margin: 60px 0 0 200px;
+ font-family: $font-secondary;
+ font-size: 24px;
+ text-align: center;
+ }
+
+ &__players-list {
+ width: 200px;
+ margin: 16px 16px 0 0;
}
}
\ No newline at end of file
diff --git a/client/src/components/Player.vue b/client/src/components/Player.vue
new file mode 100644
index 0000000..f1b2fa5
--- /dev/null
+++ b/client/src/components/Player.vue
@@ -0,0 +1,65 @@
+
+
+
+ {{ hasSelected ? '☑' : '☐' }}
+
+
+ {{ player.name }}
+
+
+ {{ player.score || 0 }}
+
+
+
+
+
+
+
diff --git a/client/src/components/PlayerList.vue b/client/src/components/PlayerList.vue
new file mode 100644
index 0000000..65a0250
--- /dev/null
+++ b/client/src/components/PlayerList.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
diff --git a/client/src/pages/play.vue b/client/src/pages/play.vue
index 370965a..c833067 100644
--- a/client/src/pages/play.vue
+++ b/client/src/pages/play.vue
@@ -7,7 +7,7 @@
@@ -16,10 +16,10 @@