design

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

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}}]}]}
+{"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}}]}]}

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<T> 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))

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) {

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()
+      }
+    })
+
+
+  }
+}