diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/index.html | 31 | ||||
-rw-r--r-- | src/index.js | 64 | ||||
-rw-r--r-- | src/math/index.html | 29 | ||||
-rw-r--r-- | src/math/server.js | 13 | ||||
-rw-r--r-- | src/math/static/black-hole.js | 181 | ||||
-rw-r--r-- | src/math/static/card31.js | 8 | ||||
-rw-r--r-- | src/math/static/help.js | 21 | ||||
-rw-r--r-- | src/math/static/kings-corner.js | 357 | ||||
-rw-r--r-- | src/math/static/main.js | 149 | ||||
-rw-r--r-- | src/math/static/nim.js | 102 | ||||
-rw-r--r-- | src/math/static/solitaire.js | 8 | ||||
-rw-r--r-- | src/pinball/index.html | 120 | ||||
-rw-r--r-- | src/pinball/server.js | 11 | ||||
-rw-r--r-- | src/quadrowple/index.html | 27 | ||||
-rw-r--r-- | src/quadrowple/server.js | 172 | ||||
-rw-r--r-- | src/quadrowple/static/main.js | 107 | ||||
-rw-r--r-- | src/quadrowple/static/styles.css | 72 | ||||
-rw-r--r-- | src/server.js | 41 | ||||
-rw-r--r-- | src/snake/index.html | 83 | ||||
-rw-r--r-- | src/snake/server.js | 11 | ||||
-rw-r--r-- | src/stacker/index.html | 215 | ||||
-rw-r--r-- | src/stacker/server.js | 11 | ||||
-rw-r--r-- | src/ur/index.html | 27 | ||||
-rw-r--r-- | src/ur/server.js | 175 | ||||
-rw-r--r-- | src/ur/static/main.js | 130 | ||||
-rw-r--r-- | src/ur/static/styles.css | 72 |
26 files changed, 2237 insertions, 0 deletions
diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..21b2dd2 --- /dev/null +++ b/src/index.html @@ -0,0 +1,31 @@ +<!doctype html> +<html lang="en"> + +<head> + <title>Games</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> --> +</head> + +<body> + <div> + Arcade + <ul> + <li><a href="/pinball">Pinball (demo)</a></li> + <li><a href="/snake">Snake</a></li> + <li><a href="/stacker">Stacker</a></li> + <li><a href="/math">Math mini agmes</a></li> + <li><a href="https://seafarerscafe.itch.io/cosmic-cargo">Cosmic Cargo (itch.io)</a></li> + </ul> + </div> + <div> + Multiplayer + <ul> + <li><a href="/ur">Royal Game of Ur</a></li> + <li><a href="/quadrowple">Quadrowple</a></li> + </ul> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..647bf3e --- /dev/null +++ b/src/index.js @@ -0,0 +1,64 @@ +const server = require('./server'); +const Sequelize = require('sequelize'); +const fs = require('fs'); +const path = require('path'); +const jwt = require('jsonwebtoken'); + + +const config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json'))); + +const dbCreds = config.database; +const secret = config.jwt_secret; + +const jwtFunctions = { + sign: function (message) { + return jwt.sign({ value: message }, secret); + }, + verify: function (token) { + return jwt.verify(token, secret).value; + } +} + +const database = new Sequelize(dbCreds.database, undefined, undefined, { + logging(str) { + console.debug(`DB:${str}`); + }, + dialectOptions: { + charset: 'utf8mb4', + multipleStatements: true, + }, + storage: './database.sqlite', + dialect: 'sqlite', + pool: { + max: 5, + min: 0, + idle: 10000, + }, +}); + +database.authenticate().then(() => { + console.debug(`database connection successful: ${dbCreds.database}`); +}, (e) => console.log(e)); + +async function sync(alter, force, callback) { + await database.sync({ alter, force, logging: console.log }); +} + +function setUpModels() { + const models = { + } + return models; +} + +const models = setUpModels(); +sync(); + +server.setUpRoutes(models, jwtFunctions, database); +server.load("./ur/server", models, jwtFunctions, database) +server.load("./quadrowple/server", models, jwtFunctions, database) +server.load("./snake/server", models, jwtFunctions, database) +server.load("./stacker/server", models, jwtFunctions, database) +server.load("./pinball/server", models, jwtFunctions, database) +server.load("./math/server", models, jwtFunctions, database) +server.listen(config.port); + diff --git a/src/math/index.html b/src/math/index.html new file mode 100644 index 0000000..440e7ff --- /dev/null +++ b/src/math/index.html @@ -0,0 +1,29 @@ +<!doctype html> +<html lang="en"> + +<head> + <title>Math Games</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <style> + canvas { + /* transform-origin: top left; */ + /* transform: scale(4, 4); */ + position: absolute; + left: 0; + top: 0; + } + </style> +</head> + +<body style="padding:0; margin:0; overflow:hidden;"> + <canvas id="canvas"></canvas> + <script src="/math/static/help.js"></script> + <script src="/math/static/nim.js"></script> + <script src="/math/static/solitaire.js"></script> + <script src="/math/static/kings-corner.js"></script> + <script src="/math/static/black-hole.js"></script> + <script src="/math/static/main.js"></script> +</body> + +</html> diff --git a/src/math/server.js b/src/math/server.js new file mode 100644 index 0000000..e68a41b --- /dev/null +++ b/src/math/server.js @@ -0,0 +1,13 @@ +const path = require('path'); +const fs = require('fs'); +const express = require('express'); + +function setUpRoutes(server, models, jwtFunctions, database) { + server.get('/math', (req, res) => res.sendFile(__dirname + "/index.html")) + server.get('/math/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css")) + server.use('/math/static', express.static(__dirname + '/static')) +} + +module.exports = { + setUpRoutes +}; diff --git a/src/math/static/black-hole.js b/src/math/static/black-hole.js new file mode 100644 index 0000000..f6b7f8e --- /dev/null +++ b/src/math/static/black-hole.js @@ -0,0 +1,181 @@ +var black_hole = { + status: "", + state: -1, + rowOf: { + 0: 0, + 1: 0, + 2: 0, + 3: 0, + 4: 0, + 5: 0, + 6: 1, + 7: 1, + 8: 1, + 9: 1, + 10: 1, + 11: 2, + 12: 2, + 13: 2, + 14: 2, + 15: 3, + 16: 3, + 17: 3, + 18: 4, + 19: 4, + 20: 5, + }, + colOf: { + 0: 0, + 1: 1, + 2: 2, + 3: 3, + 4: 4, + 5: 5, + 6: 0, + 7: 1, + 8: 2, + 9: 3, + 10: 4, + 11: 0, + 12: 1, + 13: 2, + 14: 3, + 15: 0, + 16: 1, + 17: 2, + 18: 0, + 19: 1, + 20: 0, + }, + canPlay: function (index) { + return this.board[index] == undefined + }, + setup: function () { + this.board = []; + for(var i =0; i < 21; i++){ + this.board.push(undefined); + } + this.turn = 1 + }, + + play: function () { + + }, + other_play: function () { + var madePlay = false + while (!madePlay) { + // guess random + var index = Math.floor(Math.random() * 21) + if(this.canPlay(index)){ + black_hole.board[index] = { + "color": "blue", + "value": Math.ceil(black_hole.turn / 2) + } + black_hole.turn++ + madePlay = true + } + } + + }, +}; +black_hole.updateCallback = function () { + if(black_hole.turn == 21 && black_hole.state < 2) { + black_hole.state = 2 + } + + if (black_hole.state == -1){ // setup + black_hole.setup(); + black_hole.state = 0 + } else if (black_hole.state == 0) { // player turn + // nothing, wait for click + } else if (black_hole.state == 1) { // other turn + black_hole.other_play(); + black_hole.state = 0 + } else if (black_hole.state == 2) { // calculate end + score = {"blue": 0, "red": 0} + black_hole.board.forEach((spot, i) => { + if(spot == undefined){ + var row = black_hole.rowOf[i]; + var col = black_hole.colOf[i]; + black_hole.board.forEach((other_spot, j) => { + var row2 = black_hole.rowOf[j]; + var col2 = black_hole.colOf[j]; + if(other_spot != undefined && + ( + (row == row2-1 && 0 <= (col - col2) && (col - col2) <= 1) || + (row == row2 && Math.abs(col - col2) <= 1) || + (row == row2+1 && 0 <= (col2 - col) && (col2 - col) <= 1) + ) + ){ + score[other_spot.color] += other_spot.value + } + }) + } + }) + black_hole.score = score + if(score.red < score.blue){ + black_hole.winner = "red" + } else { + black_hole.winner = "blue" + } + black_hole.state = -1; + switchState(menu); + } +} +black_hole.drawCallback = function () { + if(black_hole.state < 0){ + return; + } + ctx.fillStyle = "#99b3ff"; + ctx.fillRect(0, 0, width, height); + + + ctx.lineWidth = 2; + black_hole.board.forEach((spot, i) => { + var row = black_hole.rowOf[i]; + var col = black_hole.colOf[i]; + if(spot == undefined){ + ctx.fillStyle = "black"; + ctx.strokeStyle = "black" + } else { + ctx.fillStyle = spot["color"]; + ctx.strokeStyle = spot["color"] + ctx.fillText(spot["value"], 100 + row * 100 + col * 50, 100 + col*88) + } + ctx.beginPath(); + ctx.arc(100 + row * 100 + col * 50, 100 + col*88, 50, 0, 2 * Math.PI); + ctx.stroke(); + }) + + if(black_hole.winner){ + font(32); + ctx.fillStyle = "black"; + ctx.fillText(black_hole.winner + " wins!", 550, 330) + ctx.fillText("red: " + black_hole.score.red, 550, 370) + ctx.fillText("blue: " + black_hole.score.blue, 550, 410) + } +} +black_hole.mouseDownCallback = function (e) { + if(black_hole.state == 3){ + return; + } + + black_hole.board.forEach((spot, i) => { + var row = black_hole.rowOf[i]; + var col = black_hole.colOf[i]; + var x = 100 + row * 100 + col * 50; + var y = 100 + col*88; + if(spot == undefined && Math.sqrt(Math.pow(x - e.x, 2) + Math.pow(y - e.y, 2)) < 50){ + console.log(i); + black_hole.board[i] = { + "color": "red", + "value": Math.ceil(black_hole.turn / 2) + } + black_hole.turn++; + black_hole.state = 1 + } + }) +} +black_hole.mouseUpCallback = function (e) { + +}
\ No newline at end of file diff --git a/src/math/static/card31.js b/src/math/static/card31.js new file mode 100644 index 0000000..c2b6172 --- /dev/null +++ b/src/math/static/card31.js @@ -0,0 +1,8 @@ +var solitaire = {}; +solitaire.updateCallback = function(){ + +} +solitaire.drawCallback = function(){ + ctx.fillStyle = "green"; + ctx.fillRect(0, 0, width, height); +}
\ No newline at end of file diff --git a/src/math/static/help.js b/src/math/static/help.js new file mode 100644 index 0000000..2dfab9f --- /dev/null +++ b/src/math/static/help.js @@ -0,0 +1,21 @@ +var help = { + +}; +help.updateCallback = function(){ + // nothing +} +help.drawCallback = function(){ + ctx.fillStyle = "#99b3ff"; + ctx.fillRect(0, 0, width, height); + + font(26) + ctx.fillStyle = "black" + ctx.fillText("Click on a game to play.", 10, 200) + ctx.fillText("After finishing your game, click to return.", 10, 230) +} +help.mouseDownCallback = function (e) { + switchState(menu); +} +help.mouseUpCallback = function(e){ + +}
\ No newline at end of file diff --git a/src/math/static/kings-corner.js b/src/math/static/kings-corner.js new file mode 100644 index 0000000..c182b56 --- /dev/null +++ b/src/math/static/kings-corner.js @@ -0,0 +1,357 @@ +var kings_corner = { + suit_color: { + "C": "black", + "S": "black", + "H": "red", + "D": "red" + }, + value_to_num: { + "A": 0, + "2": 1, + "3": 2, + "4": 3, + "5": 4, + "6": 5, + "7": 6, + "8": 7, + "9": 8, + "10": 9, + "J": 10, + "Q": 11, + "K": 12 + }, + selected: [], + selected_positions: [], + status: "", + state: -1, + shuffle: function (a) { + var j, x, i; + for (i = a.length - 1; i > 0; i--) { + j = Math.floor(Math.random() * (i + 1)); + x = a[i]; + a[i] = a[j]; + a[j] = x; + } + return a; + }, + canBePlayedOn: function (bottom, top, board_position) { + if (top == undefined) { + return false; + } + if (bottom == undefined) { + return top.value == "K" || board_position < 4; + } + if (this.suit_color[bottom.suit] != this.suit_color[top.suit]) { + return this.value_to_num[bottom.value] - this.value_to_num[top.value] == 1; + } else { + return false; + } + }, + findBoardPosition(cards) { + var board_position; + for (var index = 0; index < this.board.length; index++) { + if (this.board[index] == cards) { + board_position = index; + } + } + return board_position + }, + canPlayBoardHand: function (cards, hand) { + var bottom = cards[cards.length - 1]; + var board_position = this.findBoardPosition(cards); + return this.canBePlayedOn(bottom, hand, board_position) + }, + canPlay: function () { + if (this.selected_positions[0] == "board" + && this.selected_positions[1] == "hand") { + return this.canPlayBoardHand(this.selected[0], this.selected[1]) + } else if (this.selected_positions[1] == "board" + && this.selected_positions[0] == "hand") { + return this.canPlayBoardHand(this.selected[1], this.selected[0]) + } else if (this.selected_positions[0] == "board" + && this.selected_positions[1] == "board") { + + var cards1 = this.selected[1]; + var cards2 = this.selected[0]; + var top = cards1[0] + var bottom = cards2[cards2.length - 1] + var board_position = this.findBoardPosition(cards2); + if (this.canBePlayedOn(bottom, top, board_position)) { + return true; + } + top = cards2[0] + bottom = cards1[cards1.length - 1] + board_position = this.findBoardPosition(cards1); + if (this.canBePlayedOn(bottom, top, board_position)) { + return true; + } + } + return false; + }, + setup: function () { + this.deck = []; + Object.keys(this.value_to_num).forEach((value) => { + Object.keys(this.suit_color).forEach((suit) => { + kings_corner.deck.push({ suit: suit, value: value }); + }) + }) + this.shuffle(this.deck); + this.board = [[this.deck.pop()], [this.deck.pop()], + [this.deck.pop()], [this.deck.pop()], + [], [], [], []] + this.hand = [] + this.other_hand = [] + for (var i = 0; i < 7; i++) { + this.hand.push(this.deck.pop()); + this.other_hand.push(this.deck.pop()); + } + this.hand.push(this.deck.pop()); + }, + removeCard: function (arr, c) { + return arr.filter((card) => { + return !(card.value == c.value && card.suit == c.suit); + }) + }, + play: function () { + if (this.selected.length != 2) { + this.state = 1 + } else if (this.canPlay()) { + if (this.selected_positions[0] == "board" && this.selected_positions[1] == "hand") { + var cards = this.selected[0]; + var top = this.selected[1]; + cards.push(top); + this.hand = this.removeCard(this.hand, top) + } else if (this.selected_positions[1] == "board" && this.selected_positions[0] == "hand") { + var cards = this.selected[1]; + var top = this.selected[0]; + cards.push(top); + this.hand = this.removeCard(this.hand, top) + } else if (this.selected_positions[0] == "board" && this.selected_positions[1] == "board") { + var cards1 = this.selected[1]; + var cards2 = this.selected[0]; + var top = cards1[0] + var bottom = cards2[cards2.length - 1] + var board_position = this.findBoardPosition(cards2); + if (this.canBePlayedOn(bottom, top, board_position)) { + while (this.selected[1].length > 0) { + this.selected[0].push(this.selected[1].shift()); + } + return; + } + top = cards2[0] + bottom = cards1[cards1.length - 1] + board_position = this.findBoardPosition(cards1); + if (this.canBePlayedOn(bottom, top, board_position)) { + while (this.selected[0].length > 0) { + this.selected[1].push(this.selected[0].shift()); + } + return; + } + } + } else { + console.log("no play") + } + }, + other_play: function () { + var madePlay = true + var playedCards = []; + while (madePlay && this.other_hand.length > 0) { + madePlay = false; + for (var i = 0; i < this.other_hand.length; i++) { + let card = this.other_hand[i] + for (var index = 0; index < this.board.length; index++) { + var top = card; + var cards = this.board[index]; + var bottom = cards[cards.length - 1]; + if (this.canBePlayedOn(bottom, top, index)) { + cards.push(card); + this.other_hand = this.removeCard(this.other_hand, card) + playedCards.push(card); + console.log(madePlay) + madePlay = true + break; + } + + } + if (madePlay) { + break; + } + } + for (var index1 = 0; index1 < this.board.length; index1++) { + for (var index2 = 0; index2 < this.board.length; index2++) { + var cards1 = this.board[index1]; + var cards2 = this.board[index2]; + var top = cards1[0] + var bottom = cards2[cards2.length - 1] + var board_position = this.findBoardPosition(cards2); + if (index1 >= 4) { + continue + // dont move a king to the left + } + if (this.canBePlayedOn(bottom, top, board_position)) { + while (cards1.length > 0) { + cards2.push(cards1.shift()); + } + break; + } + } + } + } + + if (playedCards.length == 0) { + this.status = "They played nothing" + } else { + this.status = "They played " + for (var index = 0; index < playedCards.length - 1; index++) { + this.status += `${playedCards[index].value} of ${playedCards[index].suit}, ` + } + this.status += `${playedCards[playedCards.length - 1].value} of ${playedCards[playedCards.length - 1].suit}` + } + }, +}; +kings_corner.updateCallback = function () { + if (kings_corner.state == -1){ // setup + kings_corner.setup(); + kings_corner.state = 0 + } else if (kings_corner.state == 0) { // player turn + if (kings_corner.hand.length == 0) { + kings_corner.status = "You win!" + kings_corner.state = 2 + return; + } + } else if (kings_corner.state == 1) { // other turn + kings_corner.other_hand.push(kings_corner.deck.pop()); + kings_corner.other_play(); + if (kings_corner.other_hand.length == 0) { + kings_corner.status = "You lose!" + kings_corner.state = 3 + return; + } + kings_corner.state = 0 + kings_corner.hand.push(kings_corner.deck.pop()); + } else if (kings_corner.state == 2 || kings_corner.state == 3) { + // nothing + } +} +kings_corner.drawCallback = function () { + if(kings_corner.state < 0){ + return; + } + ctx.fillStyle = "#99b3ff"; + ctx.fillRect(0, 0, width, height); + + font(26) + ctx.fillStyle = "lime"; + ctx.fillRect(5, 5, 90, 40); + ctx.fillStyle = "black" + if (kings_corner.selected.length != 2) { + ctx.fillText("Pass", 10, 30); + } else { + ctx.fillText("Play", 10, 30); + } + + ctx.fillStyle = "black" + ctx.fillText("You", 10, 240) + kings_corner.hand.forEach((card, i) => { + if (kings_corner.selected.includes(card)) { + ctx.fillStyle = "#CCC" + } else { + ctx.fillStyle = "white"; + } + ctx.fillRect(i * 75 + 100, 210, 70, 120); + ctx.fillStyle = kings_corner.suit_color[card.suit] + ctx.fillText(card.suit, i * 75 + 105, 250) + ctx.fillText(card.value, i * 75 + 105, 230) + }) + + ctx.fillStyle = "black" + ctx.fillText("Other", 10, 360) + kings_corner.other_hand.forEach((card, i) => { + ctx.fillStyle = "blue" + ctx.fillRect(i * 75 + 100, 340, 70, 120); + }) + + ctx.fillStyle = "black" + ctx.fillText(kings_corner.status, 100, 500) + + ctx.fillStyle = "black" + ctx.fillText("Board", 10, 120) + kings_corner.board.forEach((cards, i) => { + if (kings_corner.selected.includes(cards)) { + ctx.fillStyle = "#CCC" + } else { + ctx.fillStyle = "white"; + } + ctx.fillRect(i * 75 + 100, 80, 70, 120); + ctx.fillStyle = "black" + // var card = kings_corner.board[i]; + var top = cards[cards.length - 1]; + var bottom = cards[0]; + if (top != undefined) { + ctx.fillStyle = kings_corner.suit_color[top.suit] + ctx.fillText(top.suit, i * 75 + 105, 160) + ctx.fillText(top.value, i * 75 + 105, 180) + + if (top != bottom) { + ctx.fillStyle = kings_corner.suit_color[bottom.suit] + ctx.fillText(bottom.suit, i * 75 + 105, 120) + ctx.fillText(bottom.value, i * 75 + 105, 100) + } + } + }) + if(kings_corner.state >= 2){ + kings_corner.state = -1; + switchState(menu); + } +} +kings_corner.mouseDownCallback = function (e) { + if(kings_corner.state != 0){ + return; + } + + if (5 < e.x && e.x < 95 && 5 < e.y && e.y < 95) { + kings_corner.play(); + return + } + + var new_selected = false + kings_corner.hand.forEach((card, i) => { + if (i * 75 + 100 < e.x && e.x < i * 75 + 170 && + 210 < e.y && e.y < 330) { + + kings_corner.selected.unshift(card); + if (kings_corner.selected.length > 2) { + kings_corner.selected.pop(); + } + kings_corner.selected_positions.unshift("hand"); + if (kings_corner.selected_positions.length > 2) { + kings_corner.selected_positions.pop(); + } + new_selected = true + } + }) + + kings_corner.board.forEach((cards, i) => { + if (i * 75 + 100 < e.x && e.x < i * 75 + 170 && + 80 < e.y && e.y < 200) { + + kings_corner.selected.unshift(cards); + if (kings_corner.selected.length > 2) { + kings_corner.selected.pop(); + } + kings_corner.selected_positions.unshift("board"); + if (kings_corner.selected_positions.length > 2) { + kings_corner.selected_positions.pop(); + } + new_selected = true + } + }) + + if (!new_selected) { + kings_corner.selected = [] + kings_corner.selected_positions = [] + } +} +kings_corner.mouseUpCallback = function (e) { + +}
\ No newline at end of file diff --git a/src/math/static/main.js b/src/math/static/main.js new file mode 100644 index 0000000..d66f48c --- /dev/null +++ b/src/math/static/main.js @@ -0,0 +1,149 @@ +// The callbacks to be called each frame on update, +// and on draw +var updateCallback, drawCallback, mouseDownCallback, mouseUpCallback; +// The interval object +var gameInterval; +let width = 800; +let height = 600; +let fps = 30; + +window.onload = function () { + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); + canvas.width = width; + canvas.height = height; + document.addEventListener("keydown", keyPush); + document.addEventListener("mousedown", mouseDown); + document.addEventListener("mouseup", mouseUp); + init(); +} + +function switchState(game) { + updateCallback = game.updateCallback; + drawCallback = game.drawCallback; + mouseDownCallback = game.mouseDownCallback; + mouseUpCallback = game.mouseUpCallback; +} + +function game() { + updateCallback(); + drawCallback(); +} + +function init() { + switchState(menu); + gameInterval = setInterval(game, 1000 / fps); + + let buttonX = (width / 5) * 1 // 2/5 the width + let buttonWidth = (width / 5) * 3 + let buttonHeight = 40 + menu.buttons.forEach((gameData, i) => { + gameData.x = buttonX; + gameData.y = (buttonHeight + 10) * i + 200; + gameData.width = buttonWidth; + gameData.height = buttonHeight; + }) + menu.buttons.push({ + x: 680, + y: 530, + width: 100, + height: buttonHeight, + name: "Help", + game: help, + }) +} + +var menu = { + "buttons": [ + { + "name": "Nim", + "game": nim, + }, + // { + // "name": "Solitaire", + // "game": solitaire, + // }, + { + "name": "Kings Corner", + "game": kings_corner, + }, + { + "name": "Black Hole", + "game": black_hole, + }, + ] +}; +menu.updateCallback = function () { + +} +menu.drawCallback = function () { + font(48); + ctx.fillStyle = "#99b3ff"; + ctx.fillRect(0, 0, width, height); + + menu.buttons.forEach((gameData, i) => { + button(gameData.x, gameData.y, gameData.width, gameData.height, gameData.name, gameData.isClicked); + }) +} + +menu.mouseDownCallback = function (e) { + let newGame = buttonAt(e.x, e.y, menu.buttons); + if(newGame){ + newGame.isClicked = true; + } +} + +menu.mouseUpCallback = function (e) { + let newGame = buttonAt(e.x, e.y, menu.buttons); + if(newGame && newGame.isClicked){ + switchState(newGame.game) + } + menu.buttons.forEach((gameData, i) => { + gameData.isClicked = false; + }) +} + +function buttonAt(x, y, buttons) { + return buttons.find((gameData, i) => { + if (gameData.x < x && x < gameData.x + gameData.width + && gameData.y < y && y < gameData.y + gameData.height) { + return true; + } + }) +} + +function font(size) { + ctx.font = size + "px Courier"; +} + +function keyPush(e) { + +} + +function mouseDown(e) { + mouseDownCallback(e); +} + +function mouseUp(e) { + mouseUpCallback(e); +} + +function button(x, y, w, h, text, isClicked){ + if(isClicked){ + ctx.fillStyle = "grey" + } else { + ctx.fillStyle = "darkgrey" + } + ctx.fillRect(x, y, w, h); + ctx.strokeStyle = "black" + ctx.beginPath(); + ctx.moveTo(x, y); + ctx.lineTo(x+w, y); + ctx.lineTo(x+w, y+h); + ctx.lineTo(x, y+h); + ctx.lineTo(x, y); + ctx.stroke(); + font(36); + ctx.fillStyle = "black" + ctx.fillText(text, x+5, y+h-8) +} diff --git a/src/math/static/nim.js b/src/math/static/nim.js new file mode 100644 index 0000000..b8d1665 --- /dev/null +++ b/src/math/static/nim.js @@ -0,0 +1,102 @@ +var nim = { + pieces: 10, + buttons: [ + { + "name": "1", + "x": 50, + "y": 50, + "width": 50, + "height": 50, + "value": 1 + }, + { + "name": "2", + "x": 50, + "y": 125, + "width": 50, + "height": 50, + "value": 2 + } + ], + status: "It is your turn", + gameOver: false, +}; +var nimSetup = false; +nim.updateCallback = function(){ + // Check for who wins/reset/etc +} +nim.drawCallback = function(){ + ctx.fillStyle = "#99b3ff"; + ctx.fillRect(0, 0, width, height); + nim.buttons.forEach((b, i) => { + button(b.x, b.y, 50, 50, b.name, b.isClicked); + }) + + ctx.fillStyle = "green" + for(var i = 0; i < nim.pieces; i++){ + ctx.beginPath(); + ctx.arc(175 + i * 50, 300 + (i%2)*50, 25, 0, 2 * Math.PI); + ctx.fill(); + } + ctx.fillStyle = "grey" + for(var i = nim.pieces; i < 10; i++){ + ctx.beginPath(); + ctx.arc(175 + i * 50, 300 + (i%2)*50, 25, 0, 2 * Math.PI); + ctx.fill(); + } + + font(26) + ctx.fillStyle = "black" + ctx.fillText(nim.status, 175, 75) +} +nim.mouseDownCallback = function (e) { + if(nim.gameOver){ + nim.pieces = 10; + nim.gameOver = false; + nim.status = "It is your turn"; + switchState(menu); + return; + } + let choice = buttonAt(e.x, e.y, nim.buttons); + if(choice){ + choice.isClicked = true; + } +} +nim.mouseUpCallback = function (e) { + let choice = buttonAt(e.x, e.y, nim.buttons); + if(choice && choice.isClicked){ + nim.turn(choice.value); + } + nim.buttons.forEach((gameData, i) => { + gameData.isClicked = false; + }) +} +nim.subtract = function(value){ + nim.pieces -= value; + if(nim.pieces < 0){ + nim.pieces = 0; + } +} +nim.turn = function(value){ + nim.subtract(value); + if(nim.pieces == 0){ + nim.gameOver = true; + nim.status = "You win!" + return; + } + if(nim.pieces % 3 == 0){ + nim.subtract(1); + nim.status = "The other player took 1" + } else if(nim.pieces % 3 == 1){ + nim.subtract(1); + nim.status = "The other player took 1" + } else if(nim.pieces % 3 == 2){ + nim.subtract(2); + nim.status = "The other player took 2" + } + if(nim.pieces == 0){ + this.gameOver = true; + nim.status = "You lose!" + return; + } +}
\ No newline at end of file diff --git a/src/math/static/solitaire.js b/src/math/static/solitaire.js new file mode 100644 index 0000000..c2b6172 --- /dev/null +++ b/src/math/static/solitaire.js @@ -0,0 +1,8 @@ +var solitaire = {}; +solitaire.updateCallback = function(){ + +} +solitaire.drawCallback = function(){ + ctx.fillStyle = "green"; + ctx.fillRect(0, 0, width, height); +}
\ No newline at end of file diff --git a/src/pinball/index.html b/src/pinball/index.html new file mode 100644 index 0000000..b39d48e --- /dev/null +++ b/src/pinball/index.html @@ -0,0 +1,120 @@ +<center> + <canvas id="canvas"></canvas> +</center> +<script> + var WIDTH = 300 + var HEIGHT = 400 + window.onload = function(){ + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); + canvas.width = WIDTH; + canvas.height = HEIGHT; + document.addEventListener("keydown",keyDown); + document.addEventListener("keyup",keyUp); + setInterval(game, 1000/10); + } + var tileCountWidth = 30; + var tileCountHeight = 40; + var tileWidth = WIDTH/tileCountWidth; + var tileHeight = HEIGHT/tileCountHeight; + var ballX = WIDTH/2; + var ballY = 10; + var leftUp = false; + var rightUp = false; + var vx = randomInt(20)-10; + var vy = 0; + var ay = 2; + var ymax = 20; + var length = 5; + var paddleWidth = 11; + function game(){ + update() + + color("black"); + // BACKGROUND + ctx.fillRect(0,0,WIDTH, HEIGHT); + // SIDES + color("blue"); + ctx.fillRect(0,0,tileWidth, HEIGHT); +// console.log(WIDTH, tileWidth, tileCountWidth) + ctx.fillRect(WIDTH-tileWidth, 0, tileWidth, HEIGHT); + ctx.beginPath(); + // DRAW BALL + color("white"); + ctx.fillRect(ballX, ballY, tileWidth, tileHeight); + // DRAW PADDLES + color("red"); + ctx.lineWidth=10; + + ctx.moveTo(1*tileWidth, 33*tileHeight); + if(leftUp){ + ctx.lineTo((1+paddleWidth)*tileWidth, 33*tileHeight); + } else { + ctx.lineTo((1+paddleWidth)*tileWidth, 35*tileHeight); + } + ctx.stroke(); + var t = tileCountWidth - 1 + ctx.moveTo(t*tileWidth, 33*tileHeight); + if(rightUp){ + ctx.lineTo((t-paddleWidth)*tileWidth, 33*tileHeight); + } else { + ctx.lineTo((t-paddleWidth)*tileWidth, 35*tileHeight); + } + ctx.stroke(); + } + function update(){ + + if(((leftUp && ballX/tileWidth <=8) || (rightUp && ballX/tileWidth >=13)) + && ballY/tileHeight <= 35 && ballY/tileHeight >= 32){ + console.log("Hit!") + vy=-20 + } + vy += ay + vy = Math.min(vy, ymax) + ballY += vy + ballX += vx + if(ballX <= tileWidth){ + ballX = tileWidth + vx = -vx + } + if(ballX >= WIDTH-(2*tileWidth)){ + ballX = WIDTH-(2*tileWidth) + vx = -vx + } + + } + function keyUp(e){ + switch(e.keyCode){ + case 37: + leftUp = false; + break; + case 39: + rightUp = false; + break; + } + } + function keyDown(e){ + switch(e.keyCode){ + case 37: + leftUp = true; + break; + case 39: + rightUp = true; + break; + } + } + function setRandomCoords(item){ + item.x = randomInt(tileWidth); + item.y = randomInt(tileHeight); + } + function randomInt(max){ + return Math.floor(Math.random()*max); + } + function font(size){ + ctx.font=size+"px Courier"; + } + function color(c){ + ctx.strokeStyle=c; + ctx.fillStyle=c; + } +</script> diff --git a/src/pinball/server.js b/src/pinball/server.js new file mode 100644 index 0000000..2bf88d5 --- /dev/null +++ b/src/pinball/server.js @@ -0,0 +1,11 @@ +const path = require('path'); +const fs = require('fs'); + +function setUpRoutes(server, models, jwtFunctions, database) { + server.get('/pinball', (req, res) => res.sendFile(__dirname + "/index.html")) + server.get('/pinball/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css")) +} + +module.exports = { + setUpRoutes +}; diff --git a/src/quadrowple/index.html b/src/quadrowple/index.html new file mode 100644 index 0000000..574ffca --- /dev/null +++ b/src/quadrowple/index.html @@ -0,0 +1,27 @@ +<!doctype html> +<html lang="en"> + +<head> + <title>Quad-row-ple</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <link rel="shortcut icon" href="/favicon.ico"> + <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> + <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> + <script src="/quadrowple/main.js"></script> + <link rel="stylesheet" type="text/css" href="/quadrowple/styles.css"> +</head> + +<body> + <div id="data"> + <h1 v-if="status">{{status}}</h1> + + <canvas id="canvas" width="351" height="301"></canvas> + + <div> + <button v-on:click="newGame">{{this.playing ? 'Forfeit' : 'New Game'}}</button> + </div> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/src/quadrowple/server.js b/src/quadrowple/server.js new file mode 100644 index 0000000..b44c055 --- /dev/null +++ b/src/quadrowple/server.js @@ -0,0 +1,172 @@ +const path = require('path'); +const fs = require('fs'); + +function setUpRoutes(server, models, jwtFunctions, database) { + + server.get('/quadrowple', (req, res) => res.sendFile(__dirname + "/index.html")) + server.get('/quadrowple/main.js', (req, res) => res.sendFile(__dirname + "/static/main.js")) + server.get('/quadrowple/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css")) + // server.use('/static', express.static(path.join(__dirname, '/static'))) + + var games = {} + var gameList = [] + var id = 0 + server.get('/quadrowple/status', (req, res) => { + let cookie = req.cookies.session; + if (!cookie) { + cookie = uuidv4(); + res.cookie('session', cookie, { expires: new Date(Date.now() + (1000 * 60 * 60)) }); + } + currentGames = [] + gameList.forEach( game => { + var diff = new Date() - game.time; + // Keep games that are recently updated + if(diff < 1000 * 10) {// 10 seconds with no update + currentGames.push(game) + } else { // otherwise don't save it and get rid of game + game.players.forEach(c => { + delete games[c] + }); + } + }) + gameList = currentGames + if (!games[cookie]) { + var game = gameList.find((el) => el.waiting) + if (game) { // Start game + game.players.push(cookie) + game.waiting = false + game.board = [[undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined]] + game.turn = Math.floor(Math.random() * 2) + games[cookie] = game + } else { // Create new game, and wait + game = { + waiting: true, + players: [cookie], + id: id++, + time: new Date(), + } + gameList.push(game) + games[cookie] = game + } + } else { + games[cookie].time = new Date() + } + res.status(200).send(games[cookie]); + }) + + // returns undefined if game in progress, or index of winner + function gameOver(game) { + for (var player = 0; player < 2; player++) { + // 4 in a row in a column + for (var col = 0; col < 7; col++) { + for (var row = 0; row < 2; row++) { + if (game.board[col][row] == player && + game.board[col][row + 1] == player && + game.board[col][row + 2] == player && + game.board[col][row + 3] == player) { + return player + } + } + } + // 4 in a row in a row + for (var col = 0; col < 3; col++) { + for (var row = 0; row < 6; row++) { + if (game.board[col][row] == player && + game.board[col + 1][row] == player && + game.board[col + 2][row] == player && + game.board[col + 3][row] == player) { + return player + } + } + } + // Check up right diagonal + for (var row = 0; row < 2; row++) { + for (var col = 0; col < 3; col++) { + if (game.board[col][row] == player && + game.board[col + 1][row + 1] == player && + game.board[col + 2][row + 2] == player && + game.board[col + 3][row + 3] == player) { + return player + } + } + } + // Check down right diagonal + for (var row = 3; row < 6; row++) { + for (var col = 0; col < 3; col++) { + if (game.board[col][row] == player && + game.board[col + 1][row - 1] == player && + game.board[col + 2][row - 2] == player && + game.board[col + 3][row - 3] == player) { + return player + } + } + } + } + return undefined + } + + function sendGame(res, game, cookie){ + var winner = gameOver(game) + if (winner != undefined) { + res.status(200).send({ game: game, turn: -1, winner: game.players[winner] == cookie }); + } else { + res.status(200).send({ game: game, turn: game.players[game.turn] == cookie }); + } + } + server.get('/quadrowple/game/:col', (req, res, next) => { + let cookie = req.cookies.session; + if (!cookie || !games[cookie]) { + next() + return + } + var game = games[cookie] + const { col } = req.params; + if (game.players[game.turn] == cookie && gameOver(game) == undefined) { + // Add player's token to column + for (var row = 0; row < 6; row++) { + if (game.board[col][row] == undefined) { + game.board[col][row] = (game.players.indexOf(cookie)) + game.turn = (game.turn + 1) % 2 + break + } + } + } + sendGame(res, game, cookie) + }) + server.get('/quadrowple/game', (req, res, next) => { + let cookie = req.cookies.session; + if (!cookie || !games[cookie]) { + res.status(200).send({restart: true}); + return + } + var game = games[cookie] + if(gameOver(game) != undefined){ + delete games[cookie] + } + sendGame(res, game, cookie) + }) + + server.get('/quadrowple/new', (req, res, next) => { + let cookie = req.cookies.session; + if (!cookie || !games[cookie]) { + next() + return + } + games[cookie].players.forEach( el =>{ + delete games[el] + }) + }) + +} + +module.exports = { + setUpRoutes +}; + + diff --git a/src/quadrowple/static/main.js b/src/quadrowple/static/main.js new file mode 100644 index 0000000..008658c --- /dev/null +++ b/src/quadrowple/static/main.js @@ -0,0 +1,107 @@ +window.onload = function () { + var transactionData = new Vue({ + el: '#data', + data: { + status: "Loading...", + playing: false + }, + methods: { + newGame: function () { + if (this.playing) { + fetch(new Request(`/quadrowple/new`)) + } else { + this.startGame() + } + }, + startGame: function () { + console.log("created") + var mouseDown = function (e) { + col = Math.floor(e.x / 50); + if (0 <= col <= 6) { + fetch(new Request(`/quadrowple/game/${col}`)) + } + } + document.addEventListener("click", mouseDown); + var playInterval; + var playGame = function (t) { + fetch(new Request(`/quadrowple/game`)).then(response => response.json()) + .then(response => { + var c = document.getElementById("canvas"); + var ctx = c.getContext("2d"); + ctx.fillStyle = "#eee" + ctx.fillRect(0, 0, 351, 301) + + if (response.restart) { + t.playing = false + t.status = "The game has been forfeited" + clearInterval(playInterval) + return + } else if (response.winner != undefined) { + clearInterval(playInterval) + if (response.winner) { + t.status = "You won!" + } else { + t.status = "You lose!" + } + } else if (response.turn) { + t.status = "It's your turn!" + } else { + t.status = "Waiting for other player..." + } + + ctx.strokeStyle = "black" + for (var i = 0; i <= 7; i++) { + ctx.moveTo(50 * i, 0); + ctx.lineTo(50 * i, 300); + ctx.stroke(); + } + for (var i = 0; i <= 6; i++) { + ctx.moveTo(0, 50 * i); + ctx.lineTo(350, 50 * i); + ctx.stroke(); + } + + for (var col = 0; col < 7; col++) { + for (var row = 0; row < 6; row++) { + if (response.game.board[col][row] == undefined) { + continue + } else if (response.game.board[col][row] == 0) { + ctx.fillStyle = "#0000FF"; + } else { + ctx.fillStyle = "#FF0000"; + } + ctx.beginPath(); + ctx.arc(25 + 50 * col, 50 * (5 - row) + 25, 23, 0, 2 * Math.PI); + ctx.fill(); + } + } + }); + } + var loadInterval = undefined + var loadStatus = function (recurse, t) { + fetch(new Request(`/quadrowple/status`)).then(response => response.json()) + .then(response => { + if (response.waiting) { + t.status = "Waiting..." + if (recurse) { + loadInterval = window.setInterval(loadStatus, 1000, false, t) + } + } else { + t.status = "Playing..." + t.playing = true + clearInterval(loadInterval) + playInterval = window.setInterval(playGame, 1000, t) + } + }); + } + loadStatus(true, this) + } + }, + created() { + this.startGame(); + }, + computed: { + + } + }); +}
\ No newline at end of file diff --git a/src/quadrowple/static/styles.css b/src/quadrowple/static/styles.css new file mode 100644 index 0000000..4eedd0b --- /dev/null +++ b/src/quadrowple/static/styles.css @@ -0,0 +1,72 @@ +td { + border: 1px solid lightgrey; + min-width: 3em; +} + +table { + max-width: 100%; +} + +li { + cursor: pointer; + text-decoration: underline; +} + +tr:nth-child(2n+1) { + background-color: lightgray; +} +tr { + width: 100%; +} + +.bold { + font-weight: bold; +} + +#data { + width: 100%; +} + +.border { + border: 1px solid lightgrey; +} + +textarea { + border-radius: 4px; + width: 60%; + height: 10em; + display: block; +} + +pre { + white-space: pre-line; +} + +.net-negative { + /* color: red; */ + background-color: lightcoral; +} +.net-positive { + /* color: green; */ + background-color: lightgreen +} +.summary-panel { + float:left; + padding-right: 2em; +} +@media only screen and (max-width: 600px) { + .newItem td { + display:block; + } + .table-index { + display: none; + } + button { + font-size: 32px; + } + input { + font-size: 32px; + display: block; + width: 100%; + } +}
\ No newline at end of file diff --git a/src/server.js b/src/server.js new file mode 100644 index 0000000..ba5cff9 --- /dev/null +++ b/src/server.js @@ -0,0 +1,41 @@ +const express = require('express'); +const bodyParser = require('body-parser'); +const cookieParser = require('cookie-parser'); +//const request = require('request'); +const crypto = require('crypto'); +const uuidv4 = require('uuid/v4'); + +const path = require('path'); +const fs = require('fs'); +const config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json'))); + +const server = express(); +server.use(cookieParser()) +server.use(bodyParser.json()); +//server.use(bodyParser.urlencoded({ extended: true })); + +function listen(port) { + server.listen(port, () => console.info(`Listening on port ${port}!`)); +} + +function load(gamePath, models, jwtFunctions, database){ + const game = require(gamePath); + game.setUpRoutes(server, models, jwtFunctions, database); +} + +function setUpRoutes(models, jwtFunctions, database) { + server.use(function (req, res, next) { + console.debug(new Date(), req.method, req.originalUrl); + next() + }) + + server.get('/', (req, res) => res.sendFile(__dirname + "/index.html")) +} + +module.exports = { + listen, + setUpRoutes, + load +}; + + diff --git a/src/snake/index.html b/src/snake/index.html new file mode 100644 index 0000000..eb11f86 --- /dev/null +++ b/src/snake/index.html @@ -0,0 +1,83 @@ +<center> + <canvas width="400" height="400" id="canvas"></canvas> +</center> +<script> + window.onload = function(){ + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); +// canvas.height = 300; +// canvas.width = 400; + document.addEventListener("keydown",keyPush); + setInterval(game, 1000/10); + } + var tileCountWidth = 40; + var tileCountHeight = 40; + var tileWidth = canvas.width/tileCountWidth; + var tileHeight = canvas.height/tileCountHeight; + var snake = []; + var x = randomInt(tileWidth); + var y = randomInt(tileHeight); + var vx = 1; + var vy = 0; + var apple = {}; + console.log(apple); + setRandomCoords(apple); + console.log(apple); + var length = 5; + function game(){ + color("black"); + ctx.fillRect(0,0,canvas.width, canvas.height); + color("white"); + for(var i = 0; i < snake.length; i++){ + ctx.fillRect(snake[i].x*tileWidth, snake[i].y*tileHeight, tileWidth, tileHeight); + } + color("red"); + ctx.fillRect(apple.x*tileWidth, apple.y*tileHeight, tileWidth, tileHeight); + + x+=vx; + y+=vy; + snake.push({"x": x, "y": y}); + if(x==apple.x && y==apple.y){ + length++; + setRandomCoords(apple); + } + + while(snake.length > length){ + snake.shift(); + } + + } + function keyPush(e){ + switch(e.keyCode){ + case 37: + vx = -1; + vy = 0; + break; + case 38: + vx = 0; + vy = -1; + break; + case 39: + vx = 1; + vy = 0; + break; + case 40: + vx = 0; + vy = 1; + break; + } + } + function setRandomCoords(item){ + item.x = randomInt(tileWidth); + item.y = randomInt(tileHeight); + } + function randomInt(max){ + return Math.floor(Math.random()*max); + } + function font(size){ + ctx.font=size+"px Courier"; + } + function color(c){ + ctx.fillStyle=c; + } +</script> diff --git a/src/snake/server.js b/src/snake/server.js new file mode 100644 index 0000000..c73990b --- /dev/null +++ b/src/snake/server.js @@ -0,0 +1,11 @@ +const path = require('path'); +const fs = require('fs'); + +function setUpRoutes(server, models, jwtFunctions, database) { + server.get('/snake', (req, res) => res.sendFile(__dirname + "/index.html")) + server.get('/snake/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css")) +} + +module.exports = { + setUpRoutes +}; diff --git a/src/stacker/index.html b/src/stacker/index.html new file mode 100644 index 0000000..eb256a6 --- /dev/null +++ b/src/stacker/index.html @@ -0,0 +1,215 @@ +<!doctype html> +<html lang="en"> + +<head> + <title>Stacker</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> --> +</head> + +<body style="padding:0; margin:0; overflow:hidden;"> + <canvas id="canvas"></canvas> + <script> + var gameInterval, canvas, ctx; + var score, t, isGameOver, mouseX, mouseY, scaleX, scaleY, selected, stack, next, v, perfect; + let VELOCITY = 15; + + function init() { + next = {left: 0, width:200}; + v = VELOCITY; + stack = [{left: 100, width:200}]; + + score = 0; + isGameOver = false; + mouseX = 0; + mouseY = 0; + t = 0; + selected = -1; + perfect = 0; + gameInterval = setInterval(game, 1000 / 10); + } + + window.onload = function () { + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); + + document.addEventListener("keydown", keyPush); + document.addEventListener("mousedown", mousePush); + + window.addEventListener('resize', resizeCanvas, false); + window.addEventListener('orientationchange', resizeCanvas, false); + resizeCanvas(); + + init(); + } + + function resizeCanvas() { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + scaleX = window.innerWidth/400; + scaleY = window.innerHeight/600; + + if(scaleX/scaleY > 1.3){ + scaleX = scaleY = 1; + } + ctx.scale(scaleX, scaleY); + } + function game() { + update(); + draw(); + } + function draw() { + color("white"); + ctx.fillRect(0, 0, canvas.width,canvas.height); + color("black"); + ctx.fillRect(0, 0, 400,400); + + // Draw moving block + if(stack.length % 2 == 0){ + color("white"); + } else { + color("red") + } + var y; + if(stack.length < 10){ + y = 380-stack.length*20; + } else { + y = 380-10*20; + } + ctx.fillRect(next.left, y, next.width, 20) + + + // Draw stack + var index = max(stack.length-10, 0); + stack.slice(-10).forEach((element, i) => { + if(index % 2 == 0){ + color("white"); + } else { + color("red") + } + + let y = 380-i*20 + ctx.fillRect(element.left, y, element.width, 20) + index++; + }); + + // Draw "perfect" marker + if(perfect > 0 ){ + font(20); + color("red"); + let last = stack[stack.length - 1] + ctx.fillText("Perfect!", 170, 60); + perfect--; + } + + // Draw score + font(20); + color("red"); + ctx.fillText("Score: " + score, 170, 30); + + // Draw touch controls + color("#ff9900"); + if(selected) { + color("#cc9900") + } + ctx.beginPath(); + ctx.moveTo(200, 500); + ctx.arc(200, 500, 100, 0, 2*Math.PI); + ctx.fill(); + selected = 0; + + if (isGameOver) { + color("blue"); + font(32); + ctx.fillText("Game over!", 160, 200); + font(24); + } + } + + function update() { + t++; + next.left += v; + if(next.left + next.width >= 400) { + let diff = next.left + next.width - 400; + next.left -= diff; + v = -1 * VELOCITY; + } else if(next.left <= 0) { + let diff = 0 - next.left; + next.left += diff; + v = VELOCITY; + } + if (next.width <= 0) { + gameOver(); + } + } + function max(a, b) { + return a > b ? a : b; + } + function min(a, b) { + return a < b ? a : b; + } + function keyPush(e) { + if(isGameOver){ + init(); + return; + } + if(e.keyCode == 32){ + let last = stack[stack.length -1]; + var left = max(next.left, last.left); + let right = min(next.left + next.width, last.left+last.width); + var width = right-left; + + if(stack[stack.length -1 ].width - width < 10){ + width = stack[stack.length -1 ].width + left = stack[stack.length -1 ].left + perfect = 5; + } + + if(width > 0){ + stack.push({left: left, width: width}) + score += 1; + } + + if(v < 0) { + next = {left: 0, width: width} + v = VELOCITY + } else { + next = {left: 400-width, width: width} + v = -1 * VELOCITY + } + } + } + function mousePush(e) { + mouseX = e.clientX/scaleX - 200; + mouseY = e.clientY/scaleY - 500; + if (Math.sqrt(mouseX * mouseX + mouseY * mouseY) > 100) { + return; + } + selected = 1; + keyPush({keyCode: 32}) + } + function randomInt(max) { + return Math.floor(Math.random() * max); + } + function font(size) { + ctx.font = size + "px sans serif"; + } + function color(c) { + ctx.fillStyle = c; + } + function gameOver() { + isGameOver = true; + clearInterval(gameInterval); + + const urlParams = new URLSearchParams(window.location.search); + const uid = urlParams.get('uid'); + const mid = urlParams.get('mid'); + + const request = new Request(`/setScore?uid=${uid}&mid=${mid}&score=${score}`); + fetch(request).then(response => console.log("response")); + } + </script> +</body> + +</html>
\ No newline at end of file diff --git a/src/stacker/server.js b/src/stacker/server.js new file mode 100644 index 0000000..ee2fca6 --- /dev/null +++ b/src/stacker/server.js @@ -0,0 +1,11 @@ +const path = require('path'); +const fs = require('fs'); + +function setUpRoutes(server, models, jwtFunctions, database) { + server.get('/stacker', (req, res) => res.sendFile(__dirname + "/index.html")) + server.get('/stacker/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css")) +} + +module.exports = { + setUpRoutes +}; diff --git a/src/ur/index.html b/src/ur/index.html new file mode 100644 index 0000000..809ed3d --- /dev/null +++ b/src/ur/index.html @@ -0,0 +1,27 @@ +<!doctype html> +<html lang="en"> + +<head> + <title>Royal Game of Ur</title> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + <link rel="shortcut icon" href="/favicon.ico"> + <!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> --> + <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> + <script src="/ur/main.js"></script> + <link rel="stylesheet" type="text/css" href="/ur/styles.css"> +</head> + +<body> + <div id="data"> + <h1 v-if="status">{{status}}</h1> + + <canvas id="canvas" width="401" height="301"></canvas> + + <div> + <button v-on:click="newGame">{{this.playing ? 'Forfeit' : 'New Game'}}</button> + </div> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/src/ur/server.js b/src/ur/server.js new file mode 100644 index 0000000..81437ee --- /dev/null +++ b/src/ur/server.js @@ -0,0 +1,175 @@ +const path = require('path'); +const fs = require('fs'); + +function setUpRoutes(server, models, jwtFunctions, database) { + + server.get('/ur', (req, res) => res.sendFile(__dirname + "/index.html")) + server.get('/ur/main.js', (req, res) => res.sendFile(__dirname + "/static/main.js")) + server.get('/ur/styles.css', (req, res) => res.sendFile(__dirname + "/static/styles.css")) + // server.use('/static', express.static(path.join(__dirname, '/static'))) + + var games = {} + var gameList = [] + var id = 0 + server.get('/ur/status', (req, res) => { + let cookie = req.cookies.session; + if (!cookie) { + cookie = uuidv4(); + res.cookie('session', cookie, { expires: new Date(Date.now() + (1000 * 60 * 60)) }); + } + currentGames = [] + gameList.forEach( game => { + var diff = new Date() - game.time; + // Keep games that are recently updated + if(diff < 1000 * 10) {// 10 seconds with no update + currentGames.push(game) + } else { // otherwise don't save it and get rid of game + game.players.forEach(c => { + delete games[c] + }); + } + }) + gameList = currentGames + if (!games[cookie]) { + var game = gameList.find((el) => el.waiting) + if (game) { // Start game + game.players.push(cookie) + game.waiting = false + game.board = [[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], + [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]] + game.turn = Math.floor(Math.random() * 2) + games[cookie] = game + } else { // Create new game, and wait + game = { + waiting: true, + players: [cookie], + id: id++, + time: new Date(), + } + gameList.push(game) + games[cookie] = game + } + } else { + games[cookie].time = new Date() + } + res.status(200).send(games[cookie]); + }) + + // returns undefined if game in progress, or index of winner + function gameOver(game) { + // TODO + return false; + + for (var player = 0; player < 2; player++) { + // 4 in a row in a column + for (var col = 0; col < 7; col++) { + for (var row = 0; row < 2; row++) { + if (game.board[row][col] == player){ + return player + } + } + } + // 4 in a row in a row + for (var col = 0; col < 3; col++) { + for (var row = 0; row < 6; row++) { + if (game.board[col][row] == player && + game.board[col + 1][row] == player && + game.board[col + 2][row] == player && + game.board[col + 3][row] == player) { + return player + } + } + } + // Check up right diagonal + for (var row = 0; row < 2; row++) { + for (var col = 0; col < 3; col++) { + if (game.board[col][row] == player && + game.board[col + 1][row + 1] == player && + game.board[col + 2][row + 2] == player && + game.board[col + 3][row + 3] == player) { + return player + } + } + } + // Check down right diagonal + for (var row = 3; row < 6; row++) { + for (var col = 0; col < 3; col++) { + if (game.board[col][row] == player && + game.board[col + 1][row - 1] == player && + game.board[col + 2][row - 2] == player && + game.board[col + 3][row - 3] == player) { + return player + } + } + } + } + return undefined + } + + function sendGame(res, game, cookie){ + var winner = gameOver(game) + if (winner != undefined) { + res.status(200).send({ game: game, turn: -1, winner: game.players[winner] == cookie }); + } else { + res.status(200).send({ game: game, turn: game.players[game.turn] == cookie }); + } + } + server.get('/ur/game/:col/:row', (req, res, next) => { + let cookie = req.cookies.session; + if (!cookie || !games[cookie]) { + next() + return + } + var game = games[cookie] + const { col } = req.params; + if (game.players[game.turn] == cookie && gameOver(game) == undefined) { + // Add player's token to column + + // do nothing + if(game.board == undefined){ + + } else { + // move piece at col, row + game.board[col, row] + } + + for (var row = 0; row < 6; row++) { + if (game.board[col][row] == undefined) { + game.board[col][row] = (game.players.indexOf(cookie)) + game.turn = (game.turn + 1) % 2 + break + } + } + } + sendGame(res, game, cookie) + }) + server.get('/ur/game', (req, res, next) => { + let cookie = req.cookies.session; + if (!cookie || !games[cookie]) { + res.status(200).send({restart: true}); + return + } + var game = games[cookie] + if(gameOver(game) != undefined){ + delete games[cookie] + } + sendGame(res, game, cookie) + }) + + server.get('/ur/new', (req, res, next) => { + let cookie = req.cookies.session; + if (!cookie || !games[cookie]) { + next() + return + } + games[cookie].players.forEach( el =>{ + delete games[el] + }) + }) + +} + +module.exports = { + setUpRoutes +}; diff --git a/src/ur/static/main.js b/src/ur/static/main.js new file mode 100644 index 0000000..8f29c6c --- /dev/null +++ b/src/ur/static/main.js @@ -0,0 +1,130 @@ +window.onload = function () { + var transactionData = new Vue({ + el: '#data', + data: { + status: "Loading...", + playing: false + }, + methods: { + newGame: function () { + if (this.playing) { + fetch(new Request(`/ur/new`)) + } else { + this.startGame() + } + }, + startGame: function () { + console.log("created") + var mouseDown = function (e) { + var canvas = document.getElementById('canvas') + col = Math.floor((e.x - canvas.offsetLeft) / 50); + row = Math.floor((e.y - canvas.offsetTop) / 50); + console.log(row, col) + if (0 <= col && col <= 7 && 0 <= row && row <= 2) { + console.log("clicked board") + fetch(new Request(`/ur/game/${col}/${row}`)) + } else if( 0 == col && 4 == row){ + console.log("roll") + } + } + document.addEventListener("click", mouseDown); + var playInterval; + var playGame = function (t) { + fetch(new Request(`/ur/game`)).then(response => response.json()) + .then(response => { + var c = document.getElementById("canvas"); + var ctx = c.getContext("2d"); + ctx.fillStyle = "#eee" + ctx.fillRect(0, 0, 401, 301) + + if (response.restart) { + t.playing = false + t.status = "The game has been forfeited" + clearInterval(playInterval) + return + } else if (response.winner != undefined) { + clearInterval(playInterval) + if (response.winner) { + t.status = "You won!" + } else { + t.status = "You lose!" + } + } else if (response.turn) { + t.status = "It's your turn!" + } else { + t.status = "Waiting for other player..." + } + + ctx.strokeStyle = "black" + for (var i = 0; i <= 4; i++) { + ctx.moveTo(50 * i, 0); + ctx.lineTo(50 * i, 150); + ctx.stroke(); + } + for (var i = 6; i <= 8; i++) { + ctx.moveTo(50 * i, 0); + ctx.lineTo(50 * i, 150); + ctx.stroke(); + } + ctx.moveTo(250, 50); + ctx.lineTo(250, 100); + ctx.moveTo(0, 0); + ctx.lineTo(200, 0); + ctx.moveTo(300, 0); + ctx.lineTo(400, 0); + ctx.moveTo(0, 50); + ctx.lineTo(400, 50); + ctx.moveTo(0, 100); + ctx.lineTo(400, 100); + ctx.moveTo(0, 150); + ctx.lineTo(200, 150); + ctx.moveTo(300, 150); + ctx.lineTo(400, 150); + ctx.stroke(); + + for (var col = 0; col < 7; col++) { + for (var row = 0; row < 6; row++) { + if (response.game.board[col][row] == undefined) { + continue + } else if (response.game.board[col][row] == 0) { + ctx.fillStyle = "#0000FF"; + } else { + ctx.fillStyle = "#FF0000"; + } + ctx.beginPath(); + ctx.arc(25 + 50 * col, 50 * (5 - row) + 25, 23, 0, 2 * Math.PI); + ctx.fill(); + } + } + ctx.fillStyle = "black" + ctx.fillRect(0, 200, 50, 50); + }); + } + var loadInterval = undefined + var loadStatus = function (recurse, t) { + fetch(new Request(`/ur/status`)).then(response => response.json()) + .then(response => { + if (response.waiting) { + t.status = "Waiting..." + if (recurse) { + loadInterval = window.setInterval(loadStatus, 1000, false, t) + } + } else { + t.status = "Playing..." + t.playing = true + clearInterval(loadInterval) + playInterval = window.setInterval(playGame, 1000, t) + } + }); + } + loadStatus(true, this) + } + }, + created() { + this.startGame(); + }, + computed: { + + } + }); +}
\ No newline at end of file diff --git a/src/ur/static/styles.css b/src/ur/static/styles.css new file mode 100644 index 0000000..4eedd0b --- /dev/null +++ b/src/ur/static/styles.css @@ -0,0 +1,72 @@ +td { + border: 1px solid lightgrey; + min-width: 3em; +} + +table { + max-width: 100%; +} + +li { + cursor: pointer; + text-decoration: underline; +} + +tr:nth-child(2n+1) { + background-color: lightgray; +} +tr { + width: 100%; +} + +.bold { + font-weight: bold; +} + +#data { + width: 100%; +} + +.border { + border: 1px solid lightgrey; +} + +textarea { + border-radius: 4px; + width: 60%; + height: 10em; + display: block; +} + +pre { + white-space: pre-line; +} + +.net-negative { + /* color: red; */ + background-color: lightcoral; +} +.net-positive { + /* color: green; */ + background-color: lightgreen +} +.summary-panel { + float:left; + padding-right: 2em; +} +@media only screen and (max-width: 600px) { + .newItem td { + display:block; + } + .table-index { + display: none; + } + button { + font-size: 32px; + } + input { + font-size: 32px; + display: block; + width: 100%; + } +}
\ No newline at end of file |