-
Notifications
You must be signed in to change notification settings - Fork 15
July 2026 upgrades #61
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -144,112 +144,84 @@ | |||||||||||||
|
|
||||||||||||||
| <div id="game-settings"> | ||||||||||||||
| <div class="settings-group"> | ||||||||||||||
| <label class="group-label">Image backend</label> | ||||||||||||||
| <div class="options-container"> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="gemini" | ||||||||||||||
| name="imageGenerator" | ||||||||||||||
| value="gemini" | ||||||||||||||
| (click)="setConfig('imageGenerator', 'gemini')" | ||||||||||||||
| [checked]="gameSettings.imageGenerator === 'gemini'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="gemini" class="option-label">Gemini 3.1 Flash-Lite</label> | ||||||||||||||
| </div> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="imagen" | ||||||||||||||
| name="imageGenerator" | ||||||||||||||
| value="imagen" | ||||||||||||||
| (click)="setConfig('imageGenerator', 'imagen')" | ||||||||||||||
| [checked]="gameSettings.imageGenerator === 'imagen'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="imagen" class="option-label">Imagen 4 Fast</label> | ||||||||||||||
| </div> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="veo" | ||||||||||||||
| name="imageGenerator" | ||||||||||||||
| value="veo" | ||||||||||||||
| (click)="setConfig('imageGenerator', 'veo')" | ||||||||||||||
| [checked]="gameSettings.imageGenerator === 'veo'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="veo" class="option-label">Veo 3.1 Fast</label> | ||||||||||||||
| </div> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="omni" | ||||||||||||||
| name="imageGenerator" | ||||||||||||||
| value="omni" | ||||||||||||||
| (click)="setConfig('imageGenerator', 'omni')" | ||||||||||||||
| [checked]="gameSettings.imageGenerator === 'omni'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="omni" class="option-label">Omni (Veo 3.1)</label> | ||||||||||||||
| <label class="group-label">Graphics backend</label> | ||||||||||||||
| <div class="selector-box"> | ||||||||||||||
| <button class="selector-trigger" type="button"> | ||||||||||||||
| <span class="selected-text">{{ getSelectedLabel('imageGenerator') }}</span> | ||||||||||||||
| <span class="options-hint">+5 models ▾</span> | ||||||||||||||
| </button> | ||||||||||||||
| <div class="selector-menu"> | ||||||||||||||
| <div class="selector-header">Image Models</div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('imageGenerator', 'imagen')" [class.active]="gameSettings.imageGenerator === 'imagen'"> | ||||||||||||||
| Imagen 4 Fast | ||||||||||||||
| </div> | ||||||||||||||
|
Comment on lines
+155
to
+157
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Using non-interactive Please apply this change to all
Suggested change
|
||||||||||||||
| <div class="selector-option" (click)="setConfig('imageGenerator', 'gemini')" [class.active]="gameSettings.imageGenerator === 'gemini'"> | ||||||||||||||
| Gemini 3.1 Flash-Lite | ||||||||||||||
| </div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('imageGenerator', 'gemini-anim')" [class.active]="gameSettings.imageGenerator === 'gemini-anim'"> | ||||||||||||||
| Gemini 3.1 Animation (4-Frame) | ||||||||||||||
| </div> | ||||||||||||||
|
|
||||||||||||||
| <div class="selector-header">Video Models (with frame extraction)</div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('imageGenerator', 'veo')" [class.active]="gameSettings.imageGenerator === 'veo'"> | ||||||||||||||
| Veo 3.1 Fast | ||||||||||||||
| </div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('imageGenerator', 'omni')" [class.active]="gameSettings.imageGenerator === 'omni'"> | ||||||||||||||
| Omni (Veo 3.1) | ||||||||||||||
| </div> | ||||||||||||||
|
|
||||||||||||||
| <div class="selector-header">Local Models</div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('imageGenerator', 'gemma-cga')" [class.active]="gameSettings.imageGenerator === 'gemma-cga'"> | ||||||||||||||
| Gemma CGA Pixel Art (MediaPipe) | ||||||||||||||
| </div> | ||||||||||||||
| </div> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="gemini-anim" | ||||||||||||||
| name="imageGenerator" | ||||||||||||||
| value="gemini-anim" | ||||||||||||||
| (click)="setConfig('imageGenerator', 'gemini-anim')" | ||||||||||||||
| [checked]="gameSettings.imageGenerator === 'gemini-anim'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="gemini-anim" class="option-label">Gemini 3.1 Animation (4-Frame)</label> | ||||||||||||||
| </div> | ||||||||||||||
| </div> | ||||||||||||||
|
|
||||||||||||||
| <div class="settings-group"> | ||||||||||||||
| <label class="group-label">Image-to-text analysis</label> | ||||||||||||||
| <div class="selector-box"> | ||||||||||||||
| <button class="selector-trigger" type="button"> | ||||||||||||||
| <span class="selected-text">{{ getSelectedLabel('imageAnalysis') }}</span> | ||||||||||||||
| <span class="options-hint">+2 models ▾</span> | ||||||||||||||
| </button> | ||||||||||||||
| <div class="selector-menu"> | ||||||||||||||
| <div class="selector-header">Server Models</div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('imageAnalysis', 'gemini')" [class.active]="gameSettings.imageAnalysis === 'gemini' || !gameSettings.imageAnalysis"> | ||||||||||||||
| Gemini 2.5 Flash | ||||||||||||||
| </div> | ||||||||||||||
|
|
||||||||||||||
| <div class="selector-header">Local Models</div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('imageAnalysis', 'gemma-mediapipe')" [class.active]="gameSettings.imageAnalysis === 'gemma-mediapipe'"> | ||||||||||||||
| Gemma 4 (MediaPipe) | ||||||||||||||
| </div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('imageAnalysis', 'chrome-llm')" [class.active]="gameSettings.imageAnalysis === 'chrome-llm'"> | ||||||||||||||
| Chrome Built-in Model | ||||||||||||||
| </div> | ||||||||||||||
| </div> | ||||||||||||||
| </div> | ||||||||||||||
| </div> | ||||||||||||||
|
|
||||||||||||||
| <div class="settings-group"> | ||||||||||||||
| <label class="group-label">Art style</label> | ||||||||||||||
| <div class="options-container"> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="realistic" | ||||||||||||||
| name="visualStyle" | ||||||||||||||
| value="realistic" | ||||||||||||||
| (click)="setConfig('visualStyle', 'realistic')" | ||||||||||||||
| [checked]="gameSettings.visualStyle === 'realistic'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="realistic" class="option-label">Realistic</label> | ||||||||||||||
| </div> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="cartoon" | ||||||||||||||
| name="visualStyle" | ||||||||||||||
| value="cartoon" | ||||||||||||||
| (click)="setConfig('visualStyle', 'cartoon')" | ||||||||||||||
| [checked]="gameSettings.visualStyle === 'cartoon'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="cartoon" class="option-label">Cartoon</label> | ||||||||||||||
| </div> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="pixellated" | ||||||||||||||
| name="visualStyle" | ||||||||||||||
| value="pixellated" | ||||||||||||||
| (click)="setConfig('visualStyle', 'pixellated')" | ||||||||||||||
| [checked]="gameSettings.visualStyle === 'pixellated'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="pixellated" class="option-label">Pixellated</label> | ||||||||||||||
| </div> | ||||||||||||||
| <div> | ||||||||||||||
| <input | ||||||||||||||
| type="radio" | ||||||||||||||
| id="mask" | ||||||||||||||
| name="visualStyle" | ||||||||||||||
| value="mask" | ||||||||||||||
| (click)="setConfig('visualStyle', 'mask')" | ||||||||||||||
| [checked]="gameSettings.visualStyle === 'mask'" | ||||||||||||||
| /> | ||||||||||||||
| <label for="mask" class="option-label">Mask</label> | ||||||||||||||
| <div class="selector-box"> | ||||||||||||||
| <button class="selector-trigger" type="button"> | ||||||||||||||
| <span class="selected-text">{{ getSelectedLabel('visualStyle') }}</span> | ||||||||||||||
| <span class="options-hint">+3 styles ▾</span> | ||||||||||||||
| </button> | ||||||||||||||
| <div class="selector-menu"> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('visualStyle', 'realistic')" [class.active]="gameSettings.visualStyle === 'realistic'"> | ||||||||||||||
| Realistic | ||||||||||||||
| </div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('visualStyle', 'cartoon')" [class.active]="gameSettings.visualStyle === 'cartoon'"> | ||||||||||||||
| Cartoon | ||||||||||||||
| </div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('visualStyle', 'pixellated')" [class.active]="gameSettings.visualStyle === 'pixellated'"> | ||||||||||||||
| Pixel Art | ||||||||||||||
| </div> | ||||||||||||||
| <div class="selector-option" (click)="setConfig('visualStyle', 'mask')" [class.active]="gameSettings.visualStyle === 'mask'"> | ||||||||||||||
| Mask | ||||||||||||||
| </div> | ||||||||||||||
| </div> | ||||||||||||||
| </div> | ||||||||||||||
| </div> | ||||||||||||||
|
|
||||||||||||||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -133,6 +133,7 @@ export class AppComponent implements AfterViewInit { | |||||
| currentScene: string = 'IOPuzzle_Fire'; | ||||||
| gameSettings: any = { | ||||||
| imageGenerator: 'imagen', | ||||||
| imageAnalysis: 'gemini', | ||||||
| visualStyle: 'realistic', | ||||||
| }; | ||||||
|
|
||||||
|
|
@@ -295,6 +296,37 @@ export class AppComponent implements AfterViewInit { | |||||
|
|
||||||
| loadPuzzle() {} | ||||||
|
|
||||||
| getSelectedLabel(category: string): string { | ||||||
| const val = this.gameSettings[category]; | ||||||
| if (category === 'imageGenerator') { | ||||||
| const labels: Record<string, string> = { | ||||||
| 'gemini': 'Gemini 3.1 Flash-Lite', | ||||||
| 'imagen': 'Imagen 4 Fast', | ||||||
| 'veo': 'Veo 3.1 Fast', | ||||||
| 'omni': 'Omni (Veo 3.1)', | ||||||
| 'gemini-anim': 'Gemini 3.1 Animation (4-Frame)', | ||||||
| 'gemma-cga': 'Gemma CGA Pixel Art (MediaPipe)', | ||||||
| }; | ||||||
| return labels[val] || 'Select Model'; | ||||||
| } else if (category === 'imageAnalysis') { | ||||||
| const labels: Record<string, string> = { | ||||||
| 'gemini': 'Gemini 2.5 Flash', | ||||||
| 'gemma-mediapipe': 'Gemma 4 (MediaPipe)', | ||||||
| 'chrome-llm': 'Chrome Built-in Model', | ||||||
| }; | ||||||
| return labels[val] || 'Gemini 2.5 Flash'; | ||||||
| } else if (category === 'visualStyle') { | ||||||
| const labels: Record<string, string> = { | ||||||
| 'realistic': 'Realistic', | ||||||
| 'cartoon': 'Cartoon', | ||||||
| 'pixellated': 'Pixel Art', | ||||||
| 'outline': 'Mask', | ||||||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The visual style key mapping in
Suggested change
|
||||||
| }; | ||||||
| return labels[val] || 'Realistic'; | ||||||
| } | ||||||
| return ''; | ||||||
| } | ||||||
|
|
||||||
| setConfig(key: string, value: any) { | ||||||
| this.gameSettings[key] = value; | ||||||
| this.updatePhaser(); | ||||||
|
|
||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To support converting the
.selector-optionelements fromdivto<button type="button">for accessibility, we should update the CSS to reset default button styles (like background, border, and text alignment).