Spaces:

emiliocantuc
/

sudoku-visualizer

Running

App Files Files Community

Emilio Cantú commited on 16 days ago

Commit

2e97c7c

1 Parent(s): fa7b256

init

Browse files

Files changed (3) hide show

README.md +2 -2
index.html +630 -16
style.css +0 -28

README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
 title: Sudoku Visualizer
-emoji: 🔥
 colorFrom: green
 colorTo: indigo
 sdk: static
@@ -9,4 +9,4 @@ license: mit
 short_description: str to sudoku viz
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Sudoku Visualizer
+emoji: 🔢
 colorFrom: green
 colorTo: indigo
 sdk: static
 short_description: str to sudoku viz
 ---
+A quick vibe-coded str-to-sudoku visualizer

index.html CHANGED Viewed

@@ -1,19 +1,633 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
 			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
 			</p>
-		</div>
-	</body>
-</html>

 <!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Sudoku Visualizer</title>
+	<style>
+		/* --- Dark theme only, but with mid-contrast so it isn't "all dark" --- */
+		:root {
+			--bg: #0b0e14;
+			/* page background */
+			--panel: #121826;
+			/* cards */
+			--panel-2: #0f1522;
+			/* slight contrast */
+			--text: #d2d7e3;
+			/* body text */
+			--muted: #8e98ad;
+			/* secondary text */
+			--accent: #7aa2ff;
+			/* focus color */
+			/* Board palette (muted, not bright white) */
+			--board-bg: #131824;
+			/* board fill */
+			--line-thin: #3a455d;
+			/* inner 1px */
+			--line-thick: #a7b0c4;
+			/* 2px group lines (soft light gray-blue) */
+			--line-outer: #b9c1d3;
+			/* 2px outer frame (slightly brighter than group) */
+			--num: #d6dbe6;
+			/* filled numbers */
+			--num-empty: #7b8498;
+			/* empty placeholders */
+		}
+		* {
+			box-sizing: border-box;
+		}
+		html,
+		body {
+			height: 100%;
+		}
+		body {
+			margin: 0;
+			background: var(--bg);
+			color: var(--text);
+			font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
+		}
+		.app {
+			max-width: 1100px;
+			margin: 24px auto;
+			padding: 0 16px;
+			display: grid;
+			gap: 18px;
+			grid-template-columns: 1.1fr 1fr;
+		}
+		@media (max-width: 980px) {
+			.app {
+				grid-template-columns: 1fr;
+			}
+		}
+		.card {
+			background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
+			border: 1px solid #1d2740;
+		}
+		.app__header {
+			grid-column: 1/-1;
+			padding: 20px;
+		}
+		.app__header h1 {
+			margin: 0 0 6px;
+			font-weight: 800;
+			font-size: clamp(22px, 2.4vw, 30px);
+		}
+		.app__header p {
+			margin: 6px 0 0;
+			color: var(--muted);
+		}
+		code {
+			background: #0f1422;
+			padding: 2px 6px;
+			border-radius: 4px;
+			color: #c4ccda;
+		}
+		.input-panel {
+			padding: 16px;
+			display: grid;
+			gap: 12px;
+			align-content: start;
+		}
+		.input-panel__label {
+			margin: 6px 0;
+			font-weight: 600;
+		}
+		textarea,
+		input[type="text"] {
+			width: 100%;
+			color: var(--text);
+			background: #0f1524;
+			border: 1px solid #27324a;
+			padding: 10px 12px;
+			outline: none;
+			resize: vertical;
+			min-height: 110px;
+			font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+		}
+		input[type="text"] {
+			min-height: unset;
+		}
+		textarea:focus,
+		input[type="text"]:focus {
+			border-color: var(--accent);
+			box-shadow: 0 0 0 2px rgba(122, 162, 255, .18);
+		}
+		.is-invalid {
+			border-color: #ff6b6b !important;
+			box-shadow: 0 0 0 2px rgba(255, 107, 107, .18) !important;
+		}
+		.input-panel__extras {
+			display: grid;
+			gap: 12px;
+			grid-template-columns: 1fr 1fr;
+		}
+		@media (max-width: 640px) {
+			.input-panel__extras {
+				grid-template-columns: 1fr;
+			}
+		}
+		.field__hint {
+			margin: 6px 2px 0;
+			color: var(--muted);
+			font-size: .9rem;
+		}
+		.input-panel__hint {
+			margin: 0;
+			color: var(--muted);
+			padding: 0 6px 8px;
+		}
+		.input-panel__controls {
+			display: flex;
+			gap: 10px;
+			flex-wrap: wrap;
+			padding-top: 4px;
+			align-items: center;
+		}
+		button {
+			appearance: none;
+			border: 1px solid #27324a;
+			background: #151d32;
+			color: var(--text);
+			padding: 10px 14px;
+			font-weight: 700;
+			cursor: pointer;
+		}
+		button:hover {
+			filter: brightness(1.06);
+		}
+		button.secondary {
+			background: #101727;
+		}
+		.grid-panel {
+			padding: 16px;
+			display: grid;
+			gap: 12px;
+			align-content: start;
+		}
+		.grid-head {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			gap: 12px;
+			color: var(--muted);
+		}
+		.badge {
+			font-size: .9rem;
+			padding: 4px 8px;
+			border: 1px solid #27324a;
+			color: var(--muted);
+		}
+		/* --- Classic Sudoku board (no rounded corners, mid-contrast lines) --- */
+		.sudoku-grid {
+			display: grid;
+			grid-template-columns: repeat(9, 1fr);
+			width: 100%;
+			max-width: 560px;
+			aspect-ratio: 1/1;
+			background: var(--board-bg);
+			border: 2px solid var(--line-outer);
+		}
+		.sudoku-cell {
+			display: grid;
+			place-items: center;
+			font-weight: 600;
+			font-size: clamp(16px, 2.2vw, 22px);
+			border: 1px solid var(--line-thin);
+			min-height: 48px;
+			user-select: none;
+			color: var(--num);
+		}
+		.sudoku-cell--empty {
+			color: var(--num-empty);
+		}
+		.sudoku-cell--conflict {
+			background: rgba(220, 38, 38, .16);
+			border-color: #dc2626 !important;
+			color: #ffd7d7;
+		}
+		/* 3×3 separators */
+		.border-right-group {
+			border-right: 2px solid var(--line-thick) !important;
+		}
+		.border-bottom-group {
+			border-bottom: 2px solid var(--line-thick) !important;
+		}
+		/* Outer edges */
+		.border-left-strong {
+			border-left: 2px solid var(--line-outer) !important;
+		}
+		.border-right-strong {
+			border-right: 2px solid var(--line-outer) !important;
+		}
+		.border-top-strong {
+			border-top: 2px solid var(--line-outer) !important;
+		}
+		.border-bottom-strong {
+			border-bottom: 2px solid var(--line-outer) !important;
+		}
+		/* Toast / status */
+		.status-wrap {
+			position: fixed;
+			right: 18px;
+			bottom: 18px;
+			z-index: 999;
+			display: grid;
+			gap: 10px;
+			width: min(420px, calc(100vw - 36px));
+		}
+		.status-message {
+			padding: 12px 14px;
+			border: 1px solid #27324a;
+			background: #0f1526;
+			color: var(--text);
+		}
+		.status-message[data-tone="success"] {
+			border-color: #1f3227;
+			background: #0f1a15;
+		}
+		.status-message[data-tone="warning"] {
+			border-color: #4b3a13;
+			background: #17140e;
+		}
+		.status-message[data-tone="error"] {
+			border-color: #4a1717;
+			background: #160f0f;
+		}
+		.status-message[data-tone="info"] {
+			border-color: #27324a;
+			background: #0f1526;
+		}
+		.kbd {
+			font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+			background: #10162a;
+			border: 1px solid #27324a;
+			padding: 3px 6px;
+			border-radius: 4px;
+			color: #c4ccda;
+		}
+		.sr-only {
+			position: absolute;
+			width: 1px;
+			height: 1px;
+			padding: 0;
+			margin: -1px;
+			overflow: hidden;
+			clip: rect(0, 0, 0, 0);
+			border: 0;
+		}
+	</style>
+</head>
+<body>
+	<main class="app">
+		<header class="app__header card">
+			<h1>Sudoku Visualizer</h1>
 			<p>
