Compare commits
2 Commits
fe8b93e8a8
...
54de8672dc
| Author | SHA1 | Date | |
|---|---|---|---|
| 54de8672dc | |||
| 26108fe073 |
26
README.md
26
README.md
@ -1,2 +1,28 @@
|
||||
# multiplayer_crosswords
|
||||
|
||||
This project is a web-based multiplayer crossword puzzle game that allows multiple users to collaborate in solving crossword puzzles in real-time. It features a user-friendly interface, session management, and real-time updates to enhance the collaborative experience.
|
||||
|
||||
## installation
|
||||
|
||||
1. Clone the repository:
|
||||
```bash
|
||||
git clone https://the-cake-is-a-lie.net/gitea/jonas/multiplayer_crosswords.git
|
||||
cd multiplayer_crosswords
|
||||
```
|
||||
|
||||
2. Install this repository as a package:
|
||||
```bash
|
||||
pip install .
|
||||
```
|
||||
|
||||
## start the server
|
||||
|
||||
```bash
|
||||
python -m multiplayer_crosswords.server.main
|
||||
```
|
||||
|
||||
## start the webui
|
||||
|
||||
```bash
|
||||
python -m multiplayer_crosswords.server.serve_frontend
|
||||
```
|
||||
|
||||
@ -294,12 +294,29 @@ class WebsocketCrosswordServer(object):
|
||||
if current_grid_letter.upper() == msg_letter.upper():
|
||||
# No change
|
||||
return
|
||||
# check if the letter already is solved, if so, ignore the update
|
||||
words_at_position = crossword.get_words_by_y_x_position(y=message.row, x=message.col)
|
||||
if any(cw.solved for cw in words_at_position):
|
||||
logger.info("Ignoring update to already solved position (%d, %d) in session %s", message.col, message.row, session.session_id)
|
||||
|
||||
# send letter again to client to ensure they have the correct letter
|
||||
msg = server_messages.LetterUpdateBroadcastServerMessage(
|
||||
session_id=session.session_id,
|
||||
row=message.row,
|
||||
col=message.col,
|
||||
letter=msg_letter.upper(),
|
||||
is_solved=is_solved
|
||||
)
|
||||
messages = [msg]
|
||||
|
||||
else:
|
||||
# also check if the position is
|
||||
crossword.place_letter(
|
||||
x=message.col,
|
||||
y=message.row,
|
||||
letter=msg_letter.lower(),
|
||||
)
|
||||
# now check if the word is solved
|
||||
|
||||
words_at_position = crossword.get_words_by_y_x_position(y=message.row, x=message.col)
|
||||
is_solved = any(cw.solved for cw in words_at_position)
|
||||
if is_solved:
|
||||
@ -343,8 +360,6 @@ class WebsocketCrosswordServer(object):
|
||||
await session.send_message_to_all_clients(message=broadcast_message.model_dump())
|
||||
|
||||
|
||||
|
||||
|
||||
def __init__(self, host: str, port: int):
|
||||
self._host = host
|
||||
self._port = port
|
||||
|
||||
@ -552,6 +552,36 @@ export class CrosswordGrid extends LitElement {
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate completion ratio as percentage (0-100)
|
||||
*/
|
||||
_calculateCompletionRatio() {
|
||||
let totalNonWallCells = 0;
|
||||
let solvedCells = 0;
|
||||
|
||||
for (let r = 0; r < this.rows; r++) {
|
||||
for (let c = 0; c < this.cols; c++) {
|
||||
if (this._grid[r][c] !== '#') {
|
||||
totalNonWallCells++;
|
||||
const cellKey = `${r},${c}`;
|
||||
if (this._solvedCells.has(cellKey)) {
|
||||
solvedCells++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (totalNonWallCells === 0) return 0;
|
||||
return Math.round((solvedCells / totalNonWallCells) * 100);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current completion ratio (public method)
|
||||
*/
|
||||
getCompletionRatio() {
|
||||
return this._calculateCompletionRatio();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle letter updates from server (broadcast messages from other players)
|
||||
*/
|
||||
@ -589,6 +619,14 @@ export class CrosswordGrid extends LitElement {
|
||||
|
||||
this.requestUpdate();
|
||||
|
||||
// Calculate and emit completion ratio update
|
||||
const completionRatio = this._calculateCompletionRatio();
|
||||
this.dispatchEvent(new CustomEvent('completion-ratio-changed', {
|
||||
detail: { completionRatio },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
|
||||
// Trigger animation if solution word just completed
|
||||
if (this._isSolutionWordComplete()) {
|
||||
this.updateComplete.then(() => {
|
||||
|
||||
@ -73,6 +73,9 @@
|
||||
console.log('Subscribing to session:', sessionId);
|
||||
currentSessionId = sessionId;
|
||||
|
||||
// Update URL with session ID
|
||||
updateUrlWithSessionId(sessionId);
|
||||
|
||||
// Show game UI immediately
|
||||
menu.style.display = 'none';
|
||||
gridContainer.style.display = 'block';
|
||||
@ -134,7 +137,7 @@
|
||||
// Create container with close button
|
||||
gridContainer.innerHTML = `
|
||||
<div class="game-header">
|
||||
<h2 style="text-align: center;">Crossword</h2>
|
||||
<h2 id="crossword-title" style="text-align: center;">Crossword (0%)</h2>
|
||||
<div class="header-buttons">
|
||||
<button class="share-game-btn" aria-label="Share game">
|
||||
<span style="padding-right: 0.5rem;">Share Session</span>
|
||||
@ -285,6 +288,36 @@
|
||||
clueArea.requestUpdate();
|
||||
});
|
||||
|
||||
// Listen for completion ratio updates
|
||||
gridElement.addEventListener('completion-ratio-changed', (e) => {
|
||||
const { completionRatio } = e.detail;
|
||||
updateHeaderTitle(completionRatio);
|
||||
|
||||
// Update session storage with completion ratio
|
||||
if (window.updateSessionCompletionRatio) {
|
||||
window.updateSessionCompletionRatio(currentSessionId, completionRatio);
|
||||
}
|
||||
});
|
||||
|
||||
// Function to update header title with completion percentage
|
||||
function updateHeaderTitle(completionRatio) {
|
||||
const titleElement = document.getElementById('crossword-title');
|
||||
if (titleElement) {
|
||||
titleElement.textContent = `Crossword (${completionRatio}%)`;
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate initial completion ratio after grid is fully set up
|
||||
setTimeout(() => {
|
||||
const initialRatio = gridElement.getCompletionRatio();
|
||||
updateHeaderTitle(initialRatio);
|
||||
|
||||
// Update session storage with initial completion ratio
|
||||
if (window.updateSessionCompletionRatio) {
|
||||
window.updateSessionCompletionRatio(currentSessionId, initialRatio);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
// Close button handler
|
||||
closeBtn.addEventListener('click', closeGame);
|
||||
|
||||
|
||||
@ -37,9 +37,14 @@ export class CrosswordMenu extends LitElement {
|
||||
wsManager.setNotificationManager(notificationManager);
|
||||
// Listen for session creation/subscription events
|
||||
wsManager.onMessage('session_created', (msg) => this._onSessionCreated(msg));
|
||||
wsManager.onMessage('session_subscribed', (msg) => this._onSessionSubscribed(msg));
|
||||
wsManager.onMessage('session_not_found', (msg) => this._onSessionNotFound(msg));
|
||||
wsManager.onMessage('full_session_state', (msg) => this._onSessionJoined(msg));
|
||||
wsManager.onMessage('error', (msg) => this._onSessionError(msg));
|
||||
this._initializeConnection();
|
||||
|
||||
// Make update function available globally
|
||||
window.updateSessionCompletionRatio = (sessionId, completionRatio) => {
|
||||
this._updateSessionCompletionRatio(sessionId, completionRatio);
|
||||
};
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
@ -48,8 +53,8 @@ export class CrosswordMenu extends LitElement {
|
||||
wsManager.offMessage('available_session_properties', this._handleSessionProperties);
|
||||
wsManager.offMessage('error', this._handleError);
|
||||
wsManager.offMessage('session_created', this._onSessionCreated);
|
||||
wsManager.offMessage('session_subscribed', this._onSessionSubscribed);
|
||||
wsManager.offMessage('session_not_found', this._onSessionNotFound);
|
||||
wsManager.offMessage('full_session_state', this._onSessionJoined);
|
||||
wsManager.offMessage('error', this._onSessionError);
|
||||
}
|
||||
|
||||
_initializeConnection() {
|
||||
@ -116,7 +121,7 @@ export class CrosswordMenu extends LitElement {
|
||||
|
||||
this._loading = false;
|
||||
this._error = null;
|
||||
notificationManager.success('Game options loaded');
|
||||
notificationManager.success('Connected to Crossword server');
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
@ -165,17 +170,29 @@ export class CrosswordMenu extends LitElement {
|
||||
|
||||
// Session storage management
|
||||
_initializeSessionStorage() {
|
||||
// Check if the save setting is enabled
|
||||
const saveSettingEnabled = this._getCookie('saveSessionsEnabled');
|
||||
if (saveSettingEnabled === 'true') {
|
||||
this._saveSessionsEnabled = true;
|
||||
|
||||
// Load saved sessions if the setting is enabled
|
||||
const savedSessionsData = this._getCookie('savedSessions');
|
||||
if (savedSessionsData) {
|
||||
try {
|
||||
this._savedSessions = JSON.parse(savedSessionsData);
|
||||
this._saveSessionsEnabled = true;
|
||||
|
||||
// Ensure all sessions have a completionRatio field (for backward compatibility)
|
||||
this._savedSessions = this._savedSessions.map(session => ({
|
||||
...session,
|
||||
completionRatio: session.completionRatio || 0
|
||||
}));
|
||||
} catch (e) {
|
||||
console.warn('Failed to parse saved sessions cookie:', e);
|
||||
this._clearAllCookies();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_getCookie(name) {
|
||||
const value = `; ${document.cookie}`;
|
||||
@ -196,14 +213,25 @@ export class CrosswordMenu extends LitElement {
|
||||
|
||||
_clearAllCookies() {
|
||||
this._deleteCookie('savedSessions');
|
||||
this._deleteCookie('saveSessionsEnabled');
|
||||
this._savedSessions = [];
|
||||
this._saveSessionsEnabled = false;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
_clearSessionsOnly() {
|
||||
this._deleteCookie('savedSessions');
|
||||
this._savedSessions = [];
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
_toggleSessionSaving() {
|
||||
this._saveSessionsEnabled = !this._saveSessionsEnabled;
|
||||
if (!this._saveSessionsEnabled) {
|
||||
if (this._saveSessionsEnabled) {
|
||||
// Save the setting preference when enabled
|
||||
this._setCookie('saveSessionsEnabled', 'true');
|
||||
} else {
|
||||
// Clear everything when disabled
|
||||
this._clearAllCookies();
|
||||
}
|
||||
this.requestUpdate();
|
||||
@ -219,6 +247,7 @@ export class CrosswordMenu extends LitElement {
|
||||
this._savedSessions.unshift({
|
||||
id: sessionId,
|
||||
timestamp: Date.now(),
|
||||
completionRatio: 0, // Default completion ratio
|
||||
...sessionInfo
|
||||
});
|
||||
|
||||
@ -230,10 +259,25 @@ export class CrosswordMenu extends LitElement {
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
_updateSessionCompletionRatio(sessionId, completionRatio) {
|
||||
if (!this._saveSessionsEnabled) return;
|
||||
|
||||
// Find and update the session
|
||||
const sessionIndex = this._savedSessions.findIndex(s => s.id === sessionId);
|
||||
if (sessionIndex !== -1) {
|
||||
this._savedSessions[sessionIndex].completionRatio = completionRatio;
|
||||
this._savedSessions[sessionIndex].timestamp = Date.now(); // Update timestamp
|
||||
|
||||
// Save updated sessions to cookie
|
||||
this._setCookie('savedSessions', JSON.stringify(this._savedSessions));
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
_removeSession(sessionId) {
|
||||
this._savedSessions = this._savedSessions.filter(s => s.id !== sessionId);
|
||||
if (this._savedSessions.length === 0) {
|
||||
this._clearAllCookies();
|
||||
this._clearSessionsOnly();
|
||||
} else {
|
||||
this._setCookie('savedSessions', JSON.stringify(this._savedSessions));
|
||||
}
|
||||
@ -250,7 +294,7 @@ export class CrosswordMenu extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
_onSessionSubscribed(message) {
|
||||
_onSessionJoined(message) {
|
||||
if (message.session_id) {
|
||||
this._saveSession(message.session_id, {
|
||||
type: 'joined'
|
||||
@ -258,10 +302,17 @@ export class CrosswordMenu extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
_onSessionNotFound(message) {
|
||||
if (message.session_id) {
|
||||
this._removeSession(message.session_id);
|
||||
notificationManager.warning(`Session ${message.session_id.substring(0, 8)}... no longer exists and was removed from saved sessions`);
|
||||
_onSessionError(message) {
|
||||
// Check if it's a session not found error
|
||||
if (message.error_message && message.error_message.includes('session') && message.error_message.includes('not found')) {
|
||||
// Try to extract session ID from error message or use current session ID
|
||||
// This is a fallback - we might not always have the exact session ID in error messages
|
||||
const sessionIdMatch = message.error_message.match(/session\s+([a-f0-9-]+)/i);
|
||||
if (sessionIdMatch) {
|
||||
const sessionId = sessionIdMatch[1];
|
||||
this._removeSession(sessionId);
|
||||
notificationManager.warning(`Session ${sessionId.substring(0, 8)}... no longer exists and was removed from saved sessions`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -284,7 +335,7 @@ export class CrosswordMenu extends LitElement {
|
||||
}
|
||||
|
||||
_clearSavedSessions() {
|
||||
this._clearAllCookies();
|
||||
this._clearSessionsOnly();
|
||||
notificationManager.info('All saved sessions cleared');
|
||||
}
|
||||
|
||||
@ -366,6 +417,7 @@ export class CrosswordMenu extends LitElement {
|
||||
<span class="session-id">${session.id.substring(0, 8)}...</span>
|
||||
<span class="session-time">${this._formatTimestamp(session.timestamp)}</span>
|
||||
${session.language ? html`<span class="session-lang">${session.language.toUpperCase()}</span>` : ''}
|
||||
<span class="session-completion">${session.completionRatio || 0}% solved</span>
|
||||
</div>
|
||||
<div class="session-actions">
|
||||
<button class="reconnect-btn" @click="${() => this._reconnectToSession(session.id)}">Rejoin</button>
|
||||
|
||||
@ -338,6 +338,32 @@ crossword-grid { display: block; margin: 0 auto; }
|
||||
inset 1px 1px 2px rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
/* Solved cells that are also highlighted - keep green background but yellow border */
|
||||
.cell.solved.mode-highlighted {
|
||||
background:
|
||||
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,200,100,.1) 3px, rgba(100,200,100,.1) 5px),
|
||||
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,200,100,.08) 4px, rgba(100,200,100,.08) 6px),
|
||||
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,200,100,.06) 3px, rgba(100,200,100,.06) 5px),
|
||||
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,200,100,.04) 4px, rgba(100,200,100,.04) 6px),
|
||||
repeating-radial-gradient(circle at 12% 18%, rgba(100,200,100,.06) 1px, transparent 1px),
|
||||
repeating-radial-gradient(circle at 67% 77%, rgba(100,200,100,.07) 1px, transparent 1px),
|
||||
repeating-radial-gradient(circle at 34% 51%, rgba(100,200,100,.03) 1.5px, transparent 1.5px),
|
||||
repeating-radial-gradient(circle at 23% 67%, rgba(100,200,100,.015) 0.8px, transparent 0.8px),
|
||||
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
|
||||
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.2) 0%, transparent 40%),
|
||||
radial-gradient(circle at 0% 0%, rgba(100,200,100,.015) 0%, transparent 70%),
|
||||
radial-gradient(circle at 100% 100%, rgba(100,200,100,.015) 0%, transparent 70%),
|
||||
linear-gradient(135deg, #d4f4d4 0%, #c8ead4 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgba(255,255,255,0.8),
|
||||
inset 0 0 0 1px #c8e6f0,
|
||||
0 0.5px 1px rgba(0,0,0,0.05),
|
||||
inset -1px -1px 2px rgba(100,200,100,0.08),
|
||||
inset 1px 1px 2px rgba(255,255,255,0.3);
|
||||
border-color: #a8d4e8;
|
||||
}
|
||||
|
||||
|
||||
@keyframes cell-bounce {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
@ -382,6 +408,32 @@ crossword-grid { display: block; margin: 0 auto; }
|
||||
inset 1px 1px 2px rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
/* Solved cells that are also selected - keep green background but yellow border */
|
||||
.cell.solved.selected {
|
||||
outline: none;
|
||||
background:
|
||||
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,200,100,.1) 3px, rgba(100,200,100,.1) 5px),
|
||||
repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,200,100,.08) 4px, rgba(100,200,100,.08) 6px),
|
||||
repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,200,100,.06) 3px, rgba(100,200,100,.06) 5px),
|
||||
repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,200,100,.04) 4px, rgba(100,200,100,.04) 6px),
|
||||
repeating-radial-gradient(circle at 12% 18%, rgba(100,200,100,.06) 1px, transparent 1px),
|
||||
repeating-radial-gradient(circle at 67% 77%, rgba(100,200,100,.07) 1px, transparent 1px),
|
||||
repeating-radial-gradient(circle at 34% 51%, rgba(100,200,100,.03) 1.5px, transparent 1.5px),
|
||||
repeating-radial-gradient(circle at 23% 67%, rgba(100,200,100,.015) 0.8px, transparent 0.8px),
|
||||
repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
|
||||
radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.2) 0%, transparent 40%),
|
||||
radial-gradient(circle at 0% 0%, rgba(100,200,100,.015) 0%, transparent 70%),
|
||||
radial-gradient(circle at 100% 100%, rgba(100,200,100,.015) 0%, transparent 70%),
|
||||
linear-gradient(135deg, #d4f4d4 0%, #c8ead4 100%) !important;
|
||||
border-color: var(--ink-dark) !important;
|
||||
box-shadow:
|
||||
inset 0 1px 2px rgba(255,255,255,0.8),
|
||||
inset 0 0 0 1.5px #ffc107,
|
||||
0 0 8px rgba(255,193,7,0.25),
|
||||
inset -1px -1px 2px rgba(100,200,100,0.08),
|
||||
inset 1px 1px 2px rgba(255,255,255,0.3) !important;
|
||||
}
|
||||
|
||||
.cell.selected.mode-highlighted {
|
||||
background:
|
||||
repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(200,150,0,.15) 3px, rgba(200,150,0,.15) 5px),
|
||||
@ -858,7 +910,7 @@ crossword-menu {
|
||||
|
||||
.saved-sessions h3 {
|
||||
margin: 0 0 1rem 0;
|
||||
color: #5c6fc3;
|
||||
color: #232842;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
@ -891,11 +943,16 @@ crossword-menu {
|
||||
color: #222c55;
|
||||
}
|
||||
|
||||
.session-time, .session-lang {
|
||||
.session-time, .session-lang, .session-completion {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.session-completion {
|
||||
font-weight: 600;
|
||||
color: #4a7a9e;
|
||||
}
|
||||
|
||||
.session-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
[project]
|
||||
name = "multiplayer-crosswords"
|
||||
version = "0.1.0"
|
||||
version = "0.1.1"
|
||||
description = ""
|
||||
authors = [
|
||||
{name="Jonas Weinz"}
|
||||
@ -17,7 +17,7 @@ dependencies = [
|
||||
]
|
||||
[tool.poetry]
|
||||
name = "multiplayer-crosswords"
|
||||
version = "0.1.0"
|
||||
version = "0.1.1"
|
||||
description = ""
|
||||
authors = [
|
||||
"Jonas Weinz"
|
||||
|
||||
Reference in New Issue
Block a user