Merge branch 'main' of https://gitlab2.informatik.hs-fulda.de/fdai7359/gesellschaftsspiele-sammlung

2 years ago · b449b1e5a0
2 changed files with 46 additions and 6 deletions
--- a/kniffel/css/styles.css
+++ b/kniffel/css/styles.css
@ -31,6 +31,7 @@
  table {
    width: 100%;
    border-collapse: collapse;
+    background-color: lightblue;
  }
  
  th, td {
@ -52,4 +53,40 @@
    margin: auto;
    width: 50%;
  }
-  
+ 
+  .button {
+    appearance: button;
+    backface-visibility: hidden;
+    background-color: #405cf5;
+    border-radius: 6px;
+    border-width: 0;
+    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
+    font-size: 100%;
+    height: 44px;
+    line-height: 1.15;
+    margin: 12px 0 0;
+    outline: none;
+    overflow: hidden;
+    padding: 0 25px;
+    position: relative;
+    text-align: center;
+    text-transform: none;
+    transform: translateZ(0);
+    transition: all .2s,box-shadow .08s ease-in;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    width: 20%;
+  }
+
+  .button:disabled {
+    cursor: default;
+  }
+
+  .button:focus {
+    box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
+  }
--- a/kniffel/index.html
+++ b/kniffel/index.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
+        <!-- Dateien einbinden -->
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/styles.css" /> 
        <script type="text/javascript" src="inc/wuerfel.js"></script>
@ -11,7 +12,7 @@
        <script type="text/javascript" src="inc/kleineStraße.js"></script>
        <script type="text/javascript" src="inc/großeStraße.js"></script>
        <script type="text/javascript" src="inc/errechneEndergebnisse.js"></script>
-
+<!-- Titel der HTML -->
        <title>Kniffel</title>
 </head>
 <body>
@ -26,8 +27,9 @@

    <hr class="line">
    <div class="row">
+      <!-- linke Seite: Spielplan -->
      <div class="column">
-        <h1>Spielpan</h1>
+        <h1>Spielplan</h1>
        <table>
            <tr>
              <th></th>
@ -191,13 +193,13 @@
            </tr>
          </table>
          <br>
-        <input type="button" value="Spiel beenden" onclick="errechneEndergebnisse();">
+        <input class="button" type="button" value="Spiel beenden" onclick="errechneEndergebnisse();">
        <br>
      </div>
    


-
+<!-- rechte Seite: Würfelbereich -->
      <div class="column">
        <h1>Würfelbereich</h1>

@ -225,12 +227,13 @@
        </div>
        <h3>Bitte würfeln und Würfel markieren, welche rausgelegt werden sollen</h6>
        <br>
-        <input type="button" value="Würfeln" onclick="Wuerfel();">
+        <input class="button" type="button" value="Würfeln" onclick="Wuerfel();">
        <br>
        <div class="wuerfel">
          <h3>erlaubte Würfelversuche: </h3>
          <h3 id="erlaubteVersuche">3</h3>
        </div>
+        <!-- unsichtbare Ausgaben, um Werte der Würfel zu speichern -->
        <h6 id="AusgabeWuerfel1" style="color: white;">0</h6>
        <h6 id="AusgabeWuerfel2" style="color: white;">0</h6>
        <h6 id="AusgabeWuerfel3" style="color: white;">0</h6>