Skip to content

Commit 5bd07aa

Browse files
TobiasMue91TobiasMue91
committed
- enhance UI/UX for WordSage with multilingual support
 - add language detection and response language selection - implement advanced settings panel with toggle - improve visual styling with new color scheme and layout - add tabbed interface for history/favorites - add toast notifications for user actions - overhaul `rock_paper_scissors` game with modern design - implement proper game state management - add scoring system with player/computer/tie tracking - create visual battle area with animations - add game history tracking (last 10 rounds) - improve responsive design for mobile devices
1 parent 0a15293 commit 5bd07aa

File tree

2 files changed

+589
-154
lines changed

2 files changed

+589
-154
lines changed

‎games/rock_paper_scissors.html‎

Lines changed: 315 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -6,74 +6,332 @@
66
<meta name="keywords" content="rock paper scissors, online game, computer opponent, web game, hand game" />
77
<meta name="description" content="Play Rock Paper Scissors online against a computer. Choose your move and see if you can beat the computer. It's easy and fun!" />
88
<meta charset="utf-8">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
910
<style>
10-
#game {
11-
display: flex;
12-
flex-direction: column;
13-
align-items: center;
14-
margin-top: 50px;
15-
}
16-
#result {
17-
margin-top: 20px;
18-
font-size: 20px;
19-
}
20-
.choice {
21-
width: 50px;
22-
height: 50px;
23-
border-radius: 25px;
24-
background-color: #3f3f3f;
25-
display: flex;
26-
justify-content: center;
27-
align-items: center;
28-
margin: 10px;
29-
cursor: pointer;
11+
:root {--primary: #4361ee; --secondary: #3a0ca3; --accent: #f72585; --light: #f8f9fa; --dark: #212529; --success: #4cc9f0; --danger: #e63946; --neutral: #adb5bd;}
12+
* {margin: 0; padding: 0; box-sizing: border-box;}
13+
body {font-family: 'Segoe UI', Tahoma, sans-serif; line-height: 1.6; background: linear-gradient(135deg, var(--light), #e9ecef); color: var(--dark); min-height: 100vh; padding: 20px;}
14+
.container {max-width: 800px; margin: 0 auto; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); overflow: hidden;}
15+
header {text-align: center; padding: 30px 20px; background: var(--primary); color: white;}
16+
h1 {margin-bottom: 10px; font-size: 2.5rem;}
17+
.subtitle {opacity: 0.9; font-size: 1.1rem;}
18+
.game-container {padding: 20px;}
19+
.scoreboard {display: flex; justify-content: space-between; margin-bottom: 30px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
20+
.score {flex: 1; text-align: center; padding: 15px; background: var(--light);}
21+
.score-value {font-size: 2rem; font-weight: bold;}
22+
.player-score {color: var(--primary); border-bottom: 3px solid var(--primary);}
23+
.tie-score {color: var(--neutral); border-bottom: 3px solid var(--neutral);}
24+
.computer-score {color: var(--accent); border-bottom: 3px solid var(--accent);}
25+
.battle-area {display: flex; justify-content: space-around; align-items: center; margin-bottom: 30px;}
26+
.hand {width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; font-size: 3.5rem; background: var(--light); border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.3s ease;}
27+
.player-hand {border: 3px solid var(--primary);}
28+
.computer-hand {border: 3px solid var(--accent);}
29+
.vs {font-size: 1.5rem; font-weight: bold; margin: 0 10px;}
30+
.result {text-align: center; margin-bottom: 30px; padding: 15px; border-radius: 8px; background: var(--light); min-height: 60px; transition: all 0.3s ease;}
31+
.result-win {background-color: rgba(76, 201, 240, 0.3); color: var(--success);}
32+
.result-lose {background-color: rgba(230, 57, 70, 0.3); color: var(--danger);}
33+
.result-tie {background-color: rgba(173, 181, 189, 0.3); color: var(--dark);}
34+
.choices {display: flex; justify-content: center; gap: 20px; margin-bottom: 30px;}
35+
.choice {width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 2.5rem; background: white; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.2s ease;}
36+
.choice:hover {transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.15);}
37+
#rock {background-color: #f8edeb;}
38+
#paper {background-color: #f1faee;}
39+
#scissors {background-color: #e9ecef;}
40+
.choice.selected {transform: scale(1.1); border: 3px solid var(--primary);}
41+
.controls {display: flex; justify-content: center; margin-bottom: 30px;}
42+
.btn {padding: 10px 25px; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: all 0.2s ease; background: var(--primary); color: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1);}
43+
.btn:hover {background: var(--secondary); transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0,0,0,0.15);}
44+
.history {margin-bottom: 30px;}
45+
.history h2 {margin-bottom: 15px; text-align: center; color: var(--dark);}
46+
.history-list {max-height: 200px; overflow-y: auto; list-style: none; border-radius: 8px; border: 1px solid #e9ecef;}
47+
.history-item {padding: 10px 15px; display: flex; justify-content: space-between; border-bottom: 1px solid #e9ecef;}
48+
.history-item:last-child {border-bottom: none;}
49+
.win {color: var(--success);}
50+
.lose {color: var(--danger);}
51+
.tie {color: var(--neutral);}
52+
.rules {padding: 20px; background: var(--light); border-radius: 8px; margin-bottom: 20px;}
53+
.rules h2 {text-align: center; margin-bottom: 15px;}
54+
.rules p {margin-bottom: 10px;}
55+
footer {text-align: center; padding: 20px; background: var(--dark); color: white;}
56+
@keyframes shake {0%, 100% {transform: translateX(0);} 25% {transform: translateX(-5px);} 50% {transform: translateX(5px);} 75% {transform: translateX(-5px);}}
57+
.shake {animation: shake 0.5s;}
58+
@keyframes spin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
59+
.spin {animation: spin 0.5s linear infinite;}
60+
@media (max-width: 768px) {
61+
.battle-area {flex-direction: column;}
62+
.hand {width: 100px; height: 100px; font-size: 3rem; margin: 10px 0;}
63+
.vs {margin: 10px 0;}
64+
.choice {width: 70px; height: 70px; font-size: 2rem;}
65+
h1 {font-size: 2rem;}
3066
}
3167
</style>
3268
</head>
3369
<body>
34-
<div id="game">
35-
<div class="choice" id="rock">✊</div>
36-
<div class="choice" id="paper">✋</div>
37-
<div class="choice" id="scissors">✌️</div>
70+
<div class="container">
71+
<header>
72+
<h1>Rock Paper Scissors</h1>
73+
<p class="subtitle">Test your luck against the computer</p>
74+
</header>
75+
<div class="game-container">
76+
<div class="scoreboard">
77+
<div class="score player-score">
78+
<p>You</p>
79+
<div class="score-value" id="player-score">0</div>
80+
</div>
81+
<div class="score tie-score">
82+
<p>Ties</p>
83+
<div class="score-value" id="tie-score">0</div>
84+
</div>
85+
<div class="score computer-score">
86+
<p>Computer</p>
87+
<div class="score-value" id="computer-score">0</div>
88+
</div>
89+
</div>
90+
91+
<div class="battle-area">
92+
<div>
93+
<h3>Your Choice</h3>
94+
<div class="hand player-hand" id="player-hand">?</div>
95+
</div>
96+
<div class="vs">VS</div>
97+
<div>
98+
<h3>Computer's Choice</h3>
99+
<div class="hand computer-hand" id="computer-hand">?</div>
100+
</div>
101+
</div>
102+
103+
<div class="result" id="result">Choose your move to start the game!</div>
104+
105+
<div class="choices">
106+
<div class="choice" id="rock">✊</div>
107+
<div class="choice" id="paper">✋</div>
108+
<div class="choice" id="scissors">✌️</div>
109+
</div>
110+
111+
<div class="controls">
112+
<button class="btn" id="reset-btn">Reset Game</button>
113+
</div>
114+
115+
<div class="history">
116+
<h2>Game History</h2>
117+
<ul class="history-list" id="history-list"></ul>
118+
</div>
119+
120+
<div class="rules">
121+
<h2>How to Play</h2>
122+
<p>✊ Rock crushes Scissors</p>
123+
<p>✋ Paper covers Rock</p>
124+
<p>✌️ Scissors cut Paper</p>
125+
<p>First to score 5 points wins the game!</p>
126+
</div>
38127
</div>
39-
<div id="result"></div>
40-
<script>
41-
const choices = document.querySelectorAll(".choice");
42-
const result = document.getElementById("result");
43-
choices.forEach(choice => choice.addEventListener("click", play));
44-
45-
function play(e) {
46-
const playerChoice = e.target.id;
128+
<footer>
129+
<p>© 2025 Rock Paper Scissors Online</p>
130+
</footer>
131+
</div>
132+
133+
<script>
134+
// Game state
135+
const state = {
136+
scores: {player: 0, computer: 0, tie: 0},
137+
round: 0,
138+
history: [],
139+
gameOver: false
140+
};
141+
142+
// DOM elements
143+
const elements = {
144+
playerHand: document.getElementById('player-hand'),
145+
computerHand: document.getElementById('computer-hand'),
146+
result: document.getElementById('result'),
147+
playerScore: document.getElementById('player-score'),
148+
computerScore: document.getElementById('computer-score'),
149+
tieScore: document.getElementById('tie-score'),
150+
historyList: document.getElementById('history-list'),
151+
choices: document.querySelectorAll('.choice'),
152+
resetBtn: document.getElementById('reset-btn')
153+
};
154+
155+
// Emoji mapping
156+
const emojis = {rock: '✊', paper: '✋', scissors: '✌️'};
157+
158+
// Initialize game
159+
function init() {
160+
elements.choices.forEach(choice => {
161+
choice.addEventListener('click', handleChoice);
162+
});
163+
elements.resetBtn.addEventListener('click', resetGame);
164+
}
165+
166+
// Handle player choice
167+
function handleChoice(e) {
168+
if (state.gameOver) return;
169+
170+
// Visual selection
171+
elements.choices.forEach(c => c.classList.remove('selected'));
172+
e.target.classList.add('selected');
173+
174+
const playerChoice = e.target.id;
175+
playRound(playerChoice);
176+
}
177+
178+
// Play a round
179+
function playRound(playerChoice) {
180+
state.round++;
181+
182+
// Update player hand
183+
elements.playerHand.textContent = emojis[playerChoice];
184+
elements.playerHand.classList.add('shake');
185+
186+
// Computer chooses with animation
187+
elements.computerHand.textContent = '?';
188+
elements.computerHand.classList.add('spin');
189+
190+
setTimeout(() => {
191+
// Stop animations
192+
elements.playerHand.classList.remove('shake');
193+
elements.computerHand.classList.remove('spin');
194+
195+
// Get computer choice
47196
const computerChoice = getComputerChoice();
197+
elements.computerHand.textContent = emojis[computerChoice];
198+
199+
// Determine winner
48200
const winner = getWinner(playerChoice, computerChoice);
49-
displayResult(winner, computerChoice);
201+
202+
// Update scores
203+
state.scores[winner]++;
204+
updateScoreDisplay();
205+
206+
// Display result
207+
displayResult(winner, playerChoice, computerChoice);
208+
209+
// Add to history
210+
addToHistory(state.round, playerChoice, computerChoice, winner);
211+
212+
// Check if game is over
213+
if (state.scores.player >= 5 || state.scores.computer >= 5) {
214+
endGame();
215+
}
216+
}, 500);
217+
}
218+
219+
// Get computer choice
220+
function getComputerChoice() {
221+
const options = ['rock', 'paper', 'scissors'];
222+
return options[Math.floor(Math.random() * 3)];
223+
}
224+
225+
// Determine winner
226+
function getWinner(playerChoice, computerChoice) {
227+
if (playerChoice === computerChoice) return 'tie';
228+
if (
229+
(playerChoice === 'rock' && computerChoice === 'scissors') ||
230+
(playerChoice === 'paper' && computerChoice === 'rock') ||
231+
(playerChoice === 'scissors' && computerChoice === 'paper')
232+
) {
233+
return 'player';
50234
}
51-
52-
function getComputerChoice() {
53-
const options = ["rock", "paper", "scissors"];
54-
return options[Math.floor(Math.random() * 3)];
235+
return 'computer';
236+
}
237+
238+
// Update score display
239+
function updateScoreDisplay() {
240+
elements.playerScore.textContent = state.scores.player;
241+
elements.computerScore.textContent = state.scores.computer;
242+
elements.tieScore.textContent = state.scores.tie;
243+
}
244+
245+
// Display result message
246+
function displayResult(winner, playerChoice, computerChoice) {
247+
const resultElement = elements.result;
248+
let message = '';
249+
250+
resultElement.className = 'result';
251+
252+
switch (winner) {
253+
case 'player':
254+
message = `You win! Your ${playerChoice} beats computer's ${computerChoice}.`;
255+
resultElement.classList.add('result-win');
256+
break;
257+
case 'computer':
258+
message = `You lose! Computer's ${computerChoice} beats your ${playerChoice}.`;
259+
resultElement.classList.add('result-lose');
260+
break;
261+
case 'tie':
262+
message = `It's a tie! Both chose ${playerChoice}.`;
263+
resultElement.classList.add('result-tie');
264+
break;
55265
}
56-
57-
function getWinner(playerChoice, computerChoice) {
58-
if (playerChoice === computerChoice) return "tie";
59-
if (playerChoice === "rock")
60-
return computerChoice === "scissors" ? "player" : "computer";
61-
if (playerChoice === "paper")
62-
return computerChoice === "rock" ? "player" : "computer";
63-
if (playerChoice === "scissors")
64-
return computerChoice === "paper" ? "player" : "computer";
266+
267+
resultElement.textContent = message;
268+
resultElement.classList.add('shake');
269+
setTimeout(() => resultElement.classList.remove('shake'), 500);
270+
}
271+
272+
// Add round to history
273+
function addToHistory(round, playerChoice, computerChoice, winner) {
274+
const item = document.createElement('li');
275+
item.className = 'history-item';
276+
277+
const roundInfo = document.createElement('span');
278+
roundInfo.textContent = `Round ${round}: You: ${emojis[playerChoice]} vs Computer: ${emojis[computerChoice]}`;
279+
280+
const result = document.createElement('span');
281+
result.textContent = winner === 'player' ? 'Win' : winner === 'computer' ? 'Loss' : 'Tie';
282+
result.className = winner === 'player' ? 'win' : winner === 'computer' ? 'lose' : 'tie';
283+
284+
item.appendChild(roundInfo);
285+
item.appendChild(result);
286+
287+
elements.historyList.prepend(item);
288+
289+
// Keep only last 10 rounds
290+
if (elements.historyList.children.length > 10) {
291+
elements.historyList.removeChild(elements.historyList.lastChild);
65292
}
66-
67-
function displayResult(winner, computerChoice) {
68-
if (winner === "player") {
69-
result.innerHTML = `You win! 🎉 The computer chose ${computerChoice}.`;
70-
} else if (winner === "computer") {
71-
result.innerHTML = `You lose... 💔 The computer chose ${computerChoice}.`;
72-
} else {
73-
result.innerHTML = `It's a tie! 🤝 Both players chose ${computerChoice}.`;
74-
}
293+
294+
// Add to state history
295+
state.history.push({round, playerChoice, computerChoice, winner});
296+
}
297+
298+
// End game
299+
function endGame() {
300+
state.gameOver = true;
301+
const winner = state.scores.player > state.scores.computer ? 'player' : 'computer';
302+
303+
if (winner === 'player') {
304+
elements.result.textContent = `🏆 Congratulations! You won the game with ${state.scores.player} points!`;
305+
elements.result.className = 'result result-win';
306+
} else {
307+
elements.result.textContent = `Game over! Computer won with ${state.scores.computer} points.`;
308+
elements.result.className = 'result result-lose';
75309
}
76-
</script>
77-
<script src="../sidebar.js"></script>
310+
}
311+
312+
// Reset game
313+
function resetGame() {
314+
// Reset state
315+
state.scores.player = 0;
316+
state.scores.computer = 0;
317+
state.scores.tie = 0;
318+
state.round = 0;
319+
state.history = [];
320+
state.gameOver = false;
321+
322+
// Reset display
323+
elements.playerHand.textContent = '?';
324+
elements.computerHand.textContent = '?';
325+
elements.result.textContent = 'Choose your move to start a new game!';
326+
elements.result.className = 'result';
327+
updateScoreDisplay();
328+
elements.historyList.innerHTML = '';
329+
elements.choices.forEach(c => c.classList.remove('selected'));
330+
}
331+
332+
// Initialize game
333+
init();
334+
</script>
335+
<script src="../logo.js"></script>
78336
</body>
79337
</html>

0 commit comments

Comments
 (0)