CodeByMrFinchum/rock-paper-scissor-card-game
CodeByMrFinchum/rock-paper-scissor-card-game
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

Change the layout to fit the code on pyscript, now also with icons.

Browse source
This commit is contained in:
Mr Finchum 2025-03-17 13:55:46 +01:00
parent 54cd9d838b
commit 25bc363a24
11 changed files with 170 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

124
index.html Normal file
View file

@ -0,0 +1,124 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Rock Paper Scissors Card Game</title>
<link
rel="stylesheet"
href="https://pyscript.net/releases/2025.3.1/core.css"
/>
<script
type="module"
src="https://pyscript.net/releases/2025.3.1/core.js"
></script>
</head>
<body>
<h1>Rock Paper Scissors Card Game</h1>
<p>
Play Rock Paper Scissors with a twist! Use a 52-card deck with an
uneven distribution of cards. Both you and the AI get three cards,
and the AI selects randomly. The rules follow the classic game, but
with an added element of chance!
</p>
<p>Select a card to play against the AI! Best out of 5 game mode.</p>
<h3>Score</h3>
<p>
You: <span id="user-score">0</span> - AI:
<span id="ai-score">0</span>
</p>
<h3 id="result">Generating deck, please wait...</h3>
<style>
.card-button {
width: 120px; /* Keep button size */
height: 120px;
background-size: contain; /* Ensures full image fits */
background-repeat: no-repeat; /* Prevents tiling */
background-position: center; /* Centers image */
border: none;
cursor: pointer;
border-radius: 10px;
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
}
/* Default unknown card */
#card-0,
#card-1,
#card-2 {
background-image: url("images/card-back.png");
}
/* Reset button */
#reset-game {
margin-top: 15px;
width: 100px;
height: 50px;
font-size: 16px;
border-radius: 8px;
background-color: red;
color: white;
cursor: pointer;
}
</style>
<div id="card-buttons">
<button
id="card-0"
index="0"
py-click="game.play_card"
class="card-button"
></button>
<button
id="card-1"
index="1"
py-click="game.play_card"
class="card-button"
></button>
<button
id="card-2"
index="2"
py-click="game.play_card"
class="card-button"
></button>
</div>
<button id="reset-game" py-click="game.reset_game">Reset Game</button>
<div
id="attribution"
style="margin-top: 20px; font-size: 14px; text-align: center"
>
<p><strong>Attribution for the used icons:</strong></p>
<a
href="https://www.flaticon.com/free-icons/playing-card"
title="playing card icons"
>Playing card icons by ArtBit - Flaticon</a
><br />
<a
href="https://www.flaticon.com/free-icons/rock-paper-scissors"
title="rock paper scissors icons"
>Rock paper scissors icons by iconading - Flaticon</a
><br />
<a
href="https://www.flaticon.com/free-icons/hands-and-gestures"
title="hands and gestures icons"
>Hands and gestures icons by Voysla - Flaticon</a
><br />
<a
href="https://www.flaticon.com/free-icons/fist"
title="fist icons"
>Fist icons by Cuputo - Flaticon</a
><br />
<a
href="https://www.flaticon.com/free-icons/rock-paper-scissors"
title="rock-paper-scissors icons"
>Rock-paper-scissors icons created by Freepik - Flaticon</a
><br />
</div>
<script type="py" src="./main.py"></script>
</body>
</html>