more work on pre-game pages
This commit is contained in:
Lett Osprey
parent
987e2b5576
commit
7a8acf27a7
5 changed files with 259 additions and 180 deletions
|
|
@ -1,20 +1,20 @@
|
|||
import gleam/dynamic/decode
|
||||
import gleam/int
|
||||
import gleam/json
|
||||
import gleam/list
|
||||
import gleam/option.{type Option, None, Some}
|
||||
import gleam/result
|
||||
import gleam/string
|
||||
import lustre
|
||||
import lustre/attribute.{class}
|
||||
import lustre/effect.{type Effect}
|
||||
import lustre/element.{type Element}
|
||||
import lustre/element/html
|
||||
import lustre/event
|
||||
import model.{
|
||||
type Model, type Msg, AwaitPlayers, Empty, EnterPin, Initialize, KeyPin, Model,
|
||||
PickPlayer, Players, SelectedGamestyle, SelectedPlayer, SelectedRoom,
|
||||
}
|
||||
import plinth/browser/document
|
||||
import plinth/browser/element as plinth_element
|
||||
import rsvp
|
||||
import shared.{type Room}
|
||||
import view.{view}
|
||||
|
||||
pub fn main() {
|
||||
let initial_items =
|
||||
|
|
@ -32,10 +32,6 @@ pub fn main() {
|
|||
Nil
|
||||
}
|
||||
|
||||
type Model {
|
||||
Model(rooms: List(Room), state: State, ohno: Option(String))
|
||||
}
|
||||
|
||||
fn init(initial: #(List(Room), Option(String))) -> #(Model, Effect(Msg)) {
|
||||
let #(rooms, ohno) = initial
|
||||
let model = Model(rooms:, state: Empty, ohno:)
|
||||
|
|
@ -43,67 +39,68 @@ fn init(initial: #(List(Room), Option(String))) -> #(Model, Effect(Msg)) {
|
|||
#(model, effect.none())
|
||||
}
|
||||
|
||||
type State {
|
||||
Empty
|
||||
EnterPin(room: String, pin: String)
|
||||
AwaitPlayers(room: String, pin: String)
|
||||
PickPlayer(room: String, pin: String, players: List(String))
|
||||
}
|
||||
|
||||
type Msg {
|
||||
Initialize
|
||||
SelectRoom(String)
|
||||
SelectPlayer(String)
|
||||
KeyPin(String)
|
||||
Players(Result(String, rsvp.Error))
|
||||
}
|
||||
|
||||
fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
|
||||
case msg {
|
||||
Initialize -> init(#(model.rooms, None))
|
||||
SelectRoom(room) -> #(
|
||||
SelectedRoom(room) -> #(
|
||||
Model(..model, state: EnterPin(room:, pin: "")),
|
||||
effect.none(),
|
||||
)
|
||||
KeyPin(pin) ->
|
||||
KeyPin(pin) -> {
|
||||
//let _decode_answer = {
|
||||
// use id <- decode.field("id", decode.string)
|
||||
// use text <- decode.field("text", decode.string)
|
||||
// decode.success(id)
|
||||
// }
|
||||
// let decode_list = {
|
||||
// decode.list(decode.string)
|
||||
// }
|
||||
case model.state {
|
||||
EnterPin(room, _) -> {
|
||||
let decode_answer = {
|
||||
use id <- decode.field("id", decode.string)
|
||||
// use text <- decode.field("text", decode.string)
|
||||
decode.success(id)
|
||||
}
|
||||
// let decode_list = {
|
||||
// decode.list(decode.string)
|
||||
// }
|
||||
case string.length(pin) < 4 {
|
||||
False -> {
|
||||
#(
|
||||
Model(
|
||||
..model,
|
||||
state: PickPlayer(room:, pin:, players: ["Player a", "Player b", "Player c", "Player d", "Player e", "Player f"]),
|
||||
),
|
||||
effect.none(),
|
||||
)
|
||||
// Model(..model, state: AwaitPlayers(room:, pin:)),
|
||||
// rsvp.post(
|
||||
// "http://localhost:1234/api/room/players",
|
||||
// json.object([#("id", json.string("1234"))]),
|
||||
// rsvp.expect_json(decode_answer, Players),
|
||||
// ),
|
||||
// )
|
||||
}
|
||||
True -> #(
|
||||
Model(..model, state: EnterPin(room:, pin:)),
|
||||
effect.none(),
|
||||
)
|
||||
}
|
||||
}
|
||||
EnterPin(room, _) -> #(
|
||||
Model(..model, state: case string.length(pin) < 4 {
|
||||
False -> model.SelectGamestyle(room:, pin:)
|
||||
True -> EnterPin(room:, pin:)
|
||||
}),
|
||||
effect.none(),
|
||||
)
|
||||
_ ->
|
||||
init(#(model.rooms, Some("(EnterPin) Invalid state, starting over")))
|
||||
// Invalid model state, start over
|
||||
init(#(
|
||||
model.rooms,
|
||||
Some("(fail: enterpin) Invalid state, starting over"),
|
||||
))
|
||||
}
|
||||
|
||||
}
|
||||
SelectedGamestyle(style) -> {
|
||||
case model.state {
|
||||
model.SelectGamestyle(room:, pin:) -> #(
|
||||
Model(..model, state: case style {
|
||||
"Single Game" ->
|
||||
PickPlayer(room:, pin:, players: [
|
||||
"Player a",
|
||||
"Player b",
|
||||
"Player c",
|
||||
"Player d",
|
||||
"Player e",
|
||||
"Player f",
|
||||
])
|
||||
_ -> model.JoinLive(room:, pin:)
|
||||
}),
|
||||
effect.none(),
|
||||
)
|
||||
_ ->
|
||||
init(#(
|
||||
model.rooms,
|
||||
Some("(fail: selectgamestyle) Invalid state, starting over"),
|
||||
))
|
||||
}
|
||||
// Model(..model, state: AwaitPlayers(room:, pin:)),
|
||||
// rsvp.post(
|
||||
// "http://localhost:1234/api/room/players",
|
||||
// json.object([#("id", json.string("1234"))]),
|
||||
// rsvp.expect_json(decode_answer, Players),
|
||||
// ),
|
||||
// )
|
||||
}
|
||||
Players(Ok(players)) -> {
|
||||
echo "got players"
|
||||
case model.state {
|
||||
|
|
@ -111,8 +108,11 @@ fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
|
|||
Model(..model, state: PickPlayer(room:, pin:, players: [players])),
|
||||
effect.none(),
|
||||
)
|
||||
_ -> init(#(model.rooms, Some("Invalid state, expected AwaitPlayers")))
|
||||
// invalid state, start over
|
||||
_ ->
|
||||
init(#(
|
||||
model.rooms,
|
||||
Some("(fail: awaitplayers) Invalid state, starting over"),
|
||||
))
|
||||
}
|
||||
}
|
||||
Players(Error(x)) ->
|
||||
|
|
@ -120,15 +120,26 @@ fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
|
|||
model.rooms,
|
||||
Some("Error fetching players " <> decode_rsvp_error(x)),
|
||||
))
|
||||
SelectPlayer(x) -> init(#(model.rooms, Some("Players " <> x)))
|
||||
SelectedPlayer(player) ->
|
||||
case model.state {
|
||||
PickPlayer(room:, pin:, players: _) -> #(
|
||||
Model(..model, state: model.JoinSingle(room:, pin:, player:)),
|
||||
effect.none(),
|
||||
)
|
||||
_ ->
|
||||
init(#(
|
||||
model.rooms,
|
||||
Some("(fail: pickplayer) Invalid state, starting over"),
|
||||
))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn decode_rsvp_error(rsvp_error: rsvp.Error) {
|
||||
case rsvp_error {
|
||||
rsvp.BadBody -> "Bad body"
|
||||
rsvp.BadUrl(x) -> "Bad url"
|
||||
rsvp.HttpError(x) -> "Http error"
|
||||
rsvp.BadUrl(_x) -> "Bad url"
|
||||
rsvp.HttpError(_x) -> "Http error"
|
||||
rsvp.JsonError(x) -> "Json error" <> decode_decode_error(x)
|
||||
rsvp.NetworkError -> "Network error"
|
||||
rsvp.UnhandledResponse(_) -> "Unhandled response"
|
||||
|
|
@ -155,103 +166,3 @@ fn decode_ddecode_error(decode_error: decode.DecodeError) -> String {
|
|||
"(e: " <> expected <> ", f: " <> found <> ", p: " <> string.concat(path)
|
||||
}
|
||||
}
|
||||
|
||||
fn view(model: Model) -> Element(Msg) {
|
||||
html.div([], [
|
||||
html.div([class("terminal-header")], [
|
||||
html.div([class("terminal-status")], [
|
||||
html.span([class("status-blink")], [html.text("●")]),
|
||||
html.div([], [
|
||||
html.text(" SYSTEM READY"),
|
||||
]),
|
||||
html.div([], [
|
||||
case model.ohno {
|
||||
None -> element.none()
|
||||
Some(x) -> html.h3([], [html.text("Fail: " <> x)])
|
||||
},
|
||||
]),
|
||||
html.span([class("ml-8")], [
|
||||
html.text("<< Please Log On to use QuizTerm. >>"),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
case model.state {
|
||||
Empty -> view_room_list(model.rooms)
|
||||
EnterPin(_, _) -> pin()
|
||||
AwaitPlayers(_, _) -> html.text("FETCHING USERS FOR ROOM")
|
||||
PickPlayer(_, _, players) -> view_player_list(players)
|
||||
},
|
||||
])
|
||||
}
|
||||
|
||||
fn pin() -> Element(Msg) {
|
||||
html.div([attribute.class("terminal-section")], [
|
||||
html.div([attribute.class("terminal-label mb-4")], [
|
||||
html.text("Select room to play in"),
|
||||
]),
|
||||
html.div([attribute.class("participants-grid")], [
|
||||
html.text("Enter PIN code for room"),
|
||||
html.input([
|
||||
attribute.type_("password"),
|
||||
event.on_input(KeyPin),
|
||||
attribute.autofocus(True),
|
||||
]),
|
||||
]),
|
||||
])
|
||||
}
|
||||
|
||||
fn view_room_list(items: List(Room)) -> Element(Msg) {
|
||||
html.div([attribute.class("terminal-section")], [
|
||||
html.div([attribute.class("terminal-label mb-4")], [
|
||||
html.text("Select room to play in"),
|
||||
]),
|
||||
html.div([attribute.class("participants-grid")], case items {
|
||||
[] -> [html.text("No items in your list yet.")]
|
||||
_ -> {
|
||||
list.index_map(items, fn(item, index) {
|
||||
room_cell(index, item, SelectRoom)
|
||||
})
|
||||
}
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
fn view_player_list(items: List(String)) -> Element(Msg) {
|
||||
html.div([attribute.class("terminal-section")], [
|
||||
html.div([attribute.class("terminal-label mb-4")], [
|
||||
html.text("Select room to play in"),
|
||||
]),
|
||||
html.div([attribute.class("participants-grid")], case items {
|
||||
[] -> [html.text("No items in your list yet.")]
|
||||
_ -> {
|
||||
list.index_map(items, fn(item, index) {
|
||||
player_cell(index, item, SelectPlayer)
|
||||
})
|
||||
}
|
||||
}),
|
||||
])
|
||||
}
|
||||
|
||||
fn player_cell(
|
||||
number: Int,
|
||||
player: String,
|
||||
on_click: fn(String) -> msg,
|
||||
) -> Element(msg) {
|
||||
html.div([class("participant-login"), event.on_click(on_click(player))], [
|
||||
html.div([class("participant-name")], [
|
||||
html.text("► " <> "[#" <> int.to_string(number) <> "] " <> player),
|
||||
]),
|
||||
])
|
||||
}
|
||||
|
||||
fn room_cell(
|
||||
number: Int,
|
||||
room: Room,
|
||||
on_click: fn(String) -> msg,
|
||||
) -> Element(msg) {
|
||||
html.div([class("participant-login"), event.on_click(on_click(room.name))], [
|
||||
html.div([class("participant-name")], [
|
||||
html.text("► " <> "[#" <> int.to_string(number) <> "] Team " <> room.name),
|
||||
]),
|
||||
])
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue