discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

full test suite passes; .gear-btn once again moved, this time to new file _applets.scss, along with generic applet styling attrs (removed from _base & .dash, respectively); _gameboard.scss in many ways mirrors particularities of _dash, but also feat. style attrs for the Game Kit applet consumables array; sacrificed btn in the latter now that applet dimensions defined on gameboard.html
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details

Browse Source
This commit is contained in:
Disco DeDisco
2026-03-09 21:52:54 -04:00
parent 47d84b6bf2
commit 382dd5958f
9 changed files with 198 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/apps/gameboard/tests/integrated/test_views.py
View File

@@ -34,8 +34,8 @@ class GameboardViewTest(TestCase):
def test_gameboard_shows_new_game_applet(self):
[_] = self.parsed.cssselect("#id_applet_new_game")
def test_gameboard_shows_game_kit_btn(self):
[_] = self.parsed.cssselect("#id_game_kit_btn")
def test_gameboard_shows_game_kit(self):
[_] = self.parsed.cssselect("#id_game_kit")
def test_gameboard_shows_game_gear(self):
[_] = self.parsed.cssselect(".gear-btn")

1
src/apps/gameboard/views.py
View File

@@ -22,6 +22,7 @@ def gameboard(request):
"coin": coin,
"free_tokens": free_tokens,
"applets": applet_context(request.user, "gameboard"),
"page_class": "page-gameboard",
}
)

14
src/functional_tests/test_gameboard.py
View File

@@ -49,20 +49,12 @@ class GameboardNavigationTest(FunctionalTest):
# 1. Log in, nav to gameboard
self.create_pre_authenticated_session("capman@test.io")
self.browser.get(self.live_server_url + "/gameboard/")
# 2. Assert game kit & gear btns both present (stacked vertically)
# 2. Assert game kit applet & gear btn present
self.wait_for(
lambda: self.browser.find_element(By.ID, "id_game_kit_btn")
lambda: self.browser.find_element(By.ID, "id_game_kit")
)
self.browser.find_element(By.CSS_SELECTOR, ".gear-btn")
# 3. Click game kit btn to open panel
self.browser.find_element(By.ID, "id_game_kit_btn").click()
# 4. Wait for game kit panel to become visible
self.wait_for(
lambda: self.assertTrue(
self.browser.find_element(By.ID, "id_game_kit").is_displayed()
)
)
# 5. Assert Coin-on-a-String present in kit
# 3. Assert Coin-on-a-String present in kit
coin = self.browser.find_element(By.ID, "id_kit_coin_on_a_string")
# 6. Hover over it; assert tooltip shows name, entry text & reuse description
ActionChains(self.browser).move_to_element(coin).perform()

115
src/static_src/scss/_applets.scss Normal file
View File

@@ -0,0 +1,115 @@
// ── Gear button ────────────────────────────────────────────
.gear-btn {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
z-index: 1;
font-size: 2rem;
cursor: pointer;
color: rgba(var(--secUser), 1);
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: rgba(var(--priUser), 1);
border: 0.15rem solid rgba(var(--secUser), 1);
}
// ── Applet menu (shared structure) ─────────────────────────
%applet-menu {
position: absolute;
bottom: 3rem;
right: 0.5rem;
z-index: 100;
background-color: rgba(var(--priUser), 0.95);
border: 0.15rem solid rgba(var(--secUser), 0.5);
box-shadow:
0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5),
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
;
border-radius: 0.75rem;
padding: 1rem;
.menu-btns {
display: flex;
gap: 0.25rem;
margin-top: 0.75rem;
}
form {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 0.9em;
height: 0.9em;
border: 0.1rem solid rgba(var(--secUser), 0.4);
border-radius: 0.25rem;
background: transparent;
cursor: pointer;
position: relative;
flex-shrink: 0;
top: 0.1em;
&:checked::after {
content: '';
position: absolute;
left: 0.2em;
bottom: 0.2em;
width: 0.55em;
height: 1em;
border: 0.12em solid rgba(var(--ninUser), 1);
border-top: none;
border-left: none;
transform: rotate(45deg);
}
}
}
#id_dash_applet_menu { @extend %applet-menu; }
#id_game_applet_menu { @extend %applet-menu; }
// ── Applets grid (shared across all boards) ────────────────
%applets-grid {
container-type: inline-size;
--grid-gap: 0.5rem;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 3rem;
gap: var(--grid-gap);
padding: 0.75rem;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 2%,
black 98%,
transparent 100%
);
section {
border: 0.2rem solid rgba(var(--secUser), 0.5);
border-radius: 0.75rem;
padding: 1rem;
overflow: hidden;
min-width: 0;
grid-column: span var(--applet-cols, 12);
grid-row: span var(--applet-rows, 3);
@container (max-width: 550px) {
grid-column: span 12;
}
}
}
#id_applets_container { @extend %applets-grid; }
#id_game_applets_container { @extend %applets-grid; }

