midas/schiffe-versenken
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Midas Wollinger
2026-07-29 12:53:44 +02:00
parent 3279d6a67e
commit 2698ac751a
4 changed files with 67 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
static/css/style.css
View File

@ -148,34 +148,34 @@ button:disabled { opacity: 0.4; cursor: not-allowed; }
font-size: 18px;
}
/* --- Dwarf ship sprite, built purely from CSS shapes --- */
.dwarf {
/* --- Wappler ship sprite, built purely from CSS shapes --- */
.wappler {
position: relative;
width: 24px;
height: 26px;
}
.dwarf .hat {
.wappler .cap {
position: absolute;
top: -2px;
top: -1px;
left: 2px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 12px solid var(--hat, #c0392b);
width: 18px;
height: 9px;
background: var(--hat, #c0392b);
border-radius: 9px 9px 3px 3px;
transform: rotate(-8deg);
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
.dwarf .hat::after {
.wappler .cap::after {
content: "";
position: absolute;
top: 11px;
left: -6px;
width: 12px;
top: 6px;
right: -7px;
width: 10px;
height: 4px;
background: var(--hat, #c0392b);
border-radius: 2px;
border-radius: 0 4px 4px 0;
}
.dwarf .head {
.wappler .head {
position: absolute;
top: 9px;
left: 4px;
@ -184,28 +184,38 @@ button:disabled { opacity: 0.4; cursor: not-allowed; }
background: #f0c090;
border-radius: 50% 50% 45% 45%;
}
.dwarf .beard {
.wappler .stoppel {
position: absolute;
top: 15px;
left: 3px;
width: 18px;
height: 12px;
background: #d9d9d9;
border-radius: 0 0 9px 9px;
top: 17px;
left: 4px;
width: 16px;
height: 6px;
background: rgba(60, 40, 20, 0.28);
border-radius: 0 0 8px 8px;
}
.dwarf .eyes {
.wappler .brille {
position: absolute;
top: 13px;
left: 7px;
width: 10px;
height: 2px;
background: transparent;
box-shadow: 0 0 0 1px #2a1c00, 8px 0 0 -1px #2a1c00;
left: 5px;
width: 14px;
height: 4px;
background: #111;
border-radius: 2px;
box-shadow: 2px -1px 0 -1px rgba(255,255,255,0.6);
}
.wappler .grinser {
position: absolute;
top: 18px;
left: 8px;
width: 8px;
height: 4px;
border-bottom: 2px solid #7a4a2a;
border-radius: 0 0 8px 8px;
}
.cell.hit .dwarf { filter: grayscale(1) brightness(0.6); transform: rotate(90deg); }
.cell.hit .dwarf .eyes { box-shadow: none; }
.cell.hit .dwarf::before {
.cell.hit .wappler { filter: grayscale(1) brightness(0.6); transform: rotate(90deg); }
.cell.hit .wappler .brille { box-shadow: none; }
.cell.hit .wappler::before {
content: "✕";
position: absolute;
inset: 0;

14
static/js/game.js
View File

@ -29,11 +29,13 @@ function setMessage(text, isError = false) {
m.style.color = isError ? "#ff8b8b" : "";
}
function dwarfSprite(hat) {
function wapplerSprite(hat) {
const wrap = document.createElement("div");
wrap.className = "dwarf";
wrap.className = "wappler";
wrap.style.setProperty("--hat", hat);
wrap.innerHTML = '<div class="hat"></div><div class="head"></div><div class="eyes"></div><div class="beard"></div>';
wrap.innerHTML =
'<div class="cap"></div><div class="head"></div><div class="brille"></div>' +
'<div class="grinser"></div><div class="stoppel"></div>';
return wrap;
}
@ -95,7 +97,7 @@ function renderPlacementBoard(data) {
const shipId = data.player_board[r][c];
if (shipId) {
const ship = data.fleet_def.find((s) => s.id === shipId);
cell.appendChild(dwarfSprite(ship.hat));
cell.appendChild(wapplerSprite(ship.hat));
}
}
}
@ -105,7 +107,7 @@ function renderPlacementBoard(data) {
async function handlePlacementClick(r, c) {
if (!state.selectedShip) {
setMessage("Wähle zuerst einen Idioten aus.", true);
setMessage("Wähle zuerst einen Wappler aus.", true);
return;
}
try {
@ -135,7 +137,7 @@ function renderBattle(data) {
own.innerHTML = "";
const shipId = data.player_board[r][c];
const receivedShot = data.player_shots_received[r][c];
if (shipId) own.appendChild(dwarfSprite(data.fleet_def.find((s) => s.id === shipId).hat));
if (shipId) own.appendChild(wapplerSprite(data.fleet_def.find((s) => s.id === shipId).hat));
if (receivedShot) own.classList.add(receivedShot);
const enemy = enemyCells[r][c];