diff --git a/.gitignore b/.gitignore index 4e30131..408c110 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ Cargo.lock bin/ pkg/ wasm-pack.log +node_modules diff --git a/index.html b/index.html index 9667338..ec4c236 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,9 @@ - Hello wasm-pack! + Hopeanuoli + + diff --git a/public/assets/Kenney Bold.ttf b/public/assets/Kenney Bold.ttf new file mode 100644 index 0000000..ece4612 Binary files /dev/null and b/public/assets/Kenney Bold.ttf differ diff --git a/public/assets/background01.png b/public/assets/background01.png new file mode 100644 index 0000000..7c05651 Binary files /dev/null and b/public/assets/background01.png differ diff --git a/public/assets/background02.png b/public/assets/background02.png new file mode 100644 index 0000000..399d7f9 Binary files /dev/null and b/public/assets/background02.png differ diff --git a/public/assets/card.png b/public/assets/card-bg.png similarity index 100% rename from public/assets/card.png rename to public/assets/card-bg.png diff --git a/public/assets/card-shadow.png b/public/assets/card-shadow.png new file mode 100644 index 0000000..d7740f1 Binary files /dev/null and b/public/assets/card-shadow.png differ diff --git a/public/assets/01.png b/public/assets/characters/akakabuto_card.png similarity index 100% rename from public/assets/01.png rename to public/assets/characters/akakabuto_card.png diff --git a/public/assets/characters/ben_card.png b/public/assets/characters/ben_card.png new file mode 100644 index 0000000..75faeba Binary files /dev/null and b/public/assets/characters/ben_card.png differ diff --git a/public/assets/characters/cross_card.png b/public/assets/characters/cross_card.png new file mode 100644 index 0000000..c69e553 Binary files /dev/null and b/public/assets/characters/cross_card.png differ diff --git a/public/assets/characters/gin_card.png b/public/assets/characters/gin_card.png new file mode 100644 index 0000000..61b8fe0 Binary files /dev/null and b/public/assets/characters/gin_card.png differ diff --git a/public/assets/characters/hyena_card.png b/public/assets/characters/hyena_card.png new file mode 100644 index 0000000..de5f022 Binary files /dev/null and b/public/assets/characters/hyena_card.png differ diff --git a/public/assets/characters/john_card.png b/public/assets/characters/john_card.png new file mode 100644 index 0000000..bfce154 Binary files /dev/null and b/public/assets/characters/john_card.png differ diff --git a/public/assets/characters/madara_card.png b/public/assets/characters/madara_card.png new file mode 100644 index 0000000..b16d09d Binary files /dev/null and b/public/assets/characters/madara_card.png differ diff --git a/public/assets/characters/mosa_card.png b/public/assets/characters/mosa_card.png new file mode 100644 index 0000000..badbf96 Binary files /dev/null and b/public/assets/characters/mosa_card.png differ diff --git a/public/assets/02.png b/public/assets/characters/riki_card.png similarity index 100% rename from public/assets/02.png rename to public/assets/characters/riki_card.png diff --git a/public/assets/characters/smith_card.png b/public/assets/characters/smith_card.png new file mode 100644 index 0000000..e31002a Binary files /dev/null and b/public/assets/characters/smith_card.png differ diff --git a/public/assets/characters/sniper_card.png b/public/assets/characters/sniper_card.png new file mode 100644 index 0000000..836f0b7 Binary files /dev/null and b/public/assets/characters/sniper_card.png differ diff --git a/public/assets/data.json b/public/assets/data.json new file mode 100644 index 0000000..3b9e8fc --- /dev/null +++ b/public/assets/data.json @@ -0,0 +1,380 @@ +{ + "characters": [ + { + "name": "Gin", + "alliance": "Ouun armeija", + "skill": "5", + "strength": "3", + "charisma": "5", + "total": "13" + }, + { + "name": "Riki", + "alliance": "Ouun armeija", + "skill": "5", + "strength": "5", + "charisma": "5", + "total": "15" + }, + { + "name": "Ben", + "alliance": "Ouun armeija", + "skill": "4", + "strength": "5", + "charisma": "4", + "total": "13" + }, + { + "name": "John", + "alliance": "Ouun armeija", + "skill": "4", + "strength": "4", + "charisma": "2", + "total": "10" + }, + { + "name": "Cross", + "alliance": "Ouun armeija", + "skill": "3", + "strength": "2", + "charisma": "3", + "total": "8" + }, + { + "name": "Smith", + "alliance": "Ouun armeija", + "skill": "3", + "strength": "3", + "charisma": "3", + "total": "9" + }, + { + "name": "Great", + "alliance": "Ouun armeija", + "skill": "3", + "strength": "3", + "charisma": "4", + "total": "10" + }, + { + "name": "Hyena", + "alliance": "Ouun armeija", + "skill": "1", + "strength": "2", + "charisma": "0", + "total": "3" + }, + { + "name": "Sniper", + "alliance": "Ouun armeija", + "skill": "4", + "strength": "4", + "charisma": "2", + "total": "10" + }, + { + "name": "Akatora", + "alliance": "Ouun armeija", + "skill": "3", + "strength": "3", + "charisma": "4", + "total": "10" + }, + { + "name": "Chuutora", + "alliance": "Ouun armeija", + "skill": "3", + "strength": "3", + "charisma": "3", + "total": "9" + }, + { + "name": "Kurotora", + "alliance": "Ouun armeija", + "skill": "4", + "strength": "3", + "charisma": "3", + "total": "10" + }, + { + "name": "Moss", + "alliance": "Ouun armeija", + "skill": "2", + "strength": "5", + "charisma": "4", + "total": "11" + }, + { + "name": "Akame", + "alliance": "Ouun armeija", + "skill": "5", + "strength": "3", + "charisma": "4", + "total": "12" + }, + { + "name": "Kurojaki", + "alliance": "Kougan shinobit", + "skill": "4", + "strength": "3", + "charisma": "3", + "total": "10" + }, + { + "name": "Wilson", + "alliance": "Ouun armeija", + "skill": "3", + "strength": "3", + "charisma": "3", + "total": "9" + }, + { + "name": "Musashi", + "alliance": "Ouun armeija", + "skill": "4", + "strength": "4", + "charisma": "4", + "total": "12" + }, + { + "name": "Bill", + "alliance": "Ouun armeija", + "skill": "4", + "strength": "3", + "charisma": "4", + "total": "11" + }, + { + "name": "Benizakura", + "alliance": "Ouun armeija", + "skill": "3", + "strength": "5", + "charisma": "4", + "total": "12" + }, + { + "name": "Kisaragi", + "alliance": "Ouun armeija", + "skill": "4", + "strength": "3", + "charisma": "4", + "total": "11" + }, + { + "name": "Hazuki", + "alliance": "Ouun armeija", + "skill": "2", + "strength": "3", + "charisma": "2", + "total": "7" + }, + { + "name": "Minazuki", + "alliance": "Ouun armeija", + "skill": "2", + "strength": "1", + "charisma": "0", + "total": "3" + }, + { + "name": "Oliver", + "alliance": "Ouun armeija", + "skill": "3", + "strength": "2", + "charisma": "3", + "total": "8" + }, + { + "name": "Terry", + "alliance": "Ouun armeija", + "skill": "2", + "strength": "4", + "charisma": "3", + "total": "9" + }, + { + "name": "Bemu", + "alliance": "Ouun armeija", + "skill": "2", + "strength": "4", + "charisma": "4", + "total": "10" + }, + { + "name": "Hakurou", + "alliance": "Ouun armeija", + "skill": "4", + "strength": "3", + "charisma": "4", + "total": "11" + }, + { + "name": "Akakabuto", + "alliance": "Karhu-armeija", + "skill": "4", + "strength": "5", + "charisma": "5", + "total": "14" + }, + { + "name": "Madara", + "alliance": "Karhu-armeija", + "skill": "4", + "strength": "4", + "charisma": "3", + "total": "11" + }, + { + "name": "Mosa", + "alliance": "Karhu-armeija", + "skill": "3", + "strength": "5", + "charisma": "3", + "total": "11" + }, + { + "name": "Retsuga", + "alliance": "Susien valtakunta", + "skill": "4", + "strength": "4", + "charisma": "3", + "total": "11" + }, + { + "name": "Fuuga", + "alliance": "Susien valtakunta", + "skill": "4", + "strength": "4", + "charisma": "4", + "total": "12" + }, + { + "name": "Hyouma", + "alliance": "Susien valtakunta", + "skill": "4", + "strength": "3", + "charisma": "3", + "total": "10" + }, + { + "name": "Mukonga", + "alliance": "Susien valtakunta", + "skill": "3", + "strength": "5", + "charisma": "4", + "total": "12" + }, + { + "name": "Hyakkiga", + "alliance": "Susien valtakunta", + "skill": "4", + "strength": "3", + "charisma": "2", + "total": "9" + }, + { + "name": "Shuuga", + "alliance": "Susien valtakunta", + "skill": "4", + "strength": "3", + "charisma": "2", + "total": "9" + }, + { + "name": "Raiga", + "alliance": "Susien valtakunta", + "skill": "4", + "strength": "3", + "charisma": "2", + "total": "9" + }, + { + "name": "Suiga", + "alliance": "Susien valtakunta", + "skill": "4", + "strength": "3", + "charisma": "3", + "total": "10" + }, + { + "name": "Noroi", + "alliance": "Susien valtakunta", + "skill": "5", + "strength": "4", + "charisma": "4", + "total": "13" + }, + { + "name": "Reima", + "alliance": "Susien valtakunta", + "skill": "5", + "strength": "4", + "charisma": "5", + "total": "14" + }, + { + "name": "Mugen", + "alliance": "Gaian imperiumi", + "skill": "", + "strength": "", + "charisma": "3", + "total": "3" + }, + { + "name": "Thousand Dragon", + "alliance": "Gaian imperiumi", + "skill": "4", + "strength": "3", + "charisma": "3", + "total": "10" + }, + { + "name": "Black-Snake", + "alliance": "Gaian imperiumi", + "skill": "4", + "strength": "4", + "charisma": "4", + "total": "12" + }, + { + "name": "Goldeye", + "alliance": "Gaian imperiumi", + "skill": "4", + "strength": "3", + "charisma": "3", + "total": "10" + }, + { + "name": "White Tiger", + "alliance": "Gaian imperiumi", + "skill": "4", + "strength": "3", + "charisma": "2", + "total": "9" + }, + { + "name": "Big Horn", + "alliance": "Gaian imperiumi", + "skill": "3", + "strength": "4", + "charisma": "2", + "total": "9" + }, + { + "name": "Juga", + "alliance": "Gaian imperiumi", + "skill": "5", + "strength": "4", + "charisma": "4", + "total": "13" + }, + { + "name": "Gaia", + "alliance": "Gaian imperiumi", + "skill": "5", + "strength": "5", + "charisma": "5", + "total": "15" + } + ] +} \ No newline at end of file diff --git a/public/favicon.gif b/public/favicon.gif new file mode 100755 index 0000000..e7f6313 Binary files /dev/null and b/public/favicon.gif differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..089be7a Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/fonts.css b/public/fonts.css new file mode 100644 index 0000000..f849429 --- /dev/null +++ b/public/fonts.css @@ -0,0 +1,16 @@ +@font-face { + font-family: KenneyBold; + src: url('assets/Kenney\ Bold.ttf'); +} + +body { + text-align: center; +} + +#silver-fang-mini-game { + /*width: 1080px; + height: 1920px;*/ + width: 540px; + height: 960px; + margin: auto; +} \ No newline at end of file diff --git a/src/game-base.ts b/src/game-base.ts index 987b517..16c53a4 100644 --- a/src/game-base.ts +++ b/src/game-base.ts @@ -1,16 +1,22 @@ // import * as MiniGame from "mini-game"; import * as Phaser from "phaser"; import MainMenuScene from "./scenes/main-menu"; +import BootScene from "./scenes/boot"; +import PreloaderScene from "./scenes/preloader"; const GameConfig: Phaser.Types.Core.GameConfig = { - title: 'ExampleGame', + title: 'SilverFangMiniGame', version: '2.0', - width: 800, - height: 600, + width: 1080 / 2, + height: 1920 / 2, type: Phaser.AUTO, - parent: 'app', + parent: 'silver-fang-mini-game', // `as as Phaser.Types.Scenes.SettingsConfig[]` is required until https://github.com/photonstorm/phaser/pull/6235 - scene: [MainMenuScene] as Phaser.Types.Scenes.SettingsConfig[], + scene: [ + BootScene, + PreloaderScene, + MainMenuScene, + ] as Phaser.Types.Scenes.SettingsConfig[], input: { keyboard: true }, @@ -20,8 +26,8 @@ const GameConfig: Phaser.Types.Core.GameConfig = { debug: false } }, - backgroundColor: '#300000', - render: { pixelArt: false, antialias: false }, + backgroundColor: '#AAA', + render: { pixelArt: false, antialias: true }, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, @@ -33,25 +39,8 @@ const GameConfig: Phaser.Types.Core.GameConfig = { }; class Game extends Phaser.Game { - //parent: string = '' - //phaserGame: Phaser.Game | null = null - - //constructor(parent: string) { - // this.parent = parent ?? 'game' - //} - - /*start() { - this.phaserGame = new Phaser.Game({ - type: Phaser.AUTO, - parent: this.parent, - width: 800, - height: 600, - backgroundColor: 'rgba(80, 80, 80, 0)', - scene: [MainMenuScene], - }) - return this.phaserGame - }*/ constructor(config: Phaser.Types.Core.GameConfig) { + super({ ...GameConfig, ...config }); } } diff --git a/src/index.ts b/src/index.ts index c0ed9d2..0ba4093 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,4 +2,4 @@ import Game from "./game-base"; -new Game({ parent: 'silver-fang-minigame' }); \ No newline at end of file +new Game({ parent: 'silver-fang-mini-game' }); \ No newline at end of file diff --git a/src/objects/button.ts b/src/objects/button.ts index 795d1ad..d866722 100644 --- a/src/objects/button.ts +++ b/src/objects/button.ts @@ -6,6 +6,7 @@ class GameButton { constructor(scene: Phaser.Scene, x: number, y: number, text: string) { const textObject = new Phaser.GameObjects.Text(scene, x, y, text, { color: 'black', + fontFamily: 'KenneyBold', }) textObject.setOrigin(.5, .5) diff --git a/src/objects/card.ts b/src/objects/card.ts new file mode 100644 index 0000000..5706973 --- /dev/null +++ b/src/objects/card.ts @@ -0,0 +1,94 @@ +import * as Phaser from "phaser"; + +class Card { + scene: Phaser.Scene | null = null; + group: Phaser.GameObjects.Group | null = null; + sprites = []; + isFaceUp: boolean = true; + characterName: string | null = null; + isFlipping: boolean = false; + + constructor(scene: Phaser.Scene, x: number, y: number, characterName: string) { + this.scene = scene; + this.characterName = characterName; + + const cardBackground: Phaser.GameObjects.Image = new Phaser.GameObjects.Image(scene, x, y, 'card-bg', 0) + const cardShadow: Phaser.GameObjects.Image = new Phaser.GameObjects.Image(scene, x, y, 'card-shadow', 0) + const character: Phaser.GameObjects.Image = new Phaser.GameObjects.Image(scene, x, y, 'character-' + characterName + '-card', 0) + + const cardGroup: Phaser.GameObjects.Group = new Phaser.GameObjects.Group(scene) + + cardGroup.add(cardShadow) + cardGroup.add(cardBackground) + cardGroup.add(character) + + this.group = cardGroup + + character.setInteractive(); + scene.add.existing(cardShadow) + scene.add.existing(cardBackground) + scene.add.existing(character) + + scene.add.existing(cardGroup) + + this.sprites.push({ sprite: cardShadow, offsetX: -5, offsetY: -5 }) + this.sprites.push({ sprite: cardBackground, offsetX: 0, offsetY: 0 }) + this.sprites.push({ sprite: character, offsetX: 0, offsetY: 0 }) + } + onEvent(eventName: any, fn: any) { + const sprite = this.sprites[this.sprites.length - 1].sprite + console.log(sprite, eventName, fn) + sprite.on(eventName, fn, this.scene) + } + flip() { + if (this.isFlipping) { + return; + } + this.isFlipping = true; + + const ease = 'Sine.easeIn' + const duration = 100 + const tween = this.scene?.tweens.add({ + targets: this.sprites.map(s => s.sprite), + props: { + scaleX: { value: 0, duration, yoyo: true }, + }, + ease, + onComplete: () => { + this.isFaceUp = !this.isFaceUp; + this.isFlipping = false; + } + }) + this.scene?.tweens.add({ + targets: this.sprites[2].sprite, + props: { + texture: { value: this.isFaceUp ? 'card-bg' : 'character-' + this.characterName + '-card', duration: 0, delay: duration }, + }, + ease, + }) + } + moveTo(x: number, y: number) { + this.scene?.tweens.add({ + targets: this.sprites.filter(s => s.offsetX === 0).map(s => s.sprite), + props: { + x: { value: x, duration: 1000 }, + y: { value: y, duration: 1000 } + }, + ease: 'Expo.out' + }) + this.scene?.tweens.add({ + targets: this.sprites.filter(s => s.offsetX != 0).map(s => s.sprite), + props: { + x: { value: x - 5, duration: 1000 }, + y: { value: y + 5, duration: 1000 } + }, + ease: 'Expo.out' + }) + //this.group?.setXY(x, y) + } + scaleTo(x: number, y: number) { + this.group?.children.iterate((child) => child.setScale(x, y)) + } +} + +export default Card; \ No newline at end of file diff --git a/src/scenes/boot.ts b/src/scenes/boot.ts new file mode 100644 index 0000000..ba00a8d --- /dev/null +++ b/src/scenes/boot.ts @@ -0,0 +1,19 @@ +import { Scene } from 'phaser'; + +class BootScene extends Scene { + constructor() { + super('Boot'); + } + + preload() { + // The Boot Scene is typically used to load in any assets you require for your Preloader, such as a game logo or background. + // The smaller the file size of the assets, the better, as the Boot Scene itself has no preloader. + this.load.image('background01', 'assets/background01.png'); + } + + create() { + this.scene.start('Preloader'); + } +} + +export default BootScene; \ No newline at end of file diff --git a/src/scenes/main-menu.ts b/src/scenes/main-menu.ts index 98db921..3c291d2 100644 --- a/src/scenes/main-menu.ts +++ b/src/scenes/main-menu.ts @@ -1,17 +1,54 @@ import * as Phaser from "phaser"; -// import ButtonSprite from "../objects/button-sprite"; +import Card from "../objects/card"; import GameButton from "../objects/button"; class MainMenuScene extends Phaser.Scene { + constructor() { + super('MainMenu') + } + preload() { - // this.load.image('button-bg', 'assets/panel-000.png'); - this.load.spritesheet('button-bg', 'assets/panel-000.png', { frameWidth: 16, frameHeight: 16 }); } create() { - const button = new GameButton(this, 0, 0, 'A B C D E F G H I J'); + const gameState = { + cards: [], + tablePositions: [] + } - button.moveTo(130, 100) + const { centerX, centerY, width, height } = this.cameras.main; + const bg = this.add.image(centerX, centerY, 'background01'); + const cardsPerRow = 4; + const numCards = cardsPerRow * cardsPerRow; + + const characters = ['akakabuto', 'ben', 'cross', 'gin', 'hyena', 'john', 'madara', 'mosa', 'riki', 'smith', 'sniper'] + + for (let x = 0; x < cardsPerRow; x++) { + for (let y = 0; y < cardsPerRow; y++) { + const char = Math.floor(Math.random() * 100) % characters.length; + const card = new Card(this, 80, 80, characters[char]); + card.scaleTo(.4, .4) + card.flip(); + card.onEvent('clicked', () => { + card.flip() + }) + gameState.cards.push(card); + gameState.tablePositions.push({ x: x * 130 + 80, y: y * 130 + 160 }) + } + } + + gameState.cards.forEach((card, idx) => { + const pos = gameState.tablePositions[idx] + card.moveTo(pos.x, pos.y) + }) + + this.input.on('gameobjectup', function (pointer, gameObject) { + gameObject.emit('clicked', gameObject); + }, this); + + //card.scaleTo(0.5, 0.5) + //card.moveTo(400, 150); + //card.flip() } } diff --git a/src/scenes/preloader.ts b/src/scenes/preloader.ts new file mode 100644 index 0000000..c9aa187 --- /dev/null +++ b/src/scenes/preloader.ts @@ -0,0 +1,52 @@ +import { Scene } from 'phaser'; + +export default class PreloaderScene extends Scene { + constructor() { + super('Preloader'); + } + + init() { + const { centerX, centerY, width, height } = this.cameras.main; + // We loaded this image in our Boot Scene, so we can display it here + const bg = this.add.image(centerX, centerY, 'background01'); + bg.scale = 2; + // A simple progress bar. This is the outline of the bar. + this.add.rectangle(centerX, centerY, 468, 32).setStrokeStyle(2, 0x000000); + + // This is the progress bar itself. It will increase in size from the left based on the % of progress. + const bar = this.add.rectangle(centerX - 230, centerY, 4, 28, 0xffffff); + + const text = this.add.text(centerX, centerY, 'LADATAAN...', { + color: "black", + backgroundColor: "white", + stroke: "#AAA", + strokeThickness: 4, + fontFamily: "Kenney Bold", + }); + text.setOrigin(0.5); + + // Use the 'progress' event emitted by the LoaderPlugin to update the loading bar + this.load.on('progress', (progress: number) => { + // Update the progress bar (our bar is 464px wide, so 100% = 464px) + bar.width = 4 + (460 * progress); + }); + } + + preload() { + this.load.setPath('assets'); + + this.load.spritesheet('button-bg', 'panel-000.png', { frameWidth: 16, frameHeight: 16 }); + this.load.spritesheet('card-bg', 'card-bg.png', { frameWidth: 272, frameHeight: 272 }); + this.load.spritesheet('card-shadow', 'card-shadow.png', { frameWidth: 272, frameHeight: 272 }); + + const characters = ['akakabuto', 'ben', 'cross', 'gin', 'hyena', 'john', 'madara', 'mosa', 'riki', 'smith', 'sniper'] + + characters.forEach(character => { + this.load.spritesheet('character-' + character + '-card', 'characters/' + character + '_card.png', { frameWidth: 256, frameHeight: 256 }); + }); + } + + create() { + this.scene.start('MainMenu'); + } +} \ No newline at end of file