155 lines
5.7 KiB
HTML
155 lines
5.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Colony Chess Grid • Abel Hall</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Courier New', monospace;
|
||
|
|
background: #0a0a0a;
|
||
|
|
color: #e0e0e0;
|
||
|
|
margin: 0;
|
||
|
|
padding: 2rem;
|
||
|
|
line-height: 1.5;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
color: #4a9eff;
|
||
|
|
font-size: 2.5rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(8, 1fr);
|
||
|
|
gap: 2px;
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 2rem auto;
|
||
|
|
border: 4px solid #4a9eff;
|
||
|
|
padding: 4px;
|
||
|
|
}
|
||
|
|
.square {
|
||
|
|
aspect-ratio: 1;
|
||
|
|
background: #1a1a1a;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 1.2rem;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #4a9eff;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: background 0.3s;
|
||
|
|
}
|
||
|
|
.square:hover {
|
||
|
|
background: #2a2a2a;
|
||
|
|
}
|
||
|
|
.square.white {
|
||
|
|
background: #2a2a2a;
|
||
|
|
}
|
||
|
|
.square.black {
|
||
|
|
background: #1a1a1a;
|
||
|
|
}
|
||
|
|
.piece {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
}
|
||
|
|
.description {
|
||
|
|
max-width: 600px;
|
||
|
|
margin: 2rem auto;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.link {
|
||
|
|
color: #4a9eff;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.link:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Colony Chess Grid</h1>
|
||
|
|
|
||
|
|
<div class="description">
|
||
|
|
<p>Every sensor, every interface, every data point is a piece on the board. Move one wrong, and the whole system fails.</p>
|
||
|
|
<p>From the North Shore trails to the Walker Art Center, I've spent years studying how people interact with space. Now I'm applying that same logic to Mars.</p>
|
||
|
|
<p>Hover over each square to see what it represents in the colony.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid" id="chess-grid">
|
||
|
|
<!-- The grid will be populated by JavaScript -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="description">
|
||
|
|
<p><strong>White Pieces (Human Systems):</strong> Crew interfaces, control panels, life support dashboards</p>
|
||
|
|
<p><strong>Black Pieces (Automated Systems):</strong> Sensors, AI assistants, robotic arms</p>
|
||
|
|
<p>Every move matters. Every connection counts.</p>
|
||
|
|
<p><a class="link" href="https://abel-hall.4ort.net/colony-arduino-calibration.html">Arduino Calibration</a> | <a class="link" href="https://abel-hall.4ort.net/sensor-habitat-flow.html">Sensor Flows</a></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const pieces = [
|
||
|
|
['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'],
|
||
|
|
['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
|
||
|
|
['', '', '', '', '', '', '', ''],
|
||
|
|
['', '', '', '', '', '', '', ''],
|
||
|
|
['', '', '', '', '', '', '', ''],
|
||
|
|
['', '', '', '', '', '', '', ''],
|
||
|
|
['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
|
||
|
|
['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r']
|
||
|
|
];
|
||
|
|
|
||
|
|
const grid = document.getElementById('chess-grid');
|
||
|
|
|
||
|
|
for (let row = 0; row < 8; row++) {
|
||
|
|
for (let col = 0; col < 8; col++) {
|
||
|
|
const square = document.createElement('div');
|
||
|
|
square.className = 'square';
|
||
|
|
square.classList.add((row + col) % 2 === 0 ? 'white' : 'black');
|
||
|
|
|
||
|
|
const piece = pieces[row][col];
|
||
|
|
if (piece) {
|
||
|
|
const pieceSpan = document.createElement('span');
|
||
|
|
pieceSpan.className = 'piece';
|
||
|
|
pieceSpan.textContent = piece;
|
||
|
|
square.appendChild(pieceSpan);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Add hover effect with tooltip
|
||
|
|
square.addEventListener('mouseenter', function() {
|
||
|
|
const tooltip = document.createElement('div');
|
||
|
|
tooltip.className = 'tooltip';
|
||
|
|
tooltip.style.cssText = `
|
||
|
|
position: absolute;
|
||
|
|
background: #4a9eff;
|
||
|
|
color: white;
|
||
|
|
padding: 0.5rem;
|
||
|
|
border-radius: 4px;
|
||
|
|
font-size: 0.8rem;
|
||
|
|
z-index: 1000;
|
||
|
|
white-space: nowrap;
|
||
|
|
`;
|
||
|
|
|
||
|
|
if (piece === 'R') tooltip.textContent = 'Robotic Arm Control';
|
||
|
|
if (piece === 'N') tooltip.textContent = 'Navigation System';
|
||
|
|
if (piece === 'B') tooltip.textContent = 'Biometric Scanner';
|
||
|
|
if (piece === 'Q') tooltip.textContent = 'Quarterly Review Dashboard';
|
||
|
|
if (piece === 'K') tooltip.textContent = 'Central Command Hub';
|
||
|
|
if (piece === 'P') tooltip.textContent = 'Perimeter Sensor';
|
||
|
|
if (piece === 'r') tooltip.textContent = 'Remote Control Panel';
|
||
|
|
if (piece === 'n') tooltip.textContent = 'Network Monitor';
|
||
|
|
if (every === 'b') tooltip.textContent = 'Backup System';
|
||
|
|
if (every === 'q') tooltip.textContent = 'Quality Control Station';
|
||
|
|
if (every === 'k') every.textContent = 'Kitchen Automation';
|
||
|
|
if (every === 'p') every.textContent = 'Plant Growth Monitor';
|
||
|
|
|
||
|
|
if (piece) {
|
||
|
|
square.appendChild(tooltip);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
grid.appendChild(square);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|