feature: darkmode + player scene enhancements

app/src/models/index.ts

@@ -40,10 +40,15 @@ export class Session {
 }
 
 export class PlayerCharacterScene {
-    constructor(
+    constructor(        
         public readonly session: Session,
     ) { }
 
+
+    get player(): Player {
+        return this.session.self!
+    }
+
     get fatePoints(): number {
         return this.session.self?.fatePoints ?? 0
     }

app/src/views/components/skillcheck.ts

@@ -57,7 +57,7 @@ export interface SkillCheckData {
 
 export const SkillCheck = wecco.define("fcrt-skillcheck", ({data, requestUpdate}: wecco.RenderContext<SkillCheckData>): wecco.ElementUpdate => {
     return wecco.html`<div class="grid grid-cols-1 mt-2 mb-2 pt-2 pb-2 lg:grid-cols-3">
-        <div class="fate-icon text-4xl text-blue-700 flex items-center justify-around">OCAD</div>
+        <div class="fate-icon text-4xl text-blue-700 dark:text-blue-300 flex items-center justify-around">OCAD</div>
         <div class="flex items-center justify-around">
             ${[
             button({ label: "+0", testId: "skill-check-0-btn", onClick: () => { data.result = Result.roll(0); requestUpdate() } }),
@@ -78,7 +78,7 @@ function resultView(result: Result): wecco.ElementUpdate {
     const total = result.total === "below" ? -2 : (result.total === "above" ? 8 : result.total)
 
     return wecco.html`
-        <div class="flex flex-row items-center justify-center text-blue-700" data-testid="skill-check-result">
+        <div class="flex flex-row items-center justify-center text-blue-700 dark:text-blue-300" data-testid="skill-check-result">
             <span class="fate-icon text-xl lg:text-2xl">${result.rolls.map(r => (r == -1) ? "-" : ((r == 1) ? "+" : "0"))}</span>
             <span class="text-lg mr-2">${rating(result.rating)}</span>
             <span class="text-lg mr-2">=</span>

app/src/views/scenes/gamemaster.ts

@@ -48,8 +48,8 @@ function content(model: GamemasterScene, emit: wecco.MessageEmitter<Message>): w
 function aspect(emit: wecco.MessageEmitter<Message>, aspect: Aspect): wecco.ElementUpdate {
     return card(wecco.html`
         <div class="flex justify-between">
-            <span class="text-lg font-bold text-blue-800 flex-grow-1">* ${aspect.name}</span>
-            <a href="#" @click=${() => emit(new RemoveAspect(aspect.id))}><i class="material-icons">close</i></a>
+            <span class="text-lg text-blue-800 dark:text-blue-400 flex-grow-1">${aspect.name}</span>
+            <a href="#" @click=${() => emit(new RemoveAspect(aspect.id))}><i class="material-icons text-gray-600">close</i></a>
         </div>
     `)
 }

app/src/views/scenes/player.ts

@@ -1,6 +1,6 @@
 import * as wecco from "@weccoframework/core"
 import { Message, SpendFatePoint } from "../../control"
-import { Aspect, Player, PlayerCharacterScene, Session, VersionInfo } from "../../models"
+import { Aspect, Player, PlayerCharacterScene, VersionInfo } from "../../models"
 import { m } from "../../utils/i18n"
 import { appShell, button, card, container } from "../widgets/ui"
 
@@ -14,24 +14,44 @@ export function player(versionInfo: VersionInfo, model: PlayerCharacterScene, em
     })
 }
 
-function content(player: PlayerCharacterScene, emit: wecco.MessageEmitter<Message>): wecco.ElementUpdate {
-    return wecco.html`<div class="grid grid-cols-1 divide-y">
+function content(scene: PlayerCharacterScene, emit: wecco.MessageEmitter<Message>): wecco.ElementUpdate {
+    return wecco.html`<div class="grid grid-cols-1">
         <fcrt-skillcheck></fcrt-skillcheck>
-        ${fatePoints(player.fatePoints, emit)}
-        ${aspects(player.session)}
+        ${card([
+            wecco.html`<span class="text-yellow-700 text-xl font-bold">${scene.player.name}</span>`,
+            fatePoints(scene.fatePoints, emit),
+            aspects(scene.player.aspects)
+        ])}
+
+        ${aspects(scene.session.aspects)}
+        ${players(scene)}
     </div>`
 }
 
-function aspects(table: Session): wecco.ElementUpdate {
+function players(scene: PlayerCharacterScene): wecco.ElementUpdate {
+    return scene.session.players.filter(p => p !== scene.player).map(p => otherPlayer(p))
+}
+
+function otherPlayer(player: Player): wecco.ElementUpdate {
+    return card(wecco.html`<div class="grid grid-cols-1">
+        <span class="text-lg font-bold text-yellow-700">${player.name}</span>
+        ${aspects(player.aspects)}
+    </div>`)
+}
+
+// 
+//         ${table.players.map(p => p.aspects.map(a => aspect(a, p)))}
+
+
+function aspects(aspects: Array<Aspect>): wecco.ElementUpdate {
     return wecco.html`<div class="grid grid-cols-1" data-testid="aspects">
-        ${table.aspects.map(a => aspect(a))}
-        ${table.players.map(p => p.aspects.map(a => aspect(a, p)))}
+        ${aspects.map(a => aspect(a))}
     </div>`
 }
 
 function aspect(aspect: Aspect, player?: Player): wecco.ElementUpdate {
     return card(wecco.html`
-        <span class="text-lg font-bold text-blue-800 flex-grow-1">* ${aspect.name}</span>
+        <span class="text-lg text-blue-800 flex-grow-1">${aspect.name}</span>
         ${player ? wecco.html`<span class="text-sm bg-blue-200 rounded p-1 ml-2">${player.name}</span>` : ""}
     `)
 }

app/src/views/widgets/ui.ts

@@ -10,7 +10,7 @@ export interface AppShellOptions {
 
 export function appShell(opts: AppShellOptions): wecco.ElementUpdate {
     return wecco.html`
-        <div class="flex flex-col min-h-screen">
+        <div class="flex flex-col min-h-screen bg-white dark:bg-gray-800">
             <header class="sticky top-0 z-30 w-full max-w-8xl mx-auto mb-2 flex-none flex bg-blue-900">
                 <div
                     class="flex-auto h-16 flex items-center justify-between px-4 sm:px-6 lg:mx-20 lg:px-0 xl:mx-8 text-white font-bold text-lg">
@@ -39,7 +39,7 @@ export function container(content: wecco.ElementUpdate): wecco.ElementUpdate {
 }
 
 export function card(content: wecco.ElementUpdate): wecco.ElementUpdate {
-    return wecco.html`<div class="shadow-lg p-2 m-2 border rounded">${content}</div>`
+    return wecco.html`<div class="shadow-lg p-2 m-2 border rounded dark:border-gray-600">${content}</div>`
 }
 
 export type ButtonCallback = () => void
@@ -67,7 +67,7 @@ export function button(opts: ButtonOpts): wecco.ElementUpdate {
 
     const color = options.disabled ? "gray" : options.color
 
-    let style = `bg-${color}-500 text-white font-bold py-${padding} px-${padding * 2} rounded mr-1`
+    let style = `bg-${color}-500 text-white dark:text-gray-900 font-bold py-${padding} px-${padding * 2} rounded mr-1`
     if (!options.disabled) {
         style += ` hover:bg-${color}-700 shadow-lg`
     }

app/tailwind.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  darkMode: 'media',
   content: [
     "./index.html",
     "./src/**/*.ts",