From ca5ab04829ca21f4002bd225c8dafa905dc35476 Mon Sep 17 00:00:00 2001
From: Subliminal Guy <subliminal_kid@posteo.de>
Date: Mon, 10 Mar 2025 09:52:59 +0100
Subject: [PATCH] Add Game Code
---
game/index.html | 45 ++++++++++++++++++++++
game/styles.css | 99 +++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 144 insertions(+)
create mode 100644 game/index.html
create mode 100644 game/styles.css
diff --git a/game/index.html b/game/index.html
new file mode 100644
index 0000000..b7718f0
--- /dev/null
+++ b/game/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Schnick, schnack, schnuck</title>
+ <link rel="stylesheet" href="./styles.css" />
+</head>
+<body>
+ <div class="game-container">
+ <h1>Schnick, schnack, schnuck!</h1>
+ <main>
+
+
+ </details>
+
+ <div class="score-container">
+ <strong
+ >Spieler: <span class="score" id="player-score">0</span></strong
+ >
+ <strong
+ >Computer:
+ <span class="score" id="computer-score">0</span></strong
+ >
+ </div>
+
+ <section class="options-container">
+ <h2>Wähle deine Waffe:</h2>
+ <div class="btn-container">
+ <button id="rock-btn" class="btn">Stein</button>
+ <button id="paper-btn" class="btn">Papier</button>
+ <button id="scissors-btn" class="btn">Schere</button>
+ </div>
+ </section>
+
+ <div class="results-container">
+ <p id="results-msg"></p>
+ <p id="winner-msg"></p>
+ <button class="btn" id="reset-game-btn">Play again?</button>
+ </div>
+ </div>
+ </main>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/game/styles.css b/game/styles.css
new file mode 100644
index 0000000..df8f492
--- /dev/null
+++ b/game/styles.css
@@ -0,0 +1,99 @@
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --nice-blue: #40BAD5;
+ --dark-blue: #035AA6;
+ --yellow: #FFE6E6;
+ --golden-yellow: #FAD0C4;
+}
+
+body {
+ background-color: var(--nice-blue);
+ text-align: center;
+ color: var(--dark-blue);
+}
+
+.game-container {
+ inline-size: 80%;
+ margin: 5rem auto;
+}
+
+h1 {
+ margin: 15px 0 20px;
+}
+
+.btn-container {
+ display: flex;
+ margin-top: 20px;
+ justify-content: center;
+ align-items: center;
+}
+
+.btn {
+ cursor: pointer;
+ width: 100px;
+ margin: 10px;
+ color: var(--very-dark-blue);
+ background-color: var(--yellow);
+ padding: 5px 10px;
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#FFE6E6, #FAD0C4);
+}
+
+.rules-container {
+ padding: 10px 0;
+ margin: auto;
+ border-radius: 15px;
+ border: 5px solid var(--yellow);
+ background-color: var(--white);
+ color: var(--very-dark-blue);
+}
+
+.rules-container ul {
+ list-style-type: none;
+}
+
+.rules-container p {
+ margin: 10px 0;
+}
+
+@media (min-width: 760px) {
+ .rules-container {
+ width: 60%;
+ }
+}
+
+.score-container {
+ display: flex;
+ justify-content: space-evenly;
+ margin: 30px 0;
+ font-size: 1.2rem;
+}
+
+.score {
+ font-weight: 500;
+}
+
+.results-container {
+ font-size: 1.3rem;
+ margin: 15px 0;
+}
+
+#winner-msg {
+ margin-top: 25px;
+}
+
+#reset-game-btn {
+ display: none;
+ margin: 20px auto;
+}
--
GitLab