+				Paste <strong>81 values</strong> separated by commas, spaces, or newlines. Use <code>.</code>,
+				<code>_</code>, or <code>0</code> for empty cells. Multi-digit entries (e.g. <code>10</code>) are
+				supported.
 			</p>
+		</header>
+		<section class="input-panel card" aria-label="Sudoku input">
+			<form id="sudoku-form">
+				<label class="input-panel__label" for="grid-input">Grid values</label>
+				<textarea id="grid-input" name="grid-input" rows="6"
+					placeholder="Example: 5,3,.,.,7,.,.,.,.; 6,.,.,1,9,5,.,.,." spellcheck="false"></textarea>
+				<div class="input-panel__extras">
+					<div class="field">
+						<label class="input-panel__label" for="separator-input">Separator (optional)</label>
+						<input id="separator-input" name="separator-input" type="text"
+							placeholder="Defaults to comma, space or newline (leave empty)" maxlength="10" />
+						<p class="field__hint">Use <code>\n</code> for newline or <code>\s</code> / <code>space</code>
+							for whitespace.</p>
+					</div>
+					<div class="field">
+						<label class="input-panel__label" for="empty-input">Empty token(s) (optional)</label>
+						<input id="empty-input" name="empty-input" type="text"
+							placeholder="e.g. . , _ , 0 or blank (comma/space separated)" maxlength="50" />
+						<p class="field__hint">Additional tokens to treat as empty. Defaults include <code>.</code>,
+							<code>_</code>, <code>0</code>, <code>x</code>.</p>
+					</div>
+				</div>
+				<div class="input-panel__controls">
+					<button type="submit" title="Visualize (Ctrl/⌘ + Enter)">Visualize</button>
+					<button type="button" id="clear-button" class="secondary">Clear</button>
+					<button type="button" id="sample-button" class="secondary">Load sample</button>
+					<span class="badge" id="count-badge" aria-live="polite">—</span>
+				</div>
+			</form>
+			<p class="input-panel__hint">The first 81 recognizable values will be used. Extra values are ignored so you
+				can paste entire rows at once.</p>
+		</section>
+		<section class="grid-panel card" aria-live="polite" aria-label="Rendered Sudoku grid">
+			<div class="grid-head">
+				<strong>Grid</strong>
+			</div>
+			<div id="sudoku-grid" class="sudoku-grid"></div>
+		</section>
+	</main>
+	<div class="status-wrap">
+		<div id="status-message" class="status-message" role="status" aria-live="polite"></div>
+	</div>
+	<script>
+		(function () {
+			const form = document.getElementById("sudoku-form");
+			const input = document.getElementById("grid-input");
+			const separatorInput = document.getElementById("separator-input");
+			const emptyInput = document.getElementById("empty-input");
+			const grid = document.getElementById("sudoku-grid");
+			const status = document.getElementById("status-message");
+			const countBadge = document.getElementById("count-badge");
+			const clearButton = document.getElementById("clear-button");
+			const sampleButton = document.getElementById("sample-button");
+			const samplePuzzle =
+				"3, 10, 4, 8, 7, 6, 9, 2, 5,\n" +
+				"6, 7, 9, 2, 5, 3, 10, 4, 8,\n" +
+				"2, 8, 5, 9, 10, 4, 3, 6, 7,\n" +
+				"4, 2, 10, 5, 9, 8, 7, 3, 6,\n" +
+				"7, 9, 6, 3, 4, 10, 5, 8, 2,\n" +
+				"8, 5, 3, 7, 6, 2, 4, 10, 9,\n" +
+				"5, 6, 8, 4, 3, 7, 2, 9, 10,\n" +
+				"9, 4, 2, 10, 8, 5, 6, 7, 3,\n" +
+				"10, 3, 7, 6, 2, 9, 8, 5, 4";
+			// Live token counter and autosize
+			input.addEventListener("input", () => {
+				updateCount();
+				autosize(input);
+			});
+			function updateCount() {
+				const { values } = quickTokenize(input.value, separatorInput.value);
+				countBadge.textContent = values.length ? `${values.length} token${values.length === 1 ? "" : "s"}` : "—";
+			}
+			function autosize(el) {
+				el.style.height = "auto";
+				el.style.height = Math.min(el.scrollHeight, 400) + "px";
+			}
+			form.addEventListener("submit", (event) => {
+				event.preventDefault();
+				const raw = input.value;
+				const sep = separatorInput.value;
+				const emptySpec = emptyInput.value;
+				const { cells, error, warning } = parseInput(raw, sep, emptySpec);
+				input.classList.toggle("is-invalid", Boolean(error));
+				if (error) {
+					updateStatus(error, "error");
+					hideGrid();
+					return;
+				}
+				const conflictCount = renderGrid(cells);
+				const filledCount = cells.filter(Boolean).length;
+				const conflictNote = conflictCount ? ` • <strong>${conflictCount}</strong> conflict${conflictCount === 1 ? "" : "s"}` : "";
+				if (warning) {
+					updateStatus(`${warning} Showing ${filledCount} filled cell${filledCount === 1 ? "" : "s"}.${conflictNote}`, conflictCount ? "warning" : "warning");
+				} else {
+					updateStatus(`Showing ${filledCount} filled cell${filledCount === 1 ? "" : "s"}.${conflictNote}`, conflictCount ? "error" : "success");
+				}
+			});
+			// Keyboard shortcuts
+			document.addEventListener("keydown", (e) => {
+				const isMetaEnter = (e.ctrlKey || e.metaKey) && e.key === "Enter";
+				if (isMetaEnter) {
+					form.requestSubmit();
+				} else if (e.key === "Escape") {
+					clearButton.click();
+				}
+			});
+			clearButton.addEventListener("click", () => {
+				input.value = "";
+				input.classList.remove("is-invalid");
+				hideGrid();
+				updateStatus("Cleared input. Paste a puzzle to get started.", "info");
+				updateCount();
+				input.focus();
+			});
+			sampleButton.addEventListener("click", () => {
+				input.value = samplePuzzle;
+				updateStatus("Loaded sample puzzle. Press Visualize or <span class=\"kbd\">Ctrl</span>/<span class=\"kbd\">⌘</span> + <span class=\"kbd\">Enter</span>.", "info");
+				updateCount();
+				input.focus();
+			});
+			function quickTokenize(raw, separator) {
+				let values = [];
+				if (separator && separator.trim()) {
+					let pattern;
+					if (separator === "\\n") pattern = /\n/; else if (separator === "\\s" || separator.toLowerCase() === "space") pattern = /\s+/; else pattern = new RegExp(escapeRegExp(separator));
+					values = raw.split(pattern).map((s) => (s || "").trim()).filter(Boolean);
+				} else {
+					values = (raw.match(/([+-]?\d+|[A-Za-z]+|\.|_)/g) || []).filter(Boolean);
+					if (values.length === 0) {
+						const compact = raw.replace(/\s+/g, "");
+						if (/^[0-9._]+$/.test(compact)) values = compact.split("");
+					}
+				}
+				return { values };
+			}
+			function parseInput(raw, separator, emptySpec) {
+				const result = { cells: [], error: null, warning: null };
+				if (!raw || !raw.trim()) {
+					result.error = "Please paste or type 81 values first.";
+					return result;
+				}
+				let values = quickTokenize(raw, separator).values;
+				if (values.length === 0) {
+					result.error = "No recognizable numbers were found.";
+					return result;
+				}
+				if (values.length < 81) {
+					result.error = `Need 81 values, found ${values.length}.`;
+					return result;
+				}
+				if (values.length > 81) {
+					result.warning = `Found ${values.length} values; using the first 81.`;
+					values = values.slice(0, 81);
+				}
+				const defaults = [".", "_", "0", "x", "blank", "empty"];
+				const emptySet = new Set(defaults.map((s) => s.toLowerCase()));
+				if (emptySpec && emptySpec.trim()) {
+					const extras = emptySpec.split(/[\s,]+/).map((s) => s.trim().toLowerCase()).filter(Boolean);
+					extras.forEach((t) => emptySet.add(t));
+				}
+				result.cells = values.map((t) => normalizeToken(t, emptySet));
+				return result;
+			}
+			function escapeRegExp(string) {
+				return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+			}
+			function normalizeToken(token, emptySet) {
+				const trimmed = (token || "").toString().trim();
+				if (!trimmed) return "";
+				const lowered = trimmed.toLowerCase();
+				if (emptySet && emptySet.has(lowered)) return "";
+				if (/^[A-Za-z]+$/.test(trimmed)) return "";
+				if (/^[+-]?\d+$/.test(trimmed)) {
+					const numeric = Number.parseInt(trimmed, 10);
+					if (!Number.isFinite(numeric) || numeric <= 0) return "";
+					return String(numeric);
+				}
+				return trimmed;
+			}
+			function renderGrid(cells) {
+				grid.innerHTML = "";
+				if (!cells || cells.length !== 81) { hideGrid(); return 0; }
+				const conflicts = findConflicts(cells);
+				cells.forEach((value, index) => {
+					const cell = document.createElement("div");
+					cell.className = "sudoku-cell";
+					const row = Math.floor(index / 9);
+					const col = index % 9;
+					if (!value) cell.classList.add("sudoku-cell--empty");
+					if (conflicts.has(index)) cell.classList.add("sudoku-cell--conflict");
+					if (col === 0) cell.classList.add("border-left-strong");
+					if (col === 8) cell.classList.add("border-right-strong");
+					if (col === 2 || col === 5) cell.classList.add("border-right-group");
+					if (row === 0) cell.classList.add("border-top-strong");
+					if (row === 8) cell.classList.add("border-bottom-strong");
+					if (row === 2 || row === 5) cell.classList.add("border-bottom-group");
+					cell.textContent = value;
+					grid.appendChild(cell);
+				});
+				grid.dataset.ready = "true";
+				return conflicts.size;
+			}
+			function findConflicts(cells) {
+				const bad = new Set();
+				const rows = Array.from({ length: 9 }, () => new Map());
+				const cols = Array.from({ length: 9 }, () => new Map());
+				const boxes = Array.from({ length: 9 }, () => new Map());
+				for (let i = 0; i < 81; i++) {
+					const v = cells[i];
+					if (!v) continue; // ignore empties
+					const r = Math.floor(i / 9);
+					const c = i % 9;
+					const b = Math.floor(r / 3) * 3 + Math.floor(c / 3);
+					if (!rows[r].has(v)) rows[r].set(v, []);
+					if (!cols[c].has(v)) cols[c].set(v, []);
+					if (!boxes[b].has(v)) boxes[b].set(v, []);
+					rows[r].get(v).push(i);
+					cols[c].get(v).push(i);
+					boxes[b].get(v).push(i);
+				}
+				const markDupes = (maps) => {
+					for (const m of maps) {
+						for (const [_val, idxs] of m) {
+							if (idxs.length > 1) idxs.forEach((ix) => bad.add(ix));
+						}
+					}
+				};
+				markDupes(rows);
+				markDupes(cols);
+				markDupes(boxes);
+				return bad;
+			}
+			function hideGrid() {
+				// Keep board visible; just clear contents if needed
+				if (!grid.children.length) {
+					renderGrid(new Array(81).fill(""));
+					return;
+				}
+				[...grid.children].forEach((c) => (c.textContent = ""));
+				grid.dataset.ready = "";
+			}
+			function updateStatus(message, tone) {
+				status.innerHTML = message; // allow small inline markup for kbd hints
+				status.dataset.tone = tone || "";
+			}
+			// Initial UI state
+			updateStatus("Paste values and click <strong>Visualize</strong> to see the grid.", "info");
+			renderGrid(new Array(81).fill("")); // show board immediately
+			updateCount();
+			(function autosizeOnLoad() { const el = input; el.style.height = "auto"; el.style.height = Math.min(el.scrollHeight, 400) + "px"; })();
+			input.focus();
+		})();
+	</script>
+</body>
+</html>

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}