Initial commit

2020-12-28 23:30:20 +01:00
commit bb8162e4c1
536 changed files with 6007 additions and 0 deletions
--- a/static/game.html
+++ b/static/game.html
@@ -0,0 +1,523 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>DnD</title>
+    <link rel="stylesheet" href="/static/main.css">
+<style type="text/css">
+.pile-counter {
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    color: wheat;
+    background-color: darkred;
+    border-radius: 5px;
+    height: 24px;
+    width: 35px;
+    text-align: center;
+    font-size: 22px;
+    font-family: sans-serif;
+    line-height: 24px;
+}
+
+.player-area {
+    display: grid;
+    grid-template-columns: 100px auto 100px;
+    border: 1px solid black;
+    width: 100%;
+    height: 145px;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.card {
+    position: relative;
+    width: 90px;
+    margin: 1px;
+}
+
+.player-hand {
+    border: 1px solid red;
+    height: 100%;
+    margin: 0;
+    box-sizing: border-box;
+    top: 0;
+}
+
+.chat-window {
+    border: 1px solid black;
+    width: 300px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 100;
+}
+
+.supply-area {
+    position: relative;
+    padding-left: 30px;
+    padding-right: 300px;
+    background-color: dimgray;
+    box-sizing: border-box;
+    margin: 5px 0;
+    display: flex;
+    flex-flow: wrap;
+}
+
+.supply-area h3 {
+    position: relative;
+    top: 50px;
+    left: 0;
+    transform-origin: 0 0;
+    transform: rotate(90deg);
+    padding: 0;
+    margin: 0;
+    width: 0;
+}
+
+.draw-pile {
+    width: 90px;
+    position: relative;
+    height: 145px;
+}
+
+.opponent-hand {
+    width: 90px;
+    position: relative;
+    height: 145px;
+}
+
+.setup-screen {
+    display: none;
+}
+
+.discard-pile {
+    width: 90px;
+    border: 1px dotted green;
+    height: 145px;
+    box-sizing: border-box;
+} 
+
+.inplay-area {
+    width: 100%;
+    height: 180px;
+    position: relative;
+    box-sizing: border-box;
+    transition: height 0.4s ease;
+    background-color: dimgray;
+    box-sizing: border-box;
+    margin: 5px 0;
+}
+
+.inplay-area.inactive {
+    height: 0;
+    transition: height 0.4s ease;
+    overflow: hidden;
+}
+
+.turn-status {
+    line-height: 24px;
+    height: 24px;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    background-color: rgb(255 255 255 / 34%);
+    border-radius: 0 0 20px 20px;
+    padding: 0 20px 0;
+    transform: translate(-50%, 0);
+    opacity: 1;
+    transition: opacity 0.4s ease;
+}
+
+.inplay-area.inactive .turn-status {
+    opacity: 0;
+    transition: opacity 0.4s ease;
+}
+
+.opponent-area {
+    height: 180px;
+    display: flex;
+}
+
+.opponent-status {
+    grid-template-rows: 30px auto;
+    grid-template-columns: auto auto auto;
+    box-sizing: border-box;
+    margin: 0 5px;
+    border: 1px solid saddlebrown;
+    display: grid;
+    grid-gap: 2px;
+}
+
+.opponent-status.active {
+    box-shadow: 0 0 10px red;
+}
+
+.opponent-status .name {
+    grid-column-start: 1;
+    grid-column-end: span 3;
+    text-align: center;
+    grid-row-start: 1;
+    grid-row-end: 1;
+}
+
+.opponent-status .discard-pile {
+    grid-column-start: 1;
+    grid-column-end: 1;
+    grid-row-start: 2;
+    grid-row-end: 2;
+}
+
+.opponent-status .draw-pile {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row-start: 2;
+    grid-row-end: 2;
+}
+
+.opponent-status .opponent-hand {
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row-start: 2;
+    grid-row-end: 2;
+}
+
+.game-screen {
+    padding: 10px;
+}
+</style>
+<script src="/static/mithril.js"></script>
+</head>
+
+<body>
+    <div id="game"></div>
+    <script>
+        function Chat(initialVnode) {
+            var keyup = function(e) {
+                if (e.key == "Enter" && e.srcElement.value.length > 0) {
+                    let msg = { type: "Chat", message: e.srcElement.value };
+                    initialVnode.attrs.socket.send(JSON.stringify(msg));
+                    e.srcElement.value = "";
+                }
+            }
+
+            return {
+                view: function(vnode) {
+                    return m(".chat-window",
+                        m("h4", "Players"),
+                        m("ul", m("li", "Markus (you)")),
+                        m("h4", "Messages"),
+                        m("ul", {id: "chat"}),
+                        m("input", {
+                            id: "chat_input",
+                            placeholder: "Type to chat...",
+                            onkeyup: keyup
+                        })
+                    )
+                }
+            }
+        }
+
+        function SupplyPile(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".card",
+                        m("img", {class: "card", src: "/static/images/cards/" + vnode.attrs.name.toLowerCase() + ".jpg"}),
+                        m("span", {class: "pile-counter" }, vnode.attrs.count)
+                    )
+                }
+            }
+        }
+
+        
+        function SupplyArea(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".supply-area", 
+                        m("h3", "Supply"),
+                        vnode.attrs.supply.map(function(pile) {
+                            return m(SupplyPile, pile)
+                        })
+                    )
+                }
+            }
+        }
+
+
+        function DiscardPile(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".discard-pile", "Discard Pile")
+                }
+            }
+        }
+
+        function DrawPile(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".draw-pile",
+                        m("img", {class: "card", src: "/static/images/cards/Card_back.jpg"}),
+                        m("span", {class: "pile-counter" }, vnode.attrs.count)
+                    )
+                }
+            }
+        }
+
+        function PlayerHand(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".player-hand", "Player Hand",
+                        vnode.attrs.hand.map(function(card) {
+                            return m("img", {class: "card", src: "/static/images/cards/" + card.toLowerCase() + ".jpg"})
+                        })
+                    )
+                } 
+            }
+        }
+
+        function OpponentHand(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".opponent-hand",
+                        m("img", {class: "card", src: "/static/images/cards/Card_back.jpg"}),
+                        m("span", {class: "pile-counter" }, vnode.attrs.count)
+                    )
+                }
+            }
+        }
+
+        function InPlayArea(initialVnode) {
+            return {
+                view: function(vnode) {
+                    var active = vnode.attrs.active ? "" : "inactive";
+                    return m(".inplay-area", {class: active}, 
+                        "Player play area",
+                        m(".turn-status",
+                            "Actions: " + vnode.attrs.actions + " | Buys: " + vnode.attrs.buys + " | ",
+                            m("img", {src: "/static/images/64px-Coin.png", style: "height: 16px;"}),
+                            ": " + vnode.attrs.coin
+                        )
+                    )
+                }
+            }
+        }
+ 
+        function PlayerArea(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".player-area",
+                        m(DrawPile, {count: vnode.attrs.player_drawpile_count}),
+                        m(PlayerHand, vnode.attrs.player),
+                        m(DiscardPile)
+                    )
+                }
+            }
+        }
+
+        function OpponentStatus(initialVnode) {
+            return {
+                view: function(vnode) {
+                    var active = vnode.attrs.active ? "active" : "";
+                    return m(".opponent-status", {class: active },
+                        m(".name", vnode.attrs.name),
+                        m(DiscardPile),
+                        m(DrawPile, {count: vnode.attrs.draw_pile_count}),
+                        m(OpponentHand, {count: vnode.attrs.hand_count })
+                    )
+                }
+            }
+        }
+
+        function OpponentArea(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".opponent-area",
+                        vnode.attrs.opponents.map(function(o) {
+                            return m(OpponentStatus, o)
+                        })
+                    )
+                } 
+            }
+        }
+
+        function GameScreen(initialVnode) {
+            return {
+                view: function(vnode) {
+                    return m(".game-screen",
+                        m(OpponentArea, vnode.attrs),
+                        m(InPlayArea, vnode.attrs.opponent_turn_state),
+                        m(SupplyArea, vnode.attrs),
+                        m(InPlayArea, vnode.attrs.player_turn_state),
+                        m(PlayerArea, vnode.attrs)
+                    )
+                }
+            }
+        }
+
+    
+        function SetupScreen(initialVnode) {
+            var start_click = function(e) {
+                console.log("start_click", e);
+                
+                let msg = { id: "start_game" };
+                initialVnode.attrs.socket.send(JSON.stringify(msg));
+            }
+
+ 
+            return {
+                view: function(vnode) {
+                    return m(".setup-screen",
+                        m("h3", "Setup"),
+                        m("h4", "Basic cards"),
+                        m(".basic-cards",
+                            vnode.attrs.basic_cards.map(function(card) {
+                                return m("img", {class: "card", src: "/static/images/cards/" + card.toLowerCase() + ".jpg"})
+                            })
+                        ),
+                        m("h4", "Kingdom Cards"),
+                        m(".kingdom-cards",
+                            vnode.attrs.kingdom_cards.map(function(card) {
+                                return m("img", {class: "card", src: "/static/images/cards/" + card.toLowerCase() + ".jpg"})
+                            })
+                        ),
+                        m("h4", "Starting Deck"),
+                        m(".start-deck",
+                            vnode.attrs.starting_deck.map(function(card) {
+                                return m("img", {class: "card", src: "/static/images/cards/" + card.toLowerCase() + ".jpg"})
+                            })
+                        ),
+                        m("button", {onclick: start_click}, "Start Game")
+                   )
+                }
+            }
+        }
+
+        var game_state;
+
+        function App(initialVnode) {
+            if (document.location.protocol == "https:") {
+                url = document.location.href.replace("https://", "wss://") + "/ws";
+            } else {
+                url = document.location.href.replace("http://", "ws://") + "/ws";
+            }
+            const webSocket = new WebSocket(url);
+        
+            var setup_state = {
+                starting_deck: [],
+                basic_cards: ["Copper", "Silver", "Gold", "Estate", "Duchery", "Province", "Curse"],
+                kingdom_cards: ["Cellar", "Moat", "Village", "Merchant", "Workshop", "Smithy", "Remodel", "Militia", "Market", "Mine"],
+                socket: webSocket
+            }
+
+            var handle_setup = function(data) {
+                setup_state.starting_deck = data.deck;
+            }
+
+            game_state = {
+                supply: [
+                    { name: "Copper", count: 46 },
+                    { name: "Silver", count: 38 },
+                    { name: "Gold", count: 30 },
+                    { name: "Estate", count: 8 },
+                    { name: "Duchery", count: 8 },
+                    { name: "Province", count: 8 },
+                    { name: "Curse", count: 10 },
+
+                    { name: "Cellar", count: 10},
+                    { name: "Moat", count: 10},
+                    { name: "Village", count: 10},
+                    { name: "Merchant", count: 10},
+                    { name: "Workshop", count: 10},
+
+                    { name: "Smithy", count: 10},
+                    { name: "Remodel", count: 10},
+                    { name: "Militia", count: 10},
+                    { name: "Market", count: 10},
+                    { name: "Mine", count: 10}
+                ],
+                opponent_turn_state: {
+                    actions: 1,
+                    buys: 1,
+                    coin: 0,
+                    active: false
+                },
+                player_turn_state: {
+                    actions: 1,
+                    buys: 1,
+                    coin: 0,
+                    active: true
+                },
+                player_drawpile_count: 10,
+                player: {
+                    hand: []
+                },
+                opponents: [
+                    {
+                        name: "Alice",
+                        draw_pile_count: 10,
+                        hand_count: 5,
+                        active: true
+                    },
+                    {
+                        name: "Bob",
+                        draw_pile_count: 8,
+                        hand_count: 5
+                    },
+                    {
+                        name: "Mallory",
+                        draw_pile_count: 10,
+                        hand_count: 3
+                    }
+                ]
+            }
+
+            var chat_state = {
+                socket: webSocket
+            }
+
+            webSocket.onopen = function(event) {
+                console.log("ws open");
+                //webSocket.send("HALLO");
+            };
+
+            webSocket.onmessage = function(event) {
+                var msg = JSON.parse(event.data);
+
+                if (msg.type == "Chat") {
+                    let chatDiv = document.getElementById("chat");
+                    let newmsg = document.createElement("li");
+                    newmsg.innerHTML = msg.sender + ": " + msg.message;
+                    chatDiv.append(newmsg);
+                    //newmsg.scrollIntoView();
+                } else if (msg.type == "PlayerJoined") {
+                    let chatDiv = document.getElementById("chat");
+                    let newmsg = document.createElement("li");
+                    newmsg.innerHTML = msg.player + " joined the game.";
+                    chatDiv.append(newmsg);
+                    //newmsg.scrollIntoView();
+                } else if (msg.id == "setup") {
+                    handle_setup(msg.setup);
+                } else {
+                    console.log("event?");
+                    console.log(event.data);
+                }
+
+                m.redraw();
+            }
+
+            return {
+                view: function(vnode) {
+                    return [
+                        m(SetupScreen, setup_state),
+                        m(GameScreen, game_state),
+                        m(Chat, chat_state)
+                    ]
+                }
+            }
+        }
+
+        m.mount(document.getElementById("game"), App)
+    </script>
+</body>
+</html>
--- a/static/images/64px-Coin.png
+++ b/static/images/64px-Coin.png
--- a/static/images/cards/Card_back.jpg
+++ b/static/images/cards/Card_back.jpg
--- a/static/images/cards/abandoned-mine.jpg
+++ b/static/images/cards/abandoned-mine.jpg
--- a/static/images/cards/academy.jpg
+++ b/static/images/cards/academy.jpg
--- a/static/images/cards/acting-troupe.jpg
+++ b/static/images/cards/acting-troupe.jpg
--- a/static/images/cards/advance.jpg
+++ b/static/images/cards/advance.jpg
--- a/static/images/cards/adventurer.jpg
+++ b/static/images/cards/adventurer.jpg
--- a/static/images/cards/advisor.jpg
+++ b/static/images/cards/advisor.jpg
--- a/static/images/cards/alchemist.jpg
+++ b/static/images/cards/alchemist.jpg
--- a/static/images/cards/alms.jpg
+++ b/static/images/cards/alms.jpg
--- a/static/images/cards/altar.jpg
+++ b/static/images/cards/altar.jpg
--- a/static/images/cards/ambassador.jpg
+++ b/static/images/cards/ambassador.jpg
--- a/static/images/cards/amulet.jpg
+++ b/static/images/cards/amulet.jpg
--- a/static/images/cards/annex.jpg
+++ b/static/images/cards/annex.jpg
--- a/static/images/cards/apothecary.jpg
+++ b/static/images/cards/apothecary.jpg
--- a/static/images/cards/apprentice.jpg
+++ b/static/images/cards/apprentice.jpg
--- a/static/images/cards/aqueduct.jpg
+++ b/static/images/cards/aqueduct.jpg
--- a/static/images/cards/archive.jpg
+++ b/static/images/cards/archive.jpg
--- a/static/images/cards/arena.jpg
+++ b/static/images/cards/arena.jpg
--- a/static/images/cards/armory.jpg
+++ b/static/images/cards/armory.jpg
--- a/static/images/cards/artificer.jpg
+++ b/static/images/cards/artificer.jpg
--- a/static/images/cards/artisan.jpg
+++ b/static/images/cards/artisan.jpg
--- a/static/images/cards/avanto.jpg
+++ b/static/images/cards/avanto.jpg
--- a/static/images/cards/bad-omens.jpg
+++ b/static/images/cards/bad-omens.jpg
--- a/static/images/cards/bag-of-gold.jpg
+++ b/static/images/cards/bag-of-gold.jpg
--- a/static/images/cards/baker.jpg
+++ b/static/images/cards/baker.jpg
--- a/static/images/cards/ball.jpg
+++ b/static/images/cards/ball.jpg
--- a/static/images/cards/band-of-misfits.jpg
+++ b/static/images/cards/band-of-misfits.jpg
--- a/static/images/cards/bandit-camp.jpg
+++ b/static/images/cards/bandit-camp.jpg
--- a/static/images/cards/bandit-fort.jpg
+++ b/static/images/cards/bandit-fort.jpg
--- a/static/images/cards/bandit.jpg
+++ b/static/images/cards/bandit.jpg
--- a/static/images/cards/bank.jpg
+++ b/static/images/cards/bank.jpg
--- a/static/images/cards/banquet.jpg
+++ b/static/images/cards/banquet.jpg
--- a/static/images/cards/bard.jpg
+++ b/static/images/cards/bard.jpg
--- a/static/images/cards/baron.jpg
+++ b/static/images/cards/baron.jpg
--- a/static/images/cards/barracks.jpg
+++ b/static/images/cards/barracks.jpg
--- a/static/images/cards/basilica.jpg
+++ b/static/images/cards/basilica.jpg
--- a/static/images/cards/bat.jpg
+++ b/static/images/cards/bat.jpg
--- a/static/images/cards/baths.jpg
+++ b/static/images/cards/baths.jpg
--- a/static/images/cards/battlefield.jpg
+++ b/static/images/cards/battlefield.jpg
--- a/static/images/cards/bazaar.jpg
+++ b/static/images/cards/bazaar.jpg
--- a/static/images/cards/beggar.jpg
+++ b/static/images/cards/beggar.jpg
--- a/static/images/cards/bishop.jpg
+++ b/static/images/cards/bishop.jpg
--- a/static/images/cards/black-market.jpg
+++ b/static/images/cards/black-market.jpg
--- a/static/images/cards/blessed-village.jpg
+++ b/static/images/cards/blessed-village.jpg
--- a/static/images/cards/bonfire.jpg
+++ b/static/images/cards/bonfire.jpg
--- a/static/images/cards/border-guard.jpg
+++ b/static/images/cards/border-guard.jpg
--- a/static/images/cards/border-village.jpg
+++ b/static/images/cards/border-village.jpg
--- a/static/images/cards/borrow.jpg
+++ b/static/images/cards/borrow.jpg
--- a/static/images/cards/bridge-troll.jpg
+++ b/static/images/cards/bridge-troll.jpg
--- a/static/images/cards/bridge.jpg
+++ b/static/images/cards/bridge.jpg
--- a/static/images/cards/bureaucrat.jpg
+++ b/static/images/cards/bureaucrat.jpg
--- a/static/images/cards/bustling-village.jpg
+++ b/static/images/cards/bustling-village.jpg
--- a/static/images/cards/butcher.jpg
+++ b/static/images/cards/butcher.jpg
--- a/static/images/cards/cache.jpg
+++ b/static/images/cards/cache.jpg
--- a/static/images/cards/canal.jpg
+++ b/static/images/cards/canal.jpg
--- a/static/images/cards/candlestick-maker.jpg
+++ b/static/images/cards/candlestick-maker.jpg
--- a/static/images/cards/capital.jpg
+++ b/static/images/cards/capital.jpg
--- a/static/images/cards/capitalism.jpg
+++ b/static/images/cards/capitalism.jpg
--- a/static/images/cards/captain.jpg
+++ b/static/images/cards/captain.jpg
--- a/static/images/cards/caravan-guard.jpg
+++ b/static/images/cards/caravan-guard.jpg
--- a/static/images/cards/caravan.jpg
+++ b/static/images/cards/caravan.jpg
--- a/static/images/cards/cargo-ship.jpg
+++ b/static/images/cards/cargo-ship.jpg
--- a/static/images/cards/cartographer.jpg
+++ b/static/images/cards/cartographer.jpg
--- a/static/images/cards/castles.jpg
+++ b/static/images/cards/castles.jpg
--- a/static/images/cards/catacombs.jpg
+++ b/static/images/cards/catacombs.jpg
--- a/static/images/cards/catapult.jpg
+++ b/static/images/cards/catapult.jpg
--- a/static/images/cards/cathedral.jpg
+++ b/static/images/cards/cathedral.jpg
--- a/static/images/cards/cellar.jpg
+++ b/static/images/cards/cellar.jpg
--- a/static/images/cards/cemetery.jpg
+++ b/static/images/cards/cemetery.jpg
--- a/static/images/cards/champion.jpg
+++ b/static/images/cards/champion.jpg
--- a/static/images/cards/chancellor.jpg
+++ b/static/images/cards/chancellor.jpg
--- a/static/images/cards/changeling.jpg
+++ b/static/images/cards/changeling.jpg
--- a/static/images/cards/chapel.jpg
+++ b/static/images/cards/chapel.jpg
--- a/static/images/cards/chariot-race.jpg
+++ b/static/images/cards/chariot-race.jpg
--- a/static/images/cards/charm.jpg
+++ b/static/images/cards/charm.jpg
--- a/static/images/cards/church.jpg
+++ b/static/images/cards/church.jpg
--- a/static/images/cards/citadel.jpg
+++ b/static/images/cards/citadel.jpg
--- a/static/images/cards/city-gate.jpg
+++ b/static/images/cards/city-gate.jpg
--- a/static/images/cards/city-quarter.jpg
+++ b/static/images/cards/city-quarter.jpg
--- a/static/images/cards/city.jpg
+++ b/static/images/cards/city.jpg
--- a/static/images/cards/cobbler.jpg
+++ b/static/images/cards/cobbler.jpg
--- a/static/images/cards/coin-of-the-realm.jpg
+++ b/static/images/cards/coin-of-the-realm.jpg
--- a/static/images/cards/colonnade.jpg
+++ b/static/images/cards/colonnade.jpg
--- a/static/images/cards/colony.jpg
+++ b/static/images/cards/colony.jpg
--- a/static/images/cards/conclave.jpg
+++ b/static/images/cards/conclave.jpg
--- a/static/images/cards/conquest.jpg
+++ b/static/images/cards/conquest.jpg
--- a/static/images/cards/conspirator.jpg
+++ b/static/images/cards/conspirator.jpg
--- a/static/images/cards/contraband.jpg
+++ b/static/images/cards/contraband.jpg
--- a/static/images/cards/copper.jpg
+++ b/static/images/cards/copper.jpg
--- a/static/images/cards/coppersmith.jpg
+++ b/static/images/cards/coppersmith.jpg
--- a/static/images/cards/council-room.jpg
+++ b/static/images/cards/council-room.jpg
--- a/static/images/cards/count.jpg
+++ b/static/images/cards/count.jpg
--- a/static/images/cards/counterfeit.jpg
+++ b/static/images/cards/counterfeit.jpg
--- a/static/images/cards/counting-house.jpg
+++ b/static/images/cards/counting-house.jpg
--- a/static/images/cards/courtier.jpg
+++ b/static/images/cards/courtier.jpg
--- a/static/images/cards/courtyard.jpg
+++ b/static/images/cards/courtyard.jpg
--- a/static/images/cards/crop-rotation.jpg
+++ b/static/images/cards/crop-rotation.jpg
--- a/static/images/cards/crossroads.jpg
+++ b/static/images/cards/crossroads.jpg
--- a/Show More
+++ b/Show More