Question:
Hello, I have been running into this bug for a while now that I can’t figure out. I am trying to make a multiuser pixel art system similar to r/place on Reddit. The problem is that for some reason, it’s not detecting the pixel in the database even though it is there. I added print statements for both lists including the one that saves the entire database to improve loading speeds and repl db keys, and it’s in all of them. I have been trying to solve this bug for a while now but I can’t figure it out. I set it to turn the pixel it cant detect red, and it turns them all red. The main solution I want is to be able to detect the JSON for the pixel in the list, then take it from the list directly. I am struggling to detect the JSON though.
Is anyone able to help me?
Also sorry if my question is a little bit confusing
Repl link:
https://replit.com/@StudioHawaii/Pixel-Board?v=1
Server code:
import os
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
from replit import db
app = Flask(__name__)
socketio = SocketIO(app)
app.config["TEMPLATES_AUTO_RELOAD"] = (
True # if true, it auto reloads templates if a change is made to them
)
app.secret_key = os.environ["SECRET_KEY"] # The secret key
board_size = 60 # The size of the pixel board (Warning: A very large size may either break the app or overload repl db)
database = (
[]
) # Stores data from the database for faster loading speeds and optimization
keys = db.keys() # Gets the keys
for i in keys: # loops through all keys in the database
database.append(db[i])
"""Routes"""
@app.route("/")
def index():
"""The index page (Board is on it)"""
keys = db.keys()
return render_template("index.html", size=board_size, db=database, keys=keys)
"""Socketio events"""
@socketio.on("pixel_change")
def change_pixel(pixel):
db[pixel["Pixel"]] = pixel
print(db[pixel["Pixel"]])
print(db.keys())
database.append(pixel)
emit(
"change_pixel",
{"Pixel": pixel["Pixel"], "Color": pixel["Color"]},
broadcast=True,
)
socketio.run(app, host="0.0.0.0")
Template code:
<!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">
<title>Pixel Board</title>
<link rel="stylesheet" href="static/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
</head>
<body>
<div id='board' class='board'>
{% for i in range(0, size) %}
<div class='row'>
{% for j in range(0, size) %}
<div class='pixel' id='pixel_{{i}}_{{j}}' {%if "pixel_{{i}}_{{j}}" in db %} style='background-color: {{db["pixel_{{i}}_{{j}}"].Color}} {%else%} style='background-color:red '{%endif%} onclick='select({{i}}, {{j}})'></div>
{% endfor %}
</div>
{% endfor %}
</div>
<button id='submit_btn' disabled>Place Pixel</button>
<script src='static/js/script.js'></script>
</body>
</html>