fix editing game type, and initial defaults

README.md

@@ -60,7 +60,7 @@ This will also bring up the Holochain Playground for advanced introspection of t
 To package the web happ:
 ``` bash
 npm run package
-```F
+```
 
 You'll have the `gamez.webhapp` in `workdir`. This is what you should distribute so that the Holochain Launcher can install it.
 You will also have its subcomponent `gamez.happ` in the same folder`.

ui/src/BoardEditor.svelte

@@ -21,7 +21,6 @@
     export let handleDelete = undefined
     export let cancelEdit
 
-    let boardHash:EntryHashB64|undefined = undefined
     let text = ''
     let props:BoardProps = {bgUrl: "", pieces:{}}
     let pieceDefs: Array<PieceDef> = []
@@ -33,18 +32,11 @@
       pieceDefs = []
     }
 
-    export const  edit = async (hash: EntryHashB64)=> {
-      boardHash = hash
-      const board: Board | undefined = await store.boardList.getBoard(boardHash)
-      if (board) {
-          const state = board.state()
-          text = state.name
-          nameInput.value = text
-          pieceDefs = cloneDeep(state.pieceDefs)
-          props = state.props ? cloneDeep(state.props) : {bgUrl:""}
-      } else {
-          console.log("board not found:", boardHash)
-      }
+    export const  edit = async (state: BoardState)=> {
+      text = state.name
+      nameInput.value = text
+      pieceDefs = cloneDeep(state.pieceDefs)
+      props = state.props ? cloneDeep(state.props) : {bgUrl:""}
     }
 
     const addPieceDef = () => {
@@ -104,6 +96,7 @@
       </div>
       <sl-dialog label="Choose Emoji" bind:this={emojiDialog}>
           <emoji-picker on:emoji-click={(e)=>  {
+            console.log("PD", pieceDefs)
             pieceDefs[showEmojiPicker].images[0] = e.detail.unicode
             showEmojiPicker = undefined
             emojiDialog.hide()
@@ -114,25 +107,34 @@
       <DragDropList
         id="pieceDefs"
         type={VerticalDropZone}
-	      itemSize={45}
+	      itemSize={100}
         itemCount={pieceDefs.length}
         on:drop={onDropPieceDefs}
         let:index
         itemClass="unselectable"
         >
-        <div class="label-def">
+        <div class="piece-def">
           <div class="grip" ><Fa icon={faGripVertical}/></div>
-          <sl-button on:click={()=>{showEmojiPicker = index;emojiDialog.show()}} >
-            <span style="font-size:180%">{pieceDefs[index].images[0]}</span>
-          </sl-button>
-          <sl-input class='textarea' value={pieceDefs[index].images[0]} title="piece value"
-          on:input={e=>pieceDefs[index].images[0] = e.target.value}> </sl-input>
-          <sl-input class='textarea' value={pieceDefs[index].name} title="piece name"
-          on:input={e=>pieceDefs[index].name = e.target.value}> </sl-input>
-          <sl-button size="small"  on:click={deletePieceDef(index)} >
+          <div style="display:flex; flex-direction:column; ">
+
+            <div style="display:flex; flex-direction:row; align-items:flex-end;">
+              <sl-input label="Emoji" style="width:65px;" class='textarea' maxlength={1} value={pieceDefs[index].images[0]} title="piece value"
+              on:input={e=>pieceDefs[index].images[0] = e.target.value}> </sl-input>
+              <sl-button style="margin-bottom:5px" on:click={()=>{showEmojiPicker = index;emojiDialog.show()}} >
+                Pick
+              </sl-button>
+              <sl-input label="Name" style="width:165px;margin-left:10px" class='textarea' value={pieceDefs[index].name} title="piece name"
+              on:input={e=>pieceDefs[index].name = e.target.value}> </sl-input>
+              <sl-input label="Width" style="width:70px;" maxlength={3} class='textarea' value={pieceDefs[index].width}
+              on:input={e=>pieceDefs[index].width = parseInt(e.target.value)}> </sl-input>
+              <sl-input label="Height" style="width:70px;" maxlength={3} class='textarea' value={pieceDefs[index].height}
+              on:input={e=>pieceDefs[index].height = parseInt(e.target.value)}> </sl-input>
+            </div>
+          </div>
+          <sl-button style="margin-left:25px" size="small"  on:click={deletePieceDef(index)} >
             <Fa icon={faTrash}/>
           </sl-button>
-        </div>
+    </div>
       </DragDropList> 
     </div>
 
@@ -160,7 +162,7 @@
  <style>
   .board-editor {
     display: flex;
-    flex-basis: 270px;
+    flex-basis: 500px;
     font-style: normal;
     font-weight: 600;
     color: #000000;
@@ -182,12 +184,10 @@
     padding-left: 7px;
     padding-top: 10px;
   }
-  .group {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .label-def, .category-def {
+  .piece-def  {
+    border: solid 1px lightgray;
+    padding:10px;
+    border-radius: 10px;
     display: flex;
     flex-direction: row;
     align-items: center;

ui/src/Controller.svelte

@@ -10,6 +10,7 @@
     import { faCog, faFileImport, faSquarePlus } from '@fortawesome/free-solid-svg-icons';
     import { cloneDeep } from "lodash";
     import NewBoardDialog from './NewBoardDialog.svelte';
+    import EditGameTypeDialog from './EditGameTypeDialog.svelte';
 
     export let roleName = ""
   
@@ -68,6 +69,7 @@
         reader.readAsText(file);
     };
     let newBoardDialog
+    let editBoardDialog
 
   </script>
 
@@ -77,10 +79,11 @@
   <div class="flex-scrollable-parent">
     <div class="flex-scrollable-container">
     <div class='app' >
-      <NewBoardDialog bind:this={newBoardDialog}></NewBoardDialog>
 
     {#if gzStore}
-      <Toolbar profilesStore={profilesStore}/>
+    <NewBoardDialog bind:this={newBoardDialog}></NewBoardDialog>
+    <EditGameTypeDialog bind:this={editBoardDialog}></EditGameTypeDialog>
+    <Toolbar profilesStore={profilesStore}/>
       {#if ($boardList.avatars[myAgentPubKey] && $boardList.avatars[myAgentPubKey].name) || profilesStore}
         {#if $activeBoardHash !== undefined}
           <GamezPane on:requestChange={(event) => {gzStore.boardList.requestBoardChanges($activeBoardHash,event.detail)}}/>
@@ -90,25 +93,39 @@
 
           <div style="display:flex">
           <div style="margin-right:100px">
-            <h3>New Game:</h3>
+            <h3>Games:</h3>
               {#each $boardList && $boardList.boardTypes as boardType}
-                <sl-button
-                  style="max-width:100px;margin-right:10px"
-                  on:click={async ()=>{
-
-                    const board = await gzStore.boardList.makeBoard(cloneDeep(boardType.board))
-                    gzStore.boardList.setActiveBoard(board.hashB64())                  
-                  }}
-                >
-                  {boardType.name}
-                </sl-button>
+                <div style="display:flex; align-items:center;margin-bottom:5px;">
+                  <h3 style="margin-right:5px;">{boardType.name}:</h3> 
+                  <sl-button
+                    style="max-width:100px;margin-right:10px"
+                    on:click={async ()=>{
+
+                      const board = await gzStore.boardList.makeBoard(cloneDeep(boardType.board))
+                      gzStore.boardList.setActiveBoard(board.hashB64())                  
+                    }}
+                  >
+                    Play!
+                  </sl-button>
+                  <sl-button
+                    style="max-width:100px;margin-right:10px"
+                    on:click={async ()=>{     
+                      editBoardDialog.open(cloneDeep(boardType))           
+                    }}
+                  >
+                    <Fa icon={faCog}></Fa>
+                  </sl-button>
+                </div>
               {/each}
           </div>
           <div class="new-type">
             <h3>New Game Type:</h3>
             <input style="display:none" type="file" accept=".json" on:change={(e)=>onFileSelected(e)} bind:this={fileinput} >
-            <sl-button on:click={()=>newBoardDialog.open()} style="" title="New Board">New <Fa icon={faSquarePlus} size=1x /></sl-button>
-            <sl-button on:click={()=>{fileinput.click();}} title="Import Board">Import <Fa icon={faFileImport} size=1x/></sl-button>                      
+            {#if $boardList && $boardList.boardTypes.length ==0}
+              <sl-button on:click={()=>{gzStore.addDefaultGames()}} title="Default Games">Default <Fa icon={faFileImport} size=1x/></sl-button>                      
+            {/if}
+              <sl-button on:click={()=>newBoardDialog.open()} style="" title="New Game">New <Fa icon={faSquarePlus} size=1x /></sl-button>
+            <sl-button on:click={()=>{fileinput.click();}} title="Import Game">Import <Fa icon={faFileImport} size=1x/></sl-button>                      
             </div>
           </div>
         </div> 

ui/src/EditBoardDialog.svelte

@@ -18,8 +18,11 @@
 
     export const  open = async (hash: EntryHashB64)=> {
         boardHash = hash
-        boardEditor.edit(hash)
-        dialog.show()
+        const board: Board | undefined = await store.boardList.getBoard(boardHash)
+        if (board) {
+            boardEditor.edit(board.state())
+            dialog.show()
+        }
     }
 
     const { getStore } :any = getContext('gzStore');
@@ -72,7 +75,7 @@
     }
     let boardEditor
 </script>
-<sl-dialog persistent bind:this={dialog} label="Edit Board" 
+<sl-dialog style="--width:600px" bind:this={dialog} label="Edit Board" 
 on:sl-request-close={(event)=>{
     if (event.detail.source === 'overlay') {
     event.preventDefault();    

ui/src/EditGameTypeDialog.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    import BoardEditor from './BoardEditor.svelte';
+    import type { GamezStore } from './store';
+    import { getContext, onMount } from 'svelte';
+    import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
+    import '@shoelace-style/shoelace/dist/components/button/button.js';
+    import type SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog';
+    import type { BoardProps, PieceDef } from './board';
+    import type { BoardType } from './boardList';
+    import { cloneDeep } from "lodash";
+
+    let dialog: SlDialog
+    onMount(async () => {
+
+    })
+    let boardType: BoardType
+
+    export const  open = async (type: BoardType)=> {
+        boardType = type
+        boardEditor.edit(cloneDeep(type.board))
+        dialog.show()
+    }
+
+    const { getStore } :any = getContext('gzStore');
+
+    const store:GamezStore = getStore();
+
+    const updateBoard = async ( name: string, pieceDefs: PieceDef[], props: BoardProps) => {
+        store.boardList.requestChanges([
+            {
+                type: 'set-board-type',
+                id: boardType.id,
+                board: {
+                    status: boardType.board.status,
+                    players: [],
+                    max_players: boardType.board.max_players,
+                    min_players: boardType.board.min_players,
+                    name,
+                    pieceDefs,
+                    props
+                }
+            }])
+
+        close()
+    }
+    // const archiveBoard = () => {
+    //     store.boardList.archiveBoard(boardHash)
+    //     close()
+    // }
+    const close = ()=>{
+        dialog.hide()
+    }
+    let boardEditor
+</script>
+<sl-dialog style="--width:600px" bind:this={dialog} label="Edit Board" 
+on:sl-request-close={(event)=>{
+    if (event.detail.source === 'overlay') {
+    event.preventDefault();    
+}}}>
+    <BoardEditor bind:this={boardEditor} handleSave={updateBoard} handleDelete={undefined} cancelEdit={close}/>
+</sl-dialog>

ui/src/NewBoardDialog.svelte

@@ -27,7 +27,7 @@
     let boardEditor
 
 </script>
-<sl-dialog bind:this={dialog} label="New Board"
+<sl-dialog style="--width:600px" bind:this={dialog} label="New Board"
     on:sl-request-close={(event)=>{
         if (event.detail.source === 'overlay') {
         event.preventDefault();    

ui/src/board.ts

@@ -17,6 +17,8 @@ export class  PieceDef {
   type: uuidv1
   constructor(
     public name: string, 
+    public height:number,
+    public width: number,
     public images: Array<string> // possible things a piece can look like
     ){
       this.type = uuidv1()

ui/src/boardList.ts

@@ -49,7 +49,7 @@ export type BoardListDelta =
   | {
     type: "set-board-type";
     id: uuidv1;
-    boardType: BoardType;
+    board: BoardState;
   }
   | {
     type: "set-avatar";
@@ -111,7 +111,8 @@ export const boardListGrammar: BoardListGrammar = {
         if (delta.type == "set-board-type") {
             const index = state.boardTypes.findIndex((type) => type.id === delta.id)
             if (index >= 0) {
-              state.boardTypes[index] = delta.boardType
+              state.boardTypes[index].board = delta.board
+              state.boardTypes[index].name = delta.board.name
             }    
         }
         if (delta.type == "set-name") {

ui/src/store.ts

@@ -81,7 +81,26 @@ export class GamezStore {
         this.boardList.requestChanges(changes)
         await this.boardList.workspace.commitChanges()       
     }
-
+    async addDefaultGames(): Promise<any> {
+        let changes = [{
+            type: "add-board-type",
+            boardType: {
+                id: uuidv1(),
+                name: "Chess",
+                board:CHESS
+            }},
+        {
+            type: "add-board-type",
+            boardType: {
+                id: uuidv1(),
+                name: "Go",
+                board:GO
+            }},
+        ]
+        //@ts-ignore
+        this.boardList.requestChanges(changes)
+        await this.boardList.workspace.commitChanges()
+    }
     async findOrMakeRoots(): Promise<any> {
 
         const roots = await toPromise(this.synStore.allRoots)
@@ -91,24 +110,6 @@ export class GamezStore {
         if (records.entryMap.size == 0) { 
             console.log(`Found no root entries, creating`)
             this.boardList = await BoardList.Create(this.synStore);
-            let changes = [{
-                    type: "add-board-type",
-                    boardType: {
-                        id: uuidv1(),
-                        name: "Chess",
-                        board:CHESS
-                    }},
-                {
-                    type: "add-board-type",
-                    boardType: {
-                        id: uuidv1(),
-                        name: "Go",
-                        board:GO
-                    }},
-            ]
-            //@ts-ignore
-            this.boardList.requestChanges(changes)
-            await this.boardList.workspace.commitChanges()
         } else {
             let boardListRoot
             let boardsRoot