diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..3fe1978 --- /dev/null +++ b/TODO.md @@ -0,0 +1,56 @@ + +- Main menu design + - Title + - Cards + - Side items + - Background + +- General UI design + - Tabs + - Navigation + - Tab panel background + - Scroll content + - Link design + - Tween system + - Animation system + +- How to play + - How to play text for freecell spider + + +- Settings + - Dropdown ui + - General settings + - Solitaire settings + - Freecell settings + - Spider settings + + +- Settings functionality + - color theme + - language + - sounds + +- Statistics + - functionality + - mini game view visual + - side items design + - last activity panel + + +- Solitaire View + + - Hamburger + - Side menu + - Side menu background + - Side menu items + - Overlay + - Links referencing back to solitaire view + - settings, how to play opens specific tabs + - score bar + - undo button + - play area + - keep statistics + +- Freecell View +- Spider View diff --git a/content/out_0.json b/content/out_0.json index e8d4e4a..857d5c3 100755 --- a/content/out_0.json +++ b/content/out_0.json @@ -1 +1 @@ -{"sprites":[{"name":"main_card_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":0,"y":0,"w":420,"h":520},"packed":{"x":0,"y":0,"w":420,"h":520}}]}]} \ No newline at end of file +{"sprites":[{"name":"main_card_bg","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":0,"y":0,"w":420,"h":520},"packed":{"x":0,"y":0,"w":420,"h":520}}]},{"name":"menu_bar","tags":[{"from":0,"to":0,"name":"idle"}],"packs":[{"frame":{"x":0,"y":0,"w":240,"h":160},"packed":{"x":0,"y":520,"w":240,"h":160}}]}]} \ No newline at end of file diff --git a/content/out_0.png b/content/out_0.png index be82b30..bc236db 100755 Binary files a/content/out_0.png and b/content/out_0.png differ diff --git a/content/sprites/menu_bar.ase b/content/sprites/menu_bar.ase new file mode 100755 index 0000000..3a00e3c Binary files /dev/null and b/content/sprites/menu_bar.ase differ diff --git a/screens/design.ase b/screens/design.ase index 066ce9c..6a3ec37 100755 Binary files a/screens/design.ase and b/screens/design.ase differ diff --git a/src/game.ts b/src/game.ts index ccbd86e..c0d3840 100644 --- a/src/game.ts +++ b/src/game.ts @@ -23,7 +23,7 @@ type RectData = { color?: Color } -class RectView extends Play { +export class RectView extends Play { get data() { return this._data as RectData @@ -83,7 +83,7 @@ type ClickableData = { on_click?: () => void } -class Clickable extends Play { +export class Clickable extends Play { get data() { return this._data as ClickableData @@ -558,7 +558,7 @@ class ScrollableListLongContent extends Play { } -class Settings extends Play { +export class Settings extends Play { _init() { this.make(Background, Vec2.zero, undefined) @@ -586,7 +586,7 @@ class Settings extends Play { } } -class About extends Play { +export class About extends Play { _init() { this.make(Background, Vec2.zero, undefined) @@ -615,7 +615,7 @@ class About extends Play { } } -class HowtoPlay extends Play { +export class HowtoPlay extends Play { _init() { @@ -1214,7 +1214,8 @@ class SceneTransition extends Play { this.target = Target.create(Game.width, Game.height) this.mask_target = Target.create(Game.width, Game.height) - this.current = this._make(MainMenu, Vec2.zero, {}) + this.current = this._make(SolitairePlay, Vec2.zero, {}) + // this.current = this._make(MainMenu, Vec2.zero, {}) //this.current = this._make(Statistics, Vec2.zero, {}) transition.set_matrix(Mat3x2.create_scale_v(Game.v_screen)) diff --git a/src/play.ts b/src/play.ts index fb6d871..cdf82c7 100644 --- a/src/play.ts +++ b/src/play.ts @@ -17,6 +17,7 @@ export const link_color = Color.hex(0x4ab2cd) export abstract class Play { + visible: boolean = true g_position!: Vec2 position!: Vec2 @@ -72,7 +73,9 @@ export abstract class Play { } draw(batch: Batch) { - this._draw(batch) + if (this.visible) { + this._draw(batch) + } } _draw_children(batch: Batch) { diff --git a/src/solitaire.ts b/src/solitaire.ts index cae6302..ce5e840 100644 --- a/src/solitaire.ts +++ b/src/solitaire.ts @@ -15,24 +15,169 @@ import { bg1, link_color, Play, PlayType} from './play' import { Anim } from './anim' -import { Background, MainMenu, Navigation } from './game' +import { Text, RectView, Clickable, Background, MainMenu } from './game' import { scene_transition }from './game' +import { HowtoPlay, Settings, About } from './game' + + export class SolitairePlay extends Play { _init() { + let sidebar: SideBar this.make(Background, Vec2.zero, undefined) - this.make(Navigation, Vec2.zero, { - route: 'solitaire', - on_back() { + let overlay = this.make(RectView, Vec2.zero, { + w: 1920, + h: 1080, + color: Color.white + }) + overlay.visible = false + + this.make(Hamburger, Vec2.make(2, 2), { + on_click: () => { + sidebar.open = !sidebar.open + overlay.visible = sidebar.open + } + }) + + sidebar = this.make(SideBar, Vec2.make(0, 180), { + }) + } +} + + +class SideBar extends Play { + + get x() { + return this.open ? 8 : -400 + } + + open: boolean = false + + _init() { + + this.make(RectView, Vec2.make(0, 0), { + w: 400, + h: 820, + color: Color.black + }) + + let x = 20 + let y = 60 + let h = 160 + this.make(SideBarItem, Vec2.make(x, y), { + text: 'main menu', + on_click() { scene_transition.next(MainMenu) } }) + this.make(SideBarItem, Vec2.make(x, y + h), { + text: 'new game', + on_click() { + } + }) + this.make(SideBarItem, Vec2.make(x, y + h * 2), { + text: 'settings', + on_click() { + scene_transition.next(Settings) + } + }) + this.make(SideBarItem, Vec2.make(x, y + h * 3), { + text: 'how to play', + on_click() { + scene_transition.next(HowtoPlay) + } + }) + this.make(SideBarItem, Vec2.make(x, y + h * 4), { + text: 'about', + on_click() { + scene_transition.next(About) + } + }) + } + _update() { + this.position.x = appr(this.position.x, this.x, Time.delta * 1000) } } + + +type SideBarItemData = { + text: string, + on_click: () => void +} +class SideBarItem extends Play { + get data() { + return this._data as SideBarItemData + } + + _init() { + this.make(Text, Vec2.make(0, 0), { + text: this.data.text, + size: 110, + }) + + + let w = 360, + h = 120 + + let self = this + + this.make(Clickable, Vec2.make(0, 0), { + rect: Rect.make(0, 0, w, h), + on_hover() { + }, + on_hover_end() { + }, + on_click() { + self.data.on_click() + } + }) + + + } + + +} + +type HamburgerData = { + on_click: () => void +} + +class Hamburger extends Play { + + get data() { + return this._data as HamburgerData + } + + _init() { + + this.make(Anim, Vec2.make(0, 0), { + name: 'menu_bar' + }) + + + let w = 200, + h = 100 + + let self = this + + this.make(Clickable, Vec2.make(20, 20), { + rect: Rect.make(0, 0, w, h), + on_hover() { + }, + on_hover_end() { + }, + on_click() { + self.data.on_click() + } + }) + + + } +}