20
src/static_src/scss/_base.scss
View File

@@ -198,23 +198,3 @@ body {
}
}
}
.gear-btn {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
z-index: 1;
background: none;
border: none;
font-size: 2rem;
cursor: pointer;
color: rgba(var(--secUser), 1);
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: rgba(var(--priUser), 1);
border: 0.15rem solid rgba(var(--secUser), 1);
}

89
src/static_src/scss/_dashboard.scss
View File

@@ -28,90 +28,7 @@ body.page-dashboard {
position: relative;
}
#id_dash_applet_menu {
position: absolute;
bottom: 3rem;
right: 0.5rem;
z-index: 100;
background-color: rgba(var(--priUser), 0.95);
border: 0.15rem solid rgba(var(--secUser), 0.5);
box-shadow:
0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5),
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
;
border-radius: 0.75rem;
padding: 1rem;
.menu-btns {
display: flex;
gap: 0.25rem;
margin-top: 0.75rem;
}
form {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 0.9em;
height: 0.9em;
border: 0.1rem solid rgba(var(--secUser), 0.4);
border-radius: 0.25rem;
background: transparent;
cursor: pointer;
position: relative;
flex-shrink: 0;
top: 0.1em;
&:checked::after {
content: '';
position: absolute;
left: 0.2em;
bottom: 0.2em;
width: 0.55em;
height: 1em;
border: 0.12em solid rgba(var(--ninUser), 1);
border-top: none;
border-left: none;
transform: rotate(45deg);
}
}
}
#id_applets_container {
container-type: inline-size;
--grid-gap: 0.5rem;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 3rem;
gap: var(--grid-gap);
padding: 0.75rem;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 2%,
black 98%,
transparent 100%
);
section {
border: 0.2rem solid rgba(var(--secUser), 0.5);
border-radius: 0.75rem;
padding: 1rem;
overflow: hidden;
min-width: 0;
grid-column: span var(--applet-cols, 12);
grid-row: span var(--applet-rows, 3);
}
#id_applet_my_lists {
padding: 1.25rem 1.5rem;
display: flex;
@@ -220,12 +137,6 @@ body.page-dashboard {
min-width: 0;
overflow: hidden;
}
#id_applets_container {
section {
grid-column: span 12;
}
}
}
@media (min-width: 738px) {

73
src/static_src/scss/_gameboard.scss Normal file
View File

@@ -0,0 +1,73 @@
html:has(body.page-gameboard) {
overflow: hidden;
}
body.page-gameboard {
overflow: hidden;
.container {
overflow: hidden;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.row {
flex-shrink: 0;
margin-bottom: -1rem;
}
}
.gameboard-page {
flex: 1;
min-width: 425px;
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
}
@media (max-width: 550px) {
.gameboard-page {
min-width: 0;
overflow: hidden;
}
}
@media (min-width: 738px) {
.gameboard-page {
min-width: 666px;
}
}
#id_game_applets_container {
#id_applet_game_kit {
display: flex;
flex-direction: column;
#id_game_kit {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
overflow-x: auto;
scrollbar-width: none;
&::-webkit-scrollbar { display: none; }
}
}
}
@media (max-height: 500px) {
body.page-gameboard {
.container {
.row {
padding: 0.25rem 0;
.col-lg-6 h2 {
margin-bottom: 0.5rem;
}
}
}
}
}

2
src/static_src/scss/core.scss
View File

@@ -1,7 +1,9 @@
@import 'rootvars';
@import 'applets';
@import 'base';
@import 'button-pad';
@import 'dashboard';
@import 'gameboard';
@import 'palette-picker';
@import 'wallet-tokens';

9
src/templates/apps/gameboard/_partials/_applet-game-kit.html
View File

@@ -2,13 +2,8 @@
id="id_applet_game_kit"
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
<button
id="id_game_kit_btn"
onclick="document.getElementById('id_game_kit').style.display='block'"
>
Game Kit
</button>
<div id="id_game_kit" style="display: none;">
<h2>Game Kit</h2>
<div id="id_game_kit">
{% if coin %}
<div id="id_kit_coin_on_a_string" class="token">
<i class="fa-solid fa-clover"></i>