Add a primitive player list, this will show the player name and their role

web/src/components/PlayerList.vue

@@ -1,17 +1,61 @@
 <template>
-	<div></div>
+	<div id="player_list" class="centre">
+		<h2>Players:</h2>
+		<div
+			v-for="player in players"
+			:key="player.name"
+		>
+			{{ player.name }}
+			<span v-if="player.role" class="player-role">
+				( {{ player.role }} )
+			</span>
+		</div>
+	</div>
 </template>
 
 <script>
 export default {
-	name: ``,
+	name: `PlayerList`,
 	components: {},
-	computed: {},
+	computed: {
+		isHost() {
+			return false;
+		},
+		players() {
+			return [
+				{
+					name: `Oliver`,
+					role: `Developer`
+				},
+				{
+					name: `Max`,
+					role: `Designer`
+				},
+				{
+					name: `Ray`,
+				}
+			]
+			//return this.$store.state.players;
+		}
+	},
 	methods: {},
+	sockets: {
+		NewPlayer() {},
+		PlayerUpdate() {},
+	},
 }
 </script>
 
-<style>
+<style scoped>
-@import "css/theme.css";
+@import "../css/theme.css";
-@import "css/style.css";
+@import "../css/style.css";
+
+#player_list {
+	background-color: var(--background2);
+	color: var(--background2-text);
+	padding: 0 15px 15px;
+	border-radius: 20px;
+	margin: 5px 10px;
+	width: 15%;
+}
 </style>