maj/base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: maj:starter/react
Branches Tags
maj:main maj:starter/node maj:starter/jquery maj:starter/react maj:demo/2048
..
compare: maj:b96684f2ea69160a3effb80ea4a117268839e7e7
Branches Tags
maj:starter/node maj:starter/jquery maj:starter/react maj:demo/2048 maj:main

2 Commits
starter/re ... b96684f2ea

Author SHA1 Message Date
Tom Hicks
b96684f2ea Adds check to make sure we do not add a new tile if you ca not slide. 2024-07-29 22:35:52 -07:00
Tom Hicks
3294002c80 Adds working sliding. 2024-07-29 22:32:58 -07:00
7 changed files with 298 additions and 76 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1 +0,0 @@
node_modules

39
base.css
View File

@@ -1,39 +0,0 @@
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;
}

46
index.html
View File

@@ -1,28 +1,40 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>My Demo</title> <title>Grid Demo</title>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com"> <style type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> table {
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap" rel="stylesheet"> border: 1px solid black;
<link type="text/css" rel="stylesheet" href="reset.css" /> }
<link type="text/css" rel="stylesheet" href="base.css" /> tr {
<link type="text/css" rel="stylesheet" href="styles.css" /> border: 1px solid black;
}
td {
border: 1px solid black;
}
td.hidden {
background-color: #f88;
}
td.visible {
background-color: #8f8;
}
</style>
</head> </head>
<body> <body>
<div class="vertical-stack"> <fieldset>
<fieldset id="demo" class="box"> <legend title="asdf">Grid</legend>
<legend title="asdf">My Demo</legend> <div id="output"></div>
<div id="output"></div> </fieldset>
</fieldset>
<section class="box"> <section>
<button id="btnGo" class="action-button">Go</button> <button id="btnLeft" onclick="btnLeft_onClick()">Left</button>
</section> <button id="btnUp" onclick="btnUp_onClick()">Up</button>
</div> <button id="btnDown" onclick="btnDown_onClick()">Down</button>
<footer class="footer">copyright &copy; 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> <button id="btnRight" onclick="btnRight_onClick()">Right</button>
</section>
<button onclick="btnGo_onClick();" id="btnGo">Go</button>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

272
main.js
View File

@@ -1,3 +1,269 @@
(()=>{ const globals = {
console.log('Ready'); 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;
}

8
package.json
View File

@@ -1,8 +0,0 @@
{
"name": "demo",
"version": "1.0.0",
"main": "index.js",
"author": "Tom Hicks <headhunter3@gmail.com>",
"license": "GLPv2",
"private": true
}

8
reset.css
View File

@@ -1,8 +0,0 @@
body {
margin: 0;
padding: 0;
}
fieldset {
margin: 0;
}

0
styles.css
View File