Compare commits
1 Commits
b96684f2ea
...
starter/no
| Author | SHA1 | Date | |
|---|---|---|---|
| 1a203e5a26 |
87
README.md
87
README.md
@@ -0,0 +1,87 @@
|
||||
# Project Template
|
||||
|
||||
This repository is a starter template.
|
||||
Replace this README with documentation specific to your project once you begin development.
|
||||
|
||||
The notes below apply only if you choose to build a Node.js project using this template.
|
||||
|
||||
---
|
||||
|
||||
## If your project will use Node.js
|
||||
|
||||
Use Node 22 or newer for development.
|
||||
|
||||
Check your version:
|
||||
|
||||
```
|
||||
node --version
|
||||
```
|
||||
|
||||
If your version is older than 22, update using nvm:
|
||||
|
||||
```
|
||||
nvm install --lts
|
||||
```
|
||||
|
||||
(Optional) Make the new version your default:
|
||||
|
||||
```
|
||||
nvm alias default <version>
|
||||
```
|
||||
|
||||
After running `yarn init`, you may add a minimum Node version requirement to your `package.json`:
|
||||
|
||||
```json
|
||||
"engines": {
|
||||
"node": ">=22"
|
||||
}
|
||||
```
|
||||
|
||||
This helps ensure you do not accidentally use an outdated Node version.
|
||||
|
||||
---
|
||||
|
||||
## If your project will use Yarn (Berry)
|
||||
|
||||
This template assumes modern Yarn (Yarn 4+), managed by Corepack.
|
||||
|
||||
Enable Corepack:
|
||||
|
||||
```
|
||||
corepack enable
|
||||
```
|
||||
|
||||
Update Yarn to the latest stable version:
|
||||
|
||||
```
|
||||
corepack prepare yarn@stable --activate
|
||||
```
|
||||
|
||||
Install dependencies:
|
||||
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
If you want Yarn to error (instead of warn) when the Node version does not satisfy the `engines` field, add this to `.yarnrc.yml`:
|
||||
|
||||
```yaml
|
||||
enableStrictEngineChecks: true
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## If your project will use containers
|
||||
|
||||
If you plan to build or deploy using Docker, choose a base image that matches your development environment.
|
||||
For Node.js projects, a common choice is:
|
||||
|
||||
```
|
||||
FROM node:24
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Replace this README
|
||||
|
||||
Once you know what your project will be (Node, C++, Python, etc.), replace this file with documentation specific to your build, run, and deployment steps.
|
||||
|
||||
40
index.html
40
index.html
@@ -1,40 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Grid 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>
|
||||
</head>
|
||||
<body>
|
||||
<fieldset>
|
||||
<legend title="asdf">Grid</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>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
269
main.js
269
main.js
@@ -1,269 +0,0 @@
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user