Compare commits
2 Commits
b96684f2ea
...
starter/jq
| Author | SHA1 | Date | |
|---|---|---|---|
| 0328563e1d | |||
| d9781431c6 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -0,0 +1 @@
|
||||
node_modules
|
||||
|
||||
39
base.css
Normal file
39
base.css
Normal file
@@ -0,0 +1,39 @@
|
||||
body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.box {
|
||||
border: 4px solid #28e;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.vertical-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.vertical-stack > * {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.vertical-stack > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
border: 0.5px solid #558;
|
||||
background: hsl(228, 100%, 90%);
|
||||
background: linear-gradient(150deg, hsl(228, 100%, 95%) 0%, hsl(228, 100%, 80%) 100%);
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
font-family: "Dosis", sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
47
index.html
47
index.html
@@ -1,40 +1,29 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Grid Demo</title>
|
||||
<title>My Demo</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
table {
|
||||
border: 1px solid black;
|
||||
}
|
||||
tr {
|
||||
border: 1px solid black;
|
||||
}
|
||||
td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
td.hidden {
|
||||
background-color: #f88;
|
||||
}
|
||||
td.visible {
|
||||
background-color: #8f8;
|
||||
}
|
||||
</style>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap" rel="stylesheet">
|
||||
<link type="text/css" rel="stylesheet" href="reset.css" />
|
||||
<link type="text/css" rel="stylesheet" href="base.css" />
|
||||
<link type="text/css" rel="stylesheet" href="styles.css" />
|
||||
<script src="node_modules/jquery/dist/jquery.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<fieldset>
|
||||
<legend title="asdf">Grid</legend>
|
||||
<div id="output"></div>
|
||||
</fieldset>
|
||||
<div class="vertical-stack">
|
||||
<fieldset id="demo" class="box">
|
||||
<legend title="asdf">My Demo</legend>
|
||||
<div id="output"></div>
|
||||
</fieldset>
|
||||
|
||||
<section>
|
||||
<button id="btnLeft" onclick="btnLeft_onClick()">Left</button>
|
||||
<button id="btnUp" onclick="btnUp_onClick()">Up</button>
|
||||
<button id="btnDown" onclick="btnDown_onClick()">Down</button>
|
||||
<button id="btnRight" onclick="btnRight_onClick()">Right</button>
|
||||
</section>
|
||||
<button onclick="btnGo_onClick();" id="btnGo">Go</button>
|
||||
<section class="box">
|
||||
<button id="btnGo" class="action-button">Go</button>
|
||||
</section>
|
||||
</div>
|
||||
<footer class="footer">copyright © 2024 <a href="https://sfcoder.me">Tom Hicks</a> licensed under <a href="https://opensource.org/license/gpl-2-0">GPL v2.0 or later</a></footer>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
274
main.js
274
main.js
@@ -1,269 +1,5 @@
|
||||
const globals = {
|
||||
grid: null,
|
||||
tiles: [],
|
||||
};
|
||||
|
||||
const btnGo_onClick = () => {
|
||||
globals.grid = makeGrid(4, 4, {value: 0, visible: false});
|
||||
addRandomTile();
|
||||
redraw(globals.grid);
|
||||
// drawGrid(globals.grid, document.getElementById('output'));
|
||||
// alert("Go");
|
||||
}
|
||||
|
||||
const btnUp_onClick = () => {
|
||||
const grid = globals.grid;
|
||||
if (canSlideUp(grid)) {
|
||||
slideUp(grid);
|
||||
addRandomTile();
|
||||
redraw(grid)
|
||||
} else {
|
||||
alert('Unable to slide Up.');
|
||||
}
|
||||
// alert('Up');
|
||||
}
|
||||
|
||||
const btnDown_onClick = () => {
|
||||
const grid = globals.grid;
|
||||
if (canSlideDown(grid)) {
|
||||
slideDown(grid);
|
||||
addRandomTile();
|
||||
redraw(grid)
|
||||
} else {
|
||||
alert('Unable to slide Down.');
|
||||
}
|
||||
// alert('Down');
|
||||
}
|
||||
|
||||
const btnLeft_onClick = () => {
|
||||
const grid = globals.grid;
|
||||
if (canSlideLeft(grid)) {
|
||||
slideLeft(grid);
|
||||
addRandomTile();
|
||||
redraw(grid)
|
||||
} else {
|
||||
alert('Unable to slide Left.');
|
||||
}
|
||||
// alert('Left');
|
||||
}
|
||||
|
||||
const btnRight_onClick = () => {
|
||||
const grid = globals.grid;
|
||||
if (canSlideRight(grid)) {
|
||||
slideRight(grid);
|
||||
addRandomTile();
|
||||
redraw(grid)
|
||||
} else {
|
||||
alert('Unable to slide Right.');
|
||||
}
|
||||
// alert('Right');
|
||||
}
|
||||
|
||||
const drawGrid = (grid, element) => {
|
||||
// grid is our grid
|
||||
// element is our div
|
||||
let text = "<table cellspacing=\"0\">\n";
|
||||
for (const row of grid.rows) {
|
||||
text += " <tr>\n";
|
||||
for (const tile of row) {
|
||||
text += " <td title=\"(" + tile.originalLocation.row + ", " + tile.originalLocation.column + ")\"class=\"" + (tile.visible ? "visible " : "hidden ") + "\">" + tile.value + "</td>\n";
|
||||
}
|
||||
text += " </tr>\n";
|
||||
}
|
||||
text += "</table>";
|
||||
element.innerHTML = text;
|
||||
}
|
||||
|
||||
const makeGrid = (numRows, numColumns, initialValue) => {
|
||||
const rows = [];
|
||||
for (rowIndex = 0; rowIndex < numRows; rowIndex++) {
|
||||
const row = [];
|
||||
for (columnIndex = 0; columnIndex < numColumns; columnIndex++) {
|
||||
position = {row: rowIndex, column: columnIndex};
|
||||
const tile = makeTile(initialValue.value, initialValue.visible, rowIndex, columnIndex);
|
||||
globals.tiles.push(tile);
|
||||
row.push(tile);
|
||||
}
|
||||
rows.push(row);
|
||||
}
|
||||
const grid = {
|
||||
rows,
|
||||
numRows,
|
||||
numColumns,
|
||||
getTile: (row, column) => {
|
||||
return rows[row][column];
|
||||
},
|
||||
setTile: (row, column, tile) => {
|
||||
rows[row][column] = tile;
|
||||
},
|
||||
swapTiles: (fromRow, fromColumn, toRow, toColumn) => {
|
||||
fromTile = grid.getTile(fromRow, fromColumn);
|
||||
toTile = grid.getTile(toRow, toColumn);
|
||||
// maybe set previous locations on the tiles
|
||||
grid.setTile(fromRow, fromColumn, toTile);
|
||||
grid.setTile(toRow, toColumn, fromTile);
|
||||
},
|
||||
};
|
||||
return grid;
|
||||
}
|
||||
|
||||
const makeTile = (value, visible, row, column) => {
|
||||
return {
|
||||
value,
|
||||
visible,
|
||||
originalLocation: {
|
||||
row,
|
||||
column,
|
||||
},
|
||||
equals: (other) => {
|
||||
return this.value == other.value
|
||||
&& this.visible == other.visible
|
||||
&& this.originalLocation.row == other.originalLocation.row
|
||||
&& this.originalLocation.column == other.originalLocation.column;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const addRandomTile = () => {
|
||||
const hiddenTiles = globals.tiles.filter(tile => !tile.visible);
|
||||
if (hiddenTiles.length <=0) return;
|
||||
const index = Math.floor(Math.random() * hiddenTiles.length);
|
||||
const tile = hiddenTiles[index];
|
||||
tile.value = 1;
|
||||
tile.visible = true;
|
||||
}
|
||||
|
||||
const redraw = (grid) => {
|
||||
const element = document.getElementById('output');
|
||||
drawGrid(grid, element);
|
||||
}
|
||||
|
||||
const slideUp = (grid) => {
|
||||
for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
|
||||
lastIndex = -1;
|
||||
for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
if (tile.visible) {
|
||||
lastIndex++;
|
||||
if (lastIndex != rowIndex) {
|
||||
grid.swapTiles(rowIndex, columnIndex, lastIndex, columnIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const slideLeft = (grid) => {
|
||||
for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
|
||||
lastIndex = -1;
|
||||
for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
if (tile.visible) {
|
||||
lastIndex++;
|
||||
if (lastIndex != columnIndex) {
|
||||
grid.swapTiles(rowIndex, columnIndex, rowIndex, lastIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const slideDown = (grid) => {
|
||||
for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
|
||||
lastIndex = grid.numRows;
|
||||
for (let rowIndex = grid.numRows - 1; rowIndex >= 0; rowIndex -= 1) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
if (tile.visible) {
|
||||
lastIndex--;
|
||||
if (lastIndex != rowIndex) {
|
||||
grid.swapTiles(rowIndex, columnIndex, lastIndex, columnIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const slideRight = (grid) => {
|
||||
for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
|
||||
lastIndex = grid.numColumns;
|
||||
for (let columnIndex = grid.numColumns - 1; columnIndex >= 0; columnIndex -= 1) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
if (tile.visible) {
|
||||
lastIndex--;
|
||||
if (lastIndex != columnIndex) {
|
||||
grid.swapTiles(rowIndex, columnIndex, rowIndex, lastIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const canSlideUp = (grid) => {
|
||||
canIDoIt = false;
|
||||
for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
|
||||
lastIndex = -1;
|
||||
for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
if (tile.visible) {
|
||||
lastIndex++;
|
||||
if (lastIndex != rowIndex) {
|
||||
canIDoIt = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return canIDoIt;
|
||||
}
|
||||
|
||||
const canSlideLeft = (grid) => {
|
||||
let canIDoIt = false;
|
||||
for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
|
||||
lastIndex = -1;
|
||||
for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
if (tile.visible) {
|
||||
lastIndex++;
|
||||
if (lastIndex != columnIndex) {
|
||||
canIDoIt = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return canIDoIt;
|
||||
}
|
||||
|
||||
const canSlideDown = (grid) => {
|
||||
let canIDoIt = false;
|
||||
for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
|
||||
lastIndex = grid.numRows;
|
||||
for (let rowIndex = grid.numRows - 1; rowIndex >= 0; rowIndex -= 1) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
if (tile.visible) {
|
||||
lastIndex--;
|
||||
if (lastIndex != rowIndex) {
|
||||
canIDoIt = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return canIDoIt;
|
||||
|
||||
}
|
||||
|
||||
const canSlideRight = (grid) => {
|
||||
let canIDoIt = false;
|
||||
for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
|
||||
lastIndex = grid.numColumns;
|
||||
for (let columnIndex = grid.numColumns - 1; columnIndex >= 0; columnIndex -= 1) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
if (tile.visible) {
|
||||
lastIndex--;
|
||||
if (lastIndex != columnIndex) {
|
||||
canIDoIt = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return canIDoIt;
|
||||
}
|
||||
|
||||
(()=>{
|
||||
jQuery(() => {
|
||||
console.log('Ready');
|
||||
})
|
||||
})();
|
||||
|
||||
11
package.json
Normal file
11
package.json
Normal file
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "demo",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"author": "Tom Hicks <headhunter3@gmail.com>",
|
||||
"license": "GLPv2",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"jquery": "^3.7.1"
|
||||
}
|
||||
}
|
||||
8
reset.css
Normal file
8
reset.css
Normal file
@@ -0,0 +1,8 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
}
|
||||
0
styles.css
Normal file
0
styles.css
Normal file
8
yarn.lock
Normal file
8
yarn.lock
Normal file
@@ -0,0 +1,8 @@
|
||||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
jquery@^3.7.1:
|
||||
version "3.7.1"
|
||||
resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
|
||||
integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
|
||||
Reference in New Issue
Block a user