6 |
)
43 | }
44 |
45 | export default GameInputs;
46 |
47 |
--------------------------------------------------------------------------------
/client/public/hearts.svg:
--------------------------------------------------------------------------------
1 |
2 |
40 |
--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
7 | Position: ({playerX}, {playerY})
8 | / ({boardWidth - 1}, {boardHeight - 1})
9 |
10 |
11 |
12 |
29 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 | Powered by
31 |
32 |
33 |
34 | 
35 |
36 |
37 |
35 |
36 |
17 | {!inGame &&
)
61 |
62 | }
63 |
64 | export default PlayerForm
65 |
--------------------------------------------------------------------------------
/client/src/components/GameArea.js:
--------------------------------------------------------------------------------
1 | import GameInputs from "./GameInputs"
2 | import GameField from "./GameField"
3 |
4 | const GameArea = (props) => {
5 |
6 | const playerName = props.playerName
7 | const playerID = props.playerID
8 | const playerMap = props.playerMap
9 | const brickList = props.brickList
10 | const foodMap = props.foodMap
11 | const playerX = props.playerX
12 | const setPlayerX = props.setPlayerX
13 | const playerY = props.playerY
14 | const setPlayerY = props.setPlayerY
15 | const boardWidth = props.boardWidth
16 | const boardHeight = props.boardHeight
17 | const handleKeyDown = props.handleKeyDown
18 | const lastSent = props.lastSent
19 | const lastReceived = props.lastReceived
20 | const setPlayerH = props.setPlayerH
21 | const chatItems = props.chatItems
22 | const sendChatItem = props.sendChatItem
23 |
24 | return (
25 |
18 |
}
51 | {inGame && 19 | Your name: 20 | setPlayerName(e.target.value)} 25 | /> 26 |
27 |28 | Your ID: 29 | 30 |
31 |32 | API Location: 33 | setApiLocation(e.target.value)} 38 | /> 39 |
40 | 50 |
52 |
}
60 |
53 | Drapetisca
54 | {playerName}
55 |
58 |
59 |
26 |
62 | );
63 |
64 | }
65 |
66 | export default GameArea;
67 |
--------------------------------------------------------------------------------
/api/pulsarTools.py:
--------------------------------------------------------------------------------
1 | """
2 | pulsarTools.py
3 | """
4 |
5 | import os
6 | import pulsar
7 | from dotenv import load_dotenv
8 |
9 |
10 | load_dotenv()
11 | try:
12 | STREAMING_TENANT = os.environ['STREAMING_TENANT']
13 | STREAMING_NAMESPACE = os.environ['STREAMING_NAMESPACE']
14 | STREAMING_TOPIC = os.environ['STREAMING_TOPIC']
15 | STREAMING_SERVICE_URL = os.environ['STREAMING_SERVICE_URL']
16 | TRUST_CERTS = os.environ['TRUST_CERTS']
17 | ASTRA_STREAMING_TOKEN = os.environ['ASTRA_STREAMING_TOKEN']
18 | #
19 | client = pulsar.Client(
20 | STREAMING_SERVICE_URL,
21 | authentication=pulsar.AuthenticationToken(ASTRA_STREAMING_TOKEN),
22 | tls_trust_certs_file_path=TRUST_CERTS,
23 | )
24 | except KeyError:
25 | raise KeyError('Environment variables not detected. Perhaps you forgot to '
26 | 'prepare the .env file ?')
27 |
28 | streamingTopic = 'persistent://{tenant}/{namespace}/{topic}'.format(
29 | tenant=STREAMING_TENANT,
30 | namespace=STREAMING_NAMESPACE,
31 | topic=STREAMING_TOPIC,
32 | )
33 |
34 |
35 | # Pulsar producer/consumer caches
36 | # (for parsimonious allocation of resources)
37 | consumerCache = {}
38 | cachedProducer = None
39 |
40 |
41 | def getPulsarClient():
42 | return client
43 |
44 |
45 | def getConsumer(clientID, puClient):
46 | global consumerCache
47 | #
48 | if clientID not in consumerCache:
49 | pulsarSubscription = f'sub_{clientID}'
50 | consumerCache[clientID] = puClient.subscribe(streamingTopic,
51 | pulsarSubscription)
52 | #
53 | return consumerCache[clientID]
54 |
55 |
56 | def getProducer(puClient):
57 | global cachedProducer
58 | #
59 | if cachedProducer is None:
60 | cachedProducer = puClient.create_producer(streamingTopic)
61 | #
62 | return cachedProducer
63 |
64 |
65 | def receiveOrNone(consumer, timeout):
66 | """
67 | A modified 'receive' function for a Pulsar topic
68 | that handles timeouts so that when the topic is empty
69 | it simply returns None.
70 | """
71 | try:
72 | msg = consumer.receive(timeout)
73 | return msg
74 | except Exception as e:
75 | if 'timeout' in str(e).lower():
76 | return None
77 | else:
78 | raise e
79 |
--------------------------------------------------------------------------------
/client/src/components/GameField.js:
--------------------------------------------------------------------------------
1 | const GameField = ({playerMap, brickList, foodMap, playerID, boardWidth, boardHeight}) => {
2 |
3 | return (
4 |
55 | )
56 | }
57 |
58 | export default GameField;
59 |
--------------------------------------------------------------------------------
/api/database/dal.py:
--------------------------------------------------------------------------------
1 | """
2 | dal.py
3 | Cassandra (or Astra DB) access layer
4 | """
5 |
6 | from .dbsession import session
7 |
8 |
9 | # prepared statements are created here for later usage:
10 | psInsertObjectCQL = session.prepare(
11 | 'INSERT INTO objects_by_game_id (game_id, kind, object_id, active, '
12 | 'x, y, h, generation, name) VALUES ( ?, ?, ?, ?, ?, ?, ?, ?, ? );'
13 | )
14 | psInsertObjectCoordinatesCQL = session.prepare(
15 | 'INSERT INTO objects_by_game_id (game_id, kind, object_id, '
16 | 'active, x, y) VALUES ( ?, ?, ?, ?, ?, ? );'
17 | )
18 | psSelectObjectByIDCQL = session.prepare(
19 | 'SELECT object_id, x, y, h, generation, name FROM objects_by_game_id WHERE '
20 | 'game_id = ? AND kind = ? AND object_id = ?'
21 | )
22 | psSelectObjectsCQL = session.prepare(
23 | 'SELECT kind, object_id, active, x, y, h, generation, name FROM '
24 | 'objects_by_game_id WHERE game_id = ?;'
25 | )
26 | psInsertObjectActivenessCQL = session.prepare(
27 | 'INSERT INTO objects_by_game_id (game_id, kind, object_id, active) VALUES '
28 | '(?, ?, ?, ?);'
29 | )
30 | psSelectObjectsShortCQL = session.prepare(
31 | 'SELECT kind, object_id, active, x, y, name FROM '
32 | 'objects_by_game_id WHERE game_id = ?;'
33 | )
34 | psSelectObjectsShortByKindCQL = session.prepare(
35 | 'SELECT object_id, active, x, y FROM '
36 | 'objects_by_game_id WHERE game_id = ? AND kind = ?;'
37 | )
38 |
39 | ##
40 |
41 |
42 | def storeActivity(uGameID, kind, uObjectID, active):
43 | session.execute(
44 | psInsertObjectActivenessCQL,
45 | (
46 | uGameID, kind, uObjectID, active,
47 | ),
48 | )
49 |
50 |
51 | def storeObject(uGameID, kind, uObjectID, active, x, y, h, generation, name):
52 | session.execute(
53 | psInsertObjectCQL,
54 | (
55 | uGameID, kind, uObjectID, active, x, y, h, generation, name,
56 | ),
57 | )
58 |
59 |
60 | def storeCoordinates(uGameID, kind, uObjectID, active, x, y):
61 | session.execute(
62 | psInsertObjectCoordinatesCQL,
63 | (
64 | uGameID, kind, uObjectID, active, x, y,
65 | ),
66 | )
67 |
68 |
69 | def retrieveByGameID(uGameID):
70 | results = session.execute(
71 | psSelectObjectsCQL,
72 | (uGameID, ),
73 | )
74 | return (
75 | row._asdict()
76 | for row in results
77 | )
78 |
79 |
80 |
81 | def retrieveShortByGameID(uGameID):
82 | results = session.execute(
83 | psSelectObjectsShortCQL,
84 | (uGameID, ),
85 | )
86 | return (
87 | row._asdict()
88 | for row in results
89 | )
90 |
91 |
92 | def retrieveObjectByID(uGameID, kind, uObjectID):
93 | result = session.execute(
94 | psSelectObjectByIDCQL,
95 | (
96 | uGameID, kind, uObjectID,
97 | ),
98 | ).one()
99 | if result is None:
100 | return None
101 | else:
102 | return result._asdict()
103 |
104 |
105 | def retrieveOneShortByKind(uGameID, kind):
106 | item = session.execute(
107 | psSelectObjectsShortByKindCQL,
108 | (
109 | uGameID, kind,
110 | ),
111 | ).one()
112 | if item is not None:
113 | return item._asdict()
114 | else:
115 | return None
116 |
--------------------------------------------------------------------------------
/client/public/brick.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/client/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | body {
17 | background-color: gold;
18 | }
19 |
20 | .App-header {
21 | background-color: #98bcd4;
22 | display: flex;
23 | padding-bottom: 10px;
24 | border: 1px solid #777;
25 | border-radius: 4px;
26 | flex-direction: column;
27 | align-items: center;
28 | justify-content: center;
29 | font-size: calc(10px + 2vmin);
30 | color: white;
31 | margin: 5px;
32 | }
33 |
34 | .game-inputs {
35 | }
36 |
37 | .grid-container {
38 | display: grid;
39 | grid-template-columns: auto auto auto;
40 | grid-gap: 2px;
41 | padding: 0 60px;
42 | }
43 |
44 | .grid-container > div {
45 | text-align: center;
46 | font-size: 30px;
47 | }
48 |
49 | .container {
50 | display: flex;
51 | flex-direction: row;
52 | }
53 |
54 | .game-field {
55 | border-radius: 15px;
56 | border-width: 2px;
57 | border: 8px solid #20b020;
58 | }
59 |
60 | .sidebar,
61 | .content {
62 | display: flex;
63 | flex-direction: column;
64 | background: #98bcd4;
65 | align-items: center;
66 | min-height: 500px;
67 | border-radius: 4px;
68 | padding-top: 10px;
69 | margin: 5px;
70 | border: 1px solid #777;
71 | }
72 |
73 | .sidebar {
74 | flex-grow: 1;
75 | min-width: 300px;
76 | max-width: 350px;
77 | }
78 |
79 | .content {
80 | flex-grow: 10;
81 | min-width: 630px;
82 | padding: 15px;
83 | text-align: center;
84 | }
85 |
86 | .astra-logo {
87 | padding-top: 40px;
88 | }
89 |
90 | .astra-logo > img {
91 | width: 90px;
92 | }
93 |
94 | .player-position {
95 | border-radius: 8px;
96 | border: 1px solid #777;
97 | padding: 10px;
98 | margin: 0 0 20px 0;
99 | }
100 |
101 | .game-title {
102 | border-radius: 8px;
103 | border: 1px solid #777;
104 | padding: 4px;
105 | margin: 5px 0 5px 0;
106 | font-size: 20px;
107 | color: black;
108 | }
109 |
110 | .game-title-name {
111 | color: blue;
112 | }
113 |
114 | .game-title-player-name {
115 | color: purple;
116 | font-weight: bold;
117 | margin: 0 20px 0 20px;
118 | }
119 |
120 | .reference-position {
121 | font-size: 10px;
122 | color: #555555;
123 | }
124 |
125 | .chat-area {
126 | margin-top: 60px;
127 | border-radius: 8px;
128 | padding: 20px;
129 | background: #f9ffbb;
130 | }
131 |
132 | .statusbar {
133 | background: #98bcd4;
134 | font-size: 70%;
135 | text-align: left;
136 | margin: 5px;
137 | border: 1px solid #777;
138 | padding: 5px;
139 | border-radius: 4px;
140 | }
141 |
142 | .game-message {
143 | color: blue;
144 | font-weight: bold;
145 | font-size: 110%;
146 | }
147 |
148 | .chat-title {
149 | font-size: 150%;
150 | color: blue;
151 | font-variant: small-caps;
152 | }
153 |
154 | .chat-list {
155 | text-align: left;
156 | list-style-type: none;
157 | padding: 0;
158 | margin: 0;
159 | padding-bottom: 15px;
160 | padding-top: 10px;
161 | min-height: 100px;
162 | }
163 |
164 | .chat-item {
165 | font-size: 75%;
166 | }
167 |
168 | .chat-player-name {
169 | font-style: italic;
170 | }
171 |
172 | .player-self {
173 | color: #10b010;
174 | fill: #10b010;
175 | }
176 |
177 | .player-other {
178 | color: #bf99ff;
179 | fill: #bf99ff;
180 | }
181 |
182 | .player-name {
183 | fill: #404040;
184 | }
185 |
186 | .arrow-key {
187 | background-color: #10b010;
188 | border: 1px solid black;
189 | color: black;
190 | padding: 10px;
191 | margin: 5px;
192 | text-align: center;
193 | font-size: 25px;
194 | }
--------------------------------------------------------------------------------
/api/inmemory/dal.py:
--------------------------------------------------------------------------------
1 | """
2 | dal.py
3 | In-memory access layer, alternative to an actual storage.
4 |
5 | Useful for quick debugging or to overcome less-than-ideal deployments,
6 | in particular those with the API far from the DB (e.g. Gitpod vs Astra DB).
7 | This helps relieve latency issues, at the price that the API would not
8 | be able to scale to more processes as the whole "persisted game state"
9 | remains process-local.
10 |
11 | Note: not particularly optimized (or elegant at that).
12 | """
13 |
14 |
15 | # a map gameID -> kind -> objectID -> whole dict
16 | memStorage = {}
17 |
18 |
19 | def _ensureGameID(uGameID):
20 | memStorage[uGameID] = memStorage.get(uGameID, {})
21 |
22 |
23 | def _ensureKind(uGameID, kind):
24 | _ensureGameID(uGameID)
25 | memStorage[uGameID][kind] = memStorage[uGameID].get(kind, {})
26 |
27 |
28 | def _ensureObjectID(uGameID, kind, uObjectID):
29 | _ensureKind(uGameID, kind)
30 | memStorage[uGameID][kind][uObjectID] = memStorage[uGameID][kind].get(uObjectID, {})
31 |
32 |
33 | def _qualify(gid, kdd, oid, rec, columns=None):
34 | # add the "primary key" to entries found in the mem storage
35 | r = {k: v for k, v in rec.items()}
36 | r['game_id'] = gid
37 | r['kind'] = kdd
38 | r['object_id'] = oid
39 | return {
40 | k: v
41 | for k, v in r.items()
42 | if columns is None or k in columns
43 | }
44 |
45 |
46 | ##
47 |
48 |
49 | def storeActivity(uGameID, kind, uObjectID, active):
50 | _ensureObjectID(uGameID, kind, uObjectID)
51 | #
52 | memStorage[uGameID][kind][uObjectID]['active'] = active
53 |
54 |
55 | def storeObject(uGameID, kind, uObjectID, active, x, y, h, generation, name):
56 | _ensureObjectID(uGameID, kind, uObjectID)
57 | #
58 | memStorage[uGameID][kind][uObjectID] = {
59 | 'active': active,
60 | 'x': x,
61 | 'y': y,
62 | 'h': h,
63 | 'generation': generation,
64 | 'name': name,
65 | }
66 |
67 |
68 | def storeCoordinates(uGameID, kind, uObjectID, active, x, y):
69 | _ensureObjectID(uGameID, kind, uObjectID)
70 | #
71 | memStorage[uGameID][kind][uObjectID]['x'] = x
72 | memStorage[uGameID][kind][uObjectID]['y'] = y
73 | memStorage[uGameID][kind][uObjectID]['active'] = active
74 |
75 |
76 | def retrieveByGameID(uGameID):
77 | _ensureGameID(uGameID)
78 | #
79 | return (
80 | _qualify(
81 | uGameID,
82 | kd,
83 | oID,
84 | record,
85 | {'kind', 'object_id', 'active', 'x', 'y', 'h', 'generation', 'name'},
86 | )
87 | for kd, oidmap in memStorage[uGameID].items()
88 | for oID, record in oidmap.items()
89 | )
90 |
91 |
92 | def retrieveShortByGameID(uGameID):
93 | _ensureGameID(uGameID)
94 | #
95 | return (
96 | _qualify(
97 | uGameID,
98 | kd,
99 | oID,
100 | record,
101 | {'kind', 'object_id', 'active', 'x', 'y', 'name'},
102 | )
103 | for kd, oidmap in memStorage[uGameID].items()
104 | for oID, record in oidmap.items()
105 | )
106 |
107 |
108 | def retrieveObjectByID(uGameID, kind, uObjectID):
109 | _ensureKind(uGameID, kind)
110 | #
111 | if uObjectID in memStorage[uGameID][kind]:
112 | return _qualify(
113 | uGameID,
114 | kind,
115 | uObjectID,
116 | memStorage[uGameID][kind][uObjectID],
117 | {'object_id', 'x', 'y', 'h', 'generation', 'name'},
118 | )
119 | else:
120 | return None
121 |
122 |
123 | def retrieveOneShortByKind(uGameID, kind):
124 | _ensureKind(uGameID, kind)
125 | #
126 | found = [
127 | _qualify(
128 | uGameID,
129 | kind,
130 | oID,
131 | record,
132 | {'object_id', 'active', 'x', 'y'},
133 | )
134 | for oID, record in memStorage[uGameID][kind].items()
135 | ]
136 | if found == []:
137 | return None
138 | else:
139 | return found[0]
140 |
--------------------------------------------------------------------------------
/images/open_in_gitpod_button.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/src/utils/names.js:
--------------------------------------------------------------------------------
1 | // utility to draw a random spider name
2 |
3 | // List of spider genera in Italy
4 | // according to [Pantini, Isaia 2019]
5 | const spiderNames = [
6 | 'Acantholycosa',
7 | 'Acartauchenius',
8 | 'Aculepeira',
9 | 'Agalenatea',
10 | 'Agelena',
11 | 'Agnyphantes',
12 | 'Agraecina',
13 | 'Agroeca',
14 | 'Agyneta',
15 | 'Alioranus',
16 | 'Allagelena',
17 | 'Allomengea',
18 | 'Alopecosa',
19 | 'Altella',
20 | 'Amaurobius',
21 | 'Amblyocarenum',
22 | 'Anguliphantes',
23 | 'Antistea',
24 | 'Anyphaena',
25 | 'Aphantaulax',
26 | 'Aphileta',
27 | 'Apostenus',
28 | 'Araeoncus',
29 | 'Araneus',
30 | 'Araniella',
31 | 'Archaeodictyna',
32 | 'Argenna',
33 | 'Argiope',
34 | 'Argyroneta',
35 | 'Asthenargus',
36 | 'Aterigena',
37 | 'Atypus',
38 | 'Baryphyma',
39 | 'Bathyphantes',
40 | 'Berlandina',
41 | 'Bolephthyphantes',
42 | 'Bolyphantes',
43 | 'Brigittea',
44 | 'Brommella',
45 | 'Callilepis',
46 | 'Callobius',
47 | 'Camillina',
48 | 'Canariphantes',
49 | 'Caracladus',
50 | 'Caviphantes',
51 | 'Centromerita',
52 | 'Centromerus',
53 | 'Ceratinella',
54 | 'Cercidia',
55 | 'Cheiracanthium',
56 | 'Cicurina',
57 | 'Cinetata',
58 | 'Civizelotes',
59 | 'Clubiona',
60 | 'Cnephalocotes',
61 | 'Coelotes',
62 | 'Collinsia',
63 | 'Comaroma',
64 | 'Cresmatoneta',
65 | 'Crosbyarachne',
66 | 'Cryphoeca',
67 | 'Cryptodrassus',
68 | 'Cteniza',
69 | 'Cybaeodes',
70 | 'Cybaeus',
71 | 'Cyclosa',
72 | 'Cyrtarachne',
73 | 'Cyrtophora',
74 | 'Dasumia',
75 | 'Dictyna',
76 | 'Dicymbium',
77 | 'Diplocentria',
78 | 'Diplocephalus',
79 | 'Diplostyla',
80 | 'Dismodicus',
81 | 'Donacochara',
82 | 'Drapetisca',
83 | 'Drassodes',
84 | 'Drassodex',
85 | 'Drassyllus',
86 | 'Drepanotylus',
87 | 'Dysdera',
88 | 'Echemus',
89 | 'Emblyna',
90 | 'Entelecara',
91 | 'Eratigena',
92 | 'Eresus',
93 | 'Erigone',
94 | 'Erigonella',
95 | 'Erigonoplus',
96 | 'Evansia',
97 | 'Filistata',
98 | 'Floronia',
99 | 'Formiphantes',
100 | 'Frontinellina',
101 | 'Gibbaranea',
102 | 'Glyphesis',
103 | 'Glyptogona',
104 | 'Gnaphosa',
105 | 'Gnathonarium',
106 | 'Gonatium',
107 | 'Gongylidiellum',
108 | 'Gongylidium',
109 | 'Hahnia',
110 | 'Hahniharmia',
111 | 'Haplodrassus',
112 | 'Harpactea',
113 | 'Harpactocrates',
114 | 'Helophora',
115 | 'Heser',
116 | 'Hilaira',
117 | 'Histopona',
118 | 'Hybocoptus',
119 | 'Hylyphantes',
120 | 'Hypomma',
121 | 'Hypsocephalus',
122 | 'Hypsosinga',
123 | 'Iberina',
124 | 'Improphantes',
125 | //'Incestophantes', // does not sound very gentle to assign a game player
126 | 'Inermocoelotes',
127 | 'Ipa',
128 | 'Janetschekia',
129 | 'Kaemis',
130 | 'Kaestneria',
131 | 'Kishidaia',
132 | 'Labulla',
133 | 'Larinioides',
134 | 'Lasiargus',
135 | 'Lathys',
136 | 'Lepthyphantes',
137 | 'Leptodrassus',
138 | 'Leptoneta',
139 | 'Leptorhoptrum',
140 | 'Lessertia',
141 | 'Lessertinella',
142 | 'Leviellus',
143 | 'Linyphia',
144 | 'Liocranoeca',
145 | 'Liocranum',
146 | 'Lipocrea',
147 | 'Lophomma',
148 | 'Lycosoides',
149 | 'Macrargus',
150 | 'Maimuna',
151 | 'Mangora',
152 | 'Mansuphantes',
153 | 'Marilynia',
154 | 'Maro',
155 | 'Maso',
156 | 'Mastigusa',
157 | 'Mecopisthes',
158 | 'Mecynargus',
159 | 'Megalepthyphantes',
160 | 'Mermessus',
161 | 'Mesiotelus',
162 | 'Mesostalita',
163 | 'Metopobactrus',
164 | 'Micaria',
165 | 'Micrargus',
166 | 'Microctenonyx',
167 | 'Microlinyphia',
168 | 'Microneta',
169 | 'Midia',
170 | 'Minicia',
171 | 'Minyriolus',
172 | 'Mioxena',
173 | 'Mizaga',
174 | 'Moebelia',
175 | 'Monocephalus',
176 | 'Mughiphantes',
177 | 'Mycula',
178 | 'Nematogmus',
179 | 'Neoscona',
180 | 'Neriene',
181 | 'Nigma',
182 | 'Nomisia',
183 | 'Notioscopus',
184 | 'Nuctenea',
185 | 'Nusoncus',
186 | 'Obscuriphantes',
187 | 'Oedothorax',
188 | 'Oreoneta',
189 | 'Oreonetides',
190 | 'Ostearius',
191 | 'Ouedia',
192 | 'Palliduphantes',
193 | 'Panamomops',
194 | 'Parachtes',
195 | 'Paraleptoneta',
196 | 'Parapelecopsis',
197 | 'Parasyrisca',
198 | 'Pelecopsis',
199 | 'Peponocranium',
200 | 'Phaeocedus',
201 | 'Piniphantes',
202 | 'Pireneitega',
203 | 'Pityohyphantes',
204 | 'Pocadicnemis',
205 | 'Poecilochroa',
206 | 'Poeciloneta',
207 | 'Porrhoclubiona',
208 | 'Porrhomma',
209 | 'Prinerigone',
210 | 'Pritha',
211 | 'Protoleptoneta',
212 | 'Pseudomaro',
213 | 'Rhode',
214 | 'Saaristoa',
215 | 'Sagana',
216 | 'Saloca',
217 | 'Sardostalita',
218 | 'Sauron',
219 | 'Sciastes',
220 | 'Scotargus',
221 | 'Scotina',
222 | 'Scotinotylus',
223 | 'Scotophaeus',
224 | 'Scutpelecopsis',
225 | 'Semljicola',
226 | 'Setaphis',
227 | 'Silometopus',
228 | 'Singa',
229 | 'Sintula',
230 | 'Sisicus',
231 | 'Sosticus',
232 | 'Stalita',
233 | 'Stegodyphus',
234 | 'Stemonyphantes',
235 | 'Styloctetor',
236 | 'Syedra',
237 | 'Synaphosus',
238 | 'Tallusia',
239 | 'Tapinocyba',
240 | 'Tapinocyboides',
241 | 'Tapinopa',
242 | 'Tegenaria',
243 | 'Tenuiphantes',
244 | 'Textrix',
245 | 'Theonina',
246 | 'Thyreosthenius',
247 | 'Tiso',
248 | 'Trachyzelotes',
249 | 'Trematocephalus',
250 | 'Trichoncoides',
251 | 'Trichoncus',
252 | 'Trichoncyboides',
253 | 'Trichopterna',
254 | 'Trichopternoides',
255 | 'Troglohyphantes',
256 | 'Troxochrus',
257 | 'Tuberta',
258 | 'Turinyphia',
259 | 'Typhochrestus',
260 | 'Urocoras',
261 | 'Urozelotes',
262 | 'Walckenaeria',
263 | 'Wiehlenarius',
264 | 'Zangherella',
265 | 'Zelotes',
266 | 'Zilla',
267 | 'Zimirina',
268 | 'Zygiella'
269 | ]
270 |
271 | const getRandomSpiderName = () => {
272 | return spiderNames[Math.floor(spiderNames.length * Math.random())]
273 | }
274 |
275 | export default getRandomSpiderName
276 |
277 |
--------------------------------------------------------------------------------
/client/public/food.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/api/messaging.py:
--------------------------------------------------------------------------------
1 | """
2 | messaging.py
3 | """
4 |
5 | import time
6 | import random
7 | from uuid import uuid4
8 |
9 | from utils import dictMerge
10 |
11 |
12 | # poor randomness, not a problem here
13 | random.seed(int(time.time()))
14 |
15 |
16 | def pickBrickPositions(w, h, fraction):
17 | """
18 | sparseness assumption: we don't care much
19 | about double-counting, eh.
20 | """
21 | return {
22 | (
23 | random.randint(0, w-1),
24 | random.randint(0, h-1),
25 | )
26 | for _ in range(int(w*h*fraction))
27 | }
28 |
29 |
30 | def pickFoodPositions(w, h, num, occupancyMap):
31 | """
32 | we want this to return exactly 'num' items
33 | """
34 | freeCells = [
35 | (x, y)
36 | for x in range(w)
37 | for y in range(h)
38 | if (x, y) not in occupancyMap
39 | ]
40 | # ... unless there are less than that to choose from (!)
41 | _num = min(len(freeCells), num)
42 | # We would like to have a cool permutation but importing numpy for
43 | # this feels like an overkill so here you go with a lazy mutable-based
44 | # solution (meh)
45 | chosenPositions = set()
46 | while len(chosenPositions) < _num:
47 | proposal = freeCells[random.randint(0, len(freeCells)-1)]
48 | chosenPositions = chosenPositions | {proposal}
49 | #
50 | return chosenPositions
51 |
52 |
53 | def makeCoordPair(updDict):
54 | if updDict is None:
55 | return (None, None)
56 | else:
57 | return (
58 | updDict['payload']['x'],
59 | updDict['payload']['y'],
60 | )
61 |
62 |
63 | def validatePosition(updDict, halfX, halfY, fieldOccupancy, prevUpdate):
64 | """
65 | Utility function to keep the 'x' and 'y' in a dict
66 | bound within the game field,
67 | respecting other keys in the passed dict.
68 |
69 | RETURN a 2-tuple (validatedUpdateDict, None-or-foodItem)
70 | """
71 | def _constrain(val, minv, maxv):
72 | return max(minv, min(val, maxv))
73 |
74 | # update wants to get to these coordinates:
75 | updX = updDict['payload']['x']
76 | updY = updDict['payload']['y']
77 | # None values are a init transient, we ignore validation
78 |
79 | if updX is None or updY is None:
80 | # "everything goes"
81 | return updDict, None
82 | else:
83 | cnewX = _constrain(updX, 0, 2*halfX - 2)
84 | cnewY = _constrain(updY, 0, 2*halfY - 2)
85 |
86 | # can player get to that position? and, does it catch food?
87 | if (cnewX, cnewY) not in fieldOccupancy:
88 | targetIsFree = True
89 | caughtFoodItem = None
90 | elif fieldOccupancy[(cnewX, cnewY)]['kind'] == 'food':
91 | targetIsFree = True
92 | caughtFoodItem = fieldOccupancy[(cnewX, cnewY)]
93 | else:
94 | targetIsFree = False
95 | caughtFoodItem = None
96 |
97 | # is the move too long a jump?
98 | if prevUpdate is None:
99 | curX = halfX - 1
100 | curY = halfY - 1
101 | else:
102 | curX = prevUpdate['payload']['x']
103 | curY = prevUpdate['payload']['y']
104 | if curX is not None and curY is not None:
105 | targetIsNear = abs(curX - cnewX) < 2 and abs(curY - cnewY) < 2
106 | else:
107 | targetIsNear = True
108 | #
109 | canGetThere = targetIsFree and targetIsNear
110 | if canGetThere:
111 | # yes, it can
112 | newPosPayload = {
113 | 'x': cnewX,
114 | 'y': cnewY,
115 | }
116 | return dictMerge(
117 | {
118 | 'payload': newPosPayload,
119 | },
120 | default=updDict,
121 | ), caughtFoodItem
122 | else:
123 | cbX = curX
124 | cbY = curY
125 | newPosPayload = {
126 | 'x': cbX,
127 | 'y': cbY,
128 | }
129 | return dictMerge(
130 | {
131 | 'payload': newPosPayload,
132 | },
133 | default=updDict,
134 | ), caughtFoodItem
135 |
136 |
137 | def makePositionUpdate(client_id, client_name, x, y, h, generation):
138 | return {
139 | 'messageType': 'player',
140 | 'playerID': client_id,
141 | 'payload': {
142 | 'x': x,
143 | 'y': y,
144 | 'h': h,
145 | 'generation': generation,
146 | 'name': client_name,
147 | },
148 | }
149 |
150 |
151 | def makeEnteringPositionUpdate(client_id, client_name, halfX, halfY,
152 | occupancyMap):
153 | # we randomize and take care to avoid cells with anything in them
154 | freeCells = [
155 | (x, y)
156 | for x in range(2*halfX - 1)
157 | for y in range(2*halfY - 1)
158 | if (x, y) not in occupancyMap
159 | ]
160 | if len(freeCells) > 0:
161 | tX, tY = freeCells[random.randint(0, len(freeCells)-1)]
162 | else:
163 | tX = halfX - 1
164 | tY = halfY - 1
165 | #
166 | return makePositionUpdate(client_id, client_name, tX, tY,
167 | False, 0)
168 |
169 |
170 | def makeLeavingUpdate(client_id):
171 | """
172 | A default 'leaving' message to publish to the Pulsar topic
173 | in case a client disconnection is detected
174 | """
175 | return {
176 | 'messageType': 'leaving',
177 | 'playerID': client_id,
178 | 'payload': {
179 | 'name': '',
180 | },
181 | }
182 |
183 |
184 | def makeServerChatUpdate(client_id, text):
185 | return {
186 | 'messageType': 'chat',
187 | 'payload': {
188 | 'id': str(uuid4()),
189 | 'name': '** API **',
190 | 'text': text,
191 | },
192 | 'playerID': '_api_server_',
193 | }
194 |
195 |
196 | def makeWelcomeUpdate(client_id, name='Unnamed'):
197 | """
198 | A server-generated chat message to greet a new player
199 | """
200 | return makeServerChatUpdate(client_id, 'Welcome to the game, %s!' % name)
201 |
202 |
203 | def makeGeometryUpdate(hsX, hsY):
204 | """
205 | Prepare a message containing the field geometry info
206 | """
207 | return {
208 | 'messageType': 'geometry',
209 | 'payload': {
210 | 'halfSizeX': hsX,
211 | 'halfSizeY': hsY,
212 | },
213 | }
214 |
215 |
216 | def makeBrickUpdate(brick_name, x, y):
217 | return {
218 | 'messageType': 'brick',
219 | 'payload': {
220 | 'x': x,
221 | 'y': y,
222 | 'name': brick_name,
223 | },
224 | }
225 |
226 |
227 | def makeFoodUpdate(food_id, food_name, x, y):
228 | return {
229 | 'messageType': 'food',
230 | 'foodID': str(food_id),
231 | 'payload': {
232 | 'x': x,
233 | 'y': y,
234 | 'name': food_name,
235 | },
236 | }
237 |
--------------------------------------------------------------------------------
/api/api.py:
--------------------------------------------------------------------------------
1 | """
2 | api.py
3 | Run with:
4 | uvicorn api:app
5 | """
6 |
7 | import asyncio
8 | import json
9 | from uuid import uuid4
10 |
11 | from fastapi import FastAPI, WebSocket, WebSocketDisconnect
12 | from fastapi.responses import HTMLResponse
13 |
14 | from pulsarTools import (getPulsarClient, getConsumer, getProducer,
15 | receiveOrNone)
16 | from utils import dictMerge
17 | from messaging import (validatePosition, makeLeavingUpdate, makeGeometryUpdate,
18 | makeWelcomeUpdate, makeEnteringPositionUpdate,
19 | makeCoordPair, pickFoodPositions, makeFoodUpdate,
20 | makeServerChatUpdate)
21 | from gameStatus import (storeGamePlayerStatus, retrieveActiveGameItems,
22 | retrieveGamePlayerStatus, storeGameInactivePlayer,
23 | storeGameActivePlayer, retrieveFieldOccupancy,
24 | storeGamePlayerPosition, storeFoodItemStatus,
25 | layBricks, layFood)
26 |
27 | from settings import (HALF_SIZE_X, HALF_SIZE_Y, RECEIVE_TIMEOUTS_MS,
28 | SLEEP_BETWEEN_READS_MS, BRICK_FRACTION, NUM_FOOD_ITEMS)
29 |
30 | app = FastAPI()
31 | gameID = str(uuid4())
32 |
33 |
34 | # a one-off gamefield initialization routine
35 | layBricks(gameID, HALF_SIZE_X, HALF_SIZE_Y, BRICK_FRACTION)
36 | layFood(gameID, HALF_SIZE_X, HALF_SIZE_Y, NUM_FOOD_ITEMS)
37 |
38 | @app.websocket("/ws/world/{client_id}")
39 | async def worldWSRoute(worldWS: WebSocket, client_id: str):
40 | await worldWS.accept()
41 | #
42 | pulsarClient = getPulsarClient()
43 | pulsarConsumer = getConsumer(client_id, pulsarClient)
44 | #
45 | try:
46 | # we start picking messages from the Pulsar 'bus'
47 | # and routing them to this client
48 | while True:
49 | worldUpdateMsg = receiveOrNone(pulsarConsumer, RECEIVE_TIMEOUTS_MS)
50 | if worldUpdateMsg is not None:
51 | # We forward any update from Pulsar into the 'world' websocket
52 | # for all clients out there:
53 | await worldWS.send_text(worldUpdateMsg.data().decode())
54 | pulsarConsumer.acknowledge(worldUpdateMsg)
55 | await asyncio.sleep(SLEEP_BETWEEN_READS_MS / 1000)
56 | except WebSocketDisconnect:
57 | pulsarConsumer.close()
58 |
59 |
60 | @app.websocket("/ws/player/{client_id}")
61 | async def playerWSRoute(playerWS: WebSocket, client_id: str):
62 | await playerWS.accept()
63 | #
64 | pulsarClient = getPulsarClient()
65 | pulsarProducer = getProducer(pulsarClient)
66 | #
67 | while True:
68 | try:
69 | # Any update from a player coming through the 'player' websocket
70 | updateMsgBlob = await playerWS.receive_text()
71 | # we unpack and inject playerID to the incoming message
72 | updateMsg = dictMerge(
73 | json.loads(updateMsgBlob),
74 | {'playerID': client_id},
75 | )
76 | if updateMsg['messageType'] == 'player':
77 | # if it's a player position update, retrieve gamefield status...
78 | fieldOccupancy = retrieveFieldOccupancy(gameID)
79 | # ... and last position for this player (if any)
80 | prevUpdate = retrieveGamePlayerStatus(gameID, client_id)
81 | # ... update is then validated ...
82 | playerUpdate, caughtFoodItem = validatePosition(
83 | updateMsg,
84 | HALF_SIZE_X,
85 | HALF_SIZE_Y,
86 | fieldOccupancy,
87 | prevUpdate
88 | )
89 | # We deal with caught food, if any
90 | if caughtFoodItem is not None:
91 | caughtFoodID = caughtFoodItem['object_id']
92 | caughtFoodName = caughtFoodItem['name']
93 | # relocate the food item
94 | newFPos = list(pickFoodPositions(
95 | 2*HALF_SIZE_X-1,
96 | 2*HALF_SIZE_Y-1,
97 | 1,
98 | fieldOccupancy,
99 | ))[0]
100 | # create the food update
101 | foodUpdate = makeFoodUpdate(
102 | caughtFoodID,
103 | caughtFoodName,
104 | newFPos[0],
105 | newFPos[1],
106 | )
107 | # persist new location to DB
108 | storeFoodItemStatus(gameID, foodUpdate)
109 | # congratulate catcher
110 | congratMessage = makeServerChatUpdate(client_id, 'Good catch!')
111 | await playerWS.send_text(json.dumps(congratMessage))
112 | # broadcast (to pulsar) new food update
113 | pulsarProducer.send((json.dumps(foodUpdate)).encode('utf-8'))
114 | #
115 | # ... persisted in the server-side status...
116 | storeGamePlayerStatus(gameID, playerUpdate)
117 | # ... and finally sent to Pulsar
118 | pulsarProducer.send((json.dumps(playerUpdate)).encode('utf-8'))
119 | elif updateMsg['messageType'] == 'leaving':
120 | # Player is leaving the game: we update our state to reflect this
121 | storeGameInactivePlayer(gameID, client_id)
122 | # ...but also broadcast this information to all players
123 | pulsarProducer.send((json.dumps(updateMsg)).encode('utf-8'))
124 | elif updateMsg['messageType'] == 'entering':
125 | # A new player announced they're entering and is asking for data
126 | newPlayerName = updateMsg['payload']['name']
127 | # first we tell this client how the game-field looks like
128 | geomUpdate = makeGeometryUpdate(HALF_SIZE_X, HALF_SIZE_Y)
129 | # Note: this message is built here (i.e. no Pulsar involved)
130 | # and directly sent to a single client, the one who just connected:
131 | await playerWS.send_text(json.dumps(geomUpdate))
132 | # we brief the newcomer on all players on the stage
133 | for ops in retrieveActiveGameItems(gameID, {client_id}):
134 | await playerWS.send_text(json.dumps(ops))
135 | # do we have a previously-stored position/status for this same player?
136 | plStatus = retrieveGamePlayerStatus(gameID, client_id)
137 | # we check the field occupancy for next step ...
138 | fieldOccupancy = retrieveFieldOccupancy(gameID)
139 | playerPrevCoords = makeCoordPair(plStatus)
140 | if plStatus is not None and playerPrevCoords not in fieldOccupancy:
141 | renamedPlStatus = dictMerge(
142 | {'payload': {'name': newPlayerName}},
143 | plStatus,
144 | )
145 | await playerWS.send_text(json.dumps(renamedPlStatus))
146 | # returning players: we want to route their return to pulsar as well
147 | pulsarProducer.send((json.dumps(renamedPlStatus)).encode('utf-8'))
148 | # and we also want to mark them as active
149 | storeGameActivePlayer(gameID, client_id)
150 | else:
151 | firstPos = makeEnteringPositionUpdate(
152 | client_id=client_id,
153 | client_name=newPlayerName,
154 | halfX=HALF_SIZE_X,
155 | halfY=HALF_SIZE_Y,
156 | occupancyMap=fieldOccupancy,
157 | )
158 | await playerWS.send_text(json.dumps(firstPos))
159 | storeGamePlayerPosition(gameID, client_id, True, *makeCoordPair(firstPos))
160 | else:
161 | # other types of message undergo no validation whatsoever:
162 | # we simply add the player ID to the message and publish
163 | pulsarProducer.send((json.dumps(updateMsg)).encode('utf-8'))
164 | except WebSocketDisconnect:
165 | # In this case we issue the "goodbye message" (i.e. null position)
166 | # on behalf of the client
167 | leavingUpdate = makeLeavingUpdate(client_id)
168 | # ... we store the disappearance of the player
169 | storeGameInactivePlayer(gameID, client_id)
170 | # ... and we send it to Pulsar for everyone:
171 | pulsarProducer.send((json.dumps(leavingUpdate)).encode('utf-8'))
172 |
--------------------------------------------------------------------------------
/api/gameStatus.py:
--------------------------------------------------------------------------------
1 | """
2 | gameStatus.py
3 | A persistence layer for the game.
4 | For simplicity, player-info entering and exiting this library
5 | are directly in the form of "player" messages. A bit of a tight
6 | coupling, but for illustration purposes it keeps everything simpler
7 | (one may want to more clearly decouple the two representations,
8 | row and 'player' message, in a more structured application).
9 | """
10 |
11 | import os
12 | import uuid
13 | from dotenv import load_dotenv
14 |
15 | from messaging import (makePositionUpdate, pickBrickPositions, makeBrickUpdate,
16 | pickFoodPositions, makeFoodUpdate)
17 |
18 | ###
19 |
20 |
21 | load_dotenv()
22 | USE_IN_MEMORY_STORAGE = int(os.environ.get('USE_IN_MEMORY_STORAGE', '0')) != 0
23 |
24 |
25 | if USE_IN_MEMORY_STORAGE:
26 | from inmemory.dal import (storeActivity, storeObject, storeCoordinates,
27 | retrieveByGameID, retrieveShortByGameID,
28 | retrieveObjectByID, retrieveOneShortByKind)
29 | print('\n\n*** USING IN-MEMORY STORAGE ***\n\n')
30 | else:
31 | from database.dal import (storeActivity, storeObject, storeCoordinates,
32 | retrieveByGameID, retrieveShortByGameID,
33 | retrieveObjectByID, retrieveOneShortByKind)
34 |
35 |
36 | def _dbRowToPlayerMessage(row):
37 | # args are: client_id, client_name, x, y, h, generation
38 | # leaky defaults are treated here (name, generation)
39 | return makePositionUpdate(
40 | str(row['object_id']),
41 | row.get('name', 'unnamed'),
42 | row['x'],
43 | row['y'],
44 | row.get('h', False),
45 | row.get('generation', 0),
46 | )
47 |
48 |
49 | def _dbRowToBrickMessage(row):
50 | return makeBrickUpdate(
51 | row['name'],
52 | row['x'],
53 | row['y'],
54 | )
55 |
56 |
57 | def _dbRowToFoodMessage(row):
58 | return makeFoodUpdate(
59 | row['object_id'],
60 | row['name'],
61 | row['x'],
62 | row['y'],
63 | )
64 |
65 |
66 | def _dbRowToMessage(row):
67 | if row['kind'] == 'player':
68 | return _dbRowToPlayerMessage(row)
69 | elif row['kind'] == 'brick':
70 | return _dbRowToBrickMessage(row)
71 | elif row['kind'] == 'food':
72 | return _dbRowToFoodMessage(row)
73 | else:
74 | raise NotImplementedError('Unknown row kind "%s"' % row['kind'])
75 |
76 | ###
77 |
78 |
79 | def storeGameActivePlayer(gameID, playerID):
80 | """
81 | Side-effect only: marking a player as 'active (again) on board'
82 | (i.e. when coming back to same game).
83 | """
84 | storeActivity(
85 | uuid.UUID(gameID),
86 | 'player',
87 | uuid.UUID(playerID),
88 | True,
89 | )
90 |
91 | def storeGameInactivePlayer(gameID, playerID):
92 | """
93 | Side-effect only: marking a player as 'inactive from board'
94 | (i.e. when disconnecting from game).
95 | """
96 | storeActivity(
97 | uuid.UUID(gameID),
98 | 'player',
99 | uuid.UUID(playerID),
100 | False,
101 | )
102 |
103 |
104 | def storeFoodItemStatus(gameID, foodUpdate):
105 | """
106 | Side-effect only: stores the last location/status of
107 | a food item on the field.
108 |
109 | Input is a 'food' message, parsed here internally
110 | """
111 | #
112 | pLoad = foodUpdate['payload']
113 | foodID = foodUpdate['foodID']
114 | storeObject(
115 | uuid.UUID(gameID),
116 | 'food',
117 | uuid.UUID(foodID),
118 | True,
119 | pLoad['x'],
120 | pLoad['y'],
121 | False,
122 | 0,
123 | pLoad['name'],
124 | )
125 |
126 |
127 | def storeGamePlayerStatus(gameID, playerUpdate):
128 | """
129 | Side-effect only: stores the last location/status of
130 | a player on the field.
131 |
132 | Input is a 'player' message, parsed here internally
133 | """
134 | #
135 | pLoad = playerUpdate['payload']
136 | playerID = playerUpdate['playerID']
137 | storeObject(
138 | uuid.UUID(gameID),
139 | 'player',
140 | uuid.UUID(playerID),
141 | True,
142 | pLoad['x'],
143 | pLoad['y'],
144 | pLoad['h'],
145 | pLoad['generation'],
146 | pLoad['name'],
147 | )
148 |
149 |
150 | def storeGamePlayerPosition(gameID, playerID, active, x, y):
151 | """
152 | Store new coordinates (server-forced), for later validation etc.
153 | """
154 | storeCoordinates(
155 | uuid.UUID(gameID),
156 | 'player',
157 | uuid.UUID(playerID),
158 | active,
159 | x,
160 | y,
161 | )
162 |
163 |
164 | def retrieveActiveGameItems(gameID, excludedPlayerIDs = set()):
165 | """
166 | Return active players only. Output are 'player' messages ready-to-send.
167 | """
168 | results = retrieveByGameID(uuid.UUID(gameID))
169 | #
170 | return (
171 | _dbRowToMessage(row)
172 | for row in results
173 | if row['active']
174 | if row['kind'] != 'player' or str(row['object_id']) not in excludedPlayerIDs
175 | )
176 |
177 |
178 | def retrieveFieldOccupancy(gameID):
179 | """
180 | Return a map (x, y) -> {kind: ... , object_id: ...}, skips inactives
181 | """
182 | results = retrieveShortByGameID(uuid.UUID(gameID))
183 | #
184 | return {
185 | (row['x'], row['y']): {
186 | 'kind': row['kind'],
187 | 'object_id': row['object_id'],
188 | 'name': row.get('name'),
189 | }
190 | for row in results
191 | if row['active']
192 | }
193 |
194 |
195 | def retrieveGamePlayerStatus(gameID, playerID):
196 | """
197 | Return None if no info found,
198 | else a 'player' message (which, as such, knows of no 'active' flag).
199 | """
200 | result = retrieveObjectByID(
201 | uuid.UUID(gameID),
202 | 'player',
203 | uuid.UUID(playerID),
204 | )
205 | #
206 | if result is None:
207 | return None
208 | else:
209 | return _dbRowToPlayerMessage(result)
210 |
211 |
212 | def layBricks(gameID, HALF_SIZE_X, HALF_SIZE_Y, BRICK_FRACTION):
213 | """
214 | this creates the bricks for the game.
215 | It should run only once per gameID (hence we perform a read and make
216 | sure there are no bricks), but before any player joins.
217 | """
218 |
219 | # first check if there are bricks already (even just one)
220 | prevBrick = retrieveOneShortByKind(
221 | uuid.UUID(gameID),
222 | 'brick',
223 | )
224 | #
225 | if prevBrick is not None:
226 | # bricks already present
227 | return
228 | else:
229 | # we create the required bricks
230 | brickPositions = pickBrickPositions(
231 | 2*HALF_SIZE_X-1,
232 | 2*HALF_SIZE_Y-1,
233 | BRICK_FRACTION,
234 | )
235 | # we store the bricks for this game
236 | _gameID = uuid.UUID(gameID)
237 | for bi, (bx, by) in enumerate(brickPositions):
238 | storeObject(
239 | _gameID,
240 | 'brick',
241 | uuid.uuid4(),
242 | True,
243 | bx,
244 | by,
245 | False,
246 | 0,
247 | 'brick_%04i' % bi,
248 | )
249 |
250 |
251 | def layFood(gameID, HALF_SIZE_X, HALF_SIZE_Y, NUM_FOOD_ITEMS):
252 | """
253 | we read the gamefield and place an exact number of food
254 | items on the board, unless there are already some.
255 | """
256 | # first check if there are food items already (even just one)
257 | prevFood = retrieveOneShortByKind(
258 | uuid.UUID(gameID),
259 | 'food',
260 | )
261 | #
262 | if prevFood is not None:
263 | # food already present
264 | return
265 | else:
266 | # we survey forbidden locations first
267 | occupancyMap = retrieveFieldOccupancy(gameID)
268 | # we create the required food
269 | foodPositions = pickFoodPositions(
270 | 2*HALF_SIZE_X-1,
271 | 2*HALF_SIZE_Y-1,
272 | NUM_FOOD_ITEMS,
273 | occupancyMap,
274 | )
275 | # we store the bricks for this game
276 | _gameID = uuid.UUID(gameID)
277 | for fi, (fx, fy) in enumerate(foodPositions):
278 | storeObject(
279 | _gameID,
280 | 'food',
281 | uuid.uuid4(),
282 | True,
283 | fx,
284 | fy,
285 | False,
286 | 0,
287 | 'food_%04i' % fi,
288 | )
289 |
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import './App.css';
2 |
3 | import { useEffect, useState, useRef } from "react"
4 |
5 | import PlayerForm from "./components/PlayerForm"
6 | import GameArea from "./components/GameArea"
7 |
8 | import {packPlayerMessage, packChatMessage, packEnteringMessage, packLeavingMessage} from "./utils/messages"
9 | import {updatePositionMapValue, removePlayerMapEntry} from "./utils/playerMaps"
10 | import guessAPILocation from "./utils/guessAPILocation"
11 | import getRandomSpiderName from "./utils/names"
12 |
13 | const settings = require('./settings')
14 | const uuid = require('uuid');
15 | const playerID = uuid.v4();
16 |
17 | // web-sockets
18 | let wws = null;
19 | let pws = null;
20 |
21 | const App = () => {
22 |
23 | const proposedAPILocation = guessAPILocation(window.location.href, settings.DEFAULT_API_LOCATION);
24 |
25 | const [apiLocation, setApiLocation] = useState(proposedAPILocation);
26 | const [inGame, setInGame] = useState(false);
27 | const [playerMap, setPlayerMap] = useState({});
28 | const [brickList, setBrickList] = useState([]);
29 | const [foodMap, setFoodMap] = useState({});
30 | //
31 | // 'playerInitialized' starts False when entering the game and then jumps to
32 | // True as soon as the API acknowledges the player and gives it info/coordinates.
33 | const [playerInitialized, setPlayerInitialized] = useState(false);
34 | const [playerX, setPlayerX] = useState(null);
35 | const [playerY, setPlayerY] = useState(null);
36 | const [playerH, setPlayerH] = useState(false)
37 | const [generation, setGeneration] = useState(0)
38 | const [playerName, setPlayerName] = useState(getRandomSpiderName());
39 | //
40 | const [halfSizeX, setHalfSizeX] = useState(null);
41 | const [halfSizeY, setHalfSizeY] = useState(null);
42 | const [lastSent, setLastSent] = useState(null)
43 | const [lastReceived, setLastReceived] = useState(null)
44 | const [chatItems, setChatItems] = useState([])
45 |
46 | // With useRef we can make the updated state accessible from within the callback
47 | // that we will attach to the websocket.
48 | // see https://stackoverflow.com/questions/57847594/react-hooks-accessing-up-to-date-state-from-within-a-callback
49 | const generationRef = useRef()
50 | generationRef.current = generation
51 | // Same for the player position/status, since it will be accessed within callbacks:
52 | const playerXRef = useRef()
53 | playerXRef.current = playerX
54 | const playerYRef = useRef()
55 | playerYRef.current = playerY
56 | const playerHRef = useRef()
57 | playerHRef.current = playerH
58 |
59 | // keyboard-controlled movements
60 | const handleKeyDown = ev => {
61 | if(inGame){
62 | if ( ev.keyCode === 37 ){
63 | setPlayerX( x => x-1 )
64 | setPlayerH(false)
65 | }
66 | if ( ev.keyCode === 38 ){
67 | setPlayerY( y => y-1 )
68 | setPlayerH(false)
69 | }
70 | if ( ev.keyCode === 39 ){
71 | setPlayerX( x => x+1 )
72 | setPlayerH(false)
73 | }
74 | if ( ev.keyCode === 40 ){
75 | setPlayerY( y => y+1 )
76 | setPlayerH(false)
77 | }
78 | if( ev.keyCode === 72 ){
79 | setPlayerH(h => !h)
80 | }
81 | }
82 | }
83 |
84 | const handleReceivedMessageEvent = evt => {
85 | setLastReceived(evt.data)
86 |
87 | try {
88 |
89 | const updateMsg = JSON.parse(evt.data)
90 |
91 | if ( updateMsg.messageType === 'player' ){
92 |
93 | setPlayerInitialized(true);
94 |
95 | // Received update on some player through the 'world' websocket
96 | const thatPlayerID = updateMsg.playerID
97 | setPlayerMap(plMap => {
98 | const newPlMap = updatePositionMapValue(plMap, thatPlayerID, updateMsg.payload)
99 | return newPlMap
100 | })
101 | // We compare generations before receiving an update to self, to avoid update loops
102 | // from player updates delivered back to us asynchronously:
103 | if ((thatPlayerID === playerID) && (updateMsg.payload.generation >= generationRef.current - 1)){
104 | setPlayerX(updateMsg.payload.x)
105 | setPlayerY(updateMsg.payload.y)
106 | setPlayerH(updateMsg.payload.h)
107 | }
108 | } else if ( updateMsg.messageType === 'leaving' ) {
109 | // some player is leaving the arena: let us update our knowledge of the game field
110 | const thatPlayerID = updateMsg.playerID
111 | setPlayerMap(plMap => {
112 | const newPlMap = removePlayerMapEntry(plMap, thatPlayerID)
113 | return newPlMap
114 | })
115 | } else if ( updateMsg.messageType === 'geometry' ) {
116 | // hooray: we just received initial geometry info from the API!
117 | setHalfSizeX(updateMsg.payload.halfSizeX)
118 | setHalfSizeY(updateMsg.payload.halfSizeY)
119 | } else if ( updateMsg.messageType === 'chat' ) {
120 | // we received a new chat item. Let's make room for it
121 | // first we add the playerID to the chat-item object for local storing
122 | const chatPayload = {...updateMsg.payload, ...{playerID: updateMsg.playerID}}
123 | // then we concatenate it to the items to display (discarding the oldest if necessary)
124 | setChatItems( items => items.concat([chatPayload]).slice(-settings.MAX_ITEMS_IN_CHAT) )
125 | } else if ( updateMsg.messageType === 'brick' ) {
126 | // we add a brick to the list of known brick positions
127 | // We should make sure we uniquify the list (w.r.t coordinates, for example) ...
128 | setBrickList( bs => bs.concat([updateMsg.payload]) )
129 | } else if ( updateMsg.messageType === 'food' ) {
130 | // whether new or moved around, let us mark the new position for this
131 | // piece of food
132 | const foodID = updateMsg.foodID
133 | setFoodMap(fMap => {
134 | const newFMap = updatePositionMapValue(fMap, foodID, updateMsg.payload)
135 | return newFMap
136 | })
137 | } else {
138 | // another messageType
139 | console.log(`Ignoring messageType = ${updateMsg.messageType} ... for now`)
140 | }
141 |
142 | } catch (e) {
143 | console.log(`Error "${e}" while receiving message "${evt.data}". Ignoring message, the show must go on`)
144 | }
145 |
146 | }
147 |
148 | useEffect( () => {
149 | if(inGame){
150 |
151 | if(wws === null || pws === null){
152 | // we must create the websockets and attach callbacks to them
153 |
154 | wws = new WebSocket(`${apiLocation}/ws/world/${playerID}`)
155 | pws = new WebSocket(`${apiLocation}/ws/player/${playerID}`)
156 |
157 | pws.onopen = evt => {
158 | // let's ask for init data
159 | const msg2 = packEnteringMessage(playerName)
160 | pws.send(msg2)
161 | setLastSent(msg2)
162 | }
163 |
164 | // both sockets can receive messages and should treat them the same way
165 | wws.onmessage = handleReceivedMessageEvent
166 | pws.onmessage = handleReceivedMessageEvent
167 | } else {
168 | // socket already opened: can be used immediately
169 | // let's ask for init data
170 | const msg2 = packEnteringMessage(playerName)
171 | pws.send(msg2)
172 | setLastSent(msg2)
173 | }
174 |
175 |
176 | } else {
177 | if(wws !== null || pws !== null){
178 |
179 | // we notify the API that we are leaving
180 | if(pws && pws.readyState === 1){
181 | const msg = packLeavingMessage(playerName)
182 | setLastSent(msg)
183 | pws.send(msg)
184 | }
185 | setGeneration( g => g+1 )
186 |
187 | // it is time to disconnect the websockets
188 | if(wws === null){
189 | wws.disconnect()
190 | wws = null;
191 | }
192 | if(pws === null){
193 | pws.disconnect()
194 | pws = null;
195 | }
196 | }
197 | }
198 | // eslint-disable-next-line
199 | }, [inGame])
200 |
201 | const sendChatItem = text => {
202 | const ttext = text.trim()
203 | if (ttext !== '' && pws && pws.readyState === 1){
204 | const msg = packChatMessage(playerName, text)
205 | setLastSent(msg)
206 | pws.send(msg)
207 | }
208 | }
209 |
210 | useEffect( () => {
211 | if (inGame) {
212 |
213 | if(playerInitialized && pws && pws.readyState === 1){
214 | const msg = packPlayerMessage(playerX, playerY, playerH, generationRef.current, playerName)
215 | setLastSent(msg)
216 | pws.send(msg)
217 | } // else: hmm, we seem not to have a working socket AND a player on the field. We'll not send out (!)
218 |
219 | // we increment the generation number to recognize and ignore 'stale' player updates bouncing back to us
220 | setGeneration( g => g+1 )
221 |
222 | }
223 | // we are handling generation increase explicitly within this hook, so we don't react to 'generation':
224 | // eslint-disable-next-line
225 | }, [inGame, playerName, playerX, playerY, playerH])
226 |
227 | return (
228 |
27 |
53 |
28 |
42 |
43 |
52 |
54 |
61 | Last sent:
55 | {lastSent}
56 |
Last received:
58 | {lastReceived}
59 |
229 |
230 |
245 | {inGame &&
268 | );
269 | }
270 |
271 | export default App;
272 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Drapetisca: a multiplayer online game with Astra Streaming and Websockets
3 |
4 | [](https://gitpod.io/#https://github.com/datastaxdevs/workshop-streaming-game)
5 | [](http://www.apache.org/licenses/LICENSE-2.0)
6 | [](https://discord.com/widget?id=685554030159593522&theme=dark)
7 |
8 | Time: *50 minutes*. Difficulty: *Intermediate*. [Start Building!](#lets-start)
9 |
10 | A simple multiplayer online game featuring
11 | * Astra Streaming (a messaging system in the cloud, built on top of Apache Pulsar)
12 | * Astra DB (a Database-as-a-service built on Apache Cassandra)
13 | * WebSockets
14 | * React.js for the front-end
15 | * the Python FastAPI framework for the back-end
16 |
17 |
18 |
19 | 
20 |
21 | ## Objectives
22 | * Understand the architecture of a streaming-based application
23 | * Learn how Apache Pulsar works
24 | * See the interplay between streaming and persistent storage (a.k.a. database)
25 | * Learn about Websockets on client- and server-side
26 | * Understand how a FastAPI server can bridge Pulsar topics and WebSockets
27 | * Understand the structure of a Websocket React.js application
28 | * **get your very own online gaming platform to share with your friends!**
29 |
30 | ## Frequently asked questions
31 |
32 | - *Can I run the workshop on my computer?*
33 |
34 | > You don't have to, it's all already in the cloud! But there is nothing preventing you from running the workshop on your own machine.
35 | > If you do so, you will need
36 | > * git installed on your local system
37 | > * [node 15 and npm 7 or later](https://www.whitesourcesoftware.com/free-developer-tools/blog/update-node-js/)
38 | > * [Python v3.8+ installed on your local system](https://www.python.org/downloads/)
39 | >
40 | > In this readme, we try to provide instructions for local development as well - but keep in mind that
41 | > the main focus is development on Gitpod, hence **We can't guarantee live support** about local development
42 | > in order to keep on track with the schedule. However, we will do our best to give you the info you need to succeed.
43 |
44 | - *What other prerequisites are there?*
45 | > * You will need a GitHub account
46 | > * You will also need an Astra account: don't worry, we'll work through that in the following
47 |
48 | - *Do I need to pay for anything for this workshop?*
49 | > * **No.** All tools and services we provide here are FREE.
50 |
51 | - *Will I get a certificate if I attend this workshop?*
52 |
53 | > Attending the session is not enough. You need to complete the homeworks detailed below and you will get a nice participation certificate a.k.a. badge.
54 |
55 | - *Why "Drapetisca"?*
56 |
57 | > _Drapetisca socialis_, known as "invisible spider", is a very small and hard-to-notice spider found throughout Europe.
58 | > Since this is a multiplayer game that lets players have social interactions in the play area, why not choose a spider
59 | > with "socialis" in its name?
60 |
61 | ## Materials for the Session
62 |
63 | It doesn't matter if you join our workshop live or you prefer to work at your own pace,
64 | we have you covered. In this repository, you'll find everything you need for this workshop:
65 |
66 | - [Workshop Video](https://youtu.be/jfOBPlcd9eA)
67 | - [Slide deck](slides/DataStaxDevs-workshop-Build_a_Multiplayer_Game_with_Streaming.pdf)
68 | - [Discord chat](https://dtsx.io/discord)
69 | - [Questions and Answers](https://community.datastax.com/)
70 |
71 | ## Homework
72 |
73 | 
74 |
75 | Don't forget to complete your assignment and get your verified skill badge! Finish and submit your homework!
76 |
77 | 1. Complete the practice steps as described below until you have your own app running in Gitpod.
78 | 2. Now roll up your sleeves and modify the code in two ways: (1) we want the API to send a greeting to each new player in the chat box, and (2) we want the player names in the game area to match the icon color. _Please read the detailed guidance found [below](#7-homework-instructions)_.
79 | 3. Take a SCREENSHOT of the running app modified this way. _Note: you will have to restart the API and reload the client to see all changes!_
80 | 4. Submit your homework [here](https://dtsx.io/streaming-game-homework).
81 |
82 | That's it, you are done! Expect an email in a few days!
83 |
84 | # Let's start
85 |
86 | ## Table of contents
87 |
88 | 1. [Create your Astra Streaming instance](#1-create-your-astra-streaming-instance)
89 | 2. [Create your Astra DB instance](#2-create-your-astra-db-instance)
90 | 3. [Load the project into Gitpod](#3-load-the-project-into-gitpod)
91 | 4. [Set up/start the API](#4-api-setup)
92 | 5. [Set up/start the client](#5-client-setup)
93 | 6. [Play!](#6-play-the-game)
94 | 7. [Homework instructions](#7-homework-instructions)
95 | 8. [Selected topics](#8-selected-topics)
96 |
97 | ## Astra setup
98 |
99 | ### 1. Create your Astra Streaming instance
100 |
101 | _**`Astra Streaming`** is the simplest way to get a streaming infrastructure based on Apache Pulsar
102 | with zero operations at all - just push the button and get your streaming.
103 | No credit card required - with the **free tier** comes a generous monthly-renewed credit for you to use._
104 |
105 | _**`Astra Streaming`** is tightly integrated with `Astra DB`, the database-as-a-service
106 | used in most of our workshops (see below, we will use it momentarily).
107 | **If you already have an Astra account for Astra DB, you can use that
108 | one in the following (and jump to "Create streaming" below)!**_
109 |
110 | For more information on Astra Streaming, look at [the docs](https://docs.datastax.com/en/astra-streaming/docs/).
111 | For more information on Apache Pulsar, here is [the documentation](https://pulsar.apache.org/docs/en/concepts-overview/).
112 |
113 | #### 1a. Register
114 |
115 | Register and sign in to Astra at `astra.datastax.com` by clicking this button (better in a new tab with Ctrl-click or right-click):
116 |
117 | 
118 |
119 | _you can use your `Github`, `Google` accounts or register with an `email`.
120 | Choose a password with minimum 8 characters, containing upper and lowercase letters, at least one number and special character.
121 | You may be asked to verify your email, so make sure you have access to it._
122 |
123 | Show me the steps
124 |
125 | Show me the steps
141 |
142 | Show me how to get the topic connection parameters
150 |
151 | 
174 |
175 | To create the database, locate the "Create database" button on the navigation bar on the left of the Astra UI, click on it and fill the required
176 | values:
177 |
178 | - **For the database name** - use `workshops`. While Astra DB allows you to fill in these fields with values of your own choosing, please follow our recommendations to ensure the application runs properly.
179 |
180 | - **For the keyspace name** - use `drapetisca`. Please stick to this name, it will make the following steps much easier (you have to customize here and there otherwise). In short:
181 |
182 | - **For provider and region**: Choose **GCP**, which is immediately available to a fresh account (AWS and Azure would have to be unlocked, _for free_, by contacting Support). Region is where your database will reside physically (choose one close to you or your users).
183 |
184 | - **Create the database**. Review all the fields to make sure they are as shown, and click the `Create Database` button. You will be on the **Free** plan.
185 |
186 | | Parameter | Value
187 | |---|---|
188 | | Database name | workshops |
189 | | Keyspace name | drapetisca |
190 |
191 | You will see your new database as `Pending` in the Dashboard;
192 | the status will change to `Active` when the database is ready. This will only take 2-3 minutes
193 | (you will also receive an email when it is ready).
194 |
195 | Show me the how to create my Astra DB
196 |
197 | To create the database, please note that _the `db_name` and `ks_name` in the above image are just placeholders_.
198 | 
210 |
211 | - Locate the "Current Organization" menu in the top-left of the Astra UI and select `Organization Settings`
212 | - Go to `Token Management`
213 | - Pick the role `Database Administrator` on the select box
214 | - Click Generate token
215 |
216 | Show me the Astra DB token creation
217 |
218 | Show me the generated Astra DB token
232 |
233 | Show me how to get the Astra DB bundle
262 |
263 | 
278 |
279 | (You may have to authenticate with Github or other providers along the process).
280 | Then wait a couple of minutes for the installations to complete, at which point you
281 | will see a message such as `CLIENT/API READY TO START` in the Gitpod console.
282 |
283 | Tell me what the Gitpod button does
284 | 285 | - An IDE is started on a containerized machine image in the cloud 286 | - there, this repo is cloned 287 | - some initialization scripts are run (in particular, dependencies get installed) 288 | - Gitpod offers a full IDE: you can work there, edit files, run commands in the console, use an internal browser, etc. 289 | 290 |Show me a map of the Gitpod starting layout
312 | 313 |
314 |
315 | 1. File explorer
316 | 2. Editor
317 | 3. Panel for console(s)
318 | 4. Console switcher
319 | Show me how to drag-and-drop the bundle to Gitpod
375 |
376 | Show me the "Enter Game" form
500 |
501 | Show me the player after entering the game
509 |
510 | Show me the "Try Me" interface
612 |
613 | A demo video of the "Try Me" feature (Youtube)
616 | 617 |
618 |
619 | Show me the game data in the Astra DB CQL Console
690 |
691 | Show me the new features in the game
735 |
736 | Look at lines 49-50 and then 103 of `App.js`, for example.
771 |
772 |