bwr/kontle.html at main · fdagner/bwr · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BwR-Kontle – Interaktives BwR-Lernspiel | meinbwr.de BwR</title>
  <meta name="description" content="BwR-Kontle: Interaktives BwR-Lernspiel zu Kontenrahmen und Buchungssätzen für die Realschule Bayern.">
  <link rel="canonical" href="https://www.meinbwr.de/kontle.html">
  <meta name="robots" content="index, follow">

  <!-- Open Graph -->
  <meta property="og:title" content="BwR-Kontle – Interaktives BwR-Lernspiel | meinbwr.de">
  <meta property="og:description" content="BwR-Kontle: Interaktives BwR-Lernspiel zu Kontenrahmen und Buchungssätzen für die Realschule Bayern.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.meinbwr.de/kontle.html">
  <meta property="og:site_name" content="meinbwr.de – BwR Realschule Bayern">
  <meta property="og:locale" content="de_DE">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="BwR-Kontle – Interaktives BwR-Lernspiel | meinbwr.de">
  <meta name="twitter:description" content="BwR-Kontle: Interaktives BwR-Lernspiel zu Kontenrahmen und Buchungssätzen für die Realschule Bayern.">

  <!-- Theme -->
  <meta name="theme-color" content="#2c5f2d">
  <meta name="color-scheme" content="light">

  <!-- Strukturierte Daten -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "name": "BwR-Kontle",
    "description": "BwR-Kontle: Interaktives BwR-Lernspiel zu Kontenrahmen und Buchungssätzen für die Realschule Bayern.",
    "url": "https://www.meinbwr.de/kontle.html",
    "inLanguage": "de-DE",
    "isPartOf": {
      "@type": "WebSite",
      "name": "meinbwr.de – BwR Realschule Bayern",
      "url": "https://www.meinbwr.de/"
    },
    "breadcrumb": {
      "@type": "BreadcrumbList",
      "itemListElement": [
        { "@type": "ListItem", "position": 1, "name": "Startseite", "item": "https://www.meinbwr.de/" },
        { "@type": "ListItem", "position": 2, "name": "Sonstiges", "item": "https://www.meinbwr.de/" },
        { "@type": "ListItem", "position": 3, "name": "BwR-Kontle", "item": "https://www.meinbwr.de/kontle.html" }
      ]
    }
  }
  </script>

  <link rel="stylesheet" href="css/style.css">
  <script src="js/menu.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1"></script>
</head>
<body>
    <main>
    <div w3-include-html="navigation.html"></div>
    <h2>BwR-Kontle</h2>
 <p>Welches Konto aus dem Kontenplan Bayerische Realschule wird gesucht?<br>Grenzenloser Spielspaß: <i class="fa fa-gamepad" aria-hidden="true"></i> bei jedem Seitenaufruf wird ein neues Konto
    gesucht.</p>

<div class="wordle">
    <h1>BwR-Kontle</h1>
    <div id="grid"></div>
    <div id="keyboard"></div>
</div>

<style>
.button,.wordle{color:#fff;display:flex}.button,.keys,.rows,.wordle{display:flex}.wordle{touch-action:pan-x pan-y pinch-zoom;background:#111;font-family:sans-serif;text-align:center;text-transform:uppercase;flex-direction:column}#grid{flex:1 1 auto}.button{border:0;padding:4px!important;margin:2px!important;height:2.5em;border-radius:4px;cursor:pointer;user-select:none;flex:1;justify-content:center;align-items:center;text-transform:lowercase}#keyboard{margin:10px auto;padding:0!important;max-width:500px;width:100%}.wordle .cell{width:60px;height:60px;line-height:60px;display:inline-block;margin:4px;font-size:40px;font-weight:700;perspective:1000px}.cell .back,.wordle .cell .front{border:2px solid #444;backface-visibility:hidden;position:absolute;top:0;right:0;bottom:0;left:0}.keys{margin:0 auto 2px;touch-action:manipulation}.rows{flex-direction:row;flex-wrap:nowrap;justify-content:center}.cell.solved .surface{transform:rotateX(180deg)}.cell .surface{transition-duration:2s;transform-style:preserve-3d;position:relative;width:100%;height:100%}.cell .front{z-index:2}.cell.solved .front{display:none}.cell .back{z-index:1;transform:rotateX(180deg)}@keyframes press{from{opacity:.5;transform:scale(.95)}50%{opacity:.85;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}
</style>

<script type="text/javascript" charset="utf-8">
"use strict";let wordList=["0500","0530","0700","0840","0860","0870","0890","1500","2000","2010","2020","2030","2400","2470","2600","2800","2880","2900","3000","3001","3670","3680","3900","4200","4250","4400","4800","4830","4840","4900","5000","5001","5400","5430","5490","5495","5650","5710","5780","6000","6001","6002","6010","6011","6012","6020","6021","6022","6030","6031","6032","6040","6140","6160","6200","6400","6520","6540","6700","6730","6750","6760","6770","6800","6820","6850","6870","6900","6950","6990","7000","7020","7030","7460","7510","8010","8020",],randomIndex=Math.floor(Math.random()*wordList.length),secret=wordList[randomIndex],currentAttempt="",history=[];function handleKeyDown(e){!e.ctrlKey&&!e.metaKey&&!e.altKey&&handleKey(e.key)}function handleKey(e){if(6===history.length||isAnimating)return;let t=e.toLowerCase();if("enter"===t){if(currentAttempt.length<4)return;if(!wordList.includes(currentAttempt)){alert("Das Konto gibt es nicht in meinem Kontenplan 🙁");return}currentAttempt===secret&&confetti({particleCount:200,spread:100,origin:{y:.6}}),5===history.length&&currentAttempt!==secret&&alert(secret),history.push(currentAttempt),currentAttempt="",updateKeyboard(),pauseInput()}else"backspace"===t?currentAttempt=currentAttempt.slice(0,currentAttempt.length-1):/^[0123456789]$/.test(t)&&currentAttempt.length<4&&animatePress((currentAttempt+=t).length-1);updateGrid()}let isAnimating=!1;function pauseInput(){if(isAnimating)throw Error("should never happen");isAnimating=!0,setTimeout(()=>{isAnimating=!1},2e3)}function buildGrid(){for(let e=0;e<6;e++){let t=document.createElement("div");t.className="rows";for(let n=0;n<4;n++){let r=document.createElement("div");r.className="cell";let o=document.createElement("div");o.className="front";let l=document.createElement("div");l.className="back";let $=document.createElement("div");$.className="surface",$.style.transitionDelay=300*n+"ms",$.appendChild(o),$.appendChild(l),r.appendChild($),t.appendChild(r)}grid.appendChild(t)}}function updateGrid(){for(let e=0;e<6;e++){let t=grid.children[e];e<history.length?drawAttempt(t,history[e],!0):e===history.length?drawAttempt(t,currentAttempt,!1):drawAttempt(t,"",!1)}}function drawAttempt(e,t,n){for(let r=0;r<4;r++){let o=e.children[r],l=o.firstChild,$=l.children[0],i=l.children[1];void 0!==t[r]?($.textContent=t[r],i.textContent=t[r]):($.innerHTML='<div style="opacity: 0">X</div>',i.innerHTML='<div style="opacity: 0">X</div>',clearAnimation(o)),$.style.backgroundColor=BLACK,$.style.borderColor="",void 0!==t[r]&&($.style.borderColor=MIDDLEGREY),i.style.backgroundColor=getBgColor(t,r),i.style.borderColor=getBgColor(t,r),n?o.classList.add("solved"):o.classList.remove("solved")}}let BLACK="#111",GREY="#212121",MIDDLEGREY="#666",LIGHTGREY="#888",GREEN="#538d4e",YELLOW="#b59f3b";function getBgColor(e,t){let n=secret[t],r=e[t];return void 0===r||-1===secret.indexOf(r)?GREY:n===r?GREEN:YELLOW}function buildKeyboard(){buildKeyboardRow("789",!1),buildKeyboardRow("456",!1),buildKeyboardRow("123",!1),buildKeyboardRow("0",!0)}function buildKeyboardRow(e,t){let n=document.createElement("div");if(n.className="keys",t){let r=document.createElement("button");r.className="button",r.textContent="L\xf6schen",r.style.backgroundColor=LIGHTGREY,r.onclick=()=>{handleKey("Backspace")},n.appendChild(r)}for(let o of e){let l=document.createElement("button");l.className="button",l.textContent=o,l.style.backgroundColor=LIGHTGREY,l.onclick=()=>{handleKey(o)},keyboardButtons.set(o,l),n.appendChild(l)}if(t){let $=document.createElement("button");$.className="button",$.textContent="Enter",$.style.backgroundColor=LIGHTGREY,$.onclick=()=>{handleKey("Enter")},n.appendChild($)}keyboard.appendChild(n)}function getBetterColor(e,t){return e===GREEN||t===GREEN?GREEN:e===YELLOW||t===YELLOW?YELLOW:GREY}function updateKeyboard(){let e=new Map;for(let t of history)for(let n=0;n<t.length;n++){let r=getBgColor(t,n),o=t[n],l=e.get(o);e.set(o,getBetterColor(r,l))}for(let[$,i]of keyboardButtons)i.style.backgroundColor=e.get($),i.style.borderColor=e.get($)}function animatePress(e){let t=history.length,n=grid.children[t].children[e];n.style.animationName="press",n.style.animationDuration="100ms",n.style.animationTimingFunction="ease-out"}function clearAnimation(e){e.style.animationName="",e.style.animationDuration="",e.style.animationTimingFunction=""}function loadGame(){let e;try{e=JSON.parse(localStorage.getItem("data"))}catch{}null!=e&&e.secret===secret&&(history=e.history)}let grid=document.getElementById("grid"),keyboard=document.getElementById("keyboard"),keyboardButtons=new Map;loadGame(),buildGrid(),buildKeyboard(),updateGrid(),updateKeyboard(),window.addEventListener("keydown",handleKeyDown);
</script>
</main>
<div w3-include-html="footer.html"></div>
<script>
includeHTML();
</script>
</body>
</html>