started working on frontend

backend/.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

backend/.idea/backend.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="jdk" jdkName="Python 3.7 (37)" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

backend/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

backend/.idea/misc.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7 (37)" project-jdk-type="Python SDK" />
+</project>

backend/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/backend.iml" filepath="$PROJECT_DIR$/.idea/backend.iml" />
+    </modules>
+  </component>
+</project>

backend/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>

backend/__init__.py

@@ -0,0 +1,47 @@
+import eventlet
+import socketio
+
+from game import Game
+from players import Player
+
+sio = socketio.Server(cors_allowed_origins="*")
+app = socketio.WSGIApp(sio, static_files={
+    '/': {'content_type': 'text/html', 'filename': 'index.html'}
+})
+
+games = []
+
+def advertise_lobbies():
+    sio.emit('lobbies', room='lobby', data=[{'name': g.name, 'players': g.players} for g in games if not g.started])
+
+@sio.event
+def connect(sid, environ):
+    print('connect ', sid)
+    sio.enter_room(sid, 'lobby')
+
+@sio.event
+def set_username(sid, username):
+    sio.save_session(sid, Player(username))
+    print(f'{sid} is now {username}')
+    advertise_lobbies()
+
+@sio.event
+def my_message(sid, data):
+    print('message ', data)
+
+@sio.event
+def disconnect(sid):
+    print('disconnect ', sid)
+
+@sio.event
+def create_room(sid, room_name):
+    sio.leave_room(sid, 'lobby')
+    g = Game(room_name)
+    g.add_player(sio.get_session(sid))
+    games.append(g)
+    sio.enter_room(sid, room_name)
+    print(f'{sid} created a room named {room_name}')
+    advertise_lobbies()
+
+if __name__ == '__main__':
+    eventlet.wsgi.server(eventlet.listen(('', 5001)), app)

backend/game.py

@@ -6,8 +6,9 @@ from deck import Deck
 import roles
 
 class Game:
-    def __init__(self):
+    def __init__(self, name):
         super().__init__()
+        self.name = name
         self.players: List[players.Player] = []
         self.deck: Deck = None
         self.started = False
@@ -61,14 +62,14 @@ class Game:
         self.play_turn()
 
 
-game = Game()
-p1 = players.Player('p1')
-game.add_player(p1)
-p2 = players.Player('p2')
-game.add_player(p2)
-p3 = players.Player('p3')
-game.add_player(p3)
-game.start_game()
-for p in game.players:
-    p.set_character(random.choice(p.available_characters))
-game.distribute_roles()
+# game = Game()
+# p1 = players.Player('p1')
+# game.add_player(p1)
+# p2 = players.Player('p2')
+# game.add_player(p2)
+# p3 = players.Player('p3')
+# game.add_player(p3)
+# game.start_game()
+# for p in game.players:
+#     p.set_character(random.choice(p.available_characters))
+# game.distribute_roles()

backend/requirements.txt

@@ -0,0 +1,7 @@
+certifi==2020.11.8
+dnspython==2.0.0
+eventlet==0.29.1
+greenlet==0.4.17
+python-engineio==3.13.2
+python-socketio==4.6.0
+six==1.15.0

frontend/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,24 @@
+# frontend
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

frontend/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "socket.io-client": "^3.0.3",
+    "vue": "^2.6.11",
+    "vue-socket.io": "^3.0.10"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

frontend/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

frontend/src/App.vue

@@ -0,0 +1,93 @@
+<template>
+	<div id="app">
+		<div v-if="isConnected">
+			<div v-if="!didSetUsername">
+				Scegli un username:
+				<div>
+					<input v-model="username"/>
+					<input type="submit" @click="setUsername"/>
+				</div>
+			</div>
+			<div v-else>
+				<div v-if="!isInLobby" >
+					<h2>Crea una lobby:</h2>
+					Nome: <input v-model="lobbyName"/>
+					<input type="submit" @click="createLobby"/>
+				</div>
+				<Card v-for="lobby in openLobbies" v-bind:key="lobby" :card="lobby"/>
+			</div>
+		</div>
+		<div v-else>
+			<h2>Attenzione!</h2>
+			<p>Connessione al server assente.</p>
+		</div>
+	</div>
+</template>
+
+<script>
+import Card from './components/Card.vue'
+
+export default {
+	name: 'App',
+	components: {
+		Card
+	},
+	data: () => ({
+		card: {
+			name: "Bang!",
+			icon: "🔫",
+			number: 2,
+			suit: '♠',
+			is_equipment: false,
+		},
+		isConnected: false,
+		didSetUsername: false,
+		username: '',
+		openLobbies: [],
+		lobbyName: '',
+		isInLobby: false,
+	}),
+	sockets: {
+		connect() {
+			this.isConnected = true;
+		},
+		disconnect() {
+			this.isConnected = false;
+		},
+		lobbies(data) {
+			this.openLobbies = data;
+		}
+	},
+	methods: {
+		setUsername(){
+			this.didSetUsername = true
+			this.$socket.emit('set_username', this.username)
+		},
+		getLobbyCard(lobby) {
+			return {
+				name: lobby.name,
+				icon: "💥",
+				number: lobby.players,
+				suit: '🤠',
+				is_equipment: true,
+			}
+		},
+		createLobby() {
+			if (this.lobbyName.trim().length > 0) {
+				this.$socket.emit('create_room', this.lobbyName)
+				this.isInLobby = true; 
+			}
+		}
+	}
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

frontend/src/components/Card.vue

@@ -0,0 +1,72 @@
+<template>
+	<div :class="{ card: true, equipment: card.is_equipment }" @click="equip(card)">
+		<h3>{{card.name}}</h3>
+		<emoji>{{card.icon}}</emoji>
+		<span>{{card.number}}{{card.suit}}</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'HelloWorld',
+	props: {
+    card: Object
+  },
+}
+</script>
+
+<style>
+.card {
+  cursor: pointer;
+  width: 60pt;
+  min-width:60pt;
+  height: 100pt;
+	margin: 12pt;
+  background: white;
+  box-shadow: 
+    0 0 0 3pt #987e51,
+    0 0 0 6pt white,
+    0 0 5pt 6pt #aaa;
+  border-radius: 6pt;
+  position: relative;
+  transition: all 0.5s ease-in-out;
+}
+.card.back{
+  color:white;
+  background: #987e51;
+}
+.card.back::before{
+  background:red;
+}
+
+.card.equipment {
+  box-shadow: 
+    0 0 0 3pt #5c5e83,
+    0 0 0 6pt white,
+    0 0 5pt 6pt #aaa;
+}
+.card.character {
+  box-shadow: 
+    0 0 0 3pt #7c795b,
+    0 0 0 6pt white,
+    0 0 5pt 6pt #aaa;
+}
+.card h3 {
+	position: absolute;
+  text-align: center;
+  width: 100%;
+  top: -10pt;
+} 
+.card emoji {
+	position: absolute;
+  text-align: center;
+  width: 100%;
+  font-size:26pt;
+  top: 35%;
+} 
+.card span {
+	position: absolute;
+  bottom: 3pt;
+  left:3pt;
+}
+</style>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

frontend/src/main.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+import VueSocketIO from 'vue-socket.io'
+Vue.use(new VueSocketIO({
+	debug: true,
+	connection: 'http://localhost:5001',
+}))
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')