Fix Broken Parts And Mistakes

2026-02-26 00:13:49 +01:00
parent db73585839
commit 7ffb9dcac4
2 changed files with 11 additions and 79 deletions
--- a/MainPage/Abdelaziz/kreuzwortratsel.html
+++ b/MainPage/Abdelaziz/kreuzwortratsel.html
@@ -53,27 +53,9 @@

  .hinweise { max-width: 340px; flex: 1; max-height: 560px; overflow-y: auto; }
  .hw { font-size: 11px; font-weight: bold; border-bottom: 1px solid #000; margin: 8px 0 3px; text-transform: uppercase; }
-  .h { display: flex; gap: 4px; font-size: 11px; line-height: 1.5; cursor: pointer; padding: 1px 3px; }
-  .h:hover    { background: #eef3fb; }
-  .h.aktiv    { background: #c5ddf7; }
-  .h.erledigt { color: #aaa; text-decoration: line-through; }
+  .h { display: flex; gap: 4px; font-size: 11px; line-height: 1.5; padding: 1px 3px; }
  .hnum { min-width: 20px; flex-shrink: 0; font-weight: bold; color: #666; }

-  #toast {
-    position: fixed; top: 12px; left: 50%;
-    transform: translateX(-50%) translateY(-50px);
-    background: #222; color: #fff;
-    font-size: 11px; padding: 5px 14px;
-    opacity: 0; transition: transform .2s, opacity .2s;
-    pointer-events: none; z-index: 99;
-  }
-  #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
-
-  @keyframes fja   { 0%, 60% { background: #27ae60 } 100% { background: #b8f0c8 } }
-  @keyframes fnein { 0%, 60% { background: #c0392b } 100% { background: #f0b8b8 } }
-  .fja   { animation: fja   .6s ease forwards; }
-  .fnein { animation: fnein .6s ease forwards; }
-
 </style>
 </head>
 <body>
@@ -104,12 +86,10 @@
  </div>
  <div class="hinweise" id="hinweise"></div>
 </div>
-<div id="toast"><span id="tw"></span><span id="tm"></span></div>
-
 <script>
 let richtung='across', ar=-1, ac=-1;
 let felder=[], nummern={across:{},down:{}};
-let lsg, ha, hd, gelo={across:new Set(),down:new Set()};
+let lsg, ha, hd;
 let GR=13;

 const RAETSEL=[
@@ -157,7 +137,6 @@ function lade(idx) {
  setRichtung('across'); ar = -1; ac = -1;
  felder = Array.from({length: GR}, () => Array(GR).fill(null));
  nummern = {across: {}, down: {}};
-  gelo = {across: new Set(), down: new Set()};
  document.getElementById('grid').style.gridTemplateColumns = `repeat(${GR},26px)`;
  document.getElementById('info').textContent = '';
  bauGrid();
@@ -212,7 +191,6 @@ function bauHinweise() {
      const row = document.createElement('div');
      row.className = 'h'; row.id = `h${d[0]}${num}`;
      row.innerHTML = `<span class="hnum">${num}.</span><span>${clues[num]}</span>`;
-      row.addEventListener('click', () => springZu(d, num));
      p.appendChild(row);
    });
  });
@@ -230,16 +208,7 @@ function zeigeAuswahl(r, c) {
  for (let i=0; i<GR; i++) for (let j=0; j<GR; j++) { const d=felder[i][j]; if(d&&!d.bl) d.el.classList.remove('markiert','aktiv'); }
  wc.forEach(([wr,wc2]) => felder[wr][wc2].el.classList.add('markiert'));
  if (felder[r]?.[c] && !felder[r][c].bl) felder[r][c].el.classList.add('aktiv');
-  document.querySelectorAll('.h').forEach(e => e.classList.remove('aktiv'));
-  if (!wc.length) return;
-  const [sr,sc] = wc[0], map = richtung==='across' ? nummern.across : nummern.down;
-  for (const [num, pos] of Object.entries(map)) {
-    if (pos.r===sr && pos.c===sc) {
-      const el = document.getElementById(`h${richtung[0]}${num}`);
-      if (el) { el.classList.add('aktiv'); el.scrollIntoView({block:'nearest', behavior:'smooth'}); }
-      break;
-    }
-  }
+
 }

 function fokus(r, c) { ar=r; ac=c; zeigeAuswahl(r, c); }
@@ -259,10 +228,9 @@ function eingabe(r, c) {
  const d = felder[r][c];
  if (!d.inp.value.length) return;
  d.inp.value = d.inp.value.slice(-1).toUpperCase();
-  d.el.classList.remove('richtig','falsch','fja','fnein');
+  d.el.classList.remove('richtig','falsch');
  const wc = wort(r,c,richtung), idx = wc.findIndex(([wr,wc2]) => wr===r && wc2===c);
  if (idx !== -1 && idx < wc.length-1) felder[wc[idx+1][0]][wc[idx+1][1]].inp.focus();
-  setTimeout(() => wortCheck(r,c), 50);
 }
 function geh(r, c, dr, dc) {
  const nr=r+dr, nc=c+dc;
@@ -277,21 +245,9 @@ function naechstesWort(delta) {
  const keys = Object.keys(map).map(Number).sort((a,b) => a-b);
  const [sr,sc] = wort(ar,ac,richtung)[0];
  const cur  = keys.find(n => map[n].r===sr && map[n].c===sc);
-  springZu(richtung, keys[((keys.indexOf(cur)+delta)+keys.length) % keys.length]);
-}
-function springZu(d, num) {
-  setRichtung(d);
-  const map = d==='across' ? nummern.across : nummern.down;
-  if (map[num]) felder[map[num].r][map[num].c].inp.focus();
-}
-
-let tt = null;
-function toast(word, ok) {
-  const t = document.getElementById('toast');
-  t.innerHTML = `<span style="color:${ok?'#7df0a0':'#f07070'};font-weight:bold;margin-right:3px">${word}</span>${ok?' ✓ Richtig!':' ✗ Falsch'}`;
-  t.classList.add('show');
-  if (tt) clearTimeout(tt);
-  tt = setTimeout(() => t.classList.remove('show'), 1800);
+  const next = keys[((keys.indexOf(cur)+delta)+keys.length) % keys.length];
+  setRichtung(richtung);
+  felder[map[next].r][map[next].c].inp.focus();
 }

 function alleFelder(fn) {
@@ -300,32 +256,10 @@ function alleFelder(fn) {
    fn(d, r, c);
  }
 }
-function wortCheck(r, c) {
-  ['across','down'].forEach(d => {
-    const wc = wort(r,c,d); if (wc.length < 2) return;
-    if (!wc.every(([wr,wc2]) => felder[wr]?.[wc2]?.inp?.value?.trim())) return;
-    const map = d==='across' ? nummern.across : nummern.down;
-    const [sr,sc] = wc[0]; let num = null;
-    for (const [n,pos] of Object.entries(map)) if (pos.r===sr && pos.c===sc) { num=+n; break; }
-    if (num === null) return;
-    const ist  = wc.map(([wr,wc2]) => felder[wr][wc2].inp.value.toUpperCase()).join('');
-    const soll = wc.map(([wr,wc2]) => lsg[`${wr},${wc2}`]||'').join('');
-    const ok = ist === soll;
-    wc.forEach(([wr,wc2]) => { const cel=felder[wr][wc2].el; cel.classList.remove('fja','fnein','richtig','falsch'); void cel.offsetWidth; });
-    if (ok) {
-      wc.forEach(([wr,wc2]) => felder[wr][wc2].el.classList.add('fja','richtig'));
-      document.getElementById(`h${d[0]}${num}`)?.classList.add('erledigt');
-      gelo[d].add(num); toast(ist, true);
-    } else if (!gelo[d].has(num)) {
-      wc.forEach(([wr,wc2]) => felder[wr][wc2].el.classList.add('fnein','falsch'));
-      toast(ist, false);
-    }
-  });
-}
 function pruefen() {
  let ok=0, ng=0, em=0;
  alleFelder((d,r,c) => {
-    d.el.classList.remove('richtig','falsch','fja','fnein');
+    d.el.classList.remove('richtig','falsch');
    const v=d.inp.value.toUpperCase(), s=lsg[`${r},${c}`];
    if (!v) { em++; return; }
    if (v===s) { d.el.classList.add('richtig'); ok++; } else { d.el.classList.add('falsch'); ng++; }
@@ -337,15 +271,13 @@ function pruefen() {
 function loesung() {
  alleFelder((d,r,c) => {
    const s = lsg[`${r},${c}`];
-    if (s) { d.inp.value=s; d.el.classList.remove('falsch','fnein'); d.el.classList.add('richtig'); }
+    if (s) { d.inp.value=s; d.el.classList.remove('falsch'); d.el.classList.add('richtig'); }
  });
  document.getElementById('info').textContent='Lösung angezeigt.'; document.getElementById('info').className='gut';
 }
 function loeschen() {
-  alleFelder(d => { d.inp.value=''; d.el.classList.remove('richtig','falsch','fja','fnein'); });
-  gelo = {across: new Set(), down: new Set()};
+  alleFelder(d => { d.inp.value=''; d.el.classList.remove('richtig','falsch'); });
  document.getElementById('info').textContent='';
-  document.querySelectorAll('.h.erledigt').forEach(e => e.classList.remove('erledigt'));
 }
 lade(0);
 </script>
--- a/MainPage/MainPage.html
+++ b/MainPage/MainPage.html
@@ -25,7 +25,7 @@
            <p>Wörter lernen</p>
        </div>

-        <div class="game-card" onclick="location.href='Abdelaziz/CrossWords.html'">
+        <div class="game-card" onclick="location.href='Abdelaziz/kreuzwortratsel.html'">
            <h2>CrossWord</h2>
            <p>Abdelaziz</p>
        </div>