Skip to content

Commit

Permalink
considerable rework of cipher and inclusion of encoding dictionary
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordyarms
jordyarms committed Dec 30, 2024
1 parent 2a01a87 commit eaa3d1f
Show file tree
Hide file tree
Showing 6 changed files with 539 additions and 52 deletions.
186 changes: 186 additions & 0 deletions docs/dictionary copy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encoding Table with Visualization</title>
<link rel="stylesheet" href="styles.css">
<style>
table {
border-collapse: collapse;
margin: 20px 0;
font-family: monospace, sans-serif;
font-size: 16px;
text-align: center;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
th {
background-color: #f0f0f0;
}
td:hover {
background-color: #e0f7fa;
cursor: pointer;
}
.output {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.patterns-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.pattern-card {
border: 1px solid #ccc;
padding: 10px;
width: 150px;
text-align: center;
}
.pattern-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
.pattern-cell {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
}
.x {
background-color: #007BFF;
color: white;
}
.o {
background-color: #FF4136;
color: white;
}
</style>
</head>
<body>
<h1>Encoding Table</h1>

<!-- Main Encoding Table -->
<table>
<thead>
<tr>
<th>Direction</th>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Rows will be dynamically populated -->
</tbody>
</table>


<!-- Output Section -->
<div class="output" id="output">Click a value to see its encoding.</div>

<!-- Patterns Visualization -->
<h2>Patterns Related to Encoding</h2>
<div class="patterns-container" id="patternsContainer">
<!-- Patterns will be dynamically populated -->
</div>

<script>
const radialIndex = {
"NW": ["Z", "X", "C", "V", "B", "N", "M", "<", ">", "?"],
"N": ["A", "S", "D", "F", "G", "H", "J", "K", "L", ":"],
"NE": ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
"E": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
"SE": ["z", "x", "c", "v", "b", "n", "m", ",", ".", "/"],
"S": ["a", "s", "d", "f", "g", "h", "j", "k", "l", ";"],
"SW": ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
"W": ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")"],
"ZN": ["", "", "", ":", "~", "_", "+", "{", "}", "|", "\""],
"ND": ["", "", "", "`", "-", "=", "[", "]", "\\", "'"]
};

const tableBody = document.getElementById("table-body");
const output = document.getElementById("output");
const patternsContainer = document.getElementById("patternsContainer");

// Populate the main encoding table dynamically
for (const [direction, values] of Object.entries(radialIndex)) {
const row = document.createElement("tr");

// Add direction as the first column
const directionCell = document.createElement("td");
directionCell.textContent = direction;
row.appendChild(directionCell);

// Add index values as the remaining columns
values.forEach((value, index) => {
const cell = document.createElement("td");
cell.textContent = value;
cell.dataset.direction = direction; // Store direction for reference
cell.dataset.index = index; // Store index for reference
cell.onclick = () => {
const encoding = `${cell.dataset.direction}[${cell.dataset.index}]`;
output.textContent = `The encoding for "${value}" is: ${encoding}`;
displayPatterns(encoding);
};
row.appendChild(cell);
});

tableBody.appendChild(row);
}

// Fetch and display patterns dynamically
async function fetchPatterns() {
const response = await fetch("tictactoecypher.json");
return await response.json();
}

async function displayPatterns(encoding) {
const patterns = await fetchPatterns();
patternsContainer.innerHTML = ""; // Clear existing patterns

// Filter and render patterns related to the encoding
patterns.forEach((patternData) => {
if (patternData.CD && encoding.startsWith(patternData.CD)) {
const card = document.createElement("div");
card.classList.add("pattern-card");

const grid = document.createElement("div");
grid.classList.add("pattern-grid");

patternData.pattern.forEach((row) => {
row.forEach((cell) => {
const cellDiv = document.createElement("div");
cellDiv.classList.add("pattern-cell", cell === 1 ? "x" : "o");
cellDiv.textContent = cell === 1 ? "X" : "O";
grid.appendChild(cellDiv);
});
});

const alias = document.createElement("p");
alias.textContent = `Alias: ${patternData.alias}`;

card.appendChild(grid);
card.appendChild(alias);
patternsContainer.appendChild(card);
}
});
}
</script>
</body>
</html>
113 changes: 113 additions & 0 deletions docs/dictionary.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TTT Cipher Encoding Dictionary</title>
<link rel="stylesheet" href="styles.css">
<style>
table {
border-collapse: collapse;
margin: 20px 0;
font-family: monospace, sans-serif;
font-size: 16px;
text-align: center;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
}
th {
background-color: #f0f0f0;
}
td:hover {
background-color: #e0f7fa;
cursor: pointer;
}
.output {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}

.containergrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
max-width: 1080px;
margin:1rem auto;
}
</style>
</head>
<body>
<h1>TTT Cipher Encoding Dictionary</h1>
<p>This is an example supplemental encoding dictionary to support character encoding for the TTT cipher.</p>
<p><a href="/">Return to Home</a></p>

<div class="containergrid">
<div>
<!-- Main Encoding Table -->
<h2>Encoding Table</h2>
<table>
<thead>
<tr>
<th>Direction</th>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody id="table-body">
<!-- Rows will be dynamically populated -->
</tbody>
</table>

<!-- Special Functionality Table -->
<h3>Special Characters</h3>
<table>
<thead>
<tr>
<th>Direction</th>
<th>0</th>
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr>
<td>ZN[0-2]</td>
<td>\ "Space"</td>
<td>\t "Tab"</td>
<td>\n "New-Line"</td>
</tr>
<tr>
<td>ND[0-2][n]</td>
<td>Transmission Control<br> Index[n]</td>
<td>Data Structure<br> Index[n]</td>
<td>Misc Index[n]</td>
</tr>
</tbody>
</table>
<p>Transmission controls, data structure, and miscellaneous encodings are not currently defined.</p>
</div>

<!-- Patterns Visualization -->
<div>
<h2>Related Patterns</h2>
<p id="output">Click a value to see its encoding and related patterns.</p>
<div class="patterns-grid" id="patternsContainer" ><!-- Patterns will be dynamically populated --></div>
</div>
</div>
<hr/>
<p>See <a href="https://github.com/jordyarms/tic-tac-toe-cypher">https://github.com/jordyarms/tic-tac-toe-cypher</a></p>
<script src="script.js" defer></script>
<script src="dictionary.js" defer></script>
</body>
</html>
Loading

0 comments on commit eaa3d1f

Please sign in to comment.