From 7b70150b5720cf92f7c4697700c28cb6034c61fc Mon Sep 17 00:00:00 2001 From: Avior Date: Thu, 27 May 2021 20:39:01 +0200 Subject: [PATCH] Update Signed-off-by: Avior --- public/assets/pokemon-shuffle/cell-bg.png | Bin 0 -> 595 bytes src/pages/pokemon-shuffle/index.tsx | 150 +++++++++++++----- .../pokemon-shuffle.module.styl | 49 +++++- 3 files changed, 150 insertions(+), 49 deletions(-) create mode 100644 public/assets/pokemon-shuffle/cell-bg.png diff --git a/public/assets/pokemon-shuffle/cell-bg.png b/public/assets/pokemon-shuffle/cell-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..648702888e567addad5af52f63de19ddd7b71801 GIT binary patch literal 595 zcmV-Z0<8UsP)2b@eDX%T6SO%muWZn|N6;uc!a!!cCfU#4Ue%fiBLl?&X5g5%i!oo9* z4M1K5pa4a-#X4hK5v!z6C<{dBsVsJ9IGSA=(1glj#LCMm&A=79GFQ-sAQ+o9ByQci zn%GO1ko7=?wH+xO1e8nNJ4a(HP7_xoGsLe%Qa_{}eFXQX~?^xv>?WY~j!~-`gO7u(0 h61&RpZdv8~kH5Lf;2&L{d`kcT002ovPDHLkV1lHA|2hBw literal 0 HcmV?d00001 diff --git a/src/pages/pokemon-shuffle/index.tsx b/src/pages/pokemon-shuffle/index.tsx index 15cb35a..e112137 100644 --- a/src/pages/pokemon-shuffle/index.tsx +++ b/src/pages/pokemon-shuffle/index.tsx @@ -1,4 +1,4 @@ -import { Button, Table, Text, Util, NotificationManager } from '@dzeio/components' +import { Button, Table, Text, Util, NotificationManager, Col, Row } from '@dzeio/components' import React, { MouseEvent as ReactMouseEvent } from 'react' import css from './pokemon-shuffle.module.styl' @@ -20,9 +20,14 @@ interface States { combo: number comboMax: number cursorPos: {x: number, y: number} + boss: { + hp: number + id: number + } } -const ITEM_COUNT = 4 +// up by 1 because of `1` +const ITEM_COUNT = 2 + 1 const BOARD_SIZE = 6 let n = BOARD_SIZE @@ -34,11 +39,18 @@ export default class PokemonShuffle extends React.Component { turn: 0, combo: 0, comboMax: 0, - cursorPos: {x: 0, y: 0} + cursorPos: {x: 0, y: 0}, + boss: { + hp: 10e3, + id: 2 + } } public async componentDidMount() { await this.start() + this.setState({ + comboMax: parseInt(window.localStorage.getItem('pokemon-shuffle/comboMax') ?? '0', 10) + }) } public render = () => ( @@ -48,34 +60,58 @@ export default class PokemonShuffle extends React.Component {
  • Combo: {this.state.combo}, Max: {this.state.comboMax}
  • Points: {this.state.damage}
    • - - - {this.state.items.map((row, y) => ( - - {row.map((cell, x) => ( - + + + + + + + + +
    +
    +
    +
    +
    + + + + +
    - {/* {JSON.stringify(cell)} */} - {cell && ( - -
    -     - )} -
    + + {this.state.items.map((row, y) => ( + + {row.map((cell, x) => ( + + ))} + ))} - - ))} - -
    + {/* {JSON.stringify(cell)} */} + {cell && ( + + + )} +
    + + + + + {this.state.movingItem && (
    {
    • Faire que les clear ce fasse de manière Async
      • -
    • Meilleurs Animation de destruction
      • -
    • Annuler le mouvement si rien n'est claim
    • Utiliser le système de damages de Pokémon Shuffle https://bulbapedia.bulbagarden.net/wiki/Pok%C3%A9mon_Shuffle#Damage
      • +
    • Mode VS (Voir si on fait en local et/ou en ligne avec le Websocket)
      • +
    • Système de classement en ligne (maybe avec un compte pour eviter lees hackers lol)
      • +
    • Combat de boss a la Pokémon Shuffle lol
    @@ -142,13 +179,29 @@ export default class PokemonShuffle extends React.Component { document.removeEventListener('mousemove', this.mouveMove) const items = this.state.items const temp = items[y][x] + console.log(temp, this.state.movingItem) items[y][x] = this.state.movingItem.cell - items[this.state.movingItem.y][this.state.movingItem.x] = temp + const tmpX = this.state.movingItem.x + const tmpY = this.state.movingItem.y + if (temp) { + items[tmpY][tmpX] = temp + } this.setState({ movingItem: undefined, loading: true, items - }, () => this.calculate()) + }, async () => { + const revert = !await this.calculate() + if (revert) { + const movingItem = items[y][x] + items[y][x] = temp + items[tmpY][tmpX] = movingItem + this.setState({ + items, + turn: this.state.turn - 1 + }) + } + }) } } @@ -161,7 +214,7 @@ export default class PokemonShuffle extends React.Component { * Check if items has combos * @returns if items were changed */ - private async checkup(): Promise { + private async checkup(initial: boolean): Promise { const items = this.state.items let checkupCount = 0 let newPoints = 0 @@ -175,7 +228,7 @@ export default class PokemonShuffle extends React.Component { if (!cell.horizontalCombo && !(cell.isFalling || cell.justSpawned)) { let sameCount = 0 while((x + ++sameCount) < items.length) { - console.log(y + sameCount, x) + // console.log(y + sameCount, x) const tmp = row[x + sameCount] if (!tmp || tmp.id !== id || tmp.isFalling || tmp.justSpawned) {break} } @@ -219,11 +272,15 @@ export default class PokemonShuffle extends React.Component { // If combos were found if (checkupCount) { const combo = this.state.combo + checkupCount + const comboMax = Math.max(this.state.comboMax, combo) + if (comboMax === combo && !initial) { + window.localStorage.setItem('pokemon-shuffle/comboMax', comboMax.toString()) + } await this.asyncSetState({ items, damage: this.state.damage + newPoints, combo, - comboMax: Math.max(this.state.comboMax, combo) + comboMax }) } return !!checkupCount @@ -245,6 +302,7 @@ export default class PokemonShuffle extends React.Component { })) let needContinue = false + let hadTurn = false do { // Make items fall needContinue = false @@ -284,9 +342,10 @@ export default class PokemonShuffle extends React.Component { } // Checkup if there is combos - const checkup = await this.checkup() + const checkup = await this.checkup(initial) if (!checkup && !needContinue) { - return await this.endTurn({items}) + await this.endTurn({items}) + break } // Clear items @@ -304,13 +363,15 @@ export default class PokemonShuffle extends React.Component { if (hasCleared && !initial) { await wait(500) } + hadTurn = true } while (needContinue) + return hadTurn } } function calculateScore(len: number, combo: number) { - let score = len * 40 // currently the damage + let score = (len - 2) * 40 // currently the damage if (len > 3) { switch (len) { case 4: @@ -355,8 +416,13 @@ function calculateScore(len: number, combo: number) { return score } -function random(min = 0, max = 100) { - return Math.floor(Math.random() * (max - min) + min) +function random(min = 0, max = 100): number { + const r = Math.floor(Math.random() * (max - min) + min) + // dont return 1 as it is the `?` + if (r === 1) { + return random(min, max) + } + return r } function wait(time: number): Promise { diff --git a/src/pages/pokemon-shuffle/pokemon-shuffle.module.styl b/src/pages/pokemon-shuffle/pokemon-shuffle.module.styl index 65e458e..6992de4 100644 --- a/src/pages/pokemon-shuffle/pokemon-shuffle.module.styl +++ b/src/pages/pokemon-shuffle/pokemon-shuffle.module.styl @@ -17,18 +17,33 @@ $iconSize = 121px width $iconSize padding 0 !important height $iconSize + box-shadow inset 0 0 8px 1px black + background-image url('/assets/pokemon-shuffle/cell-bg.png') + border-radius 16px + +.table + background #7E6E5E + border-spacing 8px + border-radius 16px + border solid white 4px + +.boss + // margin auto + transform scale(3) + margin ($iconSize)px auto .cell width $iconSize transition filter .5s ease-in-out height $iconSize background-image url('/assets/pokemon-shuffle/icons.png') - animation idleAnimation ease-in-out 1s - animation-iteration-count infinite + &:not(.noAnimation) + animation idleAnimation ease-in-out 1s + animation-iteration-count infinite transform-origin 50% 50% - for num in (0..30) + for num in (0..810) &.icon-{num} - background-position ((num + 1) * $iconSize) 0px + background-position right ((num % 30) * $iconSize) bottom (math(num / 30, 'trunc') * $iconSize + $iconSize)px &.isFalling position absolute @@ -58,10 +73,30 @@ $iconSize = 121px animation-fill-mode forwards &.justSpawned - animation spawnAnimation ease-in-out 0.5s + animation spawnAnimation ease-in-out .3s animation-iteration-count 1 transform-origin 50% 50% +.bossBar + width 300px + border 4px solid white + padding 3px + $height = 10px + height $height + @padding[0] * 2 + @border[0] * 2 + background #ED869F + + border-radius 16px + > div + background #7E7C7B + width 100% + border-radius 16px + height $height + > div + background linear-gradient(to bottom, #FFCAB1, #E7A09E) + border-radius 16px + height inherit + transition width .3s ease-in-out + @keyframes idleAnimation 0% transform rotate(0) @@ -98,11 +133,11 @@ $iconSize = 121px 20% transform scale(1.3) - filter brightness(1.7) + filter brightness(1.5) 100% transform scale(0) - filter brightness(1.5) + filter brightness(1.